/* Ordiva: a sunlit morning room. Apricot plaster, honey oak, sage and dusty sky, a pop of berry.
   The HUD: a paper tag hanging top left (level, piece, time), the coin jar and menu top right, the tools on an oak shelf. */
:root {
  --paper: #fff8ef; --paper-2: #fdeedd; --edge: #ecd2b6; --ink: #4b2a3a; --ink-2: #86617a;
  --berry: #c8487a; --berry-d: #973158; --berry-l: #f6d3e0;
  --sage: #8fbb9b; --sage-d: #5d9270; --sky: #8fbbe0; --sky-d: #5b8cbf;
  --apricot: #f6c39c; --honey: #e3a556; --gold: #f6c34f; --gold-d: #cf8f22; --red: #e0574f; --red-d: #b23a35;
  --shadow: 0 8px 22px rgba(110, 50, 40, .18);
  --display: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --text: "Quicksand", "Segoe UI", system-ui, sans-serif;
  --u: 1;
  --hud-top: calc(96px * var(--u)); --hud-bottom: calc(92px * var(--u));
}
@media (max-width: 370px) { :root { --u: .92; } }
@media (min-width: 1100px) and (min-height: 600px) { :root { --u: 1.42; } }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f4cfae; 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(120% 90% at 50% 46%, rgba(255, 236, 210, 0) 58%, rgba(120, 52, 48, .2) 100%); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
svg { display: block; }
use, svg { pointer-events: none; }

/* chunky soft buttons: a body, a darker lip below, a light rim on top; they sink when pressed */
.round, .hudBtn, #jar, .bigBtn, #handX {
  transition: transform .18s cubic-bezier(.3, 1.7, .5, 1), box-shadow .18s cubic-bezier(.3, 1.7, .5, 1), background .2s, opacity .2s;
}

/* ---------- 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: calc(8px * var(--u)) 12px 0; padding-top: max(calc(8px * var(--u)), env(safe-area-inset-top)); pointer-events: none; z-index: 5; }
#top > * { pointer-events: auto; }
.round { width: calc(48px * var(--u)); height: calc(48px * var(--u)); border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(#fffdf9, var(--paper-2)); box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--edge), var(--shadow); }
.round svg { width: calc(24px * var(--u)); height: calc(24px * var(--u)); fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.round:active { transform: translateY(3px); box-shadow: inset 0 2px 0 #fff, 0 1px 0 var(--edge), var(--shadow); }

/* the paper tag: a luggage label, swinging a little when the piece changes */
#tagCard { position: relative; isolation: isolate; margin-top: calc(8px * var(--u)); min-width: calc(150px * var(--u)); max-width: calc(100vw - 170px * var(--u)); padding: calc(7px * var(--u)) calc(14px * var(--u)) calc(8px * var(--u)) calc(30px * var(--u));
  --notch: polygon(calc(16px * var(--u)) 0, 100% 0, 100% 100%, calc(16px * var(--u)) 100%, 0 calc(100% - 16px * var(--u)), 0 calc(16px * var(--u)));
  border-radius: calc(16px * var(--u)) calc(14px * var(--u)) calc(14px * var(--u)) calc(16px * var(--u));
  /* baked shadows (no CSS filter on a swinging element): a soft box-shadow on the tag, a hard paper edge and the paper itself as pseudo-elements */
  box-shadow: 0 calc(7px * var(--u)) calc(9px * var(--u)) calc(-2px * var(--u)) rgba(110, 50, 40, .2);
  transform-origin: calc(16px * var(--u)) 50%; transform: rotate(-2deg); }
#tagCard::before, #tagCard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; clip-path: var(--notch); border-radius: 0 calc(14px * var(--u)) calc(14px * var(--u)) 0; pointer-events: none; }
#tagCard::before { z-index: -1; background: linear-gradient(#fffaf2, #fbefdc); }
#tagCard::after { z-index: -2; background: #e2c4a2; transform: translateY(calc(3px * var(--u))); }
#tagCard.swing { animation: swing 1.4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes swing { 0% { transform: rotate(-9deg); } 35% { transform: rotate(2.5deg); } 65% { transform: rotate(-3.5deg); } 100% { transform: rotate(-2deg); } }
#tagCard .hole { position: absolute; left: calc(11px * var(--u)); top: 50%; width: calc(10px * var(--u)); height: calc(10px * var(--u)); margin-top: calc(-5px * var(--u)); border-radius: 50%; background: #e9c9a7; box-shadow: inset 0 0 0 calc(2.5px * var(--u)) var(--honey); }
#tagCard .string { display: none; }
.tagTop { display: flex; align-items: center; gap: calc(6px * var(--u)); }
#lvNum { font: 800 calc(11px * var(--u))/1.1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--berry-d); white-space: nowrap; }
#tricky { font: 800 calc(10.5px * var(--u))/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #5b2f49; padding: calc(3px * var(--u)) calc(7px * var(--u)) calc(2px * var(--u)); border-radius: 99px; transform: rotate(3deg); box-shadow: 0 2px 0 rgba(60, 20, 40, .35); }
#tricky[hidden] { display: none; }
#lvName { font: 800 calc(20px * var(--u))/1.1 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sub { display: flex; align-items: center; gap: calc(9px * var(--u)); margin-top: calc(1px * var(--u)); }
#dots { display: flex; gap: calc(4px * var(--u)); }
#dots[hidden] { display: none; }
#dots i { width: calc(9px * var(--u)); height: calc(9px * var(--u)); border-radius: 50%; background: #ead7c6; box-shadow: inset 0 1px 1px rgba(120, 60, 40, .2); }
#dots i.done { background: var(--sage); box-shadow: none; }
#dots i.cur { background: var(--berry); box-shadow: 0 0 0 2px var(--berry-l); }
#clock { display: inline-flex; align-items: center; gap: calc(3px * var(--u)); font: 700 calc(13px * var(--u))/1 var(--text); color: var(--ink-2); font-variant-numeric: tabular-nums; }
#clock svg { width: calc(14px * var(--u)); height: calc(14px * var(--u)); fill: none; stroke: var(--ink-2); stroke-width: 2.4; stroke-linecap: round; }
#clock[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(7px * var(--u)); margin-top: calc(10px * 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 { position: relative; }
.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: -1px; top: -1px; width: calc(13px * var(--u)); height: calc(13px * var(--u)); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2.5px #fff; }
.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); } }
#jar { display: flex; align-items: center; gap: calc(4px * var(--u)); height: calc(48px * var(--u)); padding: 0 calc(14px * var(--u)) 0 calc(6px * var(--u)); border-radius: 99px;
  background: linear-gradient(#fffdf9, var(--paper-2)); box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--edge), var(--shadow); }
.jarIcon { width: calc(32px * var(--u)); height: calc(35px * var(--u)); overflow: visible; }
.jarIcon .lid { fill: var(--berry); } .jarIcon .rim { fill: var(--berry-d); }
.jarIcon .glass { fill: rgba(214, 236, 246, .9); stroke: #8fb7cf; stroke-width: 2; }
.jarIcon .c1 { fill: var(--gold); stroke: var(--gold-d); stroke-width: 1.6; } .jarIcon .c2 { fill: #ffd977; stroke: var(--gold-d); stroke-width: 1.6; }
.jarIcon .shine { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; opacity: .8; fill: none; }
#coins { font: 800 calc(21px * var(--u))/1 var(--display); min-width: calc(22px * var(--u)); color: var(--ink); }
#jar.bump { animation: bump .32s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 35% { transform: scale(1.16) rotate(-3deg); } }

/* ---------- message band ---------- */
#msg { position: fixed; left: 50%; top: calc(var(--hud-top) + 10px * var(--u)); 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(18px * var(--u));
  background: rgba(255, 249, 241, .95); box-shadow: 0 3px 0 rgba(236, 210, 182, .9), 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)); }
#msg b { font-weight: 700; color: var(--berry-d); }
#msgIcon { flex: none; width: calc(28px * var(--u)); height: calc(28px * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--sage); box-shadow: 0 2px 0 var(--sage-d); }
#msgIcon svg { width: 70%; height: 70%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#msgIcon.star svg { fill: #fff; stroke-width: 1; }
#msgThumb { display: none; flex: none; width: calc(50px * var(--u)); height: calc(50px * var(--u)); border-radius: calc(14px * var(--u)); background: #fff; box-shadow: inset 0 0 0 2px #f3b8b1; margin: calc(-4px * var(--u)) 0; object-fit: contain; }
#msg.dead { background: #fff3ef; color: #6d2630; box-shadow: 0 0 0 2.5px var(--red), 0 3px 0 2px var(--red-d), var(--shadow); padding-left: calc(6px * var(--u)); }
#msg.dead b { color: var(--red-d); }
#msg.dead #msgIcon { background: var(--red); box-shadow: 0 2px 0 var(--red-d); }
#msg.dead.thumb #msgIcon { display: none; }
#msg.dead.thumb #msgThumb { display: block; }
#msg.tip #msgIcon { background: var(--gold); box-shadow: 0 2px 0 var(--gold-d); }
#msg.warn #msgIcon { background: var(--honey); box-shadow: 0 2px 0 #b57a2e; }
#msg.win #msgIcon { background: var(--gold); box-shadow: 0 2px 0 var(--gold-d); }
#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; } }

#boxBadge { position: fixed; left: 0; top: 0; z-index: 3; padding: calc(4px * var(--u)) calc(11px * var(--u)) calc(3px * var(--u)); border-radius: 99px;
  background: linear-gradient(#fff9f1, #f7e6cf); color: var(--ink); font: 800 calc(14px * var(--u))/1.2 var(--display);
  box-shadow: 0 2px 0 #d9b48a, 0 4px 10px rgba(110, 50, 40, .2); pointer-events: none; white-space: nowrap; transform: translate(-50%, -50%); }
#boxBadge::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--berry); margin-right: .4em; vertical-align: .08em; }
#boxBadge.empty::before { background: var(--sage); }
#boxBadge[hidden] { display: none; }
/* have / need beside "N left": the free cells a waiting item can still cover against the cells they need */
#boxBadge .hn { margin-left: .5em; padding: calc(2px * var(--u)) calc(8px * var(--u)) calc(1px * var(--u)); border-radius: 99px; font: 700 calc(12.5px * var(--u))/1.2 var(--text);
  background: #e3f0e5; color: #2f5d3e; box-shadow: inset 0 0 0 1.5px #b9d8c1; }
#boxBadge .hn b { font-weight: 800; }
#boxBadge[data-state="amber"] .hn { background: #fdf0d6; color: #7a4f12; box-shadow: inset 0 0 0 1.5px #ecc679; }
#boxBadge[data-state="red"] .hn { background: #fde3df; color: #9a2a26; box-shadow: inset 0 0 0 2px var(--red); }
#boxBadge[data-state="red"] .hn b::before { content: "! "; }
@media (max-width: 559px) { #boxBadge .hn { font-size: calc(11.5px * var(--u)); padding-left: 6px; padding-right: 6px; margin-left: .35em; } }
#tag { position: fixed; left: 0; top: 0; z-index: 3; padding: calc(4px * var(--u)) calc(11px * var(--u)); border-radius: 99px; background: var(--red); color: #fff; font: 700 calc(13px * var(--u))/1.3 var(--text);
  box-shadow: 0 2px 0 var(--red-d); pointer-events: none; white-space: nowrap; transform: translate(-50%, -100%) scale(.7); opacity: 0; transition: opacity .15s, transform .25s cubic-bezier(.3, 1.7, .5, 1); }
#tag.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }

/* ---------- bottom HUD ---------- */
#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(8px * var(--u)), env(safe-area-inset-bottom)); z-index: 5; pointer-events: none; }
/* the tools stand on a little honey-oak shelf */
#shelf { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: calc(8px * var(--u)); width: min(100%, calc(430px * var(--u))); padding: 0 calc(9px * var(--u)) calc(13px * var(--u)); }
#shelf::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(20px * var(--u)); border-radius: calc(8px * var(--u));
  background: linear-gradient(#f0c88f, #dfa35d 55%, #c98d4f); box-shadow: inset 0 2px 0 rgba(255, 245, 225, .6), 0 4px 0 #a96f38, 0 8px 16px rgba(110, 50, 40, .25); }
#shelf::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: calc(7px * var(--u)); height: 2px; border-radius: 2px; background: rgba(140, 80, 35, .25); }
#shelf .hudBtn { position: relative; z-index: 1; }
.hudBtn { pointer-events: auto; flex: 1 1 0; min-width: 0; max-width: calc(98px * var(--u)); height: calc(62px * var(--u)); border-radius: calc(20px * var(--u));
  background: linear-gradient(#fffdf9, var(--paper-2)); box-shadow: inset 0 2px 0 #fff, 0 5px 0 var(--edge), var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2px * var(--u)); font: 800 calc(14.5px * var(--u))/1 var(--display); color: var(--ink); }
.hudBtn svg { width: calc(26px * var(--u)); height: calc(26px * var(--u)); fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hudBtn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 2px 0 #fff, 0 1px 0 var(--edge), var(--shadow); }
.hudBtn.primary { background: linear-gradient(#d95f8d, var(--berry)); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 5px 0 var(--berry-d), var(--shadow); }
.hudBtn.primary svg { stroke: #fff; }
.hudBtn.primary:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 1px 0 var(--berry-d), var(--shadow); }
.hudBtn.turn { background: linear-gradient(#a6cfb0, var(--sage)); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 5px 0 var(--sage-d), var(--shadow); }
.hudBtn.turn svg { stroke: #fff; }
.hudBtn.turn:not(.on) { filter: saturate(.25) brightness(1.08); opacity: .55; }
.hudBtn.turn.on { animation: turnOn .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes turnOn { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } }
.hudBtn.pulse { animation: pulse 1s ease-in-out infinite; background: #fff3ef; box-shadow: inset 0 2px 0 #fff, 0 5px 0 var(--red-d), 0 0 0 3px var(--red), var(--shadow); }
@keyframes pulse { 50% { transform: scale(1.08); } }
.hudBtn:disabled { color: #c9b2a6; cursor: default; } .hudBtn:disabled svg { stroke: #d1bcb0; }
/* after level 80 a second hint is a Peek: its price shows on the button */
#hintPrice { position: absolute; right: calc(-4px * var(--u)); top: calc(-8px * 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: #fff8ef; color: var(--gold-d); font: 800 calc(12px * var(--u))/1 var(--display); font-style: normal; box-shadow: 0 2px 0 var(--edge); }
#hintPrice[hidden] { display: none; }
#hintPrice .c { width: calc(12px * var(--u)); height: calc(12px * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6cf, var(--gold) 46%, var(--gold-d)); }
/* Magic tidy sits on the shelf with the tools (from level 21) */
#shelf .mBoost { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; max-width: calc(98px * var(--u)); height: calc(62px * var(--u)); border-radius: calc(20px * var(--u)); padding: 4px 2px;
  font-size: calc(12.5px * var(--u)); box-shadow: inset 0 2px 0 #fff, 0 5px 0 var(--edge), var(--shadow); }
#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(--berry); stroke-width: 3; stroke-linecap: round; }
#hand .ring { position: absolute; left: 37.5%; top: 9%; width: 0; height: 0; }
#hand .ring::after { content: ""; position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--gold); box-shadow: 0 0 12px var(--gold); opacity: var(--ring, 0); transform: scale(var(--rs, 1)); }
#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(--paper);
  box-shadow: 0 3px 0 var(--edge), 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 ---------- */
#perfect { position: fixed; left: 50%; top: 40%; z-index: 6; transform: translate(-50%, -50%); font: 800 clamp(58px, 16vw, 132px)/1 var(--display); color: #fff;
  pointer-events: none; white-space: nowrap; display: flex; }
#perfect i { font-style: normal; display: inline-block; opacity: 0; -webkit-text-stroke: 4px var(--berry-d); paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--berry-d), 0 14px 30px rgba(120, 30, 60, .35); }
#perfect.small { font-size: clamp(40px, 11vw, 84px); top: 34%; }
#perfect.small.on i { animation-duration: 1.4s; }
#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; }
.coinFx { position: absolute; left: 0; top: 0; width: calc(28px * var(--u)); height: calc(28px * var(--u)); margin: calc(-14px * var(--u)) 0 0 calc(-14px * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6cf, var(--gold) 46%, var(--gold-d)); box-shadow: 0 0 0 2px #c58720 inset, 0 0 0 4px rgba(255, 230, 150, .5) inset, 0 4px 8px rgba(120, 60, 20, .35); will-change: transform; }
.coinFx::after { content: ""; position: absolute; inset: 27%; border-radius: 50%; border: 2px solid rgba(197, 135, 32, .6); }
.petal { position: absolute; left: 0; top: 0; width: 14px; height: 9px; border-radius: 80% 0 80% 0; will-change: transform; }

/* ---------- overlays (card, lose card, menu) ---------- */
.overlay { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; background: rgba(75, 34, 52, .38); padding: max(56px, env(safe-area-inset-top)) 12px 12px; }
.overlay.on { display: flex; animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(420px, 100%); max-height: calc(100% - 8px); display: flex; flex-direction: column; background: linear-gradient(#fffaf3, #fff3e4); border-radius: 28px;
  box-shadow: inset 0 2px 0 #fff, 0 8px 0 var(--edge), 0 24px 60px rgba(70, 25, 40, .38); position: relative; animation: rise .5s cubic-bezier(.25, 1.5, .45, 1); overflow: hidden; }
@keyframes rise { from { transform: translateY(60px) scale(.9); opacity: 0; } }
.sheetBody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 18px 6px; display: flex; flex-direction: column; }
.cardTop { text-align: center; flex: none; }
.badge { display: inline-block; font: 800 15px/1 var(--display); color: #fff; background: linear-gradient(#a6cfb0, var(--sage)); padding: 7px 18px 5px; border-radius: 99px;
  box-shadow: 0 3px 0 var(--sage-d); letter-spacing: .08em; text-transform: uppercase; }
.badge.red { background: linear-gradient(#ec7b70, var(--red)); box-shadow: 0 3px 0 var(--red-d); }
.sheet h2 { font: 800 28px/1.05 var(--display); margin: 10px 0 2px; }
.sheet h2 small { font: 600 14px/1 var(--text); color: var(--ink-2); display: block; margin-top: 4px; }
#cardSub { margin: 0 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: #fff; padding: 6px 6px 16px; border-radius: 6px; box-shadow: 0 4px 10px rgba(110, 50, 40, .22), 0 0 0 1px #f0dcc6; transform: rotate(var(--r)); animation: drop .6s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d); }
@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: 3px; }
/* the win card: the room that grows, the pieces' polaroids pinned along its foot */
.roomWrap { position: relative; flex: none; display: flex; flex-direction: column; }
#room { position: relative; width: 100%; max-width: max(230px, calc((100dvh - 430px) * 1.5)); margin: 2px auto 0; border-radius: 20px; overflow: hidden; background: #f9e3cd; box-shadow: inset 0 0 0 3px #f1d5b8, 0 4px 0 #f1d5b8; }
#room[hidden] { display: none; }
#room canvas { display: block; }
#photos.mini { position: relative; margin-top: 8px; min-height: 0; padding: 0 10px; justify-content: center; gap: 8px; flex-wrap: nowrap; pointer-events: none; }
#photos.mini .photo { width: 17%; max-width: 70px; padding: 3px 3px 7px; }
@media (max-height: 760px) { #photos.mini .photo { width: 14%; max-width: 56px; } }
#roomCap { margin: 8px 4px 0; text-wrap: balance; text-align: center; font: 700 14px/1.3 var(--text); color: var(--berry-d); 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: 26px; height: 26px; 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 (four in a row did not fit a phone) */
#card .cardFoot { flex-wrap: wrap; row-gap: 12px; }
#picBtn, #shareBtn, #clipBtn { flex: 1 1 0; width: auto; min-width: 0; height: 50px; padding: 0 8px; font-size: 18px; border-radius: 16px; }
#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.n3 .photo, #photos.n4 .photo { width: 33%; } #photos.n1 .photo { width: 60%; } }
.stats { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 10px 0 2px; flex: none; }
.stat { display: flex; align-items: center; gap: 7px; font: 700 18px/1 var(--text); color: var(--ink-2); }
.stat b { font: 800 26px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.stat svg { width: 26px; height: 26px; fill: none; stroke: var(--berry); stroke-width: 2.4; stroke-linecap: round; }
#cardBest { margin-top: 4px; min-height: 1em; }
.badge.gold { background: linear-gradient(#ffd977, var(--gold)); box-shadow: 0 3px 0 var(--gold-d); color: #6b3f0e; }
#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; }
#room { flex: 1 1 auto; min-height: 110px; display: flex; align-items: center; justify-content: center; border-radius: 20px; overflow: hidden; background: #f9e3cd;
  box-shadow: inset 0 0 0 3px #f1d5b8; }
#room svg { width: 100%; height: 100%; max-height: 100%; display: block; }
.cardRow { display: flex; justify-content: center; margin: 12px 0 2px; flex: none; }
.reward { display: flex; align-items: center; gap: 8px; font: 800 26px/1 var(--display); color: var(--gold-d); }
.reward .coin { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6cf, var(--gold) 46%, var(--gold-d)); box-shadow: 0 0 0 2px #c58720 inset; }
.cardFoot { flex: none; padding: 10px 18px 18px; display: flex; gap: 10px; }
.bigBtn { flex: 1; height: 60px; border-radius: 20px; background: linear-gradient(#d95f8d, var(--berry)); color: #fff; font: 800 24px/1 var(--display);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 5px 0 var(--berry-d), var(--shadow); }
.bigBtn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 1px 0 var(--berry-d); }
.bigBtn.ghost { flex: .8; background: linear-gradient(#fffdf9, var(--paper-2)); color: var(--ink); box-shadow: inset 0 2px 0 #fff, 0 5px 0 var(--edge), var(--shadow); }
.stuckArt { position: relative; width: 128px; height: 128px; margin: 14px auto 4px; flex: none; }
.stuckDisc { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #fde3dc); box-shadow: inset 0 0 0 4px #f6c1b9, 0 6px 0 #f0b3aa; display: grid; place-items: center; overflow: hidden; }
.stuckDisc img { width: 92%; height: 92%; object-fit: contain; }
.stuckX { position: absolute; right: -4px; top: -4px; width: 40px; height: 40px; border-radius: 50%; background: var(--red); box-shadow: 0 3px 0 var(--red-d); display: grid; place-items: center; animation: wob 1.6s ease-in-out infinite; }
.stuckX svg { width: 58%; height: 58%; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; }
@keyframes wob { 50% { transform: rotate(12deg) scale(1.08); } }
#loseText { text-align: center; font: 600 16px/1.35 var(--text); margin: 10px 4px 2px; }
#loseText b { color: var(--red-d); }
.menuHead { display: flex; justify-content: space-between; align-items: flex-start; }
.menuHead h2 { margin-top: 0; }
.menuLogo { height: 58px; width: auto; margin: 6px 0 0 -4px; display: block; }
.menuSub { margin: 2px 0 10px; font: 700 14px/1.2 var(--text); color: var(--ink-2); }
.goRow { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; } .goRow label { font: 800 16px/1 var(--display); 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: 14px; border: 0; padding: 0 12px; font: 800 20px/1 var(--display); color: var(--ink); background: #fff; box-shadow: inset 0 2px 4px rgba(120, 60, 40, .18), 0 0 0 2px var(--edge); outline: none; user-select: text; -webkit-user-select: text; }
#goN:focus { box-shadow: inset 0 2px 4px rgba(120, 60, 40, .18), 0 0 0 3px var(--berry); }
.bigBtn.small { flex: none; width: 64px; height: 44px; font-size: 19px; border-radius: 14px; }
#lvInfo { margin: 2px 0 6px; } #lvInfo b { color: var(--ink); }

.switch { display: flex; align-items: center; gap: 12px; font: 700 16px/1 var(--text); margin: 8px 0; cursor: pointer; }
.switch input { display: none; }
.switch .sl { width: 50px; height: 30px; border-radius: 15px; background: #ead7c6; position: relative; transition: background .2s; box-shadow: inset 0 2px 3px rgba(120, 60, 40, .15); }
.switch .sl::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, .2); transition: transform .25s cubic-bezier(.3, 1.7, .5, 1); }
.switch input:checked + .sl { background: var(--sage); }
.switch input:checked + .sl::after { transform: translateX(20px); }
.switch small { display: block; font: 600 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; }
.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: #f6c39c 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(246, 195, 156, .55), rgba(246, 195, 156, 0) 42%); 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(120, 30, 60, .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: 700 14px/1.2 var(--text); color: var(--ink-2); margin-top: 6px; background: rgba(255, 249, 241, .8); padding: 5px 12px; border-radius: 99px; opacity: 0; transition: opacity .3s; }
#curtainInfo.on { opacity: 1; }
#curtainInfo:empty { display: none; }
#curtainSub { position: relative; font: 700 14px/1.2 var(--text); color: var(--ink); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; background: rgba(255, 249, 241, .92); padding: 7px 14px; border-radius: 99px; box-shadow: 0 3px 0 rgba(226, 196, 162, .9); max-width: 90vw; text-align: center; }
/* between two pieces of the same level: a soft warm wipe with the next piece's name */
#wipe { position: fixed; inset: 0; z-index: 9; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .32s ease;
  background: radial-gradient(circle at 50% 45%, rgba(255, 246, 232, .97), rgba(248, 214, 186, .97) 70%, rgba(240, 190, 150, .97)); }
#wipe.on { opacity: 1; }
.wipeIn { text-align: center; transform: translateY(10px) scale(.94); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
#wipe.on .wipeIn { transform: none; }
.wipeNext { font: 800 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--berry-d); margin-top: 12px; }
#wipeName { font: 800 34px/1.1 var(--display); color: var(--ink); margin-top: 4px; }
.wipeDots { display: flex; gap: 8px; justify-content: center; } .wipeDots i { width: 14px; height: 14px; border-radius: 50%; background: #ead7c6; } .wipeDots i.done { background: var(--sage); } .wipeDots i.cur { background: var(--berry); box-shadow: 0 0 0 3px var(--berry-l); }

.dots { position: relative; display: flex; gap: 8px; margin-top: 14px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--sage); animation: dot 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; background: var(--gold); } .dots i:nth-child(3) { animation-delay: .3s; background: var(--berry); }
@keyframes dot { 50% { transform: translateY(-8px); } }
#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: 100px; height: 100px; margin-top: 8px; } .sheet h2 { font-size: 25px; } }
@media (min-width: 1100px) and (min-height: 600px) { .sheet { zoom: 1.25; } }

/* 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 tag
   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)); }
  #msgThumb { width: calc(40px * var(--u)); height: calc(40px * var(--u)); margin: calc(-3px * var(--u)) 0; border-radius: calc(11px * var(--u)); }
}
/* the OS asks for less motion: no swings, pops or bouncing badges; the stuck Undo keeps its red ring, not its pulse */
@media (prefers-reduced-motion: reduce) {
  #tagCard.swing, #msg.pop, .round.news .dot, #dailyBtn.hello, .hudBtn.turn.on, #jar.bump, .stuckX, .dots i, #curtain .logo { animation: none !important; }
  .hudBtn.pulse { animation: none; }
  #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: 14px; background: repeating-linear-gradient(-45deg, #fff8ef 0 10px, #fdf0e2 10px 20px); border: 2px dashed #e1c3a4; }
.labTools .labHead { margin: 0 0 8px; font: 800 14px/1 var(--display); 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: 15px; height: 40px; }
.labTools #lvInfo { margin: 6px 0 0; }

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