:root{--bg: #070b14;--panel: rgba(8, 14, 28, .86);--amber: #f0a030;--amber-2: #ffcc66;--cyan: #7ec8e8;--violet: #b8a0e0;--text: #e8eef8;--muted: #8aa0b8;--danger: #e07070;--ok: #7dcea0;--font: "Trebuchet MS", "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font)}button,input,select{font-family:inherit}.app{height:100%;display:grid;grid-template-rows:1fr}.phaser-root{position:absolute;inset:0}.hud{position:absolute;inset:0;pointer-events:none;z-index:2}.phaser-root{z-index:1}.hud .bar,.hud .side,.hud .dock,.hud .create,.hud .banner,.hud .move-hint{pointer-events:auto}.move-hint{position:absolute;left:50%;bottom:108px;transform:translate(-50%);padding:6px 14px;border-radius:0 12px;background:#080e1cb8;border:1px solid #3a4a66;color:var(--cyan);font-size:12px;letter-spacing:.04em;pointer-events:none}.bar,.panel,.dock,.create{background:var(--panel);border:1px solid #2a3a55;box-shadow:0 0 0 1px #000 inset}.bar{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:12px;align-items:center;padding:8px 12px;border-radius:0 18px;min-height:52px;flex-wrap:wrap}.brand{color:var(--amber);font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-left:8px solid var(--amber);padding-left:10px}.stat{display:flex;flex-direction:column;min-width:72px}.stat b{color:var(--amber-2);font-size:13px}.stat span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.res{display:flex;gap:8px;flex-wrap:wrap}.res i{font-style:normal;color:var(--cyan);font-size:12px}.side{position:absolute;top:72px;width:min(300px,92vw);bottom:88px;display:flex;flex-direction:column;gap:8px;overflow:auto}.left{left:10px}.right{right:10px}.panel{padding:10px 12px;border-radius:0 14px}.panel h3{margin:0 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border-bottom:2px solid #3a2a10;padding-bottom:4px}.obj{list-style:none;margin:0;padding:0}.obj li{font-size:13px;padding:3px 0;color:var(--muted)}.obj li.done{color:var(--ok);text-decoration:line-through}.btn,.tab{background:#1a2438;color:var(--text);border:1px solid #3a4a66;padding:6px 10px;cursor:pointer}.btn:hover,.tab:hover{border-color:var(--amber);color:var(--amber-2)}.btn.primary{background:#3a2a10;border-color:var(--amber);color:var(--amber-2)}.btn:disabled{opacity:.45;cursor:not-allowed}.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}.tab.active{background:#3a2a10;color:var(--amber-2);border-color:var(--amber)}.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.hint{color:var(--danger);font-size:12px;margin-top:6px}.ok{color:var(--ok)}.log{font-size:12px;color:var(--muted);max-height:90px;overflow:auto}.dock{position:absolute;left:50%;bottom:12px;transform:translate(-50%);display:flex;gap:8px;padding:8px;border-radius:18px 0;align-items:center}.joy{width:96px;height:96px;border-radius:50%;border:2px solid #4a6080;position:relative;touch-action:none;background:#101828}.joy span{width:36px;height:36px;border-radius:50%;background:var(--cyan);position:absolute;left:30px;top:30px}.create{position:absolute;inset:8%;max-width:560px;margin:auto;height:fit-content;padding:24px;border-radius:0 28px;pointer-events:auto}.create h1{color:var(--amber);margin-top:0}.create label{display:block;margin:10px 0 4px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.create input,.create select{width:100%;padding:8px;background:#0c1422;color:var(--text);border:1px solid #3a4a66}.banner{position:absolute;top:64px;left:50%;transform:translate(-50%);background:#3a1820;color:#ffd0d0;padding:8px 14px}@media(max-width:800px){.side{position:relative;width:auto;bottom:auto;top:auto;max-height:34vh}.left,.right{left:8px;right:8px}.hud{display:flex;flex-direction:column}.bar{position:relative;inset:auto;margin:8px}.dock{position:relative;transform:none;left:auto;margin:8px auto}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}