:root{color-scheme:dark;--bg: #05080f;--panel: #0d1526;--line: #1d2b4a;--fg: #d8e4ff;--accent: #00e5a8;--warn: #ffd166}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-monospace,Menlo,Consolas,monospace}main{max-width:1100px;margin:0 auto;padding:8px 12px}h1{margin:4px 0;letter-spacing:.2em;font-size:clamp(18px,4vw,28px)}button{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px 12px;min-height:40px;font:inherit;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button[aria-pressed=true]{border-color:var(--accent);background:#0b2a24}button:focus-visible,input:focus-visible{outline:2px solid var(--warn);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}input{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px;min-height:40px;font:inherit}[data-testid=menu]{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.hud{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;padding:4px 0}.hud-icon{vertical-align:-3px;margin-right:4px;object-fit:contain}.hud strong{color:var(--warn)}.toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}.stage{position:relative;width:100%}.stage canvas{display:block}.tutorial{position:absolute;top:8px;right:8px;width:min(320px,calc(100% - 16px));background:#0d1526ee;border:1px solid var(--accent);border-radius:8px;padding:10px 12px;z-index:5}.tutorial h3{margin:0 0 6px}.tutorial p{margin:0 0 8px;font-size:13px}.tutorial button{margin-right:6px;min-height:36px}.result{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:min(460px,calc(100% - 16px));height:fit-content;max-height:calc(100% - 16px);overflow:auto;background:#000000e6;border:1px solid var(--accent);border-radius:10px;padding:16px;z-index:6}.result h2{margin:0 0 10px;font-size:clamp(16px,4vw,22px)}.result dl{margin:0 0 12px;font-size:13px;white-space:pre}.result dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:2px 0}.result dd{margin:0;text-align:right;white-space:normal}.dpad{display:none;position:absolute;left:8px;bottom:8px;width:150px;height:150px;grid-template:repeat(3,1fr) / repeat(3,1fr);gap:4px;z-index:4;touch-action:none}.dpad button{min-height:0;padding:0;opacity:.8;touch-action:none;-webkit-user-select:none;user-select:none}.dpad .up{grid-area:1 / 2}.dpad .left{grid-area:2 / 1}.dpad .right{grid-area:2 / 3}.dpad .down{grid-area:3 / 2}@media(pointer:coarse),(max-width:700px){.dpad{display:grid}.toolbar button{flex:1 1 40%}}.stage [data-testid=phaser-host]{width:100%;max-width:1100px;aspect-ratio:3 / 2;margin:0 auto}.stage [data-testid=phaser-host][hidden]{display:none}.cost{opacity:.85;font-size:11px;margin-left:2px}.cost.short{color:#ff8a94;opacity:1}.inspect{position:absolute;left:8px;bottom:8px;width:min(280px,calc(100% - 16px));background:#0d1526ee;border:1px solid var(--accent);border-radius:8px;padding:8px 10px;z-index:5;font-size:12px}.inspect header{display:flex;justify-content:space-between;align-items:center}.inspect h3{margin:0;font-size:14px}.inspect h3 small{color:#ffd166;font-weight:400}.inspect header button{min-height:28px;padding:0 8px}.inspect p{margin:4px 0}.inspect .hint{opacity:.7;font-size:11px}.inspect dl{margin:4px 0}.inspect dl div{display:flex;justify-content:space-between;gap:8px}.inspect dt{opacity:.8}.inspect dd{margin:0;text-align:right}.inspect dd em{color:#7dffb8;font-style:normal}.inspect .actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.inspect .actions button{min-height:34px}.hpbar{height:6px;background:#101820;border-radius:3px;overflow:hidden;margin:6px 0 2px}.hpbar span{display:block;height:100%;background:#00e5a8}
