:root {
  color-scheme: light;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
  --background: #f3f0e9;
  --foreground: #39362f;
  --border: #c7b69e;
  --player-zero: #853e3e;
  --player-one: #416348;
  --accent: var(--player-zero);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
}
body[data-player="1"] {
  --accent: var(--player-one);
}
button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
main {
  --header-height: 76px;
  width: calc(100% - 24px);
  height: calc(100dvh - 12px);
  margin: 0 auto;
  display: grid;
  grid-template-rows: var(--header-height) minmax(0, 1fr);
}
#play-area {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc((100dvh - var(--header-height) - 12px) * 3 / 4));
  aspect-ratio: 3 / 4;
  place-self: center;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.debug-trigger {
  margin-left: auto;
}
#debug-dialog {
  width: min(420px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  padding: 20px;
}
#debug-dialog::backdrop {
  background: #0006;
}
#debug-dialog h2 {
  margin-top: 0;
  font-size: 20px;
}
#debug-dialog p {
  font-size: 14px;
}
#debug-dialog ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}
#debug-dialog li button {
  width: 100%;
  text-align: left;
  min-height: 44px;
  white-space: normal;
}
body:has(.debug-trigger) header {
  flex-wrap: wrap;
  align-content: center;
  gap: 6px 12px;
}
@media (max-width: 480px) {
  body:has(.debug-trigger) main {
    --header-height: 100px;
  }
  body:has(.debug-trigger) .game-heading {
    width: 100%;
  }
  .debug-trigger {
    margin-left: 0;
  }
}
.game-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
}
.win-hint {
  font-size: 13px;
  white-space: nowrap;
  opacity: 0.7;
}
h1 {
  font-size: clamp(21px, 4vw, 30px);
  letter-spacing: -1.2px;
  margin: 0;
  font-weight: 650;
}
h1 span {
  opacity: 0.5;
  font-weight: 400;
}
.quiet {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 12px;
  color: var(--foreground);
  background: var(--background);
  font-size: 12px;
  white-space: nowrap;
}
.quiet:hover {
  border-color: var(--accent);
}
.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--board-size), minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  gap: 0.65cqw;
  padding: 2.9cqw;
  border: 4px ridge #795239;
  border-radius: 5px;
  background: linear-gradient(115deg, #896044, #69452f 55%, #503322);
  box-shadow:
    0 6px 0 #372217,
    0 18px 22px #51433035;
}
.cell {
  position: relative;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(115deg, #f4e2c3, #e4c89d 70%, #dac099);
  box-shadow:
    inset 1px 2px 2px #76512644,
    0 1px #fff8;
  aspect-ratio: 1;
  padding: 0;
  min-width: 0;
  min-height: 0;
}
.board::before,
.cell::before,
.turn-button::before,
.player-plaque::before,
.result-plaque::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.3;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="420" height="420"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".012 .48" numOctaves="3" seed="8"/%3E%3CfeColorMatrix type="saturate" values="0"/%3E%3C/filter%3E%3Cpath fill="%23896335" filter="url(%23n)" opacity=".48" d="M0 0h420v420H0z"/%3E%3C/svg%3E');
  mix-blend-mode: multiply;
}
.activation-glow {
  position: absolute;
  left: calc(50% + var(--gx) * (50% + 0.325cqw));
  top: calc(50% + var(--gy) * (50% + 0.325cqw));
  width: 3px;
  height: 80%;
  transform: translate(-50%, -50%) rotate(var(--angle));
  border-radius: 50%;
  background: linear-gradient(transparent, #fff4c4 25%, #fff4c4 75%, transparent);
  box-shadow:
    0 0 5px 2px #ffdd9199,
    0 0 12px 4px #ffd17a55;
  filter: blur(0.7px);
  opacity: 0;
  transition: opacity 180ms ease-out;
  pointer-events: none;
  z-index: 3;
}
.activation-glow.diagonal {
  height: 24%;
}
.activation-glow.active {
  opacity: 1;
}
.cell[aria-disabled="true"] {
  cursor: default;
}
.cell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #29180f;
  opacity: 0;
  transition: opacity 180ms ease-out;
  pointer-events: none;
}
.cell.drop-target::after,
.cell.turn-target::after {
  opacity: 0.38;
}
@media (hover: hover) {
  .cell[aria-disabled="false"]:hover::after {
    opacity: 0.38;
  }
}
.bottom-area {
  position: absolute;
  inset: 75% 0 0;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 26fr);
  gap: 6cqw;
  padding: 2cqw 3cqw;
  pointer-events: none;
}
.hand-space {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  overflow: clip;
}
.player-plaque,
.result-plaque {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 360ms cubic-bezier(0.22, 0.8, 0.25, 1),
    opacity 360ms ease-in-out,
    visibility 0s;
}
.player-plaque.withdrawn,
.result-plaque.withdrawn {
  opacity: 0;
  transform: translateY(35cqw);
  visibility: hidden;
  transition:
    transform 360ms cubic-bezier(0.22, 0.8, 0.25, 1),
    opacity 180ms ease-out,
    visibility 0s 360ms;
}
.player-plaque {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  padding: 1.3cqw;
  border: 1px solid #ac906c;
  border-radius: 3px;
  background: linear-gradient(115deg, #f4e2c3, #e4c89d 70%, #dac099);
  box-shadow:
    inset 0 1px 2px #76512644,
    0 1px 0 #fff8;
  color: var(--accent);
  font:
    4.6cqw/1.4 Georgia,
    serif;
  pointer-events: none;
}
.player-plaque > span {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  border: 1px solid #a98b6266;
  text-shadow: 0 1px #fff7;
  white-space: nowrap;
}
body[data-player="1"] .bottom-area {
  grid-template-columns: minmax(0, 26fr) minmax(0, 62fr);
}
body[data-player="1"] .hand-space {
  grid-column: 2;
}
body[data-player="1"] .player-plaque {
  grid-column: 1;
}
.result-plaque {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  min-height: 22cqw;
  padding: 3cqw;
  border: 4px double #ac906c;
  border-radius: 4px;
  background: linear-gradient(115deg, #f4e2c3, #e4c89d);
  box-shadow: inset 0 1px 3px #76512644;
  color: #60523e;
  font:
    normal 6cqw/1.2 Georgia,
    serif;
  text-align: center;
}
.result-plaque[data-result="0"] {
  color: var(--player-zero);
}
.result-plaque[data-result="1"] {
  color: var(--player-one);
}
.game-ended .activation-glow {
  opacity: 0;
}
.winning-lines .cell:not(.winning),
.winning-lines .card.on-board:not(.winning) {
  opacity: 0.55;
}
.hands {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  height: 25%;
  pointer-events: none;
}
.hand {
  position: relative;
  width: 50%;
}
.turn-actions {
  --accent: var(--player-zero);
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
}
.turn-actions[data-player="1"] {
  --accent: var(--player-one);
}
.action-row {
  display: flex;
  width: 252px;
  gap: 12px;
  transform: scale(var(--action-scale));
  transition: transform 360ms cubic-bezier(0.22, 0.8, 0.25, 1);
}
.turn-actions.withdrawn .action-row {
  transform: translateY(35cqw) scale(var(--action-scale));
}
.turn-button {
  position: relative;
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid #947047;
  border-radius: 5px;
  background: linear-gradient(115deg, #f4e2c3, #e4c89d 70%, #dac099);
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 #fff6df,
    0 6px 0 #926d46,
    0 10px 12px #37221730;
  pointer-events: auto;
  transition:
    transform 100ms ease,
    box-shadow 100ms ease,
    filter 100ms ease;
}
.action-row .turn-button {
  flex: none;
  width: 120px;
  height: 120px;
  font:
    normal 26px/1.05 Georgia,
    serif;
  white-space: normal;
}
.action-row .turn-button::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #a98b6266;
  pointer-events: none;
}
.action-row .turn-button > span:first-child {
  width: 76px;
  text-align: center;
}
.turn-button > span {
  position: relative;
}
.turn-button .arrow {
  font-size: 20px;
  font-weight: 400;
}
.action-row .turn-button .arrow {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 32px;
  height: 24px;
  color: #ac906c;
  /* Gate-card etch offsets and blur, with highlights/shadows matched to maple. */
  filter: drop-shadow(-0.6px -0.7px 0.25px #fff6df) drop-shadow(0.7px 1px 0.4px #765126d9);
}
.action-row .arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#restart {
  flex: none;
  padding: 0 12px;
}
#restart,
.reset-turn {
  color: #574737;
}
@media (hover: hover) {
  .turn-button:hover {
    filter: brightness(1.07);
  }
}
.turn-button:active {
  filter: brightness(0.96);
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 3px #56371935,
    0 1px 0 #926d46,
    0 2px 3px #37221726;
}
.turn-actions.withdrawn .turn-button {
  pointer-events: none;
}
#cards {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Focus handoffs during entrance must not scroll this viewport-coordinate layer. */
  overflow: clip;
}
.hand-cards,
.turn-actions {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  transition: opacity 360ms ease-in-out;
}
.hand-cards.withdrawn,
.turn-actions.withdrawn {
  opacity: 0;
  /* Finish fading while the 360ms slide still has noticeable movement. */
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}
.card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  transform-origin: top left;
  opacity: 1;
  transition: transform 360ms cubic-bezier(0.22, 0.8, 0.25, 1);
  color: var(--player-zero);
  pointer-events: auto;
}
.card[data-player="1"] {
  color: var(--player-one);
}
.card-face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  touch-action: none;
  user-select: none;
  filter: brightness(1);
  transition: filter 180ms ease-out;
}
.card-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 3px #51433035);
  transition: filter 180ms ease-out;
}
.on-board .card-art {
  position: absolute;
  inset: 1%;
  width: 98%;
  height: 98%;
  filter: drop-shadow(0 1px 1px #29180f55);
}
.raised .card-art {
  filter: drop-shadow(0 9px 5px #29180f66);
}
.card.subdued .card-face {
  filter: brightness(0.7);
}
.card-face:disabled {
  cursor: default;
  opacity: 1;
}
.card.selected::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 12px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}
.card.shake .card-face {
  animation: gate-shake 320ms ease-in-out;
}
@keyframes gate-shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-3deg);
  }
  45% {
    transform: rotate(3deg);
  }
  70% {
    transform: rotate(-2deg);
  }
  85% {
    transform: rotate(1deg);
  }
}
.card.on-board[data-value="0"] {
  color: var(--player-zero);
}
.card.on-board[data-value="1"] {
  color: var(--player-one);
}
.card.withdrawn {
  pointer-events: none;
}
.player-plaque.entering,
.hand-cards.entering,
.turn-actions.entering,
.turn-actions.entering .action-row,
.card.entering {
  transition: none;
}
@property --drag-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
.card.dragging {
  transition: --drag-scale 150ms ease-out;
  z-index: 50 !important;
}
.undo-overlay {
  touch-action: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 2px solid currentColor;
  border-radius: 8px;
  padding: 0;
  color: inherit;
  background: #e4c89d;
  display: grid;
  place-items: center;
}
.undo-overlay svg {
  width: 85%;
  height: 85%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-height: 500px) {
  main {
    --header-height: 54px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card.shake .card-face {
    animation: none;
  }
  .player-plaque,
  .player-plaque.withdrawn,
  .result-plaque,
  .result-plaque.withdrawn,
  .hand-cards,
  .hand-cards.withdrawn,
  .turn-actions,
  .turn-actions.withdrawn,
  .action-row,
  .turn-button,
  .card,
  .card.dragging,
  .card-face,
  .card-art,
  .cell::after,
  .activation-glow {
    transition: none;
  }
}