@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  color-scheme: dark;
  font-family: "DM Sans", system-ui, sans-serif;
  color: #f8f5ff;
  background: #0d0714;
  font-synthesis: none;
  --pink: #ff4fa3;
  --violet: #8f5cff;
  --muted: #a99fb5;
  --surface: rgba(29, 20, 40, .78);
  --line: rgba(255, 255, 255, .1);
  --shadow: 0 24px 80px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button, input, label { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(255, 79, 163, .55); outline-offset: 2px; }

.ambient { position: fixed; z-index: -1; width: 42rem; height: 42rem; border-radius: 50%; filter: blur(110px); opacity: .16; pointer-events: none; }
.ambient-one { top: -18rem; left: -12rem; background: #9b4dff; }
.ambient-two { right: -20rem; bottom: -20rem; background: #ff356f; }

#app { min-height: 100vh; min-height: 100dvh; }
.shell { width: 100%; max-width: 1212px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 23px/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.brand-mark { display: inline-flex; align-items: end; justify-content: center; gap: 3px; width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: linear-gradient(145deg, var(--pink), var(--violet)); box-shadow: 0 8px 24px rgba(255, 79, 163, .25); }
.brand-mark i { display: block; width: 3px; border-radius: 4px; background: white; }
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 16px; }
.brand-mark i:nth-child(3) { height: 11px; }
.brand-mark i:nth-child(4) { height: 19px; }
.brand em { color: var(--pink); font-style: normal; }

.home-nav, .topbar { display: flex; align-items: center; justify-content: space-between; }
.home-nav { padding: 2px 0 42px; }
.nav-note { color: var(--muted); font-size: 14px; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #50e3a4; box-shadow: 0 0 0 5px rgba(80, 227, 164, .1); }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(390px, .75fr); align-items: center; gap: clamp(44px, 8vw, 110px); min-height: calc(100dvh - 130px); }
.hero-kicker, .eyebrow { margin: 0 0 16px; color: #ff79bd; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { max-width: 720px; margin: 0; font: 700 clamp(54px, 7vw, 100px)/.93 "Space Grotesk", sans-serif; letter-spacing: -.07em; }
.gradient-text { color: transparent; background: linear-gradient(100deg, #fff 5%, #ff8ec9 45%, #9d76ff 80%); background-clip: text; -webkit-background-clip: text; }
.hero-copy { max-width: 560px; margin: 28px 0 34px; color: #bcb3c6; font-size: clamp(17px, 2vw, 20px); line-height: 1.6; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-point { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; color: #d4ccd9; background: rgba(255,255,255,.035); font-size: 13px; }
.hero-point span { color: #ff77bb; }

.panel { border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, rgba(35,25,47,.92), rgba(20,13,29,.94)); box-shadow: var(--shadow); backdrop-filter: blur(22px); }
.join-panel { padding: 8px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 15px; background: rgba(255,255,255,.045); }
.tab { min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; }
.tab.active { color: white; background: #34273f; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.form-wrap { padding: 28px 24px 24px; }
.form-wrap h2 { margin: 0 0 7px; font: 700 27px/1.2 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.subcopy { margin: 0 0 25px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.field { display: grid; gap: 9px; margin-top: 18px; }
.field > span, .field-label { color: #d7d0dc; font-size: 13px; font-weight: 700; }
.input { width: 100%; min-height: 51px; padding: 0 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; color: white; background: rgba(255,255,255,.05); transition: border .2s, background .2s; }
.input::placeholder { color: #746b7c; }
.input:focus { border-color: rgba(255,79,163,.65); background: rgba(255,255,255,.075); outline: 0; }
.code-input { text-transform: uppercase; letter-spacing: .24em; font-weight: 700; }
.language-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.language-options input { position: absolute; opacity: 0; pointer-events: none; }
.language-option { display: grid; place-items: center; gap: 3px; min-height: 67px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: rgba(255,255,255,.025); cursor: pointer; text-align: center; font-size: 11px; font-weight: 700; }
.language-option b { color: #eee8f2; font-size: 18px; }
.language-option:has(input:checked) { border-color: rgba(255,79,163,.7); color: #ff8bc7; background: rgba(255,79,163,.1); box-shadow: inset 0 0 0 1px rgba(255,79,163,.15); }
.language-option:has(input:focus-visible) { outline: 3px solid rgba(255,79,163,.55); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 13px; cursor: pointer; font-weight: 700; transition: transform .18s, filter .18s, background .18s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-primary { color: white; background: linear-gradient(110deg, #ff4fa3, #8d55ff); box-shadow: 0 10px 28px rgba(202,67,207,.22); }
.btn-secondary { border-color: var(--line); background: rgba(255,255,255,.055); }
.btn-ghost { border-color: transparent; color: var(--muted); background: transparent; }
.btn-danger { color: #ff91b9; background: rgba(255,74,128,.09); }
.btn-wide { width: 100%; margin-top: 24px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 13px; color: #d9d1df; background: rgba(255,255,255,.05); cursor: pointer; }

.topbar { gap: 18px; padding-bottom: 26px; }
.topbar-center { color: var(--muted); font-size: 13px; text-align: center; }
.topbar-center strong { display: block; color: white; font-size: 15px; }
.party-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); cursor: pointer; }
.party-pill span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.party-pill strong { letter-spacing: .12em; }

.lobby-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 22px; }
.lobby-main { min-height: 610px; padding: clamp(28px, 5vw, 62px); }
.lobby-side { padding: 28px; }
.lobby-title { max-width: 650px; margin: 0; font: 700 clamp(38px, 6vw, 68px)/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.lobby-title span { color: #ff62ae; }
.invite-copy { margin: 20px 0 34px; color: var(--muted); }
.join-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1vw, 10px); width: min(100%, 500px); }
.join-code b { display: grid; place-items: center; min-width: 0; aspect-ratio: .82; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.055); font: 700 clamp(26px, 4vw, 42px)/1 "Space Grotesk", sans-serif; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.section-title h2 { margin: 0; font: 700 18px/1.2 "Space Grotesk", sans-serif; }
.count { display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; color: #ff91c8; background: rgba(255,79,163,.1); font-size: 12px; }
.player-list { display: grid; gap: 10px; }
.player-row { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; color: white; background: linear-gradient(145deg, var(--avatar-a, #ff4fa3), var(--avatar-b, #754fff)); font-size: 12px; font-weight: 800; }
.player-info { min-width: 0; flex: 1; }
.player-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-info span { color: var(--muted); font-size: 11px; }
.online { width: 8px; height: 8px; border-radius: 50%; background: #42d99a; box-shadow: 0 0 0 4px rgba(66,217,154,.08); }
.offline { background: #665f6b; box-shadow: none; }
.lobby-note { margin: 22px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.start-zone { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }

.game-shell { max-width: 1312px; }
.turn-rail { display: flex; justify-content: center; gap: 8px; margin: 0 auto 20px; overflow-x: auto; scrollbar-width: none; }
.turn-rail::-webkit-scrollbar { display: none; }
.turn-person { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 118px; padding: 7px 10px 7px 7px; border: 1px solid transparent; border-radius: 13px; color: #7f7588; background: rgba(255,255,255,.025); }
.turn-person .avatar { width: 31px; height: 31px; border-radius: 9px; font-size: 10px; filter: saturate(.3); opacity: .65; }
.turn-person strong { display: block; max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.turn-person span { display: block; font-size: 9px; text-transform: uppercase; }
.turn-person.current { border-color: rgba(255,79,163,.35); color: white; background: rgba(255,79,163,.09); }
.turn-person.current .avatar { filter: none; opacity: 1; }
.turn-person.complete { color: #8c8395; opacity: .55; }

.stage { position: relative; min-height: calc(100dvh - 175px); overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 30px; background: #17101f; box-shadow: var(--shadow); }
.stage-glow { position: absolute; inset: -20% -10% 42%; background: radial-gradient(circle at 50% 30%, var(--song-a), transparent 52%), radial-gradient(circle at 15% 0%, var(--song-b), transparent 40%); opacity: .45; filter: blur(30px); pointer-events: none; }
.stage-grain { position: absolute; inset: 0; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); pointer-events: none; }
.stage-inner { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; min-height: inherit; padding: clamp(20px, 4vw, 42px); }
.song-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.song-meta { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cover { position: relative; display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 17px; background: linear-gradient(145deg, var(--song-a), var(--song-b)); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.cover::before { content: ""; position: absolute; width: 34px; height: 34px; border: 7px solid rgba(255,255,255,.35); border-radius: 50%; }
.cover::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: white; }
.song-name { min-width: 0; }
.song-name h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 clamp(20px, 3vw, 28px)/1.15 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.song-name p { margin: 5px 0 0; color: rgba(255,255,255,.6); font-size: 12px; }
.now-badge { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.7); background: rgba(0,0,0,.16); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.lyric-stage { display: grid; align-content: center; justify-items: center; min-height: 290px; padding: 38px 10px 28px; text-align: center; }
.singer-label { margin-bottom: 22px; color: rgba(255,255,255,.48); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.lyric-current { max-width: 980px; margin: 0; font: 700 clamp(32px, 6vw, 72px)/1.13 "Space Grotesk", sans-serif; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 8px 28px rgba(0,0,0,.25); transition: opacity .18s; }
.lyric-next { max-width: 800px; min-height: 1.5em; margin: 24px 0 0; color: rgba(255,255,255,.68); font: 600 clamp(18px, 2.8vw, 29px)/1.3 "Space Grotesk", sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.lyric-next::before { content: "NEXT"; display: block; margin-bottom: 7px; color: rgba(255,255,255,.5); font: 700 9px/1 "DM Sans", sans-serif; letter-spacing: .18em; }
.ready-title { max-width: 760px; margin: 0; font: 700 clamp(39px, 6vw, 70px)/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; text-wrap: balance; }
.ready-copy { margin: 18px 0 0; color: rgba(255,255,255,.55); }

.control-deck { width: min(940px, 100%); margin: 0 auto; padding: 18px 20px 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(12,7,17,.56); backdrop-filter: blur(20px); }
.timeline-row { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 10px; color: rgba(255,255,255,.48); font-size: 10px; font-variant-numeric: tabular-nums; }
.range { width: 100%; height: 24px; border: 0; border-radius: 99px; appearance: none; background: linear-gradient(to right, #ff5bad var(--progress, 0%), rgba(255,255,255,.14) var(--progress, 0%)) center / 100% 4px no-repeat; cursor: pointer; }
.range::-webkit-slider-thumb { width: 15px; height: 15px; border: 3px solid #fff; border-radius: 50%; appearance: none; background: #ff4fa3; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.range:disabled { cursor: default; opacity: .7; }
.controls { display: flex; align-items: center; justify-content: center; gap: clamp(7px, 1.4vw, 13px); margin-top: 16px; }
.control-btn { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 11px; border: 1px solid var(--line); border-radius: 14px; color: #d7d0dd; background: rgba(255,255,255,.055); cursor: pointer; font-size: 12px; font-weight: 700; }
.play-btn { width: 58px; height: 58px; border: 0; border-radius: 50%; color: white; background: linear-gradient(140deg, #ff4fa3, #9855ff); box-shadow: 0 10px 28px rgba(206,60,197,.3); font-size: 19px; }
.done-btn { min-width: 112px; border: 0; color: white; background: rgba(255,255,255,.13); }
.control-spacer { width: 12px; }
.spectator-note { display: flex; align-items: center; justify-content: center; min-height: 54px; color: rgba(255,255,255,.55); font-size: 13px; text-align: center; }
.audio-note { margin-top: 10px; color: rgba(255,255,255,.68); font-size: 11px; text-align: center; }

.round-card { width: min(760px, 100%); margin: 8vh auto 0; padding: clamp(28px, 5vw, 50px); text-align: center; }
.round-card h1 { margin: 0; font: 700 clamp(42px, 8vw, 76px)/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.round-card > p { color: var(--muted); }
.result-list { display: grid; gap: 9px; margin: 28px 0; text-align: left; }
.result { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }
.result-copy { min-width: 0; flex: 1; }
.result-copy strong, .result-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-copy span { color: var(--muted); font-size: 12px; }
.result-state { color: #73e7b1; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.result-state.skipped { color: #a49aaa; }

.loading { display: grid; place-items: center; min-height: 100dvh; color: var(--muted); }
.spinner { width: 30px; height: 30px; margin-bottom: 13px; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--pink); border-radius: 50%; animation: spin .8s linear infinite; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); max-width: calc(100% - 32px); padding: 12px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: white; background: #33243d; box-shadow: 0 12px 40px rgba(0,0,0,.4); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.connection { color: #ffb65c; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 850px) {
  .home-grid { grid-template-columns: 1fr; min-height: auto; gap: 42px; }
  .hero { padding-top: 30px; text-align: center; }
  .hero h1, .hero-copy { margin-left: auto; margin-right: auto; }
  .hero-points { justify-content: center; }
  .join-panel { width: min(480px, 100%); margin: 0 auto 50px; }
  .lobby-layout { grid-template-columns: 1fr; }
  .lobby-main { min-height: auto; }
  .lobby-side { order: -1; }
  .stage { min-height: calc(100dvh - 155px); }
}

@media (max-width: 560px) {
  .shell, .game-shell { width: 100%; padding-top: calc(14px + env(safe-area-inset-top)); padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(10px, env(safe-area-inset-left)); }
  .home-nav { padding-bottom: 15px; }
  .nav-note { display: none; }
  .hero { padding-top: 26px; }
  .hero h1 { font-size: clamp(52px, 16vw, 76px); }
  .hero-copy { margin: 20px auto 24px; font-size: 16px; }
  .hero-points { display: none; }
  .home-grid { gap: 31px; }
  .form-wrap { padding: 24px 17px 18px; }
  .panel { border-radius: 22px; }
  .topbar { padding-bottom: 14px; }
  .topbar-center { display: none; }
  .brand { font-size: 19px; }
  .brand-mark { width: 31px; height: 31px; }
  .lobby-main, .lobby-side { padding: 24px 20px; }
  .join-code { justify-content: center; }
  .join-code b { border-radius: 11px; }
  .invite-actions .btn { flex: 1; padding: 0 10px; }
  .turn-rail { justify-content: flex-start; margin-bottom: 10px; }
  .stage { min-height: calc(100dvh - 117px); border-radius: 22px; }
  .stage-inner { padding: 17px 13px 13px; }
  .cover { width: 50px; height: 50px; border-radius: 14px; }
  .song-name h1 { font-size: 19px; }
  .now-badge { padding: 7px 9px; font-size: 8px; }
  .lyric-stage { min-height: 280px; padding: 25px 4px 20px; }
  .lyric-current { font-size: clamp(31px, 9.5vw, 48px); }
  .lyric-next { margin-top: 20px; font-size: 18px; }
  .control-deck { padding: 14px 11px 13px; border-radius: 17px; }
  .controls { gap: 6px; }
  .playback-controls { display: grid; grid-template-areas: "change skip done done" "back play play forward"; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .playback-controls .change-btn { grid-area: change; }
  .playback-controls .skip-btn { grid-area: skip; }
  .playback-controls .back-btn { grid-area: back; }
  .playback-controls .play-btn { grid-area: play; justify-self: center; }
  .playback-controls .forward-btn { grid-area: forward; }
  .playback-controls .done-btn { grid-area: done; }
  .control-btn { min-width: 42px; height: 43px; padding: 0 8px; border-radius: 12px; font-size: 11px; }
  .play-btn { width: 52px; height: 52px; }
  .done-btn { min-width: 72px; }
  .control-spacer { display: none; }
  .hide-mobile { display: none; }
}