*{box-sizing:border-box;margin:0}
:root{--gold:#d9a94a;--ink:#0d1016}
body{font:16px/1.45 "Trebuchet MS",system-ui,sans-serif;background:#0b0e13;color:#f2eee6;overflow:hidden;height:100vh}

/* ---------- 3D office scene ---------- */
#scene{position:relative;height:100vh;perspective:1400px;perspective-origin:50% 42%;overflow:hidden}
.wall{position:absolute;inset:0 0 22% 0;
  background:radial-gradient(120% 90% at 50% 20%,#5c6070 0%,#2c3038 45%,#171a21 100%),
             repeating-linear-gradient(90deg,#0000 0 58px,#ffffff08 58px 60px)}
.floor{position:absolute;left:-20%;right:-20%;bottom:0;height:26%;
  background:linear-gradient(#20242d,#0a0c11);transform:rotateX(64deg);transform-origin:top;
  box-shadow:0 -30px 60px #000 inset}
#stage{position:absolute;inset:0;transform-style:preserve-3d;display:grid;place-items:center}

/* ---------- office behind the frame: library cupboard + desk ---------- */
/* no filter here: filter would flatten the 3D context and kill the depth */
#office{position:absolute;inset:0;transform-style:preserve-3d}
body.plain #office{display:none}

#cupboard{position:absolute;left:50%;top:8vh;width:min(74vh,90vw);height:64vh;
  transform:translate(-50%,0) translateZ(-220px);
  display:flex;flex-direction:column;gap:1.5vh;padding:2.2vh;border-radius:6px;
  background:linear-gradient(#3d2a19,#241608);
  box-shadow:0 0 0 6px #1b1008 inset,0 34px 70px #000b}
#cupboard .shelf{flex:1;border-radius:2px;
  background:repeating-linear-gradient(90deg,#000000b3 0 2px,#0000 2px 15px),
    repeating-linear-gradient(90deg,#6b2d24 0 15px,#96791d 15px 30px,#24463b 30px 45px,
      #2c3859 45px 60px,#5b2c46 60px 75px,#834e20 75px 90px,#35363c 90px 105px);
  box-shadow:0 6px 0 #170e06,0 9px 12px #0009}
#cupboard .shelf:nth-child(2){background-position:9px 0}
#cupboard .shelf:nth-child(3){background-position:24px 0}
#cupboard .shelf:nth-child(4){background-position:39px 0}
#cupboard .panes{position:absolute;inset:0;border-radius:6px;
  background:linear-gradient(112deg,#ffffff26 0 16%,#ffffff08 28% 46%,#ffffff1c 54% 61%,#fff0 68%),
    #0b0d1233;
  box-shadow:0 0 0 2px #00000066 inset}
#cupboard .panes::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;
  transform:translateX(-50%);background:linear-gradient(90deg,#1d1108,#5a3d22,#1d1108)}

#clock{position:absolute;left:6vw;top:7vh;width:9vh;height:9vh;border-radius:50%;
  background:radial-gradient(#f7f2e4,#cbc2aa);border:.7vh solid #2b2118;
  transform:translateZ(-120px);box-shadow:0 12px 22px #0009}
#clock::before,#clock::after{content:"";position:absolute;left:50%;bottom:50%;
  background:#2b2118;border-radius:2px;transform-origin:bottom}
#clock::before{width:3px;height:30%;margin-left:-1.5px;transform:rotate(128deg)}
#clock::after{width:2px;height:43%;margin-left:-1px;transform:rotate(-22deg)}

#desk{position:absolute;left:-8vw;right:-8vw;top:70vh;height:32vh;
  transform:translateZ(60px);transform-style:preserve-3d}
#desk .top{position:absolute;left:0;right:0;top:0;height:10vh;transform-origin:bottom;
  transform:rotateX(63deg);box-shadow:0 -8px 20px #0007;
  background:linear-gradient(#7c5330,#54381f 55%,#3d2817)}
#desk .top::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 130% at 50% 100%,#ffcf8a26,#0000 70%)}
#desk .front{position:absolute;left:0;right:0;top:10vh;bottom:0;box-shadow:0 -3px 0 #8a6238 inset;
  background:repeating-linear-gradient(90deg,#0000 0 4px,#ffffff0a 4px 5px),
    linear-gradient(#33210f,#150c05)}
#desk .front::before{content:"";position:absolute;left:15%;top:2.2vh;width:24vh;height:5.6vh;
  border:1px solid #00000075;border-top-color:#ffffff12;border-radius:2px}
#desk .front::after{content:"";position:absolute;left:15%;top:2.2vh;width:24vh;height:5.6vh;
  background:radial-gradient(circle .9vh at 50% 50%,#7c5a34 62%,#0000 63%)}
#desk .papers{position:absolute;left:17%;top:5vh;width:10vh;height:3.4vh;border-radius:2px;
  transform:rotateX(63deg) rotate(-3deg);background:linear-gradient(#f4f0e6,#cfc8b8);
  box-shadow:0 4px 0 #c3bba8,0 8px 0 #e6e0d1,0 13px 12px #0007}
#desk .mug{position:absolute;right:24%;top:4.4vh;width:3.4vh;height:4.2vh;
  border-radius:6% 6% 32% 32%;background:linear-gradient(#ddd8ce,#a8a194);
  box-shadow:0 9px 12px #0008}
#desk .mug::after{content:"";position:absolute;right:-1.7vh;top:.9vh;width:1.8vh;height:2.1vh;
  border:.5vh solid #d2ccc0;border-left:0;border-radius:0 60% 60% 0}
#desk .plant{position:absolute;left:13%;top:.4vh;width:7vh;height:9.6vh}
#desk .plant::before{content:"";position:absolute;bottom:0;left:1.6vh;width:3.8vh;height:3.4vh;
  border-radius:0 0 22% 22%;background:linear-gradient(#7d4e33,#4a2a18);
  box-shadow:0 8px 12px #0008}
#desk .plant::after{content:"";position:absolute;bottom:2.9vh;left:0;width:7vh;height:7vh;
  background:radial-gradient(circle 2.5vh at 28% 52%,#37794a 98%,#0000),
    radial-gradient(circle 2.3vh at 72% 62%,#2f6a41 98%,#0000),
    radial-gradient(circle 2.1vh at 52% 22%,#428954 98%,#0000)}

/* ---------- picture frame ---------- */
#frame{position:relative;width:min(46vh,90vw);transform-style:preserve-3d;
  animation:sway 9s ease-in-out infinite;margin-bottom:13vh;
  padding:14px;border-radius:6px;
  background:linear-gradient(135deg,#f0cd7d,#8a5f1c 40%,#e8c273 60%,#6f4a12);
  box-shadow:0 40px 60px #000a,0 0 0 3px #00000055 inset}
@keyframes sway{0%,100%{transform:translateZ(0) rotateY(-5deg) rotateX(1deg)}
                50%{transform:translateZ(20px) rotateY(5deg) rotateX(-1deg)}}
#mat{position:relative;padding:12px;background:#efe7d6;border-radius:2px;overflow:hidden}
#dodger{transform-style:preserve-3d;will-change:transform}
#boss,#photo{display:block;width:100%;border-radius:2px}
#photo{aspect-ratio:42/52;object-fit:cover}
#boss[hidden],#photo[hidden]{display:none}
#glass{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,#fff3 0 22%,#fff0 40%,#fff1 62%,#fff0 75%)}
#plate{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%) translateZ(6px);
  transition:transform .5s ease-out,opacity .5s;
  background:linear-gradient(#e6c274,#8d6320);color:#2a1c05;font-weight:bold;letter-spacing:.18em;
  font-size:12px;padding:4px 16px;border-radius:3px;white-space:nowrap}

/* boss moods */
#sweat{opacity:0;transition:.3s}
.shock #sweat,.defeat #sweat{opacity:.9}
.brow{transition:.25s}
.shock #browL{transform:translateY(-16px) rotate(14deg)}
.shock #browR{transform:translateY(-16px) rotate(-14deg)}
.defeat #browL{transform:translateY(-8px) rotate(-8deg)}
.defeat #browR{transform:translateY(-8px) rotate(8deg)}
#browL,#browR{transform-box:fill-box;transform-origin:center}
#mouth{transform-box:fill-box;transform-origin:center;transition:.2s}
.shock #mouth{transform:scale(.7,2.1)}
.defeat #mouth{transform:scale(.8,.45)}
.talking #mouth{animation:talk .26s linear infinite}
@keyframes talk{0%,100%{transform:scale(1,.5)}50%{transform:scale(.9,1.7)}}
.hurt #eyes{opacity:.25}

/* dodging + impact */
#head{transform-box:fill-box;transform-origin:50% 97%}
#head.dodgeL{animation:headL .5s cubic-bezier(.2,1.5,.3,1)}
#head.dodgeR{animation:headR .5s cubic-bezier(.2,1.5,.3,1)}
@keyframes headL{0%,100%{transform:none}
 28%{transform:translate(-15%,4%) rotate(-17deg) scaleX(.9)}
 60%{transform:translate(4%,1%) rotate(5deg)}}
@keyframes headR{0%,100%{transform:none}
 28%{transform:translate(15%,4%) rotate(17deg) scaleX(.9)}
 60%{transform:translate(-4%,1%) rotate(-5deg)}}
.dodgeL{animation:dodgeL .5s cubic-bezier(.2,1.6,.3,1)}
.dodgeR{animation:dodgeR .5s cubic-bezier(.2,1.6,.3,1)}
@keyframes dodgeL{0%{transform:none}30%{transform:translate3d(-14%,5%,-30px) rotateY(30deg) rotateZ(-10deg)}100%{transform:none}}
@keyframes dodgeR{0%{transform:none}30%{transform:translate3d(14%,5%,-30px) rotateY(-30deg) rotateZ(10deg)}100%{transform:none}}
#frame.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translate(0,0)}
 20%{transform:translate(-14px,8px) rotate(-1.5deg)}45%{transform:translate(12px,-6px) rotate(1.5deg)}
 70%{transform:translate(-7px,3px)}}
#pow{position:absolute;left:50%;top:40%;opacity:0;z-index:3;
  transform:translate(-50%,-50%) translateZ(430px) scale(0);
  font:900 min(7vh,52px)/1 Impact,"Arial Black",sans-serif;color:#ffe14d;pointer-events:none;
  white-space:nowrap;
  text-shadow:0 0 4px #000,5px 5px 0 #b3271b,-3px -3px 0 #b3271b;-webkit-text-stroke:2px #3a0d08}
#pow.go{animation:pow .55s ease-out}
@keyframes pow{0%{opacity:0;transform:translate(-50%,-50%) translateZ(430px) scale(.2) rotate(-25deg)}
 35%{opacity:1;transform:translate(-50%,-50%) translateZ(430px) scale(1.1) rotate(8deg)}
 100%{opacity:0;transform:translate(-50%,-50%) translateZ(430px) scale(1.5) rotate(-6deg)}}

/* ---------- combo counter ---------- */
#combo{position:absolute;left:50%;top:13%;z-index:4;opacity:0;pointer-events:none;
  transform:translate(-50%,0) translateZ(400px);text-align:center;transition:opacity .18s;
  font:900 min(6.4vh,48px)/1 Impact,"Arial Black",sans-serif;color:#fff;
  text-shadow:0 0 10px #ff4b1e,0 4px 0 #8f1a0c;-webkit-text-stroke:2px #3a0d08}
#combo.on{opacity:1}
#combo i{display:block;font:900 min(1.9vh,13px)/1 "Trebuchet MS",sans-serif;letter-spacing:.32em;
  color:#ffd24a;-webkit-text-stroke:0;text-shadow:0 2px 4px #000;margin-top:5px}
#combo.pop{animation:comboPop .22s cubic-bezier(.2,1.8,.3,1)}
@keyframes comboPop{0%{transform:translate(-50%,0) translateZ(400px) scale(.5) rotate(-8deg)}
 100%{transform:translate(-50%,0) translateZ(400px) scale(1) rotate(0)}}

/* ---------- level 2 rage ---------- */
#rage{position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 40%,#ff2b0000 26%,#c0130077 100%)}
#rage.flash{animation:rageFlash .34s ease-out}
@keyframes rageFlash{0%{opacity:.95}100%{opacity:0}}

body.fierce .wall{background:radial-gradient(120% 90% at 50% 20%,#8e4a41 0%,#3a1f24 45%,#180d10 100%),
  repeating-linear-gradient(90deg,#0000 0 58px,#ffffff08 58px 60px)}
body.fierce .floor{background:linear-gradient(#2a1c20,#0a0507)}
body.fierce #frame{animation-duration:3.4s}
body.fierce #round{color:#ff7059}
body.fierce .meter b{animation:angerPulse .85s ease-in-out infinite}
@keyframes angerPulse{50%{filter:brightness(1.55) saturate(1.3)}}
body.fierce #pow{font-size:min(9.4vh,70px)}
body.fierce #plate{background:linear-gradient(#ff9d6b,#a8321a);color:#2a0a05}
#scene.quake{animation:quake .3s}
@keyframes quake{0%,100%{transform:none}
 25%{transform:translate(9px,-6px)}50%{transform:translate(-8px,5px)}75%{transform:translate(5px,3px)}}

/* ---------- level 3: the wall ---------- */
body.brutal .wall{background:radial-gradient(120% 90% at 50% 20%,#a4382c 0%,#40161a 42%,#0f0709 100%),
  repeating-linear-gradient(90deg,#0000 0 58px,#ffffff08 58px 60px);
  animation:heat 2.2s ease-in-out infinite}
@keyframes heat{50%{filter:brightness(1.14) saturate(1.25)}}
body.brutal .floor{background:linear-gradient(#301418,#080304)}
body.brutal #glass{background:linear-gradient(115deg,#fff3 0 22%,#fff0 40%,#fff1 62%,#fff0 75%),#ff1e0026}
body.brutal #frame{animation-duration:2.4s;
  box-shadow:0 40px 60px #000a,0 0 44px #ff2d0d5e,0 0 0 3px #00000055 inset}
body.brutal #rage{background:radial-gradient(120% 85% at 50% 40%,#ff2b0000 18%,#c0130099 100%)}
body.brutal #pow{font-size:min(11vh,82px)}
body.brutal #combo{font-size:min(8vh,60px)}
body.brutal #round{color:#ff4a2c;animation:angerPulse .7s ease-in-out infinite}
body.brutal .meter b{animation-duration:.55s}
body.brutal #scene.quake{animation:quakeHard .34s}
@keyframes quakeHard{0%,100%{transform:none}
 18%{transform:translate(-17px,11px) rotate(-.5deg)}40%{transform:translate(15px,-9px) rotate(.5deg)}
 66%{transform:translate(-9px,6px)}86%{transform:translate(6px,-3px)}}
.act.box{background:linear-gradient(#e2402a,#7d1409)}

/* ---------- the finish: the glass goes, the frame hangs crooked ---------- */
.act.fin{background:linear-gradient(#ffd35c,#c1860d);color:#2b1c04;
  box-shadow:0 6px 0 #0007,0 0 30px #ffc84a85;animation:goldPulse 1.3s ease-in-out infinite}
@keyframes goldPulse{50%{box-shadow:0 6px 0 #0007,0 0 46px #ffd35c}}
#glass.cracked{background:
  linear-gradient(74deg,#0000 49.3%,#fffffff2 49.66%,#0000 50%),
  linear-gradient(-57deg,#0000 41.5%,#ffffffcc 41.86%,#0000 42.2%),
  linear-gradient(17deg,#0000 62.1%,#ffffffb8 62.46%,#0000 62.8%),
  linear-gradient(121deg,#0000 33.3%,#ffffffa8 33.66%,#0000 34%),
  linear-gradient(-14deg,#0000 71.2%,#ffffff94 71.52%,#0000 71.85%),
  linear-gradient(46deg,#0000 26.4%,#ffffff8a 26.7%,#0000 27%),
  radial-gradient(circle at 52% 43%,#fffffff2 0 1.1%,#ffffff59 1.3% 4.6%,#0000 7.4%),
  linear-gradient(115deg,#fff3 0 22%,#fff0 40%,#fff1 62%,#fff0 75%)}
#frame.broken{animation:breakFrame .6s cubic-bezier(.2,1.5,.3,1) forwards}
@keyframes breakFrame{0%{transform:translateZ(0) rotate(0)}
 38%{transform:translateZ(48px) rotate(-10deg)}
 100%{transform:translateZ(8px) rotate(-5.5deg)}}
#frame.broken #plate{transform:translateX(-50%) translateZ(6px) translateY(17px) rotate(8deg);opacity:.65}
/* the room goes from blood red to hot gold once it is over */
body.ko .wall{animation:none;
  background:radial-gradient(120% 90% at 50% 20%,#caa45e 0%,#4b2f22 42%,#120a0b 100%),
  repeating-linear-gradient(90deg,#0000 0 58px,#ffffff08 58px 60px)}
body.ko .floor{background:linear-gradient(#2b1f18,#080505)}
body.ko #rage{background:radial-gradient(120% 85% at 50% 40%,#ffd98a00 20%,#ffb43a52 100%)}
body.ko #glass{background-blend-mode:screen}
body.ko #round{animation:none}

/* ---------- the hand ---------- */
#hand{position:absolute;left:50%;bottom:-4vh;width:min(16vh,28vw);opacity:0;z-index:2;
  filter:drop-shadow(0 18px 24px #000a);pointer-events:none;transform-style:preserve-3d}
#hand svg{width:100%}
#hand #gFist,#hand #gGlove{display:none}
#hand.punch #gFist{display:block}
#hand.punch #gPalm{display:none}
#hand.box #gGlove{display:block}
#hand.box #gPalm,#hand.box #gFist{display:none}
/* contact is on frame ZERO — the arm is the recoil, not the wind-up, so the
   blow lands the instant you press. Everything is short enough to mash. */
#hand.punch{animation:punchHit .2s ease-out}
#hand.slap{animation:slapHit .2s ease-out}
#hand.box{animation:boxHit .2s ease-out}
@keyframes punchHit{
  0%{opacity:1;transform:translate(-30%,-44vh) translateZ(330px) rotate(5deg) scale(1.14)}
  26%{opacity:1;transform:translate(-33%,-40vh) translateZ(250px) rotate(2deg) scale(1.02)}
  100%{opacity:0;transform:translate(-50%,4vh) translateZ(-400px) rotate(-8deg) scale(.78)}}
@keyframes slapHit{
  0%{opacity:1;transform:translate(-76%,-47vh) translateZ(300px) rotate(-17deg) scale(1.12)}
  100%{opacity:0;transform:translate(-140vw,-32vh) translateZ(-260px) rotate(-72deg) scale(.9)}}
@keyframes boxHit{
  0%{opacity:1;transform:translate(-48%,-43vh) translateZ(400px) scale(1.22)}
  26%{opacity:1;transform:translate(-50%,-38vh) translateZ(290px) scale(1.06)}
  100%{opacity:0;transform:translate(-50%,8vh) translateZ(-520px) scale(.74)}}
body.brutal #hand{width:min(19vh,33vw)}
#frame.shake{animation:shake .26s}
#pow.go{animation:pow .38s ease-out}
@keyframes punchIn{0%{opacity:0;transform:translate(-50%,8vh) translateZ(-520px) rotate(-8deg)}
 42%{opacity:1;transform:translate(-24%,-45vh) translateZ(280px) rotate(5deg)}
 58%{opacity:1;transform:translate(-30%,-40vh) translateZ(150px) rotate(2deg)}
 100%{opacity:0;transform:translate(-50%,8vh) translateZ(-520px)}}
@keyframes slapIn{0%{opacity:0;transform:translate(58vw,-30vh) translateZ(-420px) rotate(56deg)}
 42%{opacity:1;transform:translate(-80%,-47vh) translateZ(260px) rotate(-18deg)}
 100%{opacity:0;transform:translate(-130vw,-36vh) translateZ(-280px) rotate(-72deg)}}
/* straight boxing jab: dead centre, heavy forward drive */
@keyframes boxIn{0%{opacity:0;transform:translate(-50%,12vh) translateZ(-640px) rotate(-5deg) scale(.66)}
 40%{opacity:1;transform:translate(-47%,-43vh) translateZ(380px) rotate(3deg) scale(1.18)}
 56%{opacity:1;transform:translate(-50%,-38vh) translateZ(200px) rotate(0deg) scale(1.06)}
 100%{opacity:0;transform:translate(-50%,12vh) translateZ(-640px) scale(.66)}}

/* ---------- HUD, bubbles, controls ---------- */
#hud{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;gap:14px;align-items:center;
  justify-content:space-between;padding:12px 18px;font-size:12px;letter-spacing:.12em}
.meter{flex:1;max-width:230px}
.meter.r{text-align:right}
.meter i{display:block;height:10px;margin-top:5px;background:#ffffff1a;border-radius:6px;overflow:hidden}
.meter b{display:block;height:100%;width:0;border-radius:6px;transition:width .4s;
  background:linear-gradient(90deg,#ff8a3d,#e02020)}
.meter b.good{background:linear-gradient(90deg,#5ee08a,#2fb8ff)}
#round{font:inherit;font-weight:bold;color:var(--gold);letter-spacing:.12em;background:none;
  box-shadow:none;padding:5px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
#round::after{content:" ▾";opacity:.65}
#round:hover:not(:disabled){background:#ffffff14;transform:none}
#round:active:not(:disabled){transform:none;box-shadow:none;background:#ffffff22}

/* level picker */
#pickList{display:grid;gap:10px;margin:20px 0 4px}
.card button.lvlPick{display:block;width:100%;margin:0;text-align:left;line-height:1.25;
  padding:15px 18px;background:linear-gradient(#3f4759,#252b37)}
.card button.lvlPick i{display:block;margin-top:5px;font-size:12px;font-style:normal;
  font-weight:normal;letter-spacing:0;color:#9fb0c6}
.card button.lvlPick.on{background:linear-gradient(#e9573f,#b3271b)}
.card button.lvlPick.on i{color:#ffdcd4}
.card button.ghost{background:#0000;box-shadow:0 0 0 1px #ffffff2e inset;color:#b8c4d4;
  font-size:13px;padding:11px 18px;margin-left:8px}
.card button.ghost:hover:not(:disabled){color:#fff;box-shadow:0 0 0 1px #ffffff5c inset}
.card button.ghost:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 1px #ffffff5c inset}

.bubble{position:absolute;max-width:min(38ch,42vw);padding:14px 18px;border-radius:16px;
  font-size:clamp(13px,1.7vh,18px);opacity:0;transition:.25s;transform:translateY(8px);z-index:4}
.bubble.show{opacity:1;transform:none}
.bubble.boss{top:9vh;right:3vw;background:#fff;color:#1a1a1a;border:3px solid #d33;
  box-shadow:0 14px 30px #000a}
.bubble.boss::after{content:"";position:absolute;left:-16px;bottom:22px;border:9px solid #0000;
  border-right-color:#d33}
.bubble.emp{bottom:15vh;left:3vw;background:#10243a;color:#dff1ff;border:3px solid #3ba7ff;
  box-shadow:0 14px 30px #000a}
.bubble.emp::before{content:"YOU · ";color:#3ba7ff;font-weight:bold}
.bubble.emp.floor::before{content:"THE FLOOR · ";color:#ffd24a}
.bubble.emp.floor{border-color:#ffd24a;background:#241a06;color:#fff6de;
  box-shadow:0 0 0 6px #ffd24a30,0 14px 30px #000a}

/* shouted lines */
.bubble.yell{font-weight:bold;text-transform:uppercase;font-size:clamp(14px,2vh,21px);
  letter-spacing:.01em}
.bubble.boss.yell{border-color:#ff3b1e;background:#fff6f4;
  box-shadow:0 0 0 5px #ff3b1e2e,0 14px 30px #000a}
.bubble.boss.yell::after{border-right-color:#ff3b1e}
.bubble.emp.yell{border-color:#ffd24a;color:#fff8e2;background:#1d1405;
  box-shadow:0 0 0 5px #ffd24a2e,0 14px 30px #000a}
.bubble.emp.yell::before{color:#ffd24a}
.bubble.jolt{animation:jolt .3s cubic-bezier(.2,1.6,.3,1)}
@keyframes jolt{0%{transform:scale(.92) rotate(-1.4deg)}55%{transform:scale(1.04) rotate(1deg)}
 100%{transform:none}}

#controls{position:absolute;bottom:0;left:0;right:0;z-index:5;display:flex;gap:10px;
  justify-content:center;align-items:center;flex-wrap:wrap;padding:14px}
button{font:inherit;font-weight:bold;letter-spacing:.06em;color:#fff;cursor:pointer;
  border:0;border-radius:12px;padding:12px 18px;background:#3a4152;
  box-shadow:0 6px 0 #0007,0 10px 18px #0006;transition:.12s}
button:hover:not(:disabled){transform:translateY(-2px)}
button:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #0007}
button:disabled{opacity:.4;cursor:not-allowed}
.act{background:linear-gradient(#5a6479,#2f3644)}
.key{background:linear-gradient(#e9573f,#b3271b)}
.key:not(:disabled){animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 6px 0 #0007,0 0 24px #ff7043}}
kbd{background:#0006;border-radius:5px;padding:1px 6px;font-size:11px;margin-left:6px}
#upload{background:#2b3140;border-radius:12px;padding:12px 16px;font-size:13px;cursor:pointer}
#upload input{display:none}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  background:#05070ad9;backdrop-filter:blur(4px);text-align:center;padding:20px}
.overlay.hidden{display:none}
.card{max-width:600px;background:linear-gradient(#1b202b,#0e1219);border:1px solid #ffffff1f;
  border-radius:20px;padding:34px;box-shadow:0 30px 70px #000}
.card h1{font:900 clamp(26px,5vh,44px)/1.1 Impact,"Arial Black",sans-serif;letter-spacing:.04em;
  color:var(--gold)}
.card p{margin:14px 0}
.sub{color:#9fb0c6;font-style:italic}
.tiny{font-size:12px;color:#7d8ba0}
.card button{margin-top:10px;background:linear-gradient(#e9573f,#b3271b);padding:14px 26px}
@media (max-width:700px){.bubble{max-width:80vw}.bubble.boss{top:8vh;right:auto;left:5vw}}

/* ---------- LEVEL 4: the chairman's office ---------- */
#boardroom{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
body:not(.board) #boardroom{display:none}
body.board #cupboard{display:none}
body.board .wall{animation:none;
  background:linear-gradient(#4a3524,#2a1d13 62%,#170f09),
    repeating-linear-gradient(90deg,#00000047 0 3px,#0000 3px 84px,#ffffff0f 84px 86px)}
body.board .floor{background:linear-gradient(#2a2119,#0a0806)}
/* the boss comes with you, so his frame moves over and makes room */
body.board #stage{place-items:center start;padding-left:7vw}
body.board #frame{width:min(33vh,50vw);animation-duration:7s}
body.board #plate{background:linear-gradient(#cdb388,#6d5426);letter-spacing:.14em}

/* the long table they are sitting behind */
#boardroom .btable{position:absolute;left:44vw;right:-6vw;top:47vh;height:13vh;
  transform:rotateX(61deg) translateZ(-40px);transform-origin:top;
  background:linear-gradient(#7a552f,#4a3016 58%,#33200e);
  box-shadow:0 -12px 26px #0009,0 3px 0 #99733f inset}
#boardroom .btable::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 130% at 60% 100%,#ffcf8a1f,#0000 70%)}

/* seated at a little distance, on the right */
#boardroom .seat{position:absolute;width:min(21vh,25vw);text-align:center;
  transform-style:preserve-3d;transition:transform .3s}
#boardroom .seat svg{display:block;width:100%;filter:brightness(.74) saturate(.9);transition:filter .25s}
#boardroom .seat .tag{display:inline-block;margin-top:.6vh;padding:3px 9px;border-radius:3px;
  font:bold 9px/1.2 "Trebuchet MS",sans-serif;letter-spacing:.16em;white-space:nowrap;
  background:linear-gradient(#d9c393,#7a5f28);color:#251a05;box-shadow:0 4px 10px #0009}
#figChair{right:4.5vw;top:19vh;transform:translateZ(-130px)}
#figMd{right:23vw;top:25vh;transform:translateZ(-210px) scale(.9)}
#boardroom .seat.speaking svg{filter:brightness(1.14) saturate(1.05) drop-shadow(0 0 16px #ffd24a66)}
#boardroom .seat .mth{transform-box:fill-box;transform-origin:center}
#boardroom .seat.speaking .mth{animation:talk .26s linear infinite}
#boardroom .seat.flinch{animation:flinch .34s ease-out}
@keyframes flinch{0%,100%{transform:translateZ(var(--z,-130px))}
 30%{transform:translateZ(var(--z,-130px)) translateY(-1.6vh) rotate(-1.2deg)}
 60%{transform:translateZ(var(--z,-130px)) translateY(.5vh)}}
#figChair{--z:-130px}
#figMd{--z:-210px}
#figMd.flinch{animation:flinchMd .34s ease-out}
@keyframes flinchMd{0%,100%{transform:translateZ(-210px) scale(.9)}
 30%{transform:translateZ(-210px) scale(.9) translateY(-1.8vh) rotate(1.4deg)}
 60%{transform:translateZ(-210px) scale(.9) translateY(.6vh)}}

/* four men talking at once needs four places to put the words */
.bubble.chair{top:3.5vh;right:3vw;background:#fffdf5;color:#191512;border:3px solid var(--gold);
  box-shadow:0 14px 30px #000a}
.bubble.chair::before{content:"CHAIRMAN · ";color:#a3761a;font-weight:bold}
.bubble.chair::after{content:"";position:absolute;right:22px;bottom:-17px;border:9px solid #0000;
  border-top-color:var(--gold)}
.bubble.md{bottom:30vh;right:3vw;background:#eef3fd;color:#151d33;border:3px solid #5f7fbf;
  box-shadow:0 14px 30px #000a}
.bubble.md::before{content:var(--bossName,"BOSS") " · ";color:#3c5f9e;font-weight:bold}
.bubble.chair.yell{border-color:#e8a52a;box-shadow:0 0 0 5px #e8a52a33,0 14px 30px #000a}
.bubble.md.yell{border-color:#7fa3e8;box-shadow:0 0 0 5px #7fa3e833,0 14px 30px #000a}
body.board .bubble{max-width:min(31ch,31vw);font-size:clamp(12px,1.55vh,16px)}
body.board .bubble.boss{top:4vh;left:2.5vw;right:auto}
body.board .bubble.boss::before{content:"YOUR BOSS · ";color:#d33;font-weight:bold}
body.board .bubble.boss::after{left:auto;right:26px;bottom:-17px;
  border-right-color:#0000;border-top-color:#d33}
body.board .bubble.emp{bottom:13vh;left:2.5vw}

/* the fist comes down on the table instead of on a person */
#hand.table #gFist{display:block}
#hand.table #gPalm,#hand.table #gGlove{display:none}
#hand.table{animation:tableIn .42s ease-in}
@keyframes tableIn{0%{opacity:0;transform:translate(-50%,-56vh) translateZ(220px) rotate(9deg) scale(.88)}
 46%{opacity:1;transform:translate(-50%,-17vh) translateZ(300px) rotate(-2deg) scale(1.06)}
 62%{opacity:1;transform:translate(-50%,-20vh) translateZ(295px) rotate(0deg) scale(1)}
 100%{opacity:0;transform:translate(-50%,-56vh) translateZ(220px) scale(.88)}}
.act.tbl{background:linear-gradient(#8a6a3f,#4a3216)}

/* and when it is finally over, the room warms up */
body.board.ko .wall{background:linear-gradient(#6b4f31,#3a2818 62%,#1b120b),
  repeating-linear-gradient(90deg,#00000038 0 3px,#0000 3px 84px,#ffffff14 84px 86px)}
body.board.ko #boardroom .seat svg{filter:brightness(1) saturate(1)}
body.board.ko #rage{background:radial-gradient(120% 85% at 50% 40%,#ffd98a00 24%,#ffc45e3d 100%)}

/* ================= little bubbles rising off the floor ================= */
/* thick while it is all still bottled up, almost gone by the end */
#bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#bubbles i{position:absolute;bottom:-7%;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ffffffd9,#ffffff2e 44%,#ffffff0a 68%,#0000 71%);
  box-shadow:0 0 10px var(--acc,#fff) ,0 0 6px #ffffff40 inset;
  animation-name:rise;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform,opacity}
@keyframes rise{
  0%{transform:translate3d(0,0,0) scale(.65);opacity:0}
  14%{opacity:.8}
  72%{opacity:.5}
  100%{transform:translate3d(var(--drift,0),-112vh,0) scale(1.18);opacity:0}}

/* ================= a palette for each room ================= */
body.l1{--acc:#35c6d6;--acc2:#ffb347}
body.l2{--acc:#ff8a3d;--acc2:#ff3d84}
body.l3{--acc:#ff3b52;--acc2:#b44dff}
body.l4{--acc:#37c98f;--acc2:#f7c445}

body.l1 .wall{background:radial-gradient(122% 92% at 50% 16%,#4aa7bd 0%,#1f5570 44%,#0e1a28 100%),
  repeating-linear-gradient(90deg,#0000 0 58px,#ffffff12 58px 60px)}
body.l1 .floor{background:linear-gradient(#1e3f52,#070d13)}
body.l2 .wall{background:radial-gradient(122% 92% at 50% 16%,#ff9440 0%,#a8265e 42%,#2b0d22 100%),
  repeating-linear-gradient(90deg,#0000 0 58px,#ffffff12 58px 60px)}
body.l2 .floor{background:linear-gradient(#3a1626,#0d0407)}
body.l3 .wall{background:radial-gradient(122% 92% at 50% 16%,#ff4258 0%,#7d1c72 40%,#1b0618 100%),
  repeating-linear-gradient(90deg,#0000 0 58px,#ffffff12 58px 60px);
  animation:heat 2.2s ease-in-out infinite}
body.l3 .floor{background:linear-gradient(#3a1030,#0b0308)}
body.l4 .wall{animation:none;
  background:linear-gradient(#31775a,#1b4534 55%,#0c2118),
  repeating-linear-gradient(90deg,#00000047 0 3px,#0000 3px 84px,#ffffff1a 84px 86px)}
body.l4 .floor{background:linear-gradient(#23392c,#060b08)}

/* colour on the furniture, the frame and the comic hits */
body.l1 #frame{box-shadow:0 40px 60px #000a,0 0 34px #35c6d659,0 0 0 3px #00000055 inset}
body.l2 #frame{box-shadow:0 40px 60px #000a,0 0 40px #ff8a3d66,0 0 0 3px #00000055 inset}
body.l3 #frame{box-shadow:0 40px 60px #000a,0 0 48px #ff3b5273,0 0 0 3px #00000055 inset}
body.l1 #angerBar{background:linear-gradient(90deg,#ffd36b,#ff6f3d)}
body.l2 #angerBar{background:linear-gradient(90deg,#ffb03d,#ff2f5e)}
body.l3 #angerBar{background:linear-gradient(90deg,#ff8a3d,#c42fff)}
body.l4 #angerBar{background:linear-gradient(90deg,#f7c445,#37c98f)}
body.l1 #pow{color:#ffe98a;text-shadow:0 0 4px #000,5px 5px 0 #0f7f93,-3px -3px 0 #0f7f93}
body.l4 #pow{color:#eaffe9;text-shadow:0 0 4px #000,5px 5px 0 #1d6b4c,-3px -3px 0 #1d6b4c}
body.l4 #desk .top{background:linear-gradient(#8a6338,#5c3f22 55%,#412b16)}
body.l1 #clock{border-color:#1e5e6e}
body.l4 #clock{border-color:#1d5f45}

/* ================= level 4 with three men in the room ================= */
/* he came upstairs in person, so the frame stays empty and he sits down */
body.board #frame{display:none}
body.board #stage{place-items:center}
#boardroom .seat{width:min(28vh,32vw)}
#boardroom .fig{transform-style:preserve-3d}
#figChair{right:6vw;top:14vh;transform:translateZ(-70px)}
#figMd{right:33vw;top:20vh;transform:translateZ(-190px)}
#boardroom .btable{left:34vw;top:50vh;height:15vh;
  background:linear-gradient(#8a6338,#523618 58%,#36230f)}
/* flinch on the inner wrapper so it cannot fight with the depth transform */
#boardroom .seat.flinch,#figMd.flinch{animation:none}
#boardroom .seat.flinch .fig{animation:flinch .34s ease-out}
@keyframes flinch{0%,100%{transform:none}
 30%{transform:translateY(-1.7vh) rotate(-1.3deg)}60%{transform:translateY(.6vh)}}

/* labels: he is just the boss, under whatever name he has been given */
.bubble.boss::before{content:var(--bossName,"BOSS") " · ";color:#d33;font-weight:bold}
#plate{box-shadow:0 6px 14px #0007;border:0;cursor:pointer}
#plate:hover{filter:brightness(1.14)}
#plate:hover:not(:disabled),#plate:active:not(:disabled){
  transform:translateX(-50%) translateZ(6px);box-shadow:0 6px 14px #0007}
body.board .bubble.boss::before{content:none}
body.board .bubble.boss.floor::before{content:"THE ROOM · ";color:#ffd24a}
body.board .bubble.boss.floor{background:#241a06;color:#fff6de;border-color:#ffd24a;
  box-shadow:0 0 0 6px #ffd24a30,0 14px 30px #000a}
body.board .bubble.boss.floor::after{border-top-color:#ffd24a;border-right-color:#0000}

/* the ending keeps its warm light on top of the level palette */
body.l3.ko .wall{animation:none;
  background:radial-gradient(120% 90% at 50% 20%,#caa45e 0%,#4b2f22 42%,#120a0b 100%),
  repeating-linear-gradient(90deg,#0000 0 58px,#ffffff08 58px 60px)}
body.l4.ko .wall{background:linear-gradient(#4f9c76,#27604a 55%,#122b21),
  repeating-linear-gradient(90deg,#00000038 0 3px,#0000 3px 84px,#ffffff21 84px 86px)}
body.l4.ko #bubbles i{box-shadow:0 0 12px #f7c445,0 0 6px #ffffff40 inset}

/* ================= the release ================= */
/* the table bang, also contact-on-frame-zero */
#hand.table{animation:tableHit .22s ease-out}
@keyframes tableHit{
  0%{opacity:1;transform:translate(-50%,-19vh) translateZ(310px) scale(1.08)}
  100%{opacity:0;transform:translate(-50%,-54vh) translateZ(190px) rotate(6deg) scale(.84)}}

/* every fifth blow in a streak pops the counter */
#combo.burst{animation:comboBurst .34s cubic-bezier(.2,1.7,.3,1)}
@keyframes comboBurst{
  0%{transform:translate(-50%,0) translateZ(400px) scale(1)}
  40%{transform:translate(-50%,0) translateZ(400px) scale(1.55) rotate(-4deg)}
  100%{transform:translate(-50%,0) translateZ(400px) scale(1)}}

/* the moment your anger empties out */
#rage.gold{animation:goldFlash .7s ease-out}
@keyframes goldFlash{
  0%{opacity:.85;background:radial-gradient(120% 85% at 50% 55%,#fff3c400 12%,#ffd15ccc 100%)}
  100%{opacity:0;background:radial-gradient(120% 85% at 50% 55%,#fff3c400 12%,#ffd15ccc 100%)}}

/* and the level ending on a lifted note rather than a cliffhanger */
body.lifted .wall{animation:none;filter:brightness(1.3) saturate(1.15)}
body.lifted .floor{filter:brightness(1.25)}
body.lifted #frame{box-shadow:0 40px 60px #000a,0 0 60px #ffd15c8f,0 0 0 3px #00000055 inset}
body.lifted #bubbles i{box-shadow:0 0 14px #ffd15c,0 0 6px #ffffff55 inset}
body.lifted #reliefBar{box-shadow:0 0 16px #5ee08a}

/* the anger bar reads as YOURS now: full when he shouts, empty when you swing */
.meter b{transition:width .18s ease-out}
#angerBar{box-shadow:0 0 10px #ff6a3d66}
body.lifted #angerBar{box-shadow:none}

/* ================= lighting, so the room has some depth to it ================= */
#light{position:absolute;inset:0;pointer-events:none;z-index:4;
  background:
    radial-gradient(58% 42% at 50% 4%,#ffffff26 0,#ffffff00 62%),
    radial-gradient(36% 26% at 50% 74%,var(--acc,#fff) 0,#0000 70%),
    radial-gradient(128% 104% at 50% 46%,#0000 34%,#000000ad 100%);
  background-blend-mode:screen,soft-light,normal;mix-blend-mode:normal}
body.lifted #light{background:
    radial-gradient(60% 46% at 50% 2%,#fff6d94d 0,#ffffff00 64%),
    radial-gradient(40% 30% at 50% 72%,#ffd15c 0,#0000 72%),
    radial-gradient(128% 104% at 50% 46%,#0000 42%,#00000080 100%)}
/* a pool of light on the floor under him */
.floor::after{content:"";position:absolute;left:28%;right:28%;top:-4%;height:52%;
  background:radial-gradient(60% 100% at 50% 0%,#ffffff2e,#0000 72%);filter:blur(6px)}

/* ================= the floor plant =================
   It stands on the floor, set back behind the desk, and it is taller than the
   desk is — the pot sits at the desk line and the leaves reach well up the wall.
   Depth lives on the wrapper, the sway on the svg, so the two never fight. */
/* Six feet of dracaena standing in the open right quarter of the room, with the
   base of the pot down on the tiles. The desk stops short of it (see #desk),
   so this really is floor, not desk. Depth on the wrapper, sway on the svg. */
#bigPlant{position:absolute;right:2.5vw;bottom:13vh;height:64vh;
  transform:translateZ(0);pointer-events:none;
  filter:drop-shadow(-10px 16px 22px #000a)}
#bigPlant svg{display:block;height:100%;width:auto;transform-origin:50% 99%;
  animation:leafSway 8s ease-in-out infinite}
@keyframes leafSway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(.9deg)}}
#bigPlant.hitShake svg{animation:plantShake .55s ease-out}
@keyframes plantShake{0%,100%{transform:rotate(-1deg)}
 22%{transform:rotate(-3.6deg)}56%{transform:rotate(2.2deg)}}
body.plain #bigPlant{display:none}
/* upstairs the two men have the right-hand side, so it moves to the open left */
body.board #bigPlant{right:auto;left:3vw;bottom:13vh;height:60vh}
@media (max-width:820px){#bigPlant{right:-2vw;height:54vh}}

/* the desk stops short, leaving the right quarter as open floor for the pot */
#desk{right:27vw}
body.board #desk{right:-8vw;left:27vw}

/* ================= the fist lifting and coming down on the desk ================= */
#hand.table{animation:tableBang .3s cubic-bezier(.32,.9,.2,1)}
@keyframes tableBang{
  0%{opacity:.5;transform:translate(-50%,-26vh) translateZ(250px) rotate(-4deg) scale(.9)}
  20%{opacity:1;transform:translate(-50%,-48vh) translateZ(300px) rotate(-16deg) scale(1)}
  42%{opacity:1;transform:translate(-50%,-15vh) translateZ(340px) rotate(6deg) scale(1.12)}
  56%{opacity:1;transform:translate(-50%,-21vh) translateZ(325px) rotate(1deg) scale(1.04)}
  70%{opacity:1;transform:translate(-50%,-17vh) translateZ(330px) rotate(3deg) scale(1.07)}
  100%{opacity:0;transform:translate(-50%,-46vh) translateZ(250px) rotate(-8deg) scale(.9)}}

/* the desk takes it: shock ring, jolt, and everything on it jumps */
#shock{position:absolute;left:50%;top:76%;width:30vh;height:9vh;z-index:3;opacity:0;
  transform:translate(-50%,-50%);border-radius:50%;border:.5vh solid #fff;pointer-events:none;
  box-shadow:0 0 24px #fff6,0 0 40px var(--acc,#fff)}
#shock.go{animation:shockRing .5s ease-out}
@keyframes shockRing{0%{opacity:.95;transform:translate(-50%,-50%) scale(.16)}
 100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
#desk.jolt{animation:deskJolt .3s ease-out}
@keyframes deskJolt{0%,100%{transform:translateZ(60px)}
 24%{transform:translateZ(60px) translateY(-1.4vh)}62%{transform:translateZ(60px) translateY(.5vh)}}
#desk.jolt .papers{animation:paperJump .46s ease-out}
@keyframes paperJump{0%,100%{transform:rotateX(63deg) rotate(-3deg)}
 30%{transform:rotateX(63deg) rotate(-11deg) translateY(-3vh)}
 65%{transform:rotateX(63deg) rotate(1deg) translateY(.4vh)}}
#desk.jolt .mug{animation:mugJump .46s ease-out}
@keyframes mugJump{0%,100%{transform:none}
 26%{transform:translateY(-1.8vh) rotate(-9deg)}60%{transform:translateY(.3vh) rotate(3deg)}}
#desk.jolt .plant{animation:mugJump .5s ease-out}
#boardroom.jolt .btable{animation:btableJolt .32s ease-out}
@keyframes btableJolt{0%,100%{transform:rotateX(61deg) translateZ(-40px)}
 26%{transform:rotateX(61deg) translateZ(-40px) translateY(-1.6vh)}
 62%{transform:rotateX(61deg) translateZ(-40px) translateY(.5vh)}}

/* ================= bubbles: many more, and they boil when you are angry ================= */
#bubbles.surge i{animation-duration:1.9s !important}
#bubbles i{box-shadow:0 0 12px var(--acc,#fff),0 0 6px #ffffff4d inset}

/* ================= YOU WIN ================= */
.card.win{border-color:#ffd15c66;box-shadow:0 30px 70px #000,0 0 70px #ffd15c2e}
#winBanner{font:900 clamp(38px,9vh,86px)/.95 Impact,"Arial Black",sans-serif;letter-spacing:.05em;
  margin:0 0 6px;color:#ffe14d;-webkit-text-stroke:3px #7a3d05;
  text-shadow:0 0 18px #ffc84a,0 6px 0 #a85b06,0 12px 26px #000;
  animation:winPop .7s cubic-bezier(.2,1.8,.3,1),winGlow 2.2s ease-in-out .7s infinite}
@keyframes winPop{0%{opacity:0;transform:scale(.4) rotate(-7deg)}
 60%{opacity:1;transform:scale(1.12) rotate(2deg)}100%{transform:none}}
@keyframes winGlow{50%{text-shadow:0 0 40px #ffd15c,0 6px 0 #a85b06,0 12px 26px #000}}
#gameOver{font:900 clamp(17px,2.9vh,28px)/1 Impact,"Arial Black",sans-serif;letter-spacing:.3em;
  color:#ff7a4d;margin:18px 0 4px;text-shadow:0 2px 0 #6b1e05,0 0 22px #ff5b2e7a;
  animation:overBlink 1.4s steps(1,end) infinite}
@keyframes overBlink{50%{opacity:.45}}

/* ================= it is a file he slams, not a bare fist ================= */
#hand #gFile{display:none}
#hand.table #gFile{display:block}
#hand.table #gPalm,#hand.table #gFist,#hand.table #gGlove{display:none}
#hand.table{width:min(21vh,36vw)}

/* ================= the anger visibly rushing out of the room ================= */
#jets{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
#jets i{position:absolute;bottom:24%;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 34% 28%,#fff,#ffffff40 48%,#0000 72%);
  box-shadow:0 0 16px var(--acc,#fff);will-change:transform,opacity}
#jets i.fly{animation:jetUp .72s ease-out}
@keyframes jetUp{
  0%{opacity:.95;transform:translate(0,0) scale(.45)}
  70%{opacity:.7}
  100%{opacity:0;transform:translate(var(--jx,0),-76vh) scale(1.6)}}

/* the release readout on each round card */
#lvlStat{font:bold 13px/1.5 "Trebuchet MS",sans-serif;letter-spacing:.06em;color:#ffd15c;
  margin:12px 0 0}
#winStat{font:bold 14px/1.5 "Trebuchet MS",sans-serif;letter-spacing:.06em;color:#ffd15c;margin:10px 0 0}