/* ===== Lab Ways to Die ===== */
* { margin:0; padding:0; box-sizing:border-box; }
/* Fill the whole visible viewport on mobile; --app-height (set in JS from
   window.innerHeight) is the fallback for browsers without dvh. */
html, body {
  margin:0; padding:0; width:100%;
  height:100vh;                      /* legacy fallback */
  height:var(--app-height, 100vh);   /* JS fallback for older mobile without dvh */
  height:100svh;
  height:100dvh;                     /* modern: self-updating with the URL bar, wins */
  overflow:hidden;
  overscroll-behavior:none;
}
body {
  position:fixed; inset:0;
  font-family: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  background:#2f2b26;
  color:#3d3a33;
  -webkit-tap-highlight-color: transparent;
}
.screen { display:none; width:100%; height:100%; }
.screen.active { display:flex; align-items:center; justify-content:center; }

/* ---------- Title ---------- */
#screen-title { background:#e8dfc8; }
.title-inner { text-align:center; padding:20px; max-width:640px; }
.badge {
  width:84px; height:84px; margin:0 auto 14px; border-radius:22px;
  background:#e85d5d; color:#fff; font-size:56px; line-height:84px;
  box-shadow:0 6px 0 rgba(0,0,0,.12);
}
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size:clamp(2.2rem, 7vw, 3.6rem); line-height:1.02; color:#4a4438;
}
h1 span { color:#e85d5d; }
.tagline { margin:12px 0 22px; font-size:clamp(.85rem,2.6vw,1.05rem); color:#7d7566; }
.big-btn {
  font-family:inherit; font-weight:800; letter-spacing:.12em; cursor:pointer;
  font-size:1.3rem; padding:16px 58px; border:none;
  border-radius:999px; color:#fff; background:#f0a03c;
  box-shadow:0 6px 0 #c77f28; transition:transform .08s;
}
.big-btn:active { transform:translateY(4px); box-shadow:0 2px 0 #c77f28; }
.click-gate { background:#9a938a; box-shadow:0 6px 0 #6f6a63; }
.click-gate:active { box-shadow:0 2px 0 #6f6a63; }
.howto { margin-top:20px; font-size:.72rem; letter-spacing:.08em; color:#8d8371; text-transform:uppercase; }
.best { margin-top:10px; font-weight:700; color:#6f9a6c; }
.credit { margin-top:14px; font-size:.7rem; color:#a89e8a; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- landscape enforcement (phones) ---------- */
.rotate-note { display:none; }
#rotate-gate {
  display:none; position:fixed; inset:0; z-index:60;
  flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:#2f2b26; color:#ffe9b8; text-align:center; padding:24px;
}
.rotate-phone { font-size:clamp(3rem, 16vw, 5rem); animation:rotateHint 2.4s ease-in-out infinite; transform-origin:50% 50%; }
.rotate-text {
  font-family:Georgia, "Times New Roman", serif; font-weight:700;
  font-size:clamp(1.6rem, 7vw, 2.6rem); line-height:1.15; letter-spacing:.01em;
}
@keyframes rotateHint {
  0%, 40% { transform:rotate(0deg); }
  60%, 100% { transform:rotate(-90deg); }
}
/* only touch devices (body.touch, set in JS) held in portrait */
@media (orientation: portrait) {
  /* title: keep logo, name & dancers + a big centred rotate message; hide the rest */
  body.touch[data-screen="title"] .tagline,
  body.touch[data-screen="title"] #btn-play,
  body.touch[data-screen="title"] .howto,
  body.touch[data-screen="title"] .best,
  body.touch[data-screen="title"] .music-hint,
  body.touch[data-screen="title"] .credit { display:none; }
  body.touch[data-screen="title"] .rotate-note {
    display:block; margin:22px auto 4px; color:#c85b4e;
  }
  body.touch[data-screen="title"] .rotate-note .rotate-phone { color:#c85b4e; }
  /* game & game-over: fully gate the screen and (via JS) pause play */
  body.touch[data-screen="game"] #rotate-gate,
  body.touch[data-screen="over"] #rotate-gate { display:flex; }
}

/* ---------- dancing title beans ---------- */
.dance-floor { --amp:1; margin-top:16px; display:flex; justify-content:center; align-items:flex-end; gap:12px; min-height:116px; }
.dance-floor.hype { --amp:1.8; }
.dancer { width:clamp(52px, 11vw, 78px); cursor:pointer; }
.dancer svg { width:100%; height:auto; display:block; overflow:visible; }
/* .turned is a state flag only — facing is rendered by the yaw engine in game.js */

/* limb swings are SMIL animations inside each dancer SVG (paused/unpaused by JS) */

/* whole-body moves — the choreographer rotates these classes per dancer */
.dancing .dancer.m-bounce { animation:d-bounce var(--beat,.5s) ease-in-out infinite alternate; animation-delay:var(--d,0s); }
.dancing .dancer.m-sway  { animation:d-sway calc(var(--beat,.5s)*2) ease-in-out infinite alternate; animation-delay:var(--d,0s); }
.dancing .dancer.m-pump  { animation:d-pump var(--beat,.5s) ease-in-out infinite alternate; animation-delay:var(--d,0s); }
.dancing .dancer.m-step  { animation:d-step calc(var(--beat,.5s)*4) linear infinite; animation-delay:var(--d,0s); }

/* jump-twirls override whatever move is playing (same specificity, later order);
   the yaw spin itself happens on the bean's SURFACE (game.js renderYaw) —
   the silhouette never card-flips, so the bean reads as a solid object */
.dance-floor .dancer.twirling { animation:twirl-turn .8s cubic-bezier(.35,0,.3,1); animation-delay:0s; }
.dance-floor .dancer.clicked-twirl { animation:twirl-click 1.15s cubic-bezier(.4,0,.35,1); animation-delay:0s; }
@keyframes twirl-turn {                 /* 0.8s hop: crouch, half-body-height arc, land */
  0%   { transform:translateY(0) scale(1,1); }
  12%  { transform:translateY(1%) scale(1.05,.93); }
  55%  { transform:translateY(-33%) scale(.97,1.05) rotate(-4deg); }
  88%  { transform:translateY(0) scale(1.06,.94) rotate(1.5deg); }
  100% { transform:translateY(0) scale(1,1); }
}
@keyframes twirl-click {                /* gentle 1.15s float with a hang at the top */
  0%   { transform:translateY(0) scale(1,1); }
  14%  { transform:translateY(2%) scale(1.07,.91); }
  48%  { transform:translateY(-33%) scale(.97,1.04) rotate(3deg); }
  66%  { transform:translateY(-30%) scale(.98,1.03) rotate(-3deg); }
  90%  { transform:translateY(0) scale(1.07,.93); }
  100% { transform:translateY(0) scale(1,1); }
}

@keyframes d-bounce {
  from { transform:translateY(0) rotate(calc(var(--amp,1) * -3deg)); }
  to   { transform:translateY(calc(var(--amp,1) * -11px)) rotate(calc(var(--amp,1) * 3deg)); }
}
@keyframes d-sway {
  from { transform:translateX(calc(var(--amp,1) * -10px)) rotate(calc(var(--amp,1) * -6deg)); }
  to   { transform:translateX(calc(var(--amp,1) * 10px)) rotate(calc(var(--amp,1) * 6deg)); }
}
@keyframes d-pump {
  from { transform:scale(1.05,.93) translateY(0); }
  to   { transform:scale(.95,1.06) translateY(calc(var(--amp,1) * -13px)); }
}
@keyframes d-step {
  0%   { transform:translateX(calc(var(--amp,1) * -9px)) translateY(0); }
  25%  { transform:translateX(0) translateY(calc(var(--amp,1) * -10px)); }
  50%  { transform:translateX(calc(var(--amp,1) * 9px)) translateY(0); }
  75%  { transform:translateX(0) translateY(calc(var(--amp,1) * -10px)); }
  100% { transform:translateX(calc(var(--amp,1) * -9px)) translateY(0); }
}
.mute-btn {
  position:fixed; z-index:70; cursor:pointer;
  top:max(14px, env(safe-area-inset-top)); right:max(16px, env(safe-area-inset-right));
  width:44px; height:44px; border-radius:50%; border:none;
  background:#f0a03c; color:#fff; font-size:1.35rem; line-height:44px;
  box-shadow:0 4px 0 #c77f28;
}
.mute-btn.muted { background:#b8ab94; box-shadow:0 4px 0 #948a74; text-decoration:line-through; }
.mute-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #c77f28; }
#screen-title { position:relative; }
.music-hint { margin-top:10px; font-size:.75rem; font-weight:700; color:#c98a3f; animation:hintpulse 1.6s ease-in-out infinite; }
@keyframes hintpulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }

/* ---------- Stage ---------- */
#screen-game { background:#2f2b26; }
.stage-wrap {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  /* keep the play area out of the notch / rounded corners in landscape */
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}
.stage {
  position:relative; width:min(100%, calc((100dvh - 20px) * 1.6), 1100px);
  aspect-ratio:8/5; border-radius:14px; overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none;
  background:#d9c9a3;
}
#scene { display:block; width:100%; height:100%; }

/* hit areas */
#scene .hit, #scene .hit-fail, #scene .grabpad { fill:#000; opacity:0; pointer-events:all; cursor:pointer; }
#scene .drag, #scene .drag * { cursor:grab; }
#scene .dropzone, #scene .sweepzone { fill:#000; opacity:0; pointer-events:none; }
#scene .shard { transition:opacity .12s; }
#scene text { user-select:none; }

/* success / fail state groups inside scenes */
#scene .on-fail, #scene .on-success, #scene .on-step1 { display:none; }
.stage.failed #scene .on-fail { display:inline; }
.stage.failed #scene .alive { display:none; }
.stage.success #scene .on-success { display:inline; }
.stage.success #scene .on-success-hide { display:none; }
.stage.step1 #scene .on-step1 { display:inline; }
.stage.failed { animation: shake .45s; }

/* tasting hand / sniff hand / vapour puffs are driven from JS (data-anim) —
   this engine freezes CSS & SMIL animations on injected SVG, so JS sets the
   transform each frame instead. */

/* purple-paste scene: tongue shoots into the jar on fail; bean bob-dances on success */
#scene .paste-tongue { transform-box:fill-box; transform-origin:50% 0; transform:scaleY(.08); }
.stage.failed #scene .paste-tongue { animation:pasteLick .38s cubic-bezier(.45,0,.55,1) forwards; }
@keyframes pasteLick { from { transform:scaleY(.08); } to { transform:scaleY(1); } }
.stage.success #scene .paste-dance { transform-box:fill-box; transform-origin:50% 100%; animation:pasteDance 1.2s ease-in-out infinite; }
@keyframes pasteDance {
  0%,100% { transform:translate(-6px,0) rotate(-3deg); }
  25%,75% { transform:translate(0,-9px) rotate(0deg); }
  50% { transform:translate(6px,0) rotate(3deg); }
}

/* every living character grins on success (win-face swaps in over its normal one) */
#scene .bean-face-win { display:none; }
.stage.success #scene .bean-face { display:none; }
.stage.success #scene .bean-face-win { display:inline; }

/* HUD */
.hud {
  position:absolute; top:0; left:0; right:0; display:flex;
  justify-content:space-between; align-items:center; padding:12px 16px;
  pointer-events:none;
}
.hud-left { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.score {
  font-family:Georgia, serif; font-weight:700; font-size:clamp(1.4rem,4vw,2.2rem);
  color:rgba(61,58,51,.85); min-width:56px;
}
.score.pop { animation:scorepop .3s ease-out; }
.roundtag {
  font-size:clamp(.5rem,1.4vw,.72rem); font-weight:800; letter-spacing:.14em;
  color:rgba(61,58,51,.55);
}
.round-banner {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; background:rgba(58,52,44,.86);
  opacity:0; pointer-events:none; transition:opacity .3s; z-index:5;
}
.round-banner.show { opacity:1; }
.round-banner.show .rb-main { animation:popin .45s cubic-bezier(.2,1.6,.4,1); }
.rb-main { font-family:Georgia, serif; font-weight:700; font-size:clamp(2rem,7vw,4rem); color:#ffe9b8; }
.rb-sub { font-size:clamp(.7rem,2vw,1rem); letter-spacing:.14em; text-transform:uppercase; color:#e8dfc8; }
.lives { display:flex; gap:8px; margin-right:46px; }  /* clear the fixed mute button */
.lives .life { width:clamp(20px,3.4vw,30px); height:auto; transition:filter .3s, opacity .3s; }
.lives .life.lost { filter:grayscale(1); opacity:.35; animation:lifelost .5s ease-out; }
@keyframes lifelost {
  0% { transform:scale(1) rotate(0deg); filter:none; opacity:1; }
  35% { transform:scale(1.5) rotate(-16deg); }
  100% { transform:scale(1) rotate(0deg); }
}

/* Prompt (in-scene DWTD-style text) */
.prompt { position:absolute; left:4%; top:30%; width:32%; pointer-events:none; animation:popin .35s ease-out; }
.prompt-main {
  font-family:Georgia, "Times New Roman", serif; font-weight:700;
  font-size:clamp(1.1rem, 3.6vw, 2.2rem); line-height:1.05; color:#463f33;
}
.prompt-sub {
  margin-top:8px; font-size:clamp(.6rem, 1.7vw, .95rem); letter-spacing:.1em;
  color:#5a5244; text-transform:uppercase; font-weight:600;
}
/* rule banner on fail */
.rule-banner {
  position:absolute; left:50%; bottom:16%; transform:translateX(-50%) scale(0);
  max-width:86%; padding:12px 22px; border-radius:14px;
  background:rgba(58,52,44,.92); color:#ffe9b8; text-align:center;
  font-size:clamp(.8rem,2.4vw,1.15rem); font-weight:600;
}
.stage.failed .rule-banner { transform:translateX(-50%) scale(1); transition:transform .25s cubic-bezier(.2,1.6,.4,1); }

/* Timer bar */
.timer {
  position:absolute; left:6%; right:6%; bottom:4.5%; height:clamp(10px,2.4vh,16px);
  border-radius:999px; background:rgba(255,255,255,.45);
}
.timer-fill {
  position:relative; height:100%; width:100%; border-radius:999px;
  background:repeating-linear-gradient(-55deg, #f0a03c 0 14px, #f6b95f 14px 28px);
}
.timer-fill::after {
  content:''; position:absolute; right:-4px; top:50%; transform:translateY(-50%);
  width:1.7em; height:1.7em; border-radius:50%;
  background:#fff8e8; border:4px solid #f0a03c;
}
.timer-fill.urgent { background:repeating-linear-gradient(-55deg, #e85d5d 0 14px, #f08585 14px 28px); }
.timer-fill.urgent::after { border-color:#e85d5d; }

/* ---------- Game over ---------- */
#screen-over { background:#e8dfc8; overflow-y:auto; }
.over-inner { text-align:center; padding:26px 18px 40px; max-width:620px; margin:auto; }
#over-headline { font-family:Georgia, serif; font-size:clamp(1.4rem,5vw,2.3rem); color:#4a4438; }
.conga { margin:10px 0 4px; height:110px; display:flex; justify-content:center; align-items:flex-end; gap:6px; }
.conga svg { width:64px; height:auto; animation:bob 1s ease-in-out infinite; }
.conga svg:nth-child(2n) { animation-delay:.25s; }
.conga svg:nth-child(3n) { animation-delay:.5s; }
.over-score { font-size:1.4rem; margin:8px 0 4px; }
.over-score b { font-family:Georgia, serif; font-size:2rem; color:#e85d5d; }
.over-best { display:block; font-size:.85rem; color:#6f9a6c; font-weight:700; }
.rules-recap { margin:14px auto; max-width:520px; text-align:left; }
.rules-recap div {
  background:#fff8e8; border-left:5px solid #e85d5d; border-radius:8px;
  padding:8px 12px; margin:6px 0; font-size:.86rem;
}
.rules-recap .all-clear { border-left-color:#6f9a6c; color:#4a6b48; font-weight:700; text-align:center; }

.lb-box { background:#f6efdb; border-radius:16px; padding:16px; margin:18px 0; }
.lb-box h3 { font-family:Georgia, serif; color:#4a4438; margin-bottom:10px; }
#lb-form { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
#lb-form input {
  flex:1 1 140px; padding:10px 12px; border:2px solid #d8cdb2; border-radius:10px;
  font-family:inherit; font-size:.9rem; background:#fff;
}
.small-btn {
  font-family:inherit; font-weight:800; letter-spacing:.08em; cursor:pointer;
  padding:10px 18px; border:none; border-radius:10px; color:#fff;
  background:#6f9a6c; box-shadow:0 4px 0 #557a52;
}
.small-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #557a52; }
#lb-list { margin:12px auto 0; max-width:420px; text-align:left; list-style-position:inside; }
#lb-list li { padding:6px 10px; border-radius:8px; font-size:.92rem; display:flex; justify-content:space-between; }
#lb-list li b { font-family:Georgia, serif; }
#lb-list li.me { background:#ffe9b8; font-weight:800; }
.lb-note { margin-top:8px; font-size:.7rem; color:#a89e8a; }
#btn-replay { margin-top:6px; }

/* ---------- SVG animations ---------- */
#scene .flame, .title-beans .flame {
  transform-box:fill-box; transform-origin:50% 100%;
  animation:flicker .22s ease-in-out infinite alternate;
}
#scene .fume { animation:rise 1.6s ease-out infinite; opacity:.8; }
#scene .fume:nth-of-type(2n) { animation-delay:.5s; }
#scene .fume:nth-of-type(3n) { animation-delay:1s; }
#scene .wobble { transform-box:fill-box; transform-origin:50% 90%; animation:wobble 1.4s ease-in-out infinite; }
#scene .dash { animation:dashmove .5s linear infinite; }

@keyframes flicker { from { transform:scaleY(1) } to { transform:scaleY(1.25) scaleX(.92) } }
@keyframes rise { from { transform:translateY(0); opacity:.85 } to { transform:translateY(-46px); opacity:0 } }
@keyframes wobble { 0%,100% { transform:rotate(-2.5deg) } 50% { transform:rotate(2.5deg) } }
@keyframes dashmove { to { stroke-dashoffset:-20 } }
@keyframes shake {
  0%,100% { transform:translate(0,0) } 20% { transform:translate(-8px,3px) }
  40% { transform:translate(7px,-3px) } 60% { transform:translate(-5px,2px) } 80% { transform:translate(4px,-2px) }
}
@keyframes popin { from { transform:scale(.6); opacity:0 } to { transform:scale(1); opacity:1 } }
@keyframes scorepop { 0% { transform:scale(1) } 40% { transform:scale(1.45) } 100% { transform:scale(1) } }
@keyframes bob { 0%,100% { transform:translateY(0) rotate(-3deg) } 50% { transform:translateY(-10px) rotate(3deg) } }