* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at top, #1e3a8a 0%, #020617 72%); color: white; font-family: Arial, sans-serif; touch-action: none; user-select: none; position: relative; } canvas { display: block; } #hud { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; z-index: 3; pointer-events: none; } .score { background: rgba(0,0,0,.52); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 8px 14px; font-size: 18px; font-weight: 900; backdrop-filter: blur(8px); } #message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 390px); text-align: center; background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.18); border-radius: 26px; padding: 24px; backdrop-filter: blur(12px); box-shadow: 0 30px 90px rgba(0,0,0,.42); z-index: 10; } #message.hidden { display: none; } #message h1 { margin: 0 0 10px; font-size: 34px; } #message p { color: rgba(255,255,255,.84); line-height: 1.4; } #message button { margin-top: 12px; border: none; border-radius: 999px; padding: 12px 20px; background: #22c55e; color: #052e16; font-weight: 1000; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.25); } .touchZone { } #hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(92vw, 430px); text-align: center; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 10px 14px; font-size: 13px; font-weight: 800; z-index: 4; backdrop-filter: blur(8px); }