/* birdiebongs.com · Birdie — original 16-bit style, all art drawn in-house */
:root {
  --ink: #1a1030;
  --accent: #9bf06b; --stash-fill: rgba(80, 200, 80, .30); --stash-lit: #2fb53a; /* weed; the bottle theme re-points these below */
  --gold: #f8c030; --gold-hi: #fff0a0; --gold-lo: #c87800;
  --panel: rgba(255, 248, 224, .97);
  --ground-h: 76px;
  --px: 3px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: ui-monospace, "Courier New", monospace;
  color: var(--ink);
  background: #5ca0f8;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
svg { display: block; image-rendering: pixelated; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px dashed #fff; outline-offset: 4px; }

/* ---------- scenery ---------- */
#scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky { position: absolute; inset: 0;
  background: linear-gradient(#4c90f0 0 22%, #5ca0f8 22% 44%, #70b2f8 44% 62%, #88c6f8 62% 78%, #a4d8f8 78% 100%); }
.clouds > *, .hills > *, .bushes > * { position: absolute; }
.clouds > * { animation: drift linear infinite; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-120vw); } }
.hills.back > * { bottom: calc(var(--ground-h) - 6px); }
.hills.front > * { bottom: calc(var(--ground-h) - 6px); }
.bushes > * { bottom: calc(var(--ground-h) - 3px); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ground-h);
  background-image: var(--ground-tile), var(--dirt-tile);
  background-size: 48px 48px, 48px 48px;
  background-repeat: repeat-x, repeat;
  background-position: 0 0, 0 48px;
  image-rendering: pixelated;
  border-top: 0; }

/* ---------- layout ---------- */
#app {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: stretch;
  padding: max(8px, env(safe-area-inset-top)) 12px 0;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 0 5px; flex: none; } /* title + tagline clear the 40px ? block corner */
.brand .tagline { display: block; line-height: 0; /* pale gold with a 1px navy outline so it reads over sky and cloud alike */
  filter: drop-shadow(1px 0 0 #1a3a8a) drop-shadow(-1px 0 0 #1a3a8a) drop-shadow(0 1px 0 #1a3a8a) drop-shadow(0 -1px 0 #1a3a8a); }

/* ? -block style button (original take) */
.block {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background-color: var(--gold);
  background-image:
    linear-gradient(#5a3000, #5a3000), linear-gradient(#5a3000, #5a3000),
    linear-gradient(#5a3000, #5a3000), linear-gradient(#5a3000, #5a3000);
  background-size: 6px 6px; background-repeat: no-repeat;
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);
  box-shadow:
    inset 4px 4px 0 var(--gold-hi), inset -4px -4px 0 var(--gold-lo),
    0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink),
    0 9px 0 0 rgba(26, 16, 48, .35);
}
.block:active { filter: brightness(1.08); }
.block[disabled] { filter: grayscale(.85) brightness(.9); cursor: default; }
.block.red { --gold: #e8343a; --gold-hi: #ff8a8a; --gold-lo: #8a0a14; }
#birdie { flex: none; height: 92px; margin: 4px 6px 16px; }
#birdie .bird svg { width: 50px !important; height: 40px !important; }

/* ---------- players ---------- */
.players { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 0 3px; }
.player { min-height: 0; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.name { margin: 0; flex: none; display: flex; justify-content: center; align-items: center; height: 34px;
  background: #d8283a;
  box-shadow: inset 3px 3px 0 #ff7a7a, inset -3px -3px 0 #8a0a14,
    0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
.player[data-player="leon"] .name { background: #2a6ae0; box-shadow: inset 3px 3px 0 #8ab8ff, inset -3px -3px 0 #0a2a7a,
    0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }

.stash, .discs {
  position: relative; min-height: 0; display: flex; flex-direction: column; align-items: stretch;
  background: var(--panel);
  padding: 8px 6px 6px;
  box-shadow: inset -3px -3px 0 rgba(168, 120, 60, .45),
    0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink);
}
.stash { flex: 1.35 1 0; }
.discs { flex: 1 1 0; background: rgba(232, 246, 255, .97); padding-bottom: 16px; }
.label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 4px; flex: none; min-height: 16px; }
.count { margin-left: auto; }
.is-big .count { display: none; }
.count svg { display: block; }
/* panel labels keep their xN count on the same row: never wrap; under 375px both drop from 2x to a
   crisp 1.5x pixel size (MULLIGANS + x99 fits a 320px phone), and the label may shrink as a last resort */
.label { flex-wrap: nowrap; }
.label > [data-ptext] { flex: 0 1 auto; min-width: 0; line-height: 0; }
.label > [data-ptext] svg { display: block; max-width: 100%; }
.count { flex: none; }
@media (max-width: 374px) { .label svg { height: 12px !important; width: auto !important; } }
.icons { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; padding-top: 4px; overflow: hidden; }
.icon { display: block; flex: none; background-size: 100% 100%; image-rendering: pixelated; }
.icons.empty .icon { opacity: .22; filter: grayscale(1); }
.icons .big { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* foreground bushes overlap the panel feet (decor only, taps pass through) */
.fg { position: absolute; left: 0; right: 0; bottom: calc(var(--ground-h) - 4px); height: 0; z-index: 2; pointer-events: none; }
.fg > * { position: absolute; bottom: 0; }

/* editable player name: the whole name bar is a hold-1s button (same fill + charge bar) */
.name-btn { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pname { display: flex; }

/* ---------- feedback ---------- */
.bump { animation: bump .22s steps(3) 1; }
@keyframes bump { 0% { transform: translateY(0); } 40% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
.nope { animation: nope .24s steps(4) 1; }
@keyframes nope { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pop { position: fixed; z-index: 5; pointer-events: none; animation: pop .7s steps(7) forwards; }
@keyframes pop { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -48px); opacity: 0; } }

/* ---------- footer ---------- */
.controls { flex: none; height: var(--ground-h); position: relative; display: flex; align-items: center; justify-content: center; }
#undo { height: 50px; padding: 0 18px; gap: 10px; }

/* Reset: a quarter-size red ?-block (half Undo's width x half its height) pinned to the
   bottom-right corner of the screen (4px in, clear of the notch/home bar); Undo stays centered
   on its own. The button itself stays a 44px-tall tap target; the visible block is .face. */
#reset { position: fixed; z-index: 2; right: max(4px, env(safe-area-inset-right, 0px)); bottom: env(safe-area-inset-bottom, 0px); width: 74px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; }
#reset .face {
  position: relative; width: 74px; height: 25px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  --gold: #e8343a; --gold-hi: #ff8a8a; --gold-lo: #8a0a14;
  background-color: var(--gold);
  background-image: linear-gradient(#5a0610, #5a0610), linear-gradient(#5a0610, #5a0610),
    linear-gradient(#5a0610, #5a0610), linear-gradient(#5a0610, #5a0610);
  background-size: 3px 3px; background-repeat: no-repeat;
  background-position: 3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px);
  box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo),
    0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink),
    0 5px 0 0 rgba(26, 16, 48, .35);
}
#reset .face > span { position: relative; z-index: 1; }

/* WTF: the mirror of RESET in the bottom-left corner, in blue. A plain tap plays
   wtf_richard.mp3 (no hold, no fill; the only control exempt from the hold rule).
   Label reads WTF when idle and RICHARD while the clip plays. */
#wtf { position: fixed; z-index: 2; left: max(4px, env(safe-area-inset-left, 0px)); bottom: env(safe-area-inset-bottom, 0px); width: 74px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
#wtf > * { pointer-events: none; }
#wtf .face {
  position: relative; width: 74px; height: 25px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  --gold: #2f6fe0; --gold-hi: #8ab8ff; --gold-lo: #0a2a7a;
  background-color: var(--gold);
  background-image: linear-gradient(#0a1f5a, #0a1f5a), linear-gradient(#0a1f5a, #0a1f5a),
    linear-gradient(#0a1f5a, #0a1f5a), linear-gradient(#0a1f5a, #0a1f5a);
  background-size: 3px 3px; background-repeat: no-repeat;
  background-position: 3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px);
  box-shadow: inset 2px 2px 0 var(--gold-hi), inset -2px -2px 0 var(--gold-lo),
    0 -2px 0 0 var(--ink), 0 2px 0 0 var(--ink), -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink),
    0 5px 0 0 rgba(26, 16, 48, .35);
}
#wtf:active .face { filter: brightness(1.12); transform: translateY(1px); }
#wtf .lbl { display: flex; }
#wtf .lbl.playing, #wtf[data-state="playing"] .lbl.idle { display: none; }
#wtf[data-state="playing"] .lbl.playing { display: flex; }
#reset .face::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--hold, 0) * 100%);
  background-color: var(--fill); background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(26, 16, 48, .10) 4px 6px); }

/* ---------- dialog ---------- */
.msgbox { border: 0; padding: 20px 18px 18px; background: #1a1030; color: #fff; max-width: 92vw;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #1a1030, 0 0 0 3px #000; }
.msgbox::backdrop { background: rgba(10, 6, 30, .55); }
.msgbox p { margin: 0 0 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.msgbox p br { display: none; }
.msgbox .row { display: flex; gap: 16px; justify-content: center; margin-top: 8px; }
.msgbox .block { height: 46px; padding: 0 14px; }
#nameDlg { width: min(300px, 92vw); }
#nameDlg .hint { margin: 8px 0 4px; }
.name-input { display: block; width: 100%; margin: 0; padding: 10px 8px; border: 0; border-radius: 0;
  font: 700 22px/1.1 ui-monospace, "Courier New", monospace; letter-spacing: 2px; text-align: center; text-transform: uppercase;
  color: #fff; background: #000; caret-color: #ffd23a; box-shadow: inset 0 0 0 3px #fff; outline: none;
  -webkit-user-select: text; user-select: text; -webkit-appearance: none; appearance: none; }
.name-input:focus { box-shadow: inset 0 0 0 3px #ffd23a; }
.noscript { position: fixed; inset: auto 0 40% 0; text-align: center; color: #fff; font-weight: bold; z-index: 3; }

@media (min-width: 700px) {
  :root { --ground-h: 96px; }
  #birdie { height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .clouds > * { animation: none; }
  .bump, .nope, .pop { animation: none; }
}

/* ---------- hold to activate (HOLD_MS, 1 s; fill is driven from JS) ---------- */
#app button, #app .icons, #app svg {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
#birdie, .stash, .discs, #undo, #reset, .name-btn, .set-name { touch-action: none; }
#birdie > *, .stash > *, .discs > *, #undo > *, #reset > *, .name-btn > *, .set-name > * { pointer-events: none; }
#birdie .stack { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#birdie, .stash, .discs, #undo, #reset, .name-btn, .set-name { --fill: rgba(255, 255, 255, .38); --lit: #ffffff; }
.stash { --fill: var(--stash-fill); --lit: var(--stash-lit); }
.player[data-player="sniperd"] .discs { --fill: rgba(255, 138, 26, .26); --lit: #ff8a1a; }
.player[data-player="leon"] .discs { --fill: rgba(176, 106, 240, .26); --lit: #b06af0; }
#birdie::after, .stash::after, .discs::after, #undo::after, #reset::after, .name-btn::after, .set-name::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  height: calc(var(--hold, 0) * 100%);
  background-color: var(--fill);
  background-image: repeating-linear-gradient(0deg, transparent 0 6px, rgba(26, 16, 48, .10) 6px 9px);
}
.charge {
  position: absolute; left: 22px; right: 22px; bottom: 6px; height: 9px;
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
  opacity: 0; transition: opacity .08s steps(1); pointer-events: none; z-index: 1;
}
.charging .charge, .holding .charge { opacity: 1; }
.charge i { display: block; background: rgba(26, 16, 48, .28); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.stash .charge, .discs .charge { left: 8px; right: 8px; bottom: 4px; }
#reset::after { display: none; } /* the fill lives on .face */
#reset .charge { left: 4px; right: 4px; bottom: 1px; height: 5px; gap: 1px; }
.name-btn .charge { left: 6px; right: 6px; bottom: 2px; height: 5px; gap: 1px; }
.charge i:nth-child(-n+1) { } /* lit segments set via [data-seg] below */
[data-seg="1"] .charge i:nth-child(-n+1), [data-seg="2"] .charge i:nth-child(-n+2), [data-seg="3"] .charge i:nth-child(-n+3),
[data-seg="4"] .charge i:nth-child(-n+4), [data-seg="5"] .charge i:nth-child(-n+5), [data-seg="6"] .charge i:nth-child(-n+6),
[data-seg="7"] .charge i:nth-child(-n+7), [data-seg="8"] .charge i:nth-child(-n+8), [data-seg="9"] .charge i:nth-child(-n+9),
[data-seg="10"] .charge i { background: var(--lit); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 1px var(--ink); }
.holding { transform: translateY(2px); }
.charged .charge i { animation: blink .2s steps(2) infinite; }
@keyframes blink { 50% { filter: brightness(1.6); } }
.fired { animation: fired .3s steps(3) 1; }
@keyframes fired { 0% { transform: scale(1); } 40% { transform: scale(1.06) translateY(-6px); filter: brightness(1.35); } 100% { transform: scale(1); } }
.spark { position: fixed; z-index: 30; width: 6px; height: 6px; margin: -3px 0 0 -3px; pointer-events: none;
  box-shadow: 0 0 0 2px #1a1030; animation: spark .5s steps(5) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.pop { z-index: 30; }

/* full-screen pixel smoke (one low-res canvas, never blocks touches) */
#smoke { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 20;
  pointer-events: none; image-rendering: pixelated; }
@media (prefers-reduced-motion: reduce) {
  .fired, .spark, .charged .charge i { animation: none; }
  .holding { transform: none; }
}

/* ---------- ? block (top-left) -> rules map (board card #6) ---------- */
/* Corner buttons (board #26): the ? block (top left: the map) and the bag (top right: settings) are
   mirror twins and are always there: same 40px tap box, same fixed top offset and edge inset (safe
   areas on both sides), same 16x16 pixel sprite at 2x = 32px with the same outline and shadow. */
:root { --corner-top: max(6px, env(safe-area-inset-top, 0px)); --corner-l: max(6px, env(safe-area-inset-left, 0px)); --corner-r: max(6px, env(safe-area-inset-right, 0px)); }
#qblock, #bag { position: fixed; top: var(--corner-top); width: 40px; height: 40px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  background: none; box-shadow: none; transform: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#qblock { z-index: 3; left: var(--corner-l); }
#bag { z-index: 3; right: var(--corner-r); }
#qblock > *, #bag > * { pointer-events: none; }
/* board #39: act on touch-down, so a hold is a tap: no long-press menu, iOS callout, selection, drag or highlight */
#qblock, #bag { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#qblock .face, #bag .face { position: relative; width: 32px; height: 32px; display: block; padding: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(26, 16, 48, .35)); }
#qblock .face svg, #bag .face svg { width: 32px !important; height: 32px !important; }
#qblock .face { animation: qidle 1.2s steps(2) infinite; }
#bag:active .face { filter: drop-shadow(0 3px 0 rgba(26, 16, 48, .35)) brightness(1.12); }
/* on the dark settings cave the corner sprites get a pale rim so their dark outline still reads */
html[data-screen="settings"] #qblock .face, html[data-screen="settings"] #bag .face {
  filter: drop-shadow(1px 0 0 #9cc0ff) drop-shadow(-1px 0 0 #9cc0ff) drop-shadow(0 -1px 0 #9cc0ff) drop-shadow(0 3px 0 rgba(8, 12, 40, .6)); animation: none; }
/* both stay exposed above every screen (tap again to go home, or the other one to switch) */
html:not([data-screen="home"]) #qblock, html:not([data-screen="home"]) #bag { z-index: 27; }
/* the screens live inside #app (so the corners can sit above them); lift #app over the scene/smoke
   while one is coming in or up (while it wipes away, the title's smoke puff shows on top) */
#app:has(> [data-state="opening"]), #app:has(> [data-state="open"]) { z-index: 25; }
.stop-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@keyframes qidle { 50% { filter: drop-shadow(0 3px 0 rgba(26, 16, 48, .35)) brightness(1.12); } }
.qbump { animation: qbump .3s steps(4) 1; }
@keyframes qbump { 0% { transform: translateY(0); } 35% { transform: translateY(-12px); } 70% { transform: translateY(2px); } 100% { transform: translateY(0); } }

/* the map: circle wipe from the center (chunky steps), fits one phone screen */
.rules-map { position: fixed; inset: 0; z-index: 25; display: flex; align-items: flex-start; justify-content: center;
  /* lined up with the corner blocks: the header row shares their top, the cards share their outer edges
     (the 32px block sits 4px inside its 40px tap box) */
  padding: var(--corner-top) calc(var(--corner-r) + 4px) max(10px, env(safe-area-inset-bottom)) calc(var(--corner-l) + 4px);
  background-color: #3a9a3a;
  background-image: repeating-conic-gradient(#3fa53f 0 25%, #379437 0 50%);
  background-size: 24px 24px;
  clip-path: circle(0% at 50% 50%); transition: clip-path .45s steps(9, end);
  -webkit-user-select: none; user-select: none; overflow: hidden; }
.rules-map[hidden] { display: none; }
.rules-map.wiped { clip-path: circle(80% at 50% 50%); }
.map-inner { position: relative; width: 100%; max-width: 520px; max-height: 100%; display: flex; flex-direction: column; gap: 8px;
  font: 700 clamp(10px, 1.65vh, 14px)/1.25 ui-monospace, "Courier New", monospace; color: var(--ink); }
.map-head { position: relative; flex: none; padding: 0 44px; } /* header row = the ? / bag row; 44px + the 4px card inset clears each corner */
/* map + settings header: the real BIRDIE BONGS title (tap: cough + home) over a small pixel subtitle,
   both centered in the 40px corner band */
.screen-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 40px; box-sizing: border-box; }
.screen-sub { margin: 0; line-height: 0; display: block; }
.screen-sub > span { display: block; line-height: 0; }
/* small phones (SE 1st gen): slimmer tabs and padding so the rule text can stay readable */
@media (max-width: 359px) { .rules-map .node { width: 52px; height: 26px; } .map-stops, .map-bonus { letter-spacing: -.3px; } .stop, .map-bonus { gap: 5px; } }
@media (max-height: 600px) { .map-inner { gap: 6px; } .card-inner > .face .rule, .card-inner > .face .quip, .map-bonus li { line-height: 1.28; } .map-stops { gap: 5px; } .card-inner > .face { padding: 5px 8px 6px; min-height: 40px; } .map-bonus ul { padding-left: .9em; } }
.map-world { position: relative; }
.map-trail { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.trail-under { fill: none; stroke: #c89048; stroke-width: 9; stroke-linecap: square; }
.trail-dots { fill: none; stroke: #fff0c0; stroke-width: 3; stroke-dasharray: 3 6; }
.map-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; position: relative; }
.stop { display: flex; align-items: center; gap: 6px; }
.stop.r { flex-direction: row-reverse; }
/* level-title labels: white chunky pixel text on black, like SMB's "1 - 1" (never the X's red) */
.rules-map .node { flex: none; box-sizing: border-box; width: 60px; height: 28px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
  background: #000; border: 2px solid #000; box-shadow: inset 0 0 0 2px #fff; }
.rules-map .node .ptext { display: block; }
.rules-map .node { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rules-map .node > * { pointer-events: none; }
/* phone tap target: the 28px (26px small-phone) badge gets a >= 34px tall, 64px wide invisible hit area */
.rules-map .node::before { content: ""; position: absolute; inset: -4px -2px; }
/* Mario block hit from below: a quick 6px bump up and back */
.rules-map .node.nbump { animation: nbump .12s steps(3) 1; }
@keyframes nbump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* the coin: shoots up out of the badge's top, spins on Y (scaleX flips), arcs up 36px, falls back, gone */
.coin-pop { position: absolute; z-index: 5; width: 14px; height: 24px; margin: -24px 0 0 -7px; pointer-events: none;
  animation: coinpop .56s cubic-bezier(.2, .8, .4, 1) forwards; }
.coin-spin { display: block; width: 100%; height: 100%; animation: coinspin .28s steps(4) infinite;
  filter: drop-shadow(1px 1px 0 rgba(26, 16, 48, .45)); }
.coin-spin svg { display: block; width: 100%; height: 100%; }
@keyframes coinpop {
  0% { transform: translateY(10px); opacity: 1; }
  55% { transform: translateY(-36px); opacity: 1; }
  85% { transform: translateY(-24px); opacity: 1; }
  100% { transform: translateY(-22px); opacity: 0; } }
@keyframes coinspin { 0% { transform: scaleX(1); } 25% { transform: scaleX(.35); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(-.35); } 100% { transform: scaleX(1); } }
/* flip cards: tap -> rotateX top-over-bottom; front = rule, back = stoner flavor text */
.stop-card { flex: 1 1 auto; min-width: 0; perspective: 700px; outline-offset: 2px; }
.card-inner { display: grid; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
.flipped .card-inner { transform: rotateX(180deg); }
.card-inner > .face { grid-area: 1 / 1; min-width: 0; min-height: 44px; padding: 6px 9px 7px; background: var(--panel); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  /* the ink outline is drawn inside the card so its edge is the visual edge (lines up with the blocks) */
  box-shadow: inset 0 0 0 2px var(--ink), inset -4px -4px 0 rgba(168, 120, 60, .45); }
.card-inner > .face.back { transform: rotateX(180deg); background: #1a1030; color: #fff;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--accent); }
.stop-title { margin: 0 0 1px; font-size: 1.05em; color: #1a1030; }
.stop-title .star { color: #b06a00; font-size: .9em; }
.card-inner > .face p { margin: 0; }
.card-inner > .face .rule, .card-inner > .face .quip { line-height: 1.4; }
.card-inner > .face.back .back-title { margin: 0 0 1px; color: #ffd23a; font-size: .9em; }
.card-inner > .face.back .quip { font-style: italic; font-weight: 700; color: var(--accent); font-size: 1.05em; }
.map-bonus { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.map-bonus .card-inner > .face.front { background: #1a1030; color: #fff; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #fff; }
.map-bonus .card-inner > .face.front .stop-title { color: #ffd23a; }
.map-bonus ul { margin: 0; padding: 0 0 0 1.1em; }
.map-bonus b { color: var(--accent); }
.map-hint { margin: 0; text-align: center; font-size: .85em; color: #fff; text-shadow: 1px 1px 0 #1a1030; }

/* names on the map: display-only live names (rename from the scoreboard) */
.map-name { font: inherit; font-weight: 700; color: #7a0a14; }
.map-name[data-player="leon"] { color: #0a2a7a; }
.card-inner > .face.back .map-name, .card-inner > .face.back .map-name[data-player] { color: #ffd23a; font-style: normal; }

/* house-rule reminder when a mulligan disc is spent */
.partner-tip { position: fixed; z-index: 31; pointer-events: none; padding: 5px 7px; background: #1a1030;
  box-shadow: inset 0 0 0 2px #ffd23a, 0 0 0 2px #000; animation: tip 1.8s steps(6) forwards; }
@keyframes tip { 0% { transform: translateY(6px); opacity: 0; } 10%, 80% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rules-map { transition: none; }
  #qblock .face, .qbump, .partner-tip { animation: none; }
  /* coin: no bump, rise or spin; it just appears on the badge and fades */
  .rules-map .node.nbump, .coin-spin { animation: none; }
  .coin-pop { animation: coinfade .4s linear forwards; }
  @keyframes coinfade { from { opacity: 1; } to { opacity: 0; } }
  /* no 3D spin: a quick fade between the faces */
  .card-inner, .flipped .card-inner { transform: none; transition: none; }
  .card-inner > .face { transition: opacity .15s linear; }
  .card-inner > .face.back { transform: none; opacity: 0; }
  .flipped .card-inner > .face.back { opacity: 1; }
  .flipped .card-inner > .face.front { opacity: 0; }
}

/* ---------- title-tap cough (board #22 / #23) ----------
   The BIRDIE BONGS title is a plain-tap button: a quick pixel shake/puff plus one small smoke wisp
   (three CSS pixel puffs). Each tap restarts the same animation on the same elements (js/app.js),
   so repeat taps never stack. The wisp sits inside the title box (clear of the ? corner and the X). */
.cough-title { position: relative; display: block; padding: 2px 4px; margin: -2px 0; line-height: 0; transform-origin: 50% 80%; }
.cough-title > [data-ptext] { display: block; pointer-events: none; }
.cough-title.coughing { animation: cough .42s steps(6) 1; }
@keyframes cough {
  0% { transform: none; }
  17% { transform: translate(-2px, 1px) scale(1.06, .9); }
  33% { transform: translate(2px, -1px) scale(.96, 1.06); }
  50% { transform: translate(-2px, 0) scale(1.04, .94); }
  67% { transform: translate(1px, -1px) scale(.98, 1.03); }
  83% { transform: translate(-1px, 0); }
  100% { transform: none; }
}
.cough-wisp { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; }
.cough-wisp > i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; opacity: 0; background: #eef2f6;
  box-shadow: 6px 0 0 #eef2f6, 0 -6px 0 #d8dee6, 6px -6px 0 #ffffff, -3px -3px 0 #c8d0da; }
.cough-wisp > i:nth-child(2) { left: 10px; transform: scale(.7); }
.cough-wisp > i:nth-child(3) { left: -12px; transform: scale(.55); }
.cough-wisp.puff > i { animation: wisp .7s steps(7) 1 forwards; }
.cough-wisp.puff > i:nth-child(2) { animation-delay: .06s; }
.cough-wisp.puff > i:nth-child(3) { animation-delay: .12s; }
@keyframes wisp {
  0% { opacity: 0; translate: 0 6px; }
  15% { opacity: .95; translate: 2px 0; }
  100% { opacity: 0; translate: 10px -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cough-title.coughing, .cough-wisp.puff > i { animation: none; }
}

/* ---------- the settings screen (board #26): an original underground level behind the bag ----------
   Navy cave (not black, so the dark sprite outlines stay readable), blue bricks top and bottom, two
   lever switches, a wooden build sign, a credits pipe and one hidden ceiling brick. */
.settings { position: fixed; inset: 0; z-index: 25; overflow: hidden; -webkit-user-select: none; user-select: none;
  --ceil: calc(var(--corner-top) + 46px); --floor-h: calc(64px + env(safe-area-inset-bottom, 0px));
  background-color: var(--ug-sky, #2a4290); background-image: var(--ug-wall); background-size: 32px 32px; image-rendering: pixelated;
  clip-path: circle(0% at 50% 50%); transition: clip-path .45s steps(9, end); }
.settings[hidden] { display: none; }
.settings.wiped { clip-path: circle(80% at 50% 50%); }
.settings .screen-head { position: absolute; left: 0; right: 0; top: var(--corner-top); padding: 0 48px; z-index: 2; }
.ug-ceiling, .ug-floor { position: absolute; left: 0; right: 0; background-image: var(--ug-brick); background-size: 32px 32px; image-rendering: pixelated; }
.ug-ceiling { top: var(--ceil); height: 32px; background-repeat: repeat-x; box-shadow: 0 4px 0 rgba(8, 12, 40, .45); }
.ug-floor { bottom: 0; height: var(--floor-h); box-shadow: 0 -4px 0 rgba(8, 12, 40, .35) inset; }
/* the hidden brick: the same tile, lined up with the ceiling grid; only a rare glint gives it away */
.ug-brick { position: absolute; top: var(--ceil); left: 192px; width: 32px; height: 32px; z-index: 2; -webkit-tap-highlight-color: transparent; }
.ug-brick::before { content: ""; position: absolute; inset: -6px; } /* 44px tap target */
.ug-brick .face { position: absolute; inset: 0; background-size: 32px 32px; image-rendering: pixelated; pointer-events: none; }
.ug-brick .face::after { content: ""; position: absolute; left: 6px; top: 5px; width: 4px; height: 4px; background: #fff; opacity: 0;
  animation: glint 7s steps(1) infinite; }
@keyframes glint { 0%, 93%, 100% { opacity: 0; } 94%, 96% { opacity: .9; } 95% { opacity: .4; } }
.ug-brick.bbump { animation: bbump .22s steps(4) 1; }
@keyframes bbump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 70% { transform: translateY(2px); } }
/* the levers */
.ug-panel { position: absolute; left: 0; right: 0; top: calc(var(--ceil) + 44px); bottom: calc(var(--floor-h) + 84px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 14px; }
.lever-row { display: flex; align-items: center; gap: 12px; width: min(320px, 100%); min-height: 68px; box-sizing: border-box; padding: 6px 14px;
  background: #1b2d6e; box-shadow: inset 0 0 0 3px #7aa8ff, inset 0 0 0 6px #0c1638, 0 4px 0 rgba(8, 12, 40, .55); -webkit-tap-highlight-color: transparent; }
.lever-row > * { pointer-events: none; }
.lever-row .lv-label { flex: 1; line-height: 0; text-align: left; }
.lever-row .lever { width: 48px; height: 48px; line-height: 0; }
.lever-row .lv-state { width: 40px; line-height: 0; text-align: right; }
.lever-row:active { transform: translateY(2px); }
/* DISC | BALL (board #27): a two-way pixel toggle styled like the levers; the lit side is the active game */
.game-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: min(320px, 100%); min-height: 58px; box-sizing: border-box;
  background: #1b2d6e; box-shadow: inset 0 0 0 3px #7aa8ff, inset 0 0 0 6px #0c1638, 0 4px 0 rgba(8, 12, 40, .55); padding: 6px; }
.gp-side { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 0 6px;
  background: transparent; -webkit-tap-highlight-color: transparent; }
.gp-side > * { pointer-events: none; }
.gp-side .gp-sprite { display: block; width: 34px; height: 24px; line-height: 0; display: flex; align-items: center; justify-content: center; filter: grayscale(.9) brightness(.7); }
.gp-side .gp-word { line-height: 0; opacity: .6; }
.gp-side[aria-checked="true"] { background: #0c1638; box-shadow: inset 0 0 0 3px #3cd04a, inset 0 0 0 5px #05081a; }
.gp-side[aria-checked="true"] .gp-sprite { filter: none; }
.gp-side[aria-checked="true"] .gp-word { opacity: 1; }
.gp-side:active { transform: translateY(2px); }
.gp-side.lflip { animation: lflip .16s steps(2) 1; }
/* PLAYERS: the scoreboard's red / blue name bars as pixel plates; hold one to rename (same editor) */
.ug-names { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(320px, 100%); }
.ug-names-title { margin: 0; line-height: 0; }
.ug-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.set-name { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #d8283a; box-shadow: inset 3px 3px 0 #ff7a7a, inset -3px -3px 0 #8a0a14, 0 0 0 3px #05081a, 0 4px 0 3px rgba(8, 12, 40, .55);
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.set-name[data-player="leon"] { background: #2a6ae0; box-shadow: inset 3px 3px 0 #8ab8ff, inset -3px -3px 0 #0a2a7a, 0 0 0 3px #05081a, 0 4px 0 3px rgba(8, 12, 40, .55); }
.set-name .pname { line-height: 0; position: relative; z-index: 1; }
.lever.lflip { animation: lflip .16s steps(2) 1; }
@keyframes lflip { 50% { transform: scaleX(.8) translateY(2px); } }
/* SOUND LEVEL (board #37): a 16-bit volume bar. A native <input type=range> (invisible, on top) does the work; the pixel
   track, fill and knob underneath are drawn from --vol (0..100). The fill is bong smoke or soda bubbles by theme. */
.vol-row { --knob: 32px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 50px; align-items: center; gap: 10px; width: min(320px, 100%); min-height: 68px; box-sizing: border-box; padding: 6px 12px 6px 10px;
  background: #1b2d6e; box-shadow: inset 0 0 0 3px #7aa8ff, inset 0 0 0 6px #0c1638, 0 4px 0 rgba(8, 12, 40, .55); }
.vol-mute { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; background: #0c1638;
  box-shadow: inset 0 0 0 3px #7aa8ff, inset 0 0 0 5px #05081a; -webkit-tap-highlight-color: transparent; }
.vol-mute > * { pointer-events: none; }
.vol-mute .vol-icon { display: block; line-height: 0; }
.vol-mute:active { transform: translateY(2px); }
.vol-mute[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #ff8a80, inset 0 0 0 5px #05081a; }
.vol-mute.lflip { animation: lflip .16s steps(2) 1; }
.vol-slider { position: relative; height: 48px; -webkit-user-select: none; user-select: none; }
.vol-track { position: absolute; left: 0; right: 0; top: 50%; height: 20px; margin-top: -10px; overflow: hidden; background: #05081a;
  box-shadow: 0 0 0 3px #05081a, 0 0 0 5px #7aa8ff, inset 0 3px 0 rgba(0, 0, 0, .5); }
.vol-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--knob) / 2 + var(--vol) * (100% - var(--knob)) / 100);
  background: var(--vol-smoke) 0 0 / 48px 36px repeat; image-rendering: pixelated; box-shadow: inset -3px 0 0 rgba(255, 255, 255, .4), inset 0 3px 0 rgba(255, 255, 255, .25);
  animation: volsmoke 2.4s steps(8) infinite; }
html[data-theme="bottle"] .vol-fill { background-image: var(--vol-soda); animation: volsoda 1.4s steps(6) infinite; }
@keyframes volsmoke { to { background-position: -48px -12px; } }
@keyframes volsoda { to { background-position: 0 -36px; } }
.vol-row[data-state="mute"] .vol-fill { filter: grayscale(1) brightness(.55); animation: none; }
.vol-knob { position: absolute; top: 50%; left: calc(var(--vol) * (100% - var(--knob)) / 100); width: var(--knob); height: var(--knob); margin-top: calc(var(--knob) / -2);
  display: flex; align-items: center; justify-content: center; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(5, 8, 26, .65)); }
.vol-ks { display: block; line-height: 0; transform: rotate(var(--roll, 0deg)); transition: transform .12s steps(3); }
.vol-row[data-state="mute"] .vol-knob { filter: grayscale(.85) brightness(.7) drop-shadow(0 3px 0 rgba(5, 8, 26, .65)); }
.vol-row.drag .vol-ks { scale: 1.18; }
.vol-row.drag .vol-knob { animation: volwobble .2s steps(2) infinite; }
@keyframes volwobble { 0% { transform: rotate(-9deg) translateY(-1px); } 100% { transform: rotate(9deg) translateY(-3px); } }
.vol-slider:has(.vol-input:focus-visible) .vol-knob { outline: 3px solid #ffe680; outline-offset: 2px; }
.vol-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; touch-action: none;
  -webkit-appearance: none; appearance: none; background: transparent; }
.vol-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--knob); height: 48px; background: transparent; border: 0; }
.vol-input::-moz-range-thumb { width: var(--knob); height: 48px; background: transparent; border: 0; border-radius: 0; }
.vol-input::-webkit-slider-runnable-track { height: 48px; background: transparent; }
.vol-input::-moz-range-track { height: 48px; background: transparent; }
.vol-num { display: block; line-height: 0; text-align: right; min-height: 14px; }
.vol-row[data-state="mute"] .vol-num { opacity: .55; }
.vol-spark { display: none; position: absolute; top: 50%; left: calc(var(--vol) * (100% - var(--knob)) / 100); width: var(--knob); height: 0; pointer-events: none; }
.vol-row[data-state="max"] .vol-spark { display: block; }
.vol-spark i { position: absolute; line-height: 0; animation: voltwinkle .5s steps(2) infinite; }
.vol-spark i:first-child { left: -12px; top: -30px; }
.vol-spark i:last-child { left: 26px; top: -24px; animation-delay: .25s; }
@keyframes voltwinkle { 0% { transform: scale(.55); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
.vol-row.maxpop { animation: volmax .36s steps(6) 1; }
@keyframes volmax { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.vol-row.zero .vol-mute { animation: volzero .3s steps(4) 1; }
@keyframes volzero { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
/* the wooden build sign, planted on the floor at the left */
.ug-sign { position: absolute; left: 14px; bottom: var(--floor-h); display: flex; flex-direction: column; align-items: center; z-index: 1; }
.sign-board { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 10px 8px; min-width: 128px;
  background: repeating-linear-gradient(180deg, #c07a34 0 6px, #a8642a 6px 8px); box-shadow: inset 0 0 0 3px #5a3000, 0 0 0 2px #1a1030; }
.sign-board > span { line-height: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sign-post { width: 10px; height: 22px; background: #8a4a1a; box-shadow: inset -3px 0 0 #5a3000, 0 0 0 2px #1a1030; }
/* the credits pipe, standing on the floor at the right */
.ug-pipe { position: absolute; right: 14px; bottom: var(--floor-h); width: 48px; height: 72px; z-index: 1; -webkit-tap-highlight-color: transparent; }
.ug-pipe .face { display: block; line-height: 0; pointer-events: none; }
.ug-pipe:active .face { filter: brightness(1.15); }
/* the scroll it unrolls */
.ug-scroll { position: absolute; left: 12px; right: 12px; top: calc(var(--ceil) + 40px); bottom: calc(var(--floor-h) + 80px); z-index: 4;
  display: flex; justify-content: center; align-items: flex-start; pointer-events: none; }
.ug-scroll[hidden] { display: none; }
.scroll-paper { pointer-events: auto; max-width: 420px; max-height: 100%; overflow: auto; box-sizing: border-box; padding: 12px 14px 10px;
  background: #fff0c8; color: #3a2008; font: 700 12px/1.35 ui-monospace, "Courier New", monospace; -webkit-user-select: text; user-select: text;
  box-shadow: inset 0 6px 0 #e0c890, inset 0 -6px 0 #e0c890, 0 0 0 3px #5a3000, 0 6px 0 rgba(8, 12, 40, .5); transform-origin: 50% 0; }
.ug-scroll.unroll .scroll-paper { animation: unroll .36s steps(6) 1; }
@keyframes unroll { from { transform: scaleY(.05); } to { transform: scaleY(1); } }
.scroll-title { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; text-align: center; }
.credits { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 5px; }
.credits a { color: #1a3a98; }
.cr-file { color: #6a2a00; }
.scroll-note { margin: 8px 0 6px; font-size: 11px; text-align: center; }
.scroll-close { display: block; margin: 0 auto; min-height: 36px; padding: 0 14px; background: #5a3000; color: #fff0c8; font-size: 12px; text-transform: uppercase; }
/* the leaf power-up (a button so it can be grabbed; js/app.js moves it) */
.ug-leaf { text-align: center; position: absolute; left: 0; top: 0; width: 30px; height: 30px; z-index: 3; line-height: 0; -webkit-tap-highlight-color: transparent; }
.ug-leaf::before { content: ""; position: absolute; inset: -8px; }
.ug-leaf > svg { pointer-events: none; filter: drop-shadow(0 2px 0 rgba(8, 12, 40, .5)); }
.ug-leaf[data-phase="slide"] > svg, .ug-leaf[data-phase="rest"] > svg { animation: leafbob .5s steps(2) infinite; }
@keyframes leafbob { 50% { transform: translateY(-2px); } }
.ug-leaf.fading { animation: leafblink .9s steps(6) 1 forwards; }
@keyframes leafblink { 0%, 33%, 66% { opacity: 1; } 16%, 50%, 83%, 100% { opacity: .15; } }
/* grabbing it: a rainbow flash over the whole cave */
.ug-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, #ff4a4a, #ffa83a, #fff04a, #4ae05a, #4ab0ff, #9a5aff); mix-blend-mode: screen; }
.ug-flash.go { animation: rainbow .7s steps(7) 1; }
@keyframes rainbow { 0% { opacity: .9; filter: hue-rotate(0deg); } 50% { opacity: .7; filter: hue-rotate(180deg); } 100% { opacity: 0; filter: hue-rotate(360deg); } }
/* Haptics switched on: the cave shakes once */
.settings.shake { animation: ugshake .3s steps(6) 1; }
@keyframes ugshake { 20% { translate: -4px 0; } 40% { translate: 4px 2px; } 60% { translate: -3px -1px; } 80% { translate: 2px 0; } }
.haptic-tick { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
@media (max-height: 600px) { .ug-panel { gap: 6px; bottom: calc(var(--floor-h) + 76px); } .lever-row { min-height: 44px; padding: 2px 14px; } .vol-row { min-height: 56px; } .game-pick { min-height: 52px; padding: 3px; }
  .lever-row .lever { height: 36px; display: flex; align-items: center; } .lever-row .lever svg { flex: none; transform: scale(.75); } .gp-side { min-height: 44px; } .ug-panel { bottom: calc(var(--floor-h) + 70px); } }
@media (prefers-reduced-motion: reduce) {
  .settings { transition: none; }
  .vol-fill, .vol-knob, .vol-ks, .vol-spark i, .vol-row.maxpop, .vol-row.zero .vol-mute, .vol-mute.lflip { animation: none !important; transition: none !important; }
  .vol-row.drag .vol-ks { scale: 1; }
  .ug-brick .face::after, .ug-brick.bbump, .lever.lflip, .settings.shake, .ug-scroll.unroll .scroll-paper, .ug-leaf > svg { animation: none !important; }
  .ug-leaf.fading { animation: none; opacity: 0; transition: opacity .3s linear; }
  .ug-flash.go { animation: flashfade .5s linear 1; background: #fff6c0; mix-blend-mode: normal; }
  @keyframes flashfade { from { opacity: .6; } to { opacity: 0; } }
}

/* Bottle theme (board #33): the weed greens become soda blue. Set on <html data-theme="bottle"> by js/themes/. */
html[data-theme="bottle"] { --accent: #9fe8ff; --stash-fill: rgba(40, 180, 216, .30); --stash-lit: #28b4d8; }
html[data-theme="bottle"] .cough-wisp > i { background: #d8f6ff; box-shadow: 6px 0 0 #d8f6ff, 0 -6px 0 #bfeeff, 6px -6px 0 #ffffff, -3px -3px 0 #9fe0f4; }