* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: #000; color: #fff; font-family: Arial, sans-serif; }
body { height: 100dvh; height: var(--viewport-height, 100dvh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
header { display: flex; gap: 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid #655c00; }
header strong { flex: 1; color: #ffeb00; font-size: clamp(12px, 3vw, 18px); }
a { color: #ffeb00; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
button { min-width: 44px; min-height: 44px; border: 1px solid #736b17; border-radius: 12px; background: #191919; color: #ffeb00; font: bold 14px Arial, sans-serif; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#game { min-height: 0; min-width: 0; overflow: hidden; position: relative; }
canvas { display: block; touch-action: none; }
#controls { display: flex; justify-content: space-between; gap: 8px; padding: 8px; background: #101010; }
#controls div { display: flex; gap: 8px; }
#controls button { width: clamp(56px, 15vw, 88px); height: 64px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#controls button[data-control="left"], #controls button[data-control="right"] { font-size: 30px; }
#controls .fire { background: #ffeb00; color: #000; }
#controls button.held { background: #fff; color: #000; transform: scale(.95); }
#overlay { position: fixed; z-index: 10; inset: calc(56px + env(safe-area-inset-top)) env(safe-area-inset-right) calc(84px + env(safe-area-inset-bottom)) env(safe-area-inset-left); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px; text-align: center; background: #000e; overflow-y: auto; }
#overlay[hidden] { display: none; }
#overlay h1 { color: #ffeb00; margin: 0 0 12px; font-size: clamp(20px, 6vw, 36px); }
#overlay p { margin: 5px 0; max-width: 440px; font-size: 14px; }
#overlay #play { padding: 10px 32px; margin-top: 12px; background: #ffeb00; color: #000; }
.hint { color: #aaa; }
@media (max-height: 450px) { #controls { padding: 4px 8px; } #controls button { height: 48px; } #overlay { inset-block-end: calc(56px + env(safe-area-inset-bottom)); } #overlay p { margin: 2px 0; font-size: 12px; } #overlay h1 { margin-bottom: 3px; font-size: 22px; } #overlay #play { margin-top: 4px; } .hint { display: none; } }