:root{--ink:#e9fbff;--ink-dim:#e9fbffb3;--glass:#0622348c;--glass-strong:#041624d1;--edge:#a0ebff38;--accent:#ffd166;--health:#ff6b6b;--energy:#ffc43d;--clean:#4ff0d8;--food:#6dff9a;--danger:#ff5a4a;--radius:16px;--display:"Fredoka", "Trebuchet MS", system-ui, sans-serif;--body:"Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;background:#031522;margin:0;overflow:hidden}#app,#viewport{position:fixed;inset:0}#viewport canvas{width:100%;height:100%;display:block}#ui{pointer-events:none;position:fixed;inset:0}.hidden{display:none!important}button{font:inherit;color:inherit;cursor:pointer}#loading{font-family:var(--display);letter-spacing:.04em;z-index:10;background:radial-gradient(at 50% 30%,#0c4a6e,#031522 70%);place-content:center;justify-items:center;gap:18px;font-size:20px;transition:opacity .6s;display:grid;position:fixed;inset:0}#loading.done{opacity:0;pointer-events:none}.loading-fish{background:linear-gradient(#7fe3ff,#2b8cc4);border-radius:50% 60% 60% 50%;width:64px;height:32px;animation:1.2s ease-in-out infinite bob;position:relative}.loading-fish:after{content:"";border:12px solid #0000;border-right:22px solid #2b8cc4;position:absolute;top:4px;left:-22px}@keyframes bob{50%{transform:translateY(-8px)rotate(-4deg)}}.screen{pointer-events:auto;background:radial-gradient(#020e1826,#020e18a6);place-items:center;padding:16px;animation:.35s fade-in;display:grid;position:absolute;inset:0}@keyframes fade-in{0%{opacity:0}}.panel{background:var(--glass-strong);border:1px solid var(--edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:24px;max-width:min(960px,100%);max-height:calc(100vh - 32px);padding:28px 32px;overflow:auto;box-shadow:0 30px 80px #00000073}.title-wrap{text-align:center;justify-items:center;gap:10px;display:grid}.logo{font-family:var(--display);letter-spacing:.02em;background:linear-gradient(#fff6c9 0%,#ffd166 40%,#ff8c42 100%);color:#0000;filter:drop-shadow(0 6px #00284699)drop-shadow(0 18px 30px #0006);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(56px,11vw,132px);font-weight:700;line-height:.9}.tagline{font-family:var(--display);color:var(--ink-dim);margin:0 0 18px;font-size:clamp(16px,2.4vw,22px)}.menu{gap:12px;width:min(320px,80vw);display:grid}.btn{border:1px solid var(--edge);background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--display);letter-spacing:.02em;border-radius:14px;padding:14px 20px;font-size:20px;font-weight:600;transition:transform .12s,background .2s,border-color .2s}.btn:hover,.btn:focus-visible{background:#1e6e9699;border-color:#bef5ff99;outline:none;transform:translateY(-1px)}.btn.primary{color:#2a1600;background:linear-gradient(#ffd166,#ff9f43);border-color:#0000}.btn.primary:hover{background:linear-gradient(#ffe08a,#ffad5c)}.btn.small{padding:10px 16px;font-size:16px}.footnote{color:var(--ink-dim);margin-top:18px;font-size:13px}.panel h2{font-family:var(--display);margin:0 0 6px;font-size:34px}.panel .sub{color:var(--ink-dim);margin:0 0 20px}.panel-actions{flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:22px;display:flex}.cards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;display:grid}.card{border:1px solid var(--edge);border-radius:var(--radius);text-align:left;background:#0a3c5a59;align-content:start;gap:6px;padding:12px 14px 14px;transition:transform .12s,border-color .2s,background .2s;display:grid}button.card:hover{background:#145a8273;border-color:#bef5ff99;transform:translateY(-2px)}.card img{aspect-ratio:16/10;object-fit:contain;background:radial-gradient(at 50% 40%,#50bee659,#05283c66);border-radius:10px;width:100%}.card .name{font-family:var(--display);font-size:19px;font-weight:600}.card .meta{color:var(--ink-dim);font-size:12.5px;line-height:1.4}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{letter-spacing:.04em;text-transform:uppercase;background:#ffffff1a;border:1px solid #ffffff1f;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:600}.chip.toxic{background:#be50ff40}.chip.sting{background:#ff5aa040}.chip.level{background:#ffd16640}.controls{grid-template-columns:auto 1fr;align-items:center;gap:10px 22px;font-size:15px;display:grid}kbd{font-family:var(--body);background:#ffffff1f;border:1px solid #fff3;border-bottom-width:3px;border-radius:7px;margin-right:4px;padding:3px 8px;font-size:12.5px;font-weight:600;display:inline-block}.legend{gap:8px;margin-top:18px;font-size:14px;display:grid}.dot{vertical-align:-1px;border-radius:50%;width:12px;height:12px;margin-right:8px;display:inline-block}.stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:18px 0 4px;display:grid}.stat{background:#ffffff0f;border-radius:12px;padding:12px 14px}.stat .k{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;font-size:12px}.stat .v{font-family:var(--display);font-size:26px;font-weight:600}.toggle-row{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}#hud{font-family:var(--display);position:absolute;inset:0}.hud-box{background:var(--glass);border:1px solid var(--edge);border-radius:var(--radius);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px 16px;position:absolute}.hud-tl{width:min(330px,100vw - 32px);top:16px;left:16px}.species-line{align-items:center;gap:10px;font-size:22px;font-weight:600;display:flex}.level-chip{letter-spacing:.08em;color:var(--accent);background:#ffd16638;border-radius:8px;padding:3px 8px;font-size:12px}.growth{background:#ffffff1f;border-radius:6px;height:10px;margin:10px 0 8px;position:relative;overflow:hidden}.growth-fill{background:linear-gradient(90deg,#ffd166,#ff9f43);border-radius:6px;width:0;transition:width .25s;position:absolute;inset:0 auto 0 0}.diet{font-family:var(--body);color:var(--ink-dim);font-size:12.5px;line-height:1.45}.diet b{color:var(--food);font-weight:600}.hud-tr{text-align:right;top:16px;right:16px}.score{font-variant-numeric:tabular-nums;font-size:34px;font-weight:700;line-height:1}.lives{justify-content:flex-end;gap:4px;margin-top:6px;display:flex}.lives svg{width:26px;height:14px}.lives svg.lost{opacity:.2}.hud-bl{gap:9px;width:min(300px,100vw - 32px);display:grid;bottom:16px;left:16px}.meter{grid-template-columns:74px 1fr;align-items:center;gap:10px;font-size:14px;font-weight:500;display:grid}.bar{background:#ffffff1f;border-radius:6px;height:10px;overflow:hidden}.bar>div{border-radius:6px;width:100%;height:100%;transition:width .2s}.meter.health .bar>div{background:var(--health)}.meter.energy .bar>div{background:var(--energy)}.meter.clean .bar>div{background:var(--clean)}.meter.low{animation:.8s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.45}}.hud-bc{align-items:center;gap:12px;padding:10px 16px 10px 10px;display:flex;bottom:16px;left:50%;transform:translate(-50%)}.ability-ring{width:46px;height:46px;position:relative}.ability-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}.ability-ring .icon{place-items:center;font-size:20px;display:grid;position:absolute;inset:0}.ability-ring.ready .icon{filter:drop-shadow(0 0 6px #ffe68ce6)}.ability-text{line-height:1.15;display:grid}.ability-text .n{font-size:17px;font-weight:600}.ability-text .d{font-family:var(--body);color:var(--ink-dim);font-size:12px}.tags{gap:8px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.tag{background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600}.tag.hidden-tag{color:#b8f7ff}.tag.clean-tag{color:var(--clean)}.tag.tired-tag{color:var(--energy)}.toasts{justify-items:center;gap:8px;width:min(560px,100vw - 32px);display:grid;position:absolute;top:70px;left:50%;transform:translate(-50%)}.toast{background:var(--glass-strong);border:1px solid var(--edge);font-family:var(--body);text-align:center;border-radius:12px;padding:10px 16px;font-size:14.5px;transition:opacity .4s,transform .4s;animation:.3s toast-in}.toast.warn{border-color:#ff6e5a99}.toast.good{border-color:#6dff9a80}.toast.out{opacity:0;transform:translateY(-8px)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}.banner{text-align:center;pointer-events:none;width:min(720px,100vw - 32px);animation:.5s cubic-bezier(.2,1.4,.4,1) banner-in;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)}.banner .big{text-shadow:0 4px #001e3299,0 14px 30px #00000073;font-size:clamp(36px,6vw,64px);font-weight:700;line-height:1}.banner .big.gold{color:var(--accent)}.banner .big.red{color:#ff8a7a}.banner .small{font-family:var(--body);color:var(--ink);text-shadow:0 2px 8px #0009;margin-top:10px;font-size:16px}@keyframes banner-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.8)}}.popup{color:var(--accent);text-shadow:0 2px 6px #0009;white-space:nowrap;font-size:18px;font-weight:700;animation:1.3s ease-out forwards popup;position:absolute;transform:translate(-50%,-50%)}@keyframes popup{to{opacity:0;transform:translate(-50%,-150%)}}.edge-arrow{pointer-events:none;width:0;height:0;position:absolute}.edge-arrow .tri{filter:drop-shadow(0 0 6px);border-top:10px solid #0000;border-bottom:10px solid #0000;border-left:24px solid;position:absolute;top:-10px;left:-12px}.edge-arrow .lbl{white-space:nowrap;text-shadow:0 1px 4px #000c;font-size:12px;font-weight:600;position:absolute;transform:translate(-50%,14px)}.edge-arrow.danger{color:var(--danger);animation:.5s ease-in-out infinite pulse}.edge-arrow.station{color:var(--clean)}.marker{color:var(--clean);text-shadow:0 1px 4px #000c;white-space:nowrap;font-size:13px;font-weight:600;position:absolute;transform:translate(-50%,-100%)}.vignette-hurt{opacity:0;transition:opacity .15s;position:absolute;inset:0;box-shadow:inset 0 0 160px 40px #ff281e99}@media (max-width:640px){.hud-tl{width:calc(100vw - 150px)}.species-line{font-size:18px}.diet{display:none}.score{font-size:26px}.hud-bc{bottom:140px}.panel{padding:20px}}.tip{background:var(--glass-strong);border:1px solid var(--edge);border-left:4px solid var(--ink-dim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;will-change:transform;border-radius:12px;max-width:260px;padding:8px 12px;position:absolute;top:0;left:0}.tip-name{font-size:15px;font-weight:600}.tip-text{font-family:var(--body);color:var(--ink-dim);margin-top:2px;font-size:12.5px}.tip.good{border-left-color:var(--food)}.tip.good .tip-text{color:var(--food)}.tip.danger{border-left-color:var(--danger)}.tip.danger .tip-text{color:#ff8a7a}.tip.toxic{border-left-color:#c47bff}.tip.toxic .tip-text{color:#d8a6ff}.tip.info{border-left-color:var(--clean)}.reticle{pointer-events:none;color:var(--ink);will-change:transform;border-radius:50%;position:absolute;top:0;left:0}.reticle.hover{opacity:.75;border:2px dashed;animation:6s linear infinite spin}.reticle.target{border:3px solid;box-shadow:0 0 12px,inset 0 0 8px}.reticle.target:before,.reticle.target:after{content:"";opacity:.5;clip-path:polygon(0 40%,100% 40%,100% 60%,0 60%);border:2px solid;border-radius:50%;position:absolute;inset:-9px}.reticle.target:after{clip-path:polygon(40% 0,60% 0,60% 100%,40% 100%)}.reticle.good{color:var(--food)}.reticle.danger{color:var(--danger)}.reticle.toxic{color:#c47bff}.reticle.bad,.reticle.info{color:var(--ink-dim)}@keyframes spin{to{rotate:360deg}}.popup.good{color:var(--food);font-size:20px}.popup.bad,.popup.info{color:var(--ink);font-size:16px}.popup.danger{color:#ff8a7a;font-size:18px}.popup.toxic{color:#d78bff;font-size:20px}