.demo-actions { margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; }
.demo-actions .btn { text-decoration:none; }
.demo-stage { overflow:hidden; padding:0; }
.demo-stage__top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); }
.demo-stage__title { margin:0; font-size:20px; }
.demo-stage__status { padding:8px 12px; border:1px solid var(--line); border-radius:999px; font-size:12px; }
.game-viewport { position:relative; aspect-ratio:16/9; background:#060b18; }
#canvas { display:block; width:100%; height:100%; outline:none; object-fit:contain; }
#canvas:focus-visible { outline:2px solid #a4cbff; outline-offset:-2px; }
/* Fullscreen the host, not the SDL canvas: its drawing buffer must stay stable. */
.game-viewport:fullscreen { width:100vw; height:100vh; aspect-ratio:auto; display:flex; align-items:center; justify-content:center; background:#060b18; }
.game-viewport:fullscreen #canvas { flex:none; width:min(100vw, calc(100vh * 16 / 9)); height:min(100vh, calc(100vw * 9 / 16)); }
.game-viewport::backdrop { background:#060b18; }
.game-fullscreen-exit { position:absolute; top:12px; right:12px; z-index:2; background:#101b31; color:#fff; border:1px solid #8da9ce; }
#gameCover { position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:28px; color:var(--muted); background:radial-gradient(ellipse at top,rgba(124,77,255,.18),transparent 70%); }
#gameCover p { max-width:54ch; line-height:1.7; }
.game-toolbar { padding:18px 20px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.game-details { padding:0 20px 20px; color:var(--muted); line-height:1.7; }
#downloadProgress { width:100%; accent-color:#8dbaff; }
#downloadDetail { margin:8px 0; font-family:monospace; }
#storageStatus { color:#ffcf87; }
.btn:disabled { opacity:.55; cursor:default; }
[hidden] { display:none !important; }
@media(max-width:820px) { .demo-stage__top { flex-direction:column; align-items:flex-start; } }