/* v0.4 — the hit language: one big judgement above the receptors, combo pops, milestone flourishes */
.judge-main { position: absolute; left: 50%; width: 200px; margin-left: -100px; text-align: center; pointer-events: none; opacity: 0; z-index: 3; }
.judge-main.show { animation: jmfade .30s ease-out forwards; }
.judge-main .jm-word { font-family: 'Anton', Impact, sans-serif; font-size: 30px; letter-spacing: .04em; line-height: 1; }
.judge-main.show .jm-word { animation: jmpop .18s cubic-bezier(.2, 1.5, .4, 1) both; }
.judge-main .jm-sub { margin-top: 2px; font-size: 9.5px; color: rgba(255,247,236,.9); text-shadow: 0 1px 3px #000; min-height: 0; }
.judge-main .jm-combo { display: none; margin-top: 5px; font-family: 'Anton', Impact, sans-serif; font-size: 21px; letter-spacing: .1em; color: var(--white); text-shadow: 0 0 10px rgba(255,255,255,.5), 0 2px 3px #000; display: inline-block; }
.judge-main .jm-combo.pop { animation: combopop .22s ease-out; }
.judge-main.perfect .jm-word { color: #fff3c8; text-shadow: 0 0 10px #ffd875, 0 0 34px rgba(255,170,40,.9), 0 3px 3px rgba(0,0,0,.9); }
.judge-main.good .jm-word { color: #e4f6ff; text-shadow: 0 0 10px #7fd8ff, 0 0 30px rgba(61,139,255,.85), 0 3px 3px rgba(0,0,0,.9); }
.judge-main.ok .jm-word { color: #f2efe9; font-size: 26px; text-shadow: 0 0 8px rgba(255,255,255,.6), 0 3px 3px rgba(0,0,0,.9); }
.judge-main.miss .jm-word { color: #ff7a93; text-shadow: 0 0 12px rgba(255,59,95,.95), 0 3px 3px rgba(0,0,0,.9); }
@keyframes jmpop { 0% { transform: scale(1.7) rotate(-4deg); opacity: 0; } 40% { transform: scale(.94) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes jmfade { 0%, 55% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes combopop { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }
.flourish { position: absolute; left: 0; right: 0; text-align: center; font-size: 30px; letter-spacing: .08em; color: #fff; opacity: 0; pointer-events: none; z-index: 3; text-shadow: 0 0 16px rgba(255,255,255,.85), 0 0 44px var(--look-b), 0 3px 4px rgba(0,0,0,.8); }
.flourish.show { animation: flourish .9s ease-out forwards; }
@keyframes flourish { 0% { opacity: 0; transform: scale(.6) skewX(-8deg); } 14% { opacity: 1; transform: scale(1.06) skewX(0); } 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.02) translateY(-10px); } }
/* per-lane words are now only lane-specific hints (miss, early release, slide, flick) */
.judge { font-size: 19px; width: 120px; margin-left: -60px; }
.judge small { font-size: 9px; }
.judge.miss { color: #ff7a93; text-shadow: 0 0 10px rgba(255,59,95,.9), 0 2px 3px rgba(0,0,0,.9); }

/* covers move as whole frames only (scale ≤ 1.10, drift ≤ 2%) and cross-dissolve; the stage glows in the video's own colours */
:root { --vid-a: #ff8a3d; --vid-b: #3a1a2a; --vid-c: #ffe3c8; }
.hero-cover { object-position: 50% 32%; transform-origin: 50% 45%; will-change: transform, opacity; }
.hero-cover.kb { animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { 0% { transform: scale(1.0) translate(0, 0); } 100% { transform: scale(1.10) translate(-1.5%, -1%); } }
@media (prefers-reduced-motion: reduce) { .hero-cover.kb { animation: none; } }
.hero { box-shadow: 0 18px 44px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12), 0 0 64px color-mix(in srgb, var(--vid-a) 45%, transparent); transition: box-shadow 1.2s ease; }
.on-ready .bezel, .on-play .bezel { box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14), 0 0 34px color-mix(in srgb, var(--vid-a) 65%, transparent), 0 0 90px color-mix(in srgb, var(--vid-a) 30%, transparent); }

.judge.hint { color: #cfe6ff; font-size: 15px; text-shadow: 0 0 8px rgba(120,200,255,.6), 0 2px 3px rgba(0,0,0,.9); }