:root{--bg:#101810;--panel:#1c2a1f;--panel-2:#243626;--line:#3b5a3f;--text:#eef3e6;--muted:#a9b9a3;--accent:#e0a93a;--accent-text:#241a05;--danger:#c8553d;--ok:#6ec26a}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;padding:0;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{position:fixed;inset:0}canvas{touch-action:none;image-rendering:pixelated;display:block}.shell{z-index:10;-webkit-overflow-scrolling:touch;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;overflow:hidden auto}.shell:empty{display:none}.shell.in-game{pointer-events:none;overflow:hidden}.shell.in-game>*{pointer-events:none}.shell.in-game .hud-btn,.shell.in-game .modal,.shell.in-game .modal *{pointer-events:auto}.shell:not(.in-game){background:radial-gradient(1200px 600px at 50% -10%, #223a26 0%, var(--bg) 70%)}.screen{max-width:640px;margin:0 auto;padding:16px}.screen.center{justify-content:center;align-items:center;min-height:100%;display:flex}.screen.center>.card{width:100%}h1{letter-spacing:.02em;color:var(--accent);margin:0 0 4px;font-size:1.9rem}h2{margin:12px 0 8px;font-size:1.35rem}h3{margin:0 0 4px;font-size:1.1rem}p{margin:6px 0}.muted{color:var(--muted)}.small{font-size:.82rem}.error{color:#ff9a86;min-height:1.2em}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 6px 24px #0008}.row{flex-wrap:wrap;gap:10px;margin-top:10px;display:flex}.bar{justify-content:space-between;align-items:center;gap:8px;padding:4px 0 8px;display:flex}.who{color:var(--muted)}input{width:100%;font:inherit;color:var(--text);border:1px solid var(--line);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#0f1a11;border-radius:8px;margin:10px 0 0;padding:12px 14px;display:block}input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button{font:inherit;border:1px solid var(--line);background:var(--panel-2);min-height:44px;color:var(--text);cursor:pointer;touch-action:manipulation;border-radius:8px;padding:10px 16px}button:hover{background:#2d4530}button.primary{background:var(--accent);color:var(--accent-text);border-color:#b98420;font-weight:700}button.primary:hover{background:#f0bb52}button.danger{border-color:var(--danger);color:#ffb3a3}button[disabled]{opacity:.5;cursor:default}.slots{grid-template-columns:1fr;gap:12px;display:grid}.slot{min-height:140px}.heroes{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin:12px 0;display:grid}.hero{flex-direction:column;align-items:center;gap:4px;padding:8px 4px 10px;display:flex}.hero[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;background:#3a3a1c}.thumb{width:64px;height:64px;image-rendering:pixelated;transform-origin:50% 60%;background-position:0 0;background-repeat:no-repeat;margin:6px 0 12px;transform:scale(1.5)}.hero-name{text-align:center;font-size:.85rem}.hud{top:max(8px, env(safe-area-inset-top));justify-content:space-between;align-items:center;gap:8px;display:flex;position:absolute;left:8px;right:8px}.hud-btn{background:#0d160fcc;min-height:40px;padding:6px 12px}.status{color:var(--muted);background:#0d160fcc;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:.8rem;display:inline-flex}.dot{background:var(--ok);border-radius:50%;width:9px;height:9px}.dot[data-status=dirty],.dot[data-status=saving]{background:var(--accent)}.dot[data-status=error],.dot[data-status=conflict]{background:var(--danger)}.toast{left:50%;bottom:max(24px, env(safe-area-inset-bottom));border:1px solid var(--line);text-align:center;opacity:0;background:#0d160fee;border-radius:10px;max-width:min(92vw,520px);padding:10px 16px;transition:opacity .2s;position:absolute;transform:translate(-50%)}.toast.show{opacity:1}.modal{background:#000a;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.modal.hidden{display:none}.modal .card{max-width:420px}@media (width>=720px){.slots{grid-template-columns:repeat(3,1fr)}.screen{max-width:860px}}