html, body { width: 100%; height: 100%; overflow: hidden; }
canvas { display: block; touch-action: none; }
#instructions { z-index: 5; box-sizing: border-box; max-width: min(90vw, 480px); }
#help { bottom: 28px; max-width: calc(100% - 12px); font-size: 12px; }
#gamehub-attribution { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; text-align: center; padding: 6px; background: #111d; color: #ddd; font-size: 11px; }
#gamehub-attribution a { color: #fff; }
#touch-help { position: fixed; right: 12px; top: 10px; z-index: 6; padding: 8px 14px; color: white; background: #222d; border: 1px solid #aaa; border-radius: 6px; }
#touch-controls { position: fixed; bottom: 65px; right: 16px; z-index: 4; display: grid; grid-template-columns: repeat(3, 52px); gap: 5px; }
#touch-controls button { width: 52px; height: 48px; color: white; font-size: 23px; background: #222b; border: 1px solid #aaa; border-radius: 8px; touch-action: none; user-select: none; }
#touch-controls button:first-child { grid-column: 2; }
#touch-controls button:nth-child(2) { grid-column: 1; }
#touch-controls button:active, #touch-controls button.pressed { background: #64748b; }
@media (hover: hover) and (pointer: fine) { #touch-controls { display: none; } }
@media (max-height: 450px) { #touch-controls { bottom: 48px; right: 10px; grid-template-columns: repeat(3, 44px); } #touch-controls button { width: 44px; height: 40px; } #help { max-width: calc(100% - 175px); } }