:root{--bg:#1b2b34;--ink:#d8e6ec;--accent:#f2c66d;--ui-font:ui-rounded, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;--touch-button-size:56px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--ui-font);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0;overflow:hidden}#app{place-items:center;display:grid;position:fixed;inset:0}#stage{image-rendering:pixelated;image-rendering:crisp-edges;display:block}#ui{pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:fixed;inset:0}#rotate-prompt{text-align:center;background:var(--bg);z-index:10;place-items:center;padding:2rem;font-size:1.25rem;display:grid;position:fixed;inset:0}#rotate-prompt[hidden]{display:none}.perf-hud{top:calc(env(safe-area-inset-top) + 4px);left:calc(env(safe-area-inset-left) + 6px);color:var(--accent);text-shadow:0 1px #000;pointer-events:none;white-space:pre;opacity:.85;font:11px/1.4 ui-monospace,SF Mono,Menlo,monospace;position:absolute}noscript{text-align:center;padding:2rem;display:block}.touch-controls{pointer-events:none;position:fixed;inset:0}.touch-stick-zone{pointer-events:auto;touch-action:none;position:absolute;inset:0 50% 0 0}.touch-stick{opacity:0;pointer-events:none;background:#1b2b3440;border:2px solid #d8e6ec59;border-radius:50%;width:88px;height:88px;margin:-44px 0 0 -44px;transition:opacity .12s ease-out;position:fixed}.touch-stick-nub{background:#f2c66dbf;border-radius:50%;width:38px;height:38px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.touch-buttons{right:max(env(safe-area-inset-right), 8px);bottom:max(env(safe-area-inset-bottom), 14px);grid-template-columns:repeat(3, var(--touch-button-size));grid-template-rows:repeat(3, var(--touch-button-size));pointer-events:none;gap:5px;display:grid;position:absolute}.touch-button--top{grid-area:1/2}.touch-button--left{grid-area:2/1}.touch-button--right{grid-area:2/3}.touch-button--bottom{grid-area:3/2}.touch-button{width:var(--touch-button-size);height:var(--touch-button-size);border:2px solid color-mix(in srgb, var(--tint) 70%, transparent);color:var(--tint);font:600 22px/1 var(--ui-font);pointer-events:auto;touch-action:none;background:#1b2b3480;border-radius:50%;transition:transform 80ms ease-out,background 80ms ease-out}.touch-button svg,.settings-slot svg{pointer-events:none}.touch-button.is-pressed{background:color-mix(in srgb, var(--tint) 55%, transparent);color:#10202a;transform:scale(.9)}body:not(.has-touch) .touch-controls{display:none}.settings-root{pointer-events:none;z-index:20;position:fixed;inset:0}.settings-open{top:max(env(safe-area-inset-top), 8px);right:max(env(safe-area-inset-right), 8px);width:40px;height:40px;color:var(--ink);pointer-events:auto;touch-action:none;background:#1b2b3480;border:1px solid #d8e6ec40;border-radius:50%;font-size:18px;line-height:1;position:absolute}.settings-panel{padding:max(env(safe-area-inset-top), 14px) max(env(safe-area-inset-right), 20px) max(env(safe-area-inset-bottom), 14px) max(env(safe-area-inset-left), 20px);pointer-events:auto;touch-action:pan-y;background:#0f1a20f2;flex-direction:column;gap:10px;display:flex;position:absolute;inset:0;overflow-y:auto}.settings-panel[hidden]{display:none}.settings-header h2{margin:0;font-size:17px;font-weight:600}.settings-hint{opacity:.65;margin:2px 0 0;font-size:12px}.settings-body{flex:1;justify-content:center;align-items:center;gap:24px;min-height:0;display:flex}.settings-diamond{flex:none;grid-template-rows:repeat(3,60px);grid-template-columns:repeat(3,74px);gap:4px;display:grid}.settings-slot--top{grid-area:1/2}.settings-slot--left{grid-area:2/1}.settings-slot--right{grid-area:2/3}.settings-slot--bottom{grid-area:3/2}.settings-slot{color:var(--tint);pointer-events:auto;background:#1b2b3499;border:2px solid #d8e6ec29;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:3px;display:flex}.settings-slot.is-selected{border-color:var(--tint);background:color-mix(in srgb, var(--tint) 18%, #1b2b3499)}.settings-slot-label{font:500 10px/1 var(--ui-font);color:var(--ink);opacity:.8}.settings-actions-list{flex-direction:column;flex:1;gap:6px;max-width:260px;display:flex}.settings-action-option{min-height:42px;color:var(--ink);font:500 14px/1.2 var(--ui-font);text-align:left;pointer-events:auto;background:#1b2b34b3;border:1px solid #d8e6ec29;border-radius:10px;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 14px;display:flex}.settings-action-option.is-current{border-color:var(--tint);background:color-mix(in srgb, var(--tint) 20%, #1b2b34b3)}.settings-action-state{opacity:.6;white-space:nowrap;font-size:10px}.settings-footer{gap:10px;display:flex}.settings-primary,.settings-secondary{min-height:42px;font:600 14px/1 var(--ui-font);pointer-events:auto;border-radius:10px;padding:0 20px}.settings-primary{background:var(--accent);color:#16242c;border:none;flex:1}.settings-secondary{color:var(--ink);background:0 0;border:1px solid #d8e6ec40}.hud{top:max(env(safe-area-inset-top), 6px);pointer-events:none;flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.hud-clock{font:500 12px/1 var(--ui-font);white-space:nowrap;background:#0f1a2099;border:1px solid #d8e6ec24;border-radius:999px;align-items:baseline;gap:10px;padding:5px 12px;display:flex}.hud-time{font-variant-numeric:tabular-nums;color:var(--accent);font-size:14px;font-weight:600}.hud-date,.hud-weather{opacity:.8}.hud-area{font:600 13px/1 var(--ui-font);color:var(--ink);text-shadow:0 1px 2px #000c;opacity:0}.hud-area.is-showing{animation:2.6s ease-out forwards hud-area-flash}@keyframes hud-area-flash{0%{opacity:0;transform:translateY(-4px)}15%{opacity:1;transform:translateY(0)}70%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.hud-area.is-showing{opacity:1;animation:none}}.item-bar{left:50%;bottom:max(env(safe-area-inset-bottom), 10px);pointer-events:none;z-index:1;gap:5px;display:flex;position:absolute;transform:translate(-50%)}.item-slot{width:46px;height:40px;color:var(--ink);font:600 10px/1 var(--ui-font);pointer-events:auto;touch-action:none;background:#0f1a209e;border:2px solid #d8e6ec2e;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:0;display:flex}.item-slot.is-selected{border-color:var(--accent);background:#f2c66d2e}.item-slot.is-selected .item-label{color:var(--ink)}.item-slot.is-empty{opacity:.45}.item-label,.item-count{pointer-events:none}.item-label{color:var(--tint,var(--ink))}.item-count{font-variant-numeric:tabular-nums;opacity:.7;font-size:9px}.toast{left:50%;bottom:calc(max(env(safe-area-inset-bottom), 10px) + 52px);max-width:70vw;color:var(--ink);font:500 12px/1.2 var(--ui-font);text-align:center;white-space:nowrap;opacity:0;pointer-events:none;background:#0f1a20d9;border-radius:999px;padding:6px 14px;transition:opacity .14s ease-out,transform .14s ease-out;position:absolute;transform:translate(-50%)translateY(4px)}.toast.is-showing{opacity:1;transform:translate(-50%)translateY(0)}.fishing{pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:38%;left:50%;transform:translate(-50%)}.fishing[hidden]{display:none}.fishing-prompt{color:var(--ink);font:600 14px/1 var(--ui-font);background:#0f1a20cc;border-radius:999px;padding:4px 14px}.fishing-prompt.is-bite{color:#16242c;background:#f2c66de6;font-size:20px;animation:.32s ease-out infinite alternate fishing-bite}@keyframes fishing-bite{0%{transform:scale(1)}to{transform:scale(1.14)}}.fishing-bar{background:#0f1a20cc;border:2px solid #d8e6ec66;border-radius:999px;width:min(260px,62vw);height:18px;position:relative;overflow:hidden}.fishing-bar[hidden]{display:none}.fishing-zone{background:#8fd6a08c;position:absolute;top:0;bottom:0}.fishing-marker{background:var(--accent);width:4px;margin-left:-2px;position:absolute;top:-2px;bottom:-2px}@media (prefers-reduced-motion:reduce){.fishing-prompt.is-bite{animation:none}}.catch{min-width:200px;color:var(--ink);opacity:0;pointer-events:none;background:#0c161ced;border:2px solid #d8e6ec40;border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:12px 22px 14px;transition:opacity .16s ease-out,transform .16s ease-out;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.94)}.catch[hidden]{display:none}.catch.is-showing{opacity:1;transform:translate(-50%,-50%)scale(1)}.catch-banner{font:700 10px/1 var(--ui-font);letter-spacing:1.4px;text-transform:uppercase;opacity:.75}.catch-banner.is-record{color:var(--accent);opacity:1}.catch-banner.is-first{color:#8fd6a0;opacity:1}.catch-art{place-items:center;min-height:80px;margin:2px 0;display:grid}.catch-art canvas{image-rendering:pixelated}.catch-title{font:600 16px/1 var(--ui-font)}.catch-stats{font:500 12px/1.5 var(--ui-font);grid-template-columns:auto auto;gap:1px 14px;margin:6px 0 0;display:grid}.catch-stats dt{opacity:.6}.catch-stats dd{text-align:right;font-variant-numeric:tabular-nums;color:var(--accent);margin:0}@media (prefers-reduced-motion:reduce){.catch{transition:none}}.tackle-root{pointer-events:none;z-index:19;position:fixed;inset:0}.tackle-open{top:max(env(safe-area-inset-top), 8px);right:calc(max(env(safe-area-inset-right), 8px) + 48px);pointer-events:auto;touch-action:none;background:#1b2b3480;border:1px solid #d8e6ec40;border-radius:50%;width:40px;height:40px;font-size:17px;line-height:1;position:absolute}.tackle-panel{padding:max(env(safe-area-inset-top), 12px) max(env(safe-area-inset-right), 18px) max(env(safe-area-inset-bottom), 12px) max(env(safe-area-inset-left), 18px);pointer-events:auto;background:#0f1a20f5;flex-direction:column;gap:8px;display:flex;position:absolute;inset:0}.tackle-panel[hidden]{display:none}.tackle-panel h2{margin:0;font-size:17px}.tackle-panel h3{letter-spacing:1px;text-transform:uppercase;opacity:.55;margin:6px 0 2px;font-size:11px}.tackle-body{touch-action:pan-y;-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow-y:auto}.tackle-baits,.tackle-recipes{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;display:grid}.tackle-bait,.tackle-recipe{color:var(--ink);font:600 13px/1.25 var(--ui-font);text-align:left;pointer-events:auto;background:#1b2b34b3;border:1px solid #d8e6ec29;border-radius:9px;grid-template-columns:1fr auto;gap:0 8px;padding:7px 11px;display:grid}.tackle-bait.is-chosen{border-color:var(--tint,var(--accent));background:color-mix(in srgb, var(--tint,var(--accent)) 20%, #1b2b34b3)}.tackle-recipe.is-ready{border-color:#8fd6a0}.tackle-recipe.is-owned{opacity:.55}.tackle-bait-name{color:var(--tint,var(--ink))}.tackle-bait-count,.tackle-recipe-status{font:500 10px/1.4 var(--ui-font);opacity:.7;text-align:right}.tackle-note,.tackle-parts{font:400 10px/1.4 var(--ui-font);opacity:.55;grid-column:1/-1}.tackle-parts{font-variant-numeric:tabular-nums;opacity:.75}.tackle-panel>.settings-primary{flex:none}.tackle-empty{font:400 12px/1.4 var(--ui-font);opacity:.6;margin:0}.gear-root{pointer-events:none;z-index:19;position:fixed;inset:0}.gear-open{top:max(env(safe-area-inset-top), 8px);right:calc(max(env(safe-area-inset-right), 8px) + 48px);pointer-events:auto;touch-action:none;background:#1b2b3480;border:1px solid #d8e6ec40;border-radius:50%;width:40px;height:40px;font-size:17px;line-height:1;position:absolute}.gear-panel{padding:max(env(safe-area-inset-top), 10px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 10px) max(env(safe-area-inset-left), 16px);pointer-events:auto;background:#0f1a20f5;flex-direction:column;gap:8px;display:flex;position:absolute;inset:0}.gear-panel[hidden],body.menu-open .settings-open,body.menu-open .gear-open{display:none}.gear-tabs{flex:none;gap:6px;display:flex}.gear-tab{min-height:34px;color:var(--ink);font:600 12px/1 var(--ui-font);pointer-events:auto;background:#1b2b34b3;border:1px solid #d8e6ec29;border-radius:8px;flex:1}.gear-tab.is-active{border-color:var(--accent);background:#f2c66d2e}.gear-body{touch-action:pan-y;-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow-y:auto}.gear-done{background:var(--accent);color:#16242c;min-height:40px;font:600 14px/1 var(--ui-font);pointer-events:auto;border:none;border-radius:9px;flex:none}.gear-hint{font:400 11px/1.4 var(--ui-font);opacity:.6;margin:0 0 6px}.gear-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;display:grid}.gear-card{color:var(--ink);font:600 13px/1.25 var(--ui-font);text-align:left;pointer-events:auto;background:#1b2b34b3;border:1px solid #d8e6ec29;border-radius:9px;grid-template-columns:1fr auto;gap:0 8px;padding:7px 11px;display:grid}.gear-card.is-chosen{border-color:var(--tint,var(--accent));background:color-mix(in srgb, var(--tint,var(--accent)) 20%, #1b2b34b3)}.gear-card.is-ready{border-color:#8fd6a0}.gear-card.is-dim{opacity:.5}.gear-card-name{color:var(--tint,var(--ink))}.gear-card-count{font:500 10px/1.4 var(--ui-font);opacity:.7;text-align:right}.gear-note,.gear-parts{font:400 10px/1.4 var(--ui-font);opacity:.55;grid-column:1/-1}.gear-parts{font-variant-numeric:tabular-nums;opacity:.75}.gear-slots{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px;display:grid}.gear-slot{min-height:44px;color:var(--tint,var(--ink));font:600 10px/1 var(--ui-font);pointer-events:auto;background:#1b2b349e;border:2px solid #d8e6ec24;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:1px;display:flex}.gear-slot.is-hotbar{border-color:#d8e6ec4d}.gear-slot.is-selected{border-color:var(--accent);background:#f2c66d29}.gear-slot.is-empty{opacity:.4}.gear-slot-count{font-variant-numeric:tabular-nums;opacity:.7;font-size:9px}.tool-open{top:max(env(safe-area-inset-top), 8px);right:calc(max(env(safe-area-inset-right), 8px) + 96px);pointer-events:auto;touch-action:none;z-index:1;background:#1b2b3480;border:1px solid #d8e6ec40;border-radius:50%;place-items:center;width:40px;height:40px;padding:0;display:grid;position:absolute}.tool-open.is-open{border-color:var(--accent);background:#f2c66d33}.tool-icon,.tool-option-icon{image-rendering:pixelated;pointer-events:none}.tool-icon{width:26px;height:26px}.tool-picker{top:calc(max(env(safe-area-inset-top), 8px) + 46px);right:calc(max(env(safe-area-inset-right), 8px) + 48px);pointer-events:auto;touch-action:none;z-index:18;background:#0f1a20eb;border:1px solid #d8e6ec40;border-radius:10px;flex-direction:column;gap:4px;padding:6px;display:flex;position:absolute}.tool-picker[hidden]{display:none}.tool-option{min-height:44px;color:var(--ink);font:500 13px/1 var(--ui-font);text-align:left;white-space:nowrap;pointer-events:auto;touch-action:none;background:#1b2b3499;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;padding:0 12px 0 8px;display:flex}.tool-option.is-chosen{border-color:var(--accent);background:#f2c66d2e}.tool-option-icon{flex:none;width:24px;height:24px}.gear-slot.is-drop-target{border-color:var(--accent);border-style:dashed}.gear-slot.is-lifted{border-color:var(--accent);background:#f2c66d47;transform:translateY(-2px)}.bag-ghost{z-index:30;border:2px solid var(--accent);width:46px;height:40px;color:var(--tint,var(--ink));font:600 10px/1 var(--ui-font);pointer-events:none;background:#0f1a20e6;border-radius:8px;place-items:center;margin:-20px 0 0 -23px;display:grid;position:fixed;top:0;left:0}.bag-picker{background:#1b2b34b3;border:1px solid #d8e6ec40;border-radius:10px;margin-top:8px;padding:8px}.bag-picker[hidden]{display:none}.bag-picker-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:5px;display:grid}.bag-picker-option{min-height:44px;color:var(--tint,var(--ink));font:600 12px/1 var(--ui-font);text-align:left;pointer-events:auto;background:#0f1a2099;border:2px solid #d8e6ec24;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:0 10px;display:flex}.bag-picker-cancel{width:100%;min-height:40px;color:var(--ink);font:500 13px/1 var(--ui-font);pointer-events:auto;background:0 0;border:1px solid #d8e6ec40;border-radius:8px;margin-top:6px}.item-slot.is-out{opacity:.45}.item-slot.is-empty .item-label{opacity:.5}.bag-assign{left:50%;bottom:calc(max(env(safe-area-inset-bottom), 10px) + 48px);pointer-events:auto;touch-action:none;z-index:18;background:#0f1a20f0;border:1px solid #d8e6ec40;border-radius:10px;flex-wrap:wrap;justify-content:center;gap:5px;max-width:min(560px,86vw);padding:8px;display:flex;position:absolute;transform:translate(-50%)}.bag-assign[hidden]{display:none}.bag-assign-option,.bag-assign-clear{min-height:44px;color:var(--tint,var(--ink));font:600 12px/1 var(--ui-font);pointer-events:auto;touch-action:none;background:#1b2b34a6;border:2px solid #d8e6ec29;border-radius:8px;padding:0 12px}.bag-assign-clear{color:var(--ink);border-color:#d8503f80}.bag-assign-empty{color:var(--ink);font:400 12px/1.4 var(--ui-font);opacity:.7;margin:0;padding:8px}.gear-slot.is-in-bag:after{content:"";background:var(--accent);border-radius:50%;width:5px;height:5px;position:absolute;top:3px;right:3px}.gear-slot{position:relative}.bag-actions{background:#1b2b34b3;border:1px solid #d8e6ec40;border-radius:10px;margin-top:8px;padding:8px}.bag-action-title{color:var(--ink);font:600 13px/1.2 var(--ui-font);margin:0 0 6px}.bag-action-row{flex-wrap:wrap;gap:6px;display:flex}.gear-slot.is-open{border-color:var(--accent)}.bag-actions[hidden]{display:none}.bag-action{border:2px solid var(--accent);min-height:44px;color:var(--ink);font:600 13px/1 var(--ui-font);pointer-events:auto;background:#f2c66d2e;border-radius:9px;padding:0 18px}.bag-assign-panel{background:#1b2b34b3;border:1px solid #d8e6ec40;border-radius:10px;margin-top:8px;padding:8px}.gear-slot.is-out{opacity:.5}.health-bar{top:calc(max(env(safe-area-inset-top), 8px) + 38px);left:max(env(safe-area-inset-left), 10px);pointer-events:none;gap:2px;display:flex;position:absolute}.heart{width:16px;height:16px;font-size:16px;line-height:1;display:inline-block;position:relative}.heart-empty,.heart-full{text-shadow:0 1px #000000bf;position:absolute;inset:0}.heart-empty{color:#d8e6ec4d}.heart-full{color:#d8503f;clip-path:inset(0 calc((1 - var(--fill,0)) * 100%) 0 0)}.spirit-bar{top:calc(max(env(safe-area-inset-top), 8px) + 58px);left:max(env(safe-area-inset-left), 10px);pointer-events:none;background:#0f1a2099;border:1px solid #d8e6ec4d;border-radius:3px;width:84px;height:5px;position:absolute;overflow:hidden}.spirit-bar:after{content:"";width:calc(var(--fill,1) * 100%);background:#5fc3e8;height:100%;display:block}
