@import url("https://fonts.googleapis.com/css2?family=Metamorphous&display=swap");
:root {
  /* this has to be set to switch between light or dark */
  color-scheme: light dark;

  --light-bg: #fffef9;
  --light-color: #100a0a;

  --dark-bg: #100a0a;
  --dark-color: #fffef9;

  --line-color: #666;
  --neutral-color: #00000040;

  --moth: rgb(169 190 191);
  --toad: rgb(129 131 37);
  --bird: rgb(191 58 52);
  --hare: rgb(234 178 39);
  --stag: rgb(29 99 58);
  --carp: rgb(101 120 172);
  /* https://boardgamereview.co.uk/wp-content/uploads/2025/02/Courtisans-board-game-review-All-Family-Cards-2048x643.png */

  --base-font-size: 1.5rem;
  --accent-color: blue;

  --success-color: #539a00;
  --fail-color: #c70000;

  --table-font-size: var(--base-font-size);
}
.light {
  /* forces light color-scheme */
  color-scheme: light;
}
.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
    --neutral-color: #ffffff70;
}
@media (prefers-color-scheme: dark) {
  body {
    color-scheme: dark;
  }
}
body {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

.moth {
  --family-color: var(--moth);
  --charlen: 7;
}
.toad {
  --family-color: var(--toad);
  --charlen: 4;
}
.bird {
  --family-color: var(--bird);
  --charlen: 3;
}
.hare {
  --family-color: var(--hare);
}
.stag {
  --family-color: var(--stag);
}
.carp {
  --family-color: var(--carp);
}
xxxtbody tr th {
  font-size: calc(var(--base-font-size) / var(--charlen, 4) * 4) !important;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-width: 100%;
  align-content: center;
  justify-content: center;
  align-items: center;
}
#wrap {
  display: grid;
}
section {
  font-family: Metamorphous;
  font-size: var(--base-font-size);
  position: relative;
  border-radius: 8px;
  /*background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0.1));*/
  color: white;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  /*width: clamp(300px, 70%, 100%);*/
  margin: auto;
}

#scoreboard-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.toprow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.nextprev {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

table {
  color: light-dark(var(--light-color), var(--dark-color));
  font-family: Metamorphous;
  --table-font-size: clamp(
    calc(var(--base-font-size) * 0.5),
    calc((40vw - var(--base-font-size)) / 8),
    var(--base-font-size)
  );
  font-size: var(--table-font-size);
  border-collapse: collapse;
  /*width: 100%;
  border-radius: 6px;*/
  /*background-color: rgba(255, 255, 255, 0.05);*/
}
th,
td {
  padding: 8px;
  text-align: center;
  border: 1px solid var(--line-color);
}
td {
  border-width: 0 0 1px 1px;
}
td.touchinput {
  user-select: none;
  cursor: ns-resize;
}
td.bns {
  user-select: none;
  cursor: pointer;
  padding:6px;
}
td.ed {
  user-select: none;
  cursor: pointer;
}
thead th {
  border-width: 0 0 1px 1px;
  min-width: 2ch;
}
th[contenteditable] {
  /*background-color: rgba(255,255,255,0.01);*/
}
th[contenteditable]:hover {
  /*background-color: rgba(255,255,255,0.5);*/
  color: var(--accent-color);
  cursor: text;
}
thead th,
thead td {
  border-bottom-width: 3px;
  white-space: nowrap;
  vertical-align: baseline;
}
.tfoot th,
.tfoot td {
  border-top-width: 3px;
  border-bottom-width: 0px;
}
tbody tr th,
.tfoot th {
  text-align: right;
  /*max-width: 3ch;*/
}
.tfoot th {
  opacity: 0.5;
}

tr th:first-child {
  border-left-width: 0;
  border-left-color: var(--family-color);
}

tr[class] th {
  box-shadow: 0px 0 0px inset var(--family-color);
  color: var(--family-color);
}

tr:not(.tfoot) td {
  color: var(--neutral-color);
}

/**/
tr.disgraced td {
  color: var(--fail-color);
}
tr.esteemed td {
  color: var(--success-color);
}

.ed[ed_state="0"] {
  color: var(--success-color);
}
.ed[ed_state="1"] {
  color: var(--fail-color);
}

.bonusrow th {
  /*font-size: smaller;*/
  opacity: 0.5;
}
.bonusrow td {
}
.bns[bns_state="0"] {
  color: var(--success-color);
}
.bns[bns_state="1"] {
  color: var(--fail-color);
}
.bonusrow:nth-child(2) {
  border-bottom:2px solid var(--line-color);
}

.ed, .ef {
  min-width: 2ch !important;
  max-width: 3ch !important;
}
th.ef {
  font-size: calc(var(--table-font-size) * 0.7);
}

td.ed,
th[colspan],
th.ef {
  border-right-width: 3px;
}
td.ed {
    font-size: calc(var(--table-font-size) + 8px);
    padding: 0;
    font-family: monospace;
    font-weight: 900;
    vertical-align: top;
  /* text-shadow: 0px 0px 5px white, 0px 0px 4px white, 0px 0px 0.5em currentColor;*/
}
td:not(.ed) {
  width: 40%;
}
/*th[colspan]{
    min-width: 10ch;
    max-width: 10ch;
}*/

.tfoot {
  font-size: calc(var(--table-font-size) * 1.2);
}
button {
  opacity: 0.4;
  font-size: var(--base-font-size);
  aspect-ratio: 1;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  line-height: 1;
  border: 2px solid light-dark(var(--dark-bg), var(--light-bg));
  color: light-dark(var(--dark-bg), var(--light-bg));
  background-color: light-dark(var(--dark-color), var(--light-color));

  cursor: pointer;
}
button[aria-hidden] {
  opacity: 0.05;
  cursor: not-allowed;
  pointer-events: none;
}

@media (hover: hover) {
  button:hover {
    border-color: light-dark(var(--light-bg), var(--dark-bg));
    color: light-dark(var(--light-bg), var(--dark-bg));
    background-color: light-dark(var(--light-color), var(--dark-color));
  }
}

/* Touch-specific styling */
button:active {
  border-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-bg), var(--dark-bg));
  background-color: light-dark(var(--light-color), var(--dark-color));
}

#scoreboard-counter {
  font-size: 1rem;
}

#scoreboard-counter {
  color: var(--line-color);
}

#addPlayer {
}

#scoreboard {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: opacity, transform;
}

#scoreboard.fade-out-left {
  opacity: 0;
  transform: translateX(-25%);
}

#scoreboard.fade-out-right {
  opacity: 0;
  transform: translateX(25%);
}

#scoreboard.fade-in {
  opacity: 1;
  transform: translateX(0);
}

@media print {
  #scoreboard-counter,
  .nextprev,
  #addPlayer,
  button {
    display: none !important;
  }
}


#scoreboard-container .touchinput {
  touch-action: none; /* Critical to disable pan/scroll on touch devices */
}