*{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);
  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)}}

/* ---------- 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{display:none}
#hand.punch #gFist{display:block}
#hand.punch #gPalm{display:none}
#hand.punch{animation:punchIn .6s ease-in}
#hand.slap{animation:slapIn .6s ease-in}
@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)}}

/* ---------- 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-weight:bold;color:var(--gold)}

.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}

#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}}