/* vcrush · style — a soda-fountain sweet counter.
   Strawberry paper, an ice-white tin, candies painted as candies.
   Identity is fixed in docs/vcrush/IDENTITY.md.
   The six sweets live as <symbol>s in index.html. Special markings, jelly,
   stars and the awning are --art-* data URIs. Wells are cheap CSS. */

:root {
  --paper:    #FFE6F2;
  --paper-2:  #FFFCFE;
  --paper-3:  #FFD0E4;
  --walnut:   #FF2D6A;
  --walnut-2: #FF5A8A;
  --walnut-3: #C41048;
  --brass:    #FF2D6A;
  --brass-lit:#FF7AA8;
  --brass-dk: #C41048;
  --ink:      #4A1458;
  --ink-soft: #8A4A78;
  --cream:    #FFFFFF;
  --danger:   #E01850;
  --ice:      #7EE8F5;
  --ice-2:    #D4F7FF;
  --well:     #FFFFFF;

  --c-cherry: #FF2A5A;
  --c-lemon:  #FFD000;
  --c-mint:   #00D56A;
  --c-razz:   #2B7BFF;
  --c-grape:  #C44CFF;
  --c-toffee: #FF8A14;
  --c-humbug: #FF7AA8;

  --display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --body: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  --r: 12px;
  --shadow: 0 10px 28px -16px rgba(196,16,72,.45);
  --tap: 44px;

  --t-swap: 140ms; --t-pop: 200ms; --t-fall: 200ms;
  --ease: cubic-bezier(.2,.85,.25,1);
  --ease-drop: cubic-bezier(.45,0,.15,1.08);
}

/* ── art pack ───────────────────────────────────────────────────────────
   Each of these is one original SVG from the VCRUSH asset pack
   (`OneDrive\Desktop\vcrush`), minified and URL-encoded so the page makes no
   extra request for it. To change a marking, edit the file in the pack and
   re-encode it — never hand-edit the escaped strings below. */
:root {
  --art-row:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22%3E%3Crect x=%2220%22 y=%2245.5%22 width=%2260%22 height=%229%22 rx=%224.5%22 fill=%22%23FFF8EC%22 stroke=%22%232A1F17%22 stroke-opacity=%22.3%22 stroke-width=%222%22/%3E%3Crect x=%2231%22 y=%2230.5%22 width=%2238%22 height=%228%22 rx=%224%22 fill=%22%23FFF8EC%22 stroke=%22%232A1F17%22 stroke-opacity=%22.3%22 stroke-width=%222%22/%3E%3Crect x=%2231%22 y=%2261.5%22 width=%2238%22 height=%228%22 rx=%224%22 fill=%22%23FFF8EC%22 stroke=%22%232A1F17%22 stroke-opacity=%22.3%22 stroke-width=%222%22/%3E%3C/svg%3E");
  --art-col:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22%3E%3Crect x=%2245.5%22 y=%2220%22 width=%229%22 height=%2260%22 rx=%224.5%22 fill=%22%23FFF8EC%22 stroke=%22%232A1F17%22 stroke-opacity=%22.3%22 stroke-width=%222%22/%3E%3Crect x=%2230.5%22 y=%2231%22 width=%228%22 height=%2238%22 rx=%224%22 fill=%22%23FFF8EC%22 stroke=%22%232A1F17%22 stroke-opacity=%22.3%22 stroke-width=%222%22/%3E%3Crect x=%2261.5%22 y=%2231%22 width=%228%22 height=%2238%22 rx=%224%22 fill=%22%23FFF8EC%22 stroke=%22%232A1F17%22 stroke-opacity=%22.3%22 stroke-width=%222%22/%3E%3C/svg%3E");
  --art-wrap:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22%3E%3Cpath d=%22M5,5 L33,12 L12,33 Z%22 fill=%22%23FFF8EC%22 stroke=%22%232A1F17%22 stroke-opacity=%22.3%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M95,5 L88,33 L67,12 Z%22 fill=%22%23FFF8EC%22 stroke=%22%232A1F17%22 stroke-opacity=%22.3%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M95,95 L67,88 L88,67 Z%22 fill=%22%23FFF8EC%22 stroke=%22%232A1F17%22 stroke-opacity=%22.3%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5,95 L12,67 L33,88 Z%22 fill=%22%23FFF8EC%22 stroke=%22%232A1F17%22 stroke-opacity=%22.3%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M9,9 L24,16 M9,9 L16,24%22 stroke=%22%232A1F17%22 stroke-opacity=%22.22%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M91,9 L76,16 M91,9 L84,24%22 stroke=%22%232A1F17%22 stroke-opacity=%22.22%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M91,91 L76,84 M91,91 L84,76%22 stroke=%22%232A1F17%22 stroke-opacity=%22.22%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M9,91 L24,84 M9,91 L16,76%22 stroke=%22%232A1F17%22 stroke-opacity=%22.22%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M22,74 L74,22%22 stroke=%22%23FFF8EC%22 stroke-opacity=%22.3%22 stroke-width=%229%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E");
  --art-socket:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22%3E%3Crect x=%223%22 y=%223%22 width=%2294%22 height=%2294%22 rx=%2216%22 fill=%22%23523F2A%22/%3E%3Cpath d=%22M10,30 Q10,10 30,10 L70,10 Q90,10 90,30%22 stroke=%22%232A1F17%22 stroke-opacity=%22.45%22 stroke-width=%227%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M10,70 Q10,90 30,90 L70,90 Q90,90 90,70%22 stroke=%22%238A6F52%22 stroke-opacity=%22.35%22 stroke-width=%226%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Crect x=%223%22 y=%223%22 width=%2294%22 height=%2294%22 rx=%2216%22 stroke=%22%232A1F17%22 stroke-opacity=%22.5%22 stroke-width=%223%22 fill=%22none%22/%3E%3C/svg%3E");
  --art-jelly-1:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22%3E%3Crect x=%226%22 y=%226%22 width=%2288%22 height=%2288%22 rx=%2215%22 fill=%22%23F2C879%22 opacity=%22.38%22/%3E%3Crect x=%226%22 y=%226%22 width=%2288%22 height=%2288%22 rx=%2215%22 stroke=%22%23C8801F%22 stroke-opacity=%22.5%22 stroke-width=%223%22 fill=%22none%22/%3E%3Cpath d=%22M18,68 L40,20%22 stroke=%22%23FFF8EC%22 stroke-opacity=%22.55%22 stroke-width=%227%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M30,74 L44,44%22 stroke=%22%23FFF8EC%22 stroke-opacity=%22.3%22 stroke-width=%224%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E");
  --art-jelly-2:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22%3E%3Crect x=%226%22 y=%226%22 width=%2288%22 height=%2288%22 rx=%2215%22 fill=%22%23F2C879%22 opacity=%22.6%22/%3E%3Crect x=%226%22 y=%226%22 width=%2288%22 height=%2288%22 rx=%2215%22 stroke=%22%23C8801F%22 stroke-opacity=%22.6%22 stroke-width=%223%22 fill=%22none%22/%3E%3Crect x=%2215%22 y=%2215%22 width=%2270%22 height=%2270%22 rx=%2211%22 stroke=%22%23C8801F%22 stroke-opacity=%22.55%22 stroke-width=%223%22 fill=%22none%22/%3E%3Cpath d=%22M20,66 L40,22%22 stroke=%22%23FFF8EC%22 stroke-opacity=%22.6%22 stroke-width=%227%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M32,76 L46,46%22 stroke=%22%23FFF8EC%22 stroke-opacity=%22.35%22 stroke-width=%224%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M60,80 L76,44%22 stroke=%22%23FFF8EC%22 stroke-opacity=%22.28%22 stroke-width=%224%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E");
  --art-pick:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23E0AE52%22 stroke-width=%227%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%227%22 y=%227%22 width=%2286%22 height=%2286%22 rx=%2216%22 stroke-width=%225%22 fill=%22none%22 stroke=%22%23E0AE52%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M7,30 L7,20 Q7,7 20,7 L30,7%22 stroke-width=%229%22 fill=%22none%22 stroke=%22%23E0AE52%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M70,7 L80,7 Q93,7 93,20 L93,30%22 stroke-width=%229%22 fill=%22none%22 stroke=%22%23E0AE52%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M93,70 L93,80 Q93,93 80,93 L70,93%22 stroke-width=%229%22 fill=%22none%22 stroke=%22%23E0AE52%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M30,93 L20,93 Q7,93 7,80 L7,70%22 stroke-width=%229%22 fill=%22none%22 stroke=%22%23E0AE52%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --art-star:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22%3E%3Cpath d=%22M50,12 L60,38.3 L88,39.6 L66.2,57.3 L73.5,84.4 L50,69 L26.5,84.4 L33.8,57.3 L12,39.6 L40,38.3 Z%22 fill=%22%232A1F17%22 fill-opacity=%22.28%22 stroke=%22%232A1F17%22 stroke-opacity=%22.28%22 stroke-width=%2210%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M50,12 L60,38.3 L88,39.6 L66.2,57.3 L73.5,84.4 L50,69 L26.5,84.4 L33.8,57.3 L12,39.6 L40,38.3 Z%22 fill=%22%23E0AE52%22 stroke=%22%23E0AE52%22 stroke-width=%226%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M50,32 L55,45.2 L69,45.8 L58.1,54.7 L61.8,68.2 L50,60.5 L38.2,68.2 L41.9,54.7 L31,45.8 L45,45.2 Z%22 fill=%22%23FFF8EC%22 opacity=%22.3%22/%3E%3C/svg%3E");
  --art-star-off:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22%3E%3Cpath d=%22M50,12 L60,38.3 L88,39.6 L66.2,57.3 L73.5,84.4 L50,69 L26.5,84.4 L33.8,57.3 L12,39.6 L40,38.3 Z%22 fill=%22%232A1F17%22 fill-opacity=%22.1%22 stroke=%22%23B8862F%22 stroke-opacity=%22.55%22 stroke-width=%226%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --art-lock:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23B8862F%22 stroke-width=%227%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M34,44 L34,34 Q34,20 50,20 Q66,20 66,34 L66,44%22 fill=%22none%22 stroke=%22%23B8862F%22 stroke-width=%227%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Crect x=%2224%22 y=%2244%22 width=%2252%22 height=%2238%22 rx=%229%22 fill=%22none%22 stroke=%22%23B8862F%22 stroke-width=%227%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M50,58 L50,68%22 fill=%22none%22 stroke=%22%23B8862F%22 stroke-width=%227%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --art-awning:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 105%22 fill=%22none%22%3E%3Cpath d=%22M0,0 H30 V90 A15,15 0 0 1 0,90 Z%22 fill=%22%23FF2D6A%22/%3E%3Cpath d=%22M30,0 H60 V90 A15,15 0 0 1 30,90 Z%22 fill=%22%23FFFFFF%22/%3E%3Cpath d=%22M0,90 A15,15 0 0 1 30,90 A15,15 0 0 1 60,90%22 stroke=%22%23C41048%22 stroke-opacity=%22.2%22 stroke-width=%223%22 fill=%22none%22/%3E%3Crect x=%220%22 y=%220%22 width=%2260%22 height=%2213%22 fill=%22%237EE8F5%22/%3E%3Crect x=%220%22 y=%220%22 width=%2260%22 height=%225%22 fill=%22%23FFFFFF%22 opacity=%22.55%22/%3E%3C/svg%3E");
  --art-pick:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22 stroke=%22%23FF2D6A%22 stroke-width=%227%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%227%22 y=%227%22 width=%2286%22 height=%2286%22 rx=%2222%22 stroke-width=%225%22 fill=%22none%22/%3E%3Cpath d=%22M7,30 L7,20 Q7,7 20,7 L30,7%22 stroke-width=%229%22 fill=%22none%22/%3E%3Cpath d=%22M70,7 L80,7 Q93,7 93,20 L93,30%22 stroke-width=%229%22 fill=%22none%22/%3E%3Cpath d=%22M93,70 L93,80 Q93,93 80,93 L70,93%22 stroke-width=%229%22 fill=%22none%22/%3E%3Cpath d=%22M30,93 L20,93 Q7,93 7,80 L7,70%22 stroke-width=%229%22 fill=%22none%22/%3E%3C/svg%3E");
}
/* !art-pack-end */

/* Daylight only. Dark mode used to turn the shop brown. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (pointer: coarse) {
  :root { --tap: 48px; }
}

/* The play screen is meant to fit on one screen; the other panes may scroll. */
body[data-screen="play"] { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

body {
  background:
    radial-gradient(900px 420px at 50% -8%, #fff 0%, transparent 58%),
    var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: grid;
  place-items: start center;
  padding: clamp(8px, 2.5vw, 28px) clamp(8px, 3vw, 24px) 40px;
  overscroll-behavior: none;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

::selection { background: var(--brass-lit); color: var(--walnut-3); }

:where(a) { color: inherit; text-underline-offset: 3px; }

:where(button, [tabindex]):focus-visible {
  outline: 3px solid var(--brass-lit);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* ── the shop card ─────────────────────────────────────────────────────── */

.shop {
  width: 100%;
  max-width: 520px;
  background: var(--paper-2);
  border: 2px solid color-mix(in oklab, var(--punch, var(--brass)) 55%, #fff);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The striped awning — the one piece of pure decoration, and it earns its keep.
   One seamless tile repeated on X: brass valance, red-and-cream stripes, and a
   scalloped hem the card's paper shows through. Its colours are literal, not
   themed: an awning is the same awning after dark. */
.awning {
  height: 34px;
  background: var(--art-awning) repeat-x left top / auto 100%;
  flex: none;
}

.screen { padding: clamp(16px, 4vw, 26px); }
.screen[hidden] { display: none; }
.pane { display: flex; flex-direction: column; gap: 20px; }

/* ── title ─────────────────────────────────────────────────────────────── */

.brand { display: grid; justify-items: center; text-align: center; padding-top: 10px; }

/* the monogram carries the mark's only red; the wordmark stays one ink colour */
.monogram {
  width: clamp(58px, 17vw, 74px);
  height: auto;
  display: block;
  margin-bottom: 16px;
  filter: drop-shadow(0 8px 16px rgba(196,16,72,.32));
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.3rem, 11.5vw, 3.5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .11em;
  text-indent: .11em;
  color: var(--brass);
  font-variation-settings: "SOFT" 24, "WONK" 0;
}

/* the shop-sign rule: a brass hairline pinned by two diamond finials */
.signrule {
  position: relative;
  width: min(290px, 76%);
  height: 3px;
  margin: 16px 0 11px;
  background: var(--brass);
  border-radius: 2px;
}
.signrule::before, .signrule::after {
  content: "";
  position: absolute; top: 50%;
  width: 9px; height: 9px;
  background: var(--brass);
  transform: translateY(-50%) rotate(45deg);
}
.signrule::before { left: -12px; }
.signrule::after  { right: -12px; }

.signline {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tagline {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: .95rem;
  max-width: 30ch;
}

.stack { display: grid; gap: 10px; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.row .btn { flex: 1 1 0; min-width: 130px; }

/* Buttons are shop fittings: a face, a gloss along the top, and a hard edge
   underneath that the press takes up. No bevelled plastic, no gradient sky. */
.btn {
  font: 600 1rem/1 var(--body);
  min-height: var(--tap);
  padding: 13px 20px;
  border: 1px solid var(--walnut-3);
  border-radius: 999px;
  background: var(--walnut);
  color: var(--cream);
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 var(--walnut-3);
  transition: transform 90ms var(--ease), background 140ms, box-shadow 90ms var(--ease);
}
.btn:hover { background: var(--walnut-2); }
.btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 1px 0 var(--walnut-3);
}

/* the one brass key on the page: the door into the shop */
.play-hint {
  text-align: center;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: 26ch;
  margin: 2px auto 4px;
}

.btn.big {
  font-size: 1.22rem;
  min-height: 56px;
  padding: 17px 20px;
  background: var(--brass);
  border-color: var(--brass-dk);
  color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 var(--brass-dk);
}
.btn.big:hover { background: var(--brass-lit); }
.btn.big:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 1px 0 var(--brass-dk); }

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--brass);
  box-shadow: 0 3px 0 color-mix(in oklab, var(--brass) 34%, transparent);
}
.btn.ghost:hover { background: color-mix(in oklab, var(--brass) 16%, transparent); }
.btn.ghost:active { box-shadow: 0 1px 0 color-mix(in oklab, var(--brass) 34%, transparent); }

.btn.danger {
  background: var(--danger); border-color: #6E211C; color: var(--cream);
  box-shadow: inset 0 2px 0 rgba(255,248,236,.22), 0 3px 0 #6E211C;
}

.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: color-mix(in oklab, var(--brass) 30%, transparent);
  border: 1px solid color-mix(in oklab, var(--brass) 30%, transparent);
}
.ledger > div { background: var(--paper-2); padding: 10px 12px; }
.ledger dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ledger dd { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }

.save-warning {
  font-size: .85rem;
  color: var(--danger);
  border-left: 3px solid var(--danger);
  padding-left: 10px;
}

.shopfoot { text-align: center; font-size: .8rem; color: var(--ink-soft); border-top: 1px solid color-mix(in oklab, var(--brass) 28%, transparent); padding-top: 14px; }

/* ── pane heads ────────────────────────────────────────────────────────── */

.pane-head {
  display: grid;
  grid-template-columns: var(--tap) 1fr var(--tap);
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--brass) 34%, transparent);
  padding-bottom: 12px;
}
.pane-head h2 {
  text-align: center;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
}
.ghosted { visibility: hidden; }

.icon-btn {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
}
.icon-btn:hover { background: color-mix(in oklab, var(--brass) 18%, transparent); }
/* the pack draws its icons with generous air inside the 100-unit box, so they
   want a slightly larger frame than a 24-unit icon to match optically */
.icon-btn svg { width: 27px; height: 27px; }
.icon-btn[data-on="false"] { color: var(--ink-soft); opacity: .6; }
.icon-btn[aria-pressed="true"][data-on="true"] { background: color-mix(in oklab, var(--brass) 26%, transparent); }

/* ── level grid ────────────────────────────────────────────────────────── */

.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

.node {
  text-align: left;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--brass) 34%, transparent);
  border-radius: var(--r);
  padding: 12px;
  min-height: 84px;
  display: grid;
  gap: 3px;
  align-content: start;
  cursor: pointer;
  color: inherit;
  font-family: var(--body);
  transition: transform 90ms var(--ease), border-color 140ms;
}
.node:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--brass); }
.node:disabled { cursor: not-allowed; }
.node[data-state="done"] { border-left: 3px solid var(--brass); }

/* Each level is a brass-ringed medallion, the way the map nodes are drawn:
   an outer ring, a hairline inside it, and the number cut into the cream. */
.node-n {
  position: relative;
  width: 46px; height: 46px;
  margin-bottom: 4px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  border: 3px solid var(--brass);
  box-shadow: inset 0 0 0 2px var(--paper-2),
              inset 0 0 0 3px color-mix(in oklab, var(--brass) 42%, transparent);
  font-family: var(--display);
  font-size: 1.35rem; font-weight: 600; line-height: 1;
}
.node[data-state="open"] .node-n {
  outline: 3px solid color-mix(in oklab, var(--brass-lit) 34%, transparent);
  outline-offset: 2px;
}
/* a cleared level is lit: the face goes cream in both themes, so its numeral
   has to be literal ink rather than the themed one, or it vanishes after dark */
.node[data-state="done"] .node-n {
  background: var(--cream);
  color: var(--walnut-3);
  box-shadow: inset 0 0 0 2px var(--cream),
              inset 0 0 0 3px color-mix(in oklab, var(--brass) 42%, transparent);
}

/* locked: the walnut disc with a brass padlock, number withheld */
.node[data-state="locked"] { opacity: .62; }
.node[data-state="locked"] .node-n {
  background: var(--walnut);
  border-color: color-mix(in oklab, var(--ink-soft) 70%, transparent);
  box-shadow: none;
  color: transparent;
}
.node[data-state="locked"] .node-n::after {
  content: "";
  position: absolute; inset: 9px;
  background: var(--art-lock) center / contain no-repeat;
}
.node[data-state="locked"] .node-name,
.node[data-state="locked"] .node-sub { opacity: .8; }

.node-name { font-size: .82rem; color: var(--ink-soft); }
.node-sub { font-size: .72rem; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; }
.node-stars { display: flex; gap: 3px; margin-top: 4px; }
.node-stars i, .stars i {
  width: 14px; height: 14px; display: block;
  background: var(--art-star-off) center / contain no-repeat;
}
.node-stars i.on, .stars i.on { background-image: var(--art-star); }
.node-endless .node-n { color: var(--brass); font-size: 1.6rem; }

/* ── play screen ───────────────────────────────────────────────────────── */

.play { display: grid; gap: 12px; padding: clamp(12px, 3vw, 20px); }

.hud { display: grid; gap: 8px; }

.hud-top { display: grid; grid-template-columns: var(--tap) 1fr auto; align-items: center; gap: 8px; }
.hud-title { min-width: 0; }
.hud-title b { display: block; font-family: var(--display); font-size: 1rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-title small { color: var(--ink-soft); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }

.plates { display: flex; gap: 6px; }

/* The score and moves plates are the shop's enamel signs: a brass cap carrying
   the label, a cream well carrying the figure. Same furniture, two widths.
   column-reverse puts the label on top without touching the markup order. */
.plate {
  display: flex;
  flex-direction: column-reverse;
  background: var(--paper-2);
  border: 2px solid var(--brass);
  border-radius: 6px;
  overflow: hidden;
  min-width: 66px;
  text-align: center;
}
.plate small {
  display: block;
  background: var(--brass);
  color: var(--cream);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.7;
  padding: 0 8px;
}
.plate b {
  display: block;
  font-family: var(--display);
  font-size: 1.4rem; font-weight: 600; line-height: 1.25;
  padding: 1px 10px 3px;
  font-variant-numeric: tabular-nums;
}
.plate.score { min-width: 84px; }

/* the moves plate is the one that gets urgent */
.plate.low { border-color: var(--danger); }
.plate.low small { background: var(--danger); }
.plate.low b { color: var(--danger); animation: pulse 1.1s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* the progress trough, with the three star thresholds pinned along it */
.bar {
  position: relative;
  height: 16px;
  background: var(--paper-2);
  border: 2px solid var(--brass);
  border-radius: 99px;
  overflow: visible;
}
.bar-fill {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: var(--brass);
  border-radius: 99px;
  overflow: hidden;
  transition: width 400ms var(--ease);
}
.bar-fill::after {
  content: "";
  position: absolute; left: 5px; right: 5px; top: 2px;
  height: 3px;
  border-radius: 99px;
  background: var(--cream);
  opacity: .42;
}
/* the star thresholds ride inside the trough instead of hanging off its cap,
   and carry a dark halo so they read on brass as clearly as on cream */
.bar.no-anim .bar-fill,
.bar.no-anim .pip { transition: none; }

.bar .pip {
  position: absolute; top: 50%;
  left: calc(var(--at) * (100% - 18px));
  width: 18px; height: 18px; margin-top: -9px;
  background: var(--art-star-off) center / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(42,31,23,.9));
  transition: transform 220ms var(--ease-drop);
}
.bar .pip.on { background-image: var(--art-star); transform: scale(1.2); }
.bar-legend { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }

.orders { display: flex; gap: 8px; flex-wrap: wrap; }
.order {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper-2);
  border: 2px solid color-mix(in oklab, var(--brass) 62%, transparent);
  border-radius: 6px;
  padding: 4px 11px 4px 5px;
}
/* the sweet sits in a recessed well, the way the order tile is drawn */
.order svg {
  width: 28px; height: 28px;
  padding: 2px;
  background: var(--paper);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brass) 34%, transparent);
}
.order b { font-family: var(--display); font-size: 1rem; font-variant-numeric: tabular-nums; }
.order.done { opacity: .55; }
.order.done b { color: var(--brass); }

/* ── the tray ──────────────────────────────────────────────────────────── */

.tray {
  /* Keep a whole round on one screen. The board is square, so capping the tray's
     width by the leftover viewport height makes it shrink instead of pushing the
     controls below the fold. On a phone the 100% branch wins and nothing changes. */
  --chrome: 392px;
  max-width: min(100%, calc(100dvh - var(--chrome)));
  margin-inline: auto;
  width: 100%;
  background: linear-gradient(180deg, #9AF0FB, var(--ice));
  border: 3px solid var(--brass);
  border-radius: 18px;
  padding: clamp(6px, 1.6vw, 10px);
  box-shadow: inset 0 2px 0 #E8FCFF, 0 5px 0 var(--brass-dk);
}

.board {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--ice-2);
}
.board.busy { pointer-events: none; }
.board:focus-visible { outline: 3px solid var(--brass-lit); outline-offset: 2px; }

.holes { position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr); }
/* every cell is a shallow well in the ice tin — sixty-four cups, not a checkerboard */
.holes i {
  border-radius: 22%;
  background: var(--well);
  box-shadow:
    inset 0 2px 3px rgba(40,120,140,.14),
    0 1px 0 rgba(255,255,255,.9);
}

/* Jelly: a sheet of glaze laid on the tray. One layer is pale, two is deeper
   with a second ring — readable as depth without relying on colour. */
.holes i[data-jelly="1"],
.holes i[data-jelly="2"] {
  background-size: 100% 100%, auto, auto;
}
.holes i[data-jelly="1"] {
  background-image: var(--art-jelly-1);
  background-color: var(--well);
}
.holes i[data-jelly="2"] {
  background-image: var(--art-jelly-2);
  background-color: var(--well);
}

.tiles, .fx { position: absolute; inset: 0; }
.fx { pointer-events: none; }

.tile {
  position: absolute;
  top: 0; left: 0;
  width: calc(100% / var(--cols));
  height: calc(100% / var(--rows));
  display: grid;
  place-items: center;
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%));
  transition: transform var(--t-fall) var(--ease-drop);
  transition-delay: var(--delay, 0ms);
  contain: layout style;
}

.sweet {
  width: 88%;
  height: 88%;
  display: block;
  transform-origin: 50% 50%;
  transition: transform var(--t-pop) var(--ease), opacity var(--t-pop) linear;
}
.sweet svg { width: 100%; height: 100%; display: block; overflow: visible; }

.tile[data-color="cherry"] { color: var(--c-cherry); }
.tile[data-color="lemon"]  { color: var(--c-lemon);  }
.tile[data-color="mint"]   { color: var(--c-mint);   }
.tile[data-color="razz"]   { color: var(--c-razz);   }
.tile[data-color="grape"]  { color: var(--c-grape);  }
.tile[data-color="toffee"] { color: var(--c-toffee); }
.tile[data-color="humbug"] { color: var(--c-humbug); }

/* Special markings are drawn art, composited over whichever sweet earned them,
   in exactly the sweet's own box. Six sweets x five kinds still needs no extra
   file, and unlike a CSS gradient the marks survive greyscale: three bars
   across, three bars down, four foil folds, a cross. */
.tile[data-kind="row"]::before,
.tile[data-kind="col"]::before,
.tile[data-kind="wrap"]::before {
  content: "";
  position: absolute;
  inset: 8%;                       /* the same box the sweet occupies */
  /* .tile is its own stacking context (transform). Without z-index the sweet
     paints over an auto-z mark and the stripes silently vanish. */
  z-index: 1;
  background: center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
  pointer-events: none;
  transition: opacity var(--t-pop) linear;
}
.tile[data-kind="row"]::before  { background-image: var(--art-row); }
.tile[data-kind="col"]::before  { background-image: var(--art-col); }
.tile[data-kind="wrap"]::before { background-image: var(--art-wrap); }

/* Sitting still is the default. Motion only when something actually happens. */
.tile.picked .sweet { transform: scale(1.1); }
.tile.picked::after {
  content: "";
  position: absolute; inset: 1%;
  z-index: 2;
  background: var(--art-pick) center / contain no-repeat;
  pointer-events: none;
}
.tile.hinted .sweet { animation: pulse 900ms var(--ease) infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.08); } }

.tile.refuse .sweet { animation: wobble 140ms linear 2; }
@keyframes wobble { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

.tile.shake .sweet { animation: effect-shake 200ms linear; }
@keyframes effect-shake {
  20% { transform: translate(-7%, 4%) rotate(-5deg); }
  40% { transform: translate(7%, -3%) rotate(4deg); }
  60% { transform: translate(-5%, -2%) rotate(-3deg); }
  80% { transform: translate(4%, 2%) rotate(2deg); }
  100% { transform: none; }
}

.tile.pop .sweet { animation: crush var(--t-pop) var(--ease) forwards; }
.tile.pop::before { opacity: 0; }
.tile.pop::after {
  content: "";
  position: absolute; inset: 16%;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, currentColor 42%, transparent 70%);
  animation: pop-flash 180ms linear forwards;
  pointer-events: none;
}
@keyframes crush {
  0% { transform: scale(1); }
  22% { transform: scale(1.28); }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes pop-flash { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

.tile.born .sweet { animation: special-thud 240ms var(--ease-drop); }
@keyframes special-thud {
  0% { transform: scale(.75); }
  40% { transform: scale(1.16, .9); }
  100% { transform: none; }
}

.board.jolt { animation: jolt 240ms linear; }
@keyframes jolt {
  15% { transform: translate(calc(var(--jolt,1) * -3px), calc(var(--jolt,1) * 2px)); }
  40% { transform: translate(calc(var(--jolt,1) * 3px), calc(var(--jolt,1) * -2px)); }
  65% { transform: translate(calc(var(--jolt,1) * -2px), calc(var(--jolt,1) * -1px)); }
  100% { transform: none; }
}

/* larger sweets — bigger targets. No extra filters: 64 drop-shadows cook a cheap phone. */
body.big-tiles .sweet { width: 96%; height: 96%; }
body.big-tiles .tile[data-kind]::before { inset: 2%; }

/* ── effects ───────────────────────────────────────────────────────────── */

.fx > * {
  position: absolute;
  top: 0; left: 0;
  width: calc(100% / var(--cols));
  height: calc(100% / var(--rows));
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%));
  pointer-events: none;
}

.fx-spark::before {
  content: "";
  position: absolute; inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--tint, #fff) 38%, transparent 70%);
  animation: spark 420ms var(--ease) forwards;
}
@keyframes spark { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }

.fx-chip::before {
  content: "";
  position: absolute;
  left: 42%; top: 42%;
  width: 16%; height: 16%;
  border-radius: 2px;
  background: var(--tint, #fff);
  box-shadow: 0 0 6px var(--tint, #fff);
  animation: chip 400ms var(--ease) forwards;
}
@keyframes chip {
  0% { opacity: 1; transform: rotate(0) scale(1); }
  100% {
    left: calc(42% + var(--dx, 20%));
    top: calc(42% + var(--dy, -24%));
    opacity: 0;
    transform: rotate(var(--rot, 20deg)) scale(.3);
  }
}

.fx-streak-h, .fx-streak-v { overflow: visible; }
.fx-streak-h::before, .fx-streak-v::before {
  content: "";
  position: absolute;
  animation: streak 420ms var(--ease) forwards;
  filter: drop-shadow(0 0 8px var(--tint, #fff));
}
.fx-streak-h::before {
  inset: 34% -520%;
  background: linear-gradient(90deg, transparent, #fff 30%, var(--tint, #fff) 50%, #fff 70%, transparent);
}
.fx-streak-v::before {
  inset: -520% 34%;
  background: linear-gradient(180deg, transparent, #fff 30%, var(--tint, #fff) 50%, #fff 70%, transparent);
}
@keyframes streak {
  0% { opacity: 0; transform: scale(.15); }
  18% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.fx-boom::before, .fx-boom::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.fx-boom::before {
  width: 100%; height: 100%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--tint, var(--brass)), 0 0 16px var(--tint, var(--brass));
  animation: boom 520ms var(--ease) forwards;
}
.fx-boom::after {
  width: 70%; height: 70%;
  background: radial-gradient(circle, #fff 0%, var(--tint, var(--brass-lit)) 40%, transparent 72%);
  animation: boom-flash 360ms var(--ease) forwards;
}
@keyframes boom {
  0% { transform: translate(-50%,-50%) scale(.25); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(calc(var(--r, 1) * 2.8)); opacity: 0; }
}
@keyframes boom-flash {
  0% { transform: translate(-50%,-50%) scale(.4); opacity: .95; }
  100% { transform: translate(-50%,-50%) scale(2.1); opacity: 0; }
}

.fx-flash::before {
  content: "";
  position: absolute; inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--tint, #fff) 30%, transparent 68%);
  animation: flash 340ms var(--ease) forwards;
}
@keyframes flash { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }

.fx-score {
  display: grid; place-items: center;
  font: 700 clamp(1.05rem, 4vw, 1.4rem)/1 var(--display);
  color: var(--brass);
  text-shadow: 0 1px 0 #fff, 0 2px 0 var(--brass-dk);
  animation: floatup 720ms var(--ease) forwards;
  white-space: nowrap;
}
@keyframes floatup {
  0% { opacity: 0; transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)) scale(.55); }
  22% { opacity: 1; transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100% - 8%)) scale(1.18); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100% - 62%)) scale(1.05); }
}

/* ── controls ──────────────────────────────────────────────────────────── */

.controls {
  display: flex;
  justify-content: center;
  gap: 6px;
  border-top: 1px solid color-mix(in oklab, var(--brass) 28%, transparent);
  padding-top: 10px;
}

/* ── overlay, toasts, coach ────────────────────────────────────────────── */

.overlay {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 20px;
  background: color-mix(in oklab, var(--walnut-3) 82%, transparent);
  z-index: 50;
}
.overlay[hidden] { display: none; }

/* The result card is the shop's banner: a brass band carrying the small caps,
   a cream plate carrying the sentence. Win and lose share the furniture —
   the shopkeeper does not change his signage because you lost. */
.sheet {
  width: min(400px, 100%);
  background: var(--paper-2);
  border: 2px solid var(--brass);
  border-radius: 8px;
  padding: 0 22px 24px;
  text-align: center;
  display: grid;
  gap: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
  animation: rise 300ms var(--ease-drop);
}
@keyframes rise { from { transform: translateY(14px) scale(.97); opacity: 0; } }

.sheet .eyebrow {
  margin: 0 -22px 6px;
  padding: 9px 16px;
  background: var(--brass);
  color: var(--cream);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.sheet h2 { font-family: var(--display); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.sheet .big-score { font-family: var(--display); font-size: 2.6rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; }
.sheet .sub { color: var(--ink-soft); font-size: .9rem; }
.sheet .sub.stuck {
  border-left: 3px solid var(--brass);
  padding-left: 12px;
  text-align: left;
}
.sheet .fineprint { font-size: .8rem; color: var(--ink-soft); border-top: 1px solid color-mix(in oklab, var(--brass) 30%, transparent); padding-top: 10px; }

.stars.big { display: flex; gap: 12px; justify-content: center; }
.stars.big i { width: 42px; height: 42px; animation: pop-star 420ms var(--ease-drop) backwards; animation-delay: var(--d, 0ms); }
/* the middle star rides higher, the way the rail is drawn */
.stars.big i:nth-child(2) { width: 52px; height: 52px; margin-top: -8px; }
@keyframes pop-star { from { transform: scale(0) rotate(-40deg); } }

.toasts {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: grid; gap: 6px; justify-items: center;
  z-index: 60;
  pointer-events: none;
}
/* the toast plate: cream, brass-edged, with a hairline under the rim */
.toast {
  background: var(--paper-2);
  color: var(--ink);
  border: 2px solid var(--brass);
  border-radius: 14px;
  padding: 5px 18px 7px;
  font: 600 1rem/1.4 var(--display);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.6);
  animation: toast 1.1s var(--ease) forwards;
  white-space: nowrap;
}
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 15%,70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* The coach mark sits in the flow between the HUD and the tray, so it never
   covers the board or the shop sign the way a floating banner did. */
.coach {
  background: var(--brass);
  color: #fff;
  border-left: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: .88rem;
  line-height: 1.45;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.coach[hidden] { display: none; }
.coach.is-on { opacity: 1; }

/* ── prose ─────────────────────────────────────────────────────────────── */

.prose { display: grid; gap: 14px; }
.prose h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 600; margin-top: 6px; }
.prose p { font-size: .95rem; }
.rules { list-style: none; display: grid; gap: 12px; }
/* Not a two-column grid: each of these items is a chip followed by a run of
   mixed text and <b>, and a grid container makes every one of those runs its
   own item — which shredded the sentence into a 46px column. The chip is taken
   out of flow instead and the paragraph simply runs past it. */
.rules li { font-size: .92rem; position: relative; min-height: 46px; padding-left: 60px; }
.rules.plain li {
  min-height: 0;
  padding-left: 14px;
  border-left: 2px solid color-mix(in oklab, var(--brass) 40%, transparent);
}

/* the how-to chips show a real cell: a walnut well with the real artwork in it,
   marked with exactly the overlay the board uses */
.chip {
  position: absolute;
  left: 0; top: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--well);
  box-shadow: inset 0 2px 3px rgba(40,120,140,.14);
  border-radius: 12px;
  padding: 5px;
}
.chip svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.chip.stripe-row::before,
.chip.wrapped::before {
  content: "";
  position: absolute; inset: 5px;
  background: center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.chip.stripe-row::before { background-image: var(--art-row); }
.chip.wrapped::before { background-image: var(--art-wrap); }

/* ── narrow phones ─────────────────────────────────────────────────────── */

/* Eight columns across a small phone leaves roughly 38px per sweet, which is
   under the 44px a thumb needs. Give the tray the full width of the screen so
   the cells get back over that line; the chrome can afford to lose the inches. */
@media (max-width: 460px) {
  /* Respect the notch and the home indicator — the board is edge-to-edge here. */
  body {
    padding:
      env(safe-area-inset-top) env(safe-area-inset-right)
      calc(24px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  }
  .shop { border-radius: 0; border-left: 0; border-right: 0; max-width: 100%; }
  .awning { height: 26px; }
  .play { padding: 12px 6px; gap: 10px; }
  .tray { padding: 5px; border-radius: 3px; }
  .hud-title b { font-size: .92rem; }
  .plate { min-width: 56px; }
  .plate.score { min-width: 74px; }
  .plate b { font-size: 1.25rem; padding: 1px 7px 3px; }
  .plate small { padding: 0 6px; }
  .pane { padding: 16px 14px; }
  .controls { gap: 2px; }
  .btn.big { min-height: 58px; font-size: 1.28rem; }
  .play-hint { font-size: 1.08rem; }
}

/* Short Androids: shrink chrome, not the sweets. */
@media (max-height: 720px) {
  .tray { --chrome: 300px; }
  .awning { height: 22px; }
  .hud-title small { display: none; }
  .play { gap: 8px; }
}
@media (max-height: 640px) {
  .tray { --chrome: 248px; }
  .bar-legend { display: none; }
  .awning { height: 16px; }
  .controls { padding-top: 6px; }
}

/* ── wide screens ──────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .shop { max-width: 560px; }
}

/* Cheap Androids: keep the punchy swap/pop, drop the decorative layers. */
html.lite .fx-chip { display: none; }

.btn, .icon-btn, .node { -webkit-tap-highlight-color: transparent; }

/* ── motion off ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}


/* --- goal headline and lives, added with the level-objective rework ------- */
.hud-goal {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: .01em;
  line-height: 1.25;
}
.hud-lives {
  margin: 2px 0 0;
  font-size: clamp(12px, 3vw, 15px);
  letter-spacing: .16em;
  color: #FF2A5A;
}
.hud-lives.low { animation: lives-pulse 1.6s ease-in-out infinite; }
@keyframes lives-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .hud-lives.low { animation: none; text-decoration: underline; }
}

/* --- icing: a frozen crust over the hole, cleared from beside it ---------- */
[data-icing] { position: relative; }
[data-icing]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.94), rgba(206,229,245,.9) 60%, rgba(178,209,232,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(96,132,163,.45);
  border: 1px solid rgba(120,155,185,.6);
  pointer-events: none;
}
[data-icing='2']::before { filter: brightness(.9) saturate(1.1); }
[data-icing='3']::before { filter: brightness(.8) saturate(1.2); }
/* Layers are also readable without colour: one hairline per remaining layer. */
[data-icing='2']::after,
[data-icing='3']::after {
  content: '';
  position: absolute;
  inset: 26% 18%;
  border-top: 2px solid rgba(70,105,135,.55);
  border-bottom: 2px solid rgba(70,105,135,.55);
  pointer-events: none;
}
[data-icing='3']::after { border-left: 2px solid rgba(70,105,135,.55); }

/* --- the hazelnut: cargo, not a sweet ------------------------------------ */
[data-kind='nut'] svg { opacity: 0; }
[data-kind='nut']::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 48% 48% 54% 54% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 34% 28%, #D9A05B, #8A5220 62%, #5C3412);
  box-shadow: inset 0 -3px 5px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.35);
}