/* DREAM GROUP · 3D game UI — DOM overlays over the Three.js canvas.
   Register: award-show broadcast graphics (Mnet / MAMA end-cards) — hot pink on plum, cream type,
   letter-spaced eyebrows, one big display word per screen. Phone-first 390×844; desktop = right rail. */
:root { --pink: #fe90d9; --rose: #ff5fb0; --gold: #ffd27a; --cream: #fff1f7; --plum: #1a0b1f; --ink: #2a0d24; --glass: rgba(26, 11, 31, .62);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --disp: "Syne", "Avenir Next", "Helvetica Neue", system-ui, sans-serif; --body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
html, body { margin: 0; height: 100%; background: var(--plum); overflow: hidden; max-width: 100vw; color: var(--cream); font-family: var(--body); -webkit-text-size-adjust: 100%; -webkit-user-select: none; user-select: none; }
canvas#stage { position: fixed; inset: 0; display: block; width: 100%; height: 100%; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
/* ── HUD: eyebrow + display title, top ── */
#hud { position: fixed; top: calc(14px + var(--sat)); left: 18px; right: 70px; pointer-events: none; z-index: 5; }
#hud .eyebrow { font: 700 clamp(9px, 2.8vw, 11px)/1.3 var(--body); letter-spacing: clamp(.16em, .9vw, .32em); text-transform: uppercase; color: var(--gold); opacity: .95; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
#hud h1 { margin: 6px 0 0; font: 800 clamp(30px, 8.6vw, 46px)/0.98 var(--disp); letter-spacing: -.02em; text-transform: uppercase; text-shadow: 0 2px 24px rgba(0,0,0,.55); overflow-wrap: anywhere; }
#hud h1.long { font-size: clamp(22px, 6.4vw, 32px); }   /* song titles: fewer lines above her */
#hud .sub { margin-top: 6px; font: 500 13px/1.35 var(--body); color: rgba(255,241,247,.82); text-shadow: 0 1px 10px rgba(0,0,0,.6); max-width: 34ch; }
/* ── PANEL: bottom sheet on phone, right rail on desktop ── */
#panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: linear-gradient(180deg, rgba(26,11,31,0) 0, var(--glass) 26px, rgba(26,11,31,.9) 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: 22px 16px calc(12px + var(--sab)); max-height: 50vh; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(255,255,255,.08); }
#panel { overflow: hidden; }
#panel .body { overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; gap: 10px; padding-bottom: 4px; min-height: 0; }
#panel .foot { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-shrink: 0; padding-top: 4px; flex-wrap: wrap; }
/* morning build item 9 (M2/M3, AC-7): box-sizing:border-box + min-height:44px makes the 44 CSS px HIG/WCAG-2.5.5
   floor include padding+border instead of sitting on top of it (was 40.5px pink / 43.1px ghost at 390 — the
   clamp(11px,3.2vw,13px) font plus 14px vertical padding landed a few px under the bar); inline-flex centering
   keeps the label vertically centered once min-height, not the font/padding sum, is what's setting the height. */
#panel .foot .btn { box-sizing: border-box; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 14px clamp(10px, 3.2vw, 16px); font-size: clamp(11px, 3.2vw, 13px); flex: 1 1 auto; white-space: nowrap; min-width: 0; } #panel .foot .btn.pink { flex: 2 1 auto; }
.lab { font: 700 10px/1 var(--body); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,241,247,.6); margin: 4px 0 -2px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: var(--cream); border-radius: 999px; padding: 9px 14px; font: 700 14px/1 var(--body); transition: transform .12s, background .15s, border-color .15s; }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.chip.dim { opacity: .35; }
.chip.big { padding: 14px 18px; font-size: 15px; }   /* W-3 / AC-19: the dance-step pack chips need >=44px CSS px without touching the shared .chip rule every other screen inherits (9+14+1.5*2=34.7px measured, blueprint M1) — a global 44px pass is its own scoped item (W-6). 14+14(padding)+15(font, line-height 1)+3(border) = 46px, >=44 with margin */
.btn { border: 0; border-radius: 999px; padding: 15px 22px; font: 800 15px/1 var(--disp); letter-spacing: .06em; text-transform: uppercase; background: var(--cream); color: var(--ink); box-shadow: 0 8px 28px rgba(0,0,0,.35); transition: transform .12s, opacity .15s; }
.btn:active { transform: scale(.96); }
.btn.pink { background: var(--pink); } .btn.gold { background: var(--gold); } .btn.ghost { background: rgba(255,255,255,.1); color: var(--cream); box-shadow: none; border: 1.5px solid rgba(255,255,255,.18); }
.btn.big { padding: 19px clamp(18px, 6vw, 30px); font-size: clamp(15px, 4.4vw, 18px); max-width: 100%; }
.btn[disabled] { opacity: .38; pointer-events: none; }
.note { font: 500 13px/1.4 var(--body); color: rgba(255,241,247,.78); }
.warn { font: 700 13px/1.35 var(--body); color: #ffb3c7; }
.hookline { background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; min-height: 58px; }
.hookline b { flex: 1; font: 800 clamp(20px, 5.6vw, 28px)/1.1 var(--disp); color: var(--cream); }
.hookline b.empty { color: rgba(255,241,247,.35); }
.hookline .mini { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); border-radius: 999px; padding: 8px 12px; font: 700 13px/1 var(--body); color: var(--cream); }
.cards { display: grid; gap: 8px; }
.card { background: rgba(255,241,247,.94); color: var(--ink); border-radius: 16px; padding: 12px 14px; }
.card.chorus { background: var(--gold); }
.card .sec { font: 800 10px/1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: rgba(42,13,36,.6); margin-bottom: 6px; }
.card .txt { font: 600 15px/1.35 var(--body); white-space: pre-line; }
.stars { display: flex; justify-content: center; gap: 4px; }
.stars button { background: none; border: 0; font-size: 42px; line-height: 1; padding: 6px 4px; color: rgba(255,241,247,.45); filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); transition: transform .1s; }
.stars button:active { transform: scale(1.25); }
.stars button.lit { color: var(--gold); }
.score { font: 800 clamp(56px, 16vw, 84px)/1 var(--disp); letter-spacing: -.03em; color: var(--cream); text-align: center; text-shadow: 0 4px 30px rgba(255,95,176,.45); }
.score small { font: 700 14px/1 var(--body); letter-spacing: .2em; display: block; margin-top: 8px; color: var(--gold); }
.meter { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } .meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--gold)); transition: width .3s; }
.busy { display: grid; place-items: center; gap: 10px; padding: 12px 0; text-align: center; }
.busy b { font: 800 22px/1.1 var(--disp); text-transform: uppercase; letter-spacing: .02em; }
.spin { width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(255,255,255,.14); border-top-color: var(--pink); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── HOME / RESULTS ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.stat { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 10px 8px; text-align: center; }
.stat b { display: block; font: 800 clamp(20px, 5.5vw, 28px)/1 var(--disp); color: var(--cream); }
.stat span { display: block; margin-top: 5px; font: 700 10px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,241,247,.6); }
.goal { background: linear-gradient(135deg, rgba(254,144,217,.22), rgba(255,210,122,.16)); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; }
.unlock { font: 800 clamp(16px, 4.6vw, 22px)/1.15 var(--disp); overflow-wrap: anywhere; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 22px rgba(255,210,122,.5); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall 2.6s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .2; } }
/* ── GATE / AGE (full-screen cards) ── */
.veil { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: linear-gradient(180deg, rgba(26,11,31,.55) 0, rgba(26,11,31,0) 28%, rgba(26,11,31,0) 55%, rgba(26,11,31,.82) 100%); }
#gate .card { align-self: end; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
#agegate { background: rgba(26,11,31,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.veil .card { background: transparent; color: var(--cream); text-align: center; display: grid; gap: 12px; justify-items: center; width: 100%; max-width: 460px; }
.veil .present { font: 700 clamp(10px, 2.8vw, 12px)/1 var(--body); letter-spacing: clamp(.18em, 1vw, .38em); color: var(--gold); text-transform: uppercase; max-width: 100%; }
.veil .title { font: 800 clamp(44px, 12.5vw, 96px)/0.9 var(--disp); letter-spacing: -.03em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 40px rgba(255,120,220,.55); max-width: 100%; }
.veil .title .w { white-space: nowrap; display: inline-block; }
.veil .title span { display: inline-block; animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
/* KINETIC TITLE (item 14): letters rise, then a light sweep crosses them; the eyebrow types in; the pill pulses on the 135-bpm beat */
#gate .title .w { background: linear-gradient(100deg, var(--cream) 0 38%, #fff 47%, #ffd6ee 50%, #fff 53%, var(--cream) 62% 100%); background-size: 260% 100%; background-position: 120% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; animation: sweep 3.6s 1.4s cubic-bezier(.4,0,.2,1) infinite; }   /* NO filter here: two drop-shadows on animated background-clip text repainted 2.7 MP per frame → 16 fps at 390 DPR3 (measured); the scrim carries legibility — FOUND polish round 2: missing -webkit-text-fill-color left WebKit painting an opaque fallback fill, and the inherited `.veil .title` text-shadow (meant for the OLD solid-colour title) rendered as a blurry dark smear on top of it; both reset here so only the clipped gradient sweep shows */
@keyframes sweep { 0% { background-position: 120% 0; } 45% { background-position: -40% 0; } 100% { background-position: -40% 0; } }
#gate .present { clip-path: inset(0 100% 0 0); animation: typein 1.1s .5s steps(28, end) both; white-space: nowrap; }
@keyframes typein { to { clip-path: inset(0 0 0 0); } }
#gate #enter { position: relative; }
#gate #enter::after { content: ''; position: absolute; inset: -3px; border-radius: 999px; box-shadow: 0 0 0 0 rgba(255,95,176,.9); pointer-events: none; animation: beat .4444s ease-in-out 2.2s infinite alternate; }   /* the pulse is a glow on a pseudo-element: a transform on the button itself never reads as 'stable' to Playwright (every click timed out) and shifts the tap target */
@keyframes beat { from { box-shadow: 0 0 0 0 rgba(255,95,176,.0), 0 10px 40px rgba(255,95,176,.35); } to { box-shadow: 0 0 0 6px rgba(255,95,176,.35), 0 14px 60px rgba(255,95,176,.8); } }
.veil .tag { font: 500 clamp(13px, 3.6vw, 15px)/1.4 var(--body); color: rgba(255,241,247,.9); max-width: 100%; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
#gate #enter { width: min(100%, 360px); padding: clamp(15px, 4.2vw, 19px) 16px; font-size: clamp(14px, 4vw, 18px); white-space: nowrap; box-shadow: 0 10px 40px rgba(255,95,176,.45); }
.veil .age { background: rgba(255,241,247,.96); color: var(--ink); border-radius: 22px; padding: 22px 20px; display: grid; gap: 12px; width: 100%; max-width: 420px; min-width: 0; box-sizing: border-box; }   /* min(92vw,420px) + the veil padding overflowed 360/390/430 (qc overflow check) */
.veil .age h2 { margin: 0; font: 800 clamp(24px, 7.2vw, 30px)/1 var(--disp); }
.veil .age p { margin: 0; font: 500 14px/1.45 var(--body); color: #4a2a44; }
.veil .age .btn { width: 100%; }
.veil .inapp { font: 600 13px/1.4 var(--body); max-width: 300px; opacity: .9; }
/* ── SHOW: karaoke + title card + stars on stage ── */
#showcard { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; text-align: center; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .55s; }
#showcard.on { opacity: 1; visibility: visible; transition: opacity .5s; }   /* Tee device pass 2026-08-26: the fade-out wedged mid-transition on iOS leaving ghost title text over the doll — visibility snaps it out even if opacity freezes */
#showcard .eyebrow { font: 700 12px/1 var(--body); letter-spacing: .4em; color: var(--gold); text-transform: uppercase; }
#showcard { padding: 0 16px; } #showcard .big { font: 800 clamp(34px, 10vw, 88px)/0.95 var(--disp); overflow-wrap: anywhere; max-width: 100%; letter-spacing: -.03em; text-transform: uppercase; margin: 12px 0; text-shadow: 0 0 40px rgba(255,120,220,.6); }
#showcard .who { font: 600 14px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,241,247,.85); }
#kara { position: fixed; left: 14px; right: 14px; top: calc(96px + var(--sat)); z-index: 7; text-align: center; pointer-events: none; font: 800 clamp(22px, 6.4vw, 40px)/1.15 var(--disp); text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 2px 18px rgba(0,0,0,.75); min-height: 1.2em; }
#kara span { display: inline-block; margin: 0 .18em; color: rgba(255,241,247,.42); transition: color .12s, transform .12s; }
#kara span.sung { color: var(--cream); } #kara span.now { color: var(--gold); transform: scale(1.12); }
#pill { position: fixed; top: calc(60px + var(--sat)); left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 12px/1 var(--body); letter-spacing: .1em; z-index: 9; }
/* morning build item 9 (M5, AC-3): 40x40 -> 44x44, the HIG/WCAG-2.5.5 floor */
#mute { position: fixed; right: 14px; top: calc(14px + var(--sat)); z-index: 9; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); font-size: 18px; display: grid; place-items: center; }
/* ── DESKTOP: the rail ── */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  #panel { left: auto; top: 0; bottom: 0; width: 440px; max-height: none; border-top: 0; border-left: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, rgba(26,11,31,0) 0, rgba(26,11,31,.72) 40px, rgba(26,11,31,.92) 100%); padding: 120px 28px 28px; justify-content: flex-end; }
  #hud { left: 32px; right: 480px; top: 28px; }
  #hud h1 { font-size: 64px; }
  #hud h1.long { font-size: 44px; }
  #kara { left: 32px; right: 480px; top: 150px; font-size: 44px; }
  #showcard { right: 440px; }
  .chip { padding: 10px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .veil .title span { animation: none; } .spin { animation: none; } #gate .title .w { animation: none; color: var(--cream); background: none; -webkit-text-fill-color: var(--cream); } #gate .present { animation: none; clip-path: none; } #gate #enter::after { animation: none; } }   /* -webkit-text-fill-color wins over color for paint in WebKit — without resetting it here too, the reduced-motion fallback title (added alongside the base rule's fill-color fix) would render invisible */