/* v0.3 — tiers, songs, HP, failure panel, teaching */
.tiers-select { display: flex; gap: 6px; margin-top: 10px; }
.tiers-select button { flex: 1; font: inherit; font-stretch: 75%; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); padding: 9px 0; border-radius: 18px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.25); }
.tiers-select button.on { background: rgba(255,255,255,.92); color: #1a0a12; border-color: transparent; box-shadow: 0 0 14px rgba(255,255,255,.5); }
.tiers-select button:disabled { opacity: .35; }
.hero-body .primary { margin-top: 10px; }
#song-list .card { margin-bottom: 12px; cursor: pointer; }
#song-list .card-tag { background: rgba(255,255,255,.9); color: #1a0a12; border-color: transparent; }
.hpbar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); margin-top: 8px; overflow: hidden; }
.hpbar div { width: 100%; height: 100%; background: linear-gradient(90deg, #3DD6FF, #3D8BFF); box-shadow: 0 0 8px #3D8BFF; transition: width .25s ease-out; }
.hpbar div.low { background: linear-gradient(90deg, #FF3B5F, #ff8a3d); box-shadow: 0 0 8px #FF3B5F; }
.fail-panel .fail-text { text-align: center; font-size: 13.5px; line-height: 1.45; }
.fail-panel .row { width: 100%; }
.dots i[hidden] { display: none; }
.card .card-title { font-size: 26px; }
.judge small { display: block; }

.hud-right #hud-precision { margin-top: 4px; font-size: 9.5px; }
.stats .num { font-size: 26px; }

/* ready: live demo area on the stage */
.demo-area { height: 176px; flex: none; touch-action: none; margin-bottom: 52px; }
.demo-labels { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 3; }
.demo-labels span { position: absolute; width: 80px; margin-left: -40px; text-align: center; font-stretch: 75%; font-weight: 700; font-size: 10.5px; letter-spacing: .16em; color: var(--white); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.on-ready .ready-body { gap: 10px; }
.on-ready .start-block { height: 96px; }
.on-ready .start-block .disp { font-size: 26px; }

.row .primary { flex: 1; width: auto; }
.primary.alt { background: linear-gradient(180deg, #3DD6FF, #1B4FB8); box-shadow: 0 0 22px rgba(61,139,255,.5), 0 8px 20px rgba(0,0,0,.5); }
.primary.alt .disp, .row .primary .disp { font-size: 16px; }
.judge.show { animation-duration: .32s; }
#r-goodsplit { margin-top: 2px; font-size: 9.5px; }

.demo-caption { position: absolute; width: 140px; margin-left: -70px; text-align: center; font-family: 'Anton', Impact, sans-serif; font-size: 20px; letter-spacing: .08em; color: var(--white); text-shadow: 0 0 14px rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.6); opacity: 0; }
.demo-caption.show { animation: judge .9s ease-out forwards; }
.hp-label { font-size: 8.5px; margin-top: 2px; color: rgba(255,247,236,.45); }
.hud-right #hud-precision { font-size: 10px; }

:root { --look-c: #ffd9a0; --look-b: #ff8a1f; }
.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 26px color-mix(in srgb, var(--look-c) 55%, transparent); transition: box-shadow 2.4s ease; }
.on-ready .bezel::after, .on-play .bezel::after { content: ''; position: absolute; inset: 3px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--look-c) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.18); pointer-events: none; }
.play-caption .dot.live, .monitor-caption .dot { background: var(--look-b); box-shadow: 0 0 8px var(--look-b); }

/* covers: the video's official thumbnail, hot-linked from YouTube, never stored; YouTube named as the source */
.hero { height: 300px; }
.hero-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 40%; }
.hero-cover.kb { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.16) translate(-2%, -3%); } }
.hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.86) 100%); }
.hero-lanes { opacity: .55; }
.yt-mark { position: absolute; right: 12px; top: 12px; font-stretch: 75%; font-weight: 700; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff; padding: 5px 8px; border-radius: 6px; background: rgba(0,0,0,.55); text-decoration: none; }
.yt-mark::before { content: ''; display: inline-block; width: 12px; height: 9px; margin-right: 6px; vertical-align: -1px; background: #ff0033; border-radius: 3px; clip-path: none; }
.hero .live-tag { top: 14px; left: 14px; }
.card { height: 132px; }
.card-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.card .card-scrim { background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.2) 100%); }
.card .yt-mark { top: auto; bottom: 10px; right: 12px; }
#song-list .card-tag { bottom: auto; top: 12px; }

.look-name { display: none; }