.play-main { max-width:1392px; margin:auto; padding:34px 56px 54px; }
.play-heading { display:flex; justify-content:space-between; align-items:center; gap:22px; margin-bottom:24px; }
.play-heading h1 { font-size:2.6rem; margin-top:9px; }
.play-heading h1 span { color:#6f8549; }
.test-badge { flex-shrink:0; border:1px solid #cbd6c0; padding:6px 12px; border-radius:4px; color:#476131; font-size:.8125rem; }
.game-shell { position:relative; aspect-ratio:16/9; width:100%; background:#0b1715; border:1px solid #314a40; border-radius:8px; overflow:hidden; }
#game-canvas { width:100%; height:100%; display:block; object-fit:contain; background:#0b1715; }
#game-canvas[hidden] { display:none; }
#game-canvas:focus { outline:none; }
#game-canvas:focus-visible { outline:3px solid var(--lime); outline-offset:-4px; }
.game-overlay { position:absolute; inset:0; display:grid; place-items:center; padding:28px; background:linear-gradient(rgba(10,26,21,.87),rgba(10,26,21,.93)),url('/assets/classroom.png') center/cover; color:white; }
.game-overlay[hidden] { display:none; }
.start-card { max-width:530px; text-align:center; }
.start-card h2 { font-size:2.6rem; margin:20px 0; }
.start-card p { color:#d0ddcd; font-size:1rem; line-height:1.7; }
.start-card .device-note { color:#dcf879; font-size:.8125rem; margin-top:19px; }
.start-card .button { border:0; min-width:180px; min-height:50px; justify-content:center; margin-top:22px; }
.start-card .button:disabled { opacity:.7; cursor:wait; }
.start-card .download-note { font-size:.75rem; color:#b0c0ac; margin-top:16px; }
#download-progress { margin-top:18px; }
#progress-bar { display:block; width:100%; height:8px; accent-color:var(--lime); }
#progress-label { font-size:.8125rem; margin-top:12px; }
.game-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.game-toolbar p { font-size:.875rem; }
.game-toolbar>div { display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap; }
.toolbar-button { border:1px solid #b8c4ad; border-radius:4px; background:transparent; padding:8px 13px; font-size:.875rem; min-height:40px; }
.toolbar-button:disabled { opacity:.45; cursor:default; }
.toolbar-button:not(:disabled):hover { background:var(--soft); }
.toolbar-button span { margin-left:8px; }
.play-help { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; padding-top:34px; }
.play-help h2 { font-size:1.2rem; letter-spacing:-.025em; margin-bottom:17px; }
.controls { display:flex; flex-wrap:wrap; gap:22px 30px; margin:0; }
.controls div { min-width:90px; }
.controls dt { display:flex; align-items:center; gap:4px; min-height:30px; font-size:.875rem; font-weight:600; }
.controls dd { margin:8px 0 0; color:var(--muted); font-size:.875rem; }
kbd { display:inline-grid; place-items:center; min-width:27px; height:29px; padding:0 6px; border:1px solid #bbc8b1; border-bottom-width:2px; border-radius:4px; background:#f1f4ee; font:inherit; }
.play-notes p { font-size:.9375rem; margin-bottom:12px; }
.play-notes .test-note { color:#687754; font-size:.8125rem; }
.troubleshooting { border-top:1px solid var(--line); margin-top:32px; padding-top:19px; max-width:830px; }
.troubleshooting summary { cursor:pointer; font-size:.9375rem; font-weight:600; }
.troubleshooting p { margin-top:14px; font-size:.9375rem; }
.game-shell:fullscreen { border:0; border-radius:0; width:100vw; height:100vh; height:100dvh; aspect-ratio:auto; }
.restart-dialog { border:1px solid #cbd6c0; padding:30px; border-radius:9px; color:var(--ink); background:var(--paper); width:min(460px,calc(100vw - 36px)); }
.restart-dialog::backdrop { background:rgba(8,22,15,.7); }
.restart-dialog h2 { font-size:1.8rem; }
.restart-dialog p { margin:20px 0; }
.restart-dialog>div { display:flex; gap:14px; align-items:center; justify-content:end; }
.restart-dialog .button { margin:0; border:0; }
.play-page .site-footer { font-size:.875rem; }
@media(max-width:1100px) { .play-main { padding-inline:32px; } .start-card h2 { font-size:2.1rem; margin:12px 0; } .start-card p { font-size:.9375rem; } .start-card .device-note { margin-top:12px; } .play-help { gap:30px; } }
@media(max-width:760px) {
  .play-main { padding:25px 22px 35px; }
  .play-page .site-header nav>a:last-child { display:block; }
  .play-page .site-header nav>a:first-child { display:none; }
  .play-page .site-header nav { font-size:.75rem; }
  .play-heading { align-items:start; flex-direction:column; gap:14px; }
  .play-heading h1 { font-size:2.1rem; }
  .game-shell { aspect-ratio:auto; min-height:445px; }
  .game-shell.is-running { min-height:0; aspect-ratio:16/9; }
  .game-overlay { padding:26px 19px; }
  .start-card h2 { font-size:2rem; }
  .start-card p { font-size:1rem; }
  .start-card .device-note { margin-top:18px; }
  .game-toolbar { flex-direction:column; align-items:start; gap:13px; }
  .play-help { grid-template-columns:1fr; gap:30px; }
  .controls { gap:22px; }
  .play-notes p { font-size:1rem; }
  .play-page .site-footer { flex-wrap:wrap; }
  .game-shell:fullscreen { min-height:0; aspect-ratio:auto; }
}
@media(max-width:370px) { .play-page .site-header { padding-inline:16px; } .play-page .site-header .brand { font-size:1.1rem; gap:6px; } .play-page .site-header nav { max-width:72px; white-space:normal; line-height:1.3; text-align:right; } }