* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #05060f; color: #e8ecff; font-family: system-ui, sans-serif; overflow: hidden; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; touch-action: none; }
.hidden { display: none !important; }

#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 14px calc(18px + env(safe-area-inset-left)); pointer-events: none; }
#hud input { pointer-events: auto; }
#title { font-weight: 800; letter-spacing: 2px; font-size: 18px; color: #7df9ff; text-shadow: 0 0 12px #7df9ff88; }
#name { background: #10142a; border: 1px solid #2a3157; color: #e8ecff; border-radius: 8px; padding: 8px 10px; font-size: 14px; width: 130px; }

#hint { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; text-align: center; font-size: 14px; color: #9aa3c7; letter-spacing: 1px; pointer-events: none; }

#result { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #05060fd9; backdrop-filter: blur(6px); }
#score { font-size: 84px; font-weight: 900; color: #7df9ff; text-shadow: 0 0 30px #7df9ff66; }
#verdict { font-size: 16px; letter-spacing: 2px; color: #c17dff; }
#buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
button { background: linear-gradient(135deg, #1a2350, #241a50); color: #e8ecff; border: 1px solid #3a4180; border-radius: 12px; padding: 12px 18px; font-size: 15px; font-weight: 700; cursor: pointer; }
button:active { transform: scale(0.96); }
#leaderboard { list-style-position: inside; max-height: 30vh; overflow-y: auto; min-width: 260px; padding: 0 8px; }
#leaderboard li { padding: 4px 0; font-size: 14px; color: #9aa3c7; }
#leaderboard li b { color: #e8ecff; }