:root {
  color-scheme: dark;
  --ink: #f8f4ff;
  --muted: #a9a0b9;
  --panel: rgba(15, 9, 27, 0.78);
  --panel-strong: rgba(9, 5, 18, 0.94);
  --line: rgba(255, 255, 255, 0.12);
  --pink: #ff3fac;
  --violet: #8c45ff;
  --cyan: #35d9ff;
  --gold: #ffd059;
  --green: #38e874;
  --red: #ff385c;
  --yellow: #ffd638;
  --blue: #34a8ff;
  --orange: #ff8a2f;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #07040d;
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.app-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 600px;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 26%, rgba(123, 47, 255, 0.16), transparent 31%),
    radial-gradient(circle at 12% 88%, rgba(255, 44, 154, 0.12), transparent 35%),
    #090511;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0;
  overflow: hidden;
}

.screen.active {
  display: block;
  opacity: 1;
  animation: screenIn 0.55s var(--ease-out) both;
}

@keyframes screenIn {
  from { opacity: 0; transform: scale(1.018); filter: blur(7px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: grainShift 0.2s steps(2) infinite;
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -3%); }
  50% { transform: translate(-3%, 2%); }
  75% { transform: translate(3%, 3%); }
  100% { transform: translate(-2%, -2%); }
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 52vw;
  height: 52vw;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.13;
  pointer-events: none;
}

.ambient-a {
  top: -30vw;
  right: -10vw;
  background: var(--violet);
}

.ambient-b {
  bottom: -38vw;
  left: -10vw;
  background: var(--pink);
}

.eyebrow {
  color: #d8cced;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.glass-panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(31, 17, 50, 0.85), rgba(9, 5, 17, 0.92));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(130%);
}

/* Authentication */

.screen-auth {
  background: #08040f;
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 2, 11, 0.28), rgba(5, 2, 11, 0.76) 58%, rgba(5, 2, 11, 0.94)),
    linear-gradient(0deg, rgba(5, 2, 11, 0.88), transparent 55%),
    url("assets/neon-arena.png") center / cover no-repeat;
  filter: saturate(1.08) brightness(0.82);
  transform: scale(1.02);
}

.screen-auth::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 22% 50%, rgba(255, 60, 180, 0.12), transparent 31%);
}

.auth-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr minmax(390px, 0.75fr);
  align-items: center;
  gap: 7vw;
  width: min(1240px, 90vw);
  height: 100%;
  margin: auto;
}

.auth-hero {
  align-self: center;
  text-shadow: 0 3px 24px #000;
}

.auth-hero .eyebrow {
  margin-bottom: 18px;
  color: #ff8acd;
}

.auth-brand {
  width: max-content;
  font-size: clamp(78px, 9vw, 138px);
}

.auth-hero > p {
  max-width: 530px;
  margin: 33px 0 25px;
  color: #d2c7d8;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
}

.auth-feature-row {
  display: flex;
  gap: 18px;
  color: #8e8298;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.auth-feature-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-feature-row b {
  color: var(--cyan);
  font-size: 13px;
}

.auth-card {
  width: 100%;
  min-height: 500px;
  padding: 18px 28px 26px;
  border-radius: 9px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  margin: -18px -28px 30px;
  border-bottom: 1px solid var(--line);
}

.auth-tabs button {
  height: 58px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #756b80;
  cursor: pointer;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.auth-tabs button:hover {
  color: #d8cfdf;
}

.auth-tabs button.active {
  border-bottom-color: var(--pink);
  background: linear-gradient(0deg, rgba(255, 63, 172, 0.1), transparent);
  color: #ff7bc5;
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
  animation: authFormIn 0.35s var(--ease-out) both;
}

@keyframes authFormIn {
  from { opacity: 0; transform: translateX(12px); }
}

.auth-form .eyebrow {
  color: var(--cyan);
  font-size: 8px;
}

.auth-form h2 {
  margin: 5px 0 22px;
  font-family: Impact, sans-serif;
  font-size: 35px;
  font-style: italic;
  letter-spacing: 0.02em;
}

.auth-form label,
.import-fields label {
  display: flex;
  margin-bottom: 13px;
  color: #8f8499;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-align: left;
  text-transform: uppercase;
  flex-direction: column;
}

.auth-form input,
.import-fields input {
  width: 100%;
  height: 45px;
  margin-top: 6px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 4px;
  outline: 0;
  background: rgba(255, 255, 255, 0.045);
  color: white;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.2s, background 0.2s;
}

.auth-form input:focus,
.import-fields input:focus {
  border-color: rgba(255, 63, 172, 0.65);
  background: rgba(255, 255, 255, 0.07);
}

.auth-form input::placeholder,
.import-fields input::placeholder {
  color: #655c6d;
}

.auth-form input[readonly],
.import-fields input[readonly] {
  color: #a99daf;
  cursor: default;
  opacity: 0.72;
}

.auth-submit {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 20px;
  text-align: left;
  justify-content: space-between;
}

.auth-submit:disabled,
.import-confirm:disabled {
  cursor: wait;
  filter: grayscale(0.65);
  opacity: 0.62;
  transform: none;
}

.auth-error {
  min-height: 17px;
  margin: 15px 0 0;
  color: #ff748b;
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}

kbd {
  min-width: 23px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 -2px rgba(0, 0, 0, 0.25);
  color: #fff;
  font: 700 11px/1.1 "Avenir Next", sans-serif;
  text-align: center;
}

/* Splash */

.screen-splash {
  background:
    linear-gradient(90deg, rgba(7, 2, 15, 0.78), rgba(8, 2, 15, 0.1) 48%, rgba(7, 2, 15, 0.45)),
    linear-gradient(0deg, rgba(5, 2, 11, 0.95), transparent 50%),
    url("assets/neon-arena.png") center / cover no-repeat;
}

.screen-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, transparent 20%, rgba(5, 1, 10, 0.48) 88%);
}

.splash-vignette {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.splash-vignette::before,
.splash-vignette::after {
  content: "";
  position: absolute;
  top: -35%;
  width: 8px;
  height: 150%;
  background: linear-gradient(transparent, rgba(55, 219, 255, 0.7), transparent);
  filter: blur(5px);
  transform-origin: top;
  animation: searchlight 6s ease-in-out infinite alternate;
}

.splash-vignette::before { left: 25%; transform: rotate(24deg); }
.splash-vignette::after { right: 24%; transform: rotate(-20deg); animation-delay: -3s; }

@keyframes searchlight {
  to { transform: rotate(-12deg); opacity: 0.35; }
}

.splash-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 4vh;
  text-align: center;
}

.splash-content .eyebrow {
  margin-bottom: 14px;
  text-shadow: 0 2px 14px #000;
}

.brand {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-style: italic;
  letter-spacing: -0.045em;
  line-height: 0.73;
  text-transform: uppercase;
  transform: skew(-5deg) rotate(-2deg);
}

.brand span {
  display: block;
}

.brand span:first-child {
  color: #fff;
  text-shadow: 0 3px 0 #9f7eb4, 0 0 25px rgba(255, 255, 255, 0.45);
}

.brand span:last-child {
  padding: 0.03em 0.12em 0.1em;
  color: transparent;
  background: linear-gradient(180deg, #ff9cd9 2%, #ff2da5 35%, #aa2cff 78%, #6420c9);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 5px 0 #3c0d6a) drop-shadow(0 0 30px rgba(255, 47, 180, 0.55));
}

.brand-hero {
  font-size: clamp(86px, 12vw, 172px);
}

.splash-copy {
  margin: 34px 0 26px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 15px #000;
}

.press-start {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 278px;
  padding: 15px 26px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(100deg, rgba(244, 40, 160, 0.92), rgba(116, 38, 232, 0.94));
  box-shadow: 0 15px 45px rgba(180, 32, 213, 0.42), inset 0 1px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.13em;
  justify-content: center;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.press-start::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%) skew(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  animation: buttonShine 2.8s ease-in-out infinite;
}

@keyframes buttonShine { 55%, 100% { transform: translateX(120%) skew(-20deg); } }

.press-start:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 55px rgba(180, 32, 213, 0.58); }
.start-icon { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; font-size: 10px; }
.local-note { margin-top: 18px; color: rgba(255, 255, 255, 0.48); font-size: 11px; letter-spacing: 0.07em; }

.equalizer {
  position: absolute;
  z-index: 2;
  right: 3vw;
  bottom: 3vh;
  display: flex;
  align-items: end;
  gap: 3px;
  height: 32px;
  opacity: 0.5;
}

.equalizer i { width: 3px; height: 20%; background: linear-gradient(var(--cyan), var(--pink)); animation: eq 0.7s ease-in-out infinite alternate; }
.equalizer i:nth-child(2n) { animation-delay: -0.2s; }
.equalizer i:nth-child(3n) { animation-delay: -0.4s; }
.equalizer i:nth-child(5n) { animation-duration: 0.45s; }
@keyframes eq { to { height: 100%; } }

/* Shared navigation */

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 82px;
  padding: 0 4vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(8, 4, 15, 0.82), rgba(8, 4, 15, 0.28));
  backdrop-filter: blur(16px);
}

.mini-brand {
  display: flex;
  width: 138px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: Impact, "Arial Narrow Bold", sans-serif;
  font-size: 20px;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.85;
  text-align: left;
  transform: skew(-5deg);
}

.mini-brand b { color: white; }
.mini-brand span { margin-left: 4px; color: var(--pink); }

.profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 18px;
  padding-right: 24px;
}

.profile-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--pink), var(--violet));
  box-shadow: 0 0 22px rgba(255, 63, 172, 0.35);
  font-size: 13px;
}

.profile-chip div:last-child { display: flex; flex-direction: column; }
.profile-chip small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: 0.18em; }
.profile-chip strong { margin-top: 2px; font-size: 11px; letter-spacing: 0.08em; }

.icon-button,
.pause-button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.icon-button:hover,
.pause-button:hover { background: rgba(255, 255, 255, 0.13); transform: rotate(8deg); }

.lineup-switcher { display: flex; min-width: 220px; height: 48px; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 5px; background: linear-gradient(120deg, rgba(255, 63, 172, 0.09), rgba(87, 44, 154, 0.08)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.04); }
.home-lineup-switcher { margin-left: auto; }
.lineup-switcher-mark { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 92, 190, 0.38); border-radius: 50%; background: rgba(255, 63, 172, 0.11); color: var(--pink); font-size: 9px; box-shadow: 0 0 16px rgba(255, 63, 172, 0.18); }
.lineup-switcher-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.lineup-switcher-copy small { color: #786d82; font-size: 6px; font-weight: 900; letter-spacing: 0.16em; }
.lineup-switcher select { width: 100%; margin-top: 2px; padding: 0 18px 0 0; overflow: hidden; border: 0; outline: 0; appearance: none; background: linear-gradient(45deg, transparent 50%, #a59aad 50%) right 3px center / 5px 5px no-repeat; color: #eee6f2; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: 0.035em; text-overflow: ellipsis; white-space: nowrap; }
.lineup-switcher select:disabled { cursor: wait; opacity: 0.55; }
.lineup-switcher select option { background: #130b1e; color: white; }
.icon-button { position: relative; }
.notification-badge { position: absolute; top: -4px; right: -3px; display: grid; min-width: 17px; height: 17px; padding: 0 4px; place-items: center; border: 2px solid #0a0511; border-radius: 10px; background: var(--pink); box-shadow: 0 0 12px rgba(255, 63, 172, 0.7); color: white; font-size: 7px; font-weight: 900; }
.notification-badge[hidden] { display: none; }

/* Home */

.screen-menu {
  background:
    linear-gradient(90deg, rgba(7, 3, 13, 0.96) 0%, rgba(7, 3, 13, 0.82) 37%, rgba(7, 3, 13, 0.24) 71%),
    linear-gradient(0deg, rgba(8, 3, 15, 0.9), transparent 55%),
    url("assets/neon-arena.png") center / cover no-repeat;
}

.screen-menu::after {
  content: "";
  position: absolute;
  inset: 82px 0 0;
  pointer-events: none;
  background: repeating-linear-gradient(100deg, transparent 0 110px, rgba(255, 255, 255, 0.012) 111px 112px);
}

.home-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.78fr);
  align-items: center;
  gap: 6vw;
  height: calc(100% - 130px);
  padding: 3vh 6vw 5vh;
}

.home-copy { max-width: 640px; }
.season-label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: #d5cade; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; }
.season-label span { width: 27px; height: 2px; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.home-copy h2 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(66px, 7.4vw, 112px); font-style: italic; letter-spacing: -0.035em; line-height: 0.84; text-transform: uppercase; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); transform: skew(-3deg); }
.home-copy h2 em { color: transparent; background: linear-gradient(110deg, var(--pink), #ba4cff 58%, var(--cyan)); -webkit-background-clip: text; background-clip: text; font-style: inherit; filter: drop-shadow(0 0 25px rgba(255, 47, 177, 0.24)); }
.home-copy > p { max-width: 480px; margin: 24px 0 30px; color: #c1b8cc; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.6; }
.home-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.primary-action,
.secondary-action {
  position: relative;
  min-width: 190px;
  min-height: 58px;
  padding: 12px 24px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
}

.primary-action {
  background: linear-gradient(115deg, #ed2998, #792ee9);
  box-shadow: 0 14px 35px rgba(164, 35, 203, 0.3), inset 0 1px rgba(255, 255, 255, 0.3);
}

.secondary-action { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(14, 9, 24, 0.72); backdrop-filter: blur(10px); }
.primary-action:hover,
.secondary-action:hover { transform: translateY(-3px); }
.primary-action:hover { box-shadow: 0 18px 45px rgba(164, 35, 203, 0.47); }
.secondary-action:hover { border-color: rgba(255, 255, 255, 0.42); }
.primary-action span,
.secondary-action span { display: block; font-size: 13px; font-weight: 900; letter-spacing: 0.12em; }
.primary-action b,
.secondary-action b { display: block; margin-top: 3px; color: rgba(255, 255, 255, 0.62); font-size: 10px; font-weight: 500; }

.tour-card {
  position: relative;
  min-height: 480px;
  padding: 24px;
  overflow: hidden;
  border-radius: 8px;
  transform: perspective(1200px) rotateY(-5deg);
}

.tour-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, 0.035), transparent 62%); transform: translateX(-80%); animation: cardShine 6s ease-in-out infinite; }
@keyframes cardShine { 60%, 100% { transform: translateX(90%); } }
.tour-card-top { display: flex; justify-content: space-between; color: #b7acc5; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; }
.venue-orbit { position: relative; height: 255px; margin: 10px -10px -2px; }
.venue-orbit::before { content: ""; position: absolute; inset: 30px 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 60, 180, 0.65) 0, rgba(92, 30, 190, 0.2) 26%, transparent 68%); filter: blur(4px); animation: breathe 3.5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: 0.72; } }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(194, 92, 255, 0.4); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.orbit-one { width: 240px; height: 102px; box-shadow: 0 0 18px rgba(177, 71, 255, 0.2); }
.orbit-two { width: 170px; height: 170px; border-style: dashed; animation: orbitSpin 12s linear infinite; }
@keyframes orbitSpin { to { transform: translate(-50%, -50%) rotate(342deg); } }
.venue-pin { position: absolute; top: 50%; left: 50%; display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff76cf, #9c2bdc 50%, #32116b); box-shadow: 0 0 35px rgba(255, 55, 183, 0.62), 0 0 90px rgba(107, 36, 210, 0.32); font-size: 27px; transform: translate(-50%, -50%); }
.tour-card h3 { margin: 0; font-family: Impact, "Arial Narrow Bold", sans-serif; font-size: 31px; font-style: italic; letter-spacing: 0.02em; }
.tour-card > p { margin: 3px 0 18px; color: var(--muted); font-size: 12px; }
.progress-track { height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.progress-track span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--cyan)); box-shadow: 0 0 15px var(--pink); transition: width 0.8s var(--ease-out); }
.tour-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.tour-stats > div { display: flex; padding-left: 12px; border-left: 1px solid var(--line); flex-direction: column; }
.tour-stats strong { font-family: Impact, sans-serif; font-size: 20px; letter-spacing: 0.04em; }
.tour-stats small { margin-top: 3px; color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: 0.15em; }

.menu-footer { position: absolute; z-index: 8; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 22px; height: 48px; padding: 0 4vw; border-top: 1px solid rgba(255, 255, 255, 0.07); background: rgba(5, 2, 10, 0.72); color: #9c92a9; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; backdrop-filter: blur(14px); }
.menu-footer > span { display: flex; align-items: center; gap: 7px; }
.footer-spacer { flex: 1; }
.signal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }

/* Library */

.screen-library { background: radial-gradient(circle at 75% 30%, rgba(114, 41, 196, 0.17), transparent 36%), linear-gradient(135deg, #0d0718, #06030b 70%); }
.screen-library::before { content: ""; position: absolute; inset: 0; opacity: 0.35; pointer-events: none; background: linear-gradient(90deg, transparent 49.8%, rgba(255, 255, 255, 0.035) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(255, 255, 255, 0.025) 50%, transparent 50.2%); background-size: 90px 90px; transform: perspective(500px) rotateX(50deg) scale(1.5); }
.library-topbar { height: 88px; }
.back-button { display: flex; align-items: center; gap: 8px; width: 150px; padding: 0; border: 0; background: none; color: #b9afc6; cursor: pointer; font-size: 10px; font-weight: 900; letter-spacing: 0.14em; }
.back-button span { font-size: 28px; font-weight: 300; line-height: 0; }
.library-heading { position: absolute; top: 19px; left: 50%; text-align: center; transform: translateX(-50%); }
.library-heading small { color: var(--pink); font-size: 8px; font-weight: 900; letter-spacing: 0.23em; }
.library-heading h2 { margin: 2px 0 0; font-family: Impact, "Arial Narrow Bold", sans-serif; font-size: 26px; font-style: italic; letter-spacing: 0.035em; }
.library-lineup-switcher { min-width: 205px; margin-left: auto; }
.import-button { display: flex; align-items: center; gap: 7px; margin-left: 12px; padding: 10px 15px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 3px; background: rgba(255, 255, 255, 0.06); cursor: pointer; font-size: 9px; font-weight: 900; letter-spacing: 0.12em; }
.import-button span { color: var(--pink); font-size: 17px; }
.import-button:hover { background: rgba(255, 255, 255, 0.11); }
.import-button:disabled { cursor: not-allowed; opacity: 0.38; }

.library-toolbar { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 4vw; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(8, 4, 15, 0.58); }
.search-box { display: flex; align-items: center; gap: 8px; width: 260px; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; background: rgba(255, 255, 255, 0.045); color: #756b81; }
.search-box input { width: 100%; padding: 0; border: 0; outline: 0; background: none; color: white; font-size: 11px; }
.search-box input::placeholder { color: #746b7e; }
.artist-filters { display: flex; gap: 6px; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.artist-filters::-webkit-scrollbar { display: none; }
.artist-filters button { flex: 0 0 auto; padding: 8px 12px; border: 1px solid transparent; border-radius: 20px; background: transparent; color: #8d8498; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: 0.07em; }
.artist-filters button:hover { color: white; }
.artist-filters button.active { border-color: rgba(255, 65, 174, 0.35); background: rgba(255, 55, 169, 0.13); color: #ff78c4; }

.library-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(460px, 1fr) minmax(320px, 410px); grid-template-rows: minmax(0, 1fr); gap: 32px; height: calc(100% - 152px); min-height: 0; padding: 22px 4vw 28px; }
.song-list-wrap { min-width: 0; min-height: 0; }
.song-count { height: 24px; color: #716779; font-size: 8px; font-weight: 900; letter-spacing: 0.18em; }
.song-list { height: calc(100% - 24px); padding-right: 10px; overflow: auto; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; scrollbar-width: thin; }
.song-row { position: relative; display: grid; grid-template-columns: 58px minmax(160px, 1fr) 100px 72px 36px; align-items: center; gap: 14px; min-height: 68px; margin-bottom: 6px; padding: 7px 13px 7px 7px; border: 1px solid transparent; border-radius: 5px; background: rgba(255, 255, 255, 0.025); cursor: pointer; transition: border-color 0.18s, background 0.18s, transform 0.2s var(--ease-out); }
.song-row:hover { z-index: 2; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.055); transform: translateX(4px); }
.song-row.selected { border-color: rgba(255, 62, 172, 0.5); background: linear-gradient(90deg, rgba(255, 49, 165, 0.16), rgba(109, 40, 219, 0.06)); box-shadow: inset 3px 0 var(--pink), 0 10px 30px rgba(0, 0, 0, 0.16); }
.song-cover { position: relative; display: grid; width: 54px; height: 54px; overflow: hidden; place-items: center; border-radius: 3px; background: linear-gradient(145deg, var(--cover-a), var(--cover-b)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 8px 18px rgba(0, 0, 0, 0.3); font-family: Impact, sans-serif; font-size: 16px; font-style: italic; }
.song-cover::after { content: ""; position: absolute; width: 80px; height: 17px; border: 1px solid rgba(255, 255, 255, 0.3); transform: rotate(-35deg); }
.song-copy { min-width: 0; }
.song-copy strong { display: block; overflow: hidden; font-size: 13px; letter-spacing: 0.015em; text-overflow: ellipsis; white-space: nowrap; }
.song-copy small { display: block; margin-top: 4px; overflow: hidden; color: #91869f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.song-venue { color: #82778d; font-size: 9px; letter-spacing: 0.04em; }
.audio-state { display: flex; align-items: center; gap: 6px; color: #69616f; font-size: 8px; font-weight: 900; letter-spacing: 0.08em; }
.audio-state i { width: 6px; height: 6px; border-radius: 50%; background: #59515f; }
.audio-state.ready { color: #8adba5; }
.audio-state.ready i { background: var(--green); box-shadow: 0 0 8px var(--green); }
.song-chevron { color: #5b5263; font-size: 18px; }
.empty-list { display: grid; height: 70%; place-items: center; color: #847a8f; font-size: 12px; text-align: center; }

.song-detail { display: flex; height: 100%; min-height: 0; padding: 17px; overflow-x: hidden; overflow-y: auto; border-radius: 7px; flex-direction: column; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; scrollbar-width: thin; }
.detail-art { position: relative; display: flex; min-height: 150px; flex: 0 0 auto; overflow: hidden; align-items: center; border-radius: 4px; background: radial-gradient(circle at 62% 34%, var(--art-c), transparent 13%), linear-gradient(145deg, var(--art-a), var(--art-b)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 14px 32px rgba(0, 0, 0, 0.28); justify-content: center; }
.detail-art::before { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 50%; box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.025), 0 0 0 50px rgba(255, 255, 255, 0.02); }
.cover-lines { position: absolute; inset: 0; opacity: 0.26; background: repeating-linear-gradient(122deg, transparent 0 18px, rgba(255, 255, 255, 0.4) 19px 20px); }
.detail-art > span { z-index: 1; font-family: Impact, sans-serif; font-size: 57px; font-style: italic; letter-spacing: -0.06em; text-shadow: 0 5px 20px rgba(0, 0, 0, 0.36); transform: skew(-5deg); }
.detail-art > small { position: absolute; z-index: 1; right: 10px; bottom: 8px; font-size: 6px; font-weight: 900; letter-spacing: 0.2em; opacity: 0.65; }
.detail-meta { position: relative; padding: 18px 2px 11px; }
.detail-meta h3 { max-width: calc(100% - 75px); margin: 0; overflow: hidden; font-family: Impact, "Arial Narrow Bold", sans-serif; font-size: 29px; font-style: italic; letter-spacing: 0.015em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.detail-meta p { margin: 5px 0 0; color: #a89daf; font-size: 12px; }
.ready-pill { position: absolute; top: 18px; right: 2px; display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid rgba(56, 232, 116, 0.25); border-radius: 10px; background: rgba(56, 232, 116, 0.08); color: #84e2a4; font-size: 7px; font-weight: 900; letter-spacing: 0.09em; }
.ready-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.ready-pill.missing { border-color: rgba(255, 193, 74, 0.22); background: rgba(255, 190, 67, 0.08); color: #e9be68; }
.ready-pill.missing i { background: #e9a633; box-shadow: 0 0 8px #e9a633; }
.song-facts { display: grid; grid-template-columns: 1.15fr 0.8fr 0.8fr; margin-bottom: 13px; border: 1px solid var(--line); border-radius: 4px; }
.song-facts div { display: flex; min-width: 0; padding: 9px 10px; border-right: 1px solid var(--line); flex-direction: column; }
.song-facts div:last-child { border-right: 0; }
.song-facts small { color: #756c7e; font-size: 7px; font-weight: 900; letter-spacing: 0.13em; }
.song-facts strong { margin-top: 3px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-panel { flex: 0 0 auto; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 4px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(121, 40, 255, 0.035)); }
.leaderboard-heading { display: flex; align-items: center; justify-content: space-between; }
.leaderboard-heading > span { display: flex; flex-direction: column; }
.leaderboard-heading small { color: #716779; font-size: 6px; font-weight: 900; letter-spacing: 0.16em; }
.leaderboard-heading strong { margin-top: 2px; font-size: 9px; letter-spacing: 0.1em; }
.leaderboard-heading > b { padding: 4px 6px; border: 1px solid rgba(255, 63, 172, 0.25); border-radius: 10px; background: rgba(255, 63, 172, 0.08); color: #ff83c8; font-size: 6px; letter-spacing: 0.11em; }
.leaderboard-list { max-height: 121px; margin-top: 7px; overflow-y: auto; }
.leaderboard-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; min-height: 35px; align-items: center; gap: 7px; padding: 4px 6px; border-top: 1px solid rgba(255, 255, 255, 0.055); }
.leaderboard-row > b { color: #746a7e; font-family: Impact, sans-serif; font-size: 11px; font-style: italic; }
.leaderboard-row > span { display: flex; min-width: 0; flex-direction: column; }
.leaderboard-row strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-row small { margin-top: 2px; color: #706779; font-size: 6px; }
.leaderboard-row em { color: #d9cfe0; font-family: Impact, sans-serif; font-size: 12px; font-style: italic; letter-spacing: 0.04em; }
.leaderboard-row.current-player { background: rgba(255, 63, 172, 0.07); box-shadow: inset 2px 0 var(--pink); }
.leaderboard-row.current-player > b,
.leaderboard-row.current-player em { color: var(--pink); }
.leaderboard-empty { display: grid; min-height: 55px; place-items: center; color: #766c80; font-size: 8px; text-align: center; }
.leaderboard-loading { animation: loadingText 0.9s ease-in-out infinite alternate; }
@keyframes loadingText { to { color: #c6b7cf; } }
.leaderboard-status { display: block; min-height: 8px; margin-top: 5px; color: #6f6578; font-size: 6px; letter-spacing: 0.04em; }
.difficulty-block { margin-top: 11px; }
.difficulty-label { display: flex; justify-content: space-between; color: #8d8396; font-size: 8px; font-weight: 900; letter-spacing: 0.13em; }
.difficulty-label strong { color: #e6dbea; }
.difficulty-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 7px; }
.difficulty-options button { display: flex; height: 38px; padding: 0 4px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 3px; background: rgba(255, 255, 255, 0.035); color: #716979; cursor: pointer; flex-wrap: wrap; font-size: 0; justify-content: center; align-content: center; gap: 2px; transition: 0.18s; }
.difficulty-options button span { width: 4px; height: 13px; border-radius: 1px; background: currentColor; }
.difficulty-options button::after { content: attr(data-difficulty); width: 100%; margin-top: 2px; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.difficulty-options button:hover { color: #ccc0d3; }
.difficulty-options button.active { border-color: rgba(255, 63, 172, 0.55); background: rgba(255, 53, 170, 0.13); color: var(--pink); box-shadow: inset 0 0 14px rgba(255, 63, 172, 0.1); }
.play-button { display: flex; align-items: center; min-height: 47px; margin-top: 11px; padding: 0 8px 0 17px; border: 0; border-radius: 3px; background: linear-gradient(110deg, #f0299b, #762ddd); box-shadow: 0 12px 25px rgba(166, 39, 199, 0.27), inset 0 1px rgba(255, 255, 255, 0.25); cursor: pointer; font-size: 11px; font-weight: 900; letter-spacing: 0.12em; justify-content: space-between; transition: transform 0.2s, box-shadow 0.2s; }
.play-button b { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; font-size: 9px; }
.play-button:hover { transform: translateY(-2px); box-shadow: 0 16px 35px rgba(166, 39, 199, 0.42); }
.play-button:disabled { cursor: not-allowed; opacity: 0.42; transform: none; }
.detail-link-actions { display: flex; min-height: 25px; align-items: center; justify-content: center; gap: 14px; }
.attach-button { margin-top: 7px; padding: 4px; border: 0; background: none; color: #786e82; cursor: pointer; font-size: 8px; text-decoration: underline; text-underline-offset: 3px; }
.attach-button:hover { color: #bcaec7; }
.attach-button:disabled { cursor: not-allowed; opacity: 0.4; }
.remove-track-button { margin-top: 7px; padding: 4px; border: 0; background: none; color: #a46170; cursor: pointer; font-size: 8px; text-decoration: underline; text-underline-offset: 3px; }
.remove-track-button:hover { color: #ff758e; }
.remove-track-button:disabled { cursor: wait; opacity: 0.4; }
.detail-hint { margin: 5px 0 0; color: #6f6577; font-size: 8px; line-height: 1.4; text-align: center; }

/* Versus Grid */

.battle-entry { position: relative; border-color: rgba(53, 217, 255, 0.35); background: linear-gradient(125deg, rgba(12, 28, 41, 0.88), rgba(22, 12, 36, 0.84)); }
.battle-entry:hover { border-color: rgba(53, 217, 255, 0.74); box-shadow: 0 15px 35px rgba(31, 168, 203, 0.16); }
.battle-entry-badge { position: absolute; top: -7px; right: -7px; display: grid; min-width: 21px; height: 21px; padding: 0 5px; place-items: center; border: 2px solid #090511; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px rgba(53, 217, 255, 0.75); color: #061018; font-size: 8px; font-style: normal; font-weight: 900; }
.battle-entry-badge[hidden] { display: none; }
.screen-battle { background: radial-gradient(circle at 50% 42%, rgba(23, 153, 187, 0.12), transparent 34%), linear-gradient(145deg, #070d15, #08050f 55%, #11091b); }
.screen-battle::before { content: ""; position: absolute; inset: 0; opacity: 0.27; pointer-events: none; background: linear-gradient(rgba(67, 216, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 216, 255, 0.08) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.screen-battle::after { content: ""; position: absolute; top: 88px; bottom: 48px; left: 37%; width: 1px; pointer-events: none; background: linear-gradient(transparent, rgba(53, 217, 255, 0.32), transparent); box-shadow: 330px 0 rgba(255, 63, 172, 0.12); }
.battle-topbar { height: 88px; border-bottom-color: rgba(53, 217, 255, 0.13); background: rgba(5, 10, 17, 0.8); }
.battle-heading { position: absolute; top: 18px; left: 50%; text-align: center; transform: translateX(-50%); }
.battle-heading small { color: var(--cyan); font-size: 7px; font-weight: 900; letter-spacing: 0.28em; }
.battle-heading h2 { margin: 1px 0 0; font-family: Impact, sans-serif; font-size: 27px; font-style: italic; letter-spacing: 0.08em; }
.battle-lineup-switcher { margin-left: auto; border-color: rgba(53, 217, 255, 0.18); background: linear-gradient(120deg, rgba(53, 217, 255, 0.08), rgba(70, 45, 121, 0.08)); }
.battle-refresh { display: flex; height: 40px; align-items: center; gap: 7px; margin-left: 12px; padding: 0 14px; border: 1px solid rgba(53, 217, 255, 0.24); border-radius: 3px; background: rgba(53, 217, 255, 0.055); color: #9ccbd7; cursor: pointer; font-size: 8px; font-weight: 900; letter-spacing: 0.12em; }
.battle-refresh:hover { border-color: var(--cyan); color: white; }
.battle-refresh:disabled { cursor: wait; opacity: 0.5; }
.battle-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(230px, 0.72fr) minmax(340px, 1.2fr) minmax(250px, 0.82fr); gap: 14px; height: calc(100% - 136px); padding: 19px 3vw 22px; }
.battle-panel { min-width: 0; min-height: 0; padding: 18px; overflow: hidden; border: 1px solid rgba(124, 218, 242, 0.13); border-radius: 4px; background: linear-gradient(145deg, rgba(13, 25, 35, 0.85), rgba(10, 7, 18, 0.92)); box-shadow: 0 20px 55px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.035); }
.battle-panel > header { display: flex; min-height: 35px; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(53, 217, 255, 0.1); }
.battle-panel > header span { display: flex; min-width: 0; flex-direction: column; }
.battle-panel header small { color: #66838c; font-size: 6px; font-weight: 900; letter-spacing: 0.2em; }
.battle-panel header strong { margin-top: 3px; overflow: hidden; font-size: 11px; letter-spacing: 0.08em; text-overflow: ellipsis; white-space: nowrap; }
.battle-panel > header > b { padding: 4px 6px; color: var(--cyan); font-size: 6px; letter-spacing: 0.11em; }
.battle-roster-panel > p { margin: 12px 0; color: #75858d; font-size: 8px; line-height: 1.45; }
.battle-member-roster { height: calc(100% - 78px); overflow-y: auto; scrollbar-width: thin; }
.battle-member { display: grid; grid-template-columns: 39px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 58px; margin-bottom: 7px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 3px; background: rgba(255, 255, 255, 0.025); color: white; cursor: pointer; text-align: left; transition: 0.18s; }
.battle-member:hover { border-color: rgba(53, 217, 255, 0.32); background: rgba(53, 217, 255, 0.055); transform: translateX(2px); }
.battle-member.selected { border-color: rgba(53, 217, 255, 0.68); background: linear-gradient(90deg, rgba(53, 217, 255, 0.14), rgba(53, 217, 255, 0.025)); box-shadow: inset 3px 0 var(--cyan); }
.battle-member-avatar { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(53, 217, 255, 0.35); clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); background: linear-gradient(145deg, #145069, #241331); color: #d8f9ff; font-weight: 900; }
.battle-member > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.battle-member strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.battle-member small { margin-top: 3px; overflow: hidden; color: #6f8087; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.battle-member > i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.battle-empty { display: grid; min-height: 62px; place-items: center; color: #607078; font-size: 8px; line-height: 1.5; text-align: center; }
.battle-briefing-panel { position: relative; display: flex; flex-direction: column; }
.battle-briefing-panel > header { display: flex; flex-direction: column; }
.battle-briefing-panel > header strong { font-family: Impact, sans-serif; font-size: 24px; font-style: italic; }
.battle-grid-mark { position: absolute; top: 11%; right: -4%; width: 175px; height: 175px; opacity: 0.12; transform: rotate(45deg); }
.battle-grid-mark i { position: absolute; inset: calc(var(--index, 0) * 16px); border: 1px solid var(--cyan); }
.battle-grid-mark i:nth-child(2) { --index: 1; }.battle-grid-mark i:nth-child(3) { --index: 2; }.battle-grid-mark i:nth-child(4) { --index: 3; }
.battle-versus-pick { position: relative; display: flex; min-height: 92px; align-items: center; gap: 16px; margin: 17px 0; padding: 12px; overflow: hidden; border: 1px solid rgba(53, 217, 255, 0.15); background: linear-gradient(105deg, rgba(53, 217, 255, 0.08), rgba(255, 63, 172, 0.04)); }
.battle-versus-pick::after { content: "TARGET LOCK"; position: absolute; right: 8px; bottom: 6px; color: rgba(53, 217, 255, 0.25); font-size: 6px; font-weight: 900; letter-spacing: 0.2em; }
.battle-pick-avatar { display: grid; width: 62px; height: 62px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(53, 217, 255, 0.5); border-radius: 50%; background: radial-gradient(circle, #20617a, #111225 65%); box-shadow: 0 0 30px rgba(53, 217, 255, 0.18); font-family: Impact, sans-serif; font-size: 25px; }
.battle-versus-pick > div { display: flex; min-width: 0; flex-direction: column; }
.battle-versus-pick small, .battle-field > span { color: #65838c; font-size: 6px; font-weight: 900; letter-spacing: 0.18em; }
.battle-versus-pick strong { margin-top: 4px; overflow: hidden; font-size: 14px; letter-spacing: 0.04em; text-overflow: ellipsis; white-space: nowrap; }
.battle-versus-pick em { margin-top: 4px; overflow: hidden; color: #7b8d94; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.battle-field { position: relative; z-index: 1; display: flex; margin-bottom: 14px; flex-direction: column; }
.battle-field select { height: 47px; margin-top: 6px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 2px; background: #0e1520; color: white; cursor: pointer; font-size: 10px; }
.battle-field select:disabled { cursor: not-allowed; opacity: 0.45; }
.battle-difficulty-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 6px; }
.battle-difficulty-options button { height: 39px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.025); color: #667880; cursor: pointer; font-size: 7px; font-weight: 900; letter-spacing: 0.08em; }
.battle-difficulty-options button.active { border-color: var(--cyan); background: rgba(53, 217, 255, 0.12); color: #caf7ff; box-shadow: inset 0 -2px var(--cyan); }
.battle-challenge { position: relative; z-index: 1; display: flex; min-height: 56px; align-items: center; margin-top: auto; padding: 0 17px; border: 1px solid rgba(53, 217, 255, 0.48); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); background: linear-gradient(115deg, #126b84, #3044a0); box-shadow: 0 13px 35px rgba(17, 118, 151, 0.25); cursor: pointer; justify-content: space-between; }
.battle-challenge span { font-size: 10px; font-weight: 900; letter-spacing: 0.16em; }.battle-challenge b { font-size: 11px; }
.battle-challenge:disabled { cursor: not-allowed; filter: grayscale(0.7); opacity: 0.35; }
.battle-briefing-status { min-height: 20px; margin-top: 9px; color: #64757d; font-size: 7px; line-height: 1.4; text-align: center; }
.battle-feed-panel { overflow-y: auto; scrollbar-width: thin; }
.battle-live-dot { color: var(--green) !important; }.battle-live-dot::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.battle-feed-panel h3 { margin: 16px 0 7px; color: #63747c; font-size: 7px; letter-spacing: 0.17em; }
.battle-invite-card, .battle-history-card { padding: 10px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 3px; background: rgba(255, 255, 255, 0.025); }
.battle-invite-card + .battle-invite-card, .battle-history-card + .battle-history-card { margin-top: 6px; }
.battle-invite-card strong, .battle-history-card strong { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.battle-invite-card small, .battle-history-card small { display: block; margin-top: 3px; color: #708088; font-size: 7px; line-height: 1.35; }
.battle-invite-actions { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 5px; margin-top: 9px; }
.battle-invite-actions button, .battle-history-card button { min-height: 28px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.035); cursor: pointer; font-size: 6px; font-weight: 900; letter-spacing: 0.1em; }
.battle-invite-actions .accept { border-color: rgba(53, 217, 255, 0.45); background: rgba(53, 217, 255, 0.12); color: #b8f5ff; }
.battle-history-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.battle-history-card > b { color: #9aa9af; font-family: Impact, sans-serif; font-size: 13px; font-style: italic; }.battle-history-card.win > b { color: var(--green); }.battle-history-card.loss > b { color: #ff7289; }.battle-history-card.tie > b { color: var(--gold); }
.battle-room { position: absolute; z-index: 20; inset: 88px 0 48px; display: grid; padding: 25px; place-items: center; background: rgba(3, 7, 12, 0.86); backdrop-filter: blur(16px); }
.battle-room[hidden] { display: none; }
.battle-room-shell { position: relative; width: min(880px, 90vw); padding: 22px; overflow: hidden; border: 1px solid rgba(53, 217, 255, 0.38); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); background: radial-gradient(circle at 50% 35%, rgba(53, 217, 255, 0.09), transparent 36%), linear-gradient(145deg, rgba(10, 24, 34, 0.98), rgba(10, 6, 17, 0.99)); box-shadow: 0 35px 90px rgba(0, 0, 0, 0.65), inset 0 1px rgba(255, 255, 255, 0.08); }
.battle-room-shell::before { content: ""; position: absolute; inset: 0; opacity: 0.12; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 49px, rgba(53, 217, 255, 0.2) 50px), repeating-linear-gradient(0deg, transparent 0 49px, rgba(53, 217, 255, 0.14) 50px); }
.battle-room-header, .battle-room-track, .battle-player-grid, .battle-preload, .battle-room-actions, .battle-final, .battle-room-countdown { position: relative; z-index: 1; }
.battle-room-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid rgba(53, 217, 255, 0.15); }
.battle-room-header span { display: flex; flex-direction: column; }.battle-room-header small { color: var(--cyan); font-size: 6px; font-weight: 900; letter-spacing: 0.22em; }.battle-room-header strong { margin-top: 3px; font-family: Impact, sans-serif; font-size: 21px; font-style: italic; letter-spacing: 0.05em; }.battle-room-header > b { color: #708b94; font-size: 7px; letter-spacing: 0.15em; }
.battle-room-track { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 14px 0; padding: 9px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); }
.battle-track-art { display: grid; width: 50px; height: 50px; place-items: center; clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); background: linear-gradient(145deg, var(--battle-art-a, #35d9ff), var(--battle-art-b, #38206c)); font-family: Impact, sans-serif; font-size: 16px; font-style: italic; }.battle-room-track div { display: flex; min-width: 0; flex-direction: column; }.battle-room-track small { color: #617880; font-size: 6px; font-weight: 900; letter-spacing: 0.16em; }.battle-room-track strong { margin-top: 3px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.battle-room-track em { margin-top: 2px; color: #74858c; font-size: 8px; font-style: normal; }.battle-room-track > b { padding: 5px 8px; border: 1px solid rgba(255, 63, 172, 0.28); color: #ff84c9; font-size: 7px; letter-spacing: 0.11em; }
.battle-player-grid { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; gap: 9px; }
.battle-player-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); min-height: 105px; align-content: center; align-items: center; gap: 12px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(130deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)); transition: 0.2s; }.battle-player-card.ready { border-color: rgba(56, 232, 116, 0.5); box-shadow: inset 0 -3px rgba(56, 232, 116, 0.7), 0 0 25px rgba(56, 232, 116, 0.06); }.battle-player-card.finished { border-color: rgba(53, 217, 255, 0.38); }
.battle-room-avatar { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(53, 217, 255, 0.38); border-radius: 50%; background: linear-gradient(145deg, #174f64, #25142e); font-family: Impact, sans-serif; font-size: 19px; }.battle-player-card > div { display: flex; min-width: 0; flex-direction: column; }.battle-player-card small { color: #677981; font-size: 6px; font-weight: 900; letter-spacing: 0.16em; }.battle-player-card strong { margin-top: 3px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.battle-player-card em { margin-top: 4px; color: #7c8b91; font-size: 7px; font-style: normal; letter-spacing: 0.08em; }.battle-player-card.ready em { color: var(--green); }.battle-player-card > b { grid-column: 1 / -1; color: #b8c8cd; font-family: Impact, sans-serif; font-size: 22px; font-style: italic; letter-spacing: 0.08em; text-align: right; }
.battle-room-versus { display: flex; align-items: center; flex-direction: column; }.battle-room-versus span { color: transparent; background: linear-gradient(var(--cyan), var(--pink)); -webkit-background-clip: text; background-clip: text; font-family: Impact, sans-serif; font-size: 25px; font-style: italic; }.battle-room-versus i { width: 1px; height: 42px; background: linear-gradient(var(--cyan), transparent); }
.battle-preload { display: flex; min-height: 31px; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(0, 0, 0, 0.14); color: #75868d; font-size: 7px; letter-spacing: 0.04em; }.battle-preload i { width: 7px; height: 7px; border: 1px solid var(--cyan); border-radius: 50%; animation: liveBlink 0.8s infinite; }.battle-preload.ready i { background: var(--green); border-color: var(--green); box-shadow: 0 0 8px var(--green); animation: none; }.battle-preload.error { color: #ff8397; }.battle-preload.error i { border-color: var(--red); animation: none; }
.battle-room-countdown, .battle-final { margin-top: 12px; padding: 9px; border: 1px solid rgba(53, 217, 255, 0.2); background: rgba(53, 217, 255, 0.06); text-align: center; }.battle-room-countdown[hidden], .battle-final[hidden] { display: none; }.battle-room-countdown small, .battle-final small { display: block; color: #71909a; font-size: 6px; font-weight: 900; letter-spacing: 0.2em; }.battle-room-countdown strong { display: block; margin-top: 2px; color: var(--cyan); font-family: Impact, sans-serif; font-size: 28px; font-style: italic; }.battle-final strong { display: block; margin-top: 2px; font-family: Impact, sans-serif; font-size: 28px; font-style: italic; }.battle-final span { display: block; color: #829198; font-size: 8px; }
.battle-room-actions { display: flex; min-height: 54px; align-items: stretch; gap: 8px; margin-top: 13px; }.battle-room-actions button { min-width: 145px; border: 1px solid rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.035); cursor: pointer; font-size: 7px; font-weight: 900; letter-spacing: 0.12em; }.battle-room-actions button:disabled { cursor: not-allowed; opacity: 0.4; }.battle-room-actions .battle-ready { display: flex; flex: 1; align-items: center; padding: 0 17px; border-color: rgba(53, 217, 255, 0.52); background: linear-gradient(110deg, #146a82, #303d92); justify-content: space-between; }.battle-ready span { font-size: 11px; }.battle-ready b { color: rgba(255, 255, 255, 0.62); font-size: 7px; }.battle-ready.locked { border-color: rgba(56, 232, 116, 0.45); background: rgba(56, 232, 116, 0.1); color: var(--green); }.battle-room-actions .battle-cancel { color: #b87380; }.battle-room-actions .battle-leave { flex: 1; border-color: rgba(53, 217, 255, 0.4); color: #bceef7; }.battle-room-actions button[hidden] { display: none; }
.battle-footer { background: rgba(4, 9, 15, 0.9); }
.battle-live-panel { position: absolute; z-index: 10; top: 118px; right: 2.5vw; width: 260px; padding: 11px; border: 1px solid rgba(53, 217, 255, 0.35); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); background: rgba(5, 15, 23, 0.9); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45); backdrop-filter: blur(12px); }.battle-live-panel[hidden] { display: none; }.battle-live-head { display: flex; align-items: center; gap: 6px; color: #91bbc5; font-size: 6px; font-weight: 900; letter-spacing: 0.14em; }.battle-live-head i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }.battle-live-head b { margin-left: auto; color: var(--pink); }.battle-live-score { display: grid; grid-template-columns: 1fr 25px 1fr; align-items: center; gap: 4px; margin: 9px 0 7px; }.battle-live-score > span { display: flex; min-width: 0; flex-direction: column; }.battle-live-score > span:last-child { text-align: right; }.battle-live-score small { overflow: hidden; color: #788b92; font-size: 6px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }.battle-live-score strong { margin-top: 2px; font-family: Impact, sans-serif; font-size: 17px; font-style: italic; letter-spacing: 0.05em; }.battle-live-score em { color: #56717a; font-family: Impact, sans-serif; font-size: 10px; font-style: italic; text-align: center; }.battle-live-track { position: relative; height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }.battle-live-track i, .battle-live-track b { position: absolute; top: 0; bottom: 0; width: 0; transition: width 0.25s; }.battle-live-track i { left: 0; background: var(--cyan); }.battle-live-track b { right: 0; background: var(--pink); }.battle-live-panel button { width: 100%; margin-top: 9px; padding: 6px; border: 1px solid rgba(255, 70, 95, 0.25); background: rgba(255, 70, 95, 0.055); color: #ad6f7a; cursor: pointer; font-size: 6px; font-weight: 900; letter-spacing: 0.12em; }

/* Stage */

.screen-stage { background: #030106; }
.stage-bg { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 2, 12, 0.7), rgba(5, 1, 10, 0.05) 50%, rgba(5, 1, 10, 0.45)), url("assets/neon-arena.png") center / cover no-repeat; filter: saturate(1.1) brightness(0.72); transform: scale(1.03); transition: filter 0.15s; }
.screen-stage.beat .stage-bg { filter: saturate(1.35) brightness(0.92); }
.screen-stage.encore-active .stage-bg { filter: saturate(1.6) brightness(1.05) hue-rotate(16deg); }
.screen-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 54%, transparent 18%, rgba(3, 1, 8, 0.58) 92%), linear-gradient(90deg, rgba(3, 1, 8, 0.3), transparent 25%, transparent 75%, rgba(3, 1, 8, 0.3)); }
#game-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.stage-hud { position: absolute; z-index: 8; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 1fr 320px 1fr; align-items: start; padding: 23px 3vw; pointer-events: none; text-shadow: 0 2px 10px #000; }
.live-tag { display: flex; width: max-content; align-items: center; gap: 6px; margin-bottom: 7px; color: #ff86c9; font-size: 7px; font-weight: 900; letter-spacing: 0.19em; }
.live-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: liveBlink 1s infinite; }
@keyframes liveBlink { 50% { opacity: 0.25; } }
.hud-left h2 { max-width: 320px; margin: 0; overflow: hidden; font-family: Impact, sans-serif; font-size: 22px; font-style: italic; letter-spacing: 0.035em; text-overflow: ellipsis; white-space: nowrap; }
.hud-left p { margin: 3px 0 0; color: #c0b7c9; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; }
.hud-center { padding-top: 1px; }
.encore-label { display: flex; justify-content: space-between; color: #d8d0e0; font-size: 7px; font-weight: 900; letter-spacing: 0.16em; }
.encore-meter { position: relative; height: 9px; margin-top: 5px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; background: rgba(5, 2, 10, 0.68); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6); }
.encore-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #45bfff, #d24dff, #fff); box-shadow: 0 0 15px #66ceff; transition: width 0.15s; }
.encore-meter i { position: absolute; top: -2px; left: 50%; width: 1px; height: 12px; background: rgba(255, 255, 255, 0.5); }
.hud-center > small { display: block; margin-top: 5px; color: #80778b; font-size: 6px; font-weight: 900; letter-spacing: 0.14em; text-align: center; }
.screen-stage.encore-ready .hud-center > small { color: #9ce7ff; animation: readyPulse 0.8s infinite alternate; }
@keyframes readyPulse { to { text-shadow: 0 0 12px #63d5ff; } }
.hud-score { justify-self: end; text-align: right; }
.hud-score > small { display: block; color: #8f8599; font-size: 7px; font-weight: 900; letter-spacing: 0.18em; }
.hud-score > strong { display: block; min-width: 150px; font-family: Impact, "Arial Narrow Bold", sans-serif; font-size: 29px; font-style: italic; letter-spacing: 0.07em; }
.stars-mini { display: flex; gap: 3px; margin-top: 2px; justify-content: flex-end; }
.stars-mini i { width: 11px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.15); transform: skew(-20deg); }
.stars-mini i.earned { background: var(--gold); box-shadow: 0 0 8px rgba(255, 208, 89, 0.65); }
.streak-panel { position: absolute; z-index: 8; bottom: 113px; left: 3vw; display: flex; width: 120px; align-items: flex-start; pointer-events: none; flex-direction: column; text-shadow: 0 2px 12px #000; }
.streak-panel strong { font-family: Impact, sans-serif; font-size: 42px; font-style: italic; line-height: 0.85; }
.streak-panel span { margin-top: 5px; color: #9a90a4; font-size: 7px; font-weight: 900; letter-spacing: 0.17em; }
.multiplier-badge { position: absolute; z-index: 8; bottom: 50px; left: calc(50% + min(34vw, 340px)); display: grid; width: 64px; height: 64px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; background: radial-gradient(circle, rgba(182, 47, 216, 0.94), rgba(43, 11, 81, 0.94) 70%); box-shadow: 0 0 15px rgba(235, 66, 255, 0.6), inset 0 0 12px rgba(255, 255, 255, 0.2); place-items: center; pointer-events: none; transform: rotate(-5deg); }
.multiplier-badge span { font-family: Impact, sans-serif; font-size: 29px; font-style: italic; }
.multiplier-badge small { position: absolute; right: 11px; bottom: 10px; font-size: 11px; }
.multiplier-badge.bump { animation: badgeBump 0.35s var(--ease-out); }
@keyframes badgeBump { 40% { transform: rotate(-5deg) scale(1.3); filter: brightness(1.5); } }
.crowd-meter { position: absolute; z-index: 8; right: 3vw; bottom: 128px; width: 145px; pointer-events: none; }
.crowd-label { display: block; margin-bottom: 5px; color: #a49aaa; font-size: 7px; font-weight: 900; letter-spacing: 0.16em; }
.crowd-track { position: relative; height: 7px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 4px; background: linear-gradient(90deg, rgba(255, 56, 92, 0.35), rgba(255, 214, 56, 0.25), rgba(56, 232, 116, 0.28)); }
.crowd-track i { display: block; width: 65%; height: 100%; background: linear-gradient(90deg, var(--red), var(--yellow), var(--green)); transition: width 0.2s; }
.crowd-track b { position: absolute; top: -2px; left: 28%; width: 1px; height: 10px; background: white; opacity: 0.6; }
.crowd-faces { display: flex; margin-top: 5px; color: #827988; font-size: 8px; justify-content: space-between; }
.judgement { position: absolute; z-index: 9; top: 59%; left: 50%; opacity: 0; font-family: Impact, sans-serif; font-size: 23px; font-style: italic; letter-spacing: 0.08em; pointer-events: none; text-shadow: 0 2px 0 #532063, 0 0 22px currentColor; transform: translate(-50%, -50%) scale(0.7) rotate(-4deg); }
.judgement.show { animation: judgement 0.52s var(--ease-out) both; }
.judgement.miss { color: #ff6078; }
@keyframes judgement { 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%, -90%) scale(0.95) rotate(-4deg); } }
.countdown { position: absolute; z-index: 15; inset: 0; display: grid; place-items: center; pointer-events: none; background: rgba(4, 1, 8, 0.28); backdrop-filter: blur(2px); }
.countdown.hidden { display: none; }
.countdown span { font-family: Impact, sans-serif; font-size: 170px; font-style: italic; text-shadow: 0 8px 0 #49125f, 0 0 60px var(--pink); transform: skew(-4deg); animation: countPop 0.8s var(--ease-out); }
@keyframes countPop { from { opacity: 0; transform: skew(-4deg) scale(1.8); } 30% { opacity: 1; } to { opacity: 0.85; transform: skew(-4deg) scale(0.92); } }
.pause-button { position: absolute; z-index: 10; right: 3vw; bottom: 68px; font-size: 12px; }
.control-ribbon { position: absolute; z-index: 8; bottom: 17px; left: 50%; display: flex; align-items: center; gap: 7px; pointer-events: none; transform: translateX(-50%); }
.lane-key { display: grid; width: 27px; height: 24px; place-items: center; border: 1px solid color-mix(in srgb, currentColor 65%, white); border-radius: 4px; background: color-mix(in srgb, currentColor 22%, #09050e); box-shadow: inset 0 -3px rgba(0, 0, 0, 0.25), 0 0 9px color-mix(in srgb, currentColor 30%, transparent); font-size: 9px; font-weight: 900; }
.lane-green { color: var(--green); }
.lane-red { color: var(--red); }
.lane-yellow { color: var(--yellow); }
.lane-blue { color: var(--blue); }
.lane-orange { color: var(--orange); }
.control-ribbon small { margin-left: 6px; color: #84798d; font-size: 6px; font-weight: 900; letter-spacing: 0.13em; }

/* Results */

.screen-results { background: linear-gradient(0deg, rgba(7, 2, 13, 0.92), rgba(9, 2, 17, 0.28)), url("assets/neon-arena.png") center / cover no-repeat; }
.results-rays { position: absolute; top: -60%; left: 50%; width: 900px; height: 1100px; opacity: 0.25; background: repeating-conic-gradient(from 0deg, transparent 0deg 8deg, rgba(255, 78, 192, 0.8) 9deg 11deg, transparent 12deg 24deg); mask-image: radial-gradient(circle, black, transparent 63%); animation: raySpin 60s linear infinite; transform: translateX(-50%); }
@keyframes raySpin { to { transform: translateX(-50%) rotate(360deg); } }
.results-header { position: relative; z-index: 2; padding-top: 6vh; text-align: center; text-shadow: 0 3px 20px #000; }
.results-header .eyebrow { color: #ff86c9; }
.results-header h2 { margin: 7px 0 0; font-family: Impact, sans-serif; font-size: clamp(34px, 4vw, 54px); font-style: italic; letter-spacing: 0.035em; }
.results-header p { margin: 3px 0 0; color: #c6b9cb; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
.results-card { position: relative; z-index: 2; width: min(700px, 76vw); margin: 3vh auto 0; padding: 24px 34px 28px; border-radius: 8px; text-align: center; }
.result-grade { position: absolute; top: -27px; left: -30px; display: grid; width: 100px; height: 100px; place-items: center; border: 2px solid rgba(255, 255, 255, 0.68); border-radius: 50%; background: radial-gradient(circle at 36% 28%, #ff8ed2, #c032c9 46%, #3b116f 72%); box-shadow: 0 0 35px rgba(255, 60, 190, 0.55), inset 0 0 22px rgba(255, 255, 255, 0.2); font-family: Impact, sans-serif; font-size: 58px; font-style: italic; transform: rotate(-9deg); }
.result-stars { display: flex; gap: 11px; margin: 0 auto 12px; justify-content: center; }
.result-stars i { color: rgba(255, 255, 255, 0.15); font-size: 36px; font-style: normal; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); transform: scale(0.9); }
.result-stars i.earned { color: var(--gold); text-shadow: 0 0 17px rgba(255, 206, 77, 0.75), 0 2px 0 #9b6e0c; animation: starEarn 0.5s var(--ease-out) both; }
.result-stars i:nth-child(2) { animation-delay: 0.08s; }
.result-stars i:nth-child(3) { animation-delay: 0.16s; }
.result-stars i:nth-child(4) { animation-delay: 0.24s; }
.result-stars i:nth-child(5) { animation-delay: 0.32s; }
@keyframes starEarn { from { opacity: 0; transform: scale(2.2) rotate(20deg); } to { opacity: 1; transform: scale(1); } }
.final-score { display: flex; align-items: center; flex-direction: column; }
.final-score small { color: #8f849a; font-size: 8px; font-weight: 900; letter-spacing: 0.18em; }
.final-score strong { margin-top: 2px; font-family: Impact, sans-serif; font-size: 52px; font-style: italic; letter-spacing: 0.08em; line-height: 1; }
.final-score span { margin-top: 4px; padding: 4px 9px; border-radius: 10px; background: rgba(56, 232, 116, 0.12); color: #75e59b; font-size: 7px; font-weight: 900; letter-spacing: 0.14em; }
.final-score span.hidden { visibility: hidden; }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 22px 0; border: 1px solid var(--line); border-radius: 4px; }
.result-grid div { display: flex; padding: 12px 8px; border-right: 1px solid var(--line); flex-direction: column; }
.result-grid div:last-child { border-right: 0; }
.result-grid small { color: #776d80; font-size: 7px; font-weight: 900; letter-spacing: 0.11em; }
.result-grid strong { margin-top: 4px; font-size: 16px; }
.results-actions { display: flex; gap: 10px; justify-content: center; }
.results-actions button { min-height: 48px; text-align: center; }

/* Modals */

.modal-layer,
.loading-layer {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: none;
  align-items: center;
  padding: 24px;
  background: rgba(4, 1, 8, 0.76);
  backdrop-filter: blur(15px);
  justify-content: center;
}

.modal-layer.open,
.loading-layer.open { display: flex; animation: modalFade 0.25s ease-out both; }
@keyframes modalFade { from { opacity: 0; } }
.modal-card { position: relative; width: min(440px, 90vw); padding: 30px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; background: linear-gradient(145deg, rgba(27, 15, 43, 0.98), rgba(7, 4, 13, 0.99)); box-shadow: 0 30px 100px #000, inset 0 1px rgba(255, 255, 255, 0.1); animation: modalUp 0.4s var(--ease-out) both; }
@keyframes modalUp { from { opacity: 0; transform: translateY(25px) scale(0.96); } }
.modal-card h2 { margin: 6px 0 22px; font-family: Impact, sans-serif; font-size: 35px; font-style: italic; letter-spacing: 0.02em; }
.modal-close { position: absolute; top: 17px; right: 17px; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.05); cursor: pointer; color: #a99eaf; font-size: 20px; }
.pause-card { text-align: center; }
.pause-card .eyebrow { color: var(--pink); }
.pause-card .primary-action { width: 100%; margin-bottom: 9px; text-align: center; }
.modal-row { display: flex; width: 100%; align-items: center; padding: 13px 3px; border: 0; border-bottom: 1px solid var(--line); background: none; color: #bdb3c4; cursor: pointer; font-size: 11px; justify-content: space-between; }
.modal-row:hover { color: white; }
.modal-row.danger:hover { color: #ff7289; }
.pause-card > small { display: block; margin-top: 23px; color: #776d80; font-size: 9px; }

.settings-card { width: min(760px, 94vw); max-height: min(90vh, 820px); overflow-x: hidden; overflow-y: auto; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; scrollbar-width: thin; }
.settings-card .eyebrow { color: var(--cyan); }
.setting-row { display: flex; min-height: 62px; align-items: center; gap: 20px; border-top: 1px solid var(--line); justify-content: space-between; }
.setting-row > span { display: flex; flex-direction: column; }
.setting-row b { font-size: 11px; }
.setting-row small { margin-top: 3px; color: #7d7386; font-size: 8px; }
.setting-row select { min-width: 140px; padding: 8px 27px 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: #171020; color: white; font-size: 10px; }
.range-control { display: flex; align-items: center; gap: 10px; }
.range-control input { width: 140px; accent-color: var(--pink); }
.range-control output { min-width: 43px; color: #bfb4c7; font-size: 9px; text-align: right; }
.switch-row input { position: relative; width: 42px; height: 22px; appearance: none; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; background: rgba(255, 255, 255, 0.08); cursor: pointer; transition: 0.2s; }
.switch-row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #8d8495; transition: 0.2s; }
.switch-row input:checked { background: rgba(255, 63, 172, 0.25); border-color: var(--pink); }
.switch-row input:checked::after { left: 23px; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.controls-map { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 7px; margin-top: 17px; }
.controls-map > div { display: flex; min-height: 63px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255, 255, 255, 0.025); flex-wrap: wrap; gap: 3px; justify-content: center; }
.controls-map span { display: grid; min-width: 22px; height: 20px; padding: 0 6px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; background: rgba(255, 255, 255, 0.07); font-size: 7px; font-weight: 900; }
.controls-map small { width: 100%; color: #756b7f; font-size: 6px; font-weight: 900; letter-spacing: 0.08em; text-align: center; }
.lineup-settings { margin-top: 22px; padding-top: 19px; border-top: 1px solid rgba(255, 255, 255, 0.11); }
.settings-section-heading { display: flex; align-items: center; justify-content: space-between; }
.settings-section-heading > span { display: flex; min-width: 0; flex-direction: column; }
.settings-section-heading small { color: #756b7e; font-size: 7px; font-weight: 900; letter-spacing: 0.16em; }
.settings-section-heading strong { max-width: 520px; margin-top: 4px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.role-badge { padding: 5px 8px; border: 1px solid rgba(53, 217, 255, 0.25); border-radius: 12px; background: rgba(53, 217, 255, 0.08); color: var(--cyan); font-size: 7px; letter-spacing: 0.12em; }
.role-badge.owner { border-color: rgba(255, 63, 172, 0.28); background: rgba(255, 63, 172, 0.09); color: #ff82c7; }
.lineup-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 146px; margin-top: 12px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 4px; background: rgba(255, 255, 255, 0.018); }
.lineup-member { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 49px; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.055); }
.lineup-member:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.055); }
.lineup-member > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: linear-gradient(145deg, rgba(255, 63, 172, 0.45), rgba(88, 44, 166, 0.45)); font-size: 9px; font-weight: 900; }
.lineup-member > div { display: flex; min-width: 0; flex-direction: column; }
.lineup-member strong,
.lineup-member small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-member strong { font-size: 9px; }
.lineup-member small { margin-top: 2px; color: #756c7e; font-size: 7px; }
.lineup-member > b { color: #776e81; font-size: 6px; letter-spacing: 0.11em; }
.lineup-member.current-player { background: rgba(255, 63, 172, 0.045); }
.lineup-member.current-player > b { color: var(--pink); }
.lineup-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 11px; }
.lineup-form label { display: flex; min-width: 0; flex-direction: column; color: #887e91; font-size: 7px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.lineup-form input { width: 100%; height: 39px; margin-top: 5px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 3px; outline: 0; background: rgba(255, 255, 255, 0.04); color: white; font-size: 10px; }
.lineup-form input:focus { border-color: rgba(255, 63, 172, 0.52); box-shadow: 0 0 0 2px rgba(255, 63, 172, 0.08); }
.lineup-form input:disabled { opacity: 0.42; }
.lineup-form > button { min-width: 105px; height: 39px; padding: 0 12px; border: 1px solid rgba(255, 63, 172, 0.32); border-radius: 3px; background: rgba(255, 63, 172, 0.1); color: #ff8acc; cursor: pointer; font-size: 7px; font-weight: 900; letter-spacing: 0.1em; }
.lineup-form > button:hover { border-color: var(--pink); background: rgba(255, 63, 172, 0.17); color: white; }
.lineup-form > button:disabled { cursor: not-allowed; opacity: 0.35; }
.invite-help { margin: 7px 0 0; color: #716778; font-size: 7px; }
.pending-heading { display: flex; align-items: center; margin-top: 18px; color: #898090; font-size: 7px; font-weight: 900; letter-spacing: 0.13em; justify-content: space-between; }
.pending-heading b { display: grid; min-width: 18px; height: 18px; padding: 0 5px; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, 0.07); color: #c9bdcf; font-size: 7px; }
.pending-invitations { margin-top: 7px; }
.invitation-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; min-height: 55px; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 4px; background: rgba(255, 255, 255, 0.025); }
.invitation-card + .invitation-card { margin-top: 5px; }
.invitation-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--pink), var(--violet)); box-shadow: 0 0 16px rgba(255, 63, 172, 0.22); font-size: 11px; }
.invitation-card > div { display: flex; min-width: 0; flex-direction: column; }
.invitation-card strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.invitation-card small { margin-top: 3px; overflow: hidden; color: #756b7e; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.invitation-actions { display: flex; gap: 5px; }
.invitation-actions button { padding: 7px 8px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 3px; background: rgba(255, 255, 255, 0.035); color: #8e8497; cursor: pointer; font-size: 6px; font-weight: 900; letter-spacing: 0.07em; }
.invitation-actions button.accept { border-color: rgba(56, 232, 116, 0.22); background: rgba(56, 232, 116, 0.07); color: #80dfa0; }
.invitation-actions button:hover { color: white; }
.invitation-actions button:disabled { cursor: wait; opacity: 0.4; }
.settings-empty { display: grid; min-height: 48px; grid-column: 1 / -1; place-items: center; color: #716779; font-size: 8px; text-align: center; }
.invitations-status { display: block; min-height: 9px; margin-top: 6px; color: #6e6476; font-size: 7px; }
.logout-button { width: 100%; margin-top: 15px; padding: 11px; border: 1px solid rgba(255, 75, 108, 0.22); border-radius: 4px; background: rgba(255, 56, 92, 0.055); color: #c995a0; cursor: pointer; font-size: 8px; font-weight: 900; letter-spacing: 0.13em; }
.logout-button:hover { border-color: rgba(255, 75, 108, 0.48); background: rgba(255, 56, 92, 0.1); color: #ff91a4; }

.import-card { width: min(480px, 92vw); text-align: center; }
.import-icon { display: grid; width: 70px; height: 70px; margin: -65px auto 18px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: linear-gradient(145deg, var(--pink), var(--violet)); box-shadow: 0 0 40px rgba(255, 48, 173, 0.52); font-size: 30px; }
.import-card .eyebrow { color: #ff87cb; }
.import-card h2 { margin-bottom: 9px; }
.import-card > p { margin: 0 auto 20px; color: #93889d; font-size: 11px; line-height: 1.55; }
.import-fields { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.import-fields label { margin-bottom: 7px; }
.file-picker { display: flex; width: 100%; height: 48px; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 4px; background: rgba(255, 255, 255, 0.055); color: #aea3b8; cursor: pointer; text-align: left; }
.file-picker:hover { border-color: rgba(255, 63, 172, 0.5); background: rgba(255, 63, 172, 0.07); color: white; }
.file-picker span { color: var(--pink); font-size: 17px; }
.file-picker b { overflow: hidden; font-size: 8px; letter-spacing: 0.1em; text-overflow: ellipsis; white-space: nowrap; }
.drop-zone { display: flex; min-height: 68px; margin-top: 9px; align-items: center; border: 1px dashed rgba(255, 255, 255, 0.19); border-radius: 5px; background: rgba(255, 255, 255, 0.025); color: #897f92; flex-direction: column; justify-content: center; transition: 0.2s; }
.drop-zone.dragging { border-color: var(--pink); background: rgba(255, 63, 172, 0.08); color: white; transform: scale(1.02); }
.drop-zone b { font-size: 10px; }
.drop-zone small { margin-top: 4px; color: #655d6d; font-size: 8px; }
.import-confirm { width: 100%; min-height: 48px; margin-top: 11px; text-align: center; }
.import-confirm:disabled { cursor: not-allowed; opacity: 0.38; }

.screen-results.failed .results-header .eyebrow,
.screen-results.failed .result-grade { color: #ff8a9d; }
.screen-results.failed .result-grade { background: radial-gradient(circle at 36% 28%, #ff8298, #9b203d 48%, #310914 74%); box-shadow: 0 0 35px rgba(255, 56, 92, 0.5), inset 0 0 22px rgba(255, 255, 255, 0.15); }

.loading-layer { z-index: 95; flex-direction: column; }
.loading-logo { display: grid; width: 78px; height: 78px; place-items: center; border: 2px solid rgba(255, 255, 255, 0.65); border-radius: 50%; background: linear-gradient(145deg, var(--pink), var(--violet)); box-shadow: 0 0 45px rgba(255, 53, 180, 0.5); font-family: Impact, sans-serif; font-size: 28px; font-style: italic; animation: loadingPulse 1s ease-in-out infinite alternate; }
@keyframes loadingPulse { to { transform: scale(1.08); filter: hue-rotate(24deg) brightness(1.2); } }
.loading-bar { width: 260px; height: 3px; margin: 24px 0 15px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.loading-bar span { display: block; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, var(--pink), var(--cyan), transparent); animation: loadingSlide 1.1s ease-in-out infinite; }
@keyframes loadingSlide { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
.loading-layer strong { font-size: 10px; letter-spacing: 0.2em; }
.loading-layer small { margin-top: 7px; color: #746b7e; font-size: 8px; }

.toast-stack { position: fixed; z-index: 120; right: 22px; bottom: 22px; display: flex; gap: 8px; flex-direction: column; }
.toast { min-width: 250px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px; background: rgba(17, 10, 27, 0.95); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); color: #d8cfdf; font-size: 10px; animation: toastIn 0.35s var(--ease-out) both; backdrop-filter: blur(16px); }
.toast b { color: white; }
.toast.success { border-left: 3px solid var(--green); }
.toast.error { border-left: 3px solid var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } }

@media (max-width: 1100px) {
  .app-shell { min-width: 0; min-height: 0; }
  .lineup-switcher { min-width: 180px; }
  .library-lineup-switcher { min-width: 170px; }
  .lineup-switcher-copy small { display: none; }
  .lineup-switcher { height: 40px; padding-top: 5px; padding-bottom: 5px; }
  .profile-chip { padding-right: 15px; }
  .home-layout { gap: 3vw; padding-right: 4vw; padding-left: 4vw; }
  .tour-card { min-height: 430px; }
  .library-layout { grid-template-columns: minmax(440px, 1fr) 340px; gap: 20px; }
  .song-row { grid-template-columns: 58px minmax(140px, 1fr) 70px 65px 25px; gap: 10px; }
  .song-venue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .screen-battle { overflow-x: hidden; overflow-y: auto; }
  .battle-layout { grid-template-columns: minmax(220px, 0.75fr) minmax(340px, 1.25fr); height: auto; min-height: calc(100% - 136px); padding-bottom: 78px; }
  .battle-feed-panel { grid-column: 1 / -1; min-height: 260px; }
  .battle-panel { overflow: visible; }
  .battle-member-roster { max-height: 420px; }
  .battle-room { position: fixed; inset: 0; align-items: start; padding: 24px; overflow-x: hidden; overflow-y: auto; }
  .battle-room-shell { margin: auto; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .battle-topbar { display: grid; grid-template-columns: minmax(82px, 1fr) auto minmax(150px, 190px) auto; gap: 12px; }
  .battle-topbar .back-button { width: auto; min-width: 0; }
  .battle-heading { position: static; min-width: 0; white-space: nowrap; transform: none; }
  .battle-lineup-switcher { width: 100%; min-width: 0; margin-left: 0; }
  .battle-refresh { margin-left: 0; }
}

@media (max-width: 700px) {
  .battle-topbar { position: sticky; top: 0; height: 72px; padding: 0 12px; }
  .battle-topbar .back-button { width: 50px; flex: 0 0 50px; gap: 2px; font-size: 7px; letter-spacing: 0.05em; }
  .battle-heading { display: none; }
  .battle-lineup-switcher { min-width: 0; flex: 1; margin-left: 4px; padding-right: 8px; padding-left: 8px; }
  .battle-lineup-switcher .lineup-switcher-mark { display: none; }
  .battle-refresh { width: 40px; flex: 0 0 40px; margin-left: 6px; padding: 0; justify-content: center; font-size: 0; }
  .battle-refresh span { font-size: 16px; }
  .battle-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-height: 0; padding: 12px 10px 72px; }
  .battle-panel, .battle-feed-panel { grid-column: 1; min-height: 0; padding: 14px; }
  .battle-member-roster { height: auto; max-height: 280px; }
  .battle-briefing-panel { min-height: 490px; }
  .battle-versus-pick { min-height: 78px; margin: 12px 0; }
  .battle-pick-avatar { width: 50px; height: 50px; font-size: 20px; }
  .battle-difficulty-options { grid-template-columns: repeat(2, 1fr); }
  .battle-footer { position: fixed; }
  .battle-footer .footer-spacer, .battle-footer span:last-child { display: none; }
  .battle-room { padding: 10px; }
  .battle-room-shell { width: 100%; padding: 14px; overflow: visible; clip-path: none; }
  .battle-room-header { align-items: flex-start; gap: 8px; }
  .battle-room-header strong { font-size: 17px; }
  .battle-room-header > b { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .battle-room-track { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
  .battle-track-art { width: 42px; height: 42px; }
  .battle-player-grid { grid-template-columns: minmax(0, 1fr); }
  .battle-room-versus { flex-direction: row; justify-content: center; }
  .battle-room-versus i { width: 42px; height: 1px; }
  .battle-player-card { min-height: 88px; }
  .battle-room-actions { min-height: 0; flex-wrap: wrap; }
  .battle-room-actions button { width: 100%; min-width: 0; min-height: 48px; }
  .battle-room-actions .battle-ready { flex-basis: 100%; }
}

@media (max-height: 740px) {
  .home-copy h2 { font-size: 68px; }
  .tour-card { min-height: 390px; }
  .venue-orbit { height: 190px; }
  .library-layout { padding-top: 14px; padding-bottom: 14px; }
  .detail-art { min-height: 116px; }
  .detail-meta { padding-top: 12px; padding-bottom: 8px; }
  .detail-meta h3 { font-size: 24px; }
  .song-facts { margin-bottom: 9px; }
  .leaderboard-list { max-height: 74px; }
  .leaderboard-row:nth-child(n + 3) { display: none; }
  .song-row { min-height: 60px; }
  .song-cover { width: 46px; height: 46px; }
  .song-row { grid-template-columns: 50px minmax(140px, 1fr) 75px 68px 25px; }
  .results-header { padding-top: 4vh; }
  .results-card { margin-top: 2vh; padding-top: 18px; padding-bottom: 20px; }
  .result-stars i { font-size: 29px; }
  .final-score strong { font-size: 43px; }
  .auth-card { min-height: 455px; }
  .auth-tabs { margin-bottom: 20px; }
  .auth-form h2 { margin-bottom: 14px; font-size: 30px; }
  .auth-form input { height: 39px; }
  .auth-form label { margin-bottom: 9px; }
  .auth-submit { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}