:root{--ink: #f6f2df;--muted: rgba(246, 242, 223, .68);--panel: rgba(14, 18, 15, .76);--panel-strong: rgba(14, 18, 15, .9);--line: rgba(246, 242, 223, .18);--green: #43e2b8;--gold: #ffd166;--red: #ef476f;--blue: #4cc9f0;color:var(--ink);background:#0e120f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none}body{overflow:hidden}button{font:inherit;touch-action:manipulation}#app{position:relative;display:grid;min-width:320px;min-height:100dvh;place-items:center;background:radial-gradient(circle at 18% 22%,rgba(255,209,102,.12),transparent 28rem),radial-gradient(circle at 82% 74%,rgba(67,226,184,.1),transparent 26rem),linear-gradient(140deg,#101512,#191611 48%,#111817)}#game-host{width:min(100vw,calc(100dvh * 13 / 9));max-width:1180px;aspect-ratio:13 / 9;border:1px solid rgba(246,242,223,.2);background:#101512;box-shadow:0 24px 70px #00000075,0 0 0 5px #10151280}#game-host canvas{display:block}#hud-root{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:grid;place-items:center;pointer-events:none}.hud-shell{position:relative;display:flex;width:min(100vw,calc(100dvh * 13 / 9));max-width:1180px;height:min(100dvh,calc(100vw * 9 / 13));max-height:817px;flex-direction:column;justify-content:space-between;gap:12px;padding:14px}.top-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);gap:10px;align-items:start}.status-strip{display:grid;grid-template-columns:repeat(6,minmax(76px,1fr));gap:8px}.stat,.meter,.command-strip,.guide-chip,.phase-panel,.reward-panel{border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 12px 32px #00000047;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.stat,.meter{min-width:0;min-height:54px;padding:9px 10px}.stat span,.meter span,.guide-chip span,.phase-kicker{display:block;overflow:hidden;color:var(--muted);font-size:.72rem;line-height:1.1;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.stat strong{display:block;overflow:hidden;margin-top:6px;color:var(--ink);font-size:1.1rem;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.meter-track,.reward-progress{width:100%;height:10px;margin-top:10px;overflow:hidden;border-radius:999px;background:#f6f2df21}.meter-track i,.reward-progress i{display:block;width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--gold),var(--red))}.guide-chip{position:relative;min-height:86px;padding:11px 12px;pointer-events:none}.guide-chip[hidden]{display:none}.guide-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.guide-close{display:inline-grid;width:24px;height:24px;flex:0 0 auto;place-items:center;border:1px solid rgba(246,242,223,.18);border-radius:999px;color:#f6f2dfc7;background:#f6f2df14;cursor:pointer;line-height:1;pointer-events:auto}.guide-close:hover{color:#101512;background:var(--gold)}.guide-chip strong{display:block;margin-top:7px;color:var(--gold);font-size:1rem;line-height:1.15}.guide-chip p,.phase-panel p,.reward-panel p{margin:7px 0 0;color:#f6f2dfd6;font-size:.88rem;line-height:1.38}.guide-chip[data-stage=reward]{border-color:#ffd16685;background:#281f0ddb}.bottom-row{display:flex;align-items:end;justify-content:flex-end;gap:10px}.command-strip{display:flex;gap:8px;padding:8px;pointer-events:auto}.game-button,.pad-button{display:inline-grid;min-width:44px;min-height:40px;place-items:center;border:1px solid rgba(246,242,223,.24);border-radius:8px;color:var(--ink);background:#43e2b824;cursor:pointer}.game-button{max-width:160px;padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-button.primary{color:#101512;border-color:#ffd166c2;background:var(--gold);font-weight:700}.game-button.ghost{background:#f6f2df14}.reward-button{color:#101512;border-color:#ffd166b8;background:var(--gold);font-weight:700}.game-button:hover,.pad-button:hover{background:#43e2b83d}.game-button.primary:hover,.reward-button:hover{background:#ffe08d}.game-button:active,.pad-button:active{transform:translateY(1px)}.game-button:disabled,.pad-button:disabled{color:#f6f2df70;border-color:#f6f2df1a;background:#f6f2df12;cursor:not-allowed;transform:none}.phase-panel,.reward-panel{position:absolute;top:50%;left:50%;display:grid;width:min(410px,calc(100vw - 32px));gap:12px;padding:18px;pointer-events:auto;transform:translate(-50%,-50%)}.phase-panel{background:linear-gradient(180deg,rgba(255,209,102,.11),transparent 44%),var(--panel-strong)}.reward-panel{border-color:#ffd1666b;background:linear-gradient(180deg,rgba(255,209,102,.14),transparent 50%),#16120cf0}.phase-panel[hidden],.reward-panel[hidden],.bottom-row[hidden],.game-button[hidden]{display:none}.phase-panel h1,.reward-panel h2{margin:0;color:var(--gold);font-size:1.55rem;line-height:1.15}.phase-actions{display:flex;flex-wrap:wrap;gap:8px}.reward-panel strong{color:var(--ink);font-size:1.1rem}#touch-controls{position:absolute;right:14px;bottom:74px;z-index:8;display:none;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:7px;pointer-events:auto}.pad-button{min-width:52px;min-height:52px;background:#ffd16629}.pad-button[data-control=up]{grid-column:2}.pad-button[data-control=left]{grid-column:1;grid-row:2}.pad-button[data-control=repair]{grid-column:2;grid-row:2;color:#101512;background:var(--gold);font-weight:800}.pad-button[data-control=right]{grid-column:3;grid-row:2}.pad-button[data-control=down]{grid-column:2;grid-row:3}@media(max-width:900px),(pointer:coarse){#app,#hud-root{place-items:start center}.hud-shell{height:min(100dvh,calc(100vw * 9 / 13));max-height:none;padding:10px}.top-row{grid-template-columns:1fr}.status-strip{grid-template-columns:repeat(3,minmax(82px,1fr))}.guide-chip{width:min(420px,100%);min-height:48px;padding:6px 8px}.guide-chip strong{margin-top:3px;font-size:.88rem}.guide-chip p{display:-webkit-box;margin-top:2px;overflow:hidden;font-size:.72rem;line-height:1.2;-webkit-box-orient:vertical;-webkit-line-clamp:1}.guide-close{width:30px;height:30px}.stat,.meter{min-height:48px;padding:7px 8px}.stat strong{font-size:.98rem}.command-strip{max-width:calc(100vw - 20px);flex-wrap:wrap;justify-content:flex-end}#touch-controls{top:calc((100vw * 9 / 13) + 86px);right:14px;bottom:auto;display:grid}.phase-panel,.reward-panel{width:min(370px,calc(100vw - 20px));padding:14px}.phase-panel h1,.reward-panel h2{font-size:1.35rem}}@media(max-height:560px){.status-strip{grid-template-columns:repeat(6,minmax(58px,1fr))}.stat,.meter{min-height:44px}.stat span,.meter span,.guide-chip span,.phase-kicker{font-size:.66rem}.stat strong{margin-top:4px;font-size:.92rem}.guide-chip{min-height:60px;padding:8px 10px}.guide-chip p{margin-top:4px}#touch-controls{bottom:60px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}.pad-button{min-width:44px;min-height:44px}}
