@font-face{font-family:Pixelify;src:url(../assets/fonts/PixelifySans.ttf)format("truetype");font-weight:400 700;font-display:swap}:root{--bg:oklch(19% .027 232);--panel:oklch(27% .038 225);--text:oklch(95% .048 91);--muted:oklch(78% .037 172);--accent:oklch(82% .119 78);--good:oklch(86% .095 161);--danger:oklch(78% .119 26);--font:"Pixelify", ui-monospace, monospace}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;overflow:hidden}#app{justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.stage{touch-action:none;font-size:16px;position:relative;overflow:hidden;box-shadow:0 0 0 2px #385462;container-type:size}.game-canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.ui{pointer-events:none;--ui-size:clamp(14px, 4cqw, 20px);font-size:var(--ui-size);position:absolute;inset:0}.ui button,.ui .panel{pointer-events:auto}[hidden]{display:none!important}.pixel-icon{image-rendering:pixelated;vertical-align:middle;background-repeat:no-repeat;flex:none;display:inline-block}.hud-top{padding:max(.7em, env(safe-area-inset-top)) .85em .65em;background:var(--panel);border-bottom:2px solid #537779;justify-content:space-between;line-height:1.5;display:flex;position:absolute;top:0;left:0;right:0}.hud-depth,.hud-line,.hud-coins,.hud-fish{align-items:center;gap:.4em;display:flex}.hud-right>div{justify-content:flex-end}.hud-depth{font-size:1.15em}.hud-line,.hud-fish{color:var(--muted);font-size:.9em}.hud-coins{color:var(--accent);font-size:1.15em}.hud-zone{top:calc(var(--ui-size) * 5.2);color:var(--muted);letter-spacing:.1em;font-size:.7em;position:absolute;left:1em}.run-direction{bottom:max(1em, env(safe-area-inset-bottom));text-align:center;text-shadow:1px 2px #142e40;font-size:.85em;position:absolute;left:0;right:0}.gauge{background:#294b61;width:4px;position:absolute;top:23%;bottom:17%;right:.6em}.gauge-fill{background:var(--accent);position:absolute;inset:0 0 auto}.gauge-best{background:var(--good);height:2px;position:absolute;left:-3px;right:-3px}.banner{text-align:center;opacity:0;text-shadow:2px 2px #142e40;width:100%;font-size:1.6em;font-weight:700;position:absolute;top:27%}.banner.show{opacity:1}.danger{color:var(--danger)}.good{color:var(--good)}.popups{position:absolute;inset:0}.popup{text-shadow:1px 2px #142e40;white-space:nowrap;font-weight:700;animation:.9s ease-out forwards popup;position:absolute}@keyframes popup{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,calc(-50% - 2.5em))}}.panel{background:var(--panel);text-align:center;border:8px solid #0000;border-image:url(../assets/ui/UI_Panel.png) 5 fill/8px;width:88%;max-height:85%;padding:1em 1.1em;position:absolute;left:50%;overflow-y:auto;transform:translate(-50%)}.panel.ready{bottom:max(1.1em, env(safe-area-inset-bottom));background:0 0;border:0;width:94%;padding:.4em .8em}.panel.result,.panel.shop{max-height:70%;top:60%;transform:translate(-50%,-50%)}.eyebrow{color:var(--muted);letter-spacing:.12em;margin-bottom:.7em;font-size:.65em}.panel h1{letter-spacing:-.025em;color:var(--text);text-shadow:3px 3px #244d62;margin:0;font-size:3.25em;font-weight:700;line-height:.82}.panel h1 span{display:block}.panel h1 span+span{color:var(--accent)}.panel h2{color:var(--accent);margin:0 0 .65em;font-size:1.6em}.ready-copy{margin:1em 0 .75em;font-size:.9em}.ready-info{color:var(--muted);letter-spacing:.025em;margin:.7em 0 .1em;font-size:.7em}.hint,.reason,.motion-status{color:var(--muted);margin:.55em 0;font-size:.78em;line-height:1.3}.rule-hint{color:var(--text);margin-top:.3em}.touch-hint{display:none}.reason{margin-bottom:.8em}.stat{text-align:left;border-bottom:1px solid #3c5866;justify-content:space-between;align-items:center;gap:.8em;padding:.45em 0;display:flex}.stat .label{color:var(--muted)}.stat .value{text-align:right}.row{justify-content:center;gap:.6em;margin-top:.8em;display:flex}.btn{font:inherit;color:var(--text);cursor:pointer;touch-action:manipulation;background:#36596a;border:2px solid #86aca6;min-height:44px;padding:.55em .8em;font-weight:700;box-shadow:0 3px #142e40}.btn.primary{background:var(--accent);color:#283d43;border-color:#ffdf9e;min-width:8em;margin-top:.8em;font-size:1.1em;box-shadow:0 4px #895a42}.ready>.btn.primary{width:82%;margin:.7em auto .35em}.row .btn.primary{margin-top:0}.btn.small{padding:.35em .65em;font-size:.8em}.btn.on{border-color:var(--good);background:#346758}.btn:disabled{color:#b0bcb2;box-shadow:none;cursor:not-allowed;background:#344b55;border-color:#597276}.btn:not(:disabled):hover{filter:brightness(1.08)}.btn:focus-visible{outline:3px solid var(--text);outline-offset:4px}.btn:not(:disabled):active{box-shadow:none;transform:translateY(2px)}.motion{border-top:1px solid #537779;margin-top:.6em;padding-top:.4em}.motion .row{margin-top:.4em}.catch-icons{flex-wrap:wrap;justify-content:center;align-items:center;gap:.4em;margin-bottom:.7em;display:flex}.shop-icon{margin:1em 0;transform:scale(2)}.debug{color:#9dffb0;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;background:#142e40ed;margin:0;padding:.4em .5em;font:10px/1.35 monospace;position:absolute;bottom:.4em;left:.4em;right:.4em}.loading{text-align:center;padding:1.5em}@media (pointer:coarse){.touch-hint{display:block}.desktop-hint{display:none}}@media (height<=650px){.panel h1{font-size:2.65em}.ready-copy{margin:.65em 0}.panel.ready{bottom:.65em}.motion-status{font-size:.7em}}@media (prefers-reduced-motion:reduce){.popup{animation:none}}@media (height<=480px){.panel.ready{max-height:60%;padding-top:0;bottom:.5em}.ready h1{text-shadow:1px 2px #244d62;font-size:1.35em;line-height:1}.ready h1 span{display:inline}.ready h1 span+span:before{content:" "}.ready .eyebrow,.ready-copy,.ready .rule-hint,.ready .motion-status{display:none}.ready-info{margin:.5em 0 0}.ready .hint{font-size:.7em}.ready .motion{margin-top:.3em;padding-top:0}}.pause-button{right:.65em;top:calc(var(--ui-size) * 5.1);font-size:.7em;position:absolute}.pause-layer{z-index:50;pointer-events:auto;background:oklch(19% .027 232/.88);position:absolute;inset:0}.panel.settings{touch-action:pan-y;width:94%;max-height:94%;top:50%;transform:translate(-50%,-50%)}.setting-row{text-align:left;border-bottom:1px solid #537779;justify-content:space-between;align-items:center;gap:.6em;min-height:48px;display:flex}.setting-row input[type=range]{width:44%;min-height:44px;accent-color:var(--accent)}.setting-row input[type=checkbox]{width:24px;height:24px;accent-color:var(--accent);margin:12px}input:focus-visible{outline:2px solid var(--text);outline-offset:3px}.reset-button{margin:1em auto 0;display:block}.reset-confirm{font-size:.85em}.reset-confirm .btn{margin:.25em}.result>.btn{width:100%;margin-top:.7em;display:block}.panel.result,.panel.shop{animation:.18s ease-out panel-in}@keyframes panel-in{0%{opacity:0;translate:0 6px}to{opacity:1;translate:0}}.purchased .shop-icon{animation:.35s ease-out purchase}@keyframes purchase{0%{filter:brightness(1.8)}to{filter:brightness()}}.stage[data-paused=true] .popup{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.panel,.purchased .shop-icon{animation:none}}@media (height<=480px){.panel.settings{font-size:12px}.settings h2{margin-bottom:.2em}.settings .hint{margin:.3em 0}.panel.result,.panel.shop{max-height:88%;top:54%}}.vision{pointer-events:none;opacity:0;background:radial-gradient(75% 62% at 50% 46%,#0000 45%,#04070f 100%);position:absolute;inset:0}.gauge-zones i{opacity:.85;height:2px;position:absolute;left:-3px;right:-3px}.popup.rare{color:var(--accent);font-size:1.15em}.toast{top:calc(var(--ui-size) * 6.6);text-align:left;background:oklch(27% .038 225/.94);border:2px solid #86aca6;align-items:center;gap:.65em;width:82%;padding:.5em .7em;animation:.2s ease-out toast-in;display:flex;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 3px #142e40}.toast .pixel-icon{flex:none}.toast.species,.toast.challenge{border-color:var(--good)}.toast.rare{border-color:var(--accent)}.toast.event{color:var(--muted);border-color:#537779}.toast-eyebrow{letter-spacing:.12em;color:var(--muted);font-size:.62em}.toast.species .toast-eyebrow,.toast.challenge .toast-eyebrow{color:var(--good)}.toast.rare .toast-eyebrow,.toast.zone .toast-eyebrow{color:var(--accent)}.toast-title{font-size:1.05em;font-weight:700;line-height:1.15}.toast-detail{color:var(--muted);font-size:.72em}.toast .rarity{font-size:.7em}@keyframes toast-in{0%{opacity:0;translate:0 -6px}to{opacity:1;translate:0}}.rarity{white-space:nowrap;align-items:center;gap:.35em;display:inline-flex}.pips{gap:2px;display:inline-flex}.pips i{border:1px solid;width:.45em;height:.45em}.pips i.on{background:currentColor}.rarity.r3,.rarity.r4{color:var(--accent)}.rarity.r2{color:var(--good)}.ready-info{margin-bottom:.45em}.challenge{text-align:left;background:oklch(27% .038 225/.92);border:2px solid #537779;max-width:26em;margin:.45em auto 0;padding:.45em .6em;font-size:.78em}.challenge.done{border-color:var(--good)}.challenge-head{letter-spacing:.08em;color:var(--muted);text-transform:uppercase;justify-content:space-between;gap:.6em;font-size:.78em;display:flex}.challenge.done .challenge-label{color:var(--good)}.challenge-reward{color:var(--accent);white-space:nowrap}.challenge-text{margin:.15em 0;font-weight:700}.challenge-progress{color:var(--muted);align-items:center;gap:.6em;font-size:.85em;display:flex}.challenge-bar{background:#294b61;border:1px solid #537779;flex:1;height:6px}.challenge-bar i{background:var(--good);height:100%;display:block}.ready>.challenge-slot .challenge{background:oklch(27% .038 225/.82)}.row.menu{margin-top:.35em}.row.menu .btn{flex:1;max-width:8.5em}.btn.alert{border-color:var(--accent);color:var(--accent)}.panel.shop{padding-top:.8em}.shop .shop-coins{color:var(--accent);justify-content:center;align-items:center;gap:.45em;margin:-.3em 0 .5em;display:flex}.upgrades{gap:.45em;display:grid}.upgrade{text-align:left;background:#22404f;border:2px solid #3c5866;grid-template-columns:auto 1fr auto;align-items:center;gap:.55em;padding:.45em .5em;display:grid}.upgrade.affordable{border-color:var(--accent)}.upgrade-icon{justify-content:center;width:20px;display:flex}.upgrade-name{flex-wrap:wrap;align-items:baseline;gap:0 .5em;font-size:.9em;font-weight:700;display:flex}.upgrade-level{color:var(--muted);font-size:.8em;font-weight:400}.upgrade-effect{color:var(--muted);font-size:.72em;line-height:1.3}.upgrade-buy{min-width:5.6em}.upgrade.purchased{animation:.35s ease-out purchase}.catch-icons .more{color:var(--muted);font-size:.8em}.discoveries{gap:.25em;margin:.5em 0 0;padding:0;list-style:none;display:grid}.discoveries li{border-left:4px solid var(--good);text-align:left;background:#22404f;justify-content:space-between;gap:.6em;padding:.3em .5em;font-size:.8em;display:flex}.discoveries li .label{font-weight:700}.discoveries li .value{text-align:right;color:var(--muted)}.discoveries li.best,.discoveries li.rare{border-left-color:var(--accent)}.discoveries li.zone{border-left-color:#c9b2e8}.discoveries li.record{border-left-color:#86aca6}.result>.row{margin-top:.5em}.result>.row .btn{flex:1}.result .challenge{max-width:none;font-size:.74em}.panel.bestiary{touch-action:pan-y;width:94%;max-height:94%;padding:.8em .7em;animation:.18s ease-out panel-in;top:50%;transform:translate(-50%,-50%)}.bestiary h2{margin-bottom:.2em}.bestiary-progress{font-size:.85em}.bestiary .challenge-bar{max-width:14em;margin:.35em auto .5em}.zone-list{flex-wrap:wrap;justify-content:center;gap:.3em;margin:0 0 .45em;padding:0;font-size:.68em;list-style:none;display:flex}.zone-list li{color:var(--muted);border:1px solid #3c5866;gap:.35em;padding:.2em .45em;display:flex}.zone-list li.known{color:var(--text)}.zone-list .mark{font-weight:700}.bestiary-records{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:.2em .7em;margin-bottom:.5em;font-size:.64em;display:flex}.species-detail{background:#22404f;border:2px solid #537779;margin-bottom:.55em;padding:.5em .6em}.detail-art{justify-content:center;align-items:center;min-height:64px;display:flex}.detail-art .pixel-icon{transform:scale(2)}.detail-art.unknown .pixel-icon,.species-card.unknown .pixel-icon{filter:brightness(0)opacity(.55)}.detail-name{color:var(--accent);font-size:1.15em;font-weight:700}.detail-text{color:var(--muted);margin:.2em 0 .3em;font-size:.72em;line-height:1.3}.species-detail .stat{padding:.25em 0;font-size:.74em}.species-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35em;display:grid}.zone-heading{letter-spacing:.12em;color:var(--muted);text-align:left;text-transform:uppercase;grid-column:1/-1;margin:.4em 0 0;font-size:.66em}.species-card{font:inherit;min-height:64px;color:var(--text);cursor:pointer;touch-action:manipulation;background:#22404f;border:2px solid #3c5866;flex-direction:column;justify-content:space-between;align-items:center;gap:.25em;padding:.35em .2em;display:flex;overflow:hidden}.species-card.known{border-color:#537779}.species-card.selected{border-color:var(--accent)}.species-card:focus-visible{outline:3px solid var(--text);outline-offset:2px}.species-art{justify-content:center;align-items:center;max-width:100%;height:30px;display:flex}.species-name{font-size:.6em;line-height:1.15}.species-card.unknown .species-name{color:var(--muted)}.bestiary-back{width:100%;margin-top:.6em;position:sticky;bottom:0}@media (prefers-reduced-motion:reduce){.toast,.upgrade.purchased,.panel.bestiary{animation:none}}@media (height<=650px){.ready-copy{display:none}.ready .challenge{margin-top:.25em;padding:.3em .5em}}@media (height<=480px){.ready .challenge-progress,.ready .challenge-head{display:none}.ready .challenge{font-size:.65em}.panel.bestiary{font-size:12px}.toast{top:calc(var(--ui-size) * 4.6)}}.panel.result,.panel.shop{max-height:84%;top:55%}@media (height<=480px){.panel.result,.panel.shop{max-height:92%;top:52%}}.row{flex-wrap:wrap}@container (width<=300px){.upgrade{grid-template-columns:auto 1fr}.upgrade-buy{grid-column:1/-1}.species-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (height<=620px){.ready .eyebrow,.ready .motion-status{display:none}.panel.ready h1{font-size:2.1em}.ready .challenge-progress{display:none}.ready>.btn.primary{min-height:44px;margin:.45em auto .25em}.ready .hint{margin:.3em 0;font-size:.7em}.ready .motion{margin-top:.3em;padding-top:.2em}}
