:root{--ink:#effaff;--muted:#a9c8d8;--cyan:#83edff;--purple:#a779ff;--glass:rgba(8,18,39,.68);--line:rgba(178,232,255,.18)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#08091b;color:var(--ink);font-family:"DM Sans",sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit}#game{position:relative;width:100vw;height:100vh;min-height:620px;overflow:hidden;background:#071323}.room{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}.glow{position:absolute;z-index:2;inset:0;background:radial-gradient(circle at 35% 48%,rgba(37,225,255,.12),transparent 38%),radial-gradient(circle at 67% 8%,rgba(155,66,255,.16),transparent 34%),linear-gradient(180deg,rgba(12,5,33,.03),rgba(7,4,24,.16));pointer-events:none;animation:light-breathe 6s ease-in-out infinite alternate}.light-sweep{position:absolute;z-index:2;left:-25%;top:13%;width:90%;height:56%;background:linear-gradient(105deg,transparent 25%,rgba(143,245,255,.08) 48%,transparent 67%);mix-blend-mode:screen;animation:sweep 13s ease-in-out infinite;pointer-events:none}#tank{position:absolute;z-index:3;left:2.3%;top:17%;width:62.2%;height:47%;filter:drop-shadow(0 8px 12px rgba(0,44,90,.25));transition:filter .3s}#tank.feeding{filter:drop-shadow(0 0 28px rgba(118,255,216,.8))}.glass{background:linear-gradient(135deg,rgba(6,18,37,.8),rgba(22,16,52,.62));border:1px solid var(--line);box-shadow:0 12px 35px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(18px)}.hud{position:absolute;z-index:5;left:2%;right:2%;top:2.2%;height:76px;border-radius:21px;display:flex;align-items:center;padding:10px 14px 10px 18px;gap:16px}.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#31d7e8,#7658f8);font-size:28px;box-shadow:0 0 26px rgba(53,228,255,.35)}.brand b{display:block;font:600 21px Fredoka}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.stats{display:flex;align-items:center;gap:14px;padding:0 13px}.stats span{text-align:center}.stats b{display:block;font:600 20px Fredoka}.stats small{display:block;text-transform:uppercase;font-size:8px;letter-spacing:.15em;color:var(--muted)}.stats i{height:27px;border-left:1px solid var(--line)}.primary{border:0;border-radius:12px;background:linear-gradient(135deg,#5a70ff,#9b55e9);padding:13px 21px;font-weight:700;box-shadow:0 7px 22px rgba(93,72,245,.32);transition:.2s transform,.2s filter}.primary:hover{transform:translateY(-2px);filter:brightness(1.08)}.icon-btn{width:43px;height:43px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05);font-size:20px}.icon-btn.muted{opacity:.55;text-decoration:line-through}.care{position:absolute;z-index:4;left:3%;bottom:4%;min-width:380px;padding:14px 16px;border-radius:18px;display:flex;align-items:center;gap:12px}.care-icon{width:39px;height:39px;border-radius:12px;background:rgba(73,221,186,.14);display:grid;place-items:center;color:#65f0c5;font-size:22px}.care b,.care small{display:block}.care small{font-size:10px;color:var(--muted);margin-top:3px}.care button{margin-left:auto;background:rgba(61,221,181,.11);border:1px solid rgba(91,246,208,.25);border-radius:10px;padding:10px 13px;font-size:11px;font-weight:700}.care button span{color:#65f0c5}.now{position:absolute;right:3%;bottom:4%;z-index:4;border-radius:15px;padding:10px 15px;display:flex;align-items:center;gap:11px}.now small,.now b{display:block}.now small{font-size:7px;letter-spacing:.18em;color:#8cb7cb}.now b{font-size:11px;margin-top:3px}.equalizer{display:flex;gap:2px;align-items:end;height:19px}.equalizer i{display:block;width:2px;background:#a774ff;animation:eq .8s ease-in-out infinite alternate}.equalizer i:nth-child(2){height:17px;animation-delay:.2s}.equalizer i:nth-child(1){height:9px}.equalizer i:nth-child(3){height:13px;animation-delay:.4s}@keyframes eq{to{height:4px}}.help{position:absolute;z-index:5;right:2%;top:104px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--glass)}#bubbles{position:absolute;z-index:3;left:2%;top:16%;width:62%;height:48%;overflow:hidden;pointer-events:none}.bubble{position:absolute;bottom:-12px;border:1px solid rgba(218,250,255,.45);border-radius:50%;animation:rise linear infinite}@keyframes rise{to{transform:translateY(-52vh) translateX(18px);opacity:0}}@keyframes light-breathe{to{opacity:.72}}@keyframes sweep{0%,100%{transform:translateX(-20%);opacity:.2}50%{transform:translateX(85%);opacity:.75}}
.start-screen{position:absolute;z-index:30;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 34% 42%,rgba(12,160,188,.18),transparent 33%),linear-gradient(90deg,rgba(4,8,23,.8),rgba(6,5,20,.28));backdrop-filter:blur(4px);transition:.8s opacity,.8s visibility}.start-screen.gone{opacity:0;visibility:hidden}.start-card{width:min(500px,88vw);margin-right:36%;padding:46px;border-left:1px solid rgba(143,238,255,.34);text-shadow:0 3px 24px #050715}.start-kicker{font-size:9px;letter-spacing:.32em;color:#77e7df}.start-card h1{font:600 clamp(50px,7vw,94px)/.82 Fredoka;margin:20px 0}.start-card h1 em{font-style:normal;color:#8bcfff;text-shadow:0 0 36px rgba(115,132,255,.7)}.start-card p{max-width:420px;color:#c3d9e3;line-height:1.7;font-size:13px}.start-button{display:flex;align-items:center;gap:13px;margin-top:28px;padding:15px 23px;border:1px solid rgba(172,239,255,.4);border-radius:14px;background:linear-gradient(135deg,rgba(59,205,211,.9),rgba(101,76,225,.95));font-weight:700;box-shadow:0 12px 40px rgba(45,116,223,.4)}.start-button span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(255,255,255,.18);font-size:9px}.start-card small{display:block;margin-top:14px;color:#769bad;font-size:9px}
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:none}dialog::backdrop{background:radial-gradient(circle at 70% 20%,rgba(81,43,134,.32),transparent 35%),rgba(4,7,20,.94);backdrop-filter:blur(24px) saturate(.6)}#studio{width:min(1180px,94vw)}.studio-card{display:grid;grid-template-columns:310px 1fr;min-height:650px;border-radius:25px;overflow:hidden;background:linear-gradient(120deg,#183d43,#17102f 43%,#0d2632);border:1px solid rgba(176,225,255,.2);box-shadow:0 35px 100px #03030a}.studio-copy{position:relative;padding:42px 30px;background:radial-gradient(circle at 20% 10%,rgba(80,238,216,.15),transparent 45%),linear-gradient(180deg,rgba(24,74,75,.38),rgba(16,13,39,.2));border-right:1px solid var(--line)}.close{position:absolute;right:18px;top:15px;border:0;background:transparent;font-size:26px;opacity:.65}.eyebrow{font-size:9px;letter-spacing:.25em;color:#6ce0c1;font-weight:700}.studio-copy h1{font:600 43px/1.02 Fredoka;margin:22px 0 14px}.studio-copy p{color:#a8c4d0;font-size:13px;line-height:1.7}.tip{margin-top:31px;padding:16px;border-radius:14px;background:rgba(12,13,36,.45);border:1px solid var(--line)}.tip b,.tip span{display:block}.tip b{font:500 14px Fredoka;color:#82efd8}.tip span{font-size:10px;line-height:1.5;margin-top:6px;color:#a9c6d0}.legend{position:absolute;left:30px;right:30px;bottom:38px;display:flex;align-items:center;gap:8px}.legend span{font-size:9px;color:#9ab5c1}.legend i{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:rgba(112,235,211,.16);font-style:normal;margin:auto auto 5px}.legend em{flex:1;border-top:1px dashed rgba(150,213,220,.22)}.drawing-panel{padding:28px;display:flex;flex-direction:column;gap:14px}.tools{height:54px;border-radius:13px;background:rgba(4,10,28,.45);border:1px solid var(--line);display:flex;align-items:center;padding:7px;gap:6px}.tools button,.tool,.color-custom{border:0;background:transparent;border-radius:8px;min-width:36px;height:36px;display:grid;place-items:center}.tool.active{background:linear-gradient(135deg,#72e9d8,#4d98cf);color:#09252b}.size{font-size:7px;letter-spacing:.12em;color:#8aa9b6;margin:0 8px;display:flex;align-items:center;gap:5px}.size input{width:80px;accent-color:#6adbcf}.colors{display:flex;gap:6px}.swatch{width:22px!important;min-width:22px!important;height:22px!important;border-radius:50%!important;border:2px solid transparent!important}.swatch.active{outline:2px solid white;outline-offset:2px}.color-custom{position:relative;border:1px dashed #6d8292!important;width:25px!important;min-width:25px!important;height:25px!important;overflow:hidden}.color-custom input{position:absolute;opacity:0}.paper{position:relative;flex:1;min-height:425px;border-radius:12px;background-color:#eef9f4;background-image:linear-gradient(rgba(33,83,91,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(33,83,91,.045) 1px,transparent 1px);background-size:22px 22px;overflow:hidden;box-shadow:inset 0 0 35px rgba(32,74,74,.14)}#drawing{width:100%;height:100%;touch-action:none;display:block}.paper-tip{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#63858c;font-size:8px;letter-spacing:.1em;pointer-events:none}.release-row{display:flex;gap:14px;align-items:end}.release-row label{flex:1}.release-row label span{display:block;font-size:8px;letter-spacing:.16em;color:#91adba;margin-bottom:6px}.release-row input{width:100%;padding:12px 13px;background:rgba(3,10,25,.42);color:white;border:1px solid var(--line);border-radius:10px;outline:0}.release-row input:focus{border-color:#70dccc}.release-row button{white-space:nowrap}#message{height:18px;text-align:right;color:#82efd8;font-size:11px}.help-card{position:relative;width:min(480px,90vw);padding:35px;border-radius:22px;background:#101b35;border:1px solid var(--line);box-shadow:0 30px 90px #000}.help-card h2{font:600 29px Fredoka}.help-card p{color:#aac4d2;line-height:1.7;font-size:13px}#toast{position:fixed;z-index:40;left:50%;bottom:24px;transform:translate(-50%,30px);padding:12px 18px;border-radius:12px;background:rgba(8,25,37,.9);border:1px solid rgba(112,238,214,.3);opacity:0;transition:.25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:800px){.hud{height:65px}.brand small,.stats{display:none}.brand b{font-size:17px}.primary{padding:11px 13px}.care{min-width:0;left:2%;right:2%;bottom:2%}.now{display:none}.start-card{margin:0;padding:30px}.studio-card{display:block;min-height:0}.studio-copy{padding:24px}.studio-copy h1{font-size:28px;margin:12px 0}.studio-copy p,.legend{display:none}.tip{margin-top:10px}.drawing-panel{padding:12px}.paper{min-height:45vh}.tools{overflow-x:auto}.size{display:none}#studio{width:96vw}.release-row{align-items:stretch;flex-direction:column}}@media(prefers-reduced-motion:reduce){.glow,.rain-drop,.bubble,.equalizer i{animation:none!important}}

/* Interactive room and camera */
.camera-stage{position:absolute;inset:0;transform-origin:34% 42%;transition:transform 1.05s cubic-bezier(.2,.8,.2,1),filter .7s;will-change:transform}.tank-focus .camera-stage{transform:scale(1.3)}.wide-view{position:absolute;z-index:12;left:50%;top:104px;transform:translate(-50%,-12px);border-radius:12px;padding:10px 15px;color:#dffaff;opacity:0;visibility:hidden;transition:.35s;border:1px solid var(--line)}.tank-focus .wide-view{opacity:1;visibility:visible;transform:translate(-50%,0)}.scene-hotspot{position:absolute;z-index:9;border:1px solid transparent;background:transparent;border-radius:45%;opacity:0;transition:.25s opacity,.25s border-color,.25s background}.scene-hotspot:hover,.scene-hotspot:focus-visible{opacity:1;border-color:rgba(159,240,255,.58);background:radial-gradient(circle,rgba(107,224,255,.16),transparent 67%);outline:0}.scene-hotspot span{position:absolute;left:50%;bottom:0;transform:translate(-50%,120%);padding:5px 9px;border-radius:8px;background:rgba(3,15,31,.82);font-size:8px;letter-spacing:.1em;white-space:nowrap}.girl-spot{left:74%;top:27%;width:23%;height:65%}.cat-spot{left:52%;top:39%;width:12%;height:36%}.lights-spot{left:2%;top:8%;width:64%;height:13%;border-radius:8px}.lights-flicker .glow,.lights-flicker .light-sweep{animation:light-flicker .82s steps(1) both}.lights-flicker .room{animation:room-flicker .82s steps(1) both}@keyframes light-flicker{0%,100%{opacity:1;filter:brightness(1)}12%,27%,61%{opacity:.18;filter:brightness(.5)}19%,43%,72%{opacity:1;filter:brightness(1.8)}}@keyframes room-flicker{0%,100%{filter:brightness(1)}12%,27%,61%{filter:brightness(.72)}19%,43%,72%{filter:brightness(1.18)}}

/* Rain is restricted to the window area in the artwork. */
.rain{position:absolute;z-index:3;right:1.8%;top:9%;width:18%;height:45%;overflow:hidden;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);pointer-events:none;mix-blend-mode:screen}.rain-drop{position:absolute;top:-12%;width:1px;height:var(--drop,18px);border-radius:50%;background:linear-gradient(transparent,rgba(161,216,255,.72));animation:window-rain var(--speed,1.8s) linear infinite;animation-delay:var(--delay,0s)}@keyframes window-rain{to{transform:translate3d(-9px,58vh,0)}}

/* Solid art-directed drawing guide */
.draw-recipe{margin-top:13px;padding:14px;border-radius:14px;background:rgba(3,13,29,.42);border:1px solid rgba(119,225,214,.16)}.draw-recipe>b{display:block;font:500 12px Fredoka;color:#dffdf7;margin-bottom:9px}.draw-recipe span{display:flex;align-items:center;gap:7px;font-size:9px;color:#9fc3ca;margin-top:6px}.draw-recipe i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#297d7d;color:white;font-style:normal;font-size:8px}.fish-guide{position:absolute;z-index:0;left:21%;top:21%;width:58%;height:52%;opacity:.32;transition:.35s opacity,.35s transform;pointer-events:none}.fish-guide.hidden{opacity:0;transform:scale(.95)}.guide-body{position:absolute;left:25%;top:16%;width:57%;height:65%;border:3px dashed #4d868b;border-radius:56% 48% 50% 53%;transform:rotate(-2deg)}.guide-body i{position:absolute;right:17%;top:27%;width:13px;height:13px;border:3px solid #4d868b;border-radius:50%}.guide-tail{position:absolute;left:3%;top:21%;width:29%;height:58%;border:3px dashed #4d868b;clip-path:polygon(0 0,100% 50%,0 100%);background:rgba(74,134,138,.1)}.fish-guide span{position:absolute;padding:4px 7px;border-radius:6px;background:#44777d;color:#eefcf8;font-size:8px;letter-spacing:.08em}.label-body{right:8%;top:2%}.label-tail{left:-2%;bottom:-4%}#drawing{position:relative;z-index:2}.paper-tip{z-index:3}.selected-fish-hint{pointer-events:none}
@media(max-width:800px){.tank-focus .camera-stage{transform:scale(1.15)}.scene-hotspot span{display:none}.draw-recipe{display:none}.rain{right:0;width:24%}}
.window-spot{right:1%;top:8%;width:20%;height:48%;border-radius:8px}.monitor-spot{left:68%;top:41%;width:14%;height:22%;border-radius:8px}.rain.storm .rain-drop{height:42px;animation-duration:.72s;opacity:.9!important}

/* Camera correction: the room is locked. Only deliberate subject focus changes it. */
.room{z-index:0;animation:none!important;transform:none!important}.camera-stage{transform-origin:0 0;transform:translate3d(0,0,0) scale(1);transition:transform .82s cubic-bezier(.22,.72,.2,1);backface-visibility:hidden;perspective:1000px}.focus-tank .camera-stage{transform:translate3d(6%,-6%,0) scale(1.38)}.focus-girl .camera-stage{transform:translate3d(-76%,-37%,0) scale(1.5)}.focus-cat .camera-stage{transform:translate3d(-44%,-36%,0) scale(1.65)}.focus-lights .camera-stage{transform:translate3d(4%,34%,0) scale(1.35)}.focus-window .camera-stage{transform:translate3d(-93%,7%,0) scale(1.55)}.focus-monitor .camera-stage{transform:translate3d(-78%,-38%,0) scale(1.7)}.camera-focused .wide-view{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* Three pane masks keep rain outside, behind the foreground characters. */
.rain{position:absolute;z-index:1;inset:0;width:auto;height:auto;right:auto;top:auto;overflow:hidden;clip-path:none;pointer-events:none;mix-blend-mode:screen}.rain-pane{position:absolute;overflow:hidden}.rain-upper{left:84.2%;top:4.8%;width:15.8%;height:21.5%}.rain-lower-left{left:84.2%;top:26.3%;width:6.8%;height:27.5%}.rain-lower-right{left:91%;top:26.3%;width:9%;height:27.5%}.rain-drop{top:-18%;animation-name:pane-rain}.rain.storm .rain-drop{height:42px;animation-duration:.72s;opacity:.86!important}@keyframes pane-rain{to{transform:translate3d(-5px,62vh,0)}}
/* ── The room is video now. Every CSS layer that used to fake motion is gone:
   the footage animates the girl, the cat, the lights, and the window rain. ── */
.room{width:100%;height:100%;object-fit:cover;object-position:center;display:block;pointer-events:none}

/* The glow stays, unanimated — it is a colour grade that ties the fish canvas
   to the room, not a light source of its own. The footage has its own light. */
.glow{animation:none!important;opacity:.62}

/* ── One 16:9 stage, letterboxed and centred. Every scene overlay — tank, rain
   panes, hotspots — is positioned in percentages of the artwork, so the stage
   must keep the footage's own ratio at every size. Cropping it with cover was
   what pulled those overlays off the room on anything that is not 16:9. The
   camera translations are percentages of this box for the same reason. ── */
/* dvh, not vh: on phones vh includes the retracted URL bar, which pushed the
   bottom of the room under the browser chrome. */
#game{min-height:0;height:100vh;height:100dvh}
.camera-stage{inset:0;margin:auto;width:min(100vw,calc(100dvh*16/9));height:min(100dvh,calc(100vw*9/16))}
.room{object-fit:fill}

/* Keep modal content inside the visible browser viewport. The dialog itself
   scrolls only as a last resort (for example when a phone keyboard is open). */
#studio{max-height:calc(100dvh - 16px);overflow:auto}

/* A static vignette settles the frame and pushes the eye to the tank. Painted
   once, never animated, so it costs nothing per frame. */
.camera-stage::after{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:radial-gradient(ellipse 78% 82% at 32% 46%,transparent 46%,rgba(3,6,18,.5) 100%)}
.light-sweep{display:none}

/* ── Small screens and phones. The stage letterboxes, so the UI moves off the
   artwork and into the bars instead of covering the room. ── */
@media(max-width:820px),(max-height:560px){
  .hud{top:6px;left:6px;right:6px;height:58px;border-radius:15px;padding:8px 10px}
  .hud .primary{padding:10px 12px;font-size:12px}
  .care{left:6px;right:6px;bottom:6px;min-width:0;padding:10px 12px;border-radius:15px}
  .care b{font-size:13px}.help{top:72px;right:6px}
  .wide-view{top:72px;padding:8px 12px;font-size:12px}
  .chat-bar{bottom:74px;width:calc(100vw - 16px);padding:8px 10px}
  .chat-bar label{display:none}
  .speech{max-width:min(200px,52vw)}.speech p{padding:9px 11px;font-size:12px}
  .speech.at-girl{width:44%;max-width:none}
}
/* Narrow phones: the wordmark is the first thing to go so the draw button,
   which is the only control that matters here, always fits. */
@media(max-width:480px){
  .brand b,.brand small{display:none}
  .hud{gap:8px;padding:8px}
  .hud .primary{padding:10px 14px;font-size:0}
  .hud .primary::after{content:"＋ Draw";font-size:13px}
  .care small{font-size:9px}
}
/* Portrait phones: a 16:9 stage leaves more empty screen than room, so stop
   pinning the panels to the screen edges and stack them around the artwork. */
@media(orientation:portrait){
  #game{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .hud,.care{position:static;left:auto;right:auto;top:auto;bottom:auto;width:100%;flex:none}
  .camera-stage{position:relative;inset:auto;margin:0;width:100%;height:auto;aspect-ratio:16/9;flex:none}
  .help{top:auto;bottom:12px;right:12px}
  .now{display:none}
  /* Touch has no hover, so the hotspots stay invisible and simply accept taps —
     a permanent outline around the cat reads as a rendering fault, not a hint. */
  .scene-hotspot span{display:none}
}

/* A short landscape phone has enough horizontal room for the studio's two
   columns but not enough height for the mobile stacked version. Keep every
   drawing action visible without making the entire interface tiny. */
@media(max-height:560px) and (orientation:landscape){
  #studio{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:none}
  .studio-card{display:grid;grid-template-columns:minmax(170px,26vw) 1fr;height:100%;min-height:0;border-radius:16px}
  .studio-copy{padding:22px 16px}
  .studio-copy h1{font-size:25px;margin:10px 0}
  .studio-copy p,.studio-copy .tip,.draw-recipe,.legend{display:none}
  .drawing-panel{min-width:0;padding:10px;gap:8px}
  .tools{flex:none;overflow-x:auto}
  .paper{min-height:0}
  .paper-tip{display:none}
  .release-row{flex-direction:row;align-items:end;gap:8px}
  .release-row input{padding:9px 10px}
  .release-row button{padding:10px 12px}
  #message{height:14px}
  .start-card{padding:18px 28px}
  .start-card h1{font-size:42px;margin:12px 0}
  .start-card p{line-height:1.45;margin:8px 0}
  .start-button{margin-top:14px;padding:11px 17px}
}

/* ── Chat: Enter opens it, Enter sends. What you say surfaces as a speech
   bubble over the girl for fifteen seconds, then fades on its own. ── */
.chat-bar{position:absolute;z-index:14;left:50%;bottom:14%;transform:translate(-50%,14px);width:min(560px,86vw);border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:10px;opacity:0;transition:.22s opacity,.22s transform}
.chat-bar[hidden]{display:none}.chat-bar.open{opacity:1;transform:translate(-50%,0)}
.chat-bar label{font-size:8px;letter-spacing:.18em;color:#8cb7cb}
.chat-bar input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(3,10,25,.5);color:var(--ink);outline:0}
.chat-bar input:focus{border-color:#70dccc}
.chat-bar button{border:1px solid rgba(119,225,214,.28);border-radius:10px;background:rgba(61,221,181,.12);padding:9px 14px;font-size:11px;font-weight:700}
.now{border:1px solid var(--line);text-align:left;transition:.2s transform,.2s filter}
.now:hover{transform:translateY(-2px);filter:brightness(1.12)}

/* Anchored to the fish: left/top come from the render loop, so the transform
   lifts the bubble clear of the head and centres it on the body. */
.speech{position:absolute;z-index:13;left:58%;top:20%;width:max-content;max-width:min(240px,34vw);pointer-events:none;opacity:0;
  transform:translate(-50%,-100%) translateY(6px) scale(.96);transition:opacity .3s,transform .3s cubic-bezier(.2,.9,.2,1);will-change:left,top}
.speech[hidden]{display:none}
.speech.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
.speech.at-girl{left:58%;top:20%;width:22%;max-width:300px;transform:translateY(8px) scale(.96)}
.speech.at-girl.show{transform:translateY(0) scale(1)}
.speech p{position:relative;margin:0;padding:11px 14px;border-radius:14px;background:linear-gradient(140deg,rgba(238,252,255,.96),rgba(206,240,255,.92));color:#0c2733;font:500 13px/1.45 "DM Sans",sans-serif;box-shadow:0 14px 34px rgba(2,10,24,.45);word-break:break-word}
.speech p::after{content:"";position:absolute;left:50%;margin-left:-8px;bottom:-8px;border:8px solid transparent;border-top-color:rgba(210,242,255,.93);border-bottom:0}
.speech.at-girl p{border-radius:16px 16px 5px 16px}
.speech.at-girl p::after{left:auto;margin-left:0;right:14px}
.speech.cheat p{background:linear-gradient(140deg,rgba(255,236,190,.97),rgba(255,209,138,.93));color:#3a2607}
.speech.cheat p::after{border-top-color:rgba(255,214,148,.95)}

/* ── Studio: the tool row now shows the brush it is about to draw with, and
   Release stays off until there is something in the water to release. ── */
.tools{height:58px;gap:5px;padding:8px}
.tool,.tools button{transition:background .16s,transform .16s}
.tools button:hover,.tool:hover{background:rgba(126,231,220,.14)}
.tool.active{box-shadow:0 3px 12px rgba(77,152,207,.4)}
.size{margin:0 10px 0 6px}.size input{width:96px}
.brush-dot{display:block;border-radius:50%;background:currentColor;width:12px;height:12px;flex:none;transition:width .12s,height .12s}
.colors{gap:7px;padding-left:4px;border-left:1px solid var(--line);margin-left:2px}
.swatch{transition:transform .16s}.swatch:hover{transform:scale(1.18)}
.swatch.active{outline:2px solid #eafcff;outline-offset:2px;transform:scale(1.12)}
.primary:disabled{opacity:.42;filter:saturate(.5);box-shadow:none;cursor:not-allowed;transform:none}
.paper{min-height:440px;box-shadow:inset 0 0 35px rgba(32,74,74,.14),0 10px 30px rgba(2,10,20,.35)}
#drawing{cursor:crosshair}

/* The hotspot rules survive the switch to video. The footage can be graded and
   lit, so light events still land on it — only pixel-pushing had to go. */
.lights-flicker .room{animation:room-flicker .82s steps(1) both!important}

/* "She looks at you" and "the cat looks up" are now light, not motion: each
   hotspot already sits exactly over its subject, so it lends its own box. */
.girl-spot::after,.cat-spot::after{content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,rgba(167,121,255,.3),rgba(131,237,255,.12) 45%,transparent 72%);mix-blend-mode:screen}
.girl-looking .girl-spot::after{animation:subject-noticed 3.6s ease-in-out}
.cat-looking .cat-spot::after{animation:subject-noticed 2.8s ease-in-out}
@keyframes subject-noticed{0%,100%{opacity:0}25%,70%{opacity:1}}

/* The aquarium is never footage. Live fish render above the video, and the
   video must never intercept a click meant for the water. */
.room{z-index:0;pointer-events:none}#tank,#bubbles{z-index:3}

/* The cat sits on the ledge in front of the glass, so nothing inside the tank
   may cross it. A soft hole in both water layers lets fish and bubbles pass
   behind the cat instead of over it — occlusion, not a hard clip. */
#tank,#bubbles{-webkit-mask-image:radial-gradient(ellipse 15% 33% at 90% 80%,transparent 38%,#000 96%);mask-image:radial-gradient(ellipse 15% 33% at 90% 80%,transparent 38%,#000 96%)}

/* Rain only appears on the storm toggle, layered over the footage's own rain. */
.rain-drop{opacity:0!important;animation-play-state:paused}
.rain.storm .rain-drop{animation-play-state:running}
.rain.storm .rain-upper .rain-drop{opacity:.4!important}
.rain.storm .rain-lower-left .rain-drop,.rain.storm .rain-lower-right .rain-drop{opacity:.72!important}

@media(max-width:800px){.focus-tank .camera-stage{transform:translate3d(1%,-1%,0) scale(1.15)}.focus-girl .camera-stage{transform:translate3d(-40%,-18%,0) scale(1.25)}.focus-cat .camera-stage{transform:translate3d(-22%,-16%,0) scale(1.3)}.focus-lights .camera-stage{transform:translate3d(1%,18%,0) scale(1.18)}.focus-window .camera-stage{transform:translate3d(-48%,4%,0) scale(1.28)}.focus-monitor .camera-stage{transform:translate3d(-40%,-18%,0) scale(1.3)}}