/* Tiny Across (practice edition), One Page Toys No. 119.
   The look is lifted from the daily at tinyacross.com (src/index.css there) so
   the two read as one game; the OPT chrome (daily banner, overlay, frame,
   shared badges) is added at the bottom. Self-contained. */

:root {
  --bg0: #070a18;
  --bg1: #10152f;
  --bg2: #1d2556;
  --ink: #f4efe6;
  --ink-2: #bcc2e3;
  --ink-3: #8a92bd;
  --line: rgba(188, 194, 227, 0.14);

  --mint: #3ee6b4;
  --mint-hi: #74f6d2;
  --mint-deep: #169e75;
  --mint-pale: #d5f9ec;
  --mint-pale-2: #bdf0dd;
  --mint-pale-edge: #85cdb2;

  --tile: #f8f3ea;
  --tile-2: #ece5d7;
  --tile-edge: #c2b9a6;
  --tile-ink: #141933;

  --tray: #1a2149;
  --tray-2: #141a3b;
  --hole: #090c1f;

  --wrong: #df4a40;
  --reveal: #5664d4;

  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;

  --board: min(92vw, 440px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; min-height: 100%; }
html { background: var(--bg0); }
body {
  background:
    radial-gradient(90% 55% at 50% -5%, rgba(62, 230, 180, 0.07), transparent 60%),
    radial-gradient(120% 80% at 50% 0%, var(--bg2) 0%, var(--bg1) 42%, var(--bg0) 100%) fixed;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  -webkit-user-select: none;
  user-select: none;
}
.dot { opacity: 0.5; margin: 0 0.3em; }

/* ------------------------------------------------------------------ header */

.top {
  width: min(100%, 1000px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 0 8px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 4px 4px 4px 0; cursor: default; text-align: left;
}
.app button.brand[aria-label*="back"] { cursor: pointer; }
.mark {
  position: relative;
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--mint-hi), var(--mint));
  color: #0b1b1a;
  font: 800 19px/1 var(--font);
  padding-top: 3px;
  box-shadow: 0 3px 0 var(--mint-deep), 0 6px 14px rgba(62, 230, 180, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.mark__n { position: absolute; top: 3px; left: 5px; font-size: 9px; font-weight: 700; opacity: 0.75; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark { font: 650 21px/1.05 var(--serif); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.brand__sub { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 3px; }

.top__tools { display: flex; align-items: center; gap: 2px; }
.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 15px;
  color: var(--ink-2);
  padding: 5px 10px;
  margin-right: 4px;
  border-radius: 999px;
  background: rgba(188, 194, 227, 0.07);
  min-width: 52px; text-align: center;
}
.timer.is-live { color: var(--ink); }
.iconbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 11px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  touch-action: manipulation;
}
.iconbtn:hover { background: rgba(188, 194, 227, 0.08); color: var(--ink); }
.iconbtn[aria-expanded="true"] { background: rgba(62, 230, 180, 0.14); color: var(--mint); }
.menuwrap { position: relative; }

/* ------------------------------------------------------------------ stage */

.stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 36px;
  margin-top: 10px;
}
.play { display: flex; flex-direction: column; align-items: center; }
.boardwrap { position: relative; }

/* ------------------------------------------------------------------ tray + tiles */

.tray {
  --gap: calc(var(--board) * 0.021);
  --pad: calc(var(--board) * 0.034);
  --thick: max(3px, calc(var(--board) * 0.011));
  width: var(--board);
  padding: var(--pad) var(--pad) calc(var(--pad) + var(--thick));
  border-radius: calc(var(--board) * 0.055);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(180deg, var(--tray), var(--tray-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -4px 10px rgba(0, 0, 0, 0.45),
    0 2px 0 rgba(255, 255, 255, 0.03),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 8px 18px rgba(0, 0, 0, 0.35);
  perspective: 900px;
}
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }

.cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 15%;
  background: linear-gradient(180deg, var(--tile) 0%, var(--tile-2) 100%);
  box-shadow:
    0 var(--thick) 0 var(--tile-edge),
    0 calc(var(--thick) + 3px) 7px rgba(0, 0, 0, 0.45),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(90, 70, 40, 0.07);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.cell--block {
  cursor: default;
  background: radial-gradient(80% 80% at 50% 35%, #0e1230, var(--hole));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.cell.is-word {
  background: linear-gradient(180deg, var(--mint-pale) 0%, var(--mint-pale-2) 100%);
  box-shadow:
    0 var(--thick) 0 var(--mint-pale-edge),
    0 calc(var(--thick) + 3px) 7px rgba(0, 0, 0, 0.42),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9);
}
.cell.is-cursor {
  background: linear-gradient(180deg, var(--mint-hi) 0%, var(--mint) 100%);
  box-shadow:
    0 var(--thick) 0 var(--mint-deep),
    0 0 0 2px rgba(116, 246, 210, 0.45),
    0 calc(var(--thick) + 8px) 20px rgba(62, 230, 180, 0.32),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
  z-index: 1;
}
.cell__ch {
  position: relative;
  z-index: 2;
  font-weight: 650;
  font-size: calc(var(--board) * 0.1);
  line-height: 1;
  color: var(--tile-ink);
  transform: translateY(7%);
}
.cell__num {
  position: absolute;
  z-index: 2;
  top: 6%; left: 10%;
  font-size: max(9px, calc(var(--board) * 0.029));
  font-weight: 600;
  line-height: 1;
  color: rgba(20, 25, 51, 0.58);
}
.cell.is-wrong .cell__ch { color: var(--wrong); }
.cell.is-wrong::after {
  content: "";
  position: absolute; z-index: 3;
  left: 16%; right: 16%; top: 50%;
  height: max(2px, calc(var(--board) * 0.006));
  background: var(--wrong);
  border-radius: 2px;
  transform: rotate(-38deg);
  opacity: 0.85;
}
.cell.is-revealed .cell__ch { color: var(--reveal); }
.cell.is-revealed::before {
  content: "";
  position: absolute; z-index: 3;
  top: 0; right: 0;
  width: 26%; height: 26%;
  border-top-right-radius: 55%;
  background: linear-gradient(225deg, var(--reveal) 50%, transparent 50%);
}
.cell.is-down { cursor: default; }

/* a letter landing: it drops onto the tile and the tile dips under it */
.cell__ch.is-pop { animation: letter-drop 0.24s cubic-bezier(0.25, 1.5, 0.5, 1); }
@keyframes letter-drop {
  0% { transform: translateY(-22%) scale(1.3); opacity: 0.2; }
  55% { transform: translateY(10%) scale(0.95); opacity: 1; }
  100% { transform: translateY(7%) scale(1); }
}
/* ⚠ :not(.is-solved) matters: this selector outranks `.cell.is-solved`, and without
   the guard the final tile typed keeps its dip and skips the solve flip. */
.cell:not(.is-solved):has(> .cell__ch.is-pop) { animation: tile-dip 0.2s ease-out; }
@keyframes tile-dip {
  0% { translate: 0 0; }
  40% { translate: 0 calc(var(--thick) * 0.6); }
  100% { translate: 0 0; }
}

/* a word completed: a light sweep along it */
.cell__ch.is-flash { animation: sweep 0.5s ease-out calc((var(--c) + var(--r)) * 45ms) both; }
@keyframes sweep {
  0% { filter: none; }
  35% { filter: drop-shadow(0 0 6px rgba(62, 230, 180, 0.9)) brightness(1.25); transform: translateY(0) scale(1.12); }
  100% { filter: none; transform: translateY(7%) scale(1); }
}

/* full but wrong */
.tray--nope { animation: shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* solved: a wave of flips from the top-left corner, each tile turning mint */
.cell.is-solved::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--mint-pale), var(--mint-pale-2));
  opacity: 0;
  animation: turn-mint 0.7s calc(var(--d) * 70ms) forwards;
}
.cell.is-solved { animation: flip 0.7s cubic-bezier(0.45, 0, 0.3, 1) calc(var(--d) * 70ms) both; }
.cell.is-solved .cell__num { color: rgba(8, 60, 46, 0.55); }
.tray--solved { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -4px 10px rgba(0, 0, 0, 0.45), 0 24px 70px rgba(62, 230, 180, 0.14), 0 8px 18px rgba(0, 0, 0, 0.35); transition: box-shadow 1.2s ease 0.6s; }
@keyframes turn-mint { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes flip {
  0% { transform: rotateX(0); }
  49% { transform: rotateX(90deg); box-shadow: 0 var(--thick) 0 var(--tile-edge), 0 calc(var(--thick) + 3px) 7px rgba(0, 0, 0, 0.45); }
  50% { transform: rotateX(90deg); box-shadow: 0 var(--thick) 0 var(--mint-pale-edge), 0 calc(var(--thick) + 3px) 7px rgba(0, 0, 0, 0.45); }
  100% { transform: rotateX(0); box-shadow: 0 var(--thick) 0 var(--mint-pale-edge), 0 calc(var(--thick) + 6px) 16px rgba(62, 230, 180, 0.22), inset 0 1.5px 0 rgba(255, 255, 255, 0.9); }
}
.cell.is-done { filter: saturate(0.85); }

/* Start: tiles turn face up in a ripple */
.tray--deal .cell:not(.cell--block) { animation: deal 0.5s cubic-bezier(0.3, 1.3, 0.5, 1) calc(var(--d) * 40ms) both; }
@keyframes deal {
  0% { transform: rotateY(90deg) scale(0.9); }
  100% { transform: rotateY(0) scale(1); }
}

/* ------------------------------------------------------------------ start card */

.start {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  border-radius: calc(var(--board) * 0.055);
  background: rgba(8, 11, 26, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.start__card {
  width: min(86%, 330px);
  padding: 24px 22px 22px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(31, 38, 84, 0.96), rgba(18, 23, 54, 0.96));
  border: 1px solid rgba(188, 194, 227, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: rise 0.35s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
.start__eyebrow { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }
.start__title { margin: 6px 0 4px; font: 650 36px/1.05 var(--serif); letter-spacing: -0.015em; }
.start__note { margin: 0 auto 18px; max-width: 250px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.start__streak { margin: 14px 0 0; font-size: 13px; color: var(--mint); }

/* ------------------------------------------------------------------ buttons */

.btn {
  appearance: none;
  border: 0;
  border-radius: 13px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 16px;
  color: #062019;
  background: linear-gradient(180deg, var(--mint-hi), var(--mint));
  box-shadow: 0 4px 0 var(--mint-deep), 0 10px 22px rgba(62, 230, 180, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--mint-deep), 0 4px 10px rgba(62, 230, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn--big { padding: 14px 44px; font-size: 18px; }
.btn--ghost {
  color: var(--ink);
  background: rgba(188, 194, 227, 0.08);
  box-shadow: inset 0 0 0 1px rgba(188, 194, 227, 0.22), 0 3px 0 rgba(0, 0, 0, 0.35);
}
.btn--ghost:active { box-shadow: inset 0 0 0 1px rgba(188, 194, 227, 0.22); }
.linkbtn {
  appearance: none; border: 0; background: none; padding: 4px 2px;
  font-size: 14px; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: rgba(188, 194, 227, 0.35); text-underline-offset: 3px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--ink); }

/* ------------------------------------------------------------------ clue bar */

.cluebar {
  width: var(--board);
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 14px;
}
.cluebar__arrow {
  flex: 0 0 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 13px;
  background: rgba(188, 194, 227, 0.06);
  color: var(--ink-2);
  cursor: pointer;
  touch-action: manipulation;
}
.cluebar__arrow:active { background: rgba(62, 230, 180, 0.16); color: var(--mint); }
.cluebar__text {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 60px;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 14px;
  border: 0; border-radius: 15px;
  text-align: left;
  background: linear-gradient(180deg, #252e66, #1c2352);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  touch-action: manipulation;
}
.cluebar__tag {
  flex: 0 0 auto;
  font-weight: 750; font-size: 13px;
  padding: 5px 7px 4px;
  border-radius: 8px;
  color: #06201a;
  background: var(--mint);
  box-shadow: 0 2px 0 var(--mint-deep);
}
.cluebar__clue {
  font-size: 17px; font-weight: 500; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ------------------------------------------------------------------ clue lists (wide screens) */

.lists {
  width: 330px;
  max-height: calc(var(--board) + 74px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 2px 4px 2px 0;
}
.list__h {
  margin: 0 0 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.list__item button {
  width: 100%;
  display: flex; gap: 12px; align-items: baseline;
  text-align: left;
  padding: 9px 12px;
  border: 0; border-radius: 11px;
  background: transparent;
  cursor: pointer;
  font-size: 16px; line-height: 1.3;
  color: var(--ink-2);
}
.list__item button:hover { background: rgba(188, 194, 227, 0.06); }
.list__num { font-weight: 700; min-width: 16px; color: var(--ink-3); }
.list__item.is-full .list__clue { color: var(--ink-3); }
.list__item.is-cross button { background: rgba(62, 230, 180, 0.06); }
.list__item.is-active button { background: rgba(62, 230, 180, 0.16); color: var(--ink); }
.list__item.is-active .list__num { color: var(--mint); }

/* ------------------------------------------------------------------ keyboard */

.kb {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px max(5px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-right));
  background: linear-gradient(180deg, rgba(7, 10, 24, 0) 0%, rgba(7, 10, 24, 0.9) 10px);
}
.kb__row { display: flex; gap: 5px; justify-content: center; }
.kb__key {
  flex: 1 1 0;
  max-width: 48px;
  height: 50px;
  display: grid; place-items: center;
  border: 0; border-radius: 9px;
  font-weight: 600; font-size: 19px;
  color: #eef0ff;
  background: linear-gradient(180deg, #343d78, #272f62);
  box-shadow: 0 3px 0 #10143a, 0 6px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.13);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
.kb__key:active {
  transform: translateY(3px);
  background: linear-gradient(180deg, #4550a0, #343e84);
  box-shadow: 0 0 0 #10143a, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.kb__key--wide { flex: 1.55 1 0; max-width: 74px; }

/* ------------------------------------------------------------------ toast */

.toast {
  position: absolute; left: 50%; bottom: 14px; z-index: 6;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  background: rgba(10, 13, 32, 0.92);
  border: 1px solid rgba(188, 194, 227, 0.16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: toast 2.6s ease both;
}
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  10%, 85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 4px); }
}

/* ------------------------------------------------------------------ help menu */

.menu {
  position: absolute; right: -6px; top: 46px; z-index: 30;
  width: 228px;
  padding: 8px;
  border-radius: 16px;
  background: #1a2150;
  border: 1px solid rgba(188, 194, 227, 0.16);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: rise 0.18s ease-out both;
}
.menu__k { margin: 6px 10px 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.menu__item {
  display: block; width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0; border-radius: 10px;
  background: transparent;
  font-size: 15px; color: var(--ink);
  cursor: pointer;
}
.menu__item:hover { background: rgba(188, 194, 227, 0.08); }
.menu__item--danger { color: #ff8f86; }
.menu__confirm { padding: 4px 10px 2px; }
.menu__confirm p { margin: 4px 0 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.menu__row { display: flex; gap: 4px; margin: 0 -10px; }
.menu__foot { margin: 8px 10px 4px; font-size: 12px; color: var(--ink-3); }

/* ------------------------------------------------------------------ phases + screens */

/* Solving on a phone: the page is exactly one screen. Header, tray, clue bar,
   and the keyboard pinned under them; nothing scrolls. The tray takes whatever
   height is left, so a short phone gets a smaller grid rather than a clipped one. */
body.is-typing.is-touch .stage { margin-top: 4px; }
/* On a short phone the tray shrinks to fit the height, but the clue bar should
   not shrink with it: a clue wrapping onto two lines in a narrow box is harder to
   read than a wide bar under a smaller grid. */



@media (min-width: 900px) {
  :root { --board: min(500px, calc(100dvh - 190px)); }
  .top { padding-top: 18px; }
  .wordmark { font-size: 24px; }
}

@media (max-width: 380px) {
  .wordmark { font-size: 18px; }
  .mark { width: 30px; height: 30px; font-size: 17px; }
  .iconbtn { width: 34px; height: 34px; }
  .timer { min-width: 46px; padding: 4px 7px; font-size: 14px; }
  .cluebar__clue { font-size: 16px; }
  .done__time { font-size: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }
  .cell.is-solved::after { opacity: 1; }
}

/* ================================================================== OPT chrome */

[hidden] { display: none !important; }

body { padding-top: calc(34px + env(safe-area-inset-top)); }

.daily {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 25;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(180deg, rgba(29, 37, 86, 0.97), rgba(16, 21, 47, 0.97));
  border-bottom: 1px solid rgba(62, 230, 180, 0.22);
  color: var(--ink);
  text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.daily__k { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; }
.daily__t { font-variant-numeric: tabular-nums; font-weight: 700; }
.daily__go { color: var(--mint); }
.daily.is-hot { border-bottom-color: rgba(62, 230, 180, 0.55); }
.daily:focus-visible { outline: 2px solid var(--mint); outline-offset: -3px; }

.overlay {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  /* ⚠ minmax(0, 1fr): a grid item's min-width is its content by default, and the
     shared More Toys cards (nowrap text) pushed the panel past the right edge of
     a phone. The bottom padding keeps the panel clear of the docked badges. */
  grid-template-columns: minmax(0, 1fr);
  padding: calc(44px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: radial-gradient(120% 100% at 50% 42%, rgba(20, 26, 60, 0.45) 0%, rgba(5, 7, 16, 0.84) 76%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.panel {
  width: min(430px, 100%);
  min-width: 0;
  justify-self: center;
  padding: 26px 22px 20px;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(31, 38, 84, 0.97), rgba(15, 20, 48, 0.97));
  border: 1px solid rgba(188, 194, 227, 0.16);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: rise 0.35s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.panel__eyebrow { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.panel__title { margin: 6px 0 10px; font: 650 40px/1.05 var(--serif); letter-spacing: -0.015em; }
.panel__time { margin: 2px 0 0; font-size: 60px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.panel__text { margin: 0 auto 18px; max-width: 360px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.panel__text b { color: var(--ink); font-weight: 600; }
.panel__note { margin: 6px 0 16px; font-size: 16px; color: var(--ink-2); }
.panel__cta {
  margin: 18px 0 0; padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(62, 230, 180, 0.07);
  border: 1px solid rgba(62, 230, 180, 0.22);
}
.panel__ctaline { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.panel__ctaline b { color: var(--ink); }
.panel__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.play-btn {
  appearance: none; border: 0;
  padding: 14px 44px;
  border-radius: 13px;
  font: 700 18px var(--font);
  color: #062019;
  background: linear-gradient(180deg, var(--mint-hi), var(--mint));
  box-shadow: 0 4px 0 var(--mint-deep), 0 10px 22px rgba(62, 230, 180, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.play-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--mint-deep); }
.play-btn--small { padding: 11px 20px; font-size: 16px; }
.ghost-btn {
  appearance: none; border: 0;
  padding: 11px 20px;
  border-radius: 13px;
  font: 700 16px var(--font);
  color: var(--ink);
  background: rgba(188, 194, 227, 0.08);
  box-shadow: inset 0 0 0 1px rgba(188, 194, 227, 0.22), 0 3px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.frame { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
.frame__corner {
  position: absolute;
  font-size: 10px; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase;
  color: rgba(188, 194, 227, 0.4);
}
.frame__corner--bl { bottom: max(14px, env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); pointer-events: auto; }
.frame__corner--bl a { color: inherit; text-decoration: none; }
.frame__corner--bl a:hover { color: var(--mint); }

/* ⚠ While typing on a phone the keyboard owns the whole bottom of the screen,
   and the shared badges (tip jar and fullscreen at the right edge, the tickets
   pill and the back link bottom-left) would sit on the keys or the clue bar.
   They step out while solving and come back on the start and finish panels. */
body.is-typing.is-touch .opt-tipjar,
body.is-typing.is-touch .opt-fs,
body.is-typing.is-touch .opt-tickets,
body.is-typing.is-touch .frame { display: none !important; }
/* On a desktop the badges would crowd the clue lists at the right edge, so they
   dock to the bottom-right corner instead of floating mid-screen. */
.opt-tipjar.opt-tipjar { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); transform: none; }
.opt-fs.opt-fs { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 54px); transform: none; }
.opt-tipjar.opt-tipjar.tj-nudge { animation: none; }

/* The solve-time layout on a phone, with the daily banner above it. */
body.is-typing.is-touch .app { height: calc(100dvh - 34px - env(safe-area-inset-top)); overflow: hidden; }
body.is-typing.is-touch {
  --board: min(94vw, calc(100dvh - 380px - env(safe-area-inset-bottom) - env(safe-area-inset-top)), 480px);
  overflow: hidden;
}
body.is-typing.is-touch .cluebar { width: min(94vw, 520px); }

@media (max-width: 560px) {
  .daily { gap: 7px; font-size: 11px; }
  .daily__k { font-size: 9.5px; }
  .panel { padding: 22px 16px 18px; }
  .panel__title { font-size: 34px; }
}

#soundBtn .i-off { display: none; }
#soundBtn.is-muted .i-on { display: none; }
#soundBtn.is-muted .i-off { display: block; }
.brand { cursor: default; }