:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#111211; color:#e8e8e3; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-underline-offset:4px; }
header, main { width:min(1328px, 100%); margin:auto; padding:20px 24px; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #30312e; font-size:13px; }
header span,.muted { color:#9e9f98; }
.heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:14px 0 28px; }
h1 { font-size:clamp(42px,6vw,70px); font-weight:600; line-height:1; letter-spacing:-3px; margin:12px 0 0; }
.eyebrow { font-size:11px; letter-spacing:2px; color:#c9aa68; margin:0; }
.intro { color:#aaa99e; line-height:1.6; margin:0; }
.controls,.settings { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.controls { margin-bottom:12px; }
button,select { font:inherit; font-size:14px; color:inherit; border:1px solid #45463f; border-radius:6px; background:#22231f; padding:10px 14px; }
button { cursor:pointer; }
button:hover:enabled { background:#33352d; }
#start { background:#ceb373; color:#18170f; border-color:#ceb373; font-weight:600; min-width:100px; }
#start:hover:enabled { background:#e0c78d; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid #e0c78d; outline-offset:4px; }
#status { flex:1; min-width:180px; color:#aaa99e; font-size:13px; line-height:1.5; }
#game-surface { position:relative; background:#080a08; border:1px solid #37392f; border-radius:6px; overflow:hidden; }
canvas { display:block; width:100%; aspect-ratio:16/9; margin:auto; outline:none; }
canvas.render-input { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0; }
#game-surface:fullscreen { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; border:0; border-radius:0; }
#game-surface:fullscreen canvas { width:min(100vw,177.77777778vh); height:min(100vh,56.25vw); margin:0; flex:none; }
.original-pointer { position:fixed; top:0; left:0; pointer-events:none; z-index:1; will-change:transform; }
#loading { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#111211; padding:24px; gap:16px; text-align:center; }
#loading[hidden], [hidden] { display:none !important; }
.bar { width:min(420px,80%); height:5px; border-radius:4px; background:#30322b; overflow:hidden; }
.bar::after { content:""; display:block; height:100%; width:30%; background:#ceb373; animation:progress 1.5s ease-in-out infinite; }
@keyframes progress { from { transform:translateX(-100%); } to { transform:translateX(340%); } }
.settings { margin:18px 0 10px; font-size:13px; color:#bdbdb4; }
.settings select { max-width:100%; font-size:13px; padding:7px 10px; }
.muted,.notice,footer,#gpu-guide { font-size:13px; line-height:1.6; }
.notice { color:#aaa99e; max-width:900px; margin:20px 0; }
#gpu-guide { padding:12px; border:1px solid #5a4f36; border-radius:6px; }
summary { cursor:pointer; }
footer { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:#85877e; border-top:1px solid #30312e; padding:16px 0 8px; }
footer p { margin:0; }
@media(max-width:650px) { header,main { padding:16px; } .heading { display:block; margin:8px 0 24px; } .intro { margin-top:20px; font-size:14px; } header span { display:none; } .settings { gap:8px; } .settings label { width:100%; } .controls { gap:8px; } #status { flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { .bar::after { animation:none; width:100%; } }