/* Mewbello: a retro mint-and-cherry ice-cream-parlour cat café at warm afternoon light.
   The HUD: a little café sign hanging top left (level, room, time in a race), the treat jar and the menu top right,
   the tools on a mint counter with a cherry trim. Cartoon buttons: a chocolate outline and lip; they sink when pressed. */
:root {
  --paper: #fff6e3; --paper-2: #fbe9c9; --edge: #e4cfa6; --ink: #4a2c2a; --ink-2: #7a5a52;
  --cherry: #e2404f; --cherry-d: #b3283a; --cherry-l: #ffd3d6;
  --mint: #a9dcc8; --mint-d: #7fc2aa; --mint-dd: #4f9a80; --sky: #bfe3f5; --sky-d: #5aa2cc;
  --butter: #ffd77a; --butter-d: #d9a73a; --red: #e2404f; --red-d: #b3283a;
  --line: 0 0 0 2px var(--ink);
  --shadow: 0 8px 22px rgba(60, 40, 30, .18);
  --display: "Grandstander", "Arial Rounded MT Bold", system-ui, sans-serif;
  --text: "Nunito", "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: #a9dcc8; 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, 246, 227, 0) 58%, rgba(40, 60, 55, .2) 100%); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
svg { display: block; }
use, svg { pointer-events: none; }

/* cartoon buttons: a body, a darker lip inside, a chocolate outline and lip; 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: 0 12px; padding-top: 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(#fffbf0, var(--paper-2)); box-shadow: inset 0 2px 0 #fff, var(--line), 0 4px 0 2px var(--ink), 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, var(--line), 0 1px 0 2px var(--ink), var(--shadow); }

/* the café sign: a cream board under a cherry-striped top, hanging on two cords; it swings a little when the level
   changes */
#sign { position: relative; margin-top: calc(16px * var(--u)); min-width: calc(150px * var(--u)); max-width: calc(100vw - 170px * var(--u));
  padding: calc(17px * var(--u)) calc(14px * var(--u)) calc(7px * var(--u)); border-radius: calc(12px * var(--u)) calc(12px * var(--u)) calc(14px * var(--u)) calc(14px * var(--u));
  background: linear-gradient(#fffbf0, #fff1d6); box-shadow: var(--line), 0 4px 0 2px var(--ink), 0 10px 14px rgba(60, 40, 30, .2);
  transform-origin: 50% calc(-14px * var(--u)); transform: rotate(-1.5deg); }
#sign::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(11px * var(--u)); border-radius: calc(12px * var(--u)) calc(12px * var(--u)) 0 0;
  background: repeating-linear-gradient(90deg, var(--cherry) 0 calc(10px * var(--u)), #fff6e3 calc(10px * var(--u)) calc(20px * var(--u))); }
#sign::after { content: ""; position: absolute; left: 0; right: 0; top: calc(10px * var(--u)); height: calc(6px * var(--u));
  background: radial-gradient(circle at calc(5px * var(--u)) 0, var(--cherry) 0 calc(4.4px * var(--u)), transparent calc(5px * var(--u))) 0 0 / calc(20px * var(--u)) calc(6px * var(--u)) repeat-x; }
#sign .cord { position: absolute; top: calc(-16px * var(--u)); width: 2px; height: calc(17px * var(--u)); background: var(--ink); border-radius: 2px; }
#sign .cord.l { left: 24%; transform: rotate(12deg); } #sign .cord.r { right: 24%; transform: rotate(-12deg); }
#sign.swing { animation: swing 1.4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes swing { 0% { transform: rotate(-8deg); } 35% { transform: rotate(3deg); } 65% { transform: rotate(-3deg); } 100% { transform: rotate(-1.5deg); } }
.signTop { display: flex; align-items: center; gap: calc(6px * var(--u)); }
#lvNum { font: 800 calc(11.5px * var(--u))/1.1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--cherry-d); white-space: nowrap; }
#tricky { font: 800 calc(10.5px * var(--u))/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ink); padding: calc(3px * var(--u)) calc(7px * var(--u)) calc(2px * var(--u)); border-radius: 99px; transform: rotate(3deg); }
#tricky[hidden] { display: none; }
#lvName { font: 800 calc(20px * var(--u))/1.15 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: #eadfca; box-shadow: inset 0 0 0 1.5px rgba(74, 44, 42, .35); }
#dots i.done { background: var(--mint-d); }
#dots i.cur { background: var(--cherry); }
#clock { display: inline-flex; align-items: center; gap: calc(3px * var(--u)); font: 800 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(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 { 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: -2px; top: -2px; 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 treat jar: a glass jar of butter fish */
#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(#fffbf0, var(--paper-2)); box-shadow: inset 0 2px 0 #fff, var(--line), 0 4px 0 2px var(--ink), var(--shadow); }
.jarIcon { width: calc(32px * var(--u)); height: calc(35px * var(--u)); overflow: visible; }
.jarIcon .lid { fill: var(--cherry); stroke: var(--ink); stroke-width: 1.6; } .jarIcon .rim { fill: var(--cherry-d); stroke: var(--ink); stroke-width: 1.2; }
.jarIcon .glass { fill: rgba(214, 240, 246, .92); stroke: var(--ink); stroke-width: 1.8; }
.jarIcon .f1 { fill: var(--butter); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; } .jarIcon .f2 { fill: #ffc65a; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.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) + 16px * 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, 236, .97); box-shadow: 0 0 0 2px var(--ink), 0 3px 0 2px var(--ink), var(--shadow); font: 700 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: 800; color: var(--cherry-d); }
#msgIcon { flex: none; width: calc(28px * var(--u)); height: calc(28px * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--mint); box-shadow: 0 0 0 2px var(--ink); }
#msgIcon svg { width: 70%; height: 70%; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#msgIcon.star svg { fill: var(--ink); stroke-width: 1; }
#msg.dead { background: #f1f3ff; color: #2f3566; box-shadow: 0 0 0 2.5px #6b7fc6, 0 3px 0 2.5px #4a5aa0, var(--shadow); }
#msg.dead b { color: #3d4c9a; }
#msg.dead #msgIcon { background: #6b7fc6; } #msg.dead #msgIcon svg { stroke: #fff; }
#msg.tip #msgIcon, #msg.win #msgIcon { background: var(--butter); }
#msg.warn #msgIcon { background: #ffb36b; }
#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 play bar over the counter: the string (used only while a cat follows) and how many cats are home */
#playBar { position: fixed; left: 50%; bottom: calc(var(--hud-bottom) + 6px * var(--u)); transform: translateX(-50%); z-index: 4; pointer-events: none;
  display: flex; align-items: center; gap: calc(8px * var(--u)); width: min(calc(100% - 16px), calc(400px * var(--u))); }
#strPill { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: calc(6px * var(--u)); padding: calc(4px * var(--u)) calc(10px * var(--u)) calc(4px * var(--u)) calc(5px * var(--u));
  border-radius: 99px; background: linear-gradient(#fffbf0, #fff1d6); box-shadow: var(--line), 0 3px 0 2px var(--ink); font: 800 calc(13px * var(--u))/1 var(--display); color: var(--ink); }
#strPill .yarn { flex: none; width: calc(24px * var(--u)); height: calc(24px * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--cherry); box-shadow: 0 0 0 2px var(--ink); transition: transform .15s; }
#strPill .yarn svg { width: 78%; height: 78%; fill: none; stroke: #fff6e3; stroke-width: 2; stroke-linecap: round; }
#strPill.leading .yarn { transform: scale(1.15) rotate(-20deg); background: #ff6f5c; }
#strPill .bar { position: relative; flex: 1 1 auto; min-width: calc(40px * var(--u)); height: calc(11px * var(--u)); border-radius: 99px; background: #f1e2c4; box-shadow: 0 0 0 2px var(--ink); overflow: hidden; }
#strFill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 99px; background: repeating-linear-gradient(-45deg, #ec5b68 0 6px, #e2404f 6px 12px); transition: width .12s linear; }
#strPill.low #strFill { background: repeating-linear-gradient(-45deg, #ffb04a 0 6px, #f08a2c 6px 12px); }
#strPill.low { animation: lowpulse 1.2s ease-in-out infinite; }
#strPill.flash { animation: strflash .6s ease-out 2; }
@keyframes lowpulse { 50% { background: #ffe9c2; } }
@keyframes strflash { 30% { transform: scale(1.06); background: #ffd3d6; } }
#strVal { flex: none; min-width: 3.3em; text-align: right; font-variant-numeric: tabular-nums; }
#catBadge { flex: none; padding: calc(5px * var(--u)) calc(11px * var(--u)) calc(4px * var(--u)); border-radius: 99px;
  background: linear-gradient(#fffbf0, #fff1d6); color: var(--ink); font: 800 calc(13px * var(--u))/1.2 var(--display);
  box-shadow: var(--line), 0 3px 0 2px var(--ink); pointer-events: none; white-space: nowrap; }
#catBadge[hidden] { display: none; }
#catBadge .paw { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--cherry); margin-right: .35em; vertical-align: .02em; box-shadow: 0 0 0 1.5px var(--ink); }
#catBadge.home .paw { background: var(--mint-d); }
/* the guiding hand's dotted path from a cat to its spot */
#guide { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
#guide path { fill: none; stroke: #fff6e3; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 12; opacity: .95; filter: drop-shadow(0 1px 0 rgba(74, 44, 42, .6)); }
#stage canvas.drag { cursor: grabbing; }
#ghostRing { fill: rgba(255, 215, 122, .16); stroke: #7a5246; stroke-width: 2.5; opacity: 0; }
#leadCat { flex: none; width: calc(20px * var(--u)); height: calc(20px * var(--u)); color: #e8dcc4; transition: color .15s, transform .15s; }
#leadCat svg { width: 100%; height: 100%; }
#strPill.leading #leadCat { color: var(--butter); transform: scale(1.2); }
.flashFx { position: absolute; inset: 0; background: #fffdf4; opacity: 0; pointer-events: none; }
#cardCats { margin: calc(6px * var(--u)) 0 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#cardCats:empty { display: none; }
.catChip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 2px var(--ink); font: 800 13px/1.2 var(--text); color: var(--ink); }
.catChip i { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); }
/* a cat's "!" and its sleepy moon float over it (placed by game.js every frame) */
#bang { position: fixed; left: 0; top: 0; z-index: 3; width: calc(30px * var(--u)); height: calc(30px * var(--u)); margin: calc(-15px * var(--u)) 0 0 calc(-15px * var(--u)); border-radius: 50%;
  display: grid; place-items: center; background: var(--butter); box-shadow: var(--line), 0 3px 0 2px var(--ink); font: 800 calc(20px * var(--u))/1 var(--display); color: var(--ink);
  pointer-events: none; opacity: 0; }
#bang.on { opacity: 1; animation: bangPop .5s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes bangPop { 0% { transform: translateY(8px) scale(.3); } 100% { transform: none; } }
#moon { position: fixed; left: 0; top: 0; z-index: 3; width: calc(32px * var(--u)); height: calc(32px * var(--u)); margin: calc(-16px * var(--u)) 0 0 calc(-16px * var(--u)); border-radius: 50%;
  background: conic-gradient(#6b7fc6 calc(var(--k, 0) * 360deg), #fffbf0 0); box-shadow: var(--line), 0 3px 0 2px var(--ink); pointer-events: none; display: grid; place-items: center; }
#moon[hidden] { display: none; }
#moon svg { width: 62%; height: 62%; }
#moon.late { animation: moonWob .7s ease-in-out infinite; }
@keyframes moonWob { 50% { transform: scale(1.12) rotate(-6deg); } }

/* ---------- 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 mint counter top with a cherry trim */
#shelf { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: calc(10px * var(--u)); width: min(100%, calc(400px * var(--u))); padding: 0 calc(12px * var(--u)) calc(14px * 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(var(--cherry) 0 calc(5px * var(--u)), #c8eadc calc(5px * var(--u)), var(--mint-d));
  box-shadow: var(--line), 0 4px 0 2px var(--ink), 0 8px 16px rgba(60, 40, 30, .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(#fffbf0, var(--paper-2)); box-shadow: inset 0 2px 0 #fff, var(--line), 0 5px 0 2px var(--ink), 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, var(--line), 0 1px 0 2px var(--ink), var(--shadow); }
.hudBtn.primary { background: linear-gradient(#ef6670, var(--cherry)); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 var(--cherry-d), var(--line), 0 5px 0 2px var(--ink), var(--shadow); }
.hudBtn.primary svg { stroke: #fff; }
.hudBtn.primary:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 var(--cherry-d), var(--line), 0 1px 0 2px var(--ink), var(--shadow); }
.hudBtn.pulse { animation: pulse 1s ease-in-out infinite; background: #f1f3ff; box-shadow: inset 0 2px 0 #fff, 0 0 0 3px #6b7fc6, 0 5px 0 3px #4a5aa0, var(--shadow); }
@keyframes pulse { 50% { transform: scale(1.08); } }
.hudBtn:disabled { color: #bfae9c; cursor: default; box-shadow: inset 0 2px 0 #fff, 0 0 0 2px #c9b8a6, 0 5px 0 2px #c9b8a6; } .hudBtn:disabled svg { stroke: #c9b8a6; }
/* after level 80 a second hint costs treats: 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: #fffbf0; color: var(--ink); font: 800 calc(12px * var(--u))/1 var(--display); font-style: normal; box-shadow: var(--line); }
#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='M2.6 12c3-4.6 9.4-6.2 14.2-2.1l4.6-3.2v10.6l-4.6-3.2C12 18.2 5.6 16.6 2.6 12z' fill='%23ffd77a' stroke='%234a2c2a' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat; }
/* the Helping paw sits on the counter 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)); }
#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(--cherry); stroke-width: 3.2; 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(--cherry); box-shadow: 0 0 10px rgba(226, 64, 79, .6); opacity: var(--ring, 0); transform: scale(calc(var(--rs, 1) * var(--hk, 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: 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 ---------- */
#perfect { position: fixed; left: 50%; top: 38%; z-index: 6; transform: translate(-50%, -50%); font: 800 clamp(52px, 14vw, 120px)/1 var(--display);
  pointer-events: none; white-space: nowrap; display: flex; }
#perfect i { font-style: normal; display: inline-block; opacity: 0; color: var(--cherry); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--ink), 0 14px 30px rgba(60, 30, 30, .35); }
#perfect i.sp { width: .28em; }
#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; }
.petal { position: absolute; left: 0; top: 0; width: 14px; height: 9px; border-radius: 50%; will-change: transform; box-shadow: 0 0 0 1.5px rgba(74, 44, 42, .5); }
.heartFx { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; will-change: transform;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5s-8-4.9-8-10.4A4.6 4.6 0 0 1 12 7.7a4.6 4.6 0 0 1 8 2.4c0 5.5-8 10.4-8 10.4z' fill='%23e2404f' stroke='%234a2c2a' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.coinFx { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; will-change: transform;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 12c3-4.6 9.4-6.2 14.2-2.1l4.6-3.2v10.6l-4.6-3.2C12 18.2 5.6 16.6 2.6 12z' fill='%23ffd77a' stroke='%234a2c2a' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- overlays (card, lose card, menu): cream with a cherry scalloped edge, a chocolate outline ---------- */
.overlay { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; background: rgba(38, 58, 52, .4); 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(#fffaf0, #fff6e3); border-radius: 28px;
  box-shadow: var(--line), 0 8px 0 2px var(--ink), 0 24px 60px rgba(40, 30, 25, .38); position: relative; animation: rise .5s cubic-bezier(.25, 1.5, .45, 1); overflow: hidden; }
.sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 15px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--cherry) 0 8px, var(--ink) 8px 9.5px, transparent 10px) 0 4px / 20px 12px repeat-x,
  linear-gradient(var(--cherry), var(--cherry)) 0 0 / 100% 5px no-repeat; }
@keyframes rise { from { transform: translateY(60px) scale(.9); opacity: 0; } }
.sheetBody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 26px 18px 6px; display: flex; flex-direction: column; }
.cardTop { text-align: center; flex: none; }
.badge { display: inline-block; font: 800 15px/1 var(--display); color: var(--ink); background: linear-gradient(#c8eadc, var(--mint)); padding: 7px 18px 5px; border-radius: 99px;
  box-shadow: inset 0 -3px 0 var(--mint-d), var(--line), 0 3px 0 2px var(--ink); letter-spacing: .08em; text-transform: uppercase; }
.badge.sleepy { background: linear-gradient(#a9b6ea, #6b7fc6); color: #fff; box-shadow: inset 0 -3px 0 #4a5aa0, var(--line), 0 3px 0 2px var(--ink); }
.sheet h2 { font: 800 28px/1.05 var(--display); margin: 12px 0 2px; }
.sheet h2 small { font: 700 14px/1 var(--text); color: var(--ink-2); display: block; margin-top: 4px; }
#cardSub { margin: 0 0 10px; font-weight: 700; 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 0 0 2px var(--ink), 0 4px 10px rgba(60, 40, 30, .22); 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 café room that grows, the scene's photo 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: 4px auto 0; border-radius: 20px; overflow: hidden; background: #e6f6ef;
  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: 10px; min-height: 0; padding: 0 10px; justify-content: center; gap: 8px; flex-wrap: nowrap; pointer-events: none; }
#photos.mini .photo { width: 22%; max-width: 92px; padding: 3px 3px 7px; }
@media (max-height: 760px) { #photos.mini .photo { width: 16%; max-width: 64px; } }
#roomCap { margin: 10px 4px 0; text-wrap: balance; text-align: center; font: 800 14px/1.3 var(--text); color: var(--cherry-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 */
#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-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: 12px 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(--cherry); stroke-width: 2.4; stroke-linecap: round; }
#cardBest { margin-top: 4px; min-height: 1em; }
.badge.gold { background: linear-gradient(#ffe6a6, var(--butter)); box-shadow: inset 0 -3px 0 var(--butter-d), var(--line), 0 3px 0 2px var(--ink); color: var(--ink); }
#newArt { display: flex; justify-content: center; margin: 12px 0 4px; } #newArt svg { width: 150px; height: auto; }
#newText { text-align: center; font: 700 16px/1.35 var(--text); margin: 6px 4px 2px; }
.reward { display: flex; align-items: center; gap: 6px; font: 800 26px/1 var(--display); color: var(--ink); }
.reward .coin { width: 34px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 12c3-4.6 9.4-6.2 14.2-2.1l4.6-3.2v10.6l-4.6-3.2C12 18.2 5.6 16.6 2.6 12z' fill='%23ffd77a' stroke='%234a2c2a' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='7.6' cy='11.1' r='1.15' fill='%234a2c2a'/%3E%3C/svg%3E") center / contain no-repeat; }
.cardFoot { flex: none; padding: 12px 18px 20px; display: flex; gap: 12px; }
.bigBtn { flex: 1; height: 60px; border-radius: 20px; background: linear-gradient(#ef6670, var(--cherry)); color: #fff; font: 800 24px/1 var(--display);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 var(--cherry-d), var(--line), 0 5px 0 2px var(--ink), var(--shadow); }
.bigBtn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 var(--cherry-d), var(--line), 0 1px 0 2px var(--ink); }
.bigBtn.ghost { flex: .8; background: linear-gradient(#fffbf0, var(--paper-2)); color: var(--ink); box-shadow: inset 0 2px 0 #fff, var(--line), 0 5px 0 2px var(--ink), var(--shadow); }
.bigBtn.ghost:active { box-shadow: inset 0 2px 0 #fff, var(--line), 0 1px 0 2px var(--ink); }
.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, #e6ebff); box-shadow: 0 0 0 2px var(--ink), 0 6px 0 2px var(--ink); 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: #6b7fc6; box-shadow: var(--line), 0 3px 0 2px var(--ink); display: grid; place-items: center; animation: wob 1.6s ease-in-out infinite;
  color: #fff; font: 800 17px/1 var(--display); }
@keyframes wob { 50% { transform: rotate(12deg) scale(1.08); } }
#loseText { text-align: center; font: 700 16px/1.35 var(--text); margin: 10px 4px 2px; }
#loseText b { color: #3d4c9a; }
.menuHead { display: flex; justify-content: space-between; align-items: flex-start; }
.menuHead h2 { margin-top: 0; }
.menuLogo { height: 104px; max-width: 72%; width: auto; object-fit: contain; margin: -4px 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(74, 44, 42, .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(74, 44, 42, .18), 0 0 0 3px var(--cherry); }
.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 { flex: none; width: 50px; height: 30px; border-radius: 15px; background: #e8dcc4; 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: #fff; box-shadow: 0 0 0 2px var(--ink); transition: transform .25s cubic-bezier(.3, 1.7, .5, 1); }
.switch input:checked + .sl { background: var(--mint-d); }
.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; font-weight: 600; }
.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: #a9dcc8 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(169, 220, 200, .6), rgba(169, 220, 200, 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(60, 30, 30, .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, 236, .88); padding: 5px 12px; border-radius: 99px; opacity: 0; transition: opacity .3s; }
#curtainInfo.on { opacity: 1; }
#curtainInfo:empty { display: none; }
#curtainSub { position: relative; font: 800 14px/1.2 var(--text); color: var(--ink); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; background: rgba(255, 249, 236, .96); padding: 7px 14px; border-radius: 99px; box-shadow: var(--line), 0 3px 0 2px var(--ink); max-width: 90vw; text-align: center; }

.dots { position: relative; display: flex; gap: 8px; margin-top: 14px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--mint-dd); animation: dot 1s infinite ease-in-out; box-shadow: 0 0 0 1.5px var(--ink); }
.dots i:nth-child(2) { animation-delay: .15s; background: var(--butter); } .dots i:nth-child(3) { animation-delay: .3s; background: var(--cherry); }
@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; } #room { max-width: max(200px, calc((100dvh / 1.25 - 530px) * 1.5)); } #photos.mini .photo { max-width: 64px; } }

/* the meta layer's mode bar (daily / friend's level) sits above the counter; 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 sign
   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 swings, pops or bouncing badges */
@media (prefers-reduced-motion: reduce) {
  #sign.swing, #msg.pop, .round.news .dot, #dailyBtn.hello, #jar.bump, .stuckX, .dots i, #curtain .logo, #bang.on, #moon.late { 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, #fffaf0 0 10px, #eef8f3 10px 20px); border: 2px dashed var(--mint-dd); }
.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 scene alone, no HUD, no curtain ---------- */
body.art #top, body.art #bottom, body.art #playBar, body.art #guide, body.art #msg, body.art #catBadge, body.art #bang, body.art #moon, 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 room takes the full height in the middle; the HUD lives
   in two side columns (the prototype's land mode): left the sign, the message band, the string and the home count;
   right the treat jar, the menu and the tools stacked. 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 #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 #playBar { left: var(--side); transform: none; bottom: calc(var(--side) + 4px); width: var(--colw); flex-direction: column; align-items: stretch; gap: calc(10px * var(--u)); }
body.land #catBadge { align-self: flex-start; }
body.land #bottom { left: auto; right: var(--side); top: 50%; bottom: auto; height: auto; transform: translateY(-50%); padding: 0; justify-content: flex-end; }
body.land #shelf { flex-direction: column; align-items: stretch; width: calc(104px * var(--u)); padding: 0; gap: calc(12px * var(--u)); }
body.land #shelf::before { display: none; }
body.land #shelf .hudBtn, body.land #shelf .mBoost { flex: none; max-width: none; width: 100%; height: calc(66px * var(--u)); }
body.land .mModeBar { left: var(--side); transform: none; bottom: auto; top: calc(var(--hud-top) + 8px); }

/* ---------- care: the happy-cats bar and a chip per cat with its wishes (done, now, still to come) ---------- */
#strPill .yarn svg { fill: #fff6e3; stroke: none; }
#strFill { background: repeating-linear-gradient(-45deg, #8fd3b6 0 6px, #6cc29e 6px 12px); transition: width .35s cubic-bezier(.2, 1.3, .4, 1); }
#strVal { min-width: 3.6em; }
#catBadge { display: flex; flex-wrap: wrap; gap: calc(4px * var(--u)); padding: 0; background: none; box-shadow: none; white-space: normal; justify-content: flex-end; }
#catBadge[hidden] { display: none; }
#catBadge .chip { display: inline-flex; align-items: center; gap: calc(3px * var(--u)); padding: calc(2px * var(--u)) calc(6px * var(--u)) calc(2px * var(--u)) calc(3px * var(--u)); border-radius: 99px;
  background: linear-gradient(#fffbf0, #fff1d6); box-shadow: var(--line), 0 2px 0 1.5px var(--ink); font: 800 calc(11.5px * var(--u))/1.1 var(--text); color: var(--ink); transition: background .3s; }
#catBadge .chip.alldone { background: #e3f6ec; }
#catBadge .chip > i { width: calc(11px * var(--u)); height: calc(11px * var(--u)); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink); flex: none; }
#catBadge .chip b { font-weight: 800; margin-right: 1px; }
#catBadge .nd { position: relative; width: calc(18px * var(--u)); height: calc(18px * var(--u)); border-radius: 50%; display: inline-block; flex: none; transition: transform .2s, opacity .2s; }
#catBadge .nd img { width: 100%; height: 100%; display: block; }
#catBadge .nd.fut { opacity: .38; transform: scale(.78); }
#catBadge .nd.done img { opacity: .4; }
#catBadge .nd.done::after { content: "\2713"; position: absolute; right: -3px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #2c9c74; color: #fff; font-size: 8px; line-height: 11px; text-align: center; box-shadow: 0 0 0 1.5px var(--ink); font-weight: 900; }
#catBadge .nd.cur { background: #fff6e3; box-shadow: 0 0 0 2px #59b98f; }
#catBadge .nd.cur.amber { box-shadow: 0 0 0 2px #f5a623; }
#catBadge .nd.cur.red { box-shadow: 0 0 0 2.5px #e2404f; animation: redp .6s ease-in-out infinite; }
#catBadge .nd.cur.busy { box-shadow: 0 0 0 2px #e8b93a; }
@keyframes redp { 50% { transform: scale(1.15); } }
#cardTimeLabel { font-style: normal; }
body:not(.land) #playBar { flex-wrap: wrap; justify-content: center; }
body:not(.land) #strPill { flex: 1 1 100%; }
body:not(.land) #catBadge { justify-content: center; width: 100%; }
/* the win card's Picture / Share / Clip: pressed at once, a spinner while the picture is made (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(60, 40, 30, .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 cats' chips: a computer shows the whole row of wishes; a phone a short chip per cat in one row (a round face in
   the cat's coat with its collar, the wish now, "2/4"), so the room keeps its size whatever the count (0.2.4) */
#catBadge .chip { cursor: pointer; pointer-events: auto; }
#catBadge .chip > i.face { position: relative; background-clip: padding-box; }
#catBadge .nd.now, #catBadge .cnt { display: none; }
#catBadge .cnt { font: 800 calc(12px * var(--u))/1 var(--text); font-style: normal; color: var(--ink); margin-left: 1px; }
body:not(.land) #catBadge { flex-wrap: nowrap; height: 28px; overflow: hidden; gap: 5px; }
body:not(.land) #catBadge[hidden] { display: flex; visibility: hidden; }
body:not(.land) #catBadge .chip { flex: 0 1 auto; min-width: 0; height: 26px; padding: 2px 7px 2px 3px; gap: 3px; }
body:not(.land) #catBadge .chip > b, body:not(.land) #catBadge .nd:not(.now) { display: none; }
body:not(.land) #catBadge .nd.now { display: inline-block; width: 20px; height: 20px; }
body:not(.land) #catBadge .nd.now.done img { opacity: 1; }
body:not(.land) #catBadge .nd.now.done::after { display: none; }
body:not(.land) #catBadge .cnt { display: inline; }
body:not(.land) #catBadge .chip > i.face { width: 18px; height: 18px; background: var(--c) !important; box-shadow: 0 0 0 2px var(--k), 0 0 0 3.5px var(--ink); margin: 0 2px; }
body:not(.land) #catBadge .chip > i.face::before, body:not(.land) #catBadge .chip > i.face::after { content: ''; position: absolute; top: -3px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--ink); }
body:not(.land) #catBadge .chip > i.face::before { left: 0; transform: rotate(-14deg); }
body:not(.land) #catBadge .chip > i.face::after { right: 0; transform: rotate(14deg); }