/* v0.2 — the procedural stage sits behind every screen; no image backgrounds anywhere. */
html, body { background: #120a2a; }
body { background: #120a2a; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.app { background: transparent; z-index: 1; }
.bg, .scrim, .burst-bg { display: none !important; }
.screen { z-index: 1; }
#ytkeeper { z-index: 6; } .bezel { z-index: 5; }

/* legibility over a bright, moving stage */
.hud, .songstrip, .home-head, .ready-body, #results, #error { text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.songstrip { padding-top: 6px; }
.strip-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.look-name { color: rgba(255,247,236,.75); }
.video-expanded .look-name { display: none; }
.notice { text-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* home: the hero is a look, not a photograph */
.hero { background: linear-gradient(160deg, #7b2cff 0%, #ff4d8d 55%, #ffb347 100%); }
.hero.look-rosegold { background: linear-gradient(160deg, #ff3b5f 0%, #ff7a3d 50%, #ffb347 100%); }
.hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.72) 100%); }
.hero-lanes { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: space-evenly; pointer-events: none; }
.hero-lanes i { display: block; width: 3px; height: 100%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.85) 45%, rgba(255,255,255,.95)); box-shadow: 0 0 14px rgba(255,255,255,.8); opacity: .8; }
.hero-lanes i:nth-child(1) { box-shadow: 0 0 16px #FF3B5F; } .hero-lanes i:nth-child(2) { box-shadow: 0 0 16px #FF8A3D; } .hero-lanes i:nth-child(3) { box-shadow: 0 0 16px #3DD6FF; } .hero-lanes i:nth-child(4) { box-shadow: 0 0 16px #3D8BFF; }
.card.soon { background: linear-gradient(120deg, #1d2b64 0%, #2f6bff 60%, #7be7ff 100%); }
.card.soon .card-scrim { background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.15) 100%); border-left: 3px solid var(--amber); }

/* ready: gem legend drawn in CSS */
.how { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.how-item { padding: 10px 4px; font-size: 10.5px; }
.gem { display: block; width: 30px; height: 30px; margin: 4px auto 2px; transform: rotate(45deg); border-radius: 5px; background: linear-gradient(135deg, #ff6b8a, #b8142f); box-shadow: 0 0 12px #FF3B5F, inset 0 0 0 2px rgba(255,255,255,.85); }
.gem.hold { height: 44px; margin-top: -2px; background: linear-gradient(180deg, #7be7ff, #3d8bff); box-shadow: 0 0 12px #3D8BFF, inset 0 0 0 2px rgba(255,255,255,.85); }
.gem.flick { background: linear-gradient(135deg, #ffd166, #ff8a3d); box-shadow: 0 0 12px #FF8A3D, inset 0 0 0 2px rgba(255,255,255,.85); }
.gem.flick::after { content: ''; position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border-left: 3px solid #fff; border-top: 3px solid #fff; }
.gem.presence { transform: none; border-radius: 50%; background: radial-gradient(circle, rgba(61,214,255,.9), rgba(61,214,255,.25) 60%, transparent 70%); box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 12px #3DD6FF; }
.next-card .gem { width: 26px; height: 26px; margin: 0 6px; flex: none; }

/* play: the touch layer over the stage, four judgement words */
.playfield { background: transparent; }
#touch { position: absolute; inset: 0; touch-action: none; }
.judge { width: 120px; margin-left: -60px; font-size: 24px; }
.judge small { font-size: 9.5px; }
.judge.perfect { color: var(--gold); }
.judge.hold, .judge.early, .judge.good, .judge.miss { color: var(--white); }
.dots { top: 10px; }
.mode-label { bottom: calc(var(--safe-bottom) + 10px); color: rgba(255,247,236,.55); }
.countin .disp { text-shadow: 0 0 24px rgba(255,255,255,.8), 0 4px 6px rgba(0,0,0,.6); }
.pause-panel { background: rgba(10,10,20,.72); }

/* results over the live stage */
#results { background: linear-gradient(180deg, rgba(10,6,20,.25) 0%, rgba(10,6,20,.55) 40%, rgba(10,6,20,.8) 100%); }
.tier-word { font-size: 84px; }

/* hero tag legibility over the warm gradient */
.hero .live-tag { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.hero .live-tag .dot { background: #fff; box-shadow: 0 0 8px #fff; }