/* Tinkavo: a kid-inventor's cardboard test course on a sunny backyard patio.
   The HUD is made of the workshop's stuff: the level written in marker on a cardboard box flap (top left), the goal on a
   strip of masking tape (top centre), the bolts and the wrench menu (top right), the tools as cardboard tabs with a strip
   of tape across a corner, and GO as a lime sticker pill with a little checkered flag. Cards are cardboard sheets held
   by two strips of tape, a little rotated, the corrugation showing on their edge. Luckiest Guy + Signika. */
:root {
  --kraft: #d4a373; --kraft-l: #e2b682; --kraft-ll: #f0d6ae; --shade: #a8743f; --deep: #7a5230;
  --tape: #f4e7c5; --ink: #2b2730; --ink-2: #5b5360; --lime: #a6e22e; --lime-l: #c4f160; --lime-d: #6f9e12;
  --hazard: #ffd23f; --cap: #fbfbf7; --sky: #bfe7ff; --sky-d: #4aa8dc; --lawn: #7cc857; --red: #e8463a;
  --line: 0 0 0 2px var(--ink);
  --shadow: 0 8px 18px rgba(43, 39, 48, .2);
  --display: "Luckiest Guy", "Arial Black", Impact, system-ui, sans-serif;
  --text: "Signika", "Segoe UI", system-ui, sans-serif;
  --u: 1;
  --hud-top: calc(84px * var(--u)); --hud-bottom: calc(96px * var(--u));
  --hazard-stripes: repeating-linear-gradient(-45deg, var(--hazard) 0 8px, var(--ink) 8px 16px);
}
@media (max-width: 370px) { :root { --u: .92; } }
@media (min-width: 1100px) and (min-height: 600px) { :root { --u: 1.3; } }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); color: var(--ink); font-family: var(--text); user-select: none; -webkit-user-select: none; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; touch-action: none; outline: none; }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(130% 95% at 50% 45%, rgba(255, 255, 255, 0) 62%, rgba(43, 39, 48, .14) 100%); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
svg { display: block; }
use, svg { pointer-events: none; }

/* cardboard tabs: kraft, a marker outline, a darker cardboard lip under them that collapses when pressed */
.round, .hudBtn, #jar, .bigBtn, #handX, .goBtn {
  transition: transform .16s cubic-bezier(.3, 1.7, .5, 1), box-shadow .16s cubic-bezier(.3, 1.7, .5, 1), background .2s, opacity .2s;
}
.tab {
  background: linear-gradient(var(--kraft-ll), var(--kraft-l)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), var(--line), 0 4px 0 2px var(--ink), 0 4px 0 6px rgba(0, 0, 0, 0);
}

/* ---------- top HUD ---------- */
#top { position: fixed; left: 50%; transform: translateX(-50%); width: min(100%, calc(1100px * var(--u))); top: 0; height: var(--hud-top);
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0 10px; padding-top: env(safe-area-inset-top); pointer-events: none; z-index: 5; }
#top > * { pointer-events: auto; }
.round { position: relative; width: calc(48px * var(--u)); height: calc(48px * var(--u)); border-radius: calc(11px * var(--u)) calc(13px * var(--u)) calc(10px * var(--u)) calc(12px * var(--u)); display: grid; place-items: center;
  background: linear-gradient(var(--kraft-ll), var(--kraft-l)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--line), 0 4px 0 2px var(--deep), var(--shadow); }
.round svg { width: calc(25px * var(--u)); height: calc(25px * var(--u)); fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.round:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--line), 0 1px 0 2px var(--deep), var(--shadow); }
#menuBtn::after { content: ""; position: absolute; right: calc(-7px * var(--u)); top: calc(-4px * var(--u)); width: calc(22px * var(--u)); height: calc(9px * var(--u)); background: rgba(244, 231, 197, .94); transform: rotate(32deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }

/* the level sign: written in marker on a cardboard box flap (the flap's fold a darker band along its foot) */
#sign { position: relative; margin-top: calc(12px * var(--u)); min-width: calc(132px * var(--u)); max-width: calc(100vw - 160px * var(--u));
  padding: calc(7px * var(--u)) calc(14px * var(--u)) calc(12px * var(--u)) calc(12px * var(--u));
  background: repeating-linear-gradient(90deg, rgba(122, 82, 48, .07) 0 2px, transparent 2px 9px), linear-gradient(var(--kraft-l), var(--kraft));
  border: 2px solid var(--ink); border-radius: calc(3px * var(--u)) calc(10px * var(--u)) calc(4px * var(--u)) calc(4px * var(--u));
  box-shadow: 0 4px 0 0 var(--deep), 0 4px 0 2px var(--ink), 0 10px 14px rgba(43, 39, 48, .2); transform: rotate(-1.5deg); transform-origin: 50% 100%; }
#sign::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(6px * var(--u)); background: var(--shade); border-top: 1.5px solid rgba(43, 39, 48, .55); border-radius: 0 0 calc(3px * var(--u)) calc(3px * var(--u)); }
#sign::before { content: ""; position: absolute; right: calc(-10px * var(--u)); top: calc(-6px * var(--u)); width: calc(30px * var(--u)); height: calc(11px * var(--u)); background: rgba(244, 231, 197, .94); transform: rotate(28deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
#sign.flap { animation: flap 1s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes flap { 0% { transform: rotate(-1.5deg) rotateX(70deg); } 60% { transform: rotate(-1.5deg) rotateX(-10deg); } 100% { transform: rotate(-1.5deg); } }
.signTop { display: flex; align-items: center; gap: calc(6px * var(--u)); }
#lvNum { font: 400 calc(19px * var(--u))/1.05 var(--display); letter-spacing: .03em; color: var(--ink); white-space: nowrap; }
#tricky { font: 700 calc(10.5px * var(--u))/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--hazard); padding: calc(3px * var(--u)) calc(7px * var(--u)) calc(2px * var(--u)); border-radius: 4px; box-shadow: 0 0 0 1.5px var(--ink); transform: rotate(3deg); }
#tricky[hidden] { display: none; }
#lvName { font: 700 calc(14.5px * var(--u))/1.2 var(--text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: calc(1px * var(--u)); }
#sub { display: flex; align-items: center; gap: calc(9px * var(--u)); margin-top: calc(2px * var(--u)); }
#clock { display: inline-flex; align-items: center; gap: calc(3px * var(--u)); font: 700 calc(13px * var(--u))/1 var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
#clock svg { width: calc(14px * var(--u)); height: calc(14px * var(--u)); fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
#clock[hidden], #sub[hidden] { display: none !important; } /* the running clock only in a race (the founder, 2026-10-15) */
#topRight { display: flex; flex-direction: column; align-items: flex-end; gap: calc(9px * var(--u)); margin-top: calc(12px * var(--u)); pointer-events: none; }
#topRight .trRow { display: flex; align-items: center; gap: calc(8px * var(--u)); pointer-events: none; }
#topRight .trRow > * { pointer-events: auto; }
.round.mini { width: calc(40px * var(--u)); height: calc(40px * var(--u)); }
.round.mini svg { width: calc(22px * var(--u)); height: calc(22px * var(--u)); }
.round[hidden] { display: none; }
#dailyBtn svg { width: calc(25px * var(--u)); height: calc(25px * var(--u)); }
.round .dot { display: none; position: absolute; right: -4px; top: -4px; width: calc(13px * var(--u)); height: calc(13px * var(--u)); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--ink); }
.round.news .dot { display: block; animation: dotPop 1.6s ease-in-out infinite; }
@keyframes dotPop { 50% { transform: scale(1.18); } }
#dailyBtn.hello { animation: hello 1s cubic-bezier(.3, 1.7, .5, 1) 3; }
@keyframes hello { 40% { transform: scale(1.22) rotate(-8deg); } }
/* the bolts: a hex nut in hazard yellow on a cardboard tab */
#jar { display: flex; align-items: center; gap: calc(5px * var(--u)); height: calc(46px * var(--u)); padding: 0 calc(13px * var(--u)) 0 calc(8px * var(--u)); border-radius: calc(11px * var(--u));
  background: linear-gradient(var(--kraft-ll), var(--kraft-l)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--line), 0 4px 0 2px var(--deep), var(--shadow); }
.boltIcon { width: calc(28px * var(--u)); height: calc(28px * var(--u)); overflow: visible; }
.boltIcon .nut { fill: var(--hazard); stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
.boltIcon .shine { fill: none; stroke: #fff6c8; stroke-width: 1.3; stroke-linecap: round; }
.boltIcon .hole { fill: var(--kraft); stroke: var(--ink); stroke-width: 1.6; }
#coins { font: 400 calc(22px * var(--u))/1 var(--display); min-width: calc(20px * var(--u)); color: var(--ink); padding-top: calc(3px * var(--u)); }
#jar.bump { animation: bump .32s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 35% { transform: scale(1.16) rotate(-3deg); } }

/* the goal: a strip of masking tape (torn ends), three round pips for the rounds */
#goal { position: fixed; left: 50%; top: calc(var(--hud-top) + env(safe-area-inset-top) - 2px * var(--u)); transform: translateX(-50%) rotate(-.8deg); z-index: 4; pointer-events: none;
  display: flex; align-items: center; gap: calc(8px * var(--u)); padding: calc(6px * var(--u)) calc(18px * var(--u)); white-space: nowrap;
  background: rgba(244, 231, 197, .96); box-shadow: 0 2px 3px rgba(43, 39, 48, .18);
  clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 0, 91% 0, 94% 9%, 97% 0, 100% 10%, 99% 50%, 100% 90%, 97% 100%, 94% 91%, 91% 100%, 9% 100%, 6% 92%, 3% 100%, 0 90%, 1% 50%);
  font: 700 calc(15px * var(--u))/1 var(--text); color: var(--ink); }
#pips { display: flex; gap: calc(5px * var(--u)); }
#pips i { width: calc(11px * var(--u)); height: calc(11px * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); background: transparent; }
#pips i.cur { background: var(--lime); }
#pips i.done { background: var(--lime-d); }
@media (min-width: 560px) { #goal { top: calc(16px * var(--u) + env(safe-area-inset-top)); } }

/* ---------- message band: a strip of tape with a sticker icon ---------- */
#msg { position: fixed; left: 50%; top: calc(var(--hud-top) + 34px * var(--u) + env(safe-area-inset-top)); transform: translateX(-50%); width: max-content; max-width: min(94vw, calc(560px * var(--u)));
  display: flex; align-items: center; gap: calc(8px * var(--u)); padding: calc(7px * var(--u)) calc(16px * var(--u)) calc(7px * var(--u)) calc(8px * var(--u)); border-radius: calc(8px * var(--u));
  background: rgba(255, 252, 243, .97); box-shadow: var(--line), 0 3px 0 2px var(--ink), var(--shadow); font: 600 calc(15px * var(--u))/1.25 var(--text); z-index: 4; pointer-events: none;
  transition: background .2s, color .2s, opacity .25s; min-height: calc(42px * var(--u)); }
@media (min-width: 560px) { #msg { top: calc(var(--hud-top) + 8px * var(--u) + env(safe-area-inset-top)); } }
#msg b { font-weight: 700; color: var(--ink); background: linear-gradient(transparent 58%, rgba(166, 226, 46, .65) 58%); }
#msgIcon { flex: none; width: calc(28px * var(--u)); height: calc(28px * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--lime); box-shadow: 0 0 0 2px var(--ink); }
#msgIcon svg { width: 68%; height: 68%; fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
#msg.dead { background: #fff7d4; box-shadow: 0 0 0 2.5px var(--ink), 0 3px 0 2.5px var(--ink), var(--shadow); }
#msg.dead::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 8px 0 0 8px; background: var(--hazard-stripes); }
#msg.dead { padding-left: calc(16px * var(--u)); }
#msg.dead #msgIcon { background: var(--hazard); }
#msg.dead b { background: none; }
#msg.tip #msgIcon { background: var(--tape); }
#msg.win #msgIcon { background: var(--hazard); } #msg.win #msgIcon svg { fill: var(--ink); stroke-width: 1; }
#msg.pop { animation: msgpop .42s cubic-bezier(.3, 1.6, .5, 1); }
#msg.hide { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.96); transition: opacity .45s, transform .45s; animation: none; }
@keyframes msgpop { 0% { transform: translateX(-50%) translateY(-6px) scale(.9); opacity: .4; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

/* the guiding hand's ring */
#guide { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
#ghostRing { fill: rgba(166, 226, 46, .18); stroke: var(--lime-d); stroke-width: 3; opacity: 0; }

/* ---------- bottom HUD: tape-label tool tabs and the lime GO sticker ---------- */
#bottom { position: fixed; left: 0; right: 0; bottom: 0; height: var(--hud-bottom); display: flex; justify-content: center; align-items: flex-end;
  padding: 0 8px; padding-bottom: max(calc(12px * var(--u)), env(safe-area-inset-bottom)); z-index: 5; pointer-events: none; }
#shelf { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: calc(9px * var(--u)); width: min(100%, calc(420px * var(--u))); padding: 0 calc(4px * var(--u)); }
.hudBtn { position: relative; pointer-events: auto; flex: 1 1 0; min-width: 0; max-width: calc(78px * var(--u)); height: calc(58px * var(--u)); border-radius: calc(9px * var(--u)) calc(12px * var(--u)) calc(10px * var(--u)) calc(11px * var(--u));
  background: linear-gradient(var(--kraft-ll), var(--kraft-l)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--line), 0 4px 0 2px var(--deep), var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3px * var(--u)); font: 700 calc(13px * var(--u))/1 var(--text); color: var(--ink); }
.hudBtn::after { content: ""; position: absolute; left: calc(-6px * var(--u)); top: calc(-3px * var(--u)); width: calc(24px * var(--u)); height: calc(9px * var(--u)); background: rgba(244, 231, 197, .94); transform: rotate(-30deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.hudBtn svg { width: calc(24px * var(--u)); height: calc(24px * var(--u)); fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hudBtn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--line), 0 1px 0 2px var(--deep), var(--shadow); }
.hudBtn:disabled { color: rgba(43, 39, 48, .4); cursor: default; background: linear-gradient(#f3e3c9, #e8d2ae); box-shadow: 0 0 0 2px rgba(43, 39, 48, .35), 0 3px 0 2px rgba(122, 82, 48, .35); }
.hudBtn:disabled svg { stroke: rgba(43, 39, 48, .35); }
.hudBtn:disabled::after { opacity: .5; }
/* after level 80 a second hint costs bolts: its price shows on the button */
#hintPrice { position: absolute; right: calc(-6px * var(--u)); top: calc(-9px * var(--u)); display: inline-flex; align-items: center; gap: 2px; padding: calc(3px * var(--u)) calc(7px * var(--u)) calc(2px * var(--u)) calc(4px * var(--u));
  border-radius: 99px; background: var(--cap); color: var(--ink); font: 700 calc(12px * var(--u))/1 var(--text); font-style: normal; box-shadow: var(--line); z-index: 1; }
#hintPrice[hidden] { display: none; }
#hintPrice .c { width: calc(14px * var(--u)); height: calc(14px * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l8.2 4.7v9.4L12 21.4l-8.2-4.7V7.3z' fill='%23ffd23f' stroke='%232b2730' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='3.6' fill='%23d4a373' stroke='%232b2730' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* GO: the lime sticker pill with a little checkered flag */
.goBtn { position: relative; pointer-events: auto; flex: 1.7 1 0; max-width: calc(150px * var(--u)); min-width: calc(108px * var(--u)); height: calc(66px * var(--u)); border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: calc(7px * var(--u));
  background: linear-gradient(var(--lime-l), var(--lime) 55%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2.5px var(--ink), 0 5px 0 2.5px var(--lime-d), 0 5px 0 5px var(--ink), var(--shadow);
  font: 400 calc(30px * var(--u))/1 var(--display); color: var(--ink); padding: calc(4px * var(--u)) calc(14px * var(--u)) 0; }
.goBtn::after { content: ""; position: absolute; right: calc(8px * var(--u)); top: calc(-5px * var(--u)); width: calc(28px * var(--u)); height: calc(10px * var(--u)); background: rgba(244, 231, 197, .94); transform: rotate(24deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.goFlag { flex: none; width: calc(18px * var(--u)); height: calc(14px * var(--u)); margin-top: calc(-4px * var(--u)); border: 2px solid var(--ink); border-radius: 2px;
  background: conic-gradient(var(--ink) 25%, #fff 0 50%, var(--ink) 0 75%, #fff 0) 0 0 / calc(7px * var(--u)) calc(6px * var(--u)); }
.goArrow { font: 700 calc(18px * var(--u))/1 var(--text); margin-top: calc(-3px * var(--u)); }
.goBtn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2.5px var(--ink), 0 1px 0 2.5px var(--lime-d), 0 1px 0 5px var(--ink), var(--shadow); }
.goBtn:disabled { filter: saturate(.55) brightness(1.04); cursor: default; }
.goBtn.running .goArrow { animation: goRun .35s linear infinite; }
@keyframes goRun { 50% { transform: translateX(4px); } }
/* Peek at a build sits with the tools (from level 21) */
#shelf .mBoost { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; max-width: calc(78px * var(--u)); height: calc(58px * var(--u)); padding: 4px 2px; font-size: calc(11.5px * var(--u)); }
#shelf .mBoost .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#shelf .mBoost[hidden] { display: none; }

/* ---------- guiding hand ---------- */
#hand { position: fixed; left: 0; top: 0; width: calc(64px * var(--u)); height: calc(64px * var(--u)); z-index: 6; pointer-events: none; opacity: 0; will-change: transform; }
#hand svg { position: relative; width: 100%; height: 100%; }
/* the soft shadow is a picture baked once at start (game.js bakeHandShadow): no CSS filter on a moving element */
#handShadow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#handShadow:not([src]) { display: none; }
#hand .hp { fill: #fff; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
#hand .cuff { fill: none; stroke: var(--lime-d); stroke-width: 3.4; stroke-linecap: round; }
#hand .ring { position: absolute; left: 37.5%; top: 9%; width: 0; height: 0; }
#handX { position: fixed; left: 0; top: 0; z-index: 7; width: calc(34px * var(--u)); height: calc(34px * var(--u)); border-radius: 50%; background: var(--tape);
  box-shadow: var(--line), 0 3px 0 2px var(--ink), var(--shadow); opacity: 0; pointer-events: none; display: grid; place-items: center; }
#handX svg { width: 60%; height: 60%; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
#handX.on { opacity: 1; pointer-events: auto; }

/* ---------- win: the letters, cardboard confetti ---------- */
#perfect { position: fixed; left: 50%; top: 34%; z-index: 6; transform: translate(-50%, -50%); font: 400 clamp(44px, 12vw, 112px)/1 var(--display);
  pointer-events: none; white-space: nowrap; display: flex; }
#perfect i { font-style: normal; display: inline-block; opacity: 0; color: var(--lime); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink), 0 14px 30px rgba(43, 39, 48, .3); }
#perfect i.sp { width: .3em; }
#perfect.on i { animation: letter 2s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes letter { 0% { opacity: 0; transform: translateY(40px) scale(.3) rotate(-12deg); } 16% { opacity: 1; transform: translateY(-10px) scale(1.12) rotate(4deg); }
  28% { transform: translateY(0) scale(1) rotate(0); } 82% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-30px) scale(.9); } }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.bit { position: absolute; left: 0; top: 0; width: 13px; height: 8px; border-radius: 1px; will-change: transform; box-shadow: 0 0 0 1.2px rgba(43, 39, 48, .55); }
.bit.tape { width: 20px; height: 7px; opacity: .92; box-shadow: none; }

/* ---------- overlays (win card, lose card, menu): a cardboard sheet held by two strips of tape ---------- */
.overlay { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; background: rgba(43, 39, 48, .42); padding: max(56px, env(safe-area-inset-top)) 14px 14px; }
.overlay.on { display: flex; animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(420px, 100%); max-height: calc(100% - 14px); display: flex; flex-direction: column; position: relative;
  background:
    radial-gradient(circle at 50% 100%, transparent 3px, rgba(122, 82, 48, .45) 3.5px 4.5px, transparent 5px) left bottom / 10px 7px repeat-x,
    repeating-linear-gradient(90deg, rgba(122, 82, 48, .045) 0 2px, transparent 2px 10px),
    linear-gradient(#f5e0bd, var(--kraft-ll) 60%, #ebcd9f);
  border-radius: 10px 14px 9px 13px / 13px 9px 14px 10px;
  box-shadow: 0 0 0 2.5px var(--ink), 0 7px 0 2.5px var(--shade), 0 7px 0 5px var(--ink), 0 24px 60px rgba(43, 39, 48, .38);
  transform: rotate(-1deg); animation: rise .5s cubic-bezier(.25, 1.5, .45, 1); }
.sheet::before, .sheet::after { content: ""; position: absolute; top: -13px; width: 96px; height: 26px; z-index: 2; pointer-events: none;
  background: rgba(244, 231, 197, .93); box-shadow: 0 1px 2px rgba(43, 39, 48, .18);
  clip-path: polygon(0 10%, 4% 0, 8% 12%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 12%, 100% 88%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 88%, 4% 100%, 0 90%); }
.sheet::before { left: 14px; transform: rotate(-8deg); }
.sheet::after { right: 14px; transform: rotate(7deg); }
@keyframes rise { from { transform: translateY(60px) rotate(-4deg) scale(.9); opacity: 0; } }
.sheetBody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 18px 6px; display: flex; flex-direction: column; }
.cardTop { text-align: center; flex: none; }
.badge { display: inline-block; font: 400 17px/1 var(--display); color: var(--ink); background: linear-gradient(var(--lime-l), var(--lime)); padding: 8px 18px 5px; border-radius: 99px;
  box-shadow: inset 0 -3px 0 var(--lime-d), var(--line), 0 3px 0 2px var(--ink); letter-spacing: .04em; transform: rotate(-2deg); }
.badge.oops { background: var(--hazard); box-shadow: inset 0 -3px 0 #d9a91a, var(--line), 0 3px 0 2px var(--ink); position: relative; }
.badge.gold { background: linear-gradient(#ffe37a, var(--hazard)); box-shadow: inset 0 -3px 0 #d9a91a, var(--line), 0 3px 0 2px var(--ink); color: var(--ink); }
.sheet h2 { font: 400 29px/1.05 var(--display); letter-spacing: .02em; margin: 12px 0 2px; color: var(--ink); }
.sheet h2 small { font: 600 14px/1 var(--text); color: var(--ink-2); display: block; margin-top: 4px; }
#cardSub { margin: 2px 0 10px; font-weight: 600; color: var(--ink-2); }
#photos { flex: 1 1 auto; min-height: 120px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 6px 4px 2px; }
#photos .photo { background: var(--cap); padding: 6px 6px 16px; border-radius: 3px; box-shadow: 0 0 0 2px var(--ink), 0 4px 10px rgba(43, 39, 48, .22); transform: rotate(var(--r)); animation: drop .6s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d); position: relative; }
#photos .photo::before { content: ""; position: absolute; left: 50%; top: -9px; width: 46px; height: 16px; margin-left: -23px; background: rgba(244, 231, 197, .92); transform: rotate(-4deg); }
@keyframes drop { from { transform: translateY(-30px) rotate(calc(var(--r) * -3)) scale(.8); opacity: 0; } }
#photos .photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
/* the win card: the garage shelf, the run's photo pinned beside it */
.roomWrap { position: relative; flex: none; display: flex; flex-direction: column; }
#room { position: relative; width: 100%; max-width: max(230px, calc((100dvh - 440px) * 1.5)); margin: 4px auto 0; border-radius: 6px; overflow: hidden; background: #e9c79a;
  box-shadow: 0 0 0 2px var(--ink), 0 4px 0 2px var(--ink); }
#room[hidden] { display: none; }
#room canvas { display: block; }
#photos.mini { position: relative; margin-top: 12px; min-height: 0; padding: 0 10px; justify-content: center; gap: 8px; flex-wrap: nowrap; pointer-events: none; }
#photos.mini .photo { width: 34%; max-width: 150px; padding: 4px 4px 10px; }
@media (max-height: 760px) { #photos.mini .photo { width: 24%; max-width: 104px; } }
#roomCap { margin: 10px 4px 0; text-wrap: balance; text-align: center; font: 700 14.5px/1.3 var(--text); color: var(--ink); flex: none; }
#roomCap[hidden] { display: none; }
.reward[hidden] { display: none; }
.bigBtn.icon { flex: none; width: 64px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; }
.bigBtn.icon svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* the win card: Picture · Share · Clip in one row, Next full width under them */
#card .cardFoot { flex-wrap: wrap; row-gap: 14px; }
#picBtn, #shareBtn, #clipBtn { flex: 1 1 0; width: auto; min-width: 0; height: 50px; padding: 0 8px; font: 700 17px/1 var(--text); border-radius: 10px 12px 9px 11px; }
#picBtn svg, #shareBtn svg, #clipBtn svg { width: 22px; height: 22px; flex: none; }
#card #nextBtn { flex: 1 1 100%; }
@media (max-width: 370px) { #picBtn, #shareBtn, #clipBtn { font-size: 15px; gap: 4px; padding: 0 4px; } #picBtn svg, #shareBtn svg, #clipBtn svg { width: 19px; height: 19px; } }
.bigBtn[hidden] { display: none; }
#photos.n1 .photo { width: 74%; } #photos.n2 .photo { width: 46%; } #photos.n3 .photo, #photos.n4 .photo { width: 42%; }
@media (max-height: 760px) { #photos.n1 .photo { width: 60%; } }
.stats { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 12px 0 2px; flex: none; }
.stat { display: flex; align-items: center; gap: 7px; font: 600 18px/1 var(--text); color: var(--ink-2); }
.stat i { font-style: normal; }
.stat b { font: 400 28px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.stat svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#cardBest { margin-top: 4px; min-height: 1em; }
#newArt { display: flex; justify-content: center; margin: 12px 0 4px; } #newArt svg { width: 150px; height: auto; }
#newText { text-align: center; font: 600 16px/1.35 var(--text); margin: 6px 4px 2px; }
.reward { display: flex; align-items: center; gap: 6px; font: 400 28px/1 var(--display); color: var(--ink); }
.reward .coin { width: 32px; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l8.2 4.7v9.4L12 21.4l-8.2-4.7V7.3z' fill='%23ffd23f' stroke='%232b2730' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3.6' fill='%23d4a373' stroke='%232b2730' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.cardFoot { flex: none; padding: 12px 18px 22px; display: flex; gap: 12px; }
/* the primary action: a lime sticker; the others: cardboard tabs */
.bigBtn { flex: 1; height: 58px; border-radius: 99px; background: linear-gradient(var(--lime-l), var(--lime) 55%); color: var(--ink); font: 400 26px/1 var(--display); letter-spacing: .03em; padding-top: 4px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), var(--line), 0 5px 0 2px var(--lime-d), 0 5px 0 4.5px var(--ink), var(--shadow); }
.bigBtn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), var(--line), 0 1px 0 2px var(--lime-d), 0 1px 0 4.5px var(--ink); }
.bigBtn.ghost { flex: .8; border-radius: 10px 12px 9px 11px; padding-top: 0; background: linear-gradient(var(--cap), #f5ead2); color: var(--ink); font: 700 19px/1 var(--text); letter-spacing: 0;
  box-shadow: var(--line), 0 4px 0 2px var(--deep), var(--shadow); }
.bigBtn.ghost:active { box-shadow: var(--line), 0 1px 0 2px var(--deep); }
.stuckArt { position: relative; width: 132px; height: 132px; margin: 14px auto 4px; flex: none; }
.stuckDisc { width: 100%; height: 100%; border-radius: 8px; background: var(--sky); box-shadow: 0 0 0 2px var(--ink), 0 5px 0 2px var(--ink); display: grid; place-items: center; overflow: hidden; transform: rotate(2deg); }
.stuckDisc img { width: 100%; height: 100%; object-fit: cover; }
.stuckX { position: absolute; right: -10px; top: -10px; width: 42px; height: 42px; border-radius: 50%; background: var(--hazard); box-shadow: var(--line), 0 3px 0 2px var(--ink); display: grid; place-items: center; animation: wob 1.6s ease-in-out infinite;
  color: var(--ink); font: 400 24px/1 var(--display); padding-top: 4px; }
@keyframes wob { 50% { transform: rotate(12deg) scale(1.08); } }
#loseText { text-align: center; font: 600 16px/1.38 var(--text); margin: 10px 4px 2px; }
.menuHead { display: flex; justify-content: space-between; align-items: flex-start; }
.menuLogo { height: 96px; max-width: 72%; width: auto; object-fit: contain; margin: -2px 0 0 -4px; display: block; }
.menuSub { margin: 2px 0 10px; font: 600 14px/1.2 var(--text); color: var(--ink-2); }
.goRow { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; } .goRow label { font: 700 16px/1 var(--text); white-space: nowrap; }
#goField { flex: 1; display: flex; gap: 6px; min-width: 0; }
#goField.shake { animation: shake .4s; } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
#goN { flex: 1; min-width: 0; height: 44px; border-radius: 8px; border: 0; padding: 0 12px; font: 700 20px/1 var(--text); color: var(--ink); background: var(--cap); box-shadow: inset 0 2px 4px rgba(43, 39, 48, .18), 0 0 0 2px var(--ink); outline: none; user-select: text; -webkit-user-select: text; }
#goN:focus { box-shadow: inset 0 2px 4px rgba(43, 39, 48, .18), 0 0 0 3px var(--lime-d); }
.bigBtn.small { flex: none; width: 64px; height: 44px; font-size: 19px; }
#lvInfo { margin: 2px 0 6px; } #lvInfo b { color: var(--ink); }

.switch { display: flex; align-items: center; gap: 12px; font: 600 16px/1 var(--text); margin: 8px 0; cursor: pointer; }
.switch input { display: none; }
.switch .sl { flex: none; width: 50px; height: 30px; border-radius: 15px; background: var(--tape); position: relative; transition: background .2s; box-shadow: inset 0 0 0 2px var(--ink); }
.switch .sl::after { content: ""; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--cap); box-shadow: 0 0 0 2px var(--ink); transition: transform .25s cubic-bezier(.3, 1.7, .5, 1); }
.switch input:checked + .sl { background: var(--lime); }
.switch input:checked + .sl::after { transform: translateX(20px); }
.switch small { display: block; font: 500 12px/1.2 var(--text); color: var(--ink-2); margin-top: 3px; }
.switch[hidden] { display: none; }
.fine { font-size: 13px; color: var(--ink-2); margin: 10px 0 0; font-weight: 500; }
.fine.center { text-align: center; }

/* ---------- curtain ---------- */
#curtain { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  background: var(--sky) url(./brand/first-tall.jpg) center / cover no-repeat; transition: opacity .45s; padding-top: max(9vh, 40px); }
@media (min-aspect-ratio: 1/1) { #curtain { background-image: url(./brand/first-wide.jpg); padding-top: 6vh; } }
#curtain::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(191, 231, 255, .55), rgba(191, 231, 255, 0) 40%); pointer-events: none; }
#curtain.off { opacity: 0; pointer-events: none; }
#curtain .logo { position: relative; width: min(72vw, 420px); height: auto; filter: drop-shadow(0 8px 18px rgba(43, 39, 48, .25)); animation: logoIn .7s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes logoIn { from { transform: translateY(-14px) scale(.92); opacity: 0; } }
#curtainInfo { position: relative; font: 600 14px/1.2 var(--text); color: var(--ink); margin-top: 6px; background: rgba(255, 252, 243, .9); padding: 5px 12px; border-radius: 6px; opacity: 0; transition: opacity .3s; }
#curtainInfo.on { opacity: 1; }
#curtainInfo:empty { display: none; }
#curtainSub { position: relative; font: 400 18px/1.2 var(--display); color: var(--ink); letter-spacing: .04em; margin-top: 8px; padding: 9px 18px 6px; max-width: 90vw; text-align: center;
  background: rgba(244, 231, 197, .97); transform: rotate(-1deg); box-shadow: 0 2px 3px rgba(43, 39, 48, .2);
  clip-path: polygon(0 10%, 3% 0, 6% 10%, 9% 0, 91% 0, 94% 10%, 97% 0, 100% 10%, 100% 90%, 97% 100%, 94% 90%, 91% 100%, 9% 100%, 6% 90%, 3% 100%, 0 90%); }
.dots { position: relative; display: flex; gap: 8px; margin-top: 14px; }
.dots i { width: 12px; height: 12px; border-radius: 3px; background: var(--kraft); animation: dot 1s infinite ease-in-out; box-shadow: 0 0 0 2px var(--ink); }
.dots i:nth-child(2) { animation-delay: .15s; background: var(--lime); } .dots i:nth-child(3) { animation-delay: .3s; background: var(--hazard); }
@keyframes dot { 50% { transform: translateY(-8px) rotate(45deg); } }
#lab { position: fixed; left: 6px; bottom: calc(var(--hud-bottom) + 4px); z-index: 30; font: 11px/1.3 ui-monospace, monospace; background: rgba(255, 255, 255, .85); padding: 3px 6px; border-radius: 6px; display: none; pointer-events: none; }

@media (max-height: 700px) { .stuckArt { width: 104px; height: 104px; margin-top: 8px; } .sheet h2 { font-size: 25px; } }
@media (min-width: 1100px) and (min-height: 600px) { .sheet { zoom: 1.22; } #room { max-width: max(200px, calc((100dvh / 1.22 - 540px) * 1.5)); } }

/* the meta layer's mode bar (daily / friend's level) sits above the shelf; a card of the game's own covers it */
body.cardOn #meta .mModeBar { display: none; }

/* phones: the message strip is slim (two lines for every note the game writes) and has its own place between the goal
   and the play (game.js bandBottom reserves it), so it never covers the play */
@media (max-width: 559px) and (orientation: portrait) {
  #msg { font-size: calc(14px * var(--u)); line-height: 1.22; padding: calc(6px * var(--u)) calc(12px * var(--u)) calc(6px * var(--u)) calc(7px * var(--u)); min-height: calc(38px * var(--u)); max-width: calc(100vw - 20px); }
  #msgIcon { width: calc(24px * var(--u)); height: calc(24px * var(--u)); }
}
/* the OS asks for less motion: no flaps, pops or bouncing badges */
@media (prefers-reduced-motion: reduce) {
  #sign.flap, #msg.pop, .round.news .dot, #dailyBtn.hello, #jar.bump, .stuckX, .dots i, #curtain .logo, .goBtn.running .goArrow { animation: none !important; }
  #perfect.on i { animation-duration: .9s; }
  .sheet, .overlay.on { animation-duration: .01s; }
  #msg, #msg.hide { transition: opacity .2s; }
  #msg.hide { transform: translateX(-50%); }
}

/* ---------- the menu: the shell's switches, and the test tools (only with #lab / #test) ---------- */
#menu .mRows .switch { margin: 9px 0; }
#menu > .sheet .sheetBody > .mRows { margin-bottom: 0; } #menuMeta .mRows { margin-top: 0; }
.labTools { margin: 4px 0 10px; padding: 10px 12px 8px; border-radius: 8px; background: rgba(255, 252, 243, .7); border: 2px dashed var(--ink-2); }
.labTools .labHead { margin: 0 0 8px; font: 700 14px/1 var(--text); color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.labTools .labHead small { font: 600 11px/1 ui-monospace, monospace; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.labTools .labRow { display: flex; gap: 8px; margin: 6px 0 2px; }
.labTools .labRow .bigBtn { flex: 1; width: auto; font-size: 14px; height: 40px; }
.labTools #lvInfo { margin: 6px 0 0; }

/* ---------- the key-art view (#art=n, Mendery's): the scene alone, no HUD, no curtain ---------- */
body.art #top, body.art #bottom, body.art #goal, body.art #guide, body.art #msg, body.art #hand, body.art #handX,
body.art #lab, body.art #meta, body.art #fx, body.art .overlay { display: none !important; }
body.art.artReady #curtain { display: none; }
.overlay.on ~ #lab { visibility: hidden; } /* the test line never covers a card */

/* ---------- landscape (a computer, a tablet on its side): the course takes the full height in the middle; the HUD lives
   in the side columns: left the box flap and the message band, the goal tape at the top centre; right the bolts, the
   wrench, and the tools stacked with GO at the column's foot. game.js sets body.land and --u from the window's height. ---------- */
body.land { --colw: clamp(230px, 19vw, 340px); --side: 22px; }
body.land #top { left: 0; transform: none; width: 100%; padding: 0 var(--side); }
body.land #goal { top: calc(18px * var(--u)); }
body.land #msg { left: var(--side); top: calc(var(--hud-top) + 34px * var(--u)); transform: none; width: var(--colw); max-width: var(--colw); align-items: flex-start; }
body.land #msg.pop { animation: msgpopL .42s cubic-bezier(.3, 1.6, .5, 1); }
body.land #msg.hide { transform: translateX(-10px) scale(.97); }
@keyframes msgpopL { 0% { transform: translateY(-6px) scale(.92); opacity: .4; } 100% { transform: none; opacity: 1; } }
body.land #bottom { left: auto; right: var(--side); top: calc(var(--hud-top) + 46px * var(--u)); bottom: max(var(--side), env(safe-area-inset-bottom)); height: auto; padding: 0; align-items: stretch; }
body.land #shelf { flex-direction: column; align-items: stretch; justify-content: flex-end; width: calc(112px * var(--u)); padding: 0 0 6px; gap: calc(14px * var(--u)); }
body.land #shelf .hudBtn, body.land #shelf .mBoost { flex: none; max-width: none; width: 100%; height: calc(56px * var(--u)); flex-direction: row; gap: calc(8px * var(--u)); justify-content: flex-start; padding-left: calc(14px * var(--u)); }
body.land #shelf .goBtn { flex: none; max-width: none; min-width: 0; width: 100%; height: calc(76px * var(--u)); margin-top: calc(8px * var(--u)); }
body.land .mModeBar { left: var(--side); transform: none; bottom: auto; top: calc(var(--hud-top) + 8px); }

/* the win card's Picture / Share / Clip: pressed at once, a spinner while the picture is made (Mewbello 0.2.4) */
#picBtn:active, #shareBtn:active, #clipBtn:active, #picBtn.busy, #shareBtn.busy, #clipBtn.busy { transform: translateY(2px) scale(.97); }
#picBtn.busy, #shareBtn.busy, #clipBtn.busy { cursor: progress; opacity: 1; filter: saturate(.85); }
#picBtn.busy svg, #shareBtn.busy svg, #clipBtn.busy svg { display: none; }
#picBtn.busy::before, #shareBtn.busy::before, #clipBtn.busy::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(43, 39, 48, .25); border-top-color: var(--ink); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #picBtn.busy::before, #shareBtn.busy::before, #clipBtn.busy::before { animation-duration: 2s; } }

/* ===================================================================================================================
   THE PLAY (docs/09-play-contract.md): A's split view on portrait phones (a whole-course strip on top, a big follow
   view below, both framed windows on a kraft board), the parts bin (a cardboard tray with compartments) with GO at
   its right end, tape-label tools above it; on wide screens one big view and the bin + tools + GO in the right column.
   =================================================================================================================== */
body.split { background-color: #c8955f; background-image: repeating-linear-gradient(90deg, rgba(122, 82, 48, .07) 0 2px, transparent 2px 9px), radial-gradient(120% 80% at 50% 40%, rgba(255, 236, 200, .25), rgba(122, 82, 48, .18)); }
body.split #vignette { display: none; }
#views { position: fixed; inset: 0; pointer-events: none; z-index: 1; display: none; }
body.split #views { display: block; }
.view { position: absolute; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 3px 0 rgba(122, 82, 48, .45); }
.view .lbl { position: absolute; left: 10px; top: -10px; background: var(--tape); font: 700 10.5px/1 var(--text); letter-spacing: .14em; padding: 3px 8px 2px; transform: rotate(-2deg); border: 1px solid rgba(122, 82, 48, .25); color: var(--ink); }

/* the bottom: tools row + the bin with GO */
#bottom { height: auto; flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(7px * var(--u)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); padding-bottom: max(calc(10px * var(--u)), env(safe-area-inset-bottom)); }
#tools { display: flex; gap: calc(7px * var(--u)); width: min(100%, calc(520px * var(--u))); justify-content: flex-end; pointer-events: none; }
.tapeBtn.hudBtn { flex: 0 1 auto; max-width: none; height: calc(36px * var(--u)); flex-direction: row; gap: calc(5px * var(--u)); padding: 0 calc(10px * var(--u)) 0 calc(8px * var(--u)); font: 700 calc(13.5px * var(--u))/1 var(--text);
  background: linear-gradient(#fbf3de, var(--tape)); border-radius: 3px; box-shadow: var(--line), 0 3px 0 2px var(--deep), var(--shadow); display: inline-flex; align-items: center; pointer-events: auto; }
.tapeBtn.hudBtn::after { left: auto; right: calc(-5px * var(--u)); top: calc(-4px * var(--u)); width: calc(18px * var(--u)); height: calc(7px * var(--u)); transform: rotate(30deg); }
.tapeBtn.hudBtn svg { width: calc(17px * var(--u)); height: calc(17px * var(--u)); }
.tapeBtn.hudBtn[hidden] { display: none; }
#ffBtn.on { background: var(--hazard); }
#hintBtn #hintPrice { top: calc(-11px * var(--u)); }
#shelf { width: min(100%, calc(520px * var(--u))); align-items: stretch; gap: calc(9px * var(--u)); padding: 0; }
#tray { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); grid-auto-rows: calc(56px * var(--u)); gap: 0; pointer-events: auto;
  background: #9c6b3b; border-radius: 12px; padding: calc(4px * var(--u)); box-shadow: inset 0 5px 10px rgba(43, 39, 48, .35), 0 0 0 2.5px var(--ink), 0 4px 0 2.5px var(--deep); }
.cmp { position: relative; border: 0; background: linear-gradient(180deg, #b98450, #cf9d68 40%, #d4a373); margin: 2px; border-radius: 6px; box-shadow: inset 0 3px 5px rgba(43, 39, 48, .35), inset 0 -1px 0 rgba(255, 240, 210, .4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; touch-action: none; overflow: hidden; color: var(--ink); cursor: grab; }
.cmp img { width: calc(42px * var(--u)); height: calc(42px * var(--u)); display: block; margin-top: calc(-5px * var(--u)); pointer-events: none; filter: drop-shadow(0 2px 1px rgba(43, 39, 48, .35)); transition: transform .12s; }
.cmp span { font: 700 calc(10.5px * var(--u))/1 var(--text); margin-top: calc(-3px * var(--u)); pointer-events: none; white-space: nowrap; }
.cmp:active img { transform: scale(1.12) rotate(-6deg); }
.cmp.used img { opacity: .3; filter: grayscale(1); }
.cmp.used::after { content: "on robot"; position: absolute; top: calc(15px * var(--u)); font: 700 calc(9.5px * var(--u))/1.2 var(--text); background: var(--tape); padding: 0 4px; transform: rotate(-5deg); pointer-events: none; }
.cmp.locked { cursor: default; }
.cmp.locked .q { font: 400 calc(24px * var(--u))/1 var(--display); color: rgba(43, 39, 48, .55); margin-top: calc(3px * var(--u)); width: calc(32px * var(--u)); height: calc(28px * var(--u)); border: 2px dashed rgba(43, 39, 48, .45); border-radius: 8px; display: grid; place-items: center; padding-top: 3px; }
.cmp.locked span { opacity: .6; }
.cmp.hot { box-shadow: inset 0 3px 5px rgba(43, 39, 48, .35), 0 0 0 3px var(--lime); animation: hot 1s ease-in-out infinite; }
@keyframes hot { 50% { box-shadow: inset 0 3px 5px rgba(43, 39, 48, .35), 0 0 0 5px var(--lime-l); } }
.cmp .kindDot { position: absolute; right: 3px; top: 3px; width: calc(18px * var(--u)); height: calc(18px * var(--u)); border-radius: 50%; background: var(--cap); box-shadow: 0 0 0 1.5px var(--ink); display: grid; place-items: center; pointer-events: none; }
.cmp .kindDot svg { width: 80%; height: 80%; }
#shelf .goBtn { flex: none; width: calc(104px * var(--u)); min-width: 0; height: auto; flex-direction: column; gap: calc(2px * var(--u)); padding: calc(6px * var(--u)) 0 0; transform: rotate(1.5deg); }
#shelf .goBtn .goLabel { font-size: calc(32px * var(--u)); }
#shelf .goBtn .goArrow { display: none; }
#goBtn.pulse { animation: gop 1.1s ease-in-out infinite; }
@keyframes gop { 50% { transform: scale(1.07) rotate(1.5deg); } }
#goBtn.running { background: linear-gradient(#ffe37a, var(--hazard)); }
#goBtn.running .goFlag { display: none; }
#tools .mBoost[hidden] { display: none; }
#tools .mBoost { height: calc(36px * var(--u)); padding: 0 8px; font-size: 12px; flex-direction: row; gap: 4px; pointer-events: auto; }

/* the goal strip's live line: Parts 1/2, Star 0/1, the run's clock */
#goalSub { font: 600 calc(12.5px * var(--u))/1 var(--text); color: var(--ink-2); font-variant-numeric: tabular-nums; }
#goalSub:empty { display: none; }
#goalSub.warn { color: #c2410c; }

/* the ghost of a carried part, the reason at the spot, the fail card, the round banner */
#ghost { position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; z-index: 9; display: none; filter: drop-shadow(0 8px 6px rgba(43, 39, 48, .35)); }
#ghost img { width: 100%; height: 100%; }
#why { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; display: none; max-width: 240px; color: var(--ink);
  background: repeating-linear-gradient(45deg, var(--hazard) 0 6px, var(--ink) 6px 12px) left top/8px 100% no-repeat, var(--tape);
  padding: 7px 12px 7px 20px; font: 700 15px/1.15 var(--text); transform-origin: 50% 100%; box-shadow: 0 3px 0 rgba(122, 82, 48, .45); border-radius: 2px; }
#why::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -10px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top: 10px solid var(--tape); }
#why.pop { animation: whyPop .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes whyPop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
#failW { position: fixed; z-index: 7; pointer-events: none; display: none; justify-content: center; }
#failW .fcard { pointer-events: auto; position: relative; width: min(380px, calc(100% - 20px)); display: flex; gap: 10px; align-items: center; padding: 11px 12px 12px; color: var(--ink);
  background: var(--kraft-ll) radial-gradient(rgba(122, 82, 48, .14) 1px, transparent 1.4px) 0 0/7px 7px; border-radius: 8px 10px 7px 9px; box-shadow: var(--line), 0 5px 0 2px var(--deep), var(--shadow); transform: rotate(-1deg); }
#failW .fcard::before, #failW .fcard::after { content: ""; position: absolute; top: -9px; width: 54px; height: 17px; background: rgba(244, 231, 197, .92); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
#failW .fcard::before { left: -10px; transform: rotate(-28deg); }
#failW .fcard::after { right: -10px; transform: rotate(26deg); }
#failW .txt { flex: 1; min-width: 0; }
#failW .w { font: 700 15.5px/1.15 var(--text); }
#failW .t { font: 600 13.5px/1.25 var(--text); margin-top: 3px; color: var(--ink-2); }
#failW .fbtns { display: flex; flex-direction: column; gap: 8px; flex: none; align-items: stretch; }
#failW .bigBtn { height: 44px; font-size: 19px; padding: 3px 14px 0; flex: none; }
#failW .tapeBtn { justify-content: center; }
#failW.show { display: flex; animation: failDrop .35s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes failDrop { 0% { transform: translateY(-24px); opacity: 0; } 100% { transform: none; opacity: 1; } }
#banner { position: fixed; z-index: 6; left: 0; top: 0; pointer-events: none; display: none; text-align: center; transform: translate(-50%, -50%); }
#banner .b1 { display: inline-block; background: var(--tape); padding: 8px 26px 4px; font: 400 34px/1 var(--display); color: var(--ink); transform: rotate(-2deg); box-shadow: 0 3px 0 rgba(122, 82, 48, .45); clip-path: polygon(0 0, 100% 0, 97% 50%, 100% 100%, 0 100%, 3% 50%); }
#banner .b2 { display: block; margin: 8px auto 0; background: var(--ink); color: var(--cap); padding: 6px 14px; font: 700 16px/1.2 var(--text); border-radius: 6px; transform: rotate(1deg); width: max-content; max-width: 86vw; }
#banner .b2:empty { display: none; }
#banner.show { display: block; animation: ban 2.2s ease forwards; }
@keyframes ban { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 18% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.95); } }

/* the drawing pad: a cardboard card over the bin (phones) or in the side column (wide) */
#padCard { position: fixed; z-index: 8; display: none; flex-direction: column; gap: 6px; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(calc(10px * var(--u)), env(safe-area-inset-bottom));
  margin: 0 auto; max-width: calc(520px * var(--u)); padding: 9px 10px 10px; color: var(--ink); background: var(--kraft) radial-gradient(rgba(122, 82, 48, .16) 1px, transparent 1.4px) 0 0/7px 7px;
  border-radius: 8px 10px 7px 9px; box-shadow: var(--line), 0 5px 0 2px var(--deep), var(--shadow); }
#padCard.on { display: flex; animation: failDrop .3s cubic-bezier(.3, 1.5, .5, 1); }
#padCard::before { content: ""; position: absolute; left: 20px; top: -9px; width: 60px; height: 17px; background: rgba(244, 231, 197, .92); transform: rotate(-6deg); }
.padHead { display: flex; align-items: center; gap: 8px; }
.padHead b { font: 400 19px/1 var(--display); letter-spacing: .02em; padding-top: 3px; }
.padHead small { font: 600 12.5px/1.1 var(--text); color: var(--ink-2); flex: 1; }
.padHead .round { flex: none; width: 36px; height: 36px; }
.padBody { display: flex; gap: 10px; align-items: stretch; }
#pad { flex: none; width: min(46vw, 200px); height: min(46vw, 200px); touch-action: none; cursor: crosshair; border-radius: 10px 8px 11px 9px; background: #fbf3de repeating-linear-gradient(0deg, rgba(92, 200, 232, .18) 0 1px, transparent 1px 16px); box-shadow: inset 0 2px 5px rgba(43, 39, 48, .25), 0 0 0 2px var(--ink); }
.padSide { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#padKind { min-height: 50px; display: flex; align-items: center; gap: 7px; background: rgba(251, 243, 222, .9); border-radius: 6px; padding: 5px 8px; box-shadow: 0 0 0 1.5px rgba(43, 39, 48, .5); font: 600 13px/1.2 var(--text); }
#padKind .pi { flex: none; width: 34px; height: 34px; }
#padKind .pi svg { width: 100%; height: 100%; }
#padKind b { display: block; font: 700 15px/1.1 var(--text); }
#padKind[data-kind=""] { color: var(--ink-2); }
#padKind.pop { animation: whyPop .3s cubic-bezier(.3, 1.6, .5, 1); }
.padTips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.padTips li { display: flex; align-items: center; gap: 6px; font: 600 12px/1.1 var(--text); color: var(--ink-2); }
.padTips li svg { width: 22px; height: 22px; flex: none; }
.padRedraw { align-self: flex-start; margin-top: auto; }
@media (max-width: 370px) { .padTips li { font-size: 11px; } #pad { width: 44vw; height: 44vw; } }

/* the win card: the part the next level brings */
#cardNext { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px auto 0; background: rgba(244, 231, 197, .8); border-radius: 8px; padding: 5px 12px; box-shadow: 0 0 0 1.5px rgba(43, 39, 48, .45); font: 700 14px/1.2 var(--text); color: var(--ink); }
#cardNext[hidden] { display: none; }
#cardNext img { width: 46px; height: 46px; }
#newArt img { width: 92px; height: 92px; filter: drop-shadow(0 3px 2px rgba(43, 39, 48, .3)); }
#newArt { gap: 10px; flex-wrap: wrap; }
#newText b { font-weight: 700; }
#newText p { margin: 6px 0; }

/* wide: the bin, the tools and GO in the right column */
body.land { --binw: clamp(236px, 20vw, 330px); }
body.land #bottom { width: var(--binw); gap: calc(10px * var(--u)); justify-content: flex-end; }
body.land #tools { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
body.land #tools .tapeBtn.hudBtn { flex: 1 1 calc(50% - 8px); justify-content: center; height: calc(38px * var(--u)); }
body.land #shelf { width: 100%; flex-direction: column; gap: calc(12px * var(--u)); padding: 0; }
body.land #tray { flex: none; grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(58px, 10.5vh, 104px); }
body.land .cmp img { width: clamp(44px, 7.4vh, 76px); height: clamp(44px, 7.4vh, 76px); }
body.land .cmp span { font-size: clamp(10.5px, 1.45vh, 14px); }
body.land #shelf .goBtn { width: 100%; height: clamp(68px, 11vh, 108px); flex-direction: row; gap: 12px; margin-top: 0; transform: rotate(1deg); }
body.land #shelf .goBtn .goLabel { font-size: calc(38px * var(--u)); }
body.land #padCard { left: auto; right: var(--side); width: var(--binw); bottom: auto; top: calc(var(--hud-top) + 46px * var(--u)); max-width: none; }
body.land .padBody { flex-direction: column; }
body.land #pad { width: 100%; height: auto; aspect-ratio: 1; }
/* narrow phones: the goal tape keeps clear of the garage / daily buttons on the right */
@media (max-width: 430px) and (orientation: portrait) {
  #goal { left: 10px; transform: rotate(-.8deg); max-width: calc(100vw - 118px); overflow: hidden; }
  #goalText { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}