:root{--bg:#f5f8f7;--panel:#ffffff;--ink:#27464c;--muted:#688388;--line:#c6d8d8;--accent:#258ab2;--accent-ink:#ffffff;--water:#eaf4f5;--theme-color:#f5f8f7}
[data-theme="dark"]{--bg:#0b151e;--panel:#13232f;--ink:#d5e8ee;--muted:#8aa8b4;--line:#2b4554;--accent:#62cbea;--accent-ink:#102b37;--water:#0d202b;--theme-color:#0b151e}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}body{display:flex;justify-content:center}.page{width:min(940px,100%);padding:16px 16px max(12px,env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-bottom:12px}.topbar h1{font-size:18px;letter-spacing:.03em;margin:0}.back{display:flex;align-items:center;min-height:44px;min-width:44px;font-size:11px;color:var(--muted);text-decoration:none;white-space:nowrap}.utilities{display:flex;gap:6px}.utilities button{min-width:44px;font-size:10px;padding:8px}.utilities .theme-toggle{position:static;transform:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel);color:var(--ink);min-height:44px;border-radius:4px;letter-spacing:0}.utilities .theme-toggle::before{content:none}
button,select{font:700 12px ui-monospace,monospace;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:4px;min-height:44px;padding:10px 16px;cursor:pointer;box-shadow:none}button:disabled{opacity:.55;cursor:default}button:hover:not(:disabled){border-color:var(--accent)}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.secondary{background:transparent}
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:9px}.stat{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:11px 12px;background:var(--panel);border:1px solid var(--line);border-radius:4px}.stat span{font-size:10px;color:var(--muted)}.stat b{font-size:14px;white-space:nowrap}.growth-line{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:10px;color:var(--muted)}.growth-line b{min-width:44px;text-align:right;font-size:10px}.growth-track{flex:1;height:6px;background:var(--water);border:1px solid var(--line);border-radius:3px;overflow:hidden}.growth-track i{display:block;width:0;height:100%;background:var(--accent)}
.arena{position:relative;width:100%;height:min(540px,calc(100dvh - 284px));min-height:170px;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--water);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.arena:has(canvas:focus-visible){outline:2px solid var(--accent);outline-offset:3px}.arena canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.overlay{position:absolute;inset:0;display:flex;align-items:safe center;justify-content:center;overflow:auto;padding:18px;background:color-mix(in srgb,var(--water) 72%,transparent);touch-action:manipulation}.overlay[hidden],[hidden]{display:none!important}.panel{width:min(330px,100%);padding:23px;background:var(--panel);border:1px solid var(--line);border-radius:5px;text-align:center}.eyebrow{font-size:10px;letter-spacing:.08em;color:var(--muted)}.panel h2{font-size:23px;margin:15px 0 10px}.panel p{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 18px}.panel button{width:100%;margin-top:9px}.panel label{display:grid;gap:7px;font-size:10px;color:var(--muted)}.panel select{width:100%;font-size:12px;text-align:center}
.action-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.legend{display:flex;min-width:0;flex:1;gap:14px;flex-wrap:wrap;font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px;white-space:nowrap}.legend-food::before{content:'●';color:#72b69c;font-size:10px}.legend-danger::before{content:'▴';color:#cf7258;font-size:12px}.legend-equal::before{content:'=';font-weight:700}.actions{display:flex;gap:8px;flex-shrink:0}#dashButton{min-width:112px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.hint{font-size:10px;color:var(--muted);line-height:1.6;margin:9px 0 8px}.mobile-hint{display:none}footer{font-size:9px;color:var(--muted);line-height:1.5}
@media(max-width:600px){.page{padding:10px 12px max(10px,env(safe-area-inset-bottom))}.topbar{margin-bottom:9px;gap:6px}.topbar h1{font-size:15px}.back{font-size:10px}.utilities{gap:4px}.utilities button{min-width:44px;padding:8px 6px;font-size:9px}.hud{gap:5px}.stat{display:block;padding:8px}.stat span{display:block;font-size:9px;margin-bottom:4px}.stat b{font-size:14px}.arena{height:calc(100dvh - 300px);min-height:180px;max-height:540px}.action-row{align-items:flex-start;gap:10px;margin-top:10px}.legend{gap:5px 8px;max-width:155px;line-height:1.5;font-size:10px}.actions{gap:6px}.actions button{padding:9px 11px;font-size:11px}#dashButton{min-width:94px}.desktop-hint{display:none}.mobile-hint{display:inline}.hint{font-size:10px}.panel{padding:18px}.panel h2{font-size:21px}}
@media(max-height:480px) and (min-width:600px){.page{padding:8px 12px}.topbar{min-height:38px;margin-bottom:6px}.hud{margin-bottom:6px}.stat{padding:6px 10px}.growth-line{margin-bottom:6px}.arena{height:calc(100dvh - 218px);min-height:160px}.action-row{margin-top:6px}.hint{margin:5px 0;font-size:9px}footer{display:none}.panel{padding:12px 18px}.panel h2{font-size:19px;margin:8px 0}.panel p{font-size:11px;margin-bottom:7px}.panel label{display:none}.panel button{margin-top:5px}.mobile-hint{display:inline}.desktop-hint{display:none}}
.bottom-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}.bottom-row .hint{flex:1;min-width:0;margin:0}.bottom-row .clear-data-toggle{position:static;transform:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:4px;min-width:64px;min-height:44px;padding:8px;font-size:9px;flex-shrink:0;margin:0}.bottom-row .clear-data-toggle::before{content:none}footer{margin-top:6px}
@media(max-height:480px) and (min-width:600px){.panel label{display:grid}.panel label span{display:none}.bottom-row{margin-top:3px;gap:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}