@layer reset, tokens, base, layout, components, game, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  body { min-height: 100dvh; line-height: 1.4; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3 { overflow-wrap: break-word; }
  h1, h2, h3 { text-wrap: balance; line-height: 1.05; font-weight: 400; }
  p { text-wrap: pretty; }
  ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --font-display: "Bagel Fat One", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
    --font-ui: "Fredoka", ui-rounded, system-ui, sans-serif;

    --step--1: 0.875rem;
    --step-0: 1rem;
    --step-1: 1.1875rem;
    --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
    --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.2rem);

    --gutter: 16px;
    --gap: 12px;
    --tap: 52px;
    --border: 3px;
    --drop: 4px;
    --radius: 18px;
    --radius-l: 26px;

    --ink: #1C1A3A;
    --room: #BFE3FF;
    --mat-a: #A7EBD0;
    --mat-b: #93E0C2;
    --mat-line: #7FD3B3;
    --mat-side: #5FC7A0;
    --plate: #FFFFFF;
    --plate-soft: #FFF1D6;
    --text: #1C1A3A;
    --muted: #3A3760;
    --edge: #1C1A3A;
    --shadow-ink: #1C1A3A;
    --tomato: #FF4D3A;
    --tomato-btn: #D93425;
    --on-tomato: #FFFFFF;
    --sun: #FFC93C;
    --lime: #7BD93F;
    --grape: #7B5CFF;
    --focus: #7B5CFF;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --room: #151836;
      --mat-a: #2C3A72;
      --mat-b: #26336A;
      --mat-line: #3A4A86;
      --mat-side: #1E2A5A;
      --plate: #23264A;
      --plate-soft: #2E2F5C;
      --text: #F4F1FF;
      --muted: #C9C5EE;
      --edge: #F4F1FF;
      --shadow-ink: #05061A;
      --focus: #FFC93C;
    }
  }
}

@layer base {
  body { font-family: var(--font-ui); font-size: var(--step-0); font-weight: 500; color: var(--text); background: var(--room); }
  a { color: inherit; text-underline-offset: 0.2em; }
  :focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 12px; }
  button, a {touch-action: manipulation; }
  button { cursor: pointer; }
  button:disabled { cursor: default; }
  ::selection { background: color-mix(in oklab, var(--sun) 60%, transparent); }
  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    @view-transition { navigation: none; }
  }
}

@layer layout {
  .masthead, main:not(.stage), .colophon { width: min(100% - 2 * var(--gutter), 64rem); margin-inline: auto; }
  .masthead { padding-block: var(--gutter) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
  main:not(.stage) { display: grid; gap: 20px; padding-block: 20px 48px; }
  .colophon { padding-block: 24px 32px; color: var(--muted); font-size: var(--step--1); }
}

@layer components {
  .skip { position: absolute; left: -999px; }
  .skip:focus { left: var(--gutter); top: var(--gutter); background: var(--plate); padding: 8px 12px; z-index: 10; }

  .icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

  .logo {
    font-family: var(--font-display); font-size: 2.125rem; line-height: 1; color: var(--tomato);
    text-decoration: none; letter-spacing: 0.01em; text-shadow: 0 3px 0 var(--shadow-ink);
  }
  .langs { display: flex; gap: 8px; }
  .langs a {
    min-height: 44px; display: inline-flex; align-items: center; padding-inline: 14px; border-radius: 999px;
    background: var(--plate); border: var(--border) solid var(--edge); font-weight: 600; text-decoration: none;
  }

  /* Sticker plates: white, ink border, hard ink drop that the plate presses into. */
  .sq, .btn, .round, .chip, .plate, .dock, .card, .row, .sheet, .pop, .coach, .clac, .langs a {
    box-shadow: 0 var(--drop) 0 var(--shadow-ink);
  }
  .sq, .round {
    width: var(--tap); height: var(--tap); flex: none; display: inline-grid; place-items: center;
    background: var(--plate); color: var(--text); border: var(--border) solid var(--edge); border-radius: var(--radius);
    text-decoration: none; padding: 0; transition: translate 90ms ease, box-shadow 90ms ease, opacity 120ms ease;
  }
  .round { border-radius: 50%; }
  .sq-sun { background: var(--sun); color: var(--ink); }
  .sq:disabled { opacity: 0.45; }
  .sq:not(:disabled):active, .round:active, .btn:active, .card:active, .row:active, .clac:not(:disabled):active {
    translate: 0 var(--drop); box-shadow: 0 0 0 var(--shadow-ink);
  }

  .btn {
    min-height: 60px; padding-inline: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 20px; border: var(--border) solid var(--edge); background: var(--plate); color: var(--text);
    font-size: 1.0625rem; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none; transition: translate 90ms ease, box-shadow 90ms ease;
  }
  .btn-tomato { background: var(--tomato-btn); color: var(--on-tomato); border-color: var(--ink); }
  .btn-sun { background: var(--sun); color: var(--ink); border-color: var(--ink); }
  .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
    background: var(--ink); color: #FFFFFF; font-weight: 600; font-size: 1.0625rem; border: var(--border) solid var(--ink);
    box-shadow: none; white-space: nowrap;
  }
  .chip::before { content: ""; width: 10px; height: 18px; border-radius: 3px; background: var(--sun); }
  @media (prefers-color-scheme: dark) { .chip { border-color: var(--edge); } }
  .chip-light { background: var(--plate); color: var(--text); border-color: var(--edge); box-shadow: 0 var(--drop) 0 var(--shadow-ink); }
  .chip-light::before { content: none; }
  .chip-alert::before { background: var(--tomato); }

  .toast {
    justify-self: start; background: var(--ink); color: #FFFFFF; padding: 12px 18px; border-radius: 999px; font-weight: 600;
    animation: toast-in 260ms cubic-bezier(.2, 1.4, .4, 1) both;
  }
  @keyframes toast-in { from { opacity: 0; translate: 0 10px; scale: 0.96; } }
  .toast-store { position: fixed; z-index: 40; left: var(--gutter); right: var(--gutter); top: calc(env(safe-area-inset-top) + 12px); justify-self: center; text-align: center; white-space: normal; border-radius: 22px; }
  .toast-out { animation: toast-out 300ms ease forwards; }
  @keyframes toast-out { to { opacity: 0; translate: 0 -8px; } }

  /* Pages around the table: challenges, my chains, errors. */
  .page-head { display: flex; align-items: center; gap: var(--gap); }
  .page-title { font-family: var(--font-display); font-size: var(--step-3); }
  .page-line { color: var(--muted); font-size: var(--step-1); }
  .page-score { margin-left: auto; }
  .page-note { color: var(--muted); text-align: center; max-width: 32ch; justify-self: center; }

  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(104px, 30%), 1fr)); gap: var(--gap); }
  @media (min-width: 720px) { .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }
  .card {
    position: relative; display: grid; gap: 6px; padding: 10px; height: 100%; border-radius: 22px; background: var(--plate);
    border: var(--border) solid var(--edge); text-decoration: none; color: var(--text); transition: translate 90ms ease, box-shadow 90ms ease;
  }
  .card-n { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }
  .card-map { width: 100%; height: auto; aspect-ratio: 1; }
  .card-title { font-weight: 600; font-size: 0.9375rem; line-height: 1.15; }
  @media (min-width: 720px) { .card-title { font-size: 1.125rem; } .card { padding: 14px; } }
  .card-done {
    position: absolute; top: -10px; right: -8px; width: 36px; height: 36px; border-radius: 50%; display: none; place-items: center;
    background: var(--lime); color: var(--ink); border: var(--border) solid var(--ink);
  }
  .card-done .icon { width: 20px; height: 20px; stroke-width: 3.4; }
  .card-solved .card-done { display: grid; }
  .map-mat { fill: var(--mat-a); stroke: var(--edge); stroke-width: 2.5; }
  .map-block { fill: #F2B35B; stroke: var(--ink); stroke-width: 2; }
  .map-start { fill: #F4F1FF; stroke: var(--ink); stroke-width: 2.4; }
  .map-bell { fill: var(--sun); stroke: var(--ink); stroke-width: 2.4; }

  /* Chapters of the numbered Challenges and the new ones: a sticker earned lights its chapter, stars sit under each card. */
  .chapter { display: grid; gap: var(--gap); margin-top: 20px; }
  .chapter-head { display: flex; align-items: center; gap: 12px; }
  .chapter-title { font-family: var(--font-display); font-size: var(--step-2); }
  .chapter-prize { display: grid; place-items: center; }
  @media (max-width: 719px) { .chapter { position: relative; } .chapter-prize { position: absolute; top: -9px; right: 0; width: 40px; } }
  .chapter-sticker { width: min(100%, 120px); height: auto; aspect-ratio: 1; transition: filter 200ms ease, opacity 200ms ease; }
  .chapter-sticker.is-locked { filter: grayscale(1) brightness(0.55) contrast(0.8); opacity: 0.5; }
  .card-stars, .card-dots { display: flex; gap: 3px; min-height: 18px; align-items: center; }
  .card-stars svg { width: 18px; height: 18px; fill: color-mix(in oklab, var(--muted) 22%, transparent); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
  .card-stars svg.on { fill: var(--sun); }
  .card-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--edge); background: transparent; }
  .card-dots i.on { background: var(--sun); }
  .cards-new { grid-template-columns: repeat(auto-fill, minmax(min(130px, 45%), 1fr)); }
  @media (min-width: 720px) { .cards-new { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .card-art { width: 100%; height: auto; aspect-ratio: 1; }
  .art-page { fill: var(--plate-soft); stroke: var(--ink); stroke-width: 3; }
  .art-rule { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
  .art-star { fill: var(--sun); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
  .art-domino { stroke: var(--ink); stroke-width: 2.4; }
  .art-domino.a1 { fill: #FF4D3A; }
  .art-domino.a2 { fill: #FFC93C; }
  .art-domino.a3 { fill: #3FB8FF; }
  .card-lock {
    position: absolute; top: -10px; right: -8px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: var(--plate); color: var(--ink); border: var(--border) solid var(--ink);
  }
  .card-lock .icon { width: 20px; height: 20px; stroke-width: 2.6; fill: none; }
  .card-locked { opacity: 0.8; }
  .card-locked .card-art, .card-locked .card-title { filter: grayscale(0.85); }
  .card-spark {
    position: absolute; top: -12px; left: -8px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
    background: var(--tomato); border: 2.5px solid var(--ink); animation: spark 1.2s ease-in-out infinite alternate;
  }
  .card-spark svg { width: 20px; height: 20px; fill: #FFFFFF; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
  @keyframes spark { to { scale: 1.18; rotate: 14deg; } }
  @media (prefers-reduced-motion: reduce) { .card-spark { animation: none; } }

  .rows { display: grid; gap: var(--gap); }
  .row {
    display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 22px; background: var(--plate);
    border: var(--border) solid var(--edge); text-decoration: none; color: var(--text); transition: translate 90ms ease, box-shadow 90ms ease;
  }
  .row > .icon { margin-left: auto; }
  .row-map { width: 84px; height: 84px; flex: none; }
  .row-text { display: grid; gap: 2px; min-width: 0; }
  .row-title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; }
  .row-line { color: var(--muted); font-size: 0.9375rem; }

  .empty { display: grid; justify-items: center; gap: 16px; text-align: center; padding-block: 8vh; }
  .empty-art { width: min(240px, 70vw); height: auto; }
  .empty-title { font-family: var(--font-display); font-size: var(--step-2); }
  .empty-line { color: var(--muted); font-size: var(--step-1); max-width: 30ch; }
  .art-shadow { fill: var(--shadow-ink); opacity: 0.14; }
  .art-d { stroke: var(--ink); stroke-width: 3; transform-box: fill-box; transform-origin: 50% 100%; }
  .art-d1 { fill: var(--tomato); rotate: -8deg; }
  .art-d2 { fill: var(--sun); }
  .art-d3 { fill: #3FB8FF; rotate: 6deg; }
  .art-d4 { fill: var(--grape); rotate: 14deg; }
  .art-fallen-1 { rotate: 4deg; }
  .art-fallen-2 { rotate: -10deg; }
  .art-fallen-3 { rotate: 6deg; }
  .art-code { font-family: var(--font-display); font-size: 56px; fill: #FFFFFF; stroke: var(--ink); stroke-width: 6px; paint-order: stroke; }
}

@layer game {
  body.game { overflow: hidden; overscroll-behavior: none; }
  .stage { position: fixed; inset: 0; }
  .table { --lift: 48px; /* the platform's hub button owns the bottom-left corner */ position: absolute; inset: 0; overflow: hidden; }
  .table-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
  .words { position: absolute; inset: 0; pointer-events: none; }

  .needs-3d {
    position: absolute; inset: auto var(--gutter); top: 30%; display: grid; gap: 10px; justify-items: center; text-align: center;
    padding: 24px; background: var(--plate); border: var(--border) solid var(--edge); border-radius: var(--radius-l);
  }
  .needs-3d-title { font-family: var(--font-display); font-size: var(--step-2); }

  /* Chrome floats on the table, inside the safe area. */
  .bar, .chips, .dock-row, .turns, .coach, .toast-game, .sheet, .pop { position: absolute; z-index: 2; }
  .bar {
    top: max(var(--gutter), env(safe-area-inset-top)); left: max(var(--gutter), env(safe-area-inset-left));
    right: max(var(--gutter), env(safe-area-inset-right)); display: flex; align-items: flex-start; gap: 8px;
  }
  .bar > form { display: contents; }
  .bar-logo { margin-inline: auto; padding-top: 6px; font-size: 2rem; }
  .plate {
    flex: 1; min-width: 0; padding: 8px 14px; border-radius: 20px; background: var(--plate); border: var(--border) solid var(--edge);
  }
  .plate-title { font-family: var(--font-display); font-size: 1.3125rem; line-height: 1.1; }
  .plate-eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tomato-btn); }
  .plate-line { color: var(--muted); font-size: 0.875rem; }
  @media (prefers-color-scheme: dark) { .plate-eyebrow { color: var(--sun); } }

  .chips {
    top: calc(max(var(--gutter), env(safe-area-inset-top)) + var(--tap) + 14px);
    left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right));
    display: flex; gap: 8px; align-items: center; pointer-events: none;
  }
  .chips > * { pointer-events: auto; }
  .chips [data-action="sound"] { margin-left: auto; min-height: 44px; width: 44px; padding: 0; justify-content: center; }
  [data-action="sound"][aria-pressed="true"] .when-off, [data-action="sound"][aria-pressed="false"] .when-on { display: none; }

  .dock-row {
    left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right));
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--lift, 0px)); display: flex; align-items: flex-end; gap: var(--gap);
  }
  .dock-row > .duo { flex: 1; }
  .dock {
    flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 7px;
    background: var(--plate); border: var(--border) solid var(--edge); border-radius: var(--radius-l);
  }
  .tool {
    display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; min-height: 60px; border: 0; border-radius: 18px;
    background: transparent; color: var(--text); font-weight: 600; font-size: 0.8125rem; transition: background 120ms ease, scale 120ms ease;
  }
  .tool .icon { width: 28px; height: 28px; }
  .tool[aria-pressed="true"] { background: var(--tomato-btn); color: #FFFFFF; }
  .tool:active { scale: 0.94; }
  .swatch {
    width: 28px; height: 28px; border-radius: 50%; border: 2.6px solid currentColor;
    background: conic-gradient(#FF4D3A 0 14%, #FF8A1F 0 28%, #FFC93C 0 42%, #7BD93F 0 57%, #3FB8FF 0 71%, #7B5CFF 0 85%, #FF6FB1 0);
  }
  .swatch-1 { background: conic-gradient(#FF4D3A 0 14%, #FF6B4A 0 28%, #FF8A1F 0 42%, #FFA94D 0 57%, #FFC93C 0 71%, #FFB3C7 0 85%, #FF6FB1 0); }
  .swatch-2 { background: conic-gradient(#0E6BA8 0 14%, #1F8FD6 0 28%, #3FB8FF 0 42%, #6FD3FF 0 57%, #2EC4B6 0 71%, #7FE0D0 0 85%, #B8F0FF 0); }
  .swatch-3 { background: conic-gradient(#2D8F3A 0 14%, #4CB050 0 28%, #7BD93F 0 42%, #B5E655 0 57%, #F2D14B 0 71%, #8C6A3F 0 85%, #3FA37A 0); }
  .swatch-4 { background: conic-gradient(#FF6FB1 0 14%, #FF9ED1 0 28%, #B39DFF 0 42%, #7B5CFF 0 57%, #6FD3FF 0 71%, #FFC93C 0 85%, #FFF4FA 0); }
  .swatch-5 { background: conic-gradient(#2B2F6B 0 14%, #3A3D8F 0 28%, #7B5CFF 0 42%, #B39DFF 0 57%, #FFC93C 0 71%, #F4F1FF 0 85%, #3FB8FF 0); }
  .swatch-6 { background: conic-gradient(#B3261E 0 14%, #FF4D3A 0 28%, #FF8A1F 0 42%, #FFC93C 0 57%, #FFE27A 0 71%, #FF6B4A 0 85%, #7A1F1A 0); }

  .clac {
    position: relative; width: 92px; height: 92px; flex: none; border-radius: 50%; border: var(--border) solid var(--ink);
    background: var(--tomato-btn); color: #FFFFFF; padding: 0; box-shadow: 0 6px 0 var(--shadow-ink);
    transition: translate 90ms ease, box-shadow 90ms ease, background 160ms ease;
  }
  .clac:not(:disabled):active { translate: 0 6px; }
  .table:not([data-state="falling"]) .clac:disabled { opacity: 0.6; }
  .clac-face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; }
  .clac-face .icon { width: 30px; height: 30px; }
  .clac-face span { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; }
  .clac [data-push-face="reset"] { display: none; }
  .clac [data-push-face="reset"] span { font-size: 0.9375rem; }
  .table[data-state="fallen"] .clac { background: var(--sun); color: var(--ink); }
  .table[data-state="fallen"] .clac [data-push-face="push"] { display: none; }
  .table[data-state="fallen"] .clac [data-push-face="reset"] { display: grid; }
  .table[data-state="idle"] .clac:not(:disabled) { animation: breathe 2.4s ease-in-out infinite; }
  @keyframes breathe { 50% { scale: 1.05; } }

  .turns {
    left: max(var(--gutter), env(safe-area-inset-left)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--lift, 0px) + 96px);
    display: flex; gap: 8px;
  }
  .turns .round { width: 44px; height: 44px; }
  .turns .icon { width: 20px; height: 20px; }
  .table[data-mode="watch"] .turns { bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--lift, 0px) + 112px); }

  .pop {
    left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right));
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--lift, 0px) + 104px); padding: 14px; border-radius: 22px; background: var(--plate);
    border: var(--border) solid var(--edge); display: grid; gap: 10px; animation: rise 220ms cubic-bezier(.2, 1.3, .4, 1) both;
  }
  .pop-title { font-family: var(--font-display); font-size: 1.25rem; }
  .pop-line { color: var(--muted); font-size: 0.9375rem; }
  .pop-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pop-swatches { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .pick {
    display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 16px; border: var(--border) solid var(--edge);
    background: var(--plate); font-weight: 600; min-height: 88px;
  }
  .pick[aria-pressed="true"] { background: var(--plate-soft); outline: 3px solid var(--tomato); outline-offset: -7px; }
  .pick-swatch { aspect-ratio: 1; min-height: 44px; border-radius: 50%; border: 0; padding: 4px; background: transparent; display: grid; place-items: center; }
  .pick-swatch .swatch { width: 100%; height: 100%; color: var(--edge); }
  .pick-swatch[aria-pressed="true"] { outline: 4px solid var(--tomato); }
  .prize-art { width: 44px; height: 44px; }

  .coach {
    top: 0; left: 0; width: min(240px, 70vw); padding: 14px 16px; border-radius: 22px; background: var(--plate); color: var(--text);
    border: var(--border) solid var(--edge); pointer-events: none; animation: bob 1.6s ease-in-out infinite;
  }
  .coach::before {
    content: ""; position: absolute; top: -16px; left: var(--arrow, 30px); width: 26px; height: 26px; background: var(--plate);
    border-left: var(--border) solid var(--edge); border-top: var(--border) solid var(--edge); rotate: 45deg;
  }
  .coach-above::before { top: auto; bottom: -16px; rotate: 225deg; }
  .coach-title { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.1; }
  .coach-line { color: var(--muted); margin-top: 4px; }
  @keyframes bob { 50% { translate: 0 6px; } }

  .toast-game { top: calc(max(var(--gutter), env(safe-area-inset-top)) + var(--tap) + 72px); left: 50%; translate: -50% 0; max-width: calc(100% - 32px); text-align: center; white-space: normal; border-radius: 22px; }
  .toast-game.toast-in, .toast-game { animation: toast-game-in 260ms cubic-bezier(.2, 1.4, .4, 1) both; }
  .toast-game.toast-out { animation: toast-game-out 300ms ease forwards; }
  @keyframes toast-game-in { from { opacity: 0; translate: -50% 10px; } to { translate: -50% 0; } }
  @keyframes toast-game-out { to { opacity: 0; translate: -50% -8px; } }
  .toast-problem { background: var(--tomato-btn); }

  .sheet {
    left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right));
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--lift, 0px)); z-index: 4; display: grid; gap: 14px; padding: 20px; border-radius: 28px;
    background: var(--plate); border: var(--border) solid var(--edge); box-shadow: 0 6px 0 var(--shadow-ink);
    animation: rise 320ms cubic-bezier(.2, 1.3, .4, 1) both;
  }
  @keyframes rise { from { translate: 0 40px; opacity: 0; } }
  .sheet-title { font-family: var(--font-display); font-size: 2rem; line-height: 1.05; padding-right: 44px; }
  .sheet-line { color: var(--muted); font-size: 1.0625rem; margin-top: -6px; }
  .sheet-win { text-align: center; }
  .sheet-win .sheet-title { padding-inline: 44px; }
  .sheet-reward {
    justify-self: center; padding: 4px 16px; border-radius: 999px; background: var(--sun); color: var(--ink); border: 2.5px solid var(--edge);
    font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; animation: star-in 600ms cubic-bezier(.2, 1.6, .4, 1) both;
  }
  .sheet-reward[hidden] { display: none; }
  .win-star {
    justify-self: center; display: grid; place-items: center; width: 76px; height: 76px; margin: -62px 0 -6px; border-radius: 50%;
    background: var(--plate); border: var(--border) solid var(--edge); animation: star-in 600ms cubic-bezier(.2, 1.6, .4, 1) both;
  }
  .win-star .icon { width: 50px; height: 50px; fill: var(--sun); stroke: var(--ink); stroke-width: 1.6; }
  .win-stars {
    justify-self: center; display: flex; gap: 2px; padding: 6px 14px; margin: -58px 0 -6px; border-radius: 999px;
    background: var(--plate); border: var(--border) solid var(--edge); animation: star-in 600ms cubic-bezier(.2, 1.6, .4, 1) both;
  }
  .win-stars .icon { width: 44px; height: 44px; fill: color-mix(in oklab, var(--muted) 22%, transparent); stroke: var(--ink); stroke-width: 1.6; }
  .win-stars [data-on] .icon { fill: var(--sun); }
  @keyframes star-in { from { scale: 0; rotate: -90deg; } }
  .sheet-close {
    position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px;
    border: 0; background: transparent; color: var(--text);
  }
  .save { display: grid; gap: 14px; }
  .name-chip {
    justify-self: start; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 16px;
    background: var(--plate-soft); border: 2.5px dashed var(--edge); font-weight: 700; font-size: 1.1875rem;
  }
  .name-reroll {
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 2.5px solid var(--edge);
    background: var(--plate); padding: 0; color: var(--text);
  }
  .name-reroll .icon { width: 20px; height: 20px; }
  .name-reroll:active .icon { rotate: 180deg; transition: rotate 200ms ease; }

  .word {
    position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: 1.5rem; color: #FFFFFF; white-space: nowrap;
    -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; margin: -1em 0 0 -1.4em;
    animation: word 750ms cubic-bezier(.2, 1.5, .4, 1) forwards; rotate: var(--tilt, 0deg);
  }
  .word-big { font-size: 2.4rem; -webkit-text-stroke-width: 8px; color: var(--sun); }
  @keyframes word {
    0% { scale: 0.2; opacity: 0; }
    25% { scale: 1.15; opacity: 1; }
    70% { scale: 1; opacity: 1; translate: 0 -10px; }
    100% { scale: 0.9; opacity: 0; translate: 0 -26px; }
  }

  /* Tablets and wider: bigger chrome, tools on a left rail. */
  @media (min-width: 820px) and (min-height: 600px) {
    .table { --tap: 58px; --gutter: 24px; --lift: 0px; }
    .bar { gap: 12px; }
    .bar-logo { font-size: 2.75rem; padding-top: 4px; }
    .plate { flex: 0 1 420px; }
    .table[data-mode="watch"] .bar > .plate, .table[data-mode="puzzle"] .bar > .plate { margin-right: auto; }
    .dock-row { left: auto; bottom: max(28px, env(safe-area-inset-bottom)); right: max(28px, env(safe-area-inset-right)); }
    .table[data-mode="watch"] .dock-row { left: calc(max(28px, env(safe-area-inset-left)) + 62px); }
    .table[data-mode="watch"] .dock-row > .duo { flex: 0 1 420px; margin-right: auto; }
    .dock {
      position: fixed; left: max(24px, env(safe-area-inset-left)); top: 50%; translate: 0 -50%; grid-auto-flow: row;
      grid-auto-columns: auto; width: 108px; padding: 10px; gap: 6px;
    }
    .tool { min-height: 76px; font-size: 0.9375rem; }
    .tool .icon, .swatch { width: 32px; height: 32px; }
    .clac { width: 128px; height: 128px; border-width: 4px; box-shadow: 0 7px 0 var(--shadow-ink); }
    .clac:not(:disabled):active { translate: 0 7px; }
    .clac-face .icon { width: 40px; height: 40px; }
    .clac-face span { font-size: 1.625rem; }
    .clac [data-push-face="reset"] span { font-size: 1.1875rem; }
    .turns { left: 50%; translate: -50% 0; bottom: max(32px, env(safe-area-inset-bottom)); }
    .turns .round { width: 58px; height: 58px; }
    .turns .icon { width: 24px; height: 24px; }
    .table[data-mode="watch"] .turns { bottom: calc(max(28px, env(safe-area-inset-bottom)) + 84px); }
    .pop { left: 152px; right: auto; bottom: auto; top: 50%; translate: 0 -50%; width: 360px; animation-name: pop-side; }
    @keyframes pop-side { from { opacity: 0; translate: -16px -50%; } }
    .sheet { left: 50%; right: auto; width: 460px; translate: -50% 0; bottom: max(28px, env(safe-area-inset-bottom)); }
    @keyframes rise { from { translate: -50% 40px; opacity: 0; } to { translate: -50% 0; } }
    .chips { top: calc(max(var(--gutter), env(safe-area-inset-top)) + var(--tap) + 16px); }
    .word { font-size: 2rem; }
    .word-big { font-size: 3.2rem; }
  }

  /* Short landscape (phones on their side): tools on a left rail above the hub button, Clac and the
     turn buttons bottom right, chips down the right edge, so the board keeps the middle. */
  @media (orientation: landscape) and (max-height: 520px) {
    .table { --tap: 44px; --gutter: 10px; --lift: 0px; }
    .bar { gap: 6px; }
    .bar-logo { font-size: 1.5rem; padding-top: 2px; }
    .plate { padding: 4px 12px; border-radius: 16px; display: flex; align-items: baseline; gap: 10px; min-height: var(--tap); align-items: center; }
    .plate-title { font-size: 1.125rem; }
    .plate-eyebrow, .plate-line { font-size: 0.75rem; white-space: nowrap; }
    .chips { top: calc(max(var(--gutter), env(safe-area-inset-top)) + var(--tap) + 8px); flex-direction: column; align-items: flex-end; }
    .chips [data-action="sound"] { margin-left: 0; }
    .chip { min-height: 40px; font-size: 0.9375rem; }
    .dock-row { bottom: max(10px, env(safe-area-inset-bottom)); right: max(var(--gutter), env(safe-area-inset-right)); left: auto; }
    .table[data-mode="watch"] .dock-row { left: calc(max(var(--gutter), env(safe-area-inset-left)) + 62px); }
    .table[data-mode="watch"] .dock-row > .duo { flex: 0 1 420px; margin-right: auto; }
    .dock {
      position: fixed; left: max(var(--gutter), env(safe-area-inset-left)); top: calc(max(var(--gutter), env(safe-area-inset-top)) + var(--tap) + 8px);
      grid-auto-flow: row; grid-auto-columns: auto; width: 74px; padding: 4px; gap: 2px;
    }
    .tool { min-height: 44px; padding: 3px 0 2px; font-size: 0.6875rem; gap: 0; }
    .tool .icon, .swatch { width: 22px; height: 22px; }
    .clac { width: 80px; height: 80px; }
    .clac-face .icon { width: 26px; height: 26px; }
    .clac-face span { font-size: 1.0625rem; }
    .clac [data-push-face="reset"] span { font-size: 0.8125rem; }
    .turns { left: auto; right: calc(max(var(--gutter), env(safe-area-inset-right)) + 92px); bottom: max(14px, env(safe-area-inset-bottom)); }
    .table[data-mode="watch"] .turns { bottom: max(14px, env(safe-area-inset-bottom)); }
    .turns .round { width: 44px; height: 44px; }
    .pop { left: 96px; right: auto; bottom: auto; top: 50%; translate: 0 -50%; width: min(340px, 50vw); padding: 10px; gap: 6px; animation-name: pop-side-s; }
    @keyframes pop-side-s { from { opacity: 0; translate: -16px -50%; } }
    .pop-title { font-size: 1rem; }
    .pop-line { font-size: 0.8125rem; }
    .pick { min-height: 64px; padding: 6px 2px; font-size: 0.8125rem; }
    .prize-art { width: 32px; height: 32px; }
    .sheet {
      left: 50%; right: auto; width: min(460px, calc(100% - 180px)); translate: -50% 0; bottom: max(10px, env(safe-area-inset-bottom));
      gap: 8px; padding: 12px 14px; border-radius: 22px;
    }
    @keyframes rise { from { translate: -50% 40px; opacity: 0; } to { translate: -50% 0; } }
    .sheet-title { font-size: 1.5rem; padding-right: 36px; }
    .sheet-win .sheet-title { padding-inline: 36px; }
    .sheet-line { font-size: 0.9375rem; margin-top: -2px; }
    .sheet-reward { font-size: 1.125rem; padding: 2px 14px; }
    .win-star { width: 56px; height: 56px; margin: -46px 0 -4px; }
    .win-star .icon { width: 36px; height: 36px; }
    .win-stars { margin: -48px 0 -4px; padding: 3px 10px; }
    .win-stars .icon { width: 30px; height: 30px; }
    .save { gap: 8px; }
    .name-chip { font-size: 1rem; }
    .toast-game { top: calc(max(var(--gutter), env(safe-area-inset-top)) + var(--tap) + 10px); }
    .coach { width: min(200px, 36vw); padding: 8px 12px; border-radius: 18px; }
    .coach-pinned::before { content: none; }
    .coach-title { font-size: 1.125rem; }
    .coach-line { font-size: 0.8125rem; margin-top: 2px; }
  }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}