:root { --gold: #ffc83c; --green: #9ae060; --red: #ff6050; --cyan: #70e8d8; --dim: #b8c4b8; --panel: rgba(10, 20, 15, 0.82); --display: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Franklin Gothic Bold', sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0c1410; overflow: hidden; color: #f4f0e4; font: 15px/1.3 system-ui, 'Segoe UI', sans-serif; user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.lbl { font-size: 12px; letter-spacing: 0.18em; color: var(--dim); }
.play { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; }
#hud[data-mode="play"] .play, #hud[data-mode="intro"] .play { opacity: 1; }
.tl { position: absolute; left: 28px; top: 22px; }
.score { font: 44px var(--display); letter-spacing: 0.02em; }
.score.pulse, .combo.pulse { animation: pulse 0.35s ease-out; }
@keyframes pulse { 0% { transform: scale(1.18); color: var(--gold); } 100% { transform: scale(1); } }
.combo { margin-top: 10px; font: 17px var(--display); letter-spacing: 0.04em; color: #e8e0c0; transform-origin: left; }
.combo .last { color: var(--gold); font-size: 21px; }
.combo .mult { margin-top: 4px; color: var(--cyan); font-size: 22px; }
.tc { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); }
.timer { font: 34px var(--display); letter-spacing: 0.05em; }
.timer.low { color: var(--red); }
.tr { position: absolute; right: 28px; top: 22px; text-align: right; }
.goalsHead { font: 20px var(--display); color: var(--green); letter-spacing: 0.06em; }
.goals div { font-size: 12px; letter-spacing: 0.12em; color: var(--dim); opacity: 0.75; }
.goals div.done { color: var(--green); opacity: 1; text-decoration: line-through; }
.bl { position: absolute; left: 28px; bottom: 24px; }
.letters b { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 6px; border-radius: 50%; font: 20px var(--display); color: #587060; background: rgba(20, 34, 26, 0.7); border: 2px solid #3a5040; }
.letters b.got { color: #4a2800; background: radial-gradient(circle at 40% 35%, #fff2b0, #f2c04a 55%, #a8640e); border-color: #7a4a08; }
.br { position: absolute; right: 28px; bottom: 22px; text-align: right; }
.speed { font: 40px var(--display); }
.meter { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); width: 260px; text-align: center; opacity: 0; transition: opacity 0.2s; }
.meter.on { opacity: 1; }
.meter .bar { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #ff6050, #ffc83c 25%, #9ae060 45%, #9ae060 55%, #ffc83c 75%, #ff6050); }
.meter i { position: absolute; top: -5px; width: 6px; height: 20px; margin-left: -3px; background: #fff; border-radius: 3px; box-shadow: 0 0 8px #fff; }
.meter i.bad { background: var(--red); }
.live { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); font: 22px var(--display); color: var(--cyan); letter-spacing: 0.04em; }
.hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 13px; color: #e8f0e0; opacity: 0; transition: opacity 0.8s; white-space: nowrap; }
.popups { position: absolute; left: 0; right: 0; top: 30%; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; }
.pop { font-family: var(--display); letter-spacing: 0.04em; animation: pop ease-out forwards; }
.pop.gold { color: var(--gold); } .pop.green { color: var(--green); } .pop.red { color: var(--red); } .pop.cyan { color: var(--cyan); } .pop.dim { color: var(--dim); }
@keyframes pop { 0% { transform: scale(1.5); opacity: 0; } 8% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
.count { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font: 140px var(--display); color: var(--gold); }
.screen { position: absolute; inset: 0; display: none; pointer-events: none; }
.screen.on { display: block; }
.title .logo { position: absolute; left: 7vw; top: 14vh; }
.logo span { display: block; font: clamp(64px, 11vw, 150px)/0.86 var(--display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 3px #08140c; text-shadow: 0 6px 0 #08140c, 0 10px 30px rgba(0, 0, 0, 0.5); }
.logo .red { color: #e8402a; }
.title .sub { position: absolute; left: 7vw; top: calc(14vh + clamp(120px, 20vw, 270px)); font: 22px var(--display); color: var(--gold); letter-spacing: 0.3em; }
.menu { position: absolute; left: 7vw; bottom: 16vh; }
.menu div { font: 30px var(--display); letter-spacing: 0.05em; color: #e8f0e0; padding: 2px 0; transition: transform 0.15s, color 0.15s; }
.menu div.sel { color: var(--gold); transform: translateX(14px); }
.menu div.sel::before { content: '\25B6  '; font-size: 20px; vertical-align: 4px; }
.menu .best { font-size: 16px; color: var(--dim); margin-top: 10px; }
.foot { position: absolute; left: 0; right: 0; bottom: 4vh; text-align: center; font-size: 13px; color: var(--dim); }
.pause { background: rgba(4, 10, 6, 0.55); }
.pause .big { position: absolute; left: 50%; top: 14vh; transform: translateX(-50%); font: 84px var(--display); }
.pause .menu { left: 50%; bottom: auto; top: 34vh; transform: translateX(-50%); text-align: center; }
.goalsList { position: absolute; right: 6vw; top: 30vh; font-size: 14px; color: var(--dim); }
.goalsList h3 { font: 20px var(--display); color: var(--green); letter-spacing: 0.1em; margin: 0 0 8px; }
.goalsList div { margin: 4px 0; } .goalsList div.done { color: var(--green); } .goalsList span { opacity: 0.6; margin-left: 6px; }
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--panel); border: 1px solid #2b4a38; border-radius: 10px; padding: 26px 40px; min-width: 460px; }
.panel h2 { margin: 0 0 12px; font: 40px var(--display); color: var(--gold); text-align: center; letter-spacing: 0.04em; }
.results .final { font: 64px var(--display); text-align: center; margin-bottom: 14px; }
.results .lbl { text-align: center; }
.results .row { display: flex; justify-content: space-between; font-size: 17px; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.results .best { text-align: center; margin-top: 14px; color: var(--dim); font: 22px var(--display); }
.results .best.new { color: var(--gold); }
.dim { color: var(--dim); text-align: center; font-size: 13px; }
.tip { color: var(--cyan); text-align: center; font-size: 13px; }
.controls .cols { display: flex; gap: 40px; }
.controls .kb div { display: flex; gap: 14px; font-size: 14px; padding: 2px 0; }
.controls .kb b { color: var(--gold); min-width: 150px; font-weight: 600; }
.controls .gp h3 { margin: 0 0 8px; color: var(--green); font: 18px var(--display); letter-spacing: 0.1em; }
.controls .gp div { font-size: 13px; padding: 3px 0; }
.replayTag { position: absolute; left: 28px; top: 13%; font: 26px var(--display); color: #fff; letter-spacing: 0.2em; opacity: 0; }
.replayTag.on { opacity: 1; animation: blink 1.4s infinite; }
.replayTag span { font: 12px system-ui; letter-spacing: 0.1em; color: var(--dim); margin-left: 12px; }
@keyframes blink { 50% { opacity: 0.55; } }
#hud[data-mode="replay"] .play { opacity: 0; }
#loading { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 40%, #1d3a28, #0a120d); display: grid; place-content: center; justify-items: center; gap: 22px; transition: opacity 0.8s; z-index: 5; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .logo span { font-size: clamp(56px, 10vw, 120px); text-align: center; }
#loadBar { width: min(420px, 70vw); height: 6px; background: #1a2a20; border-radius: 3px; overflow: hidden; }
#loadBar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f9a83, var(--gold)); transition: width 0.2s; }
#loadTxt { color: var(--dim); font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; }
#loading .note { color: #7f9585; font-size: 13px; }
@media (max-width: 720px) { .goals { display: none; } .panel { min-width: 0; width: 92vw; padding: 18px; } .controls .cols { flex-direction: column; gap: 10px; } .hint { white-space: normal; width: 90vw; text-align: center; } }