:root{color-scheme:dark;--ink:#07161a;--mist:#b6ccca;--cream:#ffefcf;--gold:#f7bc72;--line:#294345;font-family:system-ui,sans-serif;background:radial-gradient(ellipse at 48% 0,#232f50,#0b101e 64%);color:#ebf5ef}
*{box-sizing:border-box}body{margin:0}main{width:min(1080px,96vw);margin:24px auto}header,.dispatch,footer{display:flex;align-items:center;justify-content:space-between;gap:14px}h1,h2{font-family:Georgia,serif;font-weight:400;color:var(--cream);margin:0}h1{font-size:clamp(2.1rem,6vw,4.5rem);letter-spacing:-.055em;line-height:1}h2{font-size:clamp(1.5rem,5vw,3rem)}.eyebrow{font-size:.7rem;letter-spacing:.17em;font-weight:750;color:var(--gold);margin:0 0 6px}button{color:#e8f4ef;background:#152f33;border:1px solid #426063;border-radius:8px;padding:10px 14px;font:inherit;font-size:.86rem;font-weight:650;cursor:pointer;touch-action:none}button:hover,button[aria-pressed=true]{background:#25494a}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.58;cursor:default}nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:16px 0 8px}nav button{text-align:left;line-height:1.2}nav button[aria-current=true]{border-color:var(--gold);color:var(--gold)}nav small{display:block;color:var(--mist);margin-top:4px;font-weight:400}.game{position:relative;border:1px solid #47676a;border-radius:13px;overflow:hidden;background:#10272e;box-shadow:0 24px 65px #0008}canvas{width:100%;height:auto;display:block}.hud{position:absolute;inset:10px 12px auto;display:flex;justify-content:space-between;pointer-events:none}.condition,.clock{display:grid;grid-template-columns:auto auto;align-items:center;gap:3px 8px;background:#0b1b20ed;border:1px solid #537471;border-radius:8px;padding:7px 10px}.condition{border-color:#ad8957;background:#3a291f;color:#fff4d8;text-shadow:0 1px 3px #000}.hud span{font-size:.63rem;letter-spacing:.11em;font-weight:800}.hud strong{font-variant-numeric:tabular-nums}meter{grid-column:span 2;width:100%;height:7px}.dispatch{margin-top:8px;background:#10262a;padding:10px 12px;border:1px solid var(--line);border-radius:8px;min-height:64px}.dispatch p:last-child{margin:0;font-size:.9rem}.controls{display:flex;gap:6px;margin-top:8px}.controls button{min-width:54px;min-height:44px}kbd{font:inherit;color:var(--gold);padding-left:4px}footer{margin-top:10px;color:var(--mist);font-size:.72rem}.result{position:absolute;inset:0;display:grid;place-items:center;background:#08161bcc;padding:8px}.result[hidden]{display:none}.card{background:#0d252a;border:1px solid #987951;border-radius:12px;padding:clamp(9px,3vw,30px);text-align:center;max-width:96%}.card p{margin:4px 0 10px}.actions{display:flex;justify-content:center;gap:8px}#continue{background:#ffd190;color:#2e2113;border-color:#ffd190}@media(max-width:620px){main{margin:10px auto}nav{margin-top:10px}nav button{font-size:.68rem;padding:8px 5px}nav small{display:none}.hud{inset:5px 6px auto}.hud strong{font-size:.75rem}.condition,.clock{padding:3px 6px}.dispatch{min-height:54px}.dispatch p:last-child{font-size:.8rem}.controls button{flex:1;padding:8px 3px}footer{font-size:.65rem}.card p{font-size:.7rem}.card button{font-size:.7rem;padding:6px 8px}}@media(max-height:500px) and (orientation:landscape){main{width:min(94vw,132vh);margin:5px auto}h1{font-size:1.5rem}header .eyebrow,nav small,footer{display:none}nav{margin:4px 0}nav button,.dispatch button{padding:4px 6px}.dispatch{margin-top:4px;min-height:0;padding:4px 6px}.controls{margin-top:4px}.controls button{min-height:32px;padding:3px 6px}}
#impact-note{position:absolute;top:54px;left:12px;margin:0;padding:4px 8px;border-radius:5px;background:#0b1b20ed;color:#b7f6c5;font-size:clamp(.65rem,2vw,.85rem);font-weight:700;pointer-events:none}#impact-note:empty{display:none}#impact-note[data-kind=damage]{color:#ffd1c5;background:#49241e}
@media(max-width:620px){#impact-note{top:37px;left:6px}}

.controls button{user-select:none;-webkit-touch-callout:none}
.controls button[data-held]{background:#305455;border-color:#f7bc72;color:#fff5df}
@media (pointer:coarse) and (orientation:portrait){
  .controls button{min-height:52px}
  .controls [data-key=right]{margin-inline-end:8px}
}
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){
  main{width:min(94vw,680px)}
  .game{width:min(100%,max(240px,calc(200dvh - 364px)));margin-inline:auto}
  .dispatch .eyebrow{display:none}
  .controls{max-width:540px;margin-inline:auto}
  header button{padding:4px 8px}
  .controls button{flex:1;min-height:44px}
  .controls [data-key=right]{margin-inline-end:8px}
}

#start-tutorial{background:#ffd190;color:#2e2113;border-color:#ffd190}
.dispatch-actions{display:flex;gap:6px;flex-shrink:0}
@media(max-width:620px){
  .dispatch-actions{flex-direction:column}
  .dispatch-actions button{padding:5px 7px;font-size:.7rem}
}