/* ═══════════════════════════════════════════════
   game.css — room, HUD, sink, dishes, rack, floor
   ═══════════════════════════════════════════════ */

.stage{
  position:fixed;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .7s ease,visibility .7s;
  transform:translate3d(var(--shake),calc(var(--shake) * .6),0);
  will-change:transform;
}
.stage.live{opacity:1;visibility:visible}

/* ═══════════ ROOM ═══════════ */
.room{position:absolute;inset:0;overflow:hidden;z-index:0}

.room-wall{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 50% 22%,#233040 0%,#131b25 42%,#080c11 78%,#05070a 100%);
  filter:saturate(calc(1 - var(--chaos)*.55)) brightness(calc(1 - var(--chaos)*.3));
  transition:filter .8s ease;
}
.room-tiles{
  position:absolute;inset:0 0 34% 0;opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:clamp(38px,7vw,62px) clamp(38px,7vw,62px);
  mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
}
.room-window{
  position:absolute;top:6%;left:6%;
  width:clamp(90px,17vw,190px);height:clamp(110px,21vw,230px);
  border-radius:8px 8px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#0d1620,#060a0e);
  box-shadow:0 0 0 4px #0c1219,0 0 60px rgba(90,150,200,.09) inset;
}
.room-window::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 48%,#0c1219 48%,#0c1219 52%,transparent 52%),
             linear-gradient(180deg,transparent 48%,#0c1219 48%,#0c1219 52%,transparent 52%);
}
.window-glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 30%,rgba(150,200,255,.16),transparent 68%);
  animation:winFlicker 9s infinite;
}
@keyframes winFlicker{0%,93%,100%{opacity:1}94%{opacity:.2}95%{opacity:.9}98%{opacity:.35}}
.window-figure{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%) translateY(102%);
  width:44%;height:72%;
  background:radial-gradient(ellipse at 50% 22%,#0a0d10 0 42%,transparent 70%),
             linear-gradient(180deg,#080b0e,#04060899);
  border-radius:50% 50% 12% 12%/60% 60% 12% 12%;
  filter:blur(1px);opacity:0;transition:opacity .5s;
}
.window-figure.peek{opacity:.95;animation:peek 6s cubic-bezier(.3,0,.2,1)}
@keyframes peek{
  0%{transform:translateX(-50%) translateY(102%)}
  22%{transform:translateX(-50%) translateY(24%)}
  70%{transform:translateX(-52%) translateY(20%)}
  100%{transform:translateX(-50%) translateY(102%)}
}
.room-shadow{
  position:absolute;left:50%;bottom:16%;transform:translateX(-50%);
  width:min(78vw,760px);height:min(46vh,420px);
  background:radial-gradient(ellipse at 50% 60%,rgba(0,0,0,.92),transparent 70%);
  opacity:calc(var(--chaos)*.9);transition:opacity 1s;pointer-events:none;
}
.room-counter{
  position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,#1a222c,#0a0e13 60%,#05070a);
  box-shadow:0 -1px 0 rgba(255,255,255,.07);
}

/* ═══════════ HUD ═══════════ */
.hud{
  position:absolute;top:0;left:0;right:0;z-index:40;
  min-height:var(--hud-h);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(8px + env(safe-area-inset-top)) clamp(10px,3vw,22px) 8px;
  background:linear-gradient(180deg,rgba(4,6,10,.93),rgba(4,6,10,.55) 70%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  pointer-events:none;
}
.hud > *{pointer-events:auto}
.hud-group{display:flex;align-items:center;gap:clamp(6px,1.8vw,16px)}

.stat{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:5px clamp(8px,2.4vw,15px);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;min-width:clamp(60px,17vw,92px);
}
.stat-label{font-size:clamp(8.5px,2.2vw,11px);color:var(--muted);white-space:nowrap;letter-spacing:.02em}
.stat-value{font-size:clamp(15px,4.4vw,22px);font-weight:800;font-variant-numeric:tabular-nums}
.stat-bad .stat-value{color:var(--blood-red);text-shadow:0 0 14px rgba(255,45,63,.5)}
.stat.bump{animation:statBump .38s cubic-bezier(.2,1.6,.4,1)}
@keyframes statBump{0%{transform:scale(1)}35%{transform:scale(1.24)}100%{transform:scale(1)}}
.stat.glitchy .stat-value{animation:numGlitch .6s steps(2) infinite;color:var(--blood-red)}
@keyframes numGlitch{0%{transform:none}50%{transform:translate(2px,-1px) skewX(-8deg)}100%{transform:none}}

.chaos-meter{display:flex;align-items:center;gap:7px}
.chaos-label{font-size:clamp(9px,2.3vw,11px);color:var(--muted)}
.chaos-bar{
  width:clamp(52px,15vw,120px);height:8px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.1);
}
.chaos-bar i{
  display:block;height:100%;width:calc(var(--chaos)*100%);
  background:linear-gradient(90deg,#31ff8f,#ffc44d 55%,#ff2d3f);
  box-shadow:0 0 12px rgba(255,45,63,.55);
  transition:width .6s ease;
}

/* ═══════════ fake completion progress ═══════════ */
.progress-wrap{
  position:absolute;z-index:35;top:calc(var(--hud-h) + env(safe-area-inset-top) + 4px);
  left:50%;transform:translateX(-50%);
  width:min(88vw,460px);
  padding:7px 13px;border-radius:12px;
  background:rgba(6,10,14,.62);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.progress-text{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:clamp(10px,2.7vw,12.5px);color:#a9b8c4;margin-bottom:5px;
}
.progress-text b{font-variant-numeric:tabular-nums;color:var(--bile-green)}
.progress-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.progress-bar i{
  display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#0a7a3d,#31ff8f);
  box-shadow:0 0 14px rgba(49,255,143,.5);
  transition:width .55s cubic-bezier(.3,.9,.3,1);
}
.progress-wrap.taunt{animation:tauntShake .5s}
@keyframes tauntShake{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 8px))}75%{transform:translateX(calc(-50% + 8px))}}

/* ═══════════ SINK AREA ═══════════ */
.sink-area{
  position:absolute;z-index:10;
  left:50%;top:52%;
  transform:translate(-50%,-50%) scale(var(--stage-scale));
  width:min(96vw,860px);
  display:flex;flex-direction:column;align-items:center;
}

/* faucet */
.faucet{position:relative;width:min(58vw,300px);margin-bottom:-6px;z-index:12}
.faucet-svg{width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.faucet-handle{
  position:absolute;left:6%;top:52%;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px;min-width:64px;min-height:64px;
  transition:transform .18s;
}
.faucet-handle:active{transform:scale(.93)}
.handle-knob{
  width:clamp(34px,8vw,46px);height:clamp(34px,8vw,46px);border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#f2f7fa,#5d6a76 62%,#2b333c);
  box-shadow:0 0 0 3px #39434e,0 6px 16px rgba(0,0,0,.6),
             0 0 22px rgba(49,255,143,.0);
  display:grid;place-items:center;
  transition:transform .5s cubic-bezier(.3,1.4,.4,1),box-shadow .5s;
}
.handle-knob i{width:60%;height:4px;border-radius:2px;background:#232a32;display:block}
.handle-text{
  font-size:clamp(10px,2.7vw,13px);font-weight:700;white-space:nowrap;
  padding:3px 10px;border-radius:99px;
  background:rgba(49,255,143,.14);color:#8bffc4;
  border:1px solid rgba(49,255,143,.35);
  box-shadow:0 0 18px rgba(49,255,143,.2);
  animation:handlePulse 2s ease-in-out infinite;
}
@keyframes handlePulse{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.faucet-handle.on .handle-knob{transform:rotate(140deg);box-shadow:0 0 0 3px #39434e,0 6px 16px rgba(0,0,0,.6),0 0 26px rgba(110,190,255,.55)}
.faucet-handle.on .handle-text{
  background:rgba(255,45,63,.14);color:#ff9aa4;border-color:rgba(255,45,63,.4);
  box-shadow:0 0 18px rgba(255,45,63,.25);animation:none;
}

/* water */
/* spout outlet sits at 81% across / 40% down of the faucet svg's box
   (rect x=170..186, bottom y=60 in the 220×150 viewBox) */
.water-stream{
  position:absolute;top:38%;left:80.9%;
  transform:translateX(-50%);
  width:clamp(14px,3.4vw,22px);height:0;z-index:11;
  opacity:0;pointer-events:none;transition:opacity .5s;
}
.water-stream.on{opacity:1;height:calc(62% + clamp(80px,17vh,140px))}
.water-stream span{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100%;height:100%;border-radius:0 0 40% 40%;
  background:linear-gradient(180deg,rgba(190,235,255,.85),rgba(120,190,230,.35) 60%,rgba(120,190,230,0));
  filter:blur(1px);
  animation:streamWobble 1.1s linear infinite;
}
.water-stream span:nth-child(2){width:55%;opacity:.8;animation-duration:.72s;animation-delay:-.2s}
.water-stream span:nth-child(3){width:28%;opacity:.95;animation-duration:.5s;animation-delay:-.4s}
@keyframes streamWobble{
  0%{transform:translateX(-50%) scaleX(1) skewX(0deg)}
  50%{transform:translateX(-52%) scaleX(1.14) skewX(2.5deg)}
  100%{transform:translateX(-50%) scaleX(1) skewX(0deg)}
}
.water-stream.bad span{background:linear-gradient(180deg,rgba(255,80,80,.9),rgba(120,0,10,.45) 65%,transparent)}

/* sink body */
.sink{position:relative;width:min(92vw,620px);z-index:10}
.sink-rim{
  height:clamp(14px,3vw,22px);border-radius:16px 16px 0 0;
  background:linear-gradient(180deg,#eef4f8,#9fadb9 55%,#6a7783);
  box-shadow:0 -2px 18px rgba(160,210,255,.14),0 3px 10px rgba(0,0,0,.55);
}
.sink-basin{
  position:relative;height:clamp(150px,30vh,268px);overflow:hidden;
  border-radius:0 0 26px 26px;
  background:
    radial-gradient(120% 90% at 50% -10%,#4a5966 0%,#28323d 45%,#151d26 100%);
  box-shadow:inset 0 14px 34px rgba(0,0,0,.75),inset 0 -18px 30px rgba(0,0,0,.55),
             0 22px 46px rgba(0,0,0,.6);
}
.sink-basin::after{ /* rim light */
  content:"";position:absolute;inset:0;border-radius:0 0 26px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 22%);
  pointer-events:none;
}
.basin-water{
  position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(180deg,rgba(120,200,240,.42),rgba(20,70,110,.6));
  box-shadow:inset 0 6px 18px rgba(255,255,255,.16);
  transition:height .8s cubic-bezier(.3,.9,.3,1),background 1.2s;
  pointer-events:none;
}
.basin-water::before{
  content:"";position:absolute;top:-6px;left:0;right:0;height:12px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 10px,transparent 10px 22px);
  filter:blur(2px);animation:ripple 3.4s linear infinite;
}
@keyframes ripple{to{transform:translateX(-22px)}}
.basin-water.tainted{background:linear-gradient(180deg,rgba(160,20,30,.55),rgba(50,0,6,.75))}
.basin-reflection{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(ellipse at 50% 78%,rgba(160,220,255,.14),transparent 62%);
  transition:opacity .8s;
}
.basin-reflection.on{opacity:calc(.35 + var(--chaos)*.5)}
.drain{
  position:absolute;left:50%;bottom:clamp(10px,2.5vh,20px);transform:translateX(-50%);
  width:clamp(38px,9vw,58px);height:clamp(12px,2.6vw,18px);
  border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#0a0d11,#000);
  box-shadow:0 0 0 3px #4d5964,inset 0 3px 8px #000;
}
.drain i{
  position:absolute;inset:22% 12%;border-radius:50%;
  background:repeating-linear-gradient(90deg,#3a444e 0 3px,transparent 3px 7px);
}
.drain.clogged{box-shadow:0 0 0 3px #7a3a18,inset 0 3px 8px #000,0 0 18px rgba(255,120,40,.5)}

.dish-layer,.splash-layer{position:absolute;inset:0;pointer-events:none}
.dish-layer{pointer-events:auto}
.splash-layer{overflow:hidden}

.sink-front{
  height:clamp(16px,3.4vw,26px);margin-top:-4px;border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,#2c3541,#141a22);
  box-shadow:0 12px 26px rgba(0,0,0,.65);
}

/* ═══════════ DISHES ═══════════ */
.dish{
  position:absolute;
  width:var(--w);height:var(--h);
  left:0;top:0;
  transform:translate3d(var(--x),var(--y),0) rotate(var(--r,0deg)) scale(var(--s,1));
  transform-origin:50% 50%;
  will-change:transform;
  cursor:grab;touch-action:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));
}
.dish.held{cursor:grabbing;z-index:30;filter:drop-shadow(0 16px 22px rgba(0,0,0,.75)) brightness(1.08)}
.dish.settling{transition:transform .45s cubic-bezier(.25,1.2,.4,1)}
.dish svg{width:100%;height:100%;overflow:visible;pointer-events:none}
.dish .grime{transition:opacity .18s linear}
.dish .sheen{opacity:0;transition:opacity .5s}
.dish.clean .sheen{opacity:1;animation:sheenSweep 1.6s ease-out}
@keyframes sheenSweep{0%{transform:translateX(-60%);opacity:0}40%{opacity:.9}100%{transform:translateX(60%);opacity:.35}}
.dish.clean{filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(150,230,255,.5))}
.dish.slipping{pointer-events:none;z-index:60;filter:drop-shadow(0 20px 24px rgba(0,0,0,.8))}
.dish.falling{position:fixed;z-index:70}

/* a clean dish is waiting to be carried to the rack */
.dish.clean.ready{animation:readyBob 1.6s ease-in-out infinite}
@keyframes readyBob{
  0%,100%{filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(150,230,255,.45))}
  50%{filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(150,230,255,.95))}
}
/* lifted out of the basin, following the pointer in page space */
.dish.carried{
  position:fixed;z-index:68;pointer-events:none;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(150,230,255,.6));
}

.dish-ring{ /* pickup feedback */
  position:absolute;border-radius:50%;border:2px solid rgba(150,230,255,.6);
  pointer-events:none;animation:dishRing .5s ease-out forwards;
}
@keyframes dishRing{from{transform:scale(.4);opacity:.9}to{transform:scale(1.5);opacity:0}}

/* scrub meter around a held dish */
.scrub-ring{
  position:fixed;z-index:65;pointer-events:none;width:86px;height:86px;
  margin:-43px 0 0 -43px;
}
.scrub-ring circle{fill:none;stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.scrub-ring .bg{stroke:rgba(255,255,255,.14)}
.scrub-ring .fg{stroke:#7de8ff;filter:drop-shadow(0 0 6px #7de8ff);transition:stroke-dashoffset .1s linear}

/* ═══════════ RACK ═══════════ */
.rack{
  position:relative;margin-top:clamp(8px,2vh,18px);
  width:min(92vw,620px);min-height:clamp(52px,10vh,84px);
  border-radius:14px;padding:6px 10px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
}
/* drop-target states while a dish is being carried */
.rack{transition:border-color .25s,box-shadow .25s,background .25s}
.rack.armed{
  border-color:rgba(49,255,143,.4);
  background:linear-gradient(180deg,rgba(49,255,143,.09),rgba(49,255,143,.02));
  box-shadow:0 0 24px rgba(49,255,143,.16) inset;
}
.rack.hot{
  border-color:rgba(49,255,143,.85);
  background:linear-gradient(180deg,rgba(49,255,143,.2),rgba(49,255,143,.05));
  box-shadow:0 0 34px rgba(49,255,143,.4),0 0 40px rgba(49,255,143,.22) inset;
  animation:rackHot .7s ease-in-out infinite;
}
@keyframes rackHot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.rack.reject{
  border-color:rgba(255,45,63,.8);
  background:linear-gradient(180deg,rgba(255,45,63,.16),rgba(255,45,63,.03));
  box-shadow:0 0 30px rgba(255,45,63,.32);
  animation:rackNo .3s linear 2;
}
@keyframes rackNo{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.rack.armed .rack-bars,.rack.hot .rack-bars{
  background:repeating-linear-gradient(90deg,rgba(139,255,196,.55) 0 2px,transparent 2px 12px);
}

.rack-label{
  position:absolute;top:-10px;right:14px;font-size:clamp(9px,2.4vw,11px);
  color:var(--muted);background:var(--ink-2);padding:1px 9px;border-radius:99px;
  border:1px solid rgba(255,255,255,.09);
}
.rack-slots{display:flex;gap:5px;align-items:flex-end;justify-content:center;flex-wrap:wrap;min-height:clamp(38px,7.5vh,64px)}
.rack-dish{
  width:clamp(24px,6vw,40px);height:clamp(30px,7vw,46px);
  animation:rackPop .45s cubic-bezier(.2,1.5,.4,1);
  filter:drop-shadow(0 0 8px rgba(150,230,255,.35));
}
.rack-dish.leaving{animation:rackFall .6s ease-in forwards}
@keyframes rackPop{0%{transform:translateY(-26px) scale(.6) rotate(-18deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes rackFall{to{transform:translateY(90px) rotate(70deg);opacity:0}}
.rack-bars{
  position:absolute;left:10px;right:10px;bottom:6px;height:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 12px);
  border-radius:2px;
}

/* ═══════════ FLOOR / DEBRIS ═══════════ */
.floor{position:absolute;inset:auto 0 0 0;height:26%;z-index:5;pointer-events:none}
.debris-layer{position:absolute;inset:0}
.shard{
  position:absolute;pointer-events:none;
  background:linear-gradient(150deg,#fff,#b8c7d2 45%,#7c8b98);
  box-shadow:0 2px 4px rgba(0,0,0,.55);
  will-change:transform,opacity;
}
.shard.dirty{background:linear-gradient(150deg,#e2d9c6,#a99e88 45%,#6c6455)}
.shard.bloody{background:linear-gradient(150deg,#ffdada,#c05a5a 45%,#6b1620)}
.debris{position:absolute;opacity:.85;transition:opacity 1s}

.dust-puff{
  position:fixed;width:10px;height:10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.7),transparent 70%);
  animation:puff .6s ease-out forwards;
}
@keyframes puff{to{transform:scale(6);opacity:0}}

/* ═══════════ HINT ═══════════ */
.hint{
  position:absolute;left:50%;bottom:calc(9% + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:30;
  padding:8px 18px;border-radius:99px;font-size:clamp(11px,3vw,14px);
  background:rgba(6,10,14,.72);border:1px solid rgba(255,255,255,.1);
  color:#b9c7d2;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:opacity .5s,transform .5s;
}
.hint.hide{opacity:0;transform:translateX(-50%) translateY(14px)}
.hint.alarm{color:#ffb3ba;border-color:rgba(255,45,63,.4);background:rgba(30,4,8,.8);
  box-shadow:0 0 24px rgba(255,45,63,.28)}

/* ═══════════ SUDS / SPLASH particles ═══════════ */
.sud{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95),rgba(190,225,245,.35) 60%,transparent);
  box-shadow:0 0 6px rgba(255,255,255,.35);
  will-change:transform,opacity;
}
.droplet{
  position:absolute;border-radius:50% 50% 55% 55%;pointer-events:none;
  background:linear-gradient(180deg,rgba(220,245,255,.95),rgba(120,190,230,.5));
  will-change:transform,opacity;
}

/* ═══════════ PAGE-SPACE PARTICLES ═══════════ */
.spark{
  position:absolute;pointer-events:none;will-change:transform,opacity;
  background:
    radial-gradient(circle,rgba(255,255,255,.95) 0 18%,transparent 60%),
    conic-gradient(from 0deg,transparent 0 42%,rgba(190,240,255,.9) 48% 52%,transparent 58% 92%,rgba(190,240,255,.9) 96% 100%);
  filter:drop-shadow(0 0 6px rgba(160,230,255,.9));
}
.steam-puff{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.5),rgba(200,230,245,.12) 60%,transparent 72%);
  filter:blur(3px);will-change:transform,opacity;
}
.shockwave{
  position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  pointer-events:none;border:2px solid rgba(200,240,255,.85);
  box-shadow:0 0 18px rgba(160,225,255,.6),inset 0 0 12px rgba(160,225,255,.45);
  animation:shockOut .58s cubic-bezier(.16,.8,.3,1) forwards;
}
.shockwave.bad{border-color:rgba(255,120,130,.9);box-shadow:0 0 20px rgba(255,60,80,.6)}
@keyframes shockOut{
  0%{transform:scale(.3);opacity:.95;border-width:3px}
  100%{transform:scale(14);opacity:0;border-width:1px}
}
.float-text{
  position:absolute;pointer-events:none;font-weight:800;font-style:normal;
  font-size:clamp(13px,3.6vw,19px);white-space:nowrap;transform:translateX(-50%);
  text-shadow:0 2px 10px rgba(0,0,0,.8);color:#dff1ff;
  animation:floatUp 1.1s cubic-bezier(.2,.9,.3,1) forwards;
}
.float-text.good{color:#8bffc4;text-shadow:0 0 14px rgba(49,255,143,.55),0 2px 8px rgba(0,0,0,.8)}
.float-text.bad{color:#ff9aa4;text-shadow:0 0 14px rgba(255,45,63,.5),0 2px 8px rgba(0,0,0,.8)}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,6px) scale(.7)}
  22%{opacity:1;transform:translate(-50%,-8px) scale(1.12)}
  100%{opacity:0;transform:translate(-50%,-58px) scale(1)}
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:520px){
  .sink-area{top:53%;width:98vw}
  .rack{min-height:46px}
  .stat{min-width:56px;padding:4px 7px}
  .chaos-label{display:none}
  .progress-wrap{width:94vw;padding:5px 10px}
}
@media (max-width:380px){
  .stat:nth-child(2){display:none}
  .hint{font-size:10.5px;padding:6px 12px}
}
@media (orientation:landscape) and (max-height:520px){
  .sink-area{top:56%;transform:translate(-50%,-50%) scale(calc(var(--stage-scale)*.78))}
  .progress-wrap{width:min(56vw,380px)}
  .hint{bottom:calc(3% + env(safe-area-inset-bottom))}
  .rack{display:none}
}
@media (min-height:900px){
  .sink-basin{height:clamp(180px,32vh,300px)}
}