:root { color-scheme: dark; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #02060b; }
body { touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
#game { position: relative; width: 100%; height: 100%; min-height: 480px; overflow: hidden; background: radial-gradient(circle at 32% 50%, #081725, #02060b 55%); }
canvas { display: block; width: 100%; height: 100%; }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.hud { position: absolute; inset: max(12px, env(safe-area-inset-top)) 16px auto; display: grid; grid-template-columns: 1fr 1fr 1fr; color: #bdf7ff; text-shadow: 0 0 16px #52d9ef; pointer-events: none; }
.hud div { display: flex; flex-direction: column; gap: 2px; }
.hud-center { align-items: center; }.hud-right { align-items: flex-end; }
.hud span, .sonar-status span { color: #6d929b; font: 700 9px/1.2 ui-monospace, monospace; letter-spacing: .18em; }
.hud strong { font: 600 clamp(16px, 4vw, 22px)/1 ui-monospace, monospace; }
.sonar-status { position: absolute; left: 16px; bottom: calc(15px + env(safe-area-inset-bottom)); width: 108px; pointer-events: none; }
.sonar-status i { display: block; height: 3px; margin-top: 6px; overflow: hidden; border-radius: 10px; background: #17313a; }
.sonar-status b { display: block; width: 0; height: 100%; background: #7aeaff; box-shadow: 0 0 9px #7aeaff; }
.panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 24px max(26px, env(safe-area-inset-bottom)); text-align: center; background: radial-gradient(circle at center, rgba(8,28,40,.58), rgba(1,4,8,.9)); backdrop-filter: blur(3px); }
.panel.hidden, .hidden { display: none; }
.kicker { margin: 0 0 13px; color: #72dcec; font-size: 11px; font-weight: 700; letter-spacing: .22em; }
h1 { margin: 0; color: #e8fcff; font: 900 clamp(48px, 15vw, 82px)/.78 Impact, sans-serif; letter-spacing: -.035em; text-shadow: 0 0 8px #70e8fa, 0 0 38px rgba(80,212,235,.45); transform: skewY(-2deg); }
h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px #8feeff; }
h2 { margin: 4px 0 8px; color: #e8fcff; font: 700 clamp(56px, 18vw, 96px)/1 ui-monospace, monospace; text-shadow: 0 0 30px rgba(90,225,246,.55); }
.lead { margin: 22px 0; color: #a8c6cc; font-size: 14px; letter-spacing: .08em; }
.howto { display: flex; gap: 30px; margin: 6px 0 24px; }
.howto div { display: flex; align-items: center; gap: 9px; text-align: left; }
.howto p { margin: 0; color: #79959b; font-size: 11px; line-height: 1.5; }
.howto b { color: #d7f8fc; font-size: 13px; }
.finger { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(130,234,248,.5); border-radius: 50%; color: #9bf3ff; box-shadow: 0 0 18px rgba(82,218,239,.18); animation: pulse 1.4s ease-in-out infinite; }
.finger.release { animation-delay: -.7s; }
button { min-width: 180px; border: 1px solid #83e9f7; border-radius: 999px; padding: 13px 26px; background: rgba(44,184,207,.14); color: #e8fcff; font: 700 15px/1 inherit; letter-spacing: .12em; box-shadow: inset 0 0 22px rgba(83,221,242,.12), 0 0 22px rgba(83,221,242,.16); cursor: pointer; }
button:active { transform: scale(.97); background: rgba(74,218,238,.26); }
.panel small { margin-top: 15px; color: #536f75; font-size: 10px; letter-spacing: .08em; }
.result { display: flex; gap: 26px; margin: 0 0 25px; color: #6f9299; font-size: 12px; }.result b { color: #c8f6fb; }
.hint { position: absolute; left: 50%; bottom: calc(38px + env(safe-area-inset-bottom)); margin: 0; color: rgba(203,246,251,.75); font-size: 12px; letter-spacing: .08em; transform: translateX(-50%); animation: hint 1.8s ease-in-out infinite; pointer-events: none; white-space: nowrap; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(82,218,239,0); transform: scale(.9); } }
@keyframes hint { 50% { opacity: .35; } }
@media (max-height: 560px) { h1 { font-size: 44px; }.lead { margin: 14px 0; }.howto { margin-bottom: 15px; }.panel small { display:none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }