:root { color-scheme:dark; --bg:#0b0817; --ink:#fff5d8; --muted:#9c90b8; --line:#3d3356; --gold:#ffcd62; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; }
main { max-width:1440px; margin:auto; padding:0 24px; }
a { color:inherit; text-underline-offset:4px; }
button { color:inherit; background:none; border:0; padding:4px 8px; cursor:pointer; font:inherit; min-height:44px; }
button:hover,a:hover { color:var(--gold); }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,a:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
[hidden] { display:none!important; }
header { display:flex; align-items:center; justify-content:space-between; min-height:52px; border-bottom:1px solid var(--line); gap:16px; }
header a { text-decoration:none; }
.brand { font-weight:700; font-size:19px; letter-spacing:.06em; }
.hud { display:flex; justify-content:space-between; gap:12px; padding:10px 0 14px; color:var(--muted); }
b { color:var(--gold); font-weight:400; }
.sea { position:relative; width:min(100%, calc((100dvh - 300px) * 2)); aspect-ratio:2/1; overflow:hidden; background:var(--bg); margin:auto; }
.sea:focus-visible { outline:1px solid var(--gold); outline-offset:3px; }
canvas { width:100%; height:100%; display:block; }
#play { position:absolute; inset:0; }
.console { text-align:center; padding:10px 0 4px; }
h1 { margin:0; font-size:clamp(28px,3.2vw,44px); line-height:1.2; letter-spacing:.05em; }
#message { margin:6px 0 0; color:var(--muted); font-size:clamp(14px,1.5vw,20px); min-height:30px; }
.actions { display:flex; justify-content:center; gap:12px; }
#primary { font-weight:700; font-size:20px; }
.instructions { color:var(--muted); margin:4px 0; font-size:13px; }
.run-details { display:flex; justify-content:center; flex-wrap:wrap; gap:24px; color:var(--muted); font-size:12px; margin-top:9px; }
.touch { display:flex; justify-content:center; align-items:center; gap:24px; margin:12px 0; touch-action:none; }
.steering { display:flex; gap:5px; }
.touch button { border:1px solid var(--line); min-width:48px; min-height:48px; user-select:none; -webkit-user-select:none; }
.touch button:active,.touch button.held { border-color:var(--gold); color:var(--gold); background:#21182f; }
footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:11px; color:var(--muted); padding:8px 0 12px; }
footer button { font-size:11px; }
@media (hover:hover) and (pointer:fine) { .touch { display:none; } }
@media(max-width:600px) {
 main { padding:0 12px; }
 .sea { width:100%; }
 header { padding-top:env(safe-area-inset-top); }
 .hud { font-size:11px; gap:8px; padding-bottom:10px; }
 .console { padding-top:18px; }
 .instructions { max-width:300px; margin:8px auto; font-size:11px; }
 .run-details { gap:12px; font-size:11px; }
 footer { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}
@media(max-height:500px) and (orientation:landscape) {
 main { max-width:1100px; padding:0 14px; display:grid; grid-template-columns:minmax(0,1fr) 240px; column-gap:18px; }
 header,.hud,footer { grid-column:1/-1; }
 header { min-height:38px; }
 .hud { padding:4px 0; font-size:11px; }
 .sea { grid-column:1; grid-row:3/5; max-height:calc(100dvh - 130px); width:100%; aspect-ratio:2/1; margin:auto; }
 .console { grid-column:2; grid-row:3; padding:4px 0; align-self:end; }
 h1 { font-size:22px; }
 #message { font-size:12px; min-height:18px; margin:0; }
 #primary { font-size:14px; min-height:38px; }
 .instructions,.run-details { font-size:10px; margin:0; }
 .touch { grid-column:2; grid-row:4; margin:5px 0; gap:8px; flex-wrap:wrap; align-self:start; }
 .touch button { min-height:40px; min-width:40px; padding:3px 5px; }
 footer { padding:0; }
}


/* Keep the interface quiet so the landscape remains the main event. */
main { max-width:1200px; }
header { border-bottom:0; min-height:64px; color:var(--muted); font-size:12px; }
.brand { font-size:14px; font-weight:400; letter-spacing:.12em; color:#d6bdcd; }
.hud { font-size:11px; padding:0 0 12px; }
.sea { width:min(100%, calc((100dvh - 265px) * 2)); }
h1 { font-size:18px; font-weight:400; letter-spacing:.12em; color:#e3c4b6; }
.console { padding-top:22px; }
#message { font-size:12px; min-height:22px; margin-top:7px; }
#primary { font-size:14px; font-weight:400; color:#ffe39a; }
.instructions { font-size:11px; }
.run-details { font-size:10px; margin-top:4px; }
footer { opacity:.75; }
@media(max-width:600px) { .sea { width:100%; } header { min-height:50px; } }
@media(max-height:500px) and (orientation:landscape) { header { min-height:38px; } .sea { width:100%; } .console { padding-top:4px; } }