/* sambung., KAISAR's circuit puzzle (play.html). Loaded after styles.css and sections.css, which give it the
   site's type and colours. The page stands on the site's ink, taken down to near black, so that copper reads as
   light. The board itself is drawn by play.js on one canvas that fills the window behind everything; what is
   laid out here is the words and controls on top of it. .play__grid is the board's place: the script reads its
   box on every frame and draws the tiles there, so moving or resizing it here moves the board. */

.play-page { background: #170611; color-scheme: dark; scrollbar-color: #5b3a6b #170611; }

.play {
  --night: #170611;
  --rule: rgb(213 196 222 / 0.18);          /* hairlines on the dark ground */
  --pad: clamp(0.75rem, 2.4vw, 2.25rem);
  --row: clamp(0.55rem, 1.9vh, 1.1rem);     /* the space between the blocks beside the board */
  margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: clip;
  background: none; color: var(--on-ink);
}
.play [hidden] { display: none !important; }      /* the site shows every img as a block, which would undo the attribute */
.play :focus-visible { outline: 2px solid var(--on-ink); outline-offset: 3px; border-radius: 4px; }
.play ::selection { background: var(--copper-lit); color: var(--night); }

.play__canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }

/* ---------- The layout: one grid. On a phone everything is stacked round the board; on a wide window the
   words stand in a column on the left and the board takes the rest. ---------- */

.play__shell {
  position: relative; z-index: 1;
  display: grid; align-content: start; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: repeat(6, auto) minmax(0, 1fr) auto;
  grid-template-areas: "mark intro back" "stats stats stats" "stage stage stage" "goal goal goal" "sectors sectors sectors" "actions actions actions" "kai kai kai" "foot foot foot";
  gap: 0.7rem 0.7rem;
  min-height: 100vh; min-height: 100dvh; padding: 0.7rem var(--pad) 0.9rem;
}
.play__mark { grid-area: mark; } .play__back { grid-area: back; } .play__intro { grid-area: intro; }
.play__stats { grid-area: stats; } .play__stage { grid-area: stage; } .play__goal { grid-area: goal; }
.play__sectors { grid-area: sectors; } .play__actions { grid-area: actions; } .play__kai { grid-area: kai; } .play__foot { grid-area: foot; }

.play__mark { display: block; width: 2.1rem; }
.play__back {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.6rem 0;
  font: 500 0.8125rem/1 var(--text); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--on-ink-soft);
  transition: color 0.25s var(--ease-out);
}
.play__back svg { width: 1em; height: 1em; transition: translate 0.35s var(--ease-out); }
.play__back:hover { color: var(--on-ink); }
.play__back:hover svg { translate: -0.2em 0; }
@media (max-width: 379px) { .play__back span { display: none; } }      /* a narrow phone has room for the title or the whole link, not both */

.play__eyebrow { margin: 0 0 0.5rem; font: 500 0.75rem/1.2 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-lit); }
.play__title { margin: 0; font: 800 1rem/0.94 var(--display); font-size: 2rem; letter-spacing: -0.02em; }
.play__lede { margin: 0.8rem 0 0; max-width: 30ch; font: 400 1.0625rem/1.4 var(--text); color: var(--on-ink-soft); }
.play__intro .play__eyebrow, .play__lede { display: none; }      /* on a phone the board says it; the goal line below repeats it */

.play__stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0.55rem 0; border-block: 1px solid var(--rule); }
.play__stats div { display: grid; gap: 0.3rem; }
.play__stats dt { font: 500 0.6875rem/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-soft); }
.play__stats dd { margin: 0; font: 600 1.0625rem/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }

.play__stage { display: grid; place-items: center; min-width: 0; padding: 0.35rem 0.5rem; outline: none; }
.play__grid {
  display: grid; grid-template: repeat(var(--n, 4), minmax(0, 1fr)) / repeat(var(--n, 4), minmax(0, 1fr));
  width: min(100%, max(20.5rem, 100vh - 22rem)); width: min(100%, max(20.5rem, 100dvh - 22rem)); aspect-ratio: 1;      /* never so small that an 8 by 8 board is hard to press; a short phone scrolls instead */
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; cursor: pointer;
}
/* One button per tile, for the keyboard and for screen readers. They are never seen: the canvas draws the tile
   and the ring round the one in focus, and a press is worked out from where it lands on the tilted board. */
.play__tile { appearance: none; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: transparent; pointer-events: none; }
.play .play__tile:focus-visible { outline: none; }
.play__nojs { margin: 0; padding: 2rem; text-align: center; color: var(--on-ink-soft); }
.play__nojs a { color: var(--copper-lit); }

.play__goal { margin: 0; min-height: 1.35em; font: 400 0.875rem/1.35 var(--text); color: var(--on-ink-soft); }
.play__goal strong { font-weight: 600; color: var(--on-ink); }

.play__sectors { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0.5rem 0.3rem; margin: 0; padding: 0; list-style: none; }
.play__sector { --tone: var(--copper-lit); display: flex; align-items: center; gap: 0.35rem; min-width: 0; font: 500 0.75rem/1 var(--display); color: #a691b3; transition: color 0.4s var(--ease-out); }
.play__sector canvas { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(213 196 222 / 0.28); background: rgb(23 6 17 / 0.6); transition: box-shadow 0.4s var(--ease-out); }
.play__sector.is-lit { color: var(--on-ink); }
@media (max-width: 349px) { .play__sector { gap: 0.25rem; font-size: 0.6875rem; } .play__sector canvas { width: 1.35rem; height: 1.35rem; } }      /* the narrowest phones */
.play__sector.is-lit canvas { box-shadow: inset 0 0 0 1.5px var(--tone), 0 0 0.9rem -0.15rem var(--tone); }

.play__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.play__actions .play__btn { flex: 1 1 auto; }
.play__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 2.75rem; padding: 0 0.85rem;
  border: 1.5px solid rgb(232 146 104 / 0.5); border-radius: 10px; background: rgb(23 6 17 / 0.6); color: var(--copper-lit);
  font: 500 0.75rem/1 var(--text); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.play__btn:hover { background: var(--copper-lit); border-color: var(--copper-lit); color: var(--night); }
.play__btn:active { transform: translateY(1px); }
.play__btn[aria-pressed="true"] { background: rgb(232 146 104 / 0.18); border-color: var(--copper-lit); color: var(--on-ink); }
.play__btn[aria-pressed="true"]:hover { background: var(--copper-lit); color: var(--night); }
.play__btn--go { background: var(--copper); border-color: var(--copper); color: #fff; }
.play__btn--go:hover { background: var(--copper-lit); border-color: var(--copper-lit); color: var(--night); }

/* ---------- Kai: a line of help while the board is open, and the result once it is solved ---------- */

.play__kai { display: flex; align-items: flex-end; align-self: start; gap: 0.6rem; min-height: 4.25rem; }
.play__kai-figure { flex: none; width: 2.6rem; }
.play__kai-figure img { width: 100%; }
.play__kai-hello { display: none; }
.play__say {
  flex: 1; min-width: 0; margin-bottom: 0.5rem; padding: 0.6rem 0.85rem;
  border: 1px solid var(--rule); border-radius: 16px 16px 16px 5px; background: rgb(34 11 44 / 0.82);
}
.play__hint { margin: 0; font: 400 0.9375rem/1.35 var(--text); color: var(--on-ink); }
.play__result-title { margin: 0 0 0.3rem; font: 800 1.6rem/1 var(--display); letter-spacing: -0.02em; outline: none; }
.play__result-line { margin: 0 0 0.8rem; font: 400 0.9375rem/1.35 var(--text); color: var(--on-ink-soft); }
.play__result-line strong { font-weight: 600; color: var(--copper-lit); }

.play__kai.is-cheering .play__kai-think { display: none; }
.play__kai.is-cheering .play__kai-hello { display: block; }
.play__kai.is-cheering .play__hint { display: none; }
.play__kai.is-cheering .play__say { border-color: rgb(232 146 104 / 0.55); }

.play__foot { margin: 0; font: 400 0.8125rem/1.4 var(--text); color: #a691b3; }
.play__live, .play__said { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }      /* for screen readers only */

/* ---------- Phones: the result comes up from the bottom of the screen, under the lit board ---------- */

@media (max-width: 899px) {
  /* The woven field runs under the words; a shade at the top and bottom keeps them easy to read. */
  .play__shell::before {
    content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
    background: linear-gradient(rgb(23 6 17 / 0.78), rgb(23 6 17 / 0) 7.5rem, rgb(23 6 17 / 0) 46%, rgb(23 6 17 / 0.72) 62%);
  }
  .play__kai.is-cheering {
    position: fixed; inset: auto 0 0 0; z-index: 5; align-items: flex-end;
    padding: 2.5rem var(--pad) max(1rem, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgb(23 6 17 / 0.97) 68%, rgb(23 6 17 / 0));
  }
  .play__kai.is-cheering .play__kai-figure { width: 5.4rem; }
  .play__kai.is-cheering .play__say { margin-bottom: 0.4rem; }
}

/* ---------- Wide windows: words in a column on the left, the board on the right ---------- */

@media (min-width: 900px) {
  .play__shell {
    grid-template-columns: 2.9rem minmax(14rem, 19.5rem) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "mark back stage" "intro intro stage" "stats stats stage" "goal goal stage" "sectors sectors stage" "actions actions stage" "kai kai stage" "foot foot stage";
    gap: var(--row) 0.9rem; height: 100vh; height: 100dvh; min-height: 40rem; padding: clamp(1rem, 3vh, 1.75rem) var(--pad);
  }
  /* The woven field runs under the words; a shade keeps them easy to read. */
  .play__shell::before {
    content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 34rem; pointer-events: none;
    background: linear-gradient(90deg, rgb(23 6 17 / 0.86) 55%, rgb(23 6 17 / 0));
  }
  .play__mark { width: 2.9rem; }
  .play__intro .play__eyebrow, .play__lede { display: block; }
  .play__title { font-size: clamp(3.25rem, 9.5vh, 5rem); }
  .play__stats dd { font-size: 1.1875rem; }
  .play__stage { grid-row: 1 / -1; height: 100%; padding-left: clamp(0.5rem, 2vw, 2.5rem); }
  .play__grid { width: min(100%, 100vh - 8rem, 52rem); width: min(100%, 100dvh - 8rem, 52rem); }
  .play__goal { font-size: 0.9375rem; }
  .play__sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: clamp(0.4rem, 1.3vh, 0.7rem) 1rem; }
  .play__sector { gap: 0.65rem; font-size: 1.0625rem; }
  .play__sector canvas { width: 2.25rem; height: 2.25rem; }
  .play__btn { padding: 0 0.7rem; }
  .play__sheet .play__btn, .play__btn--go { font-size: 0.8125rem; padding: 0 1.1rem; }
  .play__kai { align-self: end; gap: 0.75rem; }
  .play__kai-figure { width: clamp(3.6rem, 9.5vh, 5.2rem); }
  .play__kai.is-cheering .play__kai-figure { width: clamp(4.6rem, 12.5vh, 7rem); }
  .play__say { margin-bottom: 1.1rem; padding: 0.8rem 1rem; }
  .play__result-title { font-size: 1.9rem; }
}
@media (min-width: 900px) and (max-height: 820px) { .play__lede { display: none; } }

/* ---------- The two sheets: how to play, and the ending ---------- */

.play__sheet {
  width: min(34rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid rgb(232 146 104 / 0.4); border-radius: 20px; background: #220b2c; color: var(--on-ink);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
}
.play__sheet::backdrop { background: rgb(12 3 9 / 0.6); }
.play__finale::backdrop { background: rgb(12 3 9 / 0.38); }
.play__sheet-title { margin: 0 0 1.1rem; font: 800 1rem/0.96 var(--display); font-size: clamp(2rem, 6.5vw, 3rem); letter-spacing: -0.02em; text-wrap: balance; }
.play__sheet p { margin: 0 0 1rem; font: 400 1rem/1.5 var(--text); color: var(--on-ink-soft); }
.play__steps { margin: 0 0 1.1rem; padding: 0; list-style: none; counter-reset: step; }
.play__steps li { position: relative; margin: 0; padding: 0.7rem 0 0.7rem 2.6rem; border-top: 1px solid var(--rule); font: 400 1rem/1.45 var(--text); color: var(--on-ink-soft); counter-increment: step; }
.play__steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.62rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border: 1.5px solid var(--copper-lit); border-radius: 50%; font: 600 0.8125rem/1 var(--display); color: var(--copper-lit);
}
.play__steps strong { font-weight: 600; color: var(--on-ink); }
.play__sheet .play__keys { font-size: 0.875rem; }
.play__sheet-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }

/* The ending. Kai leans out over the top edge, the way the committee's cards let a figure come up out of its block. */
.play__finale { overflow: visible; margin: auto auto 0.75rem; }      /* on a phone it sits low, and the lit board shows above it */
.play__finale-kai { position: absolute; right: 1.5rem; bottom: calc(100% - 1.6rem); width: clamp(6.5rem, 22vw, 9rem); pointer-events: none; }
.play__finale .play__sheet-title { max-width: 11ch; }
.play__medals { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(0.25rem, 1.2vw, 0.6rem); margin: 0 0 1.2rem; padding: 0; list-style: none; }
.play__medals canvas { display: block; width: 100%; height: auto; border-radius: 50%; background: rgb(23 6 17 / 0.7); }
.play__sheet .play__totals { font: 600 1.0625rem/1.3 var(--display); color: var(--copper-lit); }
@media (min-width: 900px) { .play__finale { margin: auto auto auto clamp(1rem, 3.5vw, 3.5rem); } }      /* beside the board, which is the show */

@media (prefers-reduced-motion: no-preference) {
  .play__say { transition: border-color 0.4s var(--ease-out); }
  .play__kai.is-cheering .play__kai-figure { animation: play-rise 0.7s var(--ease-out) both; }
  .play__kai.is-cheering .play__say { animation: play-rise 0.6s 0.08s var(--ease-out) both; }
  .play__sheet[open] { animation: play-rise 0.5s var(--ease-out) both; }
  .play__finale[open] .play__medals li { animation: play-medal 0.6s var(--ease-out) both; animation-delay: calc(0.35s + var(--k, 0) * 0.11s); }
  .play__finale[open] .play__finale-kai { animation: play-rise 0.8s 0.2s var(--ease-out) both; }
}
@keyframes play-rise { from { opacity: 0; translate: 0 1.1rem; } }
@keyframes play-medal { from { opacity: 0; scale: 0.4; } 60% { scale: 1.12; } }