:root{--ink:#12232c;--sky:#68c9ef;--paper:#f6fdff;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:Arial,Helvetica,sans-serif;background:var(--ink);color:var(--paper)}[hidden]{display:none!important}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:wait;opacity:.5}button:focus-visible,input:focus-visible{outline:3px solid var(--sky);outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.app{position:fixed;inset:0;width:100%;height:100dvh;display:flex;justify-content:center;background:radial-gradient(ellipse at center,#22495b,#0a151e)}.game{position:relative;width:100%;max-width:600px;height:100%;isolation:isolate;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}canvas{display:block;width:100%;height:100%;touch-action:none}
.rotate-screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:#101b25}.rotate-screen img{width:66px;height:66px;object-fit:contain}.rotate-screen h2{font-size:25px;margin:15px 0 8px}.rotate-screen p{font-size:16px;color:#bfeaff;margin:0}
@media(min-aspect-ratio:3/4){.game{width:min(100%,60dvh)}}
.hud{position:absolute;z-index:3;left:max(10px,env(safe-area-inset-left,0px));top:calc(var(--safe-top) + 10px);display:flex;flex-direction:column;gap:6px;pointer-events:none}.hud-item{display:flex;align-items:center;gap:7px;width:98px;min-height:38px;padding:3px 8px 3px 5px;border:2px solid var(--ink);border-radius:14px;background:#f6fdffed;color:var(--ink);box-shadow:0 2px 0 #12232c38}.hud-item img{width:29px;height:30px;object-fit:contain;flex-shrink:0}.hud-item strong{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}.hud-item small{font-size:13px;font-weight:700}.hud-item.inactive{background:#f6fdffb8}.hud-item.inactive img{opacity:.5}
.game-actions{position:absolute;z-index:13;right:max(10px,env(safe-area-inset-right,0px));top:calc(var(--safe-top) + 10px);display:flex;gap:6px}.icon-button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:2px solid var(--ink);border-radius:13px;background:#f6fdffeb;color:var(--ink);font-size:23px;font-weight:900;box-shadow:0 2px 0 #12232c38}.icon-button:active{transform:translateY(2px)}
.overlay{position:absolute;inset:0;z-index:9;touch-action:manipulation}.studio-screen,.start-screen{background:radial-gradient(ellipse at 50% 30%,#1a4355,#101b25 80%)}.studio-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:calc(var(--safe-top) + 20px) 22px calc(var(--safe-bottom) + 20px);overflow-y:auto}.studio-logo{width:min(430px,88vw);max-height:34dvh;object-fit:contain;flex-shrink:0}.entry-form{display:grid;gap:12px;width:min(280px,100%)}.entry-form label{font-size:16px;font-weight:700;text-align:center;color:#d7eff8}.entry-form input{width:100%;min-height:48px;border:2px solid #68c9ef88;border-radius:14px;background:#0b1b25;color:#fff;padding:10px 16px;text-align:center;font-size:20px;letter-spacing:3px;user-select:text;-webkit-user-select:text;touch-action:auto}.entry-form input[aria-invalid=true]{border-color:#ff9797}.entry-form p{font-size:14px;line-height:1.4;text-align:center;color:#ffb8b8;margin:0}.primary{min-height:48px;padding:12px 22px;border:2px solid var(--ink);border-bottom-width:4px;border-radius:15px;background:var(--sky);color:var(--ink);font-size:16px;font-weight:900;box-shadow:0 4px 0 #07172066}.primary:active{transform:translateY(2px)}
.start-brand{position:absolute;top:calc(var(--safe-top) + 7dvh);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:min(380px,82vw);pointer-events:none}.start-logo{width:min(310px,72vw);height:18dvh;max-height:155px;object-fit:contain}.start-brand h1{margin:0;width:min(245px,62vw);line-height:1}.start-brand h1 img{width:100%;max-height:8dvh;object-fit:contain;display:block}.paw-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:144px;height:144px;border:0;border-radius:50%;background:none;padding:8px;filter:drop-shadow(0 5px 14px #68c9ef44)}.paw-start img{width:100%;height:100%;object-fit:contain;pointer-events:none}.paw-start:active:enabled{transform:translate(-50%,-50%) scale(.95)}
.speech-bubble{position:absolute;background:#f6fdffed;color:var(--ink);border:2px solid var(--ink);border-radius:14px;box-shadow:0 2px 0 #12232c38;pointer-events:none}.speech-bubble:after{content:'';position:absolute;bottom:-7px;left:18px;width:12px;height:12px;background:inherit;border-bottom:2px solid var(--ink);border-left:2px solid var(--ink);transform:rotate(-45deg);border-radius:0 0 0 3px}.corner-bubble{z-index:4;right:max(10px,env(safe-area-inset-right,0px));top:calc(var(--safe-top) + 56px);width:min(208px,calc(100% - 126px));padding:10px 12px;font-size:16px;line-height:1.3;font-weight:800;text-align:left;overflow-wrap:break-word}.toast #speech-detail{display:block;font-size:14px;line-height:1.35;font-weight:600;margin-top:5px}.toast.warning{background:#e8f9ff}
.finale-panel h2{font-size:19px;line-height:1.15;margin:0 0 7px}.finale-panel p{font-size:14px;line-height:1.35;margin:0 0 6px;color:#33586a}.finale-panel #hits{font-size:13px;font-weight:800;color:#145e7b;letter-spacing:.5px}.roll-panel{position:absolute;inset:0;pointer-events:none;z-index:3;text-align:center}.roll-panel>strong{position:absolute;top:calc(var(--safe-top) + 154px);left:0;width:100%;font-size:clamp(80px,18vw,110px);font-weight:950;letter-spacing:-3px;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}.roll-panel small{font-size:.27em;letter-spacing:0}
.paused{z-index:12;display:grid;place-items:center;text-align:center;background:#12232ce8;backdrop-filter:blur(8px);padding:24px}.paused h2{font-size:54px;margin:0 0 28px}
@media(max-width:420px){.hud{left:max(8px,env(safe-area-inset-left,0px));gap:5px}.hud-item{width:94px;min-height:35px;padding:2px 6px 2px 4px;gap:5px}.hud-item img{width:27px;height:28px}.hud-item strong{font-size:16px}.hud-item small{font-size:12px}.game-actions{right:max(8px,env(safe-area-inset-right,0px));gap:4px}.icon-button{width:35px;height:35px;font-size:21px}.corner-bubble{right:max(8px,env(safe-area-inset-right,0px));top:calc(var(--safe-top) + 54px)}}
@media(max-height:580px){.studio-screen{gap:12px;padding-block:12px}.studio-logo{max-height:30dvh}.entry-form{gap:7px}.entry-form input{min-height:42px;padding:6px}.entry-form .primary{min-height:42px;padding:8px}.start-brand{top:3dvh;gap:3px}.start-logo{height:16dvh}.start-brand h1 img{max-height:7dvh}.paw-start{width:100px;height:100px}.roll-panel>strong{top:calc(var(--safe-top) + 138px);font-size:68px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.power-panel{position:absolute;z-index:3;top:calc(var(--safe-top) + 10px);left:max(10px,env(safe-area-inset-left,0px));width:98px;padding:8px 4px;border:2px solid var(--ink);border-radius:14px;background:#f6fdffed;box-shadow:0 2px 0 #12232c38;text-align:center;pointer-events:none;color:var(--ink)}.power-panel>span{display:block;font-size:12px;letter-spacing:.5px;font-weight:900}.power-panel strong{display:block;font-size:42px;font-weight:950;line-height:1.05;color:#145e7b}
@media(max-width:420px){.power-panel{left:max(8px,env(safe-area-inset-left,0px));width:94px}}

/* Artwork is fixed-ratio; every label, result and hit target is live HTML. */
.result{display:flex;justify-content:center;align-items:center;padding:calc(var(--safe-top) + 8px) 0 calc(var(--safe-bottom) + 8px);background:#071c2e;overflow-y:auto;touch-action:pan-y}
.result-card{position:relative;flex:none;width:min(100%,max(320px,calc((100dvh - var(--safe-top) - var(--safe-bottom) - 16px)*.5628)));aspect-ratio:941/1672;margin:auto;container-type:inline-size;text-align:center}
.result-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.result-brand{position:absolute;top:1.3%;left:12%;width:76%;color:#e0f9ff;text-shadow:0 1px 3px #071c2e;font-size:max(12px,3.2cqw);font-weight:700}
.result h2{position:absolute;left:18%;top:5.2%;width:64%;margin:0;color:#082538;font-size:clamp(20px,5.9cqw,30px);line-height:1.1;font-weight:900}
.fish-rewards{position:absolute;top:38.7%;left:11.9%;width:76.4%;height:13.5%;display:flex;justify-content:space-between}
.fish-reward{position:relative;width:30%;height:100%;border-radius:50%;background:#061424ad;-webkit-backdrop-filter:grayscale(1) brightness(.35);backdrop-filter:grayscale(1) brightness(.35)}
.fish-reward.earned{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 12px #ffd67533}
.fish-reward strong{position:absolute;bottom:3%;left:0;width:100%;font-size:max(12px,3.4cqw);color:#b5c1c9;text-shadow:0 2px 3px #061424;font-variant-numeric:tabular-nums}
.fish-reward.earned strong{color:#ffe1a1}
.result-summary{position:absolute;top:54.4%;left:14.5%;width:71%;height:16.5%;display:flex;flex-direction:column;justify-content:space-between;gap:2px}
.eyebrow{font-size:max(12px,3cqw);font-weight:800;line-height:1.1;letter-spacing:.04em;color:#d4f4ff}
.result-score-row{display:flex;align-items:center;justify-content:center;gap:7cqw}
.result-distance{font-size:max(27px,8cqw);font-weight:900;color:#fff3bc;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.result-distance small{font-size:max(12px,3.4cqw);font-weight:700;color:#d4ecf4}
.result .fish-total{font-size:max(12px,3cqw);line-height:1.1;color:#d4ecf4;margin:0}
.fish-total strong{display:block;color:#ffd678;font-size:max(17px,4.6cqw);margin-top:2px}
.result-stats{display:flex;justify-content:space-around;gap:6px;line-height:1.1}
.result-stats strong{display:block;font-size:max(16px,4.6cqw);font-variant-numeric:tabular-nums}
.result-stats span{display:block;font-size:max(12px,3cqw);color:#bed9e6;margin-top:2px}
.result-footer{display:flex;justify-content:space-between;align-items:center;gap:4px;color:#c9e6f1;font-size:max(12px,3cqw);line-height:1.1}
.fish-bank{display:flex;align-items:center;gap:4px}.fish-bank img{width:6cqw;height:4cqw;object-fit:contain}.fish-bank strong{color:#ffda81}.result .best{margin:0;font-size:inherit;white-space:nowrap}
.result-button{position:absolute;left:10.5%;width:79%;height:7.7%;padding:2px 14px;border:0;border-radius:999px;background:transparent;font-size:max(20px,5.4cqw);line-height:1.1;font-weight:900;letter-spacing:.035em}
.result-next{top:73.5%;color:#06334a}.result-again{top:82.7%;color:#e6faff;text-shadow:0 2px 3px #061424}.result-button:active{background:#ffffff1c}.result-button:focus-visible{outline-color:#fff4c0;outline-offset:-6px}
.result .save-notice{position:absolute;top:91%;left:13%;width:74%;margin:0;padding:5px;background:#071c2eee;border-radius:10px;font-size:12px;line-height:1.2;color:#ffdaa1}
.audio-settings{width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;padding:22px;border:2px solid #68c9ef;border-radius:24px;background:#0c293d;color:#f6fdff;box-shadow:0 18px 70px #0009;touch-action:pan-y}
.audio-settings::backdrop{background:#04131dc7;backdrop-filter:blur(6px)}.audio-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.audio-heading h2{font-size:26px;margin:0}.audio-settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px}.audio-switch{padding-bottom:20px;border-bottom:1px solid #ffffff24;margin-bottom:22px}.audio-switch input{width:24px;height:24px;accent-color:#68c9ef}.audio-settings output{color:#99e5ff;min-width:3em;text-align:right;font-variant-numeric:tabular-nums}.audio-settings input[type=range]{display:block;width:100%;height:36px;margin:4px 0 18px;accent-color:#68c9ef;touch-action:pan-x}.audio-settings p{font-size:14px;line-height:1.4;color:#ffdaa1}