* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { color-scheme: dark; }
body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: radial-gradient(circle, #0a0a2a, #040412); color: #fff; font-family: Arial, sans-serif; }
.game-toolbar { position: fixed; bottom: 12px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 3; pointer-events: none; }
.game-toolbar h1 { display: none; }
.game-toolbar-actions { display: flex; align-items: center; gap: 10px; pointer-events: none; }
.game-toolbar-actions > * { pointer-events: auto; }
.game-toolbar a, .game-toolbar button { pointer-events: auto; }
a, button { -webkit-tap-highlight-color: transparent; }
.home-link, button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; border: 1px solid #7774a1; border-radius: 14px; padding: 10px 16px; font: 700 14px Arial, sans-serif; color: #fff; background: #272347; text-decoration: none; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .45; cursor: default; }
button:not(:disabled):hover, .home-link:hover { background: #403a6a; }
a:focus-visible, button:focus-visible, canvas:focus-visible { outline: 3px solid #ffe08e; outline-offset: 4px; }
main { display: grid; justify-items: center; }
#game-container { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; height: 100dvh; }
canvas { display: block; max-width: 100%; height: 100vh !important; height: 100dvh !important; border-radius: 4px; box-shadow: 0 0 30px #0064ff4d; touch-action: none; }
#pause-overlay { position: absolute; inset: 0; display: grid; place-content: center; gap: 16px; text-align: center; z-index: 2; background: #080721bd; border-radius: 18px; font-size: 34px; font-weight: bold; pointer-events: none; }
#pause-overlay[hidden] { display: none; }
#pause-overlay span { font-size: 14px; font-weight: normal; }
.game-controls { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; width: max-content; max-width: calc(100% - 32px); z-index: 3; pointer-events: none; }
.game-controls button { pointer-events: auto; }
#burst-button:disabled { display: none; }
#play-button { color: #160c38; background: #e4caff; border-color: #e4caff; min-width: 100px; }
#play-button:hover { background: #f4e9ff; }
#instructions { position: absolute; bottom: 58px; width: min(460px, calc(100vw - 32px)); margin: 0; text-align: center; color: #c9c4df; font-size: 13px; line-height: 1.6; }
#play-button[hidden] ~ #instructions { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 480px) {
  .game-toolbar { bottom: 8px; left: 8px; right: 8px; gap: 8px; }
  .game-controls { bottom: 70px; }
  .home-link, button { font-size: 13px; padding: 10px 12px; }
}

.playhouse-footer { position: fixed; z-index: 3; top: 10px; left: 50%; width: min(410px, calc(100% - 170px)); transform: translateX(-50%); color: #c9c4df; font: 700 12px/1.3 Arial, sans-serif; text-align: center; pointer-events: none; }
.playhouse-footer p { margin: 0; }
.playhouse-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 9px; border: 1px solid #7774a1; border-radius: 12px; color: #fff; background: #171532dd; text-decoration: none; pointer-events: auto; }
.playhouse-footer a:hover { background: #403a6a; }
@media (max-width: 600px) {
  .playhouse-footer { top: 7px; width: min(260px, calc(100% - 130px)); font-size: 11px; }
  .playhouse-footer strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}

.sound-controls { position: fixed; top: 12px; right: 12px; z-index: 3; width: 148px; padding: 6px; border: 1px solid #7774a1; border-radius: 16px; background: #12102be8; }
.sound-controls button { width: 100%; min-height: 44px; padding: 8px; }
.sound-controls label { display: flex; align-items: center; gap: 7px; padding: 0 3px; font-size: 12px; color: #ddd8ef; }
.sound-controls input { width: 78px; min-width: 0; min-height: 44px; margin: 0; accent-color: #e4caff; cursor: pointer; }
.sound-controls input:focus-visible { outline: 3px solid #ffe08e; outline-offset: 2px; border-radius: 4px; }
@media (max-width: 480px) {
  .sound-controls { top: 8px; right: 8px; width: 132px; }
  .sound-controls input { width: 62px; }
}