/* THE BATHMAN — desktop only. Safe-area px = 1536x864, scaled by --s. */
@font-face{font-family:'Bangers';src:url('assets/fonts/Bangers.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo Black';src:url('assets/fonts/ArchivoBlack.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#0b1018; --foam:#f4f8fb; --sig:#ffd23f; --sig2:#fff3b0; --slate:#34465f;
  --wall:#2a3a52; --s:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#24324a}
body{font-family:'Archivo Black',Arial,sans-serif;color:var(--foam);-webkit-font-smoothing:antialiased}

img{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

#bleed{position:fixed;z-index:0;pointer-events:none;user-select:none;-webkit-user-drag:none}

#viewport{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:1}
#stage{position:absolute;width:1536px;height:864px;transform-origin:0 0;will-change:transform}
#shake{position:absolute;left:0;top:0;width:1536px;height:864px;will-change:transform;isolation:isolate}
#shake>*{position:absolute}
.full{left:0;top:0;width:1536px;height:864px}

/* ---- layers ---- */
#steam{left:-660px;top:-160px;width:1580px;height:800px;opacity:0;pointer-events:none;overflow:visible;z-index:1}
.steam-blobs{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:50% 50%}
#steam.live .steam-blobs{animation:steamDrift 10s ease-in-out infinite alternate}
.steam-blobs i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(223,232,241,.9),rgba(223,232,241,0))}
@keyframes steamDrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-3%,-2.5%) scale(1.05)}
}
body.reduced #steam.live .steam-blobs{animation:none}

#signal{left:105px;top:150px;width:300px;height:300px;opacity:0;transition:opacity .3s linear;pointer-events:none;overflow:visible;z-index:2}
#signal.on{opacity:1}

.foam-layer{left:0;top:0;width:1536px;height:864px;pointer-events:none}
#foamBack{z-index:3}
#bathman{z-index:4}
#foamFront{z-index:5}
#bubbles{z-index:6}
#water{z-index:7}
#caption{z-index:8}
#hud{z-index:9}
.foam{position:absolute;transform-origin:50% 50%}
.foam .foam-img{width:100%;height:auto;transform-origin:50% 50%}
@keyframes foamBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.foam .foam-img.breathe{animation:foamBreathe 2.4s ease-in-out infinite}

#bubbles{left:0;top:0;width:1536px;height:864px;pointer-events:none}
.bubble{position:absolute;border-radius:50%;background:#fff;border:2px solid var(--ink);will-change:transform,opacity}
.bubble::after{content:"";position:absolute;left:18%;top:16%;width:30%;height:30%;border-radius:50%;background:#dceaf6}

#water{left:0;top:0;width:1536px;height:864px;pointer-events:none;opacity:0}

#caption{left:86px;top:478px;font-family:'Bangers',cursive;font-size:76px;line-height:1;letter-spacing:3px;color:var(--sig);
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink);
  transform:rotate(-3deg);transform-origin:0 50%;opacity:0;transition:opacity .3s linear;pointer-events:none;white-space:nowrap}
#caption.on{opacity:1}

/* ---- safe-area UI ---- */
#hud{left:123px;top:600px;width:360px}
.meter{display:flex;align-items:center;gap:10px;font-size:16px;margin-bottom:12px;text-shadow:2px 2px 0 var(--ink)}
.meter #clean{white-space:nowrap}
.bar{flex:1;height:18px;border:3px solid var(--ink);background:#1b2638;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.bar i{display:block;height:100%;width:0%;background:repeating-linear-gradient(-45deg,#fff 0 8px,#d9e6f1 8px 16px)}
#cta{width:100%;height:84px;font-family:'Bangers',cursive;font-size:42px;letter-spacing:2px;color:var(--ink);
  background:var(--sig);border:5px solid var(--ink);box-shadow:7px 7px 0 var(--ink);transition:box-shadow .08s,transform .08s,opacity .2s}
#cta:disabled{opacity:.55;cursor:default}
#cta.pressed,#cta:not(:disabled):active{box-shadow:2px 2px 0 var(--ink);transform:translate(5px,5px)}
#cta.breathe{animation:ctaBreathe 1.6s ease-in-out infinite}
@keyframes ctaBreathe{0%,100%{box-shadow:7px 7px 0 var(--ink)}50%{box-shadow:11px 11px 0 var(--ink)}}
body.reduced #cta.breathe{animation:none}
.status{margin-top:16px;font-size:15px;line-height:20px;height:20px;color:var(--sig2);text-shadow:2px 2px 0 var(--ink)}

/* ---- header (viewport-fixed) ---- */
#header{position:fixed;left:0;right:0;top:0;z-index:50;height:max(56px,calc(84px * var(--s)));
  display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,1.7vw,40px)}
.brand{display:flex;align-items:center;gap:calc(14px * var(--s))}
.logo{font-family:'Bangers',cursive;font-size:max(26px,calc(44px * var(--s)));letter-spacing:2px;line-height:1;
  -webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.chip{font-size:max(11px,calc(15px * var(--s)));letter-spacing:1px;background:var(--sig);color:var(--ink);
  border:3px solid var(--ink);padding:calc(4px * var(--s)) calc(10px * var(--s));box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.links{position:relative;display:flex;align-items:center;gap:calc(12px * var(--s))}
.lnk{display:inline-flex;align-items:center;justify-content:center;font-size:max(11px,calc(15px * var(--s)));
  letter-spacing:.5px;color:var(--ink);background:var(--foam);border:3px solid var(--ink);
  padding:calc(9px * var(--s)) calc(16px * var(--s));box-shadow:4px 4px 0 var(--ink);line-height:1;white-space:nowrap}
.lnk.ca{background:#9fb4c9}
.lnk.sound{padding:calc(8px * var(--s)) calc(10px * var(--s))}
.ico{width:max(16px,calc(22px * var(--s)));height:max(16px,calc(22px * var(--s)));display:block}
#sound .ico-off{display:none}
#sound.muted .ico-on{display:none}
#sound.muted .ico-off{display:block}
.lnk.disabled{opacity:.45;cursor:default;pointer-events:none}
#copy-feedback{position:absolute;right:0;top:100%;margin-top:8px;font-size:13px;letter-spacing:.5px;color:var(--sig2);
  text-shadow:2px 2px 0 var(--ink);opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}
#copy-feedback.show{opacity:1}