/* v0.5 — game-grade UI: lit 3D buttons with a lip, glass secondaries, cover cards, a segmented tier picker,
   monitor-plate HUD, LED phrase cells and a results emblem with a laurel. Palette stays Stage Lights; fonts Anton + Archivo. */

/* ---------- buttons: rim, body gradient, gloss cap, extruded lip, stage glow ---------- */
.gb { --a: #FF5C7A; --b: #C4102F; --lip: #5E0818; --glow: 255,59,95; position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 22px; border-radius: 16px; border: 2px solid rgba(255,255,255,.22); background: linear-gradient(180deg, var(--a), var(--b)); color: #fff; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.28), 0 5px 0 var(--lip), 0 7px 0 rgba(0,0,0,.35), 0 12px 24px rgba(0,0,0,.45), 0 0 22px rgba(var(--glow), .5); transition: transform .06s ease-out, box-shadow .06s ease-out; }
.gb::before { content: ''; position: absolute; left: 3px; right: 3px; top: 2px; height: 46%; pointer-events: none; border-radius: 12px 12px 8px 8px; background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.03)); }
.gb > * { position: relative; }
.gb .disp { font-size: 20px; letter-spacing: .06em; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 10px rgba(255,255,255,.25); }
.gb .sub { color: rgba(255,255,255,.82); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.gb svg { width: 20px; height: 20px; fill: currentColor; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); flex: none; }
.gb:active, .gb.down { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.28), 0 1px 0 var(--lip), 0 2px 0 rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.45), 0 0 14px rgba(var(--glow), .4); }
.gb.cool { --a: #4DDCFF; --b: #1B4FB8; --lip: #0B2666; --glow: 61,139,255; }
.gb.gold { --a: #FFD98A; --b: #E08A12; --lip: #6B3A02; --glow: 255,198,94; color: #2A1400; }
.gb.gold .disp { text-shadow: 0 1px 0 rgba(255,255,255,.45); } .gb.gold .sub { color: rgba(42,20,0,.75); text-shadow: none; }
.gb.pop, .gb-glass.pop { animation: gb-pop .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes gb-pop { 35% { transform: scaleX(1.06) scaleY(.94); } }
.gb.cta::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.36) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; animation: sheen 3.6s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.gb.round { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; flex: none; }
.gb.round::before { border-radius: 50%; height: 48%; }
.gb.big { min-height: 96px; border-radius: 20px; flex-direction: column; gap: 4px; }
.gb.big .disp { font-size: 30px; }
.gb[disabled] { --a: #3a3542; --b: #232029; --lip: #0f0d12; --glow: 0,0,0; color: rgba(255,247,236,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 0 var(--lip), 0 8px 16px rgba(0,0,0,.4); }
.gb[disabled]::after { display: none; }
.gb-glass { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--look-c) 40%, rgba(255,255,255,.25)); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), rgba(12,10,20,.6); color: var(--white); font: inherit; font-stretch: 75%; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 0 rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .06s, box-shadow .06s; }
.gb-glass svg { width: 15px; height: 15px; fill: currentColor; flex: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
.gb-glass:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 0 rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.35); }
.gb-glass.small { min-height: 36px; padding: 0 12px; font-size: 10px; letter-spacing: .12em; }
.gb-glass.small svg { width: 13px; height: 13px; }
.gb-glass[hidden] { display: none; }
.row .gb, .row .gb-glass { flex: 1; width: auto; }

/* ---------- home ---------- */
.wordmark { background: linear-gradient(180deg, #fff7ec 0%, #ffe0b8 45%, #ff7a95 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(255,59,95,.5)); }
.hero { border-radius: 22px; border: 1.5px solid rgba(255,255,255,.14); box-shadow: 0 6px 0 rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.7), 0 0 64px color-mix(in srgb, var(--vid-a) 45%, transparent); }
.hero-title { font-size: 36px; text-shadow: 0 0 12px color-mix(in srgb, var(--vid-c) 60%, transparent), 0 3px 0 rgba(0,0,0,.6); }
.hero-body .gb { margin-top: 12px; min-height: 56px; }
.hero-body .gb .disp { font-size: 22px; }
.hero-body .gb .sub { font-size: 10px; }
.medal { display: inline-block; width: 13px; height: 13px; border-radius: 50%; vertical-align: -2px; margin-right: 4px; background: radial-gradient(circle at 35% 30%, #fff5c8, #ffc65e 45%, #b8741a); box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 -1px 1px rgba(0,0,0,.3); }
.medal.silver { background: radial-gradient(circle at 35% 30%, #fff, #dce3f0 45%, #7c8aa3); } .medal.bronze { background: radial-gradient(circle at 35% 30%, #ffd2b0, #e0956a 45%, #7a3e1e); } .medal.encore { background: radial-gradient(circle at 35% 30%, #ffd6e0, #ff3b5f 45%, #7a0a2a); } .medal.none { background: radial-gradient(circle at 35% 30%, #8a8494, #3a3542 45%, #1d1a22); }
/* segmented tier picker with a sliding lit thumb */
.tiers-select.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 4px; margin-top: 12px; border-radius: 14px; background: rgba(0,0,0,.45); border: 1.5px solid rgba(255,255,255,.14); box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06); }
.tiers-select.seg .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 11px; background: linear-gradient(180deg, var(--ta, #FFD98A), var(--tb, #E08A12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 0 var(--tl, #6B3A02), 0 6px 12px rgba(0,0,0,.4), 0 0 16px color-mix(in srgb, var(--tb, #E08A12) 60%, transparent); transform: translateX(calc(var(--i, 1) * 100%)); transition: transform .26s cubic-bezier(.34,1.56,.64,1), background .3s; pointer-events: none; }
.tiers-select.seg[data-tier="easy"] .thumb { --ta: #4DDCFF; --tb: #1B4FB8; --tl: #0B2666; }
.tiers-select.seg[data-tier="normal"] .thumb { --ta: #FFD98A; --tb: #E08A12; --tl: #6B3A02; }
.tiers-select.seg[data-tier="hard"] .thumb { --ta: #FF5C7A; --tb: #C4102F; --tl: #5E0818; }
.tiers-select.seg button, .tiers-select.seg button.on { position: relative; z-index: 1; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 6px 0 5px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: rgba(255,247,236,.72); font: inherit; letter-spacing: 0; text-transform: none; font-stretch: 100%; }
.tiers-select.seg button b { font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.tiers-select.seg button small { font-stretch: 75%; font-weight: 700; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.tiers-select.seg button.on { color: #1a0a12; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.tiers-select.seg[data-tier="easy"] button.on, .tiers-select.seg[data-tier="hard"] button.on { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.tiers-select.seg button:disabled { opacity: .35; }
/* song cards */
#song-list .scard { position: relative; display: grid; grid-template-columns: 96px 1fr 44px; gap: 14px; align-items: center; min-height: 120px; padding: 12px; margin-bottom: 12px; border-radius: 18px; border: 1.5px solid rgba(255,255,255,.14); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(100deg, color-mix(in srgb, var(--card-b, #7b2cff) 35%, #0F0A18), rgba(15,10,24,.85) 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 0 rgba(0,0,0,.45), 0 14px 30px rgba(0,0,0,.5); transition: transform .12s; }
.scard:active { transform: scale(.98); }
.scard .slanes { position: absolute; right: 56px; top: 0; bottom: 0; width: 30%; display: flex; justify-content: space-evenly; pointer-events: none; opacity: .22; }
.scard .slanes i { width: 2px; background: linear-gradient(180deg, transparent, #fff 50%, transparent); }
.scover { position: relative; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; border: 3px solid color-mix(in srgb, var(--card-c, #fff) 70%, #fff); box-shadow: 0 0 18px var(--card-b, #ff4d8d), 0 6px 14px rgba(0,0,0,.5); transform: rotate(-2deg); transition: transform .12s; background: #120a2a; }
.scover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 42%); pointer-events: none; }
.scard:active .scover { transform: rotate(-5deg) scale(.96); }
.sbody { min-width: 0; position: relative; }
.stitle { font-family: 'Anton', Impact, sans-serif; font-size: 24px; line-height: .95; margin: 3px 0 7px; text-shadow: 0 0 10px color-mix(in srgb, var(--card-c, #fff) 55%, transparent), 0 2px 0 rgba(0,0,0,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spills { display: flex; gap: 5px; flex-wrap: wrap; }
.pill { font-stretch: 75%; font-weight: 700; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); color: rgba(255,247,236,.78); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.pill.easy { border-color: rgba(77,220,255,.55); } .pill.normal { border-color: rgba(255,198,94,.6); } .pill.hard { border-color: rgba(255,92,122,.6); }
.pill.cleared { background: linear-gradient(180deg, #FFD98A, #E08A12); color: #2A1400; border-color: transparent; }
.pill.cleared.silver { background: linear-gradient(180deg, #fff, #b8c2d6); } .pill.cleared.bronze { background: linear-gradient(180deg, #ffd2b0, #c47a4a); } .pill.cleared.encore { background: linear-gradient(180deg, #ff9ab0, #c4102f); color: #fff; }
.sbest { margin-top: 7px; }
.scard .yt-mark { top: auto; bottom: 8px; right: 10px; padding: 4px 6px; font-size: 8.5px; }
.scard .gb.round { align-self: start; margin-top: 2px; }
.home-head .gb-glass { min-height: 40px; padding: 0 14px; }
#home .foot { margin-top: 26px; }

/* ---------- ready ---------- */
.on-ready .gb.big { min-height: 96px; }
.on-ready .gb.big .disp { font-size: 28px; }
.on-ready .gb.big .eye { color: rgba(255,255,255,.85); }
.calib-row .gb-glass { margin-top: 8px; }
#btn-ready-back { align-self: center; }

/* ---------- play: monitor plates, glass controls, LED cells, segmented groove bar ---------- */
.hud { left: 8px; width: 84px; padding: 7px 8px 9px; border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(8,6,14,.5); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hud-left { left: 8px; border-left: 3px solid var(--rose); }
.hud-right { left: auto; right: 8px; border-right: 3px solid var(--blue); }
.hud .eye { font-size: 9px; letter-spacing: .12em; }
.hud .num { font-size: 40px; } .hud-right .num { font-size: 32px; margin-top: 6px; } .hud-right .num span { font-size: 16px; }
.hud-right #hud-precision { font-size: 9px; }
.caption-buttons { gap: 6px; }
.caption-buttons .gb-glass.small { min-height: 32px; padding: 0 10px; }
.cells i { height: 6px; border-radius: 3px; background: rgba(0,0,0,.45); box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06); }
.cells i.done { background: var(--rose); box-shadow: 0 0 8px var(--rose), inset 0 1px 0 rgba(255,255,255,.4); } .cells i.now { background: var(--white); box-shadow: 0 0 8px var(--white), inset 0 1px 0 rgba(255,255,255,.6); }
.cells i.clean { background: var(--gold); box-shadow: 0 0 8px var(--gold), inset 0 1px 0 rgba(255,255,255,.5); } .cells i.slip { background: var(--rose); box-shadow: 0 0 8px var(--rose), inset 0 1px 0 rgba(255,255,255,.4); }
.hpbar { height: 6px; border-radius: 3px; background: rgba(0,0,0,.5); box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08); }
.hpbar div { -webkit-mask: repeating-linear-gradient(90deg, #000 0 11.6%, transparent 11.6% 12.5%); mask: repeating-linear-gradient(90deg, #000 0 11.6%, transparent 11.6% 12.5%); }
.pause-panel { border-radius: 20px; border: 1.5px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 0 rgba(0,0,0,.45), 0 24px 50px rgba(0,0,0,.6); }
.pause-panel .gb .disp { font-size: 17px; }
.pause-panel .gb-glass { width: 100%; }

/* ---------- results: emblem, ribbon, plates, choreographed actions ---------- */
@property --ra { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.emblem { --t1: #FFE9A8; --t2: #FFC65E; --t3: #B8741A; --lipc: #4A2A06; position: relative; width: 160px; height: 160px; margin: 22px auto 8px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 50% 38%, var(--t1), var(--t2) 45%, var(--t3));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -8px 16px rgba(0,0,0,.35), 0 10px 0 var(--lipc), 0 18px 40px rgba(0,0,0,.6), 0 0 48px color-mix(in srgb, var(--t2) 60%, transparent); }
.emblem::before { content: ''; position: absolute; inset: -10px; padding: 10px; border-radius: 50%; background: conic-gradient(from var(--ra), #FFF6D8, #8A5A1A 18%, #FFF0C0 35%, #6B4310 55%, #FFE9A8 72%, #8A5A1A 88%, #FFF6D8); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.emblem.silver::before { background: conic-gradient(from var(--ra), #fff, #6f7a90 18%, #f4f7ff 35%, #4e586b 55%, #ffffff 72%, #6f7a90 88%, #fff); }
.emblem.bronze::before { background: conic-gradient(from var(--ra), #ffe2cc, #6b3418 18%, #ffd6ba 35%, #4a2210 55%, #ffe2cc 72%, #6b3418 88%, #ffe2cc); }
.emblem.encore::before { background: conic-gradient(from var(--ra), #ffe1e8, #7a0a2a 18%, #ffd0da 35%, #4a0616 55%, #ffe1e8 72%, #7a0a2a 88%, #ffe1e8); }
.emblem.none::before { background: conic-gradient(from var(--ra), #6b6675, #1d1a22 18%, #6b6675 35%, #1d1a22 55%, #6b6675 72%, #1d1a22 88%, #6b6675); }
.emblem .laurel { position: absolute; inset: -30px; background: linear-gradient(180deg, var(--t1), var(--t3)); -webkit-mask: url(assets/ui/laurel.svg) center / contain no-repeat; mask: url(assets/ui/laurel.svg) center / contain no-repeat; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); opacity: .95; }
.emblem .word { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Anton', Impact, sans-serif; font-size: 36px; letter-spacing: .04em; color: #3A1E02; text-shadow: 0 1px 0 rgba(255,255,255,.55); text-align: center; padding: 0 10px; }
.emblem.reveal { animation: emblem-in .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes emblem-in { from { transform: scale(.2) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.emblem.reveal::before { animation: ring-turn 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ring-turn { from { --ra: -200deg; } to { --ra: 0deg; } }
.emblem.silver { --t1: #FFFFFF; --t2: #DCE3F0; --t3: #7C8AA3; --lipc: #2c3446; } .emblem.silver .word { color: #232a3a; }
.emblem.bronze { --t1: #FFD2B0; --t2: #E0956A; --t3: #7A3E1E; --lipc: #3a1a0a; }
.emblem.encore { --t1: #FFD6E0; --t2: #FF3B5F; --t3: #7A0A2A; --lipc: #3a0412; } .emblem.encore .word { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.emblem.none { --t1: #6b6675; --t2: #3a3542; --t3: #1d1a22; --lipc: #0c0b0f; } .emblem.none .word { color: #fff; font-size: 20px; text-shadow: 0 2px 0 rgba(0,0,0,.4); } .emblem.none .laurel { opacity: .35; }
.ribbon { position: relative; margin: 10px auto 0; width: max-content; padding: 7px 22px; font-family: 'Anton', Impact, sans-serif; font-size: 15px; letter-spacing: .12em; color: #fff; background: linear-gradient(180deg, #FF5C7A, #C4102F); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #5E0818, 0 8px 16px rgba(0,0,0,.45); opacity: 0; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.ribbon[hidden] { display: none; }
.ribbon::before, .ribbon::after { content: ''; position: absolute; top: 3px; bottom: -3px; width: 16px; background: linear-gradient(180deg, #a80c26, #6d061a); z-index: -1; }
.ribbon::before { left: -11px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); } .ribbon::after { right: -11px; clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }
.ribbon.show { animation: ribbon-in .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes ribbon-in { from { opacity: 0; transform: translateY(10px) scale(.7); } to { opacity: 1; transform: none; } }
.stats-plate { padding: 10px 6px 8px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(8,6,14,.5); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 4px 0 rgba(0,0,0,.4), 0 10px 20px rgba(0,0,0,.35); margin-top: 10px; }
.stats-plate .num { font-size: 26px; }
.r-actions { opacity: 0; } .r-actions.rise { animation: rise .45s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.r-line { margin: 10px 0 8px; }
.next-card { border-radius: 16px; border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 0 rgba(0,0,0,.4); }
.r-label { margin-top: 14px; }

/* ---------- settings sheet ---------- */
.sheet-body .gb { margin-top: 8px; }
.sheet-body .gb-glass.small { min-height: 34px; }

@media (prefers-reduced-motion: reduce) { .gb.cta::after, .emblem.reveal::before, .gb.pop, .gb-glass.pop { animation: none; } }

.gb .disp, .gb .sub { white-space: nowrap; }
.hero-body .gb { padding: 0 16px; gap: 8px; }
.hero-body .gb .sub { font-size: 9.5px; letter-spacing: .1em; }

/* ---- policy-clean covers: the whole 16:9 frame, nothing painted over it; the body sits below on its own plate ---- */
.hero { height: auto; display: flex; flex-direction: column; overflow: hidden; }
.hero-band { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0716; flex: none; }
.hero-band .hero-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; transform-origin: 50% 50%; }
.hero-cover.kb { animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { 0% { transform: scale(1.0); } 100% { transform: scale(1.06); } }
.hero-band .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.hero-band .hero-title { position: absolute; left: 14px; right: 14px; bottom: 10px; font-size: 32px; }
.hero-band .live-tag { position: absolute; top: 12px; left: 12px; }
.yt-mark.hero-yt { top: 8px; right: 8px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 10px; font-size: 10px; }
.hero-body { position: relative; left: auto; right: auto; bottom: auto; padding: 12px 14px 14px; background: linear-gradient(180deg, rgba(14,9,24,.94), rgba(14,9,24,.86)); overflow: hidden; }
.hero-body .hero-lanes { position: absolute; inset: 0; opacity: .18; }
.hero-body .eye.dim { position: relative; }
.hero-body .tiers-select.seg { margin-top: 8px; }
.hero-body .gb { margin-top: 10px; }
/* card: 16:9 cover, no gloss, marks are links */
#song-list .scard { grid-template-columns: 128px 1fr 44px; }
.scover { width: 128px; height: 72px; border-radius: 10px; transform: none; }
.scover::after { display: none; }
.scard:active .scover { transform: scale(.97); }
.scard .yt-mark { min-height: 44px; display: inline-flex; align-items: center; bottom: 6px; right: 6px; padding: 0 10px; border-radius: 10px; font-size: 9px; }
/* tap targets ≥ 44 px */
.gb-glass { min-height: 44px; }
.gb-glass.small { min-height: 40px; }
.caption-buttons .gb-glass.small { min-height: 40px; }
.home-head .gb-glass { min-height: 44px; }
.tiers-select.seg button, .tiers-select.seg button.on { padding: 10px 0 9px; }
.row-setting { min-height: 44px; }
.nudge .ghost.tiny { min-height: 40px; min-width: 44px; }
/* labels on gloss: dark ink on the cool button, the sub line under the cap */
.gb::before { height: 38%; }
.gb.cool { color: #06203F; } .gb.cool .disp { text-shadow: 0 1px 0 rgba(255,255,255,.35); } .gb.cool svg { filter: none; }
.gb .sub { font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.gb.gold .sub { color: #2A1400; text-shadow: none; }
.hud .eye.rose { color: #FF9DB0; } .hud .eye.blue { color: #9CC7FF; }
.hp-label { font-size: 10px; }
/* results: the disc is there from 0 ms (dim), the next card rises with the actions, phrase names under the cells */
.emblem { opacity: .25; transform: scale(.2); }
.emblem.reveal { opacity: 1; transform: none; }
.next-card.r-actions { opacity: 0; }
.next-card.r-actions.rise { opacity: 1; }
.cell-names { display: flex; gap: 5px; margin-top: 4px; }
.cell-names span { flex: 1; min-width: 0; font-stretch: 75%; font-weight: 600; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,247,236,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }

/* card: right column holds the play badge and the YouTube link; the title may take two lines */
#song-list .scard { grid-template-columns: 120px 1fr 58px; gap: 12px; padding: 12px 10px 12px 12px; }
.scover { width: 120px; height: 68px; }
.sside { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: start; }
.scard .sside .gb.round { margin-top: 0; }
.scard .sside .yt-mark { position: static; min-height: 40px; width: 58px; padding: 0 2px; justify-content: center; font-size: 8px; letter-spacing: .04em; border-radius: 9px; }
.scard .sside .yt-mark::before { width: 10px; height: 8px; margin-right: 3px; }
.scard .slanes { right: 70px; width: 26%; }
.stitle { font-size: 21px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: .95; }
.pill { padding: 3px 7px; font-size: 9px; }

/* Official YouTube brand assets (brand.youtube packs, terms accepted by Dillon 2026-09-16): full-colour logo with white wordmark on dark,
   monochrome white over imagery; never recoloured or redrawn; ≥ 100 px wide; clear space = the icon's triangle (≈ 12 px). */
.yt-mark { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 10px; background: rgba(8,6,14,.62); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 2px 8px rgba(0,0,0,.35); font-size: 0; }
.yt-mark::before { content: none; display: none; }
.yt-mark img { display: block; width: 99px; height: 22px; }
.yt-mark.hero-yt { top: 8px; right: 8px; }
.sleft { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.sleft .yt-mark.card-yt { position: static; min-height: 40px; padding: 0 6px; width: 120px; }
#song-list .scard { grid-template-columns: 120px 1fr 52px; min-height: 140px; align-items: start; }
.scard .sbody { padding-top: 2px; }
.scard .sside { align-self: start; }
.yt-caption { display: inline-flex; align-items: center; gap: 6px; }
.yt-caption img { width: 90px; height: 20px; display: inline-block; }
.foot-brand { display: flex; justify-content: center; margin-top: 12px; opacity: .85; }
.foot-brand a { display: inline-block; padding: 8px 12px; }
.foot-brand img { display: block; width: 99px; height: 22px; }