.game-page { max-width: 1500px; }
.game-main { padding-top: 18px; }
.game-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: clamp(34px, 6vw, 68px) clamp(4px, 3vw, 34px) 28px; }
.game-heading h1 { margin: 0; font-size: clamp(3.2rem, 8vw, 7rem); line-height: .88; letter-spacing: -.06em; }
.game-heading > div > p:last-child { margin: 18px 0 0; color: var(--arcade-muted); font-size: clamp(1rem, 2vw, 1.16rem); }
.back-link { padding: 10px 14px; border-radius: 999px; color: var(--arcade-cyan); font-weight: 800; text-decoration: none; white-space: nowrap; }
.back-link:hover, .back-link:focus-visible { background: rgba(88,225,255,.08); }
.cabinet { padding: clamp(10px, 2.5vw, 30px); border: 1px solid var(--arcade-line); border-radius: 28px; background: linear-gradient(145deg, #1a2633, #0d141c 72%); box-shadow: var(--arcade-shadow), inset 0 1px rgba(255,255,255,.04); }
.cabinet-topline { display: flex; justify-content: space-between; padding: 0 8px 14px; color: #78909e; font-size: .68rem; font-weight: 850; letter-spacing: .18em; }
.game-screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; min-height: 300px; border: 1px solid rgba(88,225,255,.22); border-radius: 18px; background: #03080c; box-shadow: inset 0 0 90px rgba(0,0,0,.9), 0 0 36px rgba(88,225,255,.08); touch-action: none; }
#gameCanvas { display: block; width: 100%; height: 100%; background: transparent; }
.screen-glass { position: absolute; z-index: 3; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(120,220,255,.025) 3px 4px), radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.22) 100%); pointer-events: none; }
.hud { position: absolute; z-index: 4; inset: 16px 18px auto; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 20px; color: var(--arcade-cyan); pointer-events: none; text-shadow: 0 0 12px rgba(88,225,255,.5); }
.hud div { display: grid; gap: 3px; }
.hud span { color: #7f9baa; font-size: clamp(.55rem, 1.4vw, .72rem); font-weight: 850; letter-spacing: .12em; }
.hud strong { color: #cdf8ff; font-family: "Courier New", monospace; font-size: clamp(.82rem, 2vw, 1.2rem); letter-spacing: .08em; }
.hud div:nth-child(5) strong { color: var(--arcade-violet); text-shadow: 0 0 12px rgba(155,124,255,.55); }
.hud strong.timer-warning { color: var(--arcade-danger); text-shadow: 0 0 12px rgba(255,100,124,.6); }
.game-overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 70px 24px 28px; text-align: center; background: radial-gradient(circle at center, rgba(10,23,31,.65), rgba(3,8,12,.91)); transition: opacity 160ms ease; }
.game-overlay[hidden] { display: none; }
.overlay-copy { max-width: 620px; }
.overlay-kicker { margin: 0 0 12px; color: var(--arcade-cyan); font-size: .72rem; font-weight: 850; letter-spacing: .18em; }
.overlay-copy h2 { margin: 0; font-size: clamp(2.5rem, 8vw, 5.8rem); line-height: .9; letter-spacing: -.055em; }
.overlay-copy > p:not(.overlay-kicker, .key-hint) { margin: 20px auto 26px; color: #b9c7d1; line-height: 1.6; }
.key-hint { margin: 18px 0 0; color: #748895; font-size: .78rem; }
.game-announcer { position: absolute; z-index: 4; inset: auto 0 15%; margin: 0; color: var(--arcade-amber); font-size: clamp(1rem, 4vw, 2.2rem); font-weight: 900; letter-spacing: .15em; text-align: center; text-shadow: 0 0 18px rgba(255,198,92,.5); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.game-announcer.show { opacity: 1; }
.cabinet-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 6px 0; }
.control-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.control-buttons .arcade-button { min-height: 40px; padding: 8px 13px; font-size: .84rem; }
.cabinet-status { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--arcade-muted); font-size: .82rem; white-space: nowrap; }
.status-light { width: 8px; height: 8px; border-radius: 50%; background: var(--arcade-green); box-shadow: 0 0 12px var(--arcade-green); }
.touch-controls { display: none; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 2px 0; }
.touch-steering { display: flex; gap: 8px; }
.touch-controls button { min-width: 66px; min-height: 58px; border: 1px solid rgba(88,225,255,.25); border-radius: 16px; color: #d9f9ff; background: rgba(88,225,255,.08); font-weight: 900; touch-action: none; user-select: none; }
.touch-controls button.active { background: rgba(88,225,255,.22); box-shadow: 0 0 20px rgba(88,225,255,.1); }
.touch-controls .touch-fire { width: 88px; border-color: rgba(255,198,92,.35); border-radius: 50%; color: #ffe0a3; background: rgba(255,198,92,.09); }
.game-info { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; padding: clamp(48px, 7vw, 84px) clamp(4px, 3vw, 34px); }
.game-info article { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--arcade-line); border-radius: 22px; background: linear-gradient(145deg, rgba(22,33,45,.92), rgba(11,17,24,.95)); }
.game-info h2 { margin: 0 0 20px; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.04em; }
.game-info article > p:last-child { color: var(--arcade-muted); line-height: 1.7; }
.controls-list { display: grid; gap: 10px; margin: 0; }
.controls-list div { display: flex; justify-content: space-between; gap: 22px; padding-bottom: 10px; border-bottom: 1px solid var(--arcade-line); }
.controls-list dt { font-weight: 800; }
.controls-list dd { margin: 0; color: var(--arcade-muted); font-family: "Courier New", monospace; text-align: right; }
html[data-theme="light"] .cabinet { background: linear-gradient(145deg, #dce8ef, #cbdbe5); }
html[data-theme="light"] .game-info article { border-color: rgba(19,54,78,.17); background: linear-gradient(145deg, #fff, #eef5f8); }
@media (pointer: coarse), (max-width: 820px) { .touch-controls { display: flex; } }
@media (max-width: 720px) {
  .game-heading { align-items: flex-start; flex-direction: column; }
  .game-screen { min-height: 250px; border-radius: 13px; }
  .hud { inset: 10px 10px auto; gap: 8px; }
  .hud div:nth-child(2) { display: none; }
  .hud { grid-template-columns: repeat(4, auto); }
  .cabinet-controls { align-items: flex-start; flex-direction: column; }
  .game-info { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cabinet { border-radius: 20px; }
  .control-buttons .arcade-button { font-size: .75rem; }
  .touch-controls button { min-width: 58px; }
  .key-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .game-overlay, .game-announcer { transition: none; } }