:root{color-scheme:light;--ink:#294b3f;--muted:#687560;--paper:#f7f1dc;--green:#315b47;--line:#3b503424;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e9dfc2}button,input{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{border:0;background:transparent}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #ba7243;outline-offset:4px}button:hover{filter:brightness(.93)}button:active{transform:translateY(1px)}svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.symbol-library{position:absolute;width:0;height:0;overflow:hidden}#game{width:100%;height:100%;position:relative;isolation:isolate}#pond{display:block;width:100%;height:100%;touch-action:none;outline-offset:-5px;cursor:crosshair}.hud{transition:opacity .22s ease}.topbar{position:absolute;top:max(28px,env(safe-area-inset-top));left:38px;right:32px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.identity{pointer-events:none}h1{font-family:Georgia,"Times New Roman",serif;font-size:43px;letter-spacing:-2px;line-height:1;margin:0;font-weight:400}h1 .title-spark{font-family:serif;display:inline-block;font-size:31px;margin-left:9px;color:#a2753f;vertical-align:5px}.utility{display:flex;align-items:center;gap:1px;background:#faf6e6ad;border:1px solid #faf7e8c9;border-radius:30px;padding:5px;box-shadow:0 3px 18px #6a664509;backdrop-filter:blur(16px);pointer-events:auto}.icon-button,.speed-button{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:50%}.icon-button svg{width:19px;height:19px}.speed-button{font-size:14px;font-weight:600}.divider{height:21px;width:1px;background:var(--line);margin:0 5px}.bottom-hud{position:absolute;bottom:max(53px,calc(env(safe-area-inset-bottom) + 28px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:13px;pointer-events:none}.toolbar-shell{display:flex;align-items:center;gap:19px;border-radius:23px;background:#fbf6e8ee;padding:8px 21px 8px 8px;box-shadow:0 9px 35px #354b3520,0 1px 3px #465f2512,inset 0 1px #fff9e9;border:1px solid #fff9e8;pointer-events:auto;backdrop-filter:blur(18px)}.powers{display:flex;gap:4px}.power{width:73px;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:16px;position:relative;transition:background .2s,color .2s}.power span{font-size:10px;font-weight:600}.power svg{width:24px;height:24px}.power kbd{position:absolute;right:7px;top:5px;font:8px ui-sans-serif,system-ui;opacity:.35}.power.selected{background:var(--green);color:#fff4d7;box-shadow:0 3px 6px #335c4925}.influence{border-left:1px solid var(--line);padding-left:18px;display:flex;align-items:center;gap:11px;min-width:155px}.influence>svg{width:26px;height:26px;color:#b48c43}.influence b{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}.influence small{font-size:9px;color:#8a927c}.influence-label{font-size:8px;letter-spacing:.4px;color:#6c7b66}.influence-track{width:84px;height:3px;background:#dde0c9;margin:4px 0 2px;border-radius:3px;overflow:hidden}.influence-track i{display:block;width:100%;height:100%;background:#7d9562;transition:width .15s}footer{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:38px;right:35px;display:flex;align-items:center;justify-content:flex-end;color:#7b806a;font-size:10px;letter-spacing:.4px;pointer-events:none}footer button{pointer-events:auto;min-height:44px;margin:-13px 0;padding:0 4px;font-size:9px;letter-spacing:.7px}#seed-label{text-transform:uppercase;color:#5a6d53}#restore-hud{position:absolute;right:20px;bottom:max(20px,env(safe-area-inset-bottom));background:#faf5e5e6;border:1px solid #fff4df;border-radius:25px;padding:0 17px;min-height:46px;display:flex;align-items:center;gap:9px;font-size:12px;box-shadow:0 3px 15px #264b2420}.hud-hidden .hud{opacity:0;visibility:hidden;pointer-events:none}.hud-hidden .hud *{pointer-events:none}#paused-label{position:absolute;top:25%;left:50%;transform:translateX(-50%);font:italic 17px Georgia,serif;padding:12px 18px;border-radius:30px;background:#f8f3dece;white-space:nowrap;pointer-events:none}#paused-label span{font:10px ui-sans-serif,system-ui;color:#727d62}#toast{position:absolute;left:50%;top:145px;transform:translateX(-50%);font-size:12px;text-align:center;max-width:calc(100% - 32px);background:#f9f4e4ed;padding:11px 18px;border-radius:25px;box-shadow:0 3px 20px #24463215;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}#inspection{position:absolute;width:194px;pointer-events:none;padding:15px 17px;background:#faf5e5f2;border:1px solid #fffae9;border-radius:17px;box-shadow:0 6px 22px #214e3726;transform:translate(-50%,-100%)}#inspection:after{content:"";position:absolute;left:calc(50% - 6px);bottom:-6px;width:12px;height:12px;background:#faf5e5;transform:rotate(45deg)}#inspection button{pointer-events:auto;position:absolute;right:-2px;top:-1px;min-width:44px;min-height:44px;display:grid;place-items:center}#inspection button svg{width:13px;height:13px}#fish-name{font:22px Georgia,serif;letter-spacing:-.3px;margin:0 0 7px}#fish-thought{font-size:11px;margin:0;color:#5c6f57;line-height:1.5}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}[hidden]{display:none!important}dialog{color:var(--ink);background:#f8f2df;border:1px solid #fff9e7;border-radius:25px;max-width:450px;width:calc(100% - 28px);padding:31px;box-shadow:0 25px 90px #193f3940;max-height:calc(100% - 36px);overflow:auto}dialog::backdrop{background:#193f385c;backdrop-filter:blur(5px)}dialog h2{font:31px/1.15 Georgia,serif;letter-spacing:-.6px;margin:10px 0 15px}dialog p{font-size:13px;line-height:1.65;color:#617058}dialog .dialog-close{position:absolute;right:9px;top:8px}dialog .dialog-close svg{width:17px;height:17px}.field-notes{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:19px 0;padding:5px 0}.field-notes p{font-size:12px;margin:10px 0}.field-notes b{font-weight:600;color:#36573f}.notes-small{font-size:11px!important;line-height:1.7!important}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:49px;font-size:12px;border-top:1px solid var(--line)}.settings-row small{display:block;color:#7c846d;font-size:10px;margin-top:3px}input[type=checkbox]{width:44px;height:26px;accent-color:#476e4f;cursor:pointer}input[type=text]{width:100%;padding:12px;border:1px solid #8a9a73;background:#fffbed;border-radius:8px;color:#36573f;font-size:12px;margin-top:6px}.zoom-controls{display:flex;align-items:center}.zoom-controls button{width:44px;height:44px;font-size:22px}.zoom-controls span{font-size:10px;min-width:38px;text-align:center}.save-note{font-size:10px!important;padding:12px;border-radius:10px;background:#e8e9d580;color:#7b8069}.dialog-actions{display:flex;gap:9px;margin-top:17px}.soft-button,.solid-button{min-height:46px;border-radius:11px;padding:10px 15px;font-size:11px;flex:1;border:1px solid #bac5a27a;background:#fdf8e8}.solid-button{background:#315b47;border-color:#315b47;color:#fff5de}.text-button{display:block;margin:8px auto -10px;min-height:44px;font-size:10px;text-decoration:underline;text-underline-offset:3px}#share-fallback{font-size:11px;display:block;margin-top:15px}
@media(min-width:1700px){.topbar{left:55px;right:55px;top:40px}h1{font-size:52px}.bottom-hud{bottom:62px}}
@media(max-width:650px){.topbar{left:21px;right:15px;top:max(21px,env(safe-area-inset-top))}h1{font-size:32px;letter-spacing:-1.5px}h1 .title-spark{font-size:22px;margin-left:5px;vertical-align:4px}.utility{gap:0;padding:2px;border-radius:24px}.icon-button,.speed-button{min-width:40px;min-height:44px}.utility .divider,.desktop-hide{display:none}.utility .icon-button svg{width:16px;height:16px}.speed-button{font-size:12px}.topbar .identity{max-width:210px}.bottom-hud{bottom:max(43px,calc(env(safe-area-inset-bottom) + 27px));width:calc(100% - 24px);gap:10px}.toolbar-shell{width:100%;padding:6px;gap:0;border-radius:20px;justify-content:center}.powers{width:100%;gap:2px}.power{flex:1;width:auto;min-width:48px;min-height:66px;border-radius:14px;gap:6px}.power span{font-size:9px}.power svg{width:23px;height:23px}.power kbd{display:none}.influence{position:absolute;right:4px;bottom:86px;border:0;padding:0;min-width:0;gap:5px;background:#f6f0dcbf;border:1px solid #fff5db75;padding:8px 10px;border-radius:14px;backdrop-filter:blur(10px)}.influence>svg{width:20px;height:20px}.influence b{font-size:13px}.influence-track{width:51px;height:2px}.influence-label{display:none}.influence small{font-size:8px}footer{left:21px;right:18px;bottom:max(15px,env(safe-area-inset-bottom))}footer button{font-size:8px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#toast{top:122px;font-size:11px;min-width:200px}#inspection{width:175px;padding:13px 15px}#fish-name{font-size:20px}dialog{padding:26px}dialog h2{font-size:28px}.keyboard-notes{font-size:10px!important}}
@media(max-width:420px){.utility #sound{display:grid}.topbar{left:18px;right:14px}.utility .icon-button,.utility .speed-button{min-width:38px}.topbar h1{font-size:31px}}
@media(max-height:500px){.topbar{top:12px;left:20px;right:15px}h1{font-size:28px}h1 .title-spark{font-size:21px}.utility{padding:1px}.icon-button,.speed-button{min-height:40px}.bottom-hud{bottom:13px;gap:5px}.toolbar-shell{padding:4px 12px 4px 4px}.power{min-height:48px;width:59px;gap:3px}.power svg{width:19px;height:19px}.power span{font-size:8px}.influence{min-width:135px}.influence b{font-size:13px}footer{display:none}#toast{top:66px}#paused-label{top:22%}}
@media(max-width:650px){.utility{position:absolute;right:0;top:48px}.utility .icon-button,.utility .speed-button{min-width:44px;min-height:44px}.topbar h1{font-size:34px}.influence{bottom:86px}}
@media(max-height:500px) and (max-width:650px){.utility{top:0}.topbar h1{font-size:26px}}
.icon-button,.speed-button{min-width:44px;min-height:44px}input[type=checkbox]{min-height:44px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}