:root {
  --lobby-main-width: 918px;
  --bg: #06040f;
  --panel: rgba(15, 12, 28, 0.86);
  --panel-strong: rgba(22, 18, 38, 0.96);
  --line: rgba(255, 255, 255, 0.1);
  --muted: #c7c0dc;
  --text: #f8f6ff;
  --accent: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --accent-dark: #5b21b6;
  --accent-2: var(--accent);
  --danger: #ff1f2d;
  --success: var(--accent);
  --surface-rgb: 15, 12, 28;
  --surface-strong-rgb: 22, 18, 38;
  --on-accent: #ffffff;
  --theme-line: rgba(var(--accent-rgb), 0.16);
  --theme-line-strong: rgba(var(--accent-rgb), 0.42);
  --theme-text-soft: color-mix(in srgb, var(--text) 70%, transparent);
  --theme-text-faint: color-mix(in srgb, var(--text) 54%, transparent);
  --theme-panel-bg: linear-gradient(145deg, color-mix(in srgb, var(--text) 8.8%, transparent), color-mix(in srgb, var(--text) 2.6%, transparent));
  --theme-surface: rgba(var(--surface-rgb), 0.74);
  --theme-surface-strong: rgba(var(--surface-strong-rgb), 0.98);
  --theme-control-bg: linear-gradient(180deg, color-mix(in srgb, var(--text) 7.8%, transparent), color-mix(in srgb, var(--text) 2.2%, transparent)), var(--theme-surface);
  --theme-active-bg: rgba(var(--accent-rgb), 0.2);
  --theme-active-bg-strong: rgba(var(--accent-rgb), 0.34);
  --theme-glow-soft: rgba(var(--accent-rgb), 0.14);
  --theme-glow: rgba(var(--accent-rgb), 0.24);
  --theme-glow-strong: rgba(var(--accent-rgb), 0.38);
}

body[data-role="civilian"] {
  --bg: #031121;
  --panel: rgba(7, 20, 38, 0.86);
  --panel-strong: rgba(9, 30, 58, 0.96);
  --muted: #b9d4f8;
  --text: #f4f9ff;
  --accent: #2f80ff;
  --accent-rgb: 47, 128, 255;
  --accent-dark: #0052cc;
  --accent-2: #e6f2ff;
}

body[data-role="spy"] {
  --bg: #050505;
  --panel: rgba(14, 14, 14, 0.86);
  --panel-strong: rgba(24, 24, 24, 0.96);
  --muted: #b8b8b8;
  --text: #f7f7fb;
  --accent: #e50914;
  --accent-rgb: 229, 9, 20;
  --accent-dark: #a8000b;
  --accent-2: #fff;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(var(--accent-rgb), 0.22), transparent 28rem),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 24rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: background 0.85s ease, color 0.85s ease;
}

body[data-screen="menu"],
body[data-screen="lobby"],
body.site-menu-modal-open {
  overflow: hidden;
}

body[data-screen="menu"] .app-shell,
body[data-screen="lobby"] .app-shell {
  overflow: hidden;
  padding: clamp(6px, 1.2vh, 14px) 0;
}

body[data-screen="menu"] .app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle, black, transparent 82%);
}

.orb {
  transition: background 0.85s ease, opacity 0.85s ease;
  position: fixed;
  width: 16rem;
  height: 16rem;
  border-radius: 999px;
  filter: blur(24px);
  opacity: 0.42;
  animation: float 8s ease-in-out infinite;
}

.orb-one {
  top: 8%;
  left: 7%;
  background: var(--accent);
}

.orb-two {
  right: 9%;
  bottom: 10%;
  background: var(--accent-2);
  animation-delay: -3s;
}

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -22px, 0) scale(1.08); }
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 32px));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vh, 24px) 0;
}

.card {
  transition: background 0.85s ease, border-color 0.85s ease, box-shadow 0.85s ease;
  width: min(100%, 520px);
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)), var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(22px);
}

.lobby-card {
  width: min(100%, var(--lobby-main-width));
  padding: clamp(9px, 1.05vw, 14px);
  border-radius: 22px;
  font-size: 0.78rem;
}

.screen {
  animation: pop 0.42s ease both;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hidden {
  display: none !important;
}

.hero-card {
  text-align: center;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent-2);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.06em;
}

h1 {
  display: inline-block;
  padding-right: 0.08em;
  padding-bottom: 0.2em;
  font-size: clamp(3.26rem, 11.18vw, 6.52rem);
  line-height: 1.16;
  background: linear-gradient(100deg, var(--text), var(--accent) 48%, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(var(--accent-rgb), 0.22);
}

h2 {
  font-size: clamp(2rem, 6vw, 3.5rem);
}

#resultTitle {
  line-height: 1.02;
}

#resultText.lead.small {
  margin: 6px 0 16px;
  line-height: 1.38;
}

.lead {
  margin: 28px auto 24px;
  max-width: 42rem;
  color: var(--muted);
  line-height: 1.65;
}

.lead.small {
  margin-top: 12px;
  font-size: 0.95rem;
}

.form-grid {
  display: grid;
  gap: 14px;
  text-align: left;
}

label span {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  outline: none;
  background: rgba(0, 0, 0, 0.32);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

input:focus {
  border-color: rgba(var(--accent-rgb), 0.85);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
}

input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.track-form.skip-active #url,
.track-form.skip-active #sendBtn {
  display: none;
}

.actions,
.track-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.two-col {
  grid-template-columns: 1fr 1fr;
}

button {
  min-height: 50px;
  padding: 13px 18px;
  border-radius: 16px;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease, background 0.85s ease, box-shadow 0.85s ease, border-color 0.85s ease;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark) 52%, var(--accent-2));
  box-shadow: 0 16px 36px rgba(var(--accent-rgb), 0.32);
}

.secondary,
.code-pill {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
}

.danger {
  border: 1px solid rgba(255, 31, 45, 0.45);
  background: rgba(255, 31, 45, 0.16);
}

.rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
}

.rules div,
.player-row,
.order-row,
.vote-row,
.turn-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
}

.rules div {
  padding: 14px;
}

.rules strong {
  display: block;
  font-size: 1.3rem;
}

body[data-screen="playRooms"] {
  background:
    radial-gradient(circle at 14% 16%, rgba(var(--accent-rgb), 0.3), transparent 30rem),
    radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 26rem),
    radial-gradient(circle at 50% 90%, rgba(var(--accent-rgb), 0.1), transparent 28rem),
    var(--bg);
}

body[data-screen="playRooms"] .app-shell {
  width: min(1080px, calc(100% - 32px));
}

.play-rooms-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 1020px);
  min-height: min(620px, calc(100dvh - 40px));
  padding: clamp(16px, 2.4vw, 28px);
  border-color: var(--theme-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 11%, transparent), color-mix(in srgb, var(--text) 3.5%, transparent) 44%, color-mix(in srgb, var(--bg) 64%, transparent)),
    radial-gradient(circle at 18% 18%, rgba(var(--accent-rgb), 0.34), transparent 34rem),
    radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 28rem),
    radial-gradient(circle at 72% 86%, rgba(var(--accent-rgb), 0.16), transparent 25rem),
    rgba(var(--surface-rgb), 0.88);
  box-shadow:
    0 34px 110px color-mix(in srgb, var(--bg) 68%, transparent),
    0 0 62px var(--theme-glow),
    0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent) inset,
    0 1px 0 color-mix(in srgb, var(--text) 18%, transparent) inset;
}

.play-rooms-card::before,
.play-rooms-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.play-rooms-card::before {
  background:
    linear-gradient(color-mix(in srgb, var(--text) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 3.8%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 62% 48%, black, transparent 74%);
  opacity: 0.34;
}

.play-rooms-card::after {
  background: radial-gradient(ellipse at center, transparent 44%, color-mix(in srgb, var(--bg) 52%, transparent));
}

.play-rooms-ambient,
.play-rooms-ambient span {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.play-rooms-ambient {
  inset: 0;
  filter: blur(10px);
}

.play-rooms-ambient span {
  width: 16rem;
  height: 16rem;
  border-radius: 999px;
  opacity: 0.34;
  animation: lobbyGlow 9s ease-in-out infinite;
}

.play-rooms-ambient span:nth-child(1) {
  left: -4rem;
  top: 12%;
  background: var(--accent);
}

.play-rooms-ambient span:nth-child(2) {
  right: 13%;
  top: -5rem;
  width: 12rem;
  height: 12rem;
  background: var(--accent-2);
  animation-delay: -3s;
}

.play-rooms-ambient span:nth-child(3) {
  right: -5rem;
  bottom: 6%;
  background: color-mix(in srgb, var(--accent) 72%, var(--bg));
  animation-delay: -5s;
}

@keyframes lobbyGlow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.28; }
  50% { transform: translate3d(16px, -18px, 0) scale(1.12); opacity: 0.42; }
}

.play-rooms-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.15fr);
  gap: clamp(12px, 2vw, 22px);
  align-items: stretch;
  min-height: 100%;
}

.play-rooms-hero,
.open-lobbies-panel {
  border: 1px solid var(--theme-line);
  background: var(--theme-panel-bg);
  box-shadow: 0 22px 54px color-mix(in srgb, var(--bg) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
  backdrop-filter: blur(24px);
}

.play-rooms-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 460px;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 30px;
  text-align: left;
}

.play-rooms-hero h2 {
  max-width: 11ch;
  font-size: clamp(2.55rem, 5.8vw, 4.8rem);
  line-height: 0.86;
  letter-spacing: -0.08em;
  text-shadow: 0 18px 48px var(--theme-glow);
}

.play-rooms-hero .lead.small {
  max-width: 28rem;
  margin: 16px 0 0;
  color: var(--theme-text-soft);
  font-size: 1rem;
}

.play-rooms-signal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 22px;
  padding: 9px 12px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.44);
  color: var(--theme-text-soft);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.signal-dot,
.open-lobby-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--theme-active-bg), 0 0 18px rgba(var(--accent-rgb), 0.72);
}

.play-room-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 20px;
}

.play-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 16px 18px 16px 20px;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 20%, transparent), transparent 25%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--bg)) 52%, var(--accent-2));
  box-shadow: 0 18px 50px var(--theme-active-bg-strong), inset 0 1px 0 color-mix(in srgb, var(--text) 28%, transparent);
}

.play-primary small {
  color: color-mix(in srgb, var(--on-accent) 70%, transparent);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.play-secondary,
.open-lobby-row button {
  border: 1px solid var(--theme-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 18%, transparent), transparent 26%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 74%, var(--bg)) 52%, var(--accent-2));
  box-shadow: 0 14px 42px var(--theme-active-bg-strong), inset 0 1px 0 color-mix(in srgb, var(--text) 24%, transparent);
}

.play-secondary:hover:not(:disabled),
.play-secondary:focus-visible {
  border-color: color-mix(in srgb, var(--text) 24%, transparent);
  box-shadow: 0 18px 52px var(--theme-active-bg-strong), 0 0 0 4px var(--theme-active-bg), inset 0 1px 0 color-mix(in srgb, var(--text) 30%, transparent);
}

.play-primary:hover:not(:disabled) {
  box-shadow: 0 22px 64px var(--theme-active-bg-strong), 0 0 0 4px var(--theme-active-bg), inset 0 1px 0 color-mix(in srgb, var(--text) 34%, transparent);
}

.play-rooms-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.play-rooms-stats div {
  padding: 12px;
  border: 1px solid var(--theme-line);
  border-radius: 18px;
  background: rgba(var(--surface-rgb), 0.4);
}

.play-rooms-stats strong,
.play-rooms-stats span {
  display: block;
}

.play-rooms-stats strong {
  font-size: 1.02rem;
}

.play-rooms-stats span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.open-lobbies-panel {
  display: flex;
  flex-direction: column;
  min-height: 460px;
  margin: 0;
  padding: clamp(16px, 2vw, 22px);
  border-radius: 30px;
  text-align: left;
}

.open-lobbies-title {
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.open-lobbies-title .eyebrow {
  margin-bottom: 6px;
}

.open-lobbies-title strong {
  display: block;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.open-lobbies-title > span {
  flex: none;
  margin-left: auto;
  padding: 8px 11px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.44);
  color: var(--theme-text-soft);
  font-size: 0.76rem;
  font-weight: 800;
}

.open-lobbies-list {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.open-lobbies-list.empty {
  display: none;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: center;
}

.open-lobby-row {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--theme-line);
  border-radius: 22px;
  background: var(--theme-control-bg);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--bg) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.open-lobby-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--accent-2), var(--accent));
  opacity: 0.82;
}

.open-lobby-row:hover {
  transform: translateY(-3px);
  border-color: var(--theme-line-strong);
  background: linear-gradient(135deg, var(--theme-active-bg), color-mix(in srgb, var(--text) 4.5%, transparent));
  box-shadow: 0 20px 50px color-mix(in srgb, var(--bg) 38%, transparent), 0 0 0 4px var(--theme-glow-soft), inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent);
}

.open-lobby-main {
  min-width: 0;
}

.open-lobby-topline,
.open-lobby-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.open-lobby-topline {
  margin-bottom: 10px;
}

.open-lobby-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-lobby-code,
.open-lobby-live {
  flex: none;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.open-lobby-code {
  padding: 6px 8px;
  border: 1px solid var(--theme-line);
  background: rgba(var(--surface-rgb), 0.44);
  color: var(--theme-text-soft);
}

.open-lobby-live {
  padding: 5px 8px;
  background: var(--theme-active-bg);
  color: color-mix(in srgb, var(--accent-2) 76%, var(--text));
}

.open-lobby-row small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.open-lobby-meta {
  margin-bottom: 12px;
}

.open-lobby-avatars {
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.open-lobby-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -8px;
  border: 1px solid color-mix(in srgb, var(--text) 38%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), color-mix(in srgb, var(--accent-2) 70%, transparent));
  color: var(--on-accent);
  font-size: 0.68rem;
  font-weight: 900;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--bg) 28%, transparent);
}

.open-lobby-footer small {
  font-size: 0.78rem;
}

.open-lobby-row button {
  min-height: 44px;
  padding: 10px 14px;
  white-space: nowrap;
}

.play-rooms-status {
  position: relative;
  min-height: 22px;
  margin: 16px 0 0;
}

@media (max-width: 860px) {
  .play-rooms-card {
    min-height: auto;
  }

  .play-rooms-layout {
    grid-template-columns: 1fr;
  }

  .play-rooms-hero,
  .open-lobbies-panel {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .play-rooms-card {
    padding-top: 62px;
  }

  .play-rooms-hero h2 {
    max-width: 100%;
    font-size: clamp(2.7rem, 16vw, 4.2rem);
  }

  .play-rooms-stats,
  .open-lobby-row {
    grid-template-columns: 1fr;
  }

  .open-lobbies-title,
  .open-lobby-topline,
  .open-lobby-footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .open-lobby-row button {
    width: 100%;
  }
}

.rules span,
.status,
.turn-card span,
.turn-card small {
  color: var(--muted);
  font-size: 0.86rem;
}

.status {
  min-height: 20px;
  margin: 14px 0 0;
}

.error {
  color: var(--danger) !important;
}

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.room-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.secret-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.code-pill {
  width: auto;
  min-height: 0;
  padding: 10px 12px;
  color: var(--accent-2);
  letter-spacing: 0.08em;
}

.icon-button {
  display: inline-grid;
  width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.12rem;
  line-height: 1;
}

.secret-value {
  transition: filter 0.2s ease, opacity 0.2s ease, text-shadow 0.2s ease, border-color 0.2s ease;
}

.secret-blurred {
  opacity: 0.72;
  user-select: none;
}

.code-pill.secret-blurred {
  border-style: dashed;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.18em;
  text-shadow: none;
}

.qr-wrap.secret-blurred {
  filter: blur(12px);
  pointer-events: none;
}

.badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: var(--success);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-weight: 800;
}

.lobby-header .lead {
  margin: 5px 0 0;
  line-height: 1.45;
}

.lobby-header .eyebrow {
  margin-bottom: 4px;
}

.lobby-header h2 {
  font-size: clamp(1.55rem, 3.5vw, 2.35rem);
}

.lobby-grid {
  display: grid;
  grid-template-columns: minmax(200px, 0.82fr) minmax(300px, 1.18fr);
  gap: clamp(8px, 1vw, 11px);
  align-items: stretch;
  margin-top: clamp(8px, 1vh, 11px);
}

.lobby-column {
  display: flex;
  min-width: 0;
  min-height: clamp(212px, 30vh, 272px);
  flex-direction: column;
  padding: clamp(9px, 1.05vw, 12px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.panel-title strong {
  font-size: 1rem;
}

.panel-title span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
  text-transform: uppercase;
}

.lobby-players {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lobby-players .players-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  align-content: start;
  overflow: auto;
}

.lobby-bottom-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 10px;
  margin-top: auto;
}

.lobby-invite .invite-tools {
  flex: 1;
}

.lobby-players .players-list {
  margin: 0;
}

.players-list,
.order-list,
.vote-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.invite-tools {
  display: grid;
  gap: 9px;
}

.lobby-actions {
  display: grid;
  gap: 7px;
}

.lobby-action-panel {
  display: grid;
  width: 100%;
  min-height: 0;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
}

.lobby-action-panel .status {
  margin: 0;
  min-height: 1.1em;
}

.action-settings-panel {
  max-height: min(48vh, 520px);
  overflow: auto;
}

.lobby-action-panel .action-settings-panel {
  margin-top: 2px;
}


.lobby-action-panel > button,
.lobby-action-panel input,
.lobby-action-panel .rename-row,
.lobby-action-panel .rename-row button {
  width: 100%;
}

.action-rename-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}

.action-rename-row #renameInput {
  order: 1;
}

.action-rename-row #renameBtn {
  order: 2;
}

.lobby-card button,
.lobby-card input,
.lobby-card select {
  min-height: 38px;
}

.lobby-card button {
  padding: 8px 11px;
}

.lobby-card input,
.lobby-card select {
  padding: 9px 10px;
}

.rename-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.rename-row.action-rename-row {
  grid-template-columns: 1fr;
}
  
.qr-wrap {
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

#inviteQr {
  width: min(200px, 100%);
  border-radius: 12px;
}

.lobby-invite #inviteQr {
  width: min(180px, 100%);
}

.player-row,
.order-row,
.vote-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.avatar,
.order-row span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.22);
  color: #fff;
  font-weight: 800;
}

.player-row em {
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  font-style: normal;
  font-size: 0.75rem;
}

.game-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(210px, 0.78fr) minmax(390px, 1.44fr) minmax(210px, 0.78fr);
  gap: clamp(12px, 1.7vw, 18px);
  align-items: stretch;
}

.game-layout .card {
  width: 100%;
}

.side-panel,
.player-card {
  min-height: min(640px, calc(100dvh - 48px));
}

.side-panel {
  display: flex;
  flex-direction: column;
}

.game-layout .side-panel:first-child .host-controls {
  margin-top: auto;
}

.theme-text {
  color: var(--muted);
  line-height: 1.6;
}

.round-meter {
  margin: clamp(14px, 2vh, 20px) 0;
}

.round-meter span {
  color: var(--muted);
  font-weight: 700;
}

.round-meter div {
  height: 10px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
}

.round-meter i {
  display: block;
  width: 33%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #fff);
}

.turn-card {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.turn-card strong {
  font-size: 1.3rem;
}

.player-card {
  display: grid;
  grid-template-rows: auto minmax(210px, 1fr) auto auto auto;
  gap: clamp(10px, 1.5vh, 16px);
}

.timer-ring {
  position: relative;
  width: clamp(104px, 14vh, 126px);
  height: clamp(104px, 14vh, 126px);
  margin: 0 auto;
}

.timer-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-ring circle {
  fill: none;
  stroke-width: 9;
}

.timer-ring .track {
  stroke: rgba(255,255,255,0.08);
}

.timer-ring .progress {
  stroke: var(--accent-2);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.35s linear, stroke 0.2s;
}

.timer-ring .progress.danger {
  stroke: var(--danger);
}

.timer-ring div {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.timer-ring strong {
  font-size: clamp(2rem, 4vh, 2.4rem);
  line-height: 1;
}

.timer-ring span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.embed {
  display: grid;
  min-height: clamp(210px, 38vh, 310px);
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.18), rgba(255,255,255,0.035));
}

.embed.empty span {
  color: var(--muted);
}

.embed iframe {
  width: 100%;
  height: 100%;
  min-height: clamp(210px, 38vh, 310px);
  border: 0;
}

.embed a {
  color: var(--accent-2);
  font-weight: 800;
}

.order-row.active {
  border-color: rgba(var(--accent-rgb), 0.72);
  background: rgba(var(--accent-rgb), 0.13);
  box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.18);
}

.host-controls {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.host-status-grid,
.host-action-grid,
.kick-list {
  display: grid;
  gap: 10px;
}

.host-status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.host-status-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.host-status-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.host-status-grid strong {
  display: block;
  overflow: hidden;
  color: var(--accent-2);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kick-list {
  max-height: min(190px, 24vh);
  overflow: auto;
  padding-right: 2px;
}

.host-action-grid button,
.kick-row,
.mini-action {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 0.88rem;
}

.host-control-title {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
}

.host-player-row {
  gap: 10px;
}

.host-player-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.host-player-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.mini-action {
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--accent-2);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.kick-row strong {
  color: var(--accent-2);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.vote-row {
  width: 100%;
  justify-content: space-between;
  text-align: left;
  background: rgba(255,255,255,0.055);
}

.vote-row.selected {
  border-color: rgba(var(--accent-rgb), 0.85);
  background: rgba(var(--accent-rgb), 0.18);
}

.vote-row.static {
  cursor: default;
}

@media (max-width: 1080px) {
  .lobby-grid {
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  }

  .lobby-settings {
    grid-column: 1 / -1;
    min-height: auto;
  }
}

@media (max-width: 920px) {
  body[data-screen="lobby"] {
    overflow-y: auto;
  }

  .game-layout {
    grid-template-columns: 1fr;
  }

  .side-panel,
  .player-card,
  .lobby-column {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .app-shell {
    width: min(100% - 18px, 1180px);
    padding: 10px 0;
  }

  .card {
    padding: 20px;
    border-radius: 22px;
  }

  .two-col,
  .rules,
  .lobby-grid {
    grid-template-columns: 1fr;
  }

  .section-header {
    display: grid;
  }
}

select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  background: rgba(0, 0, 0, 0.36);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.setting-control select {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(8, 8, 12, 0.82);
}

select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

select option {
  background: #100b20;
  color: #f8f6ff;
}

.settings-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 0.75vh, 8px);
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: left;
}

.setting-control {
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background: rgba(0, 0, 0, 0.18);
}

.setting-control-wide {
  grid-column: 1 / -1;
}

.setting-control span {
  margin: 0;
}

.setting-control small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

#saveLobbyMetaBtn {
  grid-column: 1 / -1;
}

.game-settings-title {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 2px;
}

.settings-title strong {
  font-size: 1rem;
}

.settings-title span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.vote-timer {
  display: grid;
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), 0.72);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.13);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
  box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.18);
}

@media (max-width: 560px) {
  .settings-panel,
  .lobby-bottom-actions {
    grid-template-columns: 1fr;
  }

  .setting-control-wide {
    grid-column: auto;
  }
}

.volume-control {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14, 14, 14, 0.78);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.volume-control span,
.volume-control strong {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sound-toggle {
  display: inline-grid;
  width: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1rem;
}

.volume-control input {
  width: 120px;
  padding: 0;
  accent-color: var(--accent);
}

.reaction-panel,
.track-history-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
}

.reaction-panel .panel-title,
.track-history-panel .panel-title {
  margin-bottom: 10px;
}

.reaction-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.reaction-btn {
  display: grid;
  min-height: 54px;
  place-items: center;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}

.reaction-btn span {
  font-size: 1.2rem;
}

.reaction-btn strong {
  color: var(--muted);
  font-size: 0.78rem;
}

.reaction-btn.selected {
  border-color: rgba(var(--accent-rgb), 0.85);
  background: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.16);
}

.track-history {
  display: grid;
  gap: 8px;
  max-height: min(220px, 28vh);
  overflow: auto;
}

.track-history.empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.history-row {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.history-row span,
.history-row small,
.history-row-link em {
  color: var(--muted);
  font-size: 0.76rem;
}

.history-row-link {
  min-width: 0;
}

.history-track-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  color: var(--accent-2);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.history-track-link::before {
  content: "↗";
  margin-right: 0.35rem;
}

.history-track-link:hover {
  color: var(--text);
  text-decoration: underline;
}

.voting-history,
.result-history {
  margin: 18px 0;
}

@media (max-width: 560px) {
  .volume-control {
    position: sticky;
    top: 8px;
    right: auto;
    width: calc(100% - 18px);
    margin: 8px auto 0;
    justify-content: center;
  }

  .reaction-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .host-status-grid {
    grid-template-columns: 1fr;
  }

  .host-player-row {
    align-items: stretch;
    flex-direction: column;
  }

  .host-player-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

button,
.vote-row,
.reaction-btn,
.kick-row,
.code-pill,
.sound-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform-origin: center;
  will-change: transform, filter, box-shadow;
}

button::before,
.vote-row::before,
.reaction-btn::before,
.kick-row::before,
.code-pill::before,
.sound-toggle::before {
  content: "";
  position: absolute;
  inset: -45% -70%;
  z-index: 0;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.2), transparent 64%);
  opacity: 0;
  transform: translateX(-42%) rotate(8deg);
  transition: opacity 0.22s ease, transform 0.52s ease;
}

button:hover:not(:disabled)::before,
.vote-row:hover:not(:disabled)::before,
.reaction-btn:hover:not(:disabled)::before,
.kick-row:hover:not(:disabled)::before,
.code-pill:hover:not(:disabled)::before,
.sound-toggle:hover:not(:disabled)::before {
  opacity: 1;
  transform: translateX(42%) rotate(8deg);
}

button:active:not(:disabled),
.vote-row:active:not(:disabled),
.reaction-btn:active:not(:disabled),
.kick-row:active:not(:disabled),
.code-pill:active:not(:disabled),
.sound-toggle:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  filter: brightness(1.16) saturate(1.08);
}


/* Unified button micro-interactions for the remaining controls across menus, lobby, game and modals. */
.primary,
.secondary,
.danger,
.ghost-button,
.oauth-button,
.icon-button,
.modal-close,
.corner-toggle,
.sound-mode-toggle,
.play-primary,
.play-secondary,
.open-lobby-row button,
.host-action-grid button,
.mini-action,
.chat-send-button,
.spy-guess-option,
.custom-select-trigger,
.custom-select-option,
.choice-pill,
.accent-swatch,
.effects-density-option {
  transform: translateZ(0);
  transition:
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.2s ease,
    opacity 0.2s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.primary:hover:not(:disabled),
.play-primary:hover:not(:disabled),
.lobby-start-button:hover:not(:disabled) {
  animation: button-energy-pulse 1.35s ease-in-out infinite;
}

.secondary:hover:not(:disabled),
.ghost-button:hover:not(:disabled),
.oauth-button:hover:not(:disabled),
.icon-button:hover:not(:disabled),
.modal-close:hover:not(:disabled),
.corner-toggle:hover:not(:disabled),
.sound-mode-toggle:hover:not(:disabled),
.play-secondary:hover:not(:disabled),
.open-lobby-row button:hover:not(:disabled),
.host-action-grid button:hover:not(:disabled),
.mini-action:hover:not(:disabled),
.chat-send-button:hover:not(:disabled),
.custom-select-trigger:hover:not(:disabled),
.custom-select-option:hover:not(:disabled),
.choice-pill:hover:not(:disabled),
.accent-swatch:hover:not(:disabled),
.effects-density-option:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.08) saturate(1.04);
}

.danger:hover:not(:disabled),
.lobby-force-start-button:hover:not(:disabled),
#leaveLobbyBtn:hover:not(:disabled) {
  animation: danger-button-warning 1.1s ease-in-out infinite;
  border-color: rgba(255, 99, 112, 0.82);
  box-shadow: 0 16px 42px rgba(255, 31, 45, 0.26), 0 0 0 4px rgba(255, 31, 45, 0.12);
}

.chat-send-button:hover:not(:disabled) span {
  animation: send-arrow-nudge 0.82s ease-in-out infinite;
}

.modal-close:hover:not(:disabled) {
  transform: translateY(-2px) rotate(90deg) scale(1.04);
}

.icon-button:hover:not(:disabled),
.sound-mode-toggle:hover:not(:disabled),
.accent-swatch:hover:not(:disabled) {
  animation: icon-button-pop 0.72s ease both;
}

.language-toggle:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.035);
  box-shadow:
    0 0 0 4px rgba(var(--accent-rgb), 0.12),
    0 0 30px rgba(var(--accent-rgb), 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -8px 18px rgba(0, 0, 0, 0.16);
}

.language-toggle:hover:not(:disabled) .language-toggle-knob {
  animation: language-knob-wiggle 0.7s ease both;
}

.spy-guess-option:hover:not(:disabled),
.spy-guess-option:focus-visible,
.spy-guess-option.selected {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(var(--accent-rgb), 0.82);
  background:
    radial-gradient(circle at 12% 20%, rgba(var(--accent-rgb), 0.24), transparent 42%),
    rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 16px 38px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.spy-guess-option.selected {
  animation: selected-glow 1.8s ease-in-out infinite;
}

button:disabled,
.custom-select-option:disabled {
  animation: none !important;
}

@keyframes button-energy-pulse {
  0%, 100% { box-shadow: 0 16px 36px rgba(var(--accent-rgb), 0.32), 0 0 0 rgba(var(--accent-rgb), 0); }
  50% { box-shadow: 0 22px 58px rgba(var(--accent-rgb), 0.44), 0 0 0 5px rgba(var(--accent-rgb), 0.12); }
}

@keyframes danger-button-warning {
  0%, 100% { filter: brightness(1.06); transform: translateY(-2px) scale(1.01); }
  50% { filter: brightness(1.18) saturate(1.18); transform: translateY(-2px) scale(1.035); }
}

@keyframes send-arrow-nudge {
  0%, 100% { transform: translateX(1px); }
  50% { transform: translateX(5px); }
}

@keyframes icon-button-pop {
  0% { transform: translateY(0) scale(1); }
  55% { transform: translateY(-3px) scale(1.08); }
  100% { transform: translateY(-2px) scale(1.015); }
}

@keyframes language-knob-wiggle {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .primary:hover:not(:disabled),
  .play-primary:hover:not(:disabled),
  .lobby-start-button:hover:not(:disabled),
  .danger:hover:not(:disabled),
  .lobby-force-start-button:hover:not(:disabled),
  #leaveLobbyBtn:hover:not(:disabled),
  .chat-send-button:hover:not(:disabled) span,
  .icon-button:hover:not(:disabled),
  .sound-mode-toggle:hover:not(:disabled),
  .accent-swatch:hover:not(:disabled),
  .language-toggle:hover:not(:disabled) .language-toggle-knob,
  .spy-guess-option.selected {
    animation: none;
  }
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 3px;
}

.button-ripple {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 62%);
  animation: button-ripple 0.62s ease-out forwards;
}

@keyframes button-ripple {
  from { opacity: 0.9; transform: scale(0); }
  to { opacity: 0; transform: scale(2.45); }
}

.card,
.lobby-column,
.reaction-panel,
.track-history-panel,
.embed,
.timer-ring,
.turn-card {
  animation: soft-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.player-row,
.order-row,
.vote-row,
.history-row,
.reaction-btn {
  animation: list-item-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.player-row:nth-child(2),
.order-row:nth-child(2),
.vote-row:nth-child(2),
.history-row:nth-child(2),
.reaction-btn:nth-child(2) { animation-delay: 0.035s; }
.player-row:nth-child(3),
.order-row:nth-child(3),
.vote-row:nth-child(3),
.history-row:nth-child(3),
.reaction-btn:nth-child(3) { animation-delay: 0.07s; }
.player-row:nth-child(4),
.order-row:nth-child(4),
.vote-row:nth-child(4),
.history-row:nth-child(4),
.reaction-btn:nth-child(4) { animation-delay: 0.105s; }
.player-row:nth-child(5),
.order-row:nth-child(5),
.vote-row:nth-child(5),
.history-row:nth-child(5),
.reaction-btn:nth-child(5) { animation-delay: 0.14s; }
.player-row:nth-child(6),
.order-row:nth-child(6),
.vote-row:nth-child(6),
.history-row:nth-child(6),
.reaction-btn:nth-child(6) { animation-delay: 0.175s; }

.order-row.active,
.vote-row.selected,
.reaction-btn.selected,
#readyBtn.ready {
  animation: selected-glow 1.8s ease-in-out infinite;
}

.timer-ring .progress.danger {
  animation: timer-danger 0.9s ease-in-out infinite;
}

.embed:not(.empty) {
  animation: track-drop 0.58s cubic-bezier(0.2, 0.86, 0.22, 1) both;
}

.round-meter i {
  transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes soft-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes list-item-in {
  from { opacity: 0; transform: translateX(-10px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes selected-glow {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.12); }
  50% { box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.32); }
}

@keyframes timer-danger {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 31, 45, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 31, 45, 0.75)); }
}

@keyframes track-drop {
  from { opacity: 0; transform: translateY(16px) scale(0.98); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.cinematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--accent-rgb), 0.25), transparent 22rem),
    rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px);
  animation: cinematic-fade 0.28s ease both;
}

.cinematic-overlay.closing {
  animation: cinematic-out 0.28s ease both;
}

.cinematic-card {
  position: relative;
  width: min(100%, 560px);
  overflow: hidden;
  padding: clamp(28px, 6vw, 52px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(12, 12, 14, 0.94);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
  animation: dossier-open 0.74s cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.cinematic-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.16), transparent 42%);
  transform: translateX(-72%);
  animation: card-scan 1.4s 0.25s ease-out both;
}

.cinematic-vinyl {
  position: relative;
  width: 94px;
  height: 94px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 8px, var(--accent) 9px 16px, transparent 17px),
    repeating-radial-gradient(circle, rgba(255,255,255,0.16) 0 2px, rgba(255,255,255,0.04) 3px 7px),
    #080808;
  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.24);
  animation: vinyl-spin 3.4s linear infinite;
}

.cinematic-vinyl span {
  position: absolute;
  top: 11px;
  right: -10px;
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  transform: rotate(28deg);
  transform-origin: left center;
}

.cinematic-card h2 {
  margin-bottom: 16px;
  background: linear-gradient(100deg, var(--text), var(--accent) 55%, var(--text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cinematic-text {
  max-width: 34rem;
  margin: 0 auto 20px;
  color: var(--muted);
  line-height: 1.65;
}

.cinematic-meta {
  display: grid;
  gap: 8px;
  min-height: 74px;
  place-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.055);
}

.cinematic-meta span,
.cinematic-meta small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cinematic-meta strong {
  font-size: clamp(1.45rem, 5vw, 2.5rem);
  line-height: 1.1;
}

.cinematic-meta .countdown-number {
  color: var(--text);
  font-size: clamp(5rem, 22vw, 9rem);
  text-shadow: 0 0 36px rgba(var(--accent-rgb), 0.62);
  animation: countdown-pop 0.85s cubic-bezier(0.2, 0.88, 0.22, 1) both;
}

.pulse-pop {
  animation: countdown-pop 0.85s cubic-bezier(0.2, 0.88, 0.22, 1) both !important;
}

.cinematic-close {
  margin-top: 20px;
}

.cinematic-spy .cinematic-card {
  border-color: rgba(var(--accent-rgb), 0.42);
}

.cinematic-civilian .cinematic-vinyl {
  box-shadow: 0 0 42px rgba(255, 255, 255, 0.2);
}

@keyframes cinematic-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cinematic-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes dossier-open {
  0% { opacity: 0; transform: translateY(24px) scale(0.92) rotateX(10deg); filter: blur(10px); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.015) rotateX(0); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes card-scan {
  to { transform: translateX(72%); }
}

@keyframes vinyl-spin {
  to { transform: rotate(360deg); }
}

@keyframes countdown-pop {
  0% { opacity: 0; transform: scale(0.58); filter: blur(12px); }
  35% { opacity: 1; transform: scale(1.12); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

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

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(12px);
}

.auth-modal-card {
  width: min(100%, 520px);
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)), var(--panel-strong);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255,255,255,0.09);
  text-align: center;
}

.auth-modal-card h2 {
  font-size: clamp(2.2rem, 8vw, 4rem);
}

.auth-modal-text,
.auth-register-hint {
  color: var(--muted);
  line-height: 1.55;
}

.auth-modal-text {
  margin: 16px auto 20px;
  max-width: 28rem;
}

.auth-choice-grid {
  display: grid;
  gap: 12px;
}

.oauth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #111827;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-weight: 900;
}

.oauth-button span {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  font-weight: 900;
}

.oauth-button.discord {
  color: #fff;
  background: linear-gradient(135deg, #5865f2, #7c3aed);
}

.oauth-button.google:hover,
.oauth-button.discord:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

.auth-form-view {
  display: grid;
  gap: 0.75rem;
}

.auth-grid,
.profile-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.auth-actions,
.profile-editor .actions {
  margin-top: 0.75rem;
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ghost-button {
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  min-height: 3rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.account-corner {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 4;
  width: min(440px, calc(100vw - 36px));
}

.guest-account-notice,
.profile-view,
.profile-editor {
  border: 1px solid var(--line);
  background: rgba(14, 14, 14, 0.78);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

.guest-account-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 20px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guest-account-notice span {
  flex: 1 1 100%;
}

.guest-account-notice button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
}

.profile-view {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  max-width: 280px;
  padding: 10px;
  border-radius: 1.25rem;
}

.profile-view button {
  min-height: 2.35rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
}

.profile-view button:nth-of-type(1) {
  grid-column: 1 / 2;
}

.profile-view button:nth-of-type(2) {
  grid-column: 2 / 3;
}

.profile-avatar,
.avatar.image-avatar {
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.42), rgba(255, 255, 255, 0.12));
}

.profile-avatar {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1rem;
  font-weight: 800;
  font-size: 1.35rem;
}

.profile-avatar img,
.avatar.image-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  text-align: left;
}

.profile-info strong,
.profile-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-info span {
  color: var(--muted);
  font-size: 0.88rem;
}

.profile-editor {
  margin-top: 0.65rem;
  padding: 0.85rem;
  border-radius: 1.1rem;
}

.profile-editor .actions,
.profile-editor-hint {
  grid-column: 1 / -1;
}

.profile-editor-hint {
  margin: -0.35rem 0 0.1rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.account-corner .status {
  max-width: 100%;
  margin: 0 0 8px;
  padding-left: 4px;
  text-align: left;
}

.account-corner .status:empty {
  display: none;
}

@media (max-width: 720px) {
  .auth-grid,
  .profile-editor,
  .three-col {
    grid-template-columns: 1fr;
  }

  .profile-view {
    max-width: 100%;
  }
}

.language-switcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(14, 10, 30, 0.56);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.22),
    0 0 30px rgba(var(--accent-rgb), 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(22px) saturate(145%);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.language-toggle {
  position: relative;
  width: 3.1rem;
  height: 1.55rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 26% 30%, rgba(255, 255, 255, 0.36), transparent 34%),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.98), rgba(var(--accent-rgb), 0.55) 54%, rgba(255, 255, 255, 0.3));
  box-shadow:
    0 0 24px rgba(var(--accent-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -8px 18px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.language-toggle:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.18),
    0 0 28px rgba(var(--accent-rgb), 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.language-toggle-knob {
  position: absolute;
  top: 0.2rem;
  left: 0.22rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.78));
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.32),
    0 0 14px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[lang="en"] .language-toggle-knob {
  transform: translateX(1.48rem);
}

html[lang="en"] .language-switcher span:last-child,
html[lang="ru"] .language-switcher span:first-child {
  color: var(--text);
  text-shadow:
    0 0 12px rgba(var(--accent-rgb), 0.9),
    0 0 24px rgba(var(--accent-rgb), 0.45);
}

@media (max-width: 720px) {
  .language-switcher {
    right: 12px;
    bottom: 12px;
  }
}

.spy-guess-form {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.result-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.breakdown-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.14), transparent 42%), rgba(255, 255, 255, 0.045);
}

.breakdown-card span,
.breakdown-card small {
  color: var(--muted);
  font-size: 0.78rem;
}

.breakdown-card span {
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.breakdown-card strong {
  font-size: 1rem;
  line-height: 1.25;
}

.vote-row.hit-spy {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(var(--accent-rgb), 0.16);
}

@media (max-width: 560px) {
  .result-breakdown {
    grid-template-columns: 1fr;
  }
}

.host-players-modal {
  z-index: 18;
}

.host-players-card {
  width: min(100%, 560px);
}

.public-profile-card {
  width: min(100%, 940px);
}

.public-profile-card #publicProfileTitle {
  margin-top: -15px;
}

.host-modal-list {
  max-height: min(420px, 54vh);
  margin: 18px 0;
  padding-right: 4px;
}

@media (min-width: 921px) {
  body[data-screen="game"] .app-shell {
    width: min(1400px, calc(100% - 24px));
    min-height: 100dvh;
    padding: 10px 0;
  }

  body[data-screen="game"] .game-layout {
    grid-template-columns: minmax(190px, 0.7fr) minmax(420px, 1.55fr) minmax(210px, 0.72fr);
    gap: 12px;
  }

  body[data-screen="game"] .card {
    padding: clamp(14px, 1.45vw, 20px);
    border-radius: 22px;
  }

  body[data-screen="game"] .side-panel,
  body[data-screen="game"] .player-card {
    min-height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }

  body[data-screen="game"] .side-panel {
    overflow: auto;
  }

  body[data-screen="game"] .track-history {
    max-height: 24vh;
  }

  body[data-screen="game"] .order-list {
    max-height: 30vh;
    overflow: auto;
  }

  body[data-screen="game"] .timer-ring {
    width: clamp(92px, 12vh, 114px);
    height: clamp(92px, 12vh, 114px);
  }

  body[data-screen="game"] .player-stage {
    min-height: 0;
    align-self: stretch;
  }

  body[data-screen="game"] .embed,
  body[data-screen="game"] .embed iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  body[data-screen="game"] .host-controls {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    transform: none;
  }

  body[data-screen="game"] .host-controls .panel-title {
    margin-bottom: 2px;
  }

  body[data-screen="game"] .host-status-grid {
    gap: 6px;
  }

  body[data-screen="game"] .host-status-grid div {
    padding: 8px;
  }

  body[data-screen="game"] .host-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body[data-screen="game"] .host-action-grid button {
    min-height: 36px;
    padding: 8px 9px;
    border-radius: 12px;
    font-size: 0.75rem;
  }

  body[data-screen="game"] .host-action-grid .danger {
    grid-column: 1 / -1;
  }
}


.spy-visible-name {
  color: #ff4757;
  text-shadow: 0 0 18px rgba(255, 31, 45, 0.32);
}

.spy-visible-badge {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
  border-radius: 999px;
  background: rgba(255, 31, 45, 0.14);
  color: #ff8d96;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Compact corner controls */
.corner-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14, 14, 14, 0.78);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
  color: var(--text);
  cursor: pointer;
}

.corner-toggle strong {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-corner {
  width: auto;
  max-width: min(280px, calc(100vw - 36px));
}

.account-toggle {
  gap: 0.56rem;
  width: 100%;
  max-width: 100%;
  padding: 9px 13px 9px 10px;
  justify-content: flex-start;
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  border-radius: 17px;
  background: linear-gradient(130deg, rgba(var(--accent-rgb), 0.16), rgba(6, 8, 20, 0.95));
}

.account-toggle > span:first-child {
  overflow: hidden;
  display: inline-grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.34), rgba(255, 255, 255, 0.12));
  font-weight: 900;
}

.account-toggle strong {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.account-toggle-meta { min-width: 0; display: grid; gap: 2px; justify-items: start; }
.account-toggle-level { font-size: 0.7rem; letter-spacing: 0; text-transform: none; color: #98a9c9; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.account-online-dot { width: 7px; height: 7px; border-radius: 999px; background: #11d77a; box-shadow: 0 0 10px rgba(17, 215, 122, 0.78); display: inline-block; }
.account-toggle-check { display: none; }
.account-xp-bar { margin-top: 7px; padding: 8px 10px 9px; border-radius: 12px; border: 1px solid rgba(111, 134, 188, 0.2); background: linear-gradient(180deg, rgba(11, 17, 36, 0.72), rgba(8, 11, 25, 0.9)); }
.xp-bar-track { position: relative; margin-top: 0; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.09); border: 0; }
.xp-bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent-2)); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.65); }
.account-xp-bar small { display: block; margin-top: 8px; color: #9caed0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; }

.account-toggle strong .player-name-text,
.account-toggle strong .dev-name-glow {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-toggle img,
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.volume-control {
  display: grid;
  justify-items: end;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.volume-control .sound-toggle {
  width: auto;
  min-height: 44px;
  font-size: 1rem;
}

.volume-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition: width 0.24s ease, max-height 0.24s ease, padding 0.24s ease, opacity 0.2s ease, transform 0.24s ease, border-color 0.24s ease;
}

.volume-control.open .volume-panel {
  width: 76px;
  max-height: 260px;
  padding: 14px 10px;
  flex-direction: column;
  border-color: var(--line);
  background: rgba(14, 14, 14, 0.78);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sound-mode-toggle {
  display: inline-grid;
  width: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1rem;
}

.volume-panel input {
  width: 160px;
  padding: 0;
  accent-color: var(--accent);
  transform: rotate(-90deg);
  transform-origin: center;
  margin: 66px -54px;
}

.volume-panel strong {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.music-source-label {
  min-width: max-content;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spy-guess-options {
  display: grid;
  gap: 10px;
}

.spy-guess-option {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-weight: 900;
  text-align: left;
}

.spy-guess-option:hover,
.spy-guess-option.selected {
  border-color: rgba(var(--accent-rgb), 0.75);
  background: rgba(var(--accent-rgb), 0.18);
}

.spy-guess-auto {
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  font-weight: 800;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
}

.auth-modal-card {
  position: relative;
}

.account-profile-view {
  display: grid;
  gap: 16px;
  text-align: left;
}

.profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.2), transparent 45%), rgba(255, 255, 255, 0.045);
}

.profile-hero > div:last-child {
  display: grid;
  gap: 3px;
}

.profile-hero strong {
  font-size: 1.35rem;
}

.profile-hero span {
  color: var(--muted);
}

.profile-avatar-large {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.35rem;
  font-size: 1.8rem;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-stat-card {
  display: grid;
  gap: 5px;
  min-height: 118px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.13), rgba(255, 255, 255, 0.04));
}

.profile-stat-card span {
  font-size: 1.35rem;
}

.profile-stat-card small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-stat-card strong {
  align-self: end;
  font-size: 1.05rem;
}
.profile-xp-card { grid-column: span 3; min-height: auto; }
.profile-xp-card em { margin-top: 7px; color: var(--theme-text-soft); font-size: 0.76rem; font-style: normal; font-weight: 600; }

.profile-editor-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

@media (max-width: 620px) {
  .profile-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-xp-card { grid-column: 1 / -1; }

  .profile-editor-panel {
    grid-template-columns: 1fr;
  }
}

body[data-screen]:not([data-screen="menu"]) .account-corner,
body[data-screen]:not([data-screen="menu"]) .top-left-controls {
  display: none;
}

body[data-screen="lobby"] .language-switcher,
body[data-screen="game"] .language-switcher {
  display: none;
}

.game-chat-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: clamp(360px, 46vh, 540px);
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
}

.chat-header {
  flex: 0 0 auto;
  padding-bottom: 10px;
}

.chat-messages-area {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 2px 12px;
  scroll-behavior: smooth;
  scrollbar-color: rgba(var(--accent-rgb), 0.18) rgba(255, 255, 255, 0.025);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  transition: scrollbar-color 0.25s ease;
}

.chat-messages-area:hover,
.chat-messages-area:focus-within,
.chat-messages-area.is-scrolling {
  scrollbar-color: rgba(var(--accent-rgb), 0.38) rgba(255, 255, 255, 0.035);
}

.chat-messages-area::-webkit-scrollbar {
  width: 7px;
}

.chat-messages-area::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.018);
}

.chat-messages-area::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)) padding-box,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.1)) border-box;
  box-shadow: inset 0 0 8px rgba(var(--accent-rgb), 0.12), 0 0 10px rgba(var(--accent-rgb), 0);
  opacity: 0.28;
  transition: background 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.chat-messages-area:hover::-webkit-scrollbar-thumb,
.chat-messages-area:focus-within::-webkit-scrollbar-thumb,
.chat-messages-area.is-scrolling::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.07)) padding-box,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.46), rgba(var(--accent-rgb), 0.18)) border-box;
  box-shadow: inset 0 0 8px rgba(var(--accent-rgb), 0.22), 0 0 12px rgba(var(--accent-rgb), 0.2);
  opacity: 0.62;
}

.chat-messages-area::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)) padding-box,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.62), rgba(var(--accent-rgb), 0.26)) border-box;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 7px;
  min-height: 100%;
}

.chat-messages::before {
  content: "";
  flex: 1 1 auto;
  min-height: 12px;
}

.game-chat-panel .panel-title,
.chat-input-area {
  flex: 0 0 auto;
}

.chat-messages.empty {
  justify-content: flex-end;
  color: var(--muted);
  font-size: 0.9rem;
}

.chat-messages.empty::before {
  display: none;
}

.chat-message {
  display: grid;
  flex: 0 0 auto;
  align-self: flex-start;
  width: fit-content;
  min-width: min(160px, 100%);
  max-width: 92%;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.chat-message.mine {
  align-self: flex-end;
  border-color: rgba(var(--accent-rgb), 0.48);
  background: rgba(var(--accent-rgb), 0.12);
}

.chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-message-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--accent-2);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-meta span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.chat-message p {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-player-meta-wrap {
  position: relative;
  min-width: 0;
}

.chat-player-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.chat-player-trigger .avatar {
  width: 24px;
  height: 24px;
  font-size: 0.68rem;
}

.chat-player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-player-actions {
  --chat-player-actions-offset-x: 0px;
  position: absolute;
  z-index: 42;
  bottom: calc(100% + 10px);
  left: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: min(218px, calc(100vw - 20px));
  padding: 10px;
  border: 1px solid rgba(192, 132, 252, 0.48);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(36, 15, 69, 0.86), rgba(11, 12, 46, 0.78));
  box-shadow:
    0 24px 38px rgba(2, 6, 23, 0.56),
    0 0 0 1px rgba(236, 72, 153, 0.2) inset,
    0 0 30px rgba(168, 85, 247, 0.34);
  backdrop-filter: blur(13px) saturate(140%);
  -webkit-backdrop-filter: blur(13px) saturate(140%);
  opacity: 0;
  transform: translate3d(var(--chat-player-actions-offset-x), 12px, 0) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,.61,.36,1);
}

.chat-player-actions[data-placement="bottom"] {
  top: calc(100% + 10px);
  bottom: auto;
}

.chat-player-actions.open {
  opacity: 1;
  transform: translate3d(var(--chat-player-actions-offset-x), 0, 0) scale(1);
  pointer-events: auto;
}

.chat-player-actions button {
  border: 1px solid rgba(196, 181, 253, 0.35);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  color: var(--text);
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.54), rgba(76, 29, 149, 0.3));
  box-shadow: 0 10px 18px rgba(2, 6, 23, 0.3), 0 0 18px rgba(217, 70, 239, 0.16) inset;
  cursor: pointer;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease, opacity 170ms ease;
}

.chat-player-actions button:hover {
  border-color: rgba(236, 72, 153, 0.58);
  background: linear-gradient(160deg, rgba(76, 29, 149, 0.48), rgba(219, 39, 119, 0.24));
  box-shadow:
    0 14px 20px rgba(2, 6, 23, 0.34),
    0 0 18px rgba(192, 132, 252, 0.35),
    0 0 0 1px rgba(236, 72, 153, 0.22) inset;
  transform: translateY(-1px);
}

.chat-player-actions button:disabled {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
  border-color: rgba(196, 181, 253, 0.28);
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.4), rgba(76, 29, 149, 0.22));
  box-shadow: 0 8px 14px rgba(2, 6, 23, 0.22), 0 0 12px rgba(168, 85, 247, 0.14) inset;
}

@media (max-width: 600px) {
  .chat-player-actions {
    width: min(204px, calc(100vw - 16px));
    left: -4px;
  }
}

.chat-input-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.08);
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}

.chat-form input,
.chat-form button {
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 13px;
}

.chat-send-button {
  justify-self: end;
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
}

.chat-send-button span {
  transform: translateX(1px);
  font-size: 1rem;
}

.game-chat-panel .status {
  flex: 0 0 auto;
  margin: 0;
  min-height: 1.1em;
}

.page-chat-column,
.page-action-column {
  width: min(100%, 300px);
}

.page-chat-column .game-chat-panel,
.page-action-column .lobby-action-panel {
  width: 100%;
  margin-top: 0;
}

.page-chat-column .game-chat-panel {
  min-height: clamp(360px, 46vh, 540px);
}

.page-action-column .lobby-action-panel {
  min-height: 0;
}

@media (min-width: 1580px) {
  .page-chat-column .game-chat-panel {
    height: min(520px, 58vh);
    max-height: min(520px, 58vh);
  }
}

@media (min-width: 1580px) {
  #lobby {
    position: relative;
  }

  .lobby-page-chat,
  .lobby-page-actions {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    width: min(330px, calc((100vw - var(--lobby-main-width)) / 2 - 28px));
    min-height: 0;
  }

  .lobby-page-chat {
    right: calc(100% + 14px);
  }

  .lobby-page-actions {
    left: calc(100% + 14px);
  }

  .lobby-page-chat .game-chat-panel {
    height: 100%;
    max-height: none;
  }

  .lobby-page-chat .chat-messages-area {
    min-height: 0;
    max-height: none;
  }

  .lobby-page-actions .lobby-action-panel {
    grid-template-rows: auto repeat(4, minmax(38px, auto)) auto minmax(0, 1fr) auto;
    align-content: start;
    height: 100%;
    max-height: none;
    overflow: auto;
  }

  .lobby-page-actions .lobby-action-panel.no-guest-rename {
    grid-template-rows: auto repeat(3, minmax(38px, auto)) minmax(0, 1fr) auto;
  }

  .lobby-page-actions .lobby-action-panel > button,
  .lobby-page-actions .lobby-action-panel input,
  .lobby-page-actions .lobby-action-panel .rename-row button {
    min-height: 0;
  }

  .lobby-page-actions .lobby-action-panel .rename-row {
    min-height: 0;
  }

  .lobby-page-actions .lobby-action-panel .action-rename-row {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-content: stretch;
  }
}

@media (min-width: 1880px) {
  #game {
    position: relative;
  }

  .game-page-chat {
    position: absolute;
    top: 0;
    right: calc(100% + 14px);
    bottom: 0;
    z-index: 3;
    display: flex;
    width: min(300px, calc((100vw - 1400px) / 2 - 28px));
    min-height: 0;
  }

  .game-page-chat .game-chat-panel {
    height: 100%;
    max-height: none;
  }

  .game-page-chat .chat-messages-area {
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 1579px) {
  .page-chat-column,
  .page-action-column {
    margin-top: 12px;
  }
}

@media (min-width: 1580px) and (max-width: 1879px) {
  .game-page-chat {
    margin-top: 12px;
  }
}

.music-equalizer-bg {
  position: fixed;
  inset: auto 4vw 0;
  z-index: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  height: 34vh;
  pointer-events: none;
  opacity: 0.22;
  mask-image: linear-gradient(to top, black, transparent);
}

.music-equalizer-bg i {
  width: min(4vw, 42px);
  height: 18%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(to top, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.8), rgba(255,255,255,0.7));
  animation: eqIdle 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 1) * -0.17s);
}

.music-equalizer-bg i:nth-child(1) { --i: 1; }
.music-equalizer-bg i:nth-child(2) { --i: 2; }
.music-equalizer-bg i:nth-child(3) { --i: 3; }
.music-equalizer-bg i:nth-child(4) { --i: 4; }
.music-equalizer-bg i:nth-child(5) { --i: 5; }
.music-equalizer-bg i:nth-child(6) { --i: 6; }
.music-equalizer-bg i:nth-child(7) { --i: 7; }
.music-equalizer-bg i:nth-child(8) { --i: 8; }
.music-equalizer-bg i:nth-child(9) { --i: 9; }
.music-equalizer-bg i:nth-child(10) { --i: 10; }
.music-equalizer-bg i:nth-child(11) { --i: 11; }
.music-equalizer-bg i:nth-child(12) { --i: 12; }

body.music-playing .music-equalizer-bg i {
  animation-name: eqPlay;
  animation-duration: 0.95s;
}

@keyframes eqIdle {
  0%, 100% { height: 10%; opacity: 0.35; }
  50% { height: 34%; opacity: 0.72; }
}

@keyframes eqPlay {
  0%, 100% { height: 16%; transform: scaleY(0.85); }
  25% { height: 72%; transform: scaleY(1.05); }
  55% { height: 38%; }
  75% { height: 92%; }
}

body[data-visual-theme="vinyl"] {
  --bg: #050505;
  --panel: rgba(12, 10, 9, 0.88);
  --surface-rgb: 12, 10, 9;
  --surface-strong-rgb: 24, 20, 18;
  --accent: #d6b36a;
  --accent-rgb: 214, 179, 106;
  --accent-2: #fff1c8;
}

body[data-visual-theme="cyber"] {
  --bg: #06030a;
  --panel: rgba(18, 6, 16, 0.88);
  --surface-rgb: 18, 6, 16;
  --surface-strong-rgb: 35, 12, 32;
  --accent: #ff1f62;
  --accent-rgb: 255, 31, 98;
  --accent-2: #55f7ff;
}

body[data-visual-theme="retro"] {
  --bg: #160914;
  --panel: rgba(45, 20, 35, 0.88);
  --surface-rgb: 45, 20, 35;
  --surface-strong-rgb: 62, 30, 48;
  --accent: #ff8a3d;
  --accent-rgb: 255, 138, 61;
  --accent-2: #ffe66d;
}

body[data-visual-theme="minimal"] {
  --bg: #020202;
  --panel: rgba(8, 8, 8, 0.9);
  --surface-rgb: 8, 8, 8;
  --surface-strong-rgb: 22, 22, 22;
  --accent: #f5f5f5;
  --accent-rgb: 245, 245, 245;
  --accent-2: #bdbdbd;
}

body[data-visual-theme="aurora"] {
  --bg: #08051a;
  --panel: rgba(18, 12, 42, 0.88);
  --surface-rgb: 18, 12, 42;
  --surface-strong-rgb: 32, 22, 68;
  --accent-2: #d9c7ff;
}

body[data-visual-theme="ocean"] {
  --bg: #03131b;
  --panel: rgba(7, 28, 38, 0.88);
  --surface-rgb: 7, 28, 38;
  --surface-strong-rgb: 12, 48, 64;
  --accent-2: #c6f7ff;
}

body[data-visual-theme="forest"] {
  --bg: #04130d;
  --panel: rgba(9, 31, 21, 0.88);
  --surface-rgb: 9, 31, 21;
  --surface-strong-rgb: 17, 54, 37;
  --accent-2: #d9ffe8;
}

body[data-visual-theme="galaxy"] {
  --bg: #030014;
  --panel: rgba(12, 7, 38, 0.9);
  --surface-rgb: 12, 7, 38;
  --surface-strong-rgb: 28, 15, 68;
  --accent-2: #ff7bd5;
}

body[data-visual-theme="candy"] {
  --bg: #190717;
  --panel: rgba(45, 13, 43, 0.88);
  --surface-rgb: 45, 13, 43;
  --surface-strong-rgb: 74, 23, 64;
  --accent-2: #7dd3fc;
}

.player-stage {
  position: relative;
  display: grid;
  place-items: stretch;
  min-height: 0;
  isolation: isolate;
}

.player-stage .embed {
  width: 100%;
  height: 100%;
}

.vinyl-disc {
  position: absolute;
  z-index: -1;
  width: min(50vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(var(--accent-rgb), 0.92) 0 7%, #0a0a0f 7.5% 14%, transparent 14.5%),
    repeating-radial-gradient(circle at center, #15151d 0 6px, #050509 7px 12px);
  box-shadow: 0 0 55px rgba(var(--accent-rgb), 0.24), inset 0 0 28px rgba(255,255,255,0.08);
  opacity: 0.72;
  transform: scale(0.8);
  transition: transform 0.55s ease, opacity 0.55s ease;
}

.vinyl-disc span {
  position: absolute;
  inset: 13%;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.08);
}

.vinyl-disc.spinning {
  opacity: 0.98;
  transform: scale(1);
  animation: vinylSpin 3.4s linear infinite;
}

.vinyl-disc.slowing {
  animation: vinylSlow 1.4s ease-out;
}

@keyframes vinylSpin { to { rotate: 360deg; } }
@keyframes vinylSlow { from { rotate: 0deg; } to { rotate: 90deg; } }

.player-card .embed {
  position: relative;
  overflow: hidden;
}

.player-card .embed:not(.empty)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0 44%, rgba(255,255,255,0.14) 49%, transparent 54% 100%);
  animation: scanLine 2.8s linear infinite;
}

@keyframes scanLine { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

#sendBtn:not(:disabled) {
  animation: sendPulse 1.7s ease-in-out infinite;
}

@keyframes sendPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.34); }
  50% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); }
}

.reaction-burst {
  position: absolute;
  top: 16%;
  left: 50%;
  z-index: 5;
  font-size: clamp(2rem, 6vw, 4rem);
  animation: emojiFly 0.88s ease-out both;
  pointer-events: none;
  text-shadow: 0 10px 24px rgba(0,0,0,0.45);
}

@keyframes emojiFly {
  from { opacity: 0; transform: translate(-50%, 35px) scale(0.6) rotate(-10deg); }
  20% { opacity: 1; }
  to { opacity: 0; transform: translate(calc(-50% + 24px), -135px) scale(1.35) rotate(12deg); }
}

.vote-row.has-votes {
  position: relative;
  border-color: rgba(255, 31, 45, 0.55);
}

.vote-row.has-votes::after {
  content: "красная метка";
  color: var(--text);
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 31, 45, 0.84);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timer-ring.timer-critical {
  animation: timerShake 0.34s linear infinite;
}

.timer-ring .progress.danger {
  stroke: #ff1f2d;
  filter: drop-shadow(0 0 10px rgba(255,31,45,0.75));
}

@keyframes timerShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.share-actions,
.comment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.share-preview,
.postgame-panel {
  margin: 12px 0;
}

.share-card-mini,
.postgame-panel,
.final-comment {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.18), transparent 45%), rgba(255,255,255,0.045);
}

.share-card-mini {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.share-card-mini span,
.share-card-mini small,
.share-card-mini em,
.final-comments.empty {
  color: var(--muted);
}

.share-card-mini strong {
  font-size: clamp(1.35rem, 4vw, 2.1rem);
}

.postgame-panel {
  padding: 14px;
}

.final-comments {
  display: grid;
  gap: 8px;
}

.final-comment {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.final-comment span {
  color: var(--muted);
}


.role-pass {
  position: relative;
  overflow: hidden;
}

@media (max-width: 620px) {
  .share-actions,
  .comment-form {
    grid-template-columns: 1fr;
  }

  .vinyl-disc {
    width: min(84vw, 320px);
  }
}

body[data-screen="game"] #roleTitle {
  position: relative;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.18), rgba(255,255,255,0.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  text-transform: uppercase;
}

body[data-screen="game"] #roleTitle::before {
  content: "ACCESS GRANTED";
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent-2);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

body[data-screen="game"][data-role="spy"] #roleTitle::before {
  content: "CLASSIFIED";
  color: #ff8a8a;
}

body[data-role="civilian"] {
  --accent: #2f80ff;
  --accent-rgb: 47, 128, 255;
  --accent-2: #e6f2ff;
}

body[data-role="spy"] {
  --accent: #e50914;
  --accent-rgb: 229, 9, 20;
  --accent-2: #fff;
}

/* Full-screen result card and track history overlays. */
.result-shot-open {
  overflow: hidden;
}

.result-shot-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.5vw, 28px);
  background: radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb), 0.28), transparent 26rem), rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(14px);
}

.result-shot-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.result-shot-toolbar {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, 1040px);
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(10, 10, 14, 0.88);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.42);
  transform: translateX(-50%);
}

.result-shot-toolbar h2 {
  font-size: clamp(1.6rem, 4vw, 3rem);
}

.result-shot-toolbar p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
}

.result-shot-image {
  justify-self: center;
  align-self: center;
  max-width: min(100%, 1040px);
  max-height: min(72dvh, 920px);
  border-radius: 26px;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.58);
  object-fit: contain;
}

.track-history-shell {
  align-content: stretch;
}

.track-history-fullscreen-card {
  align-self: stretch;
  width: min(100%, 1040px);
  min-height: 0;
  margin-top: clamp(132px, 17vh, 178px);
  padding: clamp(12px, 2vw, 20px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)), rgba(10, 10, 14, 0.88);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.58);
  overflow: hidden;
}

.track-history-fullscreen {
  max-height: calc(100dvh - clamp(180px, 24vh, 240px));
  padding-right: 4px;
}

.track-history-fullscreen .history-row {
  grid-template-columns: minmax(120px, 0.7fr) minmax(150px, 1fr) minmax(120px, 0.8fr) minmax(130px, auto);
  align-items: center;
  gap: 10px;
  padding: 14px;
}

.share-actions {
  grid-template-columns: 1fr;
}

/* Keep the sound button compact after moving detailed controls into the panel. */
.volume-control .sound-toggle {
  min-height: 35px;
  padding: 6px 10px;
  gap: 0.44rem;
  font-size: 0.8rem;
}

.volume-control .sound-toggle strong {
  font-size: 0.59rem;
}

/* Return to the plain embedded music player: no decorative vinyl or scan glare. */
.vinyl-disc,
.player-card .embed:not(.empty)::before,
.cinematic-card::before {
  display: none;
  animation: none;
}

/* Remove the red vote marker and keep voting rows neutral. */
.vote-row.has-votes {
  border-color: var(--line);
}

.vote-row.has-votes::after {
  content: none;
}

/* Softer final-five-seconds timer movement. */
.timer-ring.timer-critical {
  animation: timerShake 0.7s ease-in-out infinite;
}

@keyframes timerShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-0.75px); }
  75% { transform: translateX(0.75px); }
}

@media (max-width: 680px) {
  .result-shot-toolbar {
    display: grid;
  }

  .result-shot-image {
    max-height: 64dvh;
  }
}

/* Results-only equalizer: keep the animated bars out of setup/game screens. */
.music-equalizer-bg {
  display: none;
}

body[data-screen="results"] {
  --result-radius: 18px;
  --result-pad: 16px;
  --result-line: rgba(255, 255, 255, 0.088);
}

body[data-screen="results"] .music-equalizer-bg {
  display: flex;
  opacity: 0.14;
}

body[data-screen="results"] .noise {
  opacity: 0.11;
}

body[data-screen="results"] .app-shell {
  width: min(1180px, calc(100% - 40px));
  padding: 14px 0;
}

body[data-screen="results"] #results {
  position: relative;
  display: grid;
  width: 100%;
  gap: 16px;
  padding: clamp(14px, 1.35vw, 21px);
  border-color: var(--result-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 18%, rgba(var(--accent-rgb), 0.07), transparent 30rem),
    radial-gradient(circle at 78% 8%, rgba(255, 255, 255, 0.035), transparent 22rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.02) 58%),
    rgba(8, 8, 12, 0.9);
  box-shadow: 0 24px 74px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

body[data-screen="results"] #results::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.055), transparent 34%),
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  mask-image: radial-gradient(circle at 20% 14%, black, transparent 74%);
  opacity: 0.28;
}

body[data-screen="results"] #results > * {
  position: relative;
  z-index: 1;
}

.results-hero,
.results-main,
.results-side {
  min-width: 0;
}

.results-hero {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: clamp(16px, 1.55vw, 20px);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% -4%, rgba(var(--accent-rgb), 0.085), transparent 23rem),
    linear-gradient(160deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.021) 64%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 34px rgba(0, 0, 0, 0.22);
}

body[data-screen="results"] .eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

body[data-screen="results"] #resultTitle {
  max-width: 11.5ch;
  font-size: clamp(2.55rem, 4.05vw, 4.45rem);
  line-height: 0.9;
  letter-spacing: -0.068em;
  text-wrap: balance;
  background: linear-gradient(108deg, #fff 8%, #f3f3f3 28%, var(--accent) 66%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.1);
}

body[data-screen="results"] #resultText.lead.small {
  max-width: 27rem;
  margin: 0;
  color: rgba(248, 246, 255, 0.74);
  font-size: clamp(0.88rem, 0.95vw, 0.95rem);
  line-height: 1.38;
}

body[data-screen="results"] .share-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 4px 0 0;
}


body[data-screen="results"] #restartBtn {
  margin-top: 4px;
}

.results-main {
  display: grid;
  align-content: start;
  gap: 12px;
}

body[data-screen="results"] .share-preview,
body[data-screen="results"] .result-breakdown,
body[data-screen="results"] .postgame-panel,
body[data-screen="results"] .result-history,
body[data-screen="results"] .result-score-panel {
  margin: 0;
}

body[data-screen="results"] .share-card-mini,
body[data-screen="results"] .breakdown-card,
body[data-screen="results"] .postgame-panel,
body[data-screen="results"] .result-history,
body[data-screen="results"] .result-score-panel {
  border: 1px solid var(--result-line);
  border-radius: var(--result-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.018)),
    rgba(12, 12, 18, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px);
}

body[data-screen="results"] .share-card-mini {
  gap: 6px;
  padding: 14px;
  border-color: rgba(var(--accent-rgb), 0.13);
  background:
    radial-gradient(circle at 86% 12%, rgba(var(--accent-rgb), 0.12), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(14, 14, 20, 0.68);
}

body[data-screen="results"] .share-card-mini span,
body[data-screen="results"] .share-card-mini small,
body[data-screen="results"] .share-card-mini em {
  color: rgba(248, 246, 255, 0.7);
}

body[data-screen="results"] .share-card-mini strong {
  font-size: clamp(1.55rem, 3.3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

body[data-screen="results"] .result-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(92px, auto);
  gap: 10px;
}

body[data-screen="results"] .breakdown-card {
  grid-template-rows: auto minmax(2.1em, 1fr) auto;
  align-items: start;
  gap: 5px;
  min-height: 92px;
  padding: 13px;
}


body[data-screen="results"] .breakdown-card span {
  align-self: start;
}

body[data-screen="results"] .breakdown-card strong {
  align-self: center;
}

body[data-screen="results"] .breakdown-card small {
  align-self: end;
}

body[data-screen="results"] .results-side .vote-row span,
body[data-screen="results"] .final-comment span {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-screen="results"] .final-comment {
  gap: 3px;
  font-size: 0.9rem;
}

body[data-screen="results"] .comment-form input {
  min-width: 0;
}

body[data-screen="results"] .breakdown-card:first-child {
  grid-column: 1 / -1;
  min-height: 98px;
  border-color: rgba(var(--accent-rgb), 0.12);
  background:
    radial-gradient(circle at 92% 0%, rgba(var(--accent-rgb), 0.095), transparent 18rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
    rgba(14, 14, 20, 0.72);
}

body[data-screen="results"] .breakdown-card span,
body[data-screen="results"] .breakdown-card small {
  color: rgba(248, 246, 255, 0.62);
}

body[data-screen="results"] .breakdown-card strong {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.12;
}

body[data-screen="results"] .breakdown-card:first-child strong {
  font-size: clamp(1.18rem, 1.8vw, 1.55rem);
}

.results-side {
  display: grid;
  align-content: start;
  gap: 14px;
}

body[data-screen="results"] .results-side .postgame-panel,
body[data-screen="results"] .results-side .result-history,
body[data-screen="results"] .results-side .result-score-panel {
  padding: 13px;
  opacity: 0.94;
}

body[data-screen="results"] .results-side .panel-title {
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body[data-screen="results"] .results-side .panel-title strong {
  font-size: 0.95rem;
}

body[data-screen="results"] .results-side .panel-title span {
  color: rgba(248, 246, 255, 0.46);
  font-size: 0.68rem;
}

body[data-screen="results"] .comment-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin: 0 0 10px;
}

body[data-screen="results"] input,
body[data-screen="results"] button {
  min-height: 36px;
}

body[data-screen="results"] input {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
}

body[data-screen="results"] button {
  padding: 8px 12px;
  border-radius: 12px;
}

body[data-screen="results"] .secondary {
  background: rgba(255, 255, 255, 0.055);
}

body[data-screen="results"] .primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark) 68%);
  box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.24);
}

body[data-screen="results"] .vote-list,
body[data-screen="results"] .final-comments {
  gap: 7px;
  margin: 0;
}

body[data-screen="results"] #resultVoteDetails,
body[data-screen="results"] #resultVotes,
body[data-screen="results"] .final-comments {
  max-height: 20vh;
  overflow: auto;
  padding-right: 2px;
}

body[data-screen="results"] .vote-row,
body[data-screen="results"] .final-comment {
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.032);
}

body[data-screen="results"] .vote-row.static {
  min-height: 0;
}

body[data-screen="results"] .vote-row.hit-spy {
  border-color: rgba(var(--accent-rgb), 0.18);
  background: rgba(var(--accent-rgb), 0.075);
  box-shadow: inset 2px 0 0 rgba(var(--accent-rgb), 0.42);
}

body[data-screen="results"] .final-comments.empty {
  color: rgba(248, 246, 255, 0.48);
}

body[data-screen="results"] .share-card-mini:hover,
body[data-screen="results"] .breakdown-card:hover,
body[data-screen="results"] .postgame-panel:hover,
body[data-screen="results"] .result-history:hover,
body[data-screen="results"] .result-score-panel:hover {
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 16px 38px rgba(0, 0, 0, 0.22);
}

@media (min-width: 940px) {
  body[data-screen="results"] #results {
    grid-template-columns: minmax(310px, 3.2fr) minmax(360px, 4.15fr) minmax(300px, 3.15fr);
    align-items: start;
    gap: 16px;
    max-height: min(86dvh, 760px);
    overflow: auto;
  }

  .results-main,
  .results-side {
    min-height: 0;
  }

  .results-hero {
    position: sticky;
    top: 0;
    min-height: 0;
  }

  body[data-screen="results"] .share-actions {
    margin-top: 6px;
  }
}

@media (max-width: 1120px) and (min-width: 940px) {
  body[data-screen="results"] #results {
    grid-template-columns: minmax(290px, 3.15fr) minmax(330px, 4.1fr) minmax(280px, 3.05fr);
  }

  body[data-screen="results"] .result-breakdown {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 939px) {
  body[data-screen="results"] .app-shell {
    width: min(100% - 20px, 760px);
  }

  body[data-screen="results"] #resultTitle {
    max-width: 100%;
    font-size: clamp(2.8rem, 13.5vw, 4.65rem);
    line-height: 0.9;
  }
}

@media (max-width: 620px) {
  body[data-screen="results"] {
    --result-radius: 20px;
  }

  body[data-screen="results"] .app-shell {
    width: min(100% - 16px, 760px);
    padding: 8px 0;
  }

  body[data-screen="results"] #results {
    gap: 14px;
    padding: 12px;
    border-radius: 22px;
  }

  .results-hero {
    gap: 9px;
    padding: 16px;
    border-radius: 20px;
  }

  body[data-screen="results"] .result-breakdown,
  body[data-screen="results"] .comment-form {
    grid-template-columns: 1fr;
  }

  body[data-screen="results"] .share-card-mini,
  body[data-screen="results"] .breakdown-card,
  body[data-screen="results"] .results-side .postgame-panel,
  body[data-screen="results"] .results-side .result-history,
  body[data-screen="results"] .results-side .result-score-panel {
    padding: 12px;
  }
}

.result-shot-image {
  max-height: min(66dvh, 860px);
  transform: translateY(clamp(30px, 5vh, 72px));
}

@media (max-width: 680px) {
  .track-history-toolbar {
    position: static;
    flex-direction: column;
    width: 100%;
    transform: none;
  }

  .track-history-fullscreen-card {
    margin-top: 12px;
  }

  .track-history-fullscreen {
    max-height: calc(100dvh - 230px);
  }

  .track-history-fullscreen .history-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .result-shot-image {
    max-height: 58dvh;
    transform: translateY(42px);
  }
}

/* Onboarding and mobile game navigation */
.how-to-play-card {
  width: min(100%, 980px);
  padding: clamp(20px, 3vw, 34px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(96, 165, 250, 0.18), transparent 18rem),
    radial-gradient(circle at 86% 78%, rgba(255, 31, 45, 0.14), transparent 18rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(8, 7, 18, 0.96);
}

.how-to-play-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(255, 255, 255, 0.045) 11.2% 11.5%, transparent 11.8% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 32%);
  opacity: 0.55;
}

.how-to-hero,
.how-to-board,
.how-to-intel,
.how-to-play-card .actions {
  position: relative;
  z-index: 1;
}

.how-to-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}

.how-to-hero .auth-modal-text {
  max-width: 39rem;
  margin-bottom: 0;
}

.how-to-hero-orb {
  display: grid;
  place-items: center;
  width: clamp(118px, 16vw, 154px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(var(--accent-rgb), 0.34), transparent 54%),
    repeating-radial-gradient(circle, rgba(255,255,255,0.16) 0 2px, transparent 3px 10px),
    rgba(0, 0, 0, 0.38);
  box-shadow: 0 0 52px rgba(var(--accent-rgb), 0.28), inset 0 0 24px rgba(255,255,255,0.08);
  animation: onboarding-pulse 3.2s ease-in-out infinite;
}

.how-to-hero-orb span {
  font-size: clamp(2rem, 4vw, 3rem);
}

.how-to-hero-orb b {
  color: rgba(248, 246, 255, 0.72);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
}

.how-to-board {
  display: grid;
  grid-template-columns: 1.05fr 32px 1.05fr 32px 1.42fr;
  grid-template-areas:
    "room link1 role link2 track"
    ". . discuss link4 spy";
  gap: 14px;
  align-items: stretch;
  margin: 18px 0;
}

.how-step {
  position: relative;
  min-height: 168px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--accent-rgb), 0.18), transparent 52%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.028));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 42px rgba(0,0,0,0.24);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.how-step:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 54px rgba(0,0,0,0.34);
}

.how-step::after {
  content: "";
  position: absolute;
  inset: auto -28px -44px auto;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
  filter: blur(2px);
}

.step-room { grid-area: room; }
.step-role { grid-area: role; }
.step-track { grid-area: track; }
.step-discuss { grid-area: discuss; margin-top: 12px; }
.step-spy { grid-area: spy; margin-top: 12px; }

.step-index {
  color: rgba(248, 246, 255, 0.46);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.step-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.how-step strong {
  color: var(--text);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.how-step p {
  margin: 0;
  color: rgba(248, 246, 255, 0.68);
  font-size: 0.84rem;
  line-height: 1.42;
}

.step-track {
  min-height: 224px;
  overflow: visible;
  border-color: rgba(var(--accent-rgb), 0.34);
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,0.18), transparent 7rem),
    radial-gradient(circle at 22% 2%, rgba(var(--accent-rgb), 0.34), transparent 13rem),
    linear-gradient(145deg, rgba(139, 92, 246, 0.22), rgba(255, 255, 255, 0.035));
  box-shadow: 0 0 56px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.13);
}

.step-track::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 2px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.9), rgba(96, 165, 250, 0.45));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.44);
}

.step-spy {
  border-color: rgba(255, 31, 45, 0.36);
  background:
    radial-gradient(circle at 78% 0%, rgba(255, 31, 45, 0.26), transparent 12rem),
    linear-gradient(145deg, rgba(255, 31, 45, 0.12), rgba(255, 255, 255, 0.028));
}

.step-discuss {
  background:
    radial-gradient(circle at 24% 0%, rgba(96, 165, 250, 0.17), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
}

.track-wave {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 42px;
  margin-top: auto;
}

.track-wave span {
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--text), var(--accent));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.34);
  animation: wave-rise 1.1s ease-in-out infinite;
}

.track-wave span:nth-child(1) { height: 38%; animation-delay: -0.1s; }
.track-wave span:nth-child(2) { height: 78%; animation-delay: -0.32s; }
.track-wave span:nth-child(3) { height: 52%; animation-delay: -0.5s; }
.track-wave span:nth-child(4) { height: 92%; animation-delay: -0.2s; }
.track-wave span:nth-child(5) { height: 44%; animation-delay: -0.62s; }

.flow-link {
  position: relative;
  align-self: center;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.9));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.44);
}

.flow-link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(255,255,255,0.86);
  border-right: 2px solid rgba(255,255,255,0.86);
  transform: translateY(-50%) rotate(45deg);
}

.flow-link-one { grid-area: link1; }
.flow-link-two { grid-area: link2; }
.flow-link-three {
  display: none;
}
.flow-link-four {
  grid-area: link4;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.1), rgba(255, 31, 45, 0.9));
  box-shadow: 0 0 20px rgba(255, 31, 45, 0.34);
}

.how-to-intel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.how-to-intel div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.how-to-intel b {
  color: rgba(248, 246, 255, 0.95);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.how-to-intel span {
  color: rgba(248, 246, 255, 0.62);
  font-size: 0.82rem;
}

.cinematic-demo .cinematic-card {
  width: min(100%, 720px);
  padding: clamp(22px, 4.5vw, 42px);
  background:
    radial-gradient(circle at 50% 12%, rgba(var(--accent-rgb), 0.28), transparent 16rem),
    radial-gradient(circle at 88% 76%, rgba(255, 31, 45, 0.18), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.032)),
    rgba(7, 6, 14, 0.96);
}

.cinematic-demo .cinematic-vinyl {
  display: none;
}

.cinematic-demo .cinematic-text {
  max-width: 42rem;
}

.cinematic-demo .cinematic-meta {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.demo-sim {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    rgba(255,255,255,0.045);
  background-size: 34px 34px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 28px 70px rgba(0,0,0,0.38);
}

.demo-sim::before {
  content: "";
  position: absolute;
  inset: -35% -20% auto;
  height: 160px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  transform: rotate(-8deg);
  animation: sim-scan 3.6s ease-in-out infinite;
}

.demo-player,
.demo-suspicion,
.demo-vote-pulse {
  position: relative;
  z-index: 1;
}

.demo-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.28);
  text-align: left;
}

.demo-vinyl {
  position: relative;
  width: 86px;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--text) 0 7px, var(--accent) 8px 15px, transparent 16px),
    repeating-radial-gradient(circle, rgba(255,255,255,0.18) 0 2px, rgba(255,255,255,0.035) 3px 8px),
    #050507;
  box-shadow: 0 0 46px rgba(var(--accent-rgb), 0.34);
  animation: vinyl-spin 2.7s linear infinite;
}

.demo-vinyl span {
  position: absolute;
  inset: 14px auto auto 58px;
  width: 44px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.8);
  transform: rotate(25deg);
}

.demo-now-playing {
  display: grid;
  gap: 3px;
}

.demo-now-playing small,
.demo-now-playing span {
  color: rgba(248, 246, 255, 0.58);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-now-playing strong {
  color: var(--text);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: -0.045em;
}

.demo-reactions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
}

.demo-reactions span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,0.1);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  font-size: 1.35rem;
  animation: reaction-pop 2.4s ease-in-out infinite;
}

.demo-reactions span:nth-child(2) { animation-delay: 0.18s; }
.demo-reactions span:nth-child(3) { animation-delay: 0.36s; }
.demo-reactions span:nth-child(4) { animation-delay: 0.54s; }

.demo-suspicion {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 31, 45, 0.24);
  border-radius: 18px;
  background: rgba(255, 31, 45, 0.075);
  text-align: left;
}

.demo-suspicion b {
  color: var(--text);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-suspicion div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.11);
}

.demo-suspicion i {
  display: block;
  width: var(--level);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #ff1f2d);
  box-shadow: 0 0 18px rgba(255, 31, 45, 0.46);
  animation: suspicion-fill 2.8s ease-in-out infinite;
}

.demo-vote-pulse {
  display: inline-flex;
  justify-self: center;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 31, 45, 0.22), rgba(var(--accent-rgb), 0.18));
  box-shadow: 0 0 34px rgba(255, 31, 45, 0.24);
  animation: vote-pulse 1.7s ease-in-out infinite;
}

.demo-vote-pulse strong {
  color: var(--text);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@keyframes onboarding-pulse {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.035); filter: saturate(1.25); }
}

@keyframes wave-rise {
  0%, 100% { transform: scaleY(0.72); opacity: 0.72; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes reaction-pop {
  0%, 100% { transform: translateY(8px) scale(0.92); opacity: 0.68; }
  35%, 70% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes suspicion-fill {
  0%, 100% { width: 48%; }
  55% { width: var(--level); }
}

@keyframes vote-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(255, 31, 45, 0.18); }
  50% { transform: scale(1.035); box-shadow: 0 0 44px rgba(255, 31, 45, 0.36); }
}

@keyframes sim-scan {
  0%, 100% { transform: translateY(-40px) rotate(-8deg); opacity: 0; }
  45%, 65% { transform: translateY(190px) rotate(-8deg); opacity: 1; }
}

.mobile-game-nav,
.mobile-turn-banner {
  display: none;
}

@media (max-width: 900px) {
  .how-to-hero {
    grid-template-columns: 1fr;
  }

  .how-to-hero-orb {
    display: none;
  }

  .how-to-board {
    grid-template-columns: 1fr;
    grid-template-areas:
      "room"
      "link1"
      "role"
      "link2"
      "track"
      "discuss"
      "link4"
      "spy";
  }

  .how-step,
  .step-track {
    min-height: 0;
  }

  .step-discuss,
  .step-spy {
    margin-top: 0;
  }

  .flow-link {
    width: 2px;
    height: 24px;
    justify-self: center;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.9));
  }

  .flow-link::after {
    right: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(50%) rotate(135deg);
  }

  .how-to-intel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .how-to-play-card,
  .cinematic-demo .cinematic-card {
    max-height: calc(100dvh - 28px);
    overflow: auto;
  }

  .demo-player {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .demo-vinyl {
    margin: 0 auto;
  }
}

@media (max-width: 920px) {
  body[data-screen="game"] {
    padding-bottom: 88px;
    scroll-padding-top: 14px;
    scroll-padding-bottom: 110px;
  }

  body[data-screen="game"] .track-form {
    position: sticky;
    bottom: 78px;
    z-index: 9;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(7, 6, 14, 0.88);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(18px);
  }

  body[data-screen="game"] .player-card {
    order: -1;
  }

  body[data-screen="game"] .mobile-game-nav {
    position: fixed;
    right: 12px;
    bottom: 10px;
    left: 12px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(7, 6, 14, 0.88);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(20px);
  }

  .mobile-game-nav button {
    display: grid;
    min-height: 50px;
    gap: 2px;
    place-items: center;
    padding: 6px 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .mobile-game-nav button span {
    font-size: 1.1rem;
  }

  body[data-screen="game"] .mobile-turn-banner:not(.hidden) {
    position: fixed;
    right: 16px;
    bottom: 84px;
    left: 16px;
    z-index: 21;
    display: block;
    min-height: 48px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark) 60%, var(--accent-2));
    box-shadow: 0 18px 48px rgba(var(--accent-rgb), 0.35);
    color: var(--text);
    font-weight: 900;
    text-align: center;
  }
}

@media (min-width: 1120px) {
  body[data-screen="lobby"] .app-shell {
    width: min(100% - 18px, 1480px);
    height: 100dvh;
    min-height: 0;
    padding: 8px 0;
  }

  #lobby.lobby-card {
    display: grid;
    width: 100%;
    max-height: calc(100dvh - 16px);
    grid-template-columns: minmax(220px, 0.85fr) minmax(480px, 1.6fr) minmax(260px, 0.95fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "header header header"
      "chat main actions";
    gap: 10px;
    overflow: hidden;
  }

  #lobby .lobby-header {
    grid-area: header;
    margin: 0;
  }

  #lobby .lobby-grid {
    grid-area: main;
    min-height: 0;
    margin: 0;
    grid-template-columns: minmax(180px, 0.82fr) minmax(250px, 1.18fr);
  }

  #lobby .lobby-column,
  #lobby .lobby-action-panel,
  #lobby .game-chat-panel {
    height: 100%;
    min-height: 0;
  }

  #lobby .page-chat-column,
  #lobby .page-action-column {
    position: static;
    inset: auto;
    display: flex;
    width: 100%;
    min-height: 0;
    margin: 0;
  }

  #lobby .lobby-page-chat {
    grid-area: chat;
  }

  #lobby .lobby-page-actions {
    grid-area: actions;
  }

  #lobby .page-chat-column .game-chat-panel {
    min-height: 0;
    max-height: none;
  }

  #lobby .lobby-page-actions .lobby-action-panel {
    grid-template-rows: auto repeat(4, minmax(32px, auto)) auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 9px;
    overflow: visible;
  }

  #lobby .lobby-page-actions .lobby-action-panel.no-guest-rename {
    grid-template-rows: auto repeat(3, minmax(32px, auto)) minmax(0, 1fr) auto;
  }

  #lobby .action-settings-panel {
    max-height: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 7px;
    overflow: visible;
  }

  #lobby .setting-control-wide {
    grid-column: 1 / -1;
  }

  #lobby .setting-control {
    gap: 2px;
    padding: 5px;
    border-radius: 12px;
  }

  #lobby .setting-control span,
  #lobby .setting-control small,
  #lobby .settings-title span,
  #lobby .panel-title span {
    font-size: 0.62rem;
    line-height: 1.15;
  }

  #lobby .setting-control small {
    display: none;
  }

  #lobby .settings-title strong,
  #lobby .panel-title strong {
    font-size: 0.86rem;
  }

  #lobby .settings-title {
    gap: 6px;
    padding-bottom: 0;
  }

  #lobby .game-settings-title {
    margin-top: 1px;
    padding-top: 5px;
  }

  #lobby.lobby-card button,
  #lobby.lobby-card input,
  #lobby.lobby-card select {
    min-height: 32px;
  }

  #lobby.lobby-card button,
  #lobby.lobby-card input,
  #lobby.lobby-card select {
    padding: 6px 8px;
  }

  #lobby .action-rename-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 6px;
    padding: 6px;
  }

  #lobby .action-rename-row #renameInput,
  #lobby .action-rename-row #renameBtn {
    order: initial;
  }

  #lobby .invite-tools,
  #lobby .players-list,
  #lobby .lobby-players {
    gap: 7px;
  }

  #lobby .qr-wrap {
    padding: 7px;
  }

  #lobby .lobby-invite #inviteQr {
    width: min(145px, 100%);
  }

  #lobby .player-row {
    gap: 7px;
    padding: 7px;
  }
}

/* Premium one-screen Create Lobby command center */
body[data-screen="createLobbySetup"] {
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 14% 16%, rgba(var(--accent-rgb), 0.32), transparent 30rem),
    radial-gradient(circle at 86% 22%, rgba(var(--accent-rgb), 0.18), transparent 26rem),
    radial-gradient(circle at 50% 90%, rgba(var(--accent-rgb), 0.1), transparent 28rem),
    var(--bg);
}

body[data-screen="createLobbySetup"] .app-shell {
  width: min(1420px, calc(100% - 32px));
  padding: clamp(6px, 1vh, 10px) 0;
}

.create-lobby-card {
  position: relative;
  isolation: isolate;
  width: min(100%, 1320px);
  overflow: visible;
  padding: clamp(10px, 1.05vw, 16px);
  border-color: var(--theme-line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 5%, rgba(var(--accent-rgb), 0.2), transparent 26rem),
    radial-gradient(circle at 86% 14%, rgba(var(--accent-rgb), 0.13), transparent 24rem),
    linear-gradient(135deg, color-mix(in srgb, var(--text) 11.2%, transparent), color-mix(in srgb, var(--text) 2.8%, transparent)),
    rgba(var(--surface-rgb), 0.91);
  box-shadow:
    0 34px 120px color-mix(in srgb, var(--bg) 60%, transparent),
    0 0 90px var(--theme-glow),
    inset 0 1px 0 color-mix(in srgb, var(--text) 13%, transparent);
  text-align: left;
}

.create-lobby-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, var(--theme-glow), transparent) top / 100% 1px no-repeat,
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--text) 6%, transparent), transparent 42%);
  pointer-events: none;
}

.create-lobby-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(660px, 1.28fr);
  grid-template-rows: auto auto auto auto;
  gap: clamp(7px, 0.85vw, 11px);
  align-items: start;
}

.create-lobby-header,
.create-lobby-layout {
  grid-column: 1 / -1;
}

.create-lobby-header {
  align-items: center;
  gap: 12px;
  padding: 0 4px;
}

.create-lobby-header h2 {
  font-size: clamp(1.75rem, 3vw, 3.15rem);
  text-shadow: 0 0 34px rgba(var(--accent-rgb), 0.22);
}

.create-lobby-header .lead.small {
  max-width: 760px;
  margin: 4px 0 0;
  line-height: 1.28;
}

.create-lobby-layout {
  display: contents;
}

.create-lobby-preview {
  grid-column: 1;
  grid-row: 2 / 4;
  align-self: stretch;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  align-content: start;
  gap: clamp(7px, 0.9vh, 10px);
  min-height: clamp(360px, 45vh, 470px);
  overflow: hidden;
  padding: clamp(10px, 1.05vw, 14px);
  border: 1px solid var(--theme-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 14% 0%, rgba(var(--accent-rgb), 0.46), transparent 36%),
    radial-gradient(circle at 86% 22%, rgba(var(--accent-rgb), 0.2), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--text) 12%, transparent), color-mix(in srgb, var(--text) 3.5%, transparent));
  box-shadow:
    0 28px 76px color-mix(in srgb, var(--bg) 46%, transparent),
    0 0 56px var(--theme-glow-soft),
    inset 0 1px 0 color-mix(in srgb, var(--text) 14%, transparent);
}

.create-lobby-preview::before,
.create-lobby-preview::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.create-lobby-preview::before {
  inset: -30%;
  background: conic-gradient(from 120deg, transparent, var(--theme-glow), transparent, var(--theme-glow-soft), transparent);
  animation: preview-aurora 9s linear infinite;
}

.create-lobby-preview::after {
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), color-mix(in srgb, var(--bg) 26%, transparent)),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--text) 8%, transparent), transparent 44%);
}

.preview-scanline {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--text) 18%, transparent) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
}

.preview-topline,
.preview-stat-grid,
.preview-mode-card,
.preview-title-stack,
.preview-note {
  position: relative;
  z-index: 1;
}

.preview-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.preview-topline .eyebrow { margin: 0; }

.visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  padding: 8px 11px;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.54);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 22px var(--theme-active-bg);
  backdrop-filter: blur(14px);
}

.visibility-badge i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
}

.visibility-badge.closed i {
  background: var(--accent);
  opacity: 0.52;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.62);
}

.preview-title-stack {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 6px;
}

.preview-kicker {
  color: var(--theme-text-faint);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.create-lobby-preview strong {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  min-height: 1.8em;
  color: var(--text);
  font-size: clamp(1.8rem, 3vw, 3.1rem);
  line-height: 0.98;
  letter-spacing: -0.07em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-shadow: 0 0 34px var(--theme-glow-strong);
}

.create-lobby-preview span#createLobbyPreviewMeta {
  display: block;
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 84%, transparent);
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.preview-mode-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--theme-line-strong);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg) 28%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent), 0 0 30px var(--theme-glow-soft);
  backdrop-filter: blur(16px);
}

.mode-pulse {
  width: 36px;
  height: 36px;
  border-radius: 16px;
  background: radial-gradient(circle, var(--text) 0 12%, var(--accent) 15% 46%, transparent 50%);
  box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.55);
  animation: mode-pulse 1.8s ease-in-out infinite;
}

.preview-mode-card small,
.preview-stat-grid small,
.preview-note { color: var(--muted); }

.preview-mode-card small,
.preview-stat-grid small {
  display: block;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preview-mode-card b {
  display: block;
  margin-top: 3px;
  font-size: 1.15rem;
}

.preview-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.preview-stat-grid div {
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid var(--theme-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 25%, transparent);
  text-align: center;
  backdrop-filter: blur(14px);
}

.preview-stat-grid span {
  display: block;
  color: var(--text);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 950;
  line-height: 1;
}

.preview-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--theme-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 20%, transparent);
  font-size: 0.81rem;
  line-height: 1.42;
}

.create-settings-column {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 0.85vw, 11px);
  align-content: start;
  overflow: visible;
}

.create-settings-group {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  overflow: visible;
  padding: clamp(10px, 1.05vw, 14px);
  border: 1px solid var(--theme-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, var(--theme-glow-soft), transparent 42%),
    var(--theme-panel-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent), 0 18px 42px color-mix(in srgb, var(--bg) 23%, transparent);
  backdrop-filter: blur(18px);
}

.create-settings-group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, color-mix(in srgb, var(--text) 9%, transparent), transparent 36%, rgba(var(--accent-rgb),0.08));
  opacity: 0.55;
  pointer-events: none;
}

.room-group {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.room-group .setting-control:not(.setting-control-wide) {
  grid-column: auto;
  min-height: 100%;
}

.match-group,
.advanced-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.create-settings-group .settings-title,
.create-settings-group .setting-control {
  position: relative;
  z-index: 1;
}

.create-settings-group .settings-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 20px;
  padding-bottom: 0;
}

.create-settings-group .settings-title strong {
  color: var(--text);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.create-settings-group .settings-title span {
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.create-settings-group .setting-control {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--theme-line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg) 21%, transparent);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

.create-settings-group .setting-control:hover,
.create-settings-group .setting-control:focus-within {
  transform: translateY(-1px);
  border-color: var(--theme-line-strong);
  background: rgba(var(--surface-rgb), 0.68);
  box-shadow: 0 0 24px var(--theme-glow-soft);
}

.create-settings-group .setting-control span {
  margin-bottom: 0;
  color: var(--theme-text-soft);
  font-size: 0.67rem;
  letter-spacing: 0.11em;
}

.create-settings-group .setting-control small {
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 74%, transparent);
  font-size: 0.63rem;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-settings-group input,
.create-settings-group select,
.custom-select-trigger {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  background: var(--theme-control-bg);
  color: var(--text);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}

.create-settings-group input::placeholder { color: color-mix(in srgb, var(--muted) 54%, transparent); }

.create-settings-group input:hover,
.custom-select-trigger:hover {
  border-color: var(--theme-line-strong);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent), 0 0 18px var(--theme-glow-soft);
}

.create-settings-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--theme-active-bg), 0 0 24px var(--theme-active-bg);
}

.custom-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.custom-select {
  position: relative;
  min-width: 0;
  z-index: 2;
}

.custom-select.open { z-index: 10020; }

.custom-select-trigger {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 850;
  text-align: left;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.custom-select-trigger span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-trigger::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 2px solid color-mix(in srgb, var(--text) 72%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--text) 72%, transparent);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.custom-select.open .custom-select-trigger,
.custom-select-trigger:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--theme-active-bg), 0 0 28px var(--theme-active-bg);
  outline: none;
}

.custom-select.open .custom-select-trigger::after {
  border-color: var(--text);
  transform: translateY(2px) rotate(225deg);
}

.custom-select-menu {
  position: fixed;
  z-index: 10010;
  top: 0;
  left: var(--custom-select-menu-left, 0);
  width: var(--custom-select-menu-width, 220px);
  max-height: var(--custom-select-menu-max-height, 260px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--theme-line-strong);
  border-radius: 17px;
  background:
    radial-gradient(circle at top left, var(--theme-glow), transparent 42%),
    linear-gradient(145deg, var(--theme-surface-strong), rgba(var(--surface-rgb), 0.98));
  box-shadow: 0 24px 54px color-mix(in srgb, var(--bg) 62%, transparent), 0 0 38px var(--theme-glow), inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent);
  backdrop-filter: blur(22px);
  opacity: 0;
  transform: translateY(-7px) scale(0.98);
  transform-origin: top;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.custom-select-menu[data-placement="top"] {
  transform: translateY(7px) scale(0.98);
  transform-origin: bottom;
}

.custom-select-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.custom-select-menu::-webkit-scrollbar { width: 8px; }
.custom-select-menu::-webkit-scrollbar-track { background: color-mix(in srgb, var(--text) 5%, transparent); border-radius: 999px; }
.custom-select-menu::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.42)); }

.custom-select-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: color-mix(in srgb, var(--text) 86%, transparent);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: left;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.custom-select-option:hover,
.custom-select-option:focus-visible,
.custom-select-option.focused {
  transform: translateX(2px);
  border-color: var(--theme-line-strong);
  background: var(--theme-active-bg);
  color: var(--text);
  box-shadow: 0 0 18px var(--theme-glow-soft);
  outline: none;
}

.custom-select-option.selected {
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  background: linear-gradient(90deg, var(--theme-active-bg-strong), var(--theme-glow-soft));
  color: var(--text);
}

.create-lobby-actions {
  display: grid;
  grid-column: 2;
  grid-row: 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(7px, 0.85vw, 11px);
  margin-top: 0;
}

.create-lobby-actions button {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 44px;
  border-radius: 18px;
  letter-spacing: 0.03em;
}

.create-lobby-actions .primary {
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 20%, transparent), transparent 25%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--bg)) 52%, var(--accent-2));
  box-shadow: 0 18px 44px var(--theme-active-bg-strong), 0 0 28px var(--theme-glow), inset 0 1px 0 color-mix(in srgb, var(--text) 22%, transparent);
  text-transform: uppercase;
}

.create-lobby-actions .secondary {
  border-color: var(--theme-line);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  backdrop-filter: blur(14px);
}

.create-lobby-actions button:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
}

#createLobbyStatus {
  grid-column: 2;
  grid-row: 4;
  min-height: 1.2em;
  margin: -4px 4px 0;
}

@keyframes preview-aurora {
  to { transform: rotate(360deg); }
}

@keyframes mode-pulse {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.08); filter: saturate(1.5); }
}

@media (max-width: 1080px) {
  body[data-screen="createLobbySetup"] {
    overflow-y: auto;
  }

  .create-lobby-card {
    max-height: none;
  }

  .create-lobby-shell,
  .room-group,
  .create-settings-column,
  .create-lobby-actions {
    grid-template-columns: 1fr;
  }

  .create-lobby-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .create-lobby-preview,
  .create-settings-column,
  .create-lobby-actions,
  #createLobbyStatus,
  .room-group .setting-control:not(.setting-control-wide) {
    grid-column: auto;
    grid-row: auto;
  }

  .create-lobby-preview {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .create-lobby-header {
    display: grid;
  }

  .match-group,
  .advanced-group,
  .preview-stat-grid {
    grid-template-columns: 1fr;
  }

  .create-lobby-preview strong {
    font-size: clamp(2rem, 14vw, 3.1rem);
  }
}

/* AAA multiplayer lobby refresh */
body[data-screen="lobby"] {
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 16% 8%, rgba(var(--accent-rgb), 0.24), transparent 28rem),
    radial-gradient(circle at 76% 18%, rgba(var(--accent-rgb), 0.1), transparent 26rem),
    radial-gradient(circle at 46% 94%, rgba(var(--accent-rgb), 0.1), transparent 28rem),
    linear-gradient(135deg, var(--bg) 0%, rgba(var(--surface-strong-rgb), 0.94) 46%, var(--bg) 100%);
}

body[data-screen="lobby"] .app-shell {
  width: min(100% - clamp(16px, 3vw, 40px), 1520px);
  min-height: 100dvh;
  padding: clamp(12px, 2vw, 24px) 0;
}

#lobby.lobby-card {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
}

.lobby-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.lobby-ambient::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(var(--accent-rgb),0.035) 47% 47.5%, transparent 48% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 92px);
  mask-image: radial-gradient(circle at center, #000 0 64%, transparent 76%);
  animation: lobby-grid-drift 18s linear infinite;
}

.lobby-ambient-orb {
  position: absolute;
  width: min(46vw, 520px);
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(34px);
  opacity: 0.34;
  animation: lobby-orb-float 7s ease-in-out infinite alternate;
}

.lobby-ambient-orb-one {
  top: -9%;
  left: -7%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.58), transparent 66%);
}

.lobby-ambient-orb-two {
  right: -10%;
  bottom: -15%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.14) 46%, transparent 70%);
  animation-delay: -2.5s;
}

.lobby-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 8px);
  opacity: 0.1;
}

.lobby-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(420px, 1.42fr) minmax(250px, 0.74fr);
  gap: clamp(12px, 1.5vw, 20px);
  align-items: stretch;
  height: min(820px, calc(100dvh - 48px));
  min-height: 0;
}

.lobby-roster-panel,
.lobby-actions-panel,
.lobby-hero-panel,
.lobby-chat-panel,
.action-stack,
.invite-qr-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.14), transparent 38%),
    linear-gradient(145deg, rgba(var(--surface-strong-rgb), 0.44), rgba(var(--surface-rgb), 0.58)),
    rgba(var(--surface-rgb), 0.82);
  box-shadow:
    0 30px 94px rgba(0, 0, 0, 0.42),
    0 0 44px rgba(var(--accent-rgb), 0.08),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(var(--accent-rgb), 0.08);
  backdrop-filter: blur(20px) saturate(118%);
}

.lobby-left-panel,
.lobby-actions-panel {
  display: grid;
  min-height: 0;
  gap: clamp(12px, 1.4vw, 16px);
}

.lobby-left-panel {
  grid-template-rows: auto minmax(0, 1fr);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.lobby-hero-panel,
.lobby-roster-panel,
.lobby-actions-panel {
  border-radius: 30px;
}

.lobby-hero-panel {
  position: relative;
  display: grid;
  gap: 14px;
  padding: clamp(18px, 2vw, 24px);
  overflow: hidden;
}

.lobby-hero-panel::before,
.lobby-roster-panel::before,
.action-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.75), rgba(var(--accent-rgb),0.34), rgba(var(--accent-rgb),0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.68;
  z-index: 0;
}

.lobby-hero-panel > *,
.lobby-roster-panel > *,
.action-stack > * {
  position: relative;
  z-index: 1;
}

.lobby-live-row,
.lobby-code-row,
.lobby-stat-grid,
.lobby-roster-header,
.lobby-player-badges {
  display: flex;
  align-items: center;
}

.lobby-live-row {
  gap: 9px;
  color: var(--success);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lobby-live-dot,
.lobby-online-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb),0.16), 0 0 18px rgba(var(--accent-rgb),0.8);
  animation: online-pulse 1.6s ease-in-out infinite;
}

.lobby-room-title {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.85rem);
  line-height: 0.92;
  letter-spacing: -0.07em;
  text-shadow: 0 0 34px rgba(var(--accent-rgb), 0.34);
}

.lobby-code-row {
  flex-wrap: wrap;
  gap: 10px;
}

.lobby-code-row .code-pill {
  min-height: 42px;
  border-color: rgba(var(--accent-rgb),0.38);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 24px rgba(var(--accent-rgb),0.14);
}

.lobby-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.lobby-stat-card {
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--surface-strong-rgb), 0.5)),
    rgba(var(--surface-rgb), 0.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 12px 28px rgba(0,0,0,0.2);
  overflow: hidden;
}

.lobby-stat-card span,
.lobby-hero-copy,
.lobby-player-info span,
.lobby-empty-seat .ready-chip {
  color: color-mix(in srgb, var(--muted) 68%, transparent);
}

.lobby-stat-card span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.lobby-stat-card strong {
  display: block;
  overflow: hidden;
  font-size: clamp(1rem, 1.6vw, 1.32rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-hero-copy {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.lobby-host-badge {
  justify-self: start;
  border-color: rgba(var(--accent-rgb),0.38);
  background: rgba(var(--accent-rgb),0.12);
  box-shadow: 0 0 24px rgba(var(--accent-rgb),0.16);
}

.lobby-chat-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
}

.lobby-chat-panel .panel-title {
  margin: -2px -2px 0;
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.075);
}

.lobby-chat-panel .chat-messages-area {
  flex: 1 1 auto;
  min-height: 0;
}

.lobby-chat-panel .chat-messages-area {
  margin: 6px -2px 0;
  padding: 10px 8px 14px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 0%, rgba(var(--accent-rgb), 0.12), transparent 36%),
    linear-gradient(180deg, rgba(var(--surface-strong-rgb),0.08), rgba(var(--surface-rgb),0.36)),
    rgba(var(--surface-rgb), 0.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

.lobby-chat-panel .chat-input-area {
  position: sticky;
  bottom: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.lobby-theme-control {
  margin: 0;
}

.lobby-theme-control {
  gap: 8px;
  padding: 10px;
  border-color: rgba(255,255,255,0.08);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: hidden;
}

.lobby-theme-control select {
  width: 100%;
}

#lobby .chat-form input {
  border-color: rgba(var(--accent-rgb),0.18);
  background: rgba(var(--surface-rgb), 0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--text);
}

#lobby .lobby-theme-control select {
  border-color: rgba(var(--accent-rgb),0.18);
  background: rgba(var(--surface-rgb), 0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--text);
}

#lobby .chat-form input::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

#lobby .chat-form input:focus {
  border-color: rgba(255,255,255,0.22);
  box-shadow: none;
}

#lobby .lobby-theme-control select:focus {
  border-color: rgba(255,255,255,0.22);
  box-shadow: none;
}

.lobby-roster-panel {
  position: relative;
  min-height: 0;
  padding: clamp(16px, 1.9vw, 24px);
  overflow: hidden;
}

.lobby-roster-header {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(14px, 1.8vw, 20px);
}

.lobby-roster-header h3 {
  margin: 0;
  font-size: clamp(1.55rem, 2.2vw, 2.2rem);
  letter-spacing: -0.04em;
}

.lobby-ready-summary {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.08);
  color: rgba(var(--accent-rgb),0.86);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.lobby-player-grid,
#lobby .players-list.lobby-player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
  align-content: start;
  height: calc(100% - 72px);
  margin: 0;
  overflow: auto;
  padding: 2px 4px 8px 2px;
}

.lobby-player-card {
  position: relative;
  display: grid;
  min-height: 148px;
  align-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.115);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--accent-rgb), 0.2), transparent 38%),
    linear-gradient(145deg, rgba(var(--surface-strong-rgb), 0.38), rgba(var(--surface-rgb), 0.68));
  box-shadow: 0 20px 52px rgba(0,0,0,0.32);
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.lobby-player-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb),0.42);
  box-shadow: 0 24px 70px rgba(0,0,0,0.38), 0 0 34px rgba(var(--accent-rgb),0.14);
}

.lobby-player-card.is-ready {
  border-color: rgba(var(--accent-rgb),0.44);
  background:
    radial-gradient(circle at 14% 8%, rgba(var(--accent-rgb),0.22), transparent 34%),
    linear-gradient(145deg, rgba(var(--accent-rgb),0.18), rgba(var(--surface-rgb), 0.74));
}

.lobby-player-card.is-host {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.lobby-player-glow {
  position: absolute;
  inset: auto -12% -28% -12%;
  z-index: 0;
  height: 54%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.2), transparent 68%);
  pointer-events: none;
}

.lobby-player-card > :not(.lobby-player-glow) {
  position: relative;
  z-index: 1;
}

.lobby-avatar-wrap {
  position: relative;
  width: max-content;
}

.lobby-player-card .avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.72), rgba(var(--accent-rgb),0.34));
  box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.24);
  font-size: 1.04rem;
}

.lobby-player-card .image-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.lobby-online-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--bg);
}

.lobby-player-info {
  min-width: 0;
}

.lobby-player-info strong {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
  overflow: hidden;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-player-info strong .dev-badge {
  flex: 0 0 auto;
  margin-right: 0;
}

.lobby-player-info strong .dev-name-glow,
.lobby-player-info strong .player-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-player-info span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.lobby-player-badges {
  flex-wrap: wrap;
  gap: 7px;
}

.host-chip,
.ready-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.host-chip {
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-2);
}

.ready-chip {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  color: var(--muted);
}

.is-ready .ready-chip {
  border-color: rgba(var(--accent-rgb),0.46);
  background: rgba(var(--accent-rgb),0.16);
  color: var(--accent-2);
  animation: ready-chip-pulse 1.8s ease-in-out infinite;
}

.lobby-empty-seat {
  min-height: 148px;
  border-style: dashed;
  border-color: rgba(255,255,255,0.11);
  background: rgba(var(--surface-rgb), 0.38);
  box-shadow: none;
}

.lobby-empty-plus {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 18px;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  font-size: 1.5rem;
  font-weight: 900;
}

.lobby-actions-panel {
  align-content: start;
  padding: clamp(12px, 1.3vw, 16px);
  border-radius: 30px;
}

.action-stack {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 24px;
}

.lobby-actions-panel button {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  letter-spacing: 0.04em;
}

.lobby-ready-button,
.lobby-start-button,
.lobby-force-start-button {
  min-height: 56px !important;
  font-size: 0.98rem;
  font-weight: 950;
}

#readyBtn.ready {
  border-color: rgba(var(--accent-rgb),0.58);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-rgb),0.46));
  color: var(--on-accent);
  box-shadow: 0 0 36px rgba(var(--accent-rgb),0.32);
}

#startBtn.hidden,
#forceStartBtn.hidden {
  display: none;
}

.lobby-force-start-button {
  border-color: rgba(255, 90, 90, 0.55);
  box-shadow: 0 0 30px rgba(255, 90, 90, 0.2);
}

.action-stack-secondary button,
.action-stack-muted button {
  min-height: 42px;
  opacity: 0.9;
}

.action-stack-muted {
  background:
    linear-gradient(145deg, rgba(var(--surface-strong-rgb), 0.28), rgba(var(--surface-rgb), 0.52)),
    rgba(var(--surface-rgb), 0.68);
}

.action-stack-muted .status:empty {
  display: none;
}

.toast-status {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: max-content;
  max-width: min(360px, calc(100vw - 48px));
  min-height: 0;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: rgba(var(--surface-rgb), 0.92);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.toast-status.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.toast-status.error {
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
}

.invite-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(var(--surface-rgb), 0.72);
  backdrop-filter: blur(16px);
}

.invite-qr-modal.hidden {
  display: none;
}

.invite-qr-card {
  position: relative;
  display: grid;
  width: min(94vw, 380px);
  gap: 12px;
  padding: 22px;
  border-radius: 28px;
  text-align: center;
}

.invite-qr-card .qr-wrap {
  background: rgba(255,255,255,0.08);
}

.invite-qr-card #inviteQr {
  width: min(250px, 100%);
}

.invite-qr-card .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

@media (max-width: 1180px) {
  .lobby-shell {
    grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr);
  }

  .lobby-actions-panel {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  body[data-screen="lobby"] .app-shell {
    width: min(100% - 14px, 720px);
    padding: 8px 0 18px;
  }

  .lobby-shell,
  .lobby-actions-panel {
    height: auto;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .lobby-left-panel {
    grid-template-rows: auto minmax(300px, 48vh);
  }

  .lobby-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lobby-player-grid,
  #lobby .players-list.lobby-player-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    max-height: none;
  }

  .lobby-player-card,
  .lobby-empty-seat {
    min-height: 132px;
    padding: 13px;
  }
}

@media (max-width: 540px) {
  .lobby-stat-grid,
  .lobby-player-grid,
  #lobby .players-list.lobby-player-grid {
    grid-template-columns: 1fr;
  }

  .lobby-roster-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@keyframes lobby-grid-drift {
  from { transform: translate3d(-2%, -1%, 0); }
  to { transform: translate3d(2%, 1%, 0); }
}

@keyframes lobby-orb-float {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

@keyframes online-pulse {
  0%, 100% { transform: scale(1); opacity: 0.88; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes ready-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
  50% { box-shadow: 0 0 22px rgba(var(--accent-rgb),0.32); }
}

@media (min-width: 1120px) {
  body[data-screen="lobby"] .app-shell {
    height: auto;
    min-height: 100dvh;
    padding: clamp(12px, 2vw, 24px) 0;
  }

  #lobby.lobby-card {
    display: block;
    max-height: none;
    overflow: visible;
  }
}

.main-menu-button {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.85rem 1.25rem;
  margin: 0 auto 1rem;
  border: 1px solid rgba(var(--accent-rgb), 0.46);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28), rgba(255, 255, 255, 0.08));
  color: var(--text);
  box-shadow: 0 16px 40px rgba(var(--accent-rgb), 0.2);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.main-menu-button:hover,
.main-menu-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.82);
  box-shadow: 0 20px 52px rgba(var(--accent-rgb), 0.3);
}

.site-menu-modal {
  z-index: 30;
}

.site-menu-card {
  width: min(100%, 880px);
  max-height: min(88vh, 760px);
  overflow: auto;
}

.site-menu-layout {
  display: grid;
  grid-template-columns: minmax(150px, 0.36fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.site-menu-tabs {
  display: grid;
  gap: 8px;
  position: sticky;
  top: 0;
}

.site-menu-tab {
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.site-menu-tab.active,
.site-menu-tab:hover,
.site-menu-tab:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(255, 255, 255, 0.07));
  color: var(--text);
}

.site-menu-content {
  min-width: 0;
}

.site-menu-panel {
  display: none;
}

.site-menu-panel.active {
  display: grid;
  gap: 16px;
}

.settings-block {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.16), transparent 52%), rgba(255, 255, 255, 0.045);
}

.settings-title.compact {
  margin: 0;
}

.choice-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.theme-choice-scroll {
  max-height: clamp(126px, 20vh, 184px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 10px 8px 2px;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

.neon-scrollbar {
  scrollbar-color: rgba(var(--accent-rgb), 0.24) rgba(255, 255, 255, 0.028);
  scrollbar-width: thin;
  transition: scrollbar-color 0.25s ease;
}

.neon-scrollbar:hover,
.neon-scrollbar:focus-within,
.neon-scrollbar.is-scrolling {
  scrollbar-color: rgba(var(--accent-rgb), 0.58) rgba(255, 255, 255, 0.05);
}

.neon-scrollbar::-webkit-scrollbar {
  width: 9px;
}

.neon-scrollbar::-webkit-scrollbar-track {
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(var(--surface-rgb), 0.34);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.2);
}

.neon-scrollbar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.1)) padding-box,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.78), color-mix(in srgb, var(--accent-2) 52%, rgba(var(--accent-rgb), 0.36))) border-box;
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.14),
    0 0 14px rgba(var(--accent-rgb), 0.22);
}

.neon-scrollbar:hover::-webkit-scrollbar-thumb,
.neon-scrollbar:focus-within::-webkit-scrollbar-thumb,
.neon-scrollbar.is-scrolling::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.16)) padding-box,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.96), color-mix(in srgb, var(--accent-2) 68%, rgba(var(--accent-rgb), 0.5))) border-box;
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.2),
    0 0 18px rgba(var(--accent-rgb), 0.36),
    0 0 28px color-mix(in srgb, var(--accent-2) 18%, transparent);
}

.neon-scrollbar::-webkit-scrollbar-thumb:hover {
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.26),
    0 0 22px rgba(var(--accent-rgb), 0.48),
    0 0 34px color-mix(in srgb, var(--accent-2) 25%, transparent);
}

.choice-pill {
  min-height: 40px;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.choice-pill.selected,
.choice-pill:hover,
.choice-pill:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.75);
  background: rgba(var(--accent-rgb), 0.22);
}

.accent-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 10px;
}

.accent-swatch {
  position: relative;
  min-height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 10px 24px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.accent-swatch.selected::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  font-weight: 1000;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

.secondary-swatch.selected::after {
  content: "+";
}

.menu-toggle-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.menu-toggle-row input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

.menu-toggle-row span {
  display: grid;
  gap: 3px;
}

.menu-toggle-row strong {
  color: var(--text);
}

.menu-toggle-row small {
  color: var(--muted);
  line-height: 1.45;
}

#settingsPanelLanguage.active {
  min-height: clamp(300px, 44vh, 470px);
  place-items: center;
}

.language-settings-block {
  width: 100%;
  min-height: clamp(260px, 38vh, 420px);
  place-items: center;
  padding: clamp(42px, 8vw, 76px);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.site-menu-card .language-switcher {
  position: static;
  justify-self: center;
  align-self: center;
  gap: 0.78rem;
  margin: 0 auto;
  padding: 0.76rem 0.96rem;
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(22, 14, 48, 0.42);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.22),
    0 0 38px rgba(var(--accent-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: none;
  font-size: clamp(0.9rem, 1.35vw, 1.02rem);
}

.site-menu-card .language-toggle {
  width: clamp(4.1rem, 7vw, 4.55rem);
  height: clamp(2.05rem, 3.5vw, 2.28rem);
}

.site-menu-card .language-toggle-knob {
  top: 0.26rem;
  left: 0.28rem;
  width: clamp(1.5rem, 2.5vw, 1.68rem);
  height: clamp(1.5rem, 2.5vw, 1.68rem);
}

html[lang="en"] .site-menu-card .language-toggle-knob {
  transform: translateX(clamp(2rem, 3.45vw, 2.24rem));
}

.about-site-card,
.about-site-grid article {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.18), transparent 52%), rgba(255, 255, 255, 0.045);
}

.about-site-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}

.about-site-icon {
  display: inline-grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  background: rgba(var(--accent-rgb), 0.2);
  font-size: 1.8rem;
}

.about-site-card h3 {
  margin: 0 0 6px;
}

.about-site-card p,
.about-site-grid span {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.about-site-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.about-site-grid article {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.account-corner {
  top: auto;
  bottom: 18px;
  left: 18px;
}

.account-toggle.locked,
.account-toggle:disabled {
  cursor: default;
  opacity: 0.74;
  filter: saturate(0.85);
}

.account-toggle.locked::after {
  content: "✓";
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--text);
  font-size: 0.72rem;
}

.account-toggle.guest-locked::after {
  content: none;
}

body[data-role="civilian"] {
  --bg: #031121;
  --panel: rgba(7, 20, 38, 0.86);
  --panel-strong: rgba(9, 30, 58, 0.96);
  --muted: #b9d4f8;
  --text: #f4f9ff;
  --accent: #2f80ff;
  --accent-rgb: 47, 128, 255;
  --accent-dark: #0052cc;
  --accent-2: #e6f2ff;
}

body[data-role="spy"] {
  --bg: #050505;
  --panel: rgba(14, 14, 14, 0.86);
  --panel-strong: rgba(24, 24, 24, 0.96);
  --muted: #b8b8b8;
  --text: #f7f7fb;
  --accent: #e50914;
  --accent-rgb: 229, 9, 20;
  --accent-dark: #a8000b;
  --accent-2: #fff;
}

@media (max-width: 720px) {
  .site-menu-layout,
  .about-site-grid {
    grid-template-columns: 1fr;
  }

  .site-menu-tabs {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-menu-tab {
    text-align: center;
  }

  .account-corner {
    left: 12px;
    bottom: 12px;
  }
}

.site-menu-card .language-switcher {
  display: inline-flex;
}

.top-left-controls {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(720px, calc(100vw - 126px));
  pointer-events: none;
}

.top-left-controls > * {
  pointer-events: auto;
}

.top-left-controls .main-menu-button {
  justify-self: auto;
  min-height: 44px;
  margin: 0;
  padding: 0.68rem 1.05rem;
  white-space: nowrap;
}

.top-left-controls .account-corner {
  position: static;
  inset: auto;
  width: auto;
  max-width: min(280px, calc(100vw - 36px));
}

.volume-control .sound-toggle {
  min-height: 44px;
  padding: 8px 13px;
  gap: 0.55rem;
  font-size: 1.02rem;
}

.volume-control .sound-toggle strong {
  font-size: 0.75rem;
}

.effects-density-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.effects-density-option {
  display: grid;
  gap: 6px;
  min-height: 108px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.12), transparent 58%), rgba(255, 255, 255, 0.055);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.effects-density-option strong {
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.effects-density-option small {
  color: var(--muted);
  line-height: 1.45;
}

.effects-density-option.selected,
.effects-density-option:hover,
.effects-density-option:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.78);
  background: radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.24), transparent 58%), rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 18px 44px rgba(var(--accent-rgb), 0.16);
}

/* Effects Density: controls lighting, particles, UI glow, and ambient effects. */
body[data-effects-density="high"] .noise {
  opacity: 0.16;
}

body[data-effects-density="high"] .orb {
  opacity: 0.32;
  filter: blur(20px);
}

body[data-effects-density="high"] .music-equalizer-bg,
body[data-effects-density="high"] .lobby-ambient-orb {
  opacity: 0.1;
}

body[data-effects-density="medium"] .noise {
  opacity: 0.08;
}

body[data-effects-density="medium"] .orb {
  opacity: 0.18;
  filter: blur(14px);
  animation: none;
}

body[data-effects-density="medium"] .music-equalizer-bg,
body[data-effects-density="medium"] .lobby-ambient-orb,
body[data-effects-density="medium"] .reaction-burst {
  display: none !important;
}

body[data-effects-density="medium"] .card,
body[data-effects-density="medium"] .auth-modal-card,
body[data-effects-density="medium"] .volume-panel,
body[data-effects-density="medium"] .guest-account-notice,
body[data-effects-density="medium"] .profile-view,
body[data-effects-density="medium"] .profile-editor {
  box-shadow: 0 14px 46px rgba(0, 0, 0, 0.34);
}

body[data-effects-density="low"] {
  background: var(--bg);
}

body[data-effects-density="low"] .noise,
body[data-effects-density="low"] .orb,
body[data-effects-density="low"] .music-equalizer-bg,
body[data-effects-density="low"] .lobby-ambient-orb,
body[data-effects-density="low"] .reaction-burst,
body[data-effects-density="low"] button::before,
body[data-effects-density="low"] .vote-row::before,
body[data-effects-density="low"] .reaction-btn::before,
body[data-effects-density="low"] .kick-row::before,
body[data-effects-density="low"] .code-pill::before,
body[data-effects-density="low"] .sound-toggle::before {
  display: none !important;
}

body[data-effects-density="low"] *,
body[data-effects-density="low"] *::before,
body[data-effects-density="low"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.12s !important;
}

body[data-effects-density="low"] .card,
body[data-effects-density="low"] .auth-modal-card,
body[data-effects-density="low"] .volume-panel,
body[data-effects-density="low"] .guest-account-notice,
body[data-effects-density="low"] .profile-view,
body[data-effects-density="low"] .profile-editor,
body[data-effects-density="low"] .main-menu-button,
body[data-effects-density="low"] .sound-toggle {
  box-shadow: none;
}

@media (max-width: 720px) {
  .top-left-controls {
    top: 12px;
    left: 12px;
    width: min(720px, calc(100vw - 126px));
    flex-wrap: wrap;
  }

  .top-left-controls .main-menu-button,
  .top-left-controls .account-toggle,
  .volume-control .sound-toggle {
    min-height: 40px;
  }

  .effects-density-grid {
    grid-template-columns: 1fr;
  }
}


/* Requested compact sound control: 5% smaller than the previous compact pill. */
.volume-control .sound-toggle {
  min-height: 39.9px;
  padding: 7.22px 11.73px;
  gap: 0.494rem;
  font-size: 0.922rem;
}

.volume-control .sound-toggle strong {
  font-size: 0.676rem;
}

/* Premium in-game settings deck: glass, depth and accent-reactive lighting. */
.site-menu-modal {
  padding: clamp(12px, 2vh, 22px);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--accent-rgb), 0.2), transparent 32rem),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 30rem),
    linear-gradient(135deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(16px) saturate(132%);
}

.site-menu-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: min(1320px, calc(100dvw - 36px));
  height: min(708px, calc(100dvh - 36px));
  max-width: calc(100dvw - 36px);
  max-height: calc(100dvh - 36px);
  padding: clamp(22px, 2vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 34px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.105), transparent 32%),
    radial-gradient(circle at 16% 0%, rgba(var(--accent-rgb), 0.22), transparent 34rem),
    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 28rem),
    linear-gradient(152deg, rgba(var(--surface-strong-rgb), 0.96), rgba(var(--surface-rgb), 0.88));
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.68),
    0 0 72px rgba(var(--accent-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(var(--accent-rgb), 0.12);
  text-align: left;
}

.site-menu-card::before,
.site-menu-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.site-menu-card::before {
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.11), transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 5px);
  opacity: 0.24;
  mask-image: linear-gradient(180deg, black, transparent 74%);
  animation: site-menu-grain 7s steps(8) infinite;
}

.site-menu-card::after {
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.5), transparent 28%, rgba(255, 255, 255, 0.18) 50%, transparent 68%, color-mix(in srgb, var(--accent-2) 38%, transparent));
  opacity: 0.36;
  filter: blur(18px);
}

.site-menu-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "title kicker close"
    "copy copy copy";
  column-gap: clamp(14px, 1.8vw, 24px);
  row-gap: clamp(5px, 0.8vh, 9px);
  flex: 0 0 auto;
  max-width: none;
  padding: 0;
  align-items: center;
}

.site-menu-kicker {
  grid-area: kicker;
  justify-self: center;
  max-width: 100%;
  margin: 0;
  color: color-mix(in srgb, var(--accent) 62%, var(--text));
  opacity: 0.82;
  font-size: clamp(0.64rem, 0.85vw, 0.74rem);
  font-weight: 950;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-menu-card h2 {
  grid-area: title;
  justify-self: start;
  align-self: center;
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.07em;
  text-shadow: 0 0 38px rgba(var(--accent-rgb), 0.24);
}

.site-menu-card .auth-modal-text {
  grid-area: copy;
  justify-self: start;
  max-width: min(100%, 760px);
  margin: 0;
  color: var(--theme-text-soft);
}

.site-menu-layout {
  grid-template-columns: minmax(168px, 210px) minmax(0, 1fr);
  gap: clamp(12px, 1.7vw, 20px);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: clamp(8px, 1.1vw, 12px);
}

.site-menu-tabs {
  position: static;
  align-self: stretch;
  align-content: start;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  padding: clamp(10px, 1.2vw, 12px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.028)),
    rgba(var(--surface-rgb), 0.54);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px) saturate(135%);
}

.site-menu-tabs-label {
  padding: 3px 9px 8px;
  color: var(--theme-text-faint);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.site-menu-tab {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 0.56rem 0.68rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: var(--theme-text-soft);
  font-size: 0.86rem;
  letter-spacing: 0.015em;
  text-align: left;
  transform: translateZ(0);
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), color 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.site-menu-tab::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.27), rgba(255, 255, 255, 0.07)),
    rgba(var(--accent-rgb), 0.07);
  box-shadow: 0 16px 34px rgba(var(--accent-rgb), 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.13);
  opacity: 0;
  transform: translateX(-10px) scaleX(0.86);
  transform-origin: left center;
  transition: opacity 0.24s ease, transform 0.34s cubic-bezier(.2,.8,.2,1);
}

.site-menu-tab::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 3px;
  height: 46%;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.72);
  opacity: 0;
  transform: translateY(-50%) scaleY(0.55);
  transition: opacity 0.22s ease, transform 0.28s ease;
}

.site-menu-tab-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-menu-tab.active,
.site-menu-tab:hover,
.site-menu-tab:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.24);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.site-menu-tab.active::before,
.site-menu-tab:hover::before,
.site-menu-tab:focus-visible::before,
.site-menu-tab.active::after {
  opacity: 1;
  transform: translateX(0) scale(1) translateY(-50%);
}

.site-menu-tab.active::before,
.site-menu-tab:hover::before,
.site-menu-tab:focus-visible::before {
  transform: translateX(0) scaleX(1);
}

.site-menu-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(12px, 1.6vw, 16px);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.022)),
    rgba(var(--surface-rgb), 0.36);
  box-shadow:
    0 22px 64px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.site-menu-panel.active {
  gap: clamp(10px, 1.2vw, 14px);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  padding-bottom: 2px;
  animation: site-menu-panel-in 0.32s cubic-bezier(.2,.8,.2,1) both;
  scrollbar-gutter: stable;
}

.site-menu-card #settingsPanelProfile.active,
.site-menu-card #settingsPanelShop.active,
.site-menu-card #settingsPanelDaily.active {
  overflow: hidden;
}

.site-menu-card #settingsPanelProfile.active {
  display: flex;
  flex-direction: column;
}

.site-menu-card #settingsPanelProfile.active > :not(.hidden) {
  min-height: 0;
}

.site-menu-card #settingsPanelProfile.active > .account-profile-view:not(.hidden) {
  flex: 1 1 auto;
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: clamp(4px, 0.8vw, 8px);
  scrollbar-gutter: stable;
}

.site-menu-card #settingsPanelShop.active,
.site-menu-card #settingsPanelDaily.active {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.site-menu-card #settingsPanelShop.active > .shop-panel-root,
.site-menu-card #settingsPanelDaily.active > .daily-reward-card {
  flex: 1 1 auto;
  max-height: 100%;
  min-height: 0;
}

.site-menu-card #settingsPanelLanguage.active {
  min-height: 0;
  place-items: stretch;
}

.settings-block,
.profile-hero,
.profile-stat-card,
.about-site-card,
.about-site-grid article,
.effects-density-option,
.menu-toggle-row {
  border-color: rgba(255, 255, 255, 0.105);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), 0.16), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(var(--surface-rgb), 0.34);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.095),
    inset 0 -1px 0 rgba(var(--accent-rgb), 0.08);
}

.settings-block {
  gap: clamp(10px, 1.2vw, 14px);
  max-width: 100%;
  padding: clamp(12px, 1.5vw, 16px);
  overflow: hidden;
  border-radius: 24px;
}

.settings-title.compact {
  display: grid;
  gap: 5px;
}

.settings-title.compact strong {
  color: var(--text);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  font-weight: 950;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.settings-title.compact span {
  color: var(--theme-text-faint);
  line-height: 1.45;
}

.choice-pill,
.effects-density-option,
.accent-swatch,
.site-menu-card .secondary,
.site-menu-card .ghost-button,
.site-menu-card .primary,
.site-menu-card input {
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, filter 0.22s ease;
}

.site-menu-card .theme-choice-scroll {
  position: relative;
  align-content: start;
  max-height: clamp(132px, 22vh, 196px);
  margin-right: -4px;
  padding-right: 12px;
}

.choice-pill {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(var(--surface-rgb), 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.choice-pill.selected,
.choice-pill:hover,
.choice-pill:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.68);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.32), transparent 72%),
    rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.accent-color-grid {
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 12px;
}

.accent-swatch {
  min-height: 48px;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 38%),
    radial-gradient(circle at 50% 115%, rgba(0, 0, 0, 0.36), transparent 56%),
    var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 14px 30px rgba(0, 0, 0, 0.24);
}

.accent-swatch:hover,
.accent-swatch:focus-visible,
.accent-swatch.selected {
  transform: translateY(-2px) scale(1.025);
  border-color: rgba(255, 255, 255, 0.54);
  box-shadow: 0 18px 42px rgba(var(--accent-rgb), 0.18), 0 0 0 4px rgba(var(--accent-rgb), 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

.site-menu-card .language-settings-block {
  display: grid;
  grid-template-areas: "title switch";
  grid-template-columns: minmax(0, auto) auto;
  grid-template-rows: auto;
  column-gap: clamp(18px, 3vw, 34px);
  row-gap: clamp(18px, 2.4vh, 26px);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  place-items: center;
  align-content: center;
  justify-content: center;
  padding-block: clamp(18px, 4vh, 34px);
  text-align: left;
}

.language-title {
  position: relative;
  z-index: 1;
  grid-area: title;
  justify-items: start;
  align-self: start;
  max-width: 25rem;
}

.site-menu-card .language-switcher {
  position: relative;
  z-index: 1;
  grid-area: switch;
  place-self: start center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: 0.9rem 1.12rem;
  line-height: 1;
  transform: translateY(clamp(0.42rem, 0.9vw, 0.68rem));
  border-color: rgba(var(--accent-rgb), 0.3);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(var(--surface-rgb), 0.55);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 0 44px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.17);
}

.site-menu-card .language-toggle {
  --language-toggle-width: clamp(5.05rem, 6vw, 5.35rem);
  --language-toggle-height: clamp(2.52rem, 3vw, 2.7rem);
  --language-toggle-knob: clamp(1.78rem, 2.2vw, 1.92rem);
  --language-toggle-pad: 0.34rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: var(--language-toggle-width);
  height: var(--language-toggle-height);
  padding: 0 var(--language-toggle-pad);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  background:
    radial-gradient(circle at 22% 50%, rgba(var(--accent-rgb), 0.3), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.18)),
    rgba(0, 0, 0, 0.34);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35), 0 0 22px rgba(var(--accent-rgb), 0.12);
}

.site-menu-card .language-toggle-knob {
  position: relative;
  top: auto;
  left: auto;
  align-self: center;
  flex: 0 0 var(--language-toggle-knob);
  width: var(--language-toggle-knob);
  height: var(--language-toggle-knob);
  margin: 0;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.42), 0 0 18px rgba(var(--accent-rgb), 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

html[lang="en"] .site-menu-card .language-toggle-knob {
  transform: translateX(calc(var(--language-toggle-width) - var(--language-toggle-knob) - (var(--language-toggle-pad) * 2)));
}

@media (max-width: 620px) {
  .site-menu-card .language-settings-block {
    grid-template-areas:
      "title"
      "switch";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    padding-block: clamp(14px, 3vh, 24px);
    text-align: center;
  }

  .language-title {
    justify-items: center;
  }

  .site-menu-card .language-switcher {
    place-self: center;
    transform: translateY(0.3rem);
  }
}

.effects-density-option {
  min-height: 116px;
  border-radius: 20px;
}

.effects-density-option.selected,
.effects-density-option:hover,
.effects-density-option:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.68);
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.28), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 20px 48px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.site-menu-card input {
  border-color: rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-menu-card input:focus {
  border-color: rgba(var(--accent-rgb), 0.82);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16), 0 14px 34px rgba(var(--accent-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.site-menu-card .modal-close {
  position: static;
  inset: auto;
  grid-area: close;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  backdrop-filter: blur(12px);
}

@keyframes site-menu-panel-in {
  from { opacity: 0; transform: translate3d(10px, 0, 0); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes site-menu-grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(1.5%, -1%, 0); }
  50% { transform: translate3d(-1%, 1.5%, 0); }
  75% { transform: translate3d(1%, 1%, 0); }
}

@keyframes site-menu-orbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .site-menu-card {
    height: min(820px, calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
    border-radius: 28px;
  }

  .site-menu-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title close"
      "kicker kicker"
      "copy copy";
    column-gap: 12px;
    row-gap: 7px;
    padding: 0;
    text-align: left;
  }

  .site-menu-kicker {
    justify-self: center;
    max-width: 100%;
    white-space: normal;
  }

  .site-menu-card h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .site-menu-card .modal-close {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .site-menu-content {
    min-height: 0;
  }

  .site-menu-layout {
    grid-template-columns: 1fr;
  }

  .site-menu-tabs {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  .site-menu-tabs-label {
    grid-column: 1 / -1;
  }

  .site-menu-tab {
    grid-template-columns: 24px minmax(0, 1fr);
    min-height: 44px;
    font-size: 0.78rem;
    text-align: left;
  }

  .site-menu-tab-icon {
    width: 24px;
    height: 24px;
    border-radius: 9px;
  }

  .site-menu-content {
    padding: 12px;
    border-radius: 24px;
  }

  .effects-density-grid {
    grid-template-columns: 1fr;
  }
}

.site-menu-card::before,
.site-menu-card::after {
  z-index: 0;
}

.site-menu-header,
.site-menu-layout,
.site-menu-card > .status,
.site-menu-header .modal-close {
  position: relative;
  z-index: 1;
}

/* Site-wide glass/neon scrollbars: keep every scrollable surface aligned with chat styling. */
html,
body,
* {
  scrollbar-color: rgba(var(--accent-rgb), 0.38) rgba(255, 255, 255, 0.035) !important;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
}

*::-webkit-scrollbar-track {
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(var(--surface-rgb), 0.34) !important;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.2) !important;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.1)) padding-box,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.78), color-mix(in srgb, var(--accent-2) 52%, rgba(var(--accent-rgb), 0.36))) border-box !important;
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.14),
    0 0 14px rgba(var(--accent-rgb), 0.22) !important;
}

*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb,
*.is-scrolling::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.16)) padding-box,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.96), color-mix(in srgb, var(--accent-2) 68%, rgba(var(--accent-rgb), 0.5))) border-box !important;
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.2),
    0 0 18px rgba(var(--accent-rgb), 0.36),
    0 0 28px color-mix(in srgb, var(--accent-2) 18%, transparent) !important;
}

*::-webkit-scrollbar-thumb:hover {
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.26),
    0 0 22px rgba(var(--accent-rgb), 0.48),
    0 0 34px color-mix(in srgb, var(--accent-2) 25%, transparent) !important;
}

/* Friends System: compact cinematic glass social panel. */
.friends-system {
  position: fixed;
  right: clamp(14px, 2.2vw, 34px);
  bottom: clamp(14px, 2.1vw, 32px);
  transform: translate(7px, 8px);
  z-index: 24;
  display: grid;
  justify-items: end;
  gap: 14px;
  pointer-events: none;
}

.friends-toggle,
.friends-panel {
  pointer-events: auto;
}

.friends-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 42px auto minmax(0, auto);
  align-items: center;
  gap: 11px;
  min-width: 178px;
  min-height: 58px;
  padding: 8px 13px 8px 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: 999px;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.28), transparent 54%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(var(--surface-rgb), 0.76);
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.44),
    0 0 28px rgba(var(--accent-rgb), 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  backdrop-filter: blur(22px);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.friends-toggle:hover,
.friends-toggle[aria-expanded="true"] {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.58);
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.52),
    0 0 34px rgba(var(--accent-rgb), 0.25),
    0 0 70px color-mix(in srgb, var(--accent-2) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.friends-toggle-avatar {
  position: relative;
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.34), transparent 18%),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.84), rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 18px rgba(var(--accent-rgb), 0.24);
  overflow: hidden;
}

.friends-toggle-avatar-face {
  font-weight: 900;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
}

.friends-toggle-pulse {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(8, 6, 17, 0.92);
  border-radius: 999px;
  background: #39ffb6;
  box-shadow: 0 0 12px rgba(57, 255, 182, 0.85);
}

.friends-toggle-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.friends-toggle-copy strong {
  font-size: 0.95rem;
  line-height: 1;
}

.friends-toggle-copy small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.friends-notification-badge {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.9);
  color: var(--on-accent);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.42);
}

.friends-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(440px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 112px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 0%, rgba(var(--accent-rgb), 0.18), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(var(--surface-rgb), 0.86);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.62),
    0 0 54px rgba(var(--accent-rgb), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(26px) saturate(1.14);
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.965);
  transform-origin: bottom right;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.2, 0.86, 0.2, 1), visibility 0.24s ease;
  overflow: hidden;
}

.friends-panel.open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.friends-panel-glow {
  position: absolute;
  inset: -20% -8% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.2);
  filter: blur(42px);
  pointer-events: none;
}

.friends-panel-header,
.friends-add-card,
.friends-panel-grid {
  position: relative;
  z-index: 1;
}

.friends-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.friends-panel-header .eyebrow {
  margin-bottom: 7px;
}

.friends-panel-header h2 {
  font-size: clamp(2rem, 8vw, 3rem);
}

.friends-close {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.friends-close:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.16);
}

.friends-add-card,
.friends-list-section,
.friend-requests-section {
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.friends-add-card {
  display: grid;
  gap: 9px;
  padding: 13px;
}

.friends-add-card label,
.friends-section-title strong {
  font-size: 0.86rem;
  font-weight: 900;
}

.friends-add-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.friends-add-row input {
  width: 100%;
  min-width: 0;
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.26);
}

.friends-add-button {
  min-height: 44px;
  padding-inline: 14px;
}

.friends-add-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.friends-add-status.error {
  color: #ff8fa3;
}

.friends-add-status.success {
  color: #8fffd2;
}

.friends-add-status.sending::after {
  content: "";
  display: inline-block;
  width: 1.1em;
  text-align: left;
  animation: friends-dots 1.1s steps(4, end) infinite;
}

.friends-panel-grid {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.friends-list-section,
.friend-requests-section {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 12px;
}

.friends-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.friends-section-title span {
  color: var(--theme-text-faint);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.friends-list,
.friend-requests-list {
  display: grid;
  gap: 9px;
  min-height: 0;
}

.friends-list {
  max-height: min(318px, 38dvh);
  overflow: auto;
  padding-right: 2px;
}

.friend-card,
.friend-request-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), 0.11), transparent 42%),
    rgba(255, 255, 255, 0.035);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.friend-card:hover,
.friend-card:focus-within,
.friend-request-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.38);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), 0.18), transparent 48%),
    rgba(255, 255, 255, 0.055);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), 0 0 22px rgba(var(--accent-rgb), 0.12);
}

.friend-avatar {
  position: relative;
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.64), rgba(255, 255, 255, 0.08));
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.friend-status-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(9, 7, 18, 0.94);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

.friend-status-dot.online {
  background: #39ffb6;
  box-shadow: 0 0 10px rgba(57, 255, 182, 0.8);
}

.friend-status-dot.online::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(57, 255, 182, 0.42);
  border-radius: inherit;
  animation: friends-online-pulse 1.8s ease-out infinite;
}

.friend-meta {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.friend-name-row,
.friend-activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.friend-name {
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-state {
  flex: 0 0 auto;
  color: var(--theme-text-faint);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.friend-state.online {
  color: #8fffd2;
}

.friend-activity {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-lobby-pill {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: 999px;
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.12);
  font-size: 0.67rem;
  font-weight: 900;
}

.friend-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 0.24s ease, opacity 0.2s ease, transform 0.24s ease, margin 0.24s ease;
}

.friend-card:hover .friend-actions,
.friend-card:focus-within .friend-actions {
  max-height: 92px;
  margin-top: 1px;
  opacity: 1;
  transform: translateY(0);
}

.friend-action {
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.friend-action:hover {
  border-color: rgba(var(--accent-rgb), 0.46);
  background: rgba(var(--accent-rgb), 0.14);
}

.friend-action.danger:hover {
  border-color: rgba(255, 31, 45, 0.42);
  background: rgba(255, 31, 45, 0.12);
}

.friend-request-card {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.friend-request-card .friend-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

.friend-request-actions {
  display: flex;
  gap: 6px;
}

.request-action {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.request-action:hover {
  transform: translateY(-1px);
}

.request-action.accept:hover {
  border-color: rgba(57, 255, 182, 0.48);
  background: rgba(57, 255, 182, 0.14);
}

.request-action.decline:hover {
  border-color: rgba(255, 31, 45, 0.48);
  background: rgba(255, 31, 45, 0.14);
}

.friend-empty-state {
  padding: 15px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: var(--theme-text-faint);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

@keyframes friends-online-pulse {
  from { opacity: 0.8; transform: scale(0.5); }
  to { opacity: 0; transform: scale(1.45); }
}

@keyframes friends-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

@media (max-width: 720px) {
  .friends-system {
    right: 12px;
    bottom: 12px;
  }

  .friends-toggle {
    min-width: 58px;
    grid-template-columns: 42px;
    padding: 8px;
  }

  .friends-toggle-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .friends-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
  }

  .friends-panel {
    right: 0;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 92px);
    padding: 14px;
    border-radius: 24px;
  }

  .friends-add-row,
  .friend-actions {
    grid-template-columns: 1fr;
  }
}

.friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.dm-window {
  position: fixed;
  right: clamp(14px, 2.2vw, 34px);
  bottom: clamp(92px, 10vw, 118px);
  z-index: 30;
  display: grid;
  width: min(360px, calc(100vw - 28px));
  max-height: min(560px, 72dvh);
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--accent-rgb), 0.18), transparent 42%),
    rgba(var(--surface-rgb), 0.86);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.54), 0 0 42px rgba(var(--accent-rgb), 0.18);
  backdrop-filter: blur(24px);
}

.dm-window.hidden {
  display: none;
}

.dm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dm-header div {
  display: grid;
  gap: 2px;
}

.dm-header strong {
  font-size: 0.98rem;
  font-weight: 950;
}

.dm-header span {
  color: var(--theme-text-faint);
  font-size: 0.72rem;
  font-weight: 800;
}

.dm-messages {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 220px;
  max-height: 360px;
  overflow: auto;
  padding: 14px;
}

.dm-message {
  justify-self: start;
  max-width: 82%;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px 16px 16px 6px;
  background: rgba(255, 255, 255, 0.06);
}

.dm-message.mine {
  justify-self: end;
  border-color: rgba(var(--accent-rgb), 0.24);
  border-radius: 16px 16px 6px 16px;
  background: rgba(var(--accent-rgb), 0.16);
}

.dm-message p {
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.35;
}

.dm-message span {
  display: block;
  margin-top: 5px;
  color: var(--theme-text-faint);
  font-size: 0.64rem;
  font-weight: 800;
  text-align: right;
}

.dm-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dm-form input {
  min-width: 0;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

#dmStatus {
  margin: 0 12px 12px;
}

.skip-vote-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(var(--accent-rgb), 0.09));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  animation: soft-rise 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.skip-vote-panel.hidden,
.skip-vote-btn.hidden {
  display: none;
}

.track-form .skip-vote-panel {
  margin-top: 0;
}

.track-form.skip-active {
  margin-top: 16px;
}

.skip-vote-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.skip-vote-eyebrow {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.skip-vote-meta strong {
  color: var(--text);
  font-size: 0.95rem;
}

.skip-vote-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.skip-vote-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55);
  transition: width 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.skip-vote-voters {
  display: flex;
  min-width: 34px;
  justify-content: flex-end;
}

.skip-voter {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  margin-left: -8px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.2);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
}

.skip-voter img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skip-voter i {
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 999px;
  background: #22c55e;
  color: #03110a;
  font-size: 0.58rem;
  font-style: normal;
}

.skip-vote-btn {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.2), transparent 34%), rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.18);
  color: var(--text);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.skip-vote-btn:hover:not(:disabled) {
  border-color: rgba(var(--accent-rgb), 0.9);
  box-shadow: 0 0 34px rgba(var(--accent-rgb), 0.32);
}

.skip-vote-btn:disabled {
  cursor: default;
  opacity: 0.76;
}

.skip-vote-updated {
  animation: skip-vote-pop 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.skip-vote-pulse {
  animation: selected-glow 1.2s ease-in-out infinite;
}

.skip-vote-owner {
  grid-template-columns: minmax(0, 1fr) auto;
  opacity: 0.84;
}

.track-fadeout iframe {
  opacity: 0;
  filter: blur(8px) brightness(0.45);
  transition: opacity 0.26s ease, filter 0.26s ease;
}

@keyframes skip-vote-pop {
  0% { transform: scale(0.985); }
  45% { transform: scale(1.018); box-shadow: 0 0 34px rgba(var(--accent-rgb), 0.34); }
  100% { transform: scale(1); }
}

@media (max-width: 720px) {
  .skip-vote-panel {
    grid-template-columns: 1fr;
  }

  .skip-vote-voters {
    justify-content: flex-start;
    padding-left: 8px;
  }

  .skip-vote-btn {
    width: 100%;
  }
}

/* Vinyl economy and premium shop */
.shop-panel-root {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.1vw, 26px);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  padding: 0 clamp(8px, 1vw, 12px) 32px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

.shop-static-header {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 18px);
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.shop-hero,
.shop-locked-card,
.economy-result-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.22), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(236, 72, 153, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.82));
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px);
}

.shop-hero {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(142px, auto);
  gap: clamp(10px, 1.5vw, 16px);
  align-items: center;
  flex: 0 0 auto;
  padding: clamp(14px, 1.55vw, 18px);
  background:
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.24), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(236, 72, 153, 0.22), transparent 30%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.76));
  backdrop-filter: blur(24px) saturate(140%);
}

.shop-hero h3 {
  margin: 0 0 5px;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.shop-hero p,
.shop-locked-card p,
.shop-card p {
  color: rgba(226, 232, 240, 0.74);
}

.shop-balance-card {
  min-width: clamp(136px, 15vw, 168px);
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: clamp(10px, 1.2vw, 13px);
  border-radius: 24px;
  border: 1px solid rgba(250, 204, 21, 0.26);
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.13), rgba(124, 58, 237, 0.12));
}

.shop-balance-card strong {
  font-size: 18px;
  color: #fff7ed;
}

.shop-balance-card em {
  color: rgba(191, 219, 254, 0.78);
  font-style: normal;
  font-size: 12px;
}

.vinyl-coin {
  width: clamp(56px, 6vw, 68px);
  height: clamp(56px, 6vw, 68px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, #020617 0 13%, transparent 14%),
    conic-gradient(from 120deg, #f8fafc, #22d3ee, #a78bfa, #f9a8d4, #fde68a, #f8fafc);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.48), inset 0 0 18px rgba(2, 6, 23, 0.75);
  animation: vinylSpin 4.6s linear infinite;
}

.vinyl-coin.xl {
  width: 112px;
  height: 112px;
  margin: 0 auto 12px;
}

.vinyl-coin span {
  width: 42%;
  height: 42%;
  border-radius: inherit;
  background: radial-gradient(circle, #020617 0 22%, #facc15 24% 32%, #0f172a 34%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

@keyframes vinylSpin {
  to { transform: rotate(360deg); }
}

.shop-tabs {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
  overflow: visible;
  padding: 0 2px;
}

.shop-category {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  padding: 7px clamp(9px, 0.9vw, 11px);
  color: rgba(226, 232, 240, 0.8);
  font-size: 0.78rem;
  background: rgba(15, 23, 42, 0.62);
  flex: 0 1 auto;
  white-space: nowrap;
  cursor: pointer;
}

.shop-category.active,
.shop-category:hover {
  color: white;
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(168, 85, 247, 0.2));
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.18);
}

.shop-status {
  flex: 0 0 auto;
  min-height: 16px;
  margin: 0;
  color: #bfdbfe;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.shop-status.visible { opacity: 1; }

.shop-items-area {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  padding: 2px 0 32px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-content: start;
  gap: 18px;
  width: 100%;
  min-width: 0;
  min-height: min-content;
  padding-bottom: 32px;
}

.shop-grid-wide,
.shop-empty-card {
  grid-column: 1 / -1;
  min-width: 0;
}

.shop-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: clamp(104px, 13vh, 132px) minmax(0, 1fr) auto;
  min-height: 320px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 26px;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.32);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.shop-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(125, 211, 252, 0.45);
  box-shadow: 0 24px 70px rgba(56, 189, 248, 0.18);
}

.shop-card.owned::after {
  content: "owned";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #dcfce7;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.35);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.shop-preview {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--preview);
}

.shop-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.36), transparent 48%);
  transform: translateX(-100%);
  animation: shopShine 3.4s ease-in-out infinite;
}

.shop-preview-disc {
  width: clamp(48px, 5vw, 62px);
  height: clamp(48px, 5vw, 62px);
  border-radius: 999px;
  background: radial-gradient(circle, #020617 0 14%, rgba(255,255,255,.9) 15% 18%, rgba(2,6,23,.9) 19% 55%, rgba(255,255,255,.35) 56% 58%, rgba(2,6,23,.8) 59%);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32);
}

.shop-preview b {
  position: absolute;
  left: 12px;
  bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
  color: #fff7ed;
}

@keyframes shopShine {
  0%, 45% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}

.shop-card-body,
.shop-card-actions {
  padding: clamp(12px, 1vw, 14px);
}

.shop-card-body h4 {
  margin: 2px 0 5px;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.08;
}

.shop-card small {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.shop-card p {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.42;
}

.shop-card-actions .primary,
.shop-card-actions .secondary {
  min-height: 34px;
  padding-block: 0.5rem;
  padding-inline: 8px;
  font-size: 0.76rem;
}

.shop-panel-root,
.daily-reward-arena,
.neon-shop-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, 0.72) rgba(15, 23, 42, 0.58);
}

.shop-panel-root::-webkit-scrollbar,
.daily-reward-arena::-webkit-scrollbar,
.neon-shop-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.shop-panel-root::-webkit-scrollbar-track,
.daily-reward-arena::-webkit-scrollbar-track,
.neon-shop-scrollbar::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.1);
}

.shop-panel-root::-webkit-scrollbar-thumb,
.daily-reward-arena::-webkit-scrollbar-thumb,
.neon-shop-scrollbar::-webkit-scrollbar-thumb {
  border: 2px solid rgba(15, 23, 42, 0.86);
  border-radius: 999px;
  background: linear-gradient(180deg, #22d3ee, #a78bfa, #f472b6);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.58);
}

.shop-panel-root::-webkit-scrollbar-thumb:hover,
.daily-reward-arena::-webkit-scrollbar-thumb:hover,
.neon-shop-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #67e8f9, #c4b5fd, #f9a8d4);
}

.rarity-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: rgba(148, 163, 184, 0.14);
  color: #e2e8f0;
}

.rarity-rare { --rarity: #38bdf8; }
.rarity-epic { --rarity: #a78bfa; }
.rarity-legendary { --rarity: #f59e0b; }
.rarity-mythic { --rarity: #f0abfc; }
.rarity-developer { --rarity: #34d399; }
.shop-card[class*="rarity-"] { box-shadow: 0 18px 50px color-mix(in srgb, var(--rarity, #64748b) 16%, transparent); }
.shop-card[class*="rarity-"] .rarity-pill { color: var(--rarity, #e2e8f0); border: 1px solid color-mix(in srgb, var(--rarity, #64748b) 42%, transparent); }

.shop-achievements-section {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  padding: 0 0 clamp(20px, 3vh, 36px);
  overflow: visible;
}

.shop-achievements {
  display: grid;
  gap: 10px;
  padding: clamp(12px, 1.5vw, 14px);
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.38);
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(155px, 100%), 1fr));
  gap: 10px;
}

.achievement-card {
  padding: 11px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
}

.achievement-card strong,
.achievement-card span,
.achievement-card small {
  display: block;
}

.achievement-card span { color: #bfdbfe; margin-top: 6px; }
.achievement-card small { color: rgba(226, 232, 240, 0.68); margin-top: 8px; }
.achievement-card.complete { border-color: rgba(250, 204, 21, 0.42); box-shadow: 0 0 28px rgba(250, 204, 21, 0.12); }

.achievement-progress {
  height: 8px;
  overflow: hidden;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
}

.achievement-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #a78bfa, #facc15);
}

.shop-locked-card {
  padding: 30px;
  text-align: center;
}

.purchase-flash { animation: purchaseFlash 0.8s ease; }
@keyframes purchaseFlash { 30% { box-shadow: 0 0 70px rgba(250, 204, 21, 0.34); } }

.profile-cosmetic-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-cosmetic-chip,
.profile-cosmetic-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.62);
  color: rgba(226, 232, 240, 0.86);
  font-size: 12px;
}

.profile-cosmetic-chip i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.profile-cosmetic-chip small { color: var(--rarity, #94a3b8); }
.profile-cosmetic-empty { border-radius: 16px; }

.result-economy-rewards { margin-top: 16px; }
.economy-result-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.economy-result-card strong {
  display: block;
  font-size: 24px;
  color: #fef3c7;
}

.economy-result-card ul {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.economy-result-card li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.reward-achievements {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reward-achievements em {
  padding: 6px 9px;
  border-radius: 999px;
  color: #fef3c7;
  background: rgba(250, 204, 21, 0.14);
  font-style: normal;
}

.reward-reveal { animation: rewardReveal 0.7s cubic-bezier(.2,.8,.2,1); }
@keyframes rewardReveal {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
  .shop-panel-root {
    padding-right: 0;
  }

  .shop-hero {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .shop-balance-card { justify-items: start; }
  .shop-category { font-size: 0.72rem; padding-block: 6px; }
  .shop-items-area { padding-right: 0; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
  .shop-achievements { padding: 10px; }
  .achievement-grid { grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr)); gap: 7px; }
  .achievement-card { padding: 8px; }
  .achievement-card small { font-size: 0.68rem; }
  .achievement-progress { height: 6px; margin-top: 7px; }
}

.dev-badge {
  --dev-green: #22c55e;
  display: inline-flex;
  align-items: center;
  margin-right: 0.38rem;
  padding: 0.12rem 0.42rem;
  border: 1px solid rgba(34, 197, 94, 0.82);
  border-radius: 999px;
  background:
    linear-gradient(110deg, rgba(5, 46, 22, 0.95), rgba(34, 197, 94, 0.34), rgba(20, 83, 45, 0.95));
  color: #dcfce7;
  overflow: hidden;
  box-shadow: inset 0 0 7px rgba(187, 247, 208, 0.16);
  font-size: 0.68em;
  font-weight: 950;
  letter-spacing: 0.13em;
  line-height: 1.25;
  text-shadow: 0 0 5px rgba(220, 252, 231, 0.5);
  vertical-align: middle;
  animation: devBadgePulse 1.9s ease-in-out infinite;
}

.dev-name-glow {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #dcfce7;
  font-weight: 850;
  text-overflow: ellipsis;
  vertical-align: middle;
  text-shadow:
    0 0 5px rgba(220, 252, 231, 0.48),
    0 0 12px rgba(34, 197, 94, 0.32);
}

.dev-badge:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: inset 0 0 8px rgba(187, 247, 208, 0.2);
}

.dev-profile-card,
.profile-view.dev-profile-card {
  position: relative;
  border-color: rgba(34, 197, 94, 0.72);
  background:
    linear-gradient(rgba(14, 14, 14, 0.84), rgba(14, 14, 14, 0.84)) padding-box,
    linear-gradient(120deg, rgba(34, 197, 94, 0.9), rgba(187, 247, 208, 0.22), rgba(16, 185, 129, 0.95)) border-box;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.24),
    0 0 30px rgba(34, 197, 94, 0.22),
    0 18px 44px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.dev-profile-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(187, 247, 208, 0.24), transparent);
  transform: translateX(-130%);
  animation: devCardSweep 3.4s ease-in-out infinite;
}

.dev-balance {
  color: #bbf7d0;
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.95), 0 0 26px rgba(34, 197, 94, 0.35);
}

@keyframes devBadgePulse {
  0%, 100% {
    filter: none;
    box-shadow: inset 0 0 6px rgba(187, 247, 208, 0.14);
  }
  50% {
    filter: none;
    box-shadow: inset 0 0 8px rgba(187, 247, 208, 0.2);
  }
}

@keyframes devCardSweep {
  0%, 35% { transform: translateX(-130%); }
  70%, 100% { transform: translateX(130%); }
}

body[data-visual-theme="midnight"] {
  --bg: #030712;
  --panel: rgba(10, 13, 28, 0.9);
  --surface-rgb: 10, 13, 28;
  --surface-strong-rgb: 20, 24, 45;
  --accent: #fbbf24;
  --accent-rgb: 251, 191, 36;
  --accent-2: #38bdf8;
}

.profile-danger-zone,
.daily-reward-card {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent);
  background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--danger) 18%, transparent), transparent 50%), rgba(255, 255, 255, 0.04);
}

.profile-danger-zone strong,
.daily-reward-amount strong {
  color: var(--text);
}

.profile-danger-zone span {
  color: var(--theme-text-faint);
  font-size: 0.84rem;
  line-height: 1.45;
}

.daily-reward-card {
  overflow: hidden;
  border-color: rgba(var(--accent-rgb), 0.34);
  background:
    radial-gradient(circle at 86% 0%, rgba(var(--accent-rgb), 0.24), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(var(--surface-rgb), 0.72);
}

.daily-reward-amount {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.16);
}

.daily-reward-amount span {
  color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.5));
}

.daily-reward-timer {
  margin: 0;
  color: var(--theme-text-soft);
  font-weight: 800;
}

body[data-screen="game"] .friends-system,
body[data-screen="voting"] .friends-system,
body[data-screen="spyGuess"] .friends-system {
  display: none;
}

.friends-toggle {
  grid-template-columns: 38px auto minmax(0, auto);
  gap: 10px;
  min-width: 160px;
  min-height: 52px;
  padding: 7px 12px 7px 8px;
}

.friends-toggle-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

.friends-toggle-copy strong {
  font-size: 0.86rem;
}

.friends-toggle-copy small {
  font-size: 0.65rem;
}

/* AAA futuristic Daily Reward arena */
.daily-reward-arena {
  --daily-cyan: #22d3ee;
  --daily-blue: #3b82f6;
  --daily-violet: #8b5cf6;
  --daily-pink: #ec4899;
  --daily-gold: #facc15;
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  height: 100%;
  min-height: 0;
  margin-top: 0;
  padding: clamp(16px, 2.5vw, 26px) clamp(12px, 1.5vw, 18px) max(46px, clamp(38px, 4vw, 58px)) clamp(16px, 2.5vw, 26px);
  scroll-padding-bottom: max(46px, clamp(38px, 4vw, 58px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  isolation: isolate;
  border: 1px solid rgba(139, 92, 246, 0.48);
  border-radius: 30px;
  background:
    radial-gradient(circle at 15% 14%, rgba(34, 211, 238, 0.24), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(236, 72, 153, 0.22), transparent 34%),
    radial-gradient(circle at 50% 95%, rgba(139, 92, 246, 0.22), transparent 44%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(17, 24, 39, 0.66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -28px 60px rgba(2, 6, 23, 0.34),
    0 24px 70px rgba(2, 6, 23, 0.48),
    0 0 46px rgba(139, 92, 246, 0.22);
}

.daily-reward-arena::before,
.daily-reward-arena::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.daily-reward-arena::before {
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.8), rgba(139, 92, 246, 0.18), rgba(236, 72, 153, 0.72), rgba(34, 211, 238, 0.7));
  background-size: 250% 250%;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: dailyBorderFlow 7s linear infinite;
}

.daily-reward-arena::after {
  inset: -30% -20%;
  background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, 0.12) 46%, transparent 58%);
  transform: translateX(-45%) rotate(4deg);
  animation: dailyShimmerSweep 5.8s ease-in-out infinite;
}

.daily-ambient {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
  animation: dailyAmbientFloat 8s ease-in-out infinite alternate;
}

.daily-ambient-a { top: -72px; right: 12%; background: rgba(34, 211, 238, 0.44); }
.daily-ambient-b { bottom: -90px; left: 8%; background: rgba(139, 92, 246, 0.52); animation-delay: -2.4s; }

.daily-particle-field,
.daily-particle-field i {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.daily-particle-field i {
  inset: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(191, 219, 254, 0.9);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.9);
  animation: dailyParticleFloat 8s ease-in-out infinite;
}
.daily-particle-field i:nth-child(1) { left: 8%; top: 22%; animation-delay: -1s; }
.daily-particle-field i:nth-child(2) { left: 18%; top: 76%; animation-delay: -3s; }
.daily-particle-field i:nth-child(3) { left: 36%; top: 14%; animation-delay: -5s; }
.daily-particle-field i:nth-child(4) { left: 58%; top: 78%; animation-delay: -2s; }
.daily-particle-field i:nth-child(5) { left: 76%; top: 26%; animation-delay: -4s; }
.daily-particle-field i:nth-child(6) { left: 88%; top: 64%; animation-delay: -6s; }
.daily-particle-field i:nth-child(7) { left: 45%; top: 48%; animation-delay: -7s; }
.daily-particle-field i:nth-child(8) { left: 66%; top: 10%; animation-delay: -2.8s; }

.daily-reward-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
}

.daily-title-stack { display: grid; gap: 5px; }
.daily-kicker {
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid rgba(34, 211, 238, 0.36);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.1);
  color: #a5f3fc;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.66);
}
.daily-title-stack h3 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.07em;
  color: #f8fbff;
  text-shadow: 0 0 26px rgba(139, 92, 246, 0.58), 0 0 52px rgba(34, 211, 238, 0.22);
}
.daily-title-stack p {
  margin: 0;
  color: rgba(226, 232, 240, 0.74);
  font-weight: 750;
}

.daily-countdown-capsule {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-width: clamp(188px, 18vw, 230px);
  min-height: 70px;
  padding: 12px 20px;
  text-align: center;
  border: 1px solid rgba(34, 211, 238, 0.46);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.76), rgba(30, 41, 59, 0.46));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 28px rgba(34, 211, 238, 0.2), 0 0 44px rgba(139, 92, 246, 0.14);
}
.daily-countdown-capsule span { display: block; color: rgba(191, 219, 254, 0.66); font-size: 0.72rem; font-weight: 850; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.12em; }
.daily-countdown-capsule strong { display: block; color: #e0f2fe; font-size: clamp(1rem, 2.3vw, 1.45rem); line-height: 1; letter-spacing: 0.08em; text-align: center; text-shadow: 0 0 16px rgba(34, 211, 238, 0.84); }

.daily-reward-stage {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(240px, 0.75fr);
  gap: clamp(12px, 2vw, 18px);
  align-items: stretch;
  margin-bottom: clamp(6px, 1vw, 12px);
}

.daily-main-reward,
.daily-claim-panel,
.daily-streak-system,
.daily-bonus-missions {
  position: relative;
  overflow: visible;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(145deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035));
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 16px 42px rgba(2, 6, 23, 0.32);
}

.daily-main-reward {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 3vw, 28px);
  align-items: center;
  min-height: 240px;
  padding: clamp(18px, 4vw, 32px);
  border-radius: 28px;
  border-color: rgba(139, 92, 246, 0.42);
  background:
    radial-gradient(circle at 25% 50%, rgba(250, 204, 21, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.08));
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
  animation: dailyGlowPulse 3.6s ease-in-out infinite;
}
.daily-main-reward:hover { transform: translateY(-3px) scale(1.012); border-color: rgba(34, 211, 238, 0.62); box-shadow: 0 22px 70px rgba(34, 211, 238, 0.16), 0 0 58px rgba(139, 92, 246, 0.25); }

.daily-vinyl-orbit {
  display: grid;
  place-items: center;
  width: clamp(118px, 16vw, 178px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(34, 211, 238, 0.08), rgba(139, 92, 246, 0.42), rgba(250, 204, 21, 0.4), rgba(34, 211, 238, 0.08));
  box-shadow: 0 0 48px rgba(139, 92, 246, 0.36), inset 0 0 28px rgba(255,255,255,0.08);
  animation: dailySpin 12s linear infinite;
}
.daily-vinyl-coin {
  position: relative;
  display: block;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #020617 0 9px, #111827 10px 13px, #172554 14px 17px), conic-gradient(#22d3ee, #8b5cf6, #ec4899, #facc15, #22d3ee);
  box-shadow: inset 0 0 24px rgba(255,255,255,0.13), 0 0 44px rgba(34, 211, 238, 0.44), 0 0 76px rgba(139, 92, 246, 0.28);
  animation: dailySpinReverse 5s linear infinite;
}
.daily-vinyl-coin::before,
.daily-vinyl-coin::after { content: ""; position: absolute; border-radius: 50%; inset: 30%; background: radial-gradient(circle, #f8fafc 0 12%, #facc15 14% 34%, #7c3aed 36% 100%); box-shadow: 0 0 18px rgba(250, 204, 21, 0.55); }
.daily-vinyl-coin::after { inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,0.34) 44%, transparent 55%); mix-blend-mode: screen; animation: dailyCoinReflection 2.8s ease-in-out infinite; }
.daily-vinyl-coin i { position: absolute; inset: 45%; z-index: 1; border-radius: 50%; background: #020617; box-shadow: 0 0 0 6px rgba(255,255,255,0.1); }

.daily-main-copy { display: grid; gap: 6px; min-width: 0; }
.daily-reward-label { color: #a5f3fc; font-size: 0.75rem; font-weight: 950; letter-spacing: 0.14em; text-transform: uppercase; }
.daily-main-copy strong { font-size: clamp(2rem, 5.6vw, 4.4rem); line-height: 0.92; letter-spacing: -0.06em; color: #fefce8; text-shadow: 0 0 22px rgba(250, 204, 21, 0.42), 0 0 42px rgba(34, 211, 238, 0.24); }
.daily-main-copy small { color: rgba(226, 232, 240, 0.68); font-weight: 800; }

.daily-claim-panel { display: grid; align-content: center; gap: 12px; padding: clamp(16px, 2.8vw, 24px); border-radius: 28px; }
.daily-claim-button {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(118px, 14vw, 158px);
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(110deg, #2563eb, #7c3aed, #ec4899, #22d3ee);
  background-size: 260% 260%;
  box-shadow: 0 16px 44px rgba(124, 58, 237, 0.36), 0 0 34px rgba(34, 211, 238, 0.22), inset 0 1px 0 rgba(255,255,255,0.24);
  transition: transform 0.18s ease, filter 0.25s ease, box-shadow 0.25s ease;
  animation: dailyButtonGradient 4s ease infinite;
}
.daily-claim-button span { position: relative; z-index: 2; display: block; text-align: center; font-size: clamp(1.55rem, 3.2vw, 2.45rem); font-weight: 950; line-height: 1.18; letter-spacing: 0.045em; text-shadow: 0 0 16px rgba(255,255,255,0.45); animation: dailyClaimTextBreath 2.8s ease-in-out infinite; }
.daily-claim-button i { position: absolute; inset: -40% -20%; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.38) 50%, transparent 64%); transform: translateX(-70%); animation: dailyButtonShine 2.8s ease-in-out infinite; }
.daily-claim-button:not(:disabled):hover { transform: translateY(-2px) scale(1.02); filter: saturate(1.18) brightness(1.08); box-shadow: 0 20px 60px rgba(124, 58, 237, 0.48), 0 0 52px rgba(34, 211, 238, 0.34); }
.daily-claim-button:not(:disabled):active { transform: translateY(1px) scale(0.985); }
.daily-claim-button:disabled { cursor: not-allowed; filter: grayscale(0.3) brightness(0.72); opacity: 0.72; }

.daily-success-popup { justify-self: center; opacity: 0; transform: translateY(10px) scale(0.92); padding: 8px 13px; border: 1px solid rgba(250, 204, 21, 0.46); border-radius: 999px; color: #fef9c3; background: rgba(113, 63, 18, 0.35); box-shadow: 0 0 28px rgba(250, 204, 21, 0.22); font-weight: 950; pointer-events: none; }
.reward-claimed .daily-success-popup { animation: dailySuccessPop 1.65s cubic-bezier(.2,.9,.2,1); }
.reward-claimed .daily-main-reward::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(250,204,21,0.34), transparent 55%); animation: dailyClaimFlash 0.85s ease-out; }
.reward-claimed .daily-vinyl-orbit::before { content: "◍  ◍  ◍  ◍  ◍"; position: absolute; color: #fef3c7; letter-spacing: 0.8em; text-shadow: 0 0 16px rgba(250,204,21,0.9); animation: dailyFlyingVinyls 1.4s ease-out; }
.daily-reward-status { min-height: 20px; text-align: center; }

.daily-streak-system,
.daily-bonus-missions,
.daily-extra-info { padding: clamp(16px, 2vw, 22px); border-radius: 26px; }
.daily-streak-system { margin-top: clamp(6px, 1vw, 12px); margin-bottom: clamp(6px, 1vw, 12px); }
.daily-section-title { display: flex; justify-content: space-between; gap: 14px; align-items: end; margin-bottom: 16px; }
.daily-section-title strong { color: #f8fafc; font-size: 1.04rem; text-transform: uppercase; letter-spacing: 0.08em; }
.daily-section-title span { color: rgba(191, 219, 254, 0.66); font-size: 0.78rem; font-weight: 750; text-align: right; }
.daily-streak-track { --daily-progress: 0%; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: clamp(10px, 1.35vw, 16px); overflow: visible; padding: 10px 2px 4px; }
.daily-streak-track::before,
.daily-streak-track::after { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 3px; border-radius: 999px; transform: translateY(-50%); background: rgba(51, 65, 85, 0.8); z-index: 0; }
.daily-streak-track::after { right: auto; width: var(--daily-progress); background: linear-gradient(90deg, #22d3ee, #8b5cf6, #facc15); box-shadow: 0 0 18px rgba(34,211,238,0.6); transition: width 0.4s ease; }
.daily-streak-card { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 128px; padding: 16px 12px; border-radius: 20px; border: 1px solid rgba(148, 163, 184, 0.2); background: linear-gradient(160deg, rgba(15,23,42,0.9), rgba(30,41,59,0.58)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); transition: transform 0.24s ease, box-shadow 0.24s ease, opacity 0.24s ease; animation: dailyCardRise 0.5s ease both; animation-delay: calc(var(--delay) * 70ms); }
.daily-streak-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(34, 211, 238, 0.14), 0 0 24px rgba(139, 92, 246, 0.18); }
.daily-streak-card.active { border-color: rgba(250, 204, 21, 0.7); box-shadow: 0 0 0 1px rgba(250,204,21,0.2), 0 0 34px rgba(250, 204, 21, 0.22), inset 0 1px 0 rgba(255,255,255,0.18); animation: dailyCardRise 0.5s ease both, dailyActiveDayPulse 2s ease-in-out infinite; }
.daily-streak-card.claimed { border-color: rgba(34, 211, 238, 0.48); background: linear-gradient(160deg, rgba(14,116,144,0.36), rgba(67,56,202,0.26)); }
.daily-streak-card.future { opacity: 0.55; }
.daily-streak-day { color: rgba(191, 219, 254, 0.76); font-size: 0.74rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.daily-streak-card b { color: #fef3c7; font-size: 1.35rem; text-shadow: 0 0 16px rgba(250,204,21,0.35); }
.daily-streak-card i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #22d3ee; background: rgba(34, 211, 238, 0.1); box-shadow: inset 0 0 14px rgba(255,255,255,0.1), 0 0 18px rgba(34,211,238,0.18); font-style: normal; }

.daily-mission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(10px, 1.4vw, 16px); overflow: visible; }
.daily-mission-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; padding: 15px; border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(15, 23, 42, 0.58); transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease; animation: dailyCardRise 0.5s ease both; animation-delay: calc(var(--delay) * 80ms); }
.daily-mission-card:hover { transform: translateY(-3px); border-color: rgba(34, 211, 238, 0.45); box-shadow: 0 14px 32px rgba(34, 211, 238, 0.12); }
.daily-mission-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(139,92,246,0.25)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 0 20px rgba(139,92,246,0.18); }
.daily-mission-card strong { display: block; color: #e0f2fe; font-size: 0.86rem; line-height: 1.25; }
.daily-mission-card span { color: #fef08a; white-space: nowrap; }
.daily-mission-progress { height: 7px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(2, 6, 23, 0.72); }
.daily-extra-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin-bottom: 2px; border: 1px solid rgba(148, 163, 184, 0.18); background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 16px 42px rgba(2, 6, 23, 0.22); backdrop-filter: blur(18px); }
.daily-info-chip { min-width: 0; padding: 14px; border-radius: 20px; border: 1px solid rgba(34, 211, 238, 0.18); background: rgba(15, 23, 42, 0.54); }
.daily-info-chip.accent { border-color: rgba(250, 204, 21, 0.24); background: linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(124, 58, 237, 0.11)); }
.daily-info-chip strong { display: block; color: #e0f2fe; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.daily-info-chip span { display: block; margin-top: 5px; color: rgba(226, 232, 240, 0.68); font-size: 0.82rem; line-height: 1.45; }
.daily-mission-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #8b5cf6, #facc15); box-shadow: 0 0 14px rgba(34,211,238,0.6); animation: dailyProgressGlow 2.4s ease-in-out infinite; }

@keyframes dailyBorderFlow { to { background-position: 250% 0; } }
@keyframes dailyShimmerSweep { 0%, 35% { transform: translateX(-65%) rotate(4deg); opacity: 0; } 55% { opacity: 1; } 82%, 100% { transform: translateX(65%) rotate(4deg); opacity: 0; } }
@keyframes dailyAmbientFloat { to { transform: translate3d(22px, 18px, 0) scale(1.08); } }
@keyframes dailyParticleFloat { 0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.28; } 50% { transform: translateY(-28px) scale(1.35); opacity: 0.95; } }
@keyframes dailyGlowPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 16px 42px rgba(2,6,23,0.32), 0 0 26px rgba(139,92,246,0.16); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 20px 62px rgba(2,6,23,0.36), 0 0 44px rgba(34,211,238,0.22); } }
@keyframes dailySpin { to { transform: rotate(360deg); } }
@keyframes dailySpinReverse { to { transform: rotate(-360deg); } }
@keyframes dailyCoinReflection { 0%, 100% { opacity: 0.2; transform: rotate(0deg); } 50% { opacity: 0.55; transform: rotate(22deg); } }
@keyframes dailyButtonGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes dailyClaimTextBreath { 0%, 100% { text-shadow: 0 0 14px rgba(255,255,255,0.42), 0 0 24px rgba(34,211,238,0.16); filter: brightness(1); } 50% { text-shadow: 0 0 22px rgba(255,255,255,0.72), 0 0 38px rgba(34,211,238,0.34), 0 0 54px rgba(139,92,246,0.28); filter: brightness(1.08); } }
@keyframes dailyButtonShine { 0%, 40% { transform: translateX(-78%); } 70%, 100% { transform: translateX(78%); } }
@keyframes dailySuccessPop { 0% { opacity: 0; transform: translateY(12px) scale(0.88); } 18%, 78% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-16px) scale(0.96); } }
@keyframes dailyClaimFlash { from { opacity: 1; transform: scale(0.8); } to { opacity: 0; transform: scale(1.2); } }
@keyframes dailyFlyingVinyls { from { opacity: 1; transform: translateY(24px) scale(0.8); } to { opacity: 0; transform: translateY(-90px) scale(1.2); } }
@keyframes dailyCardRise { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dailyActiveDayPulse { 50% { box-shadow: 0 0 0 1px rgba(250,204,21,0.32), 0 0 42px rgba(250, 204, 21, 0.32), inset 0 1px 0 rgba(255,255,255,0.22); } }
@keyframes dailyProgressGlow { 50% { filter: brightness(1.25); } }

@media (max-width: 1180px) {
  .daily-reward-stage { grid-template-columns: 1fr; }
  .daily-claim-panel { min-height: 150px; }
}

@media (max-width: 820px) {
  .daily-reward-header { grid-template-columns: 1fr; }
  .daily-countdown-capsule { justify-self: start; min-width: min(100%, 230px); width: min(100%, 230px); }
  .daily-main-reward { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .daily-section-title { display: grid; }
  .daily-section-title span { text-align: left; }
  .daily-streak-track::before, .daily-streak-track::after { display: none; }
  .daily-extra-info { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .daily-reward-arena { padding: 13px; border-radius: 24px; }
  .daily-title-stack h3 { font-size: 2.15rem; }
  .daily-main-reward, .daily-claim-panel, .daily-streak-system, .daily-bonus-missions, .daily-extra-info { border-radius: 20px; }
  .daily-claim-button { min-height: clamp(104px, 24vw, 132px); }
  .daily-streak-track { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 9px; }
  .daily-streak-card { min-height: 112px; padding: 12px 8px; }
}

/* XP Booster premium energy-core dashboard */
.xp-booster-dashboard {
  --hold-progress: 0%;
  --charge-progress: 100%;
  --charge-ratio: 1;
  --orb-scale: 1;
  --glow-ratio: 1;
  --ring-opacity: 0.86;
  --orbit-opacity: 0.85;
  --orb-glow-tight: 56px;
  --orb-glow-wide: 110px;
  --orb-inner-glow: 36px;
  --charge-glow: 20px;
  --orb-pulse-scale: 1.045;
  --hold-pulse-from: 1.03;
  --hold-pulse-to: 1.13;
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: clamp(0.85rem, 1.6vw, 1.2rem);
  border: 1px solid rgba(139, 92, 246, 0.46);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 12%, rgba(56, 189, 248, 0.3), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(168, 85, 247, 0.32), transparent 30%),
    linear-gradient(135deg, rgba(8, 10, 28, 0.95), rgba(22, 12, 48, 0.9) 52%, rgba(5, 18, 38, 0.94));
  box-shadow: 0 24px 75px rgba(15, 23, 42, 0.55), inset 0 0 40px rgba(139, 92, 246, 0.17);
  isolation: isolate;
}

.xp-booster-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, #38bdf8, #8b5cf6, #f0abfc, #22d3ee, #38bdf8);
  background-size: 300% 300%;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.86;
  animation: xpBorderFlow 7s linear infinite;
  z-index: -1;
}

.xp-booster-dashboard::after {
  content: "";
  position: absolute;
  inset: -30% -35%;
  background: linear-gradient(110deg, transparent 37%, rgba(255, 255, 255, 0.15) 49%, transparent 61%);
  transform: translateX(-48%) rotate(8deg);
  animation: xpReflectionSweep 6.8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.xp-ambient {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  filter: blur(34px);
  opacity: 0.52;
  pointer-events: none;
}

.xp-ambient-one { left: -88px; top: 11%; background: rgba(56, 189, 248, 0.46); animation: xpFloat 9s ease-in-out infinite; }
.xp-ambient-two { right: -95px; bottom: 4%; background: rgba(168, 85, 247, 0.48); animation: xpFloat 11s ease-in-out infinite reverse; }

.xp-particle-field,
.xp-particle-field i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.xp-particle-field i {
  --size: 4px;
  left: calc(7% + (var(--i, 1) * 8%));
  top: calc(10% + (var(--i, 1) * 6%));
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 14px #38bdf8, 0 0 26px rgba(168, 85, 247, 0.72);
  opacity: 0.64;
  animation: xpParticleRise 5.5s ease-in-out infinite;
}

.xp-particle-field i:nth-child(1) { --i: 1; --size: 4px; animation-delay: -0.2s; }
.xp-particle-field i:nth-child(2) { --i: 2; --size: 6px; animation-delay: -1.4s; }
.xp-particle-field i:nth-child(3) { --i: 3; --size: 3px; animation-delay: -2.2s; }
.xp-particle-field i:nth-child(4) { --i: 4; --size: 5px; animation-delay: -0.8s; }
.xp-particle-field i:nth-child(5) { --i: 5; --size: 4px; animation-delay: -3s; }
.xp-particle-field i:nth-child(6) { --i: 6; --size: 7px; animation-delay: -1.8s; }
.xp-particle-field i:nth-child(7) { --i: 7; --size: 4px; animation-delay: -4s; }
.xp-particle-field i:nth-child(8) { --i: 8; --size: 5px; animation-delay: -2.7s; }
.xp-particle-field i:nth-child(9) { --i: 9; --size: 4px; animation-delay: -3.5s; }
.xp-particle-field i:nth-child(10) { --i: 10; --size: 3px; animation-delay: -1.1s; }

.xp-booster-header,
.xp-booster-stage,
.xp-booster-metrics,
.xp-success-popup {
  position: relative;
  z-index: 1;
}

.xp-booster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: clamp(0.55rem, 1.5vw, 0.95rem);
}

.xp-kicker {
  display: inline-flex;
  margin-bottom: 0.25rem;
  color: #67e8f9;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(103, 232, 249, 0.9);
}

.xp-booster-header h3 {
  margin: 0;
  font-size: clamp(1.9rem, 5.8vw, 3.9rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  background: linear-gradient(90deg, #f8fafc, #c4b5fd 38%, #67e8f9 70%, #f0abfc);
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.56));
}

.xp-booster-header p {
  max-width: 480px;
  margin: 0.45rem 0 0;
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.92rem;
  font-weight: 700;
}

.xp-header-icon {
  flex: 0 0 auto;
  width: clamp(84px, 12vw, 112px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.32));
  border: 1px solid rgba(103, 232, 249, 0.34);
  box-shadow: inset 0 0 28px rgba(56, 189, 248, 0.16), 0 0 34px rgba(139, 92, 246, 0.34);
  transform: perspective(600px) rotateY(-10deg);
}

.xp-header-icon span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 1000;
  color: #07111f;
  background: radial-gradient(circle at 35% 25%, #fff, #67e8f9 38%, #8b5cf6 100%);
  box-shadow: 0 0 20px #67e8f9, 0 0 40px rgba(139, 92, 246, 0.86);
  animation: xpPulse 2.5s ease-in-out infinite;
}

.xp-header-icon b {
  position: absolute;
  right: -8px;
  bottom: 10px;
  padding: 0.34rem 0.55rem;
  border-radius: 999px;
  color: #ecfeff;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.95), rgba(139, 92, 246, 0.95));
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.78);
  font-size: 0.68rem;
}

.xp-booster-stage {
  display: grid;
  grid-template-columns: minmax(210px, 0.88fr) minmax(240px, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 2.4vw, 1.4rem);
  margin: 0 auto;
}

.xp-core-wrap {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  min-height: clamp(245px, 34vw, 330px);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 30px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.18), rgba(15, 23, 42, 0.16) 50%, rgba(15, 23, 42, 0.02));
  cursor: pointer;
  touch-action: none;
  outline: none;
  transform: translateZ(0);
}

.xp-core-wrap[aria-disabled="true"] { cursor: not-allowed; }
.xp-core-wrap:focus-visible { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.28), 0 0 45px rgba(139, 92, 246, 0.42); }

.xp-core-orbit,
.xp-charge-track,
.xp-ring,
.xp-hold-progress,
.xp-shockwave,
.xp-cursor-particles,
.xp-cursor-particles i {
  position: absolute;
  pointer-events: none;
}

.xp-core-orbit {
  width: clamp(150px, 25vw, 250px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent, rgba(34, 211, 238, 0.24), transparent 34%, rgba(168, 85, 247, 0.22), transparent 70%);
  filter: blur(0.2px) drop-shadow(0 0 20px rgba(34, 211, 238, 0.32));
  opacity: var(--orbit-opacity);
  animation: xpRotate 14s linear infinite;
}

.xp-core-orbit-two { width: clamp(180px, 30vw, 290px); animation-duration: 18s; animation-direction: reverse; opacity: 0.5; }

.xp-charge-track {
  width: clamp(180px, 31vw, 305px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#67e8f9 var(--charge-progress), rgba(71, 85, 105, 0.22) 0);
  opacity: 0.82;
  filter: drop-shadow(0 0 var(--charge-glow) rgba(56, 189, 248, 0.72));
  transition: background 0.85s linear, opacity 0.35s ease, filter 0.35s ease;
}

.xp-charge-track::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background: rgba(8, 10, 28, 0.9);
}

.xp-ring {
  width: clamp(172px, 29vw, 282px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(103, 232, 249, 0.58);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.38), inset 0 0 20px rgba(139, 92, 246, 0.24);
  opacity: var(--ring-opacity);
  transform: translateZ(0);
}

.xp-ring-one { animation: xpRotate 9s linear infinite; }
.xp-ring-two { width: clamp(200px, 34vw, 320px); border-style: dashed; border-color: rgba(216, 180, 254, 0.52); animation: xpRotate 13s linear infinite reverse; }
.xp-ring-three { width: clamp(135px, 23vw, 230px); border-color: rgba(34, 211, 238, 0.34); transform: rotateX(68deg); animation: xpRotate 7s linear infinite; }

.xp-core-orb {
  position: relative;
  width: clamp(108px, 18vw, 172px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,0.98) 0 8%, rgba(165, 243, 252, 0.95) 18%, rgba(56, 189, 248, 0.9) 34%, rgba(139, 92, 246, 0.82) 68%, rgba(49, 46, 129, 0.9) 100%);
  box-shadow:
    0 0 var(--orb-glow-tight) rgba(103, 232, 249, 0.9),
    0 0 var(--orb-glow-wide) rgba(139, 92, 246, 0.74),
    inset -16px -22px 40px rgba(15, 23, 42, 0.5),
    inset 0 0 var(--orb-inner-glow) rgba(255,255,255,0.24);
  transform: scale(var(--orb-scale)) translateZ(0);
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, filter 0.45s ease;
  animation: xpCorePulse 2.35s ease-in-out infinite;
}

.xp-core-orb::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--charge-progress);
  background: linear-gradient(0deg, rgba(103, 232, 249, 0.72), rgba(255,255,255,0.34));
  opacity: 0.72;
  mix-blend-mode: screen;
  transition: height 0.85s linear;
}

.xp-core-orb::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 35% 20%, rgba(255,255,255,0.78), transparent 16%), linear-gradient(120deg, transparent 32%, rgba(255,255,255,0.24), transparent 54%);
  animation: xpOrbSheen 4.2s ease-in-out infinite;
  mix-blend-mode: screen;
}

.xp-core-orb i {
  width: 43%;
  aspect-ratio: 1;
  z-index: 1;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,0.48);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.36), 0 0 30px rgba(255,255,255,0.34);
}

.xp-core-orb b {
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 64%);
  opacity: 0;
  transform: scale(0.55);
}

.xp-hold-progress {
  width: clamp(128px, 21vw, 198px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#f0f9ff var(--hold-progress), rgba(255,255,255,0.09) 0);
  filter: drop-shadow(0 0 20px rgba(103, 232, 249, 0.95));
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.2s ease, transform 0.2s ease, background 1.5s linear;
}

.xp-hold-progress::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: rgba(8, 10, 28, 0.34);
}

.xp-cursor-particles {
  left: var(--pointer-x);
  top: var(--pointer-y);
  width: 8px;
  height: 8px;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.xp-cursor-particles i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e0f2fe;
  box-shadow: 0 0 12px #67e8f9, 0 0 22px rgba(168, 85, 247, 0.9);
}

.xp-cursor-particles i:nth-child(1) { --dx: 28px; --dy: -20px; }
.xp-cursor-particles i:nth-child(2) { --dx: -22px; --dy: -24px; }
.xp-cursor-particles i:nth-child(3) { --dx: 20px; --dy: 26px; }
.xp-cursor-particles i:nth-child(4) { --dx: -28px; --dy: 16px; }
.xp-cursor-particles i:nth-child(5) { --dx: 8px; --dy: -34px; }
.xp-cursor-particles i:nth-child(6) { --dx: -4px; --dy: 32px; }

.xp-shockwave {
  width: 130px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(103, 232, 249, 0.9);
  opacity: 0;
  transform: scale(0.5);
}

.xp-booster-dashboard.charging .xp-core-orb {
  animation: xpHoldOrbPulse 0.58s ease-in-out infinite alternate;
  filter: saturate(1.28) brightness(1.14);
}

.xp-booster-dashboard.charging .xp-core-orb b {
  animation: xpInnerCharge 1.5s linear forwards;
}

.xp-booster-dashboard.charging .xp-ring,
.xp-booster-dashboard.charging .xp-core-orbit {
  animation-duration: 3.8s;
  opacity: 1;
}

.xp-booster-dashboard.charging .xp-hold-progress {
  opacity: 1;
  transform: scale(1);
}

.xp-booster-dashboard.charging .xp-cursor-particles { opacity: 1; }
.xp-booster-dashboard.charging .xp-cursor-particles i { animation: xpCursorBurst 0.7s ease-out infinite; }
.xp-booster-dashboard.charging .xp-cursor-particles i:nth-child(2) { animation-delay: -0.12s; }
.xp-booster-dashboard.charging .xp-cursor-particles i:nth-child(3) { animation-delay: -0.24s; }
.xp-booster-dashboard.charging .xp-cursor-particles i:nth-child(4) { animation-delay: -0.36s; }
.xp-booster-dashboard.charging .xp-cursor-particles i:nth-child(5) { animation-delay: -0.48s; }
.xp-booster-dashboard.charging .xp-cursor-particles i:nth-child(6) { animation-delay: -0.6s; }

.xp-booster-dashboard.boosted .xp-shockwave { animation: xpShockwave 1s ease-out; }
.xp-booster-dashboard.boosted .xp-core-wrap { animation: xpChromaticPop 0.72s ease-out; }
.xp-booster-dashboard.boosted .xp-core-orb { animation: xpCoreBurst 0.9s ease-out; }
.xp-booster-dashboard.boosted .xp-ring { animation: xpBurstRing 0.75s ease-out; }

.xp-boost-copy span {
  display: block;
  color: #67e8f9;
  font-weight: 1000;
  font-size: clamp(1.55rem, 4.3vw, 3.2rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-shadow: 0 0 26px rgba(56, 189, 248, 0.7);
}

.xp-boost-copy strong {
  display: block;
  margin-top: 0.45rem;
  color: #f8fafc;
  font-size: clamp(0.98rem, 2vw, 1.28rem);
}

.xp-boost-copy small {
  display: block;
  margin-top: 0.45rem;
  color: rgba(226, 232, 240, 0.66);
  font-weight: 700;
}

.xp-booster-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.xp-metric {
  padding: 0.72rem 0.8rem;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.5);
  box-shadow: inset 0 0 22px rgba(255,255,255,0.04);
}

.xp-metric span {
  display: block;
  color: rgba(226, 232, 240, 0.58);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 900;
}

.xp-metric strong {
  display: block;
  margin-top: 0.28rem;
  color: #e0f2fe;
  font-size: clamp(0.92rem, 1.9vw, 1.22rem);
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.6);
}

.xp-booster-dashboard[data-xp-state="active"] .active-metric,
.xp-booster-dashboard[data-xp-state="ready"] .cooldown-metric {
  border-color: rgba(34, 211, 238, 0.62);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(34, 197, 94, 0.12));
}

.xp-success-popup {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 16px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  color: #ecfeff;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.96), rgba(6, 182, 212, 0.96));
  box-shadow: 0 0 32px rgba(34, 211, 238, 0.86);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.xp-success-popup.show {
  opacity: 1;
  transform: translate(-50%, -6px) scale(1);
}

.xp-booster-dashboard[data-xp-state="active"] .xp-core-orb {
  filter: hue-rotate(55deg) saturate(1.28) brightness(1.12);
  animation: xpUnstableCore 1.7s ease-in-out infinite;
}

.xp-booster-dashboard[data-xp-state="active"] .xp-ring,
.xp-booster-dashboard[data-xp-state="active"] .xp-core-orbit {
  opacity: 1;
  animation-duration: 6s;
}

.xp-booster-dashboard[data-xp-state="active"] .xp-particle-field i { opacity: 0.86; animation-duration: 4.2s; }

.xp-booster-dashboard[data-xp-state="cooldown"] {
  border-color: rgba(71, 85, 105, 0.5);
}

.xp-booster-dashboard[data-xp-state="cooldown"] .xp-core-wrap[aria-disabled="true"],
.xp-booster-dashboard[data-xp-state="locked"] .xp-core-wrap[aria-disabled="true"] {
  filter: saturate(0.82);
}

.xp-booster-dashboard[data-xp-state="locked"] .xp-core-orb,
.xp-booster-dashboard[data-xp-state="locked"] .xp-ring,
.xp-booster-dashboard[data-xp-state="locked"] .xp-core-orbit {
  opacity: 0.48;
  filter: grayscale(0.28) brightness(0.72);
}

.xp-booster-status {
  min-height: 1.1em;
  margin: 0.5rem 0 0;
  font-size: 0.86rem;
}

@keyframes xpBorderFlow { to { background-position: 300% 0; } }
@keyframes xpReflectionSweep { 0%, 42% { transform: translateX(-55%) rotate(8deg); } 72%, 100% { transform: translateX(55%) rotate(8deg); } }
@keyframes xpFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(24px, -20px, 0) scale(1.08); } }
@keyframes xpParticleRise { 0%, 100% { transform: translateY(30px) scale(0.8); opacity: 0.16; } 45% { opacity: 0.82; } 70% { transform: translateY(-58px) scale(1.2); opacity: 0.5; } }
@keyframes xpPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes xpRotate { to { transform: rotate(360deg); } }
@keyframes xpCorePulse { 0%, 100% { transform: scale(var(--orb-scale)); } 50% { transform: scale(var(--orb-pulse-scale)); } }
@keyframes xpOrbSheen { 0%, 35% { transform: translateX(-18%) rotate(18deg); } 70%, 100% { transform: translateX(20%) rotate(18deg); } }
@keyframes xpHoldOrbPulse { from { transform: scale(var(--hold-pulse-from)); box-shadow: 0 0 46px rgba(103, 232, 249, 0.92), 0 0 90px rgba(139, 92, 246, 0.78), inset -16px -22px 40px rgba(15, 23, 42, 0.5); } to { transform: scale(var(--hold-pulse-to)); box-shadow: 0 0 68px rgba(103, 232, 249, 1), 0 0 125px rgba(168, 85, 247, 0.95), inset 0 0 34px rgba(255,255,255,0.28); } }
@keyframes xpInnerCharge { from { opacity: 0.15; transform: scale(0.55); } to { opacity: 0.95; transform: scale(1.28); } }
@keyframes xpCursorBurst { 0% { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate3d(var(--dx), var(--dy), 0) scale(0.05); opacity: 0; } }
@keyframes xpShockwave { 0% { opacity: 0.95; transform: scale(0.55); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes xpChromaticPop { 0% { filter: none; } 35% { filter: drop-shadow(8px 0 rgba(34, 211, 238, 0.65)) drop-shadow(-8px 0 rgba(236, 72, 153, 0.48)) saturate(1.6); } 100% { filter: none; } }
@keyframes xpCoreBurst { 0% { transform: scale(var(--orb-scale)); opacity: 1; } 32% { transform: scale(1.28); opacity: 0.82; } 58% { transform: scale(0.82); opacity: 0.5; } 100% { transform: scale(1.04); opacity: 1; } }
@keyframes xpBurstRing { 0% { transform: scale(0.86); opacity: 1; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes xpUnstableCore { 0%, 100% { transform: scale(1.02); } 35% { transform: scale(1.075) translate3d(1px, -1px, 0); } 68% { transform: scale(1.035) translate3d(-1px, 1px, 0); } }

@media (max-width: 820px) {
  .xp-booster-dashboard { border-radius: 24px; }
  .xp-booster-header { align-items: flex-start; }
  .xp-header-icon { width: 92px; border-radius: 22px; }
  .xp-booster-stage { grid-template-columns: 1fr; text-align: center; transform: none; margin-bottom: 0.8rem; }
  .xp-core-wrap { min-height: 246px; }
  .xp-booster-metrics { max-width: 520px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 560px) {
  .xp-booster-dashboard { padding: 0.82rem; }
  .xp-booster-header { flex-direction: row; }
  .xp-header-icon { width: 76px; }
  .xp-header-icon b { display: none; }
  .xp-booster-header p { font-size: 0.82rem; }
  .xp-booster-stage { gap: 0.55rem; }
  .xp-core-wrap { min-height: 220px; }
  .xp-booster-metrics { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .xp-metric { padding: 0.62rem; border-radius: 15px; }
  .xp-metric strong { font-size: 0.82rem; }
}

/* Daily Reward + XP Booster cinematic polish pass */
.daily-main-copy small:empty { display: none; }
.daily-claim-panel {
  min-height: 240px;
  padding: 0;
  overflow: hidden;
  border-color: rgba(34, 211, 238, 0.32);
  background:
    radial-gradient(circle at 50% 8%, rgba(34, 211, 238, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(67, 56, 202, 0.18));
}
.daily-claim-button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  min-height: 100%;
  height: 100%;
  padding: clamp(24px, 4vw, 42px) 18px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  isolation: isolate;
}
.daily-claim-button::before,
.daily-claim-button::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 22px;
  pointer-events: none;
}
.daily-claim-button::before {
  border: 1px solid rgba(224, 242, 254, 0.32);
  box-shadow: inset 0 0 32px rgba(255,255,255,0.12), 0 0 34px rgba(34,211,238,0.26);
}
.daily-claim-button::after {
  inset: 26px;
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 62%);
  mix-blend-mode: screen;
}
.daily-claim-button span {
  font-size: clamp(1.85rem, 4.5vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-align: center;
  text-transform: uppercase;
}
.daily-claim-button small {
  position: relative;
  z-index: 2;
  color: rgba(224, 242, 254, 0.78);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.58);
}
.daily-claim-button:disabled {
  opacity: 1;
  color: rgba(226, 232, 240, 0.5);
  background:
    radial-gradient(circle at 50% 18%, rgba(34, 211, 238, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(49, 46, 129, 0.48));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 42px rgba(34,211,238,0.08), 0 0 26px rgba(139,92,246,0.12);
}
.daily-claim-button:disabled i { opacity: 0.22; animation-duration: 5.2s; }
.daily-streak-card { animation: dailyCardRise 0.5s ease both; animation-delay: calc(var(--delay) * 70ms); will-change: auto; }
.daily-streak-card.active { animation: dailyCardRise 0.5s ease both; }
.daily-streak-card.active::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 28px rgba(250,204,21,0.22), inset 0 0 20px rgba(250,204,21,0.08);
}
.daily-mission-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.daily-mission-card strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.daily-mission-counter {
  grid-column: 3;
  grid-row: 1;
  min-width: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(34, 211, 238, 0.34);
  border-radius: 14px;
  color: #f8fafc;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(139, 92, 246, 0.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 18px rgba(34,211,238,0.12);
  font-style: normal;
  font-weight: 1000;
  text-align: center;
  letter-spacing: 0.04em;
}
.daily-mission-progress { display: none; }
.daily-extra-info { display: none; }

.xp-booster-dashboard {
  --hold-white: 0;
  --shake-distance: 0px;
}
.xp-booster-stage {
  grid-template-columns: minmax(250px, 0.95fr) minmax(260px, 1.05fr);
  align-items: center;
  justify-items: stretch;
  gap: clamp(1.35rem, 4vw, 3.2rem);
  margin: clamp(0.2rem, 0.9vw, 0.65rem) 0 clamp(0.7rem, 1.8vw, 1.35rem);
  transform: translateY(clamp(-30px, -2vw, -20px));
}
.xp-core-wrap {
  justify-self: start;
  align-self: center;
  width: min(100%, 430px);
  min-height: clamp(300px, 39vw, 405px);
  contain: layout paint;
  will-change: transform, filter;
}
.xp-boost-copy { align-self: center; max-width: 520px; }
.xp-energy-cracks,
.xp-energy-cracks i,
.xp-fragment-field,
.xp-fragment-field i { position: absolute; pointer-events: none; }
.xp-energy-cracks {
  width: clamp(108px, 18vw, 172px);
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: 0;
  z-index: 4;
  transform: scale(var(--orb-scale));
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.88));
}
.xp-energy-cracks i {
  left: 50%;
  top: 50%;
  width: 2px;
  height: 42%;
  border-radius: 999px;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.96), rgba(103,232,249,0.4), rgba(255,255,255,0));
  clip-path: polygon(45% 0, 70% 25%, 52% 46%, 82% 62%, 42% 100%, 28% 70%, 48% 52%, 22% 30%);
}
.xp-energy-cracks i:nth-child(1) { transform: rotate(18deg) translateY(-10%); }
.xp-energy-cracks i:nth-child(2) { transform: rotate(91deg) translateY(-8%); height: 36%; }
.xp-energy-cracks i:nth-child(3) { transform: rotate(154deg) translateY(-12%); height: 44%; }
.xp-energy-cracks i:nth-child(4) { transform: rotate(226deg) translateY(-8%); height: 32%; }
.xp-energy-cracks i:nth-child(5) { transform: rotate(294deg) translateY(-14%); height: 40%; }
.xp-core-orb {
  backface-visibility: hidden;
  will-change: transform, filter, opacity;
}
.xp-core-orb::before {
  background:
    radial-gradient(circle at 50% calc(100% - var(--charge-progress)), rgba(255,255,255,0.8), transparent 26%),
    linear-gradient(0deg, rgba(255,255,255,0.42), rgba(103, 232, 249, 0.68));
}
.xp-booster-dashboard.charging {
  --hold-white: 1;
  --shake-distance: 2px;
}
.xp-booster-dashboard.charging .xp-core-wrap { animation: xpMicroShake 0.16s steps(2, end) infinite; }
.xp-booster-dashboard.charging .xp-core-orb {
  background:
    radial-gradient(circle at 44% 35%, rgba(255,255,255,1) 0 20%, rgba(240,249,255,0.98) 32%, rgba(103,232,249,0.9) 48%, rgba(139,92,246,0.76) 75%, rgba(49,46,129,0.82) 100%);
  animation: xpHoldOverload 0.42s ease-in-out infinite alternate;
  filter: saturate(1.55) brightness(1.34) contrast(1.05);
}
.xp-booster-dashboard.charging .xp-core-orb::after { animation-duration: 0.95s; opacity: 0.9; }
.xp-booster-dashboard.charging .xp-energy-cracks { opacity: 0.95; animation: xpCrackFlicker 0.34s steps(2, end) infinite; }
.xp-booster-dashboard.charging .xp-ring { animation-duration: 1.6s; filter: drop-shadow(0 0 16px rgba(255,255,255,0.58)); }
.xp-booster-dashboard.charging .xp-core-orbit { animation-duration: 2.1s; }
.xp-booster-dashboard.charging .xp-particle-field i { opacity: 1; animation-duration: 2.2s; }
.xp-fragment-field { inset: 0; display: grid; place-items: center; opacity: 0; z-index: 5; }
.xp-fragment-field i {
  width: 10px;
  height: 22px;
  border-radius: 2px 8px 2px 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(103,232,249,0.82), rgba(139,92,246,0.55));
  box-shadow: 0 0 14px rgba(103,232,249,0.9), 0 0 26px rgba(236,72,153,0.42);
  clip-path: polygon(50% 0, 100% 34%, 76% 100%, 16% 78%, 0 22%);
}
.xp-fragment-field i:nth-child(1) { --fx: 140px; --fy: -92px; --fr: 78deg; }
.xp-fragment-field i:nth-child(2) { --fx: -154px; --fy: -74px; --fr: -112deg; }
.xp-fragment-field i:nth-child(3) { --fx: 118px; --fy: 118px; --fr: 168deg; }
.xp-fragment-field i:nth-child(4) { --fx: -132px; --fy: 104px; --fr: -42deg; }
.xp-fragment-field i:nth-child(5) { --fx: 34px; --fy: -166px; --fr: 242deg; }
.xp-fragment-field i:nth-child(6) { --fx: -18px; --fy: 174px; --fr: -212deg; }
.xp-fragment-field i:nth-child(7) { --fx: 190px; --fy: 8px; --fr: 120deg; }
.xp-fragment-field i:nth-child(8) { --fx: -190px; --fy: -4px; --fr: -86deg; }
.xp-fragment-field i:nth-child(9) { --fx: 82px; --fy: -142px; --fr: 312deg; }
.xp-fragment-field i:nth-child(10) { --fx: -86px; --fy: 146px; --fr: -256deg; }
.xp-fragment-field i:nth-child(11) { --fx: 168px; --fy: 68px; --fr: 36deg; }
.xp-fragment-field i:nth-child(12) { --fx: -168px; --fy: -62px; --fr: -172deg; }
.xp-booster-dashboard.boosted .xp-core-wrap { animation: xpExplosionChromatic 0.9s ease-out; }
.xp-booster-dashboard.boosted .xp-core-orb { animation: xpCoreDisintegrate 1.05s cubic-bezier(.12,.76,.18,1) forwards; }
.xp-booster-dashboard.boosted .xp-energy-cracks { opacity: 1; animation: xpCrackFlash 0.55s ease-out forwards; }
.xp-booster-dashboard.boosted .xp-shockwave { animation: xpMegaShockwave 1.15s ease-out; }
.xp-booster-dashboard.boosted .xp-fragment-field { opacity: 1; }
.xp-booster-dashboard.boosted .xp-fragment-field i { animation: xpShardBurst 1s cubic-bezier(.12,.76,.18,1) forwards; }
.xp-booster-dashboard.boosted .xp-ring { animation: xpOuterRingVibrate 0.9s ease-out; }
.xp-booster-dashboard[data-xp-state="active"] .xp-core-orb,
.xp-booster-dashboard[data-xp-state="cooldown"] .xp-core-orb {
  opacity: calc(0.36 + (var(--charge-ratio) * 0.64));
  filter: saturate(calc(0.85 + var(--charge-ratio))) brightness(calc(0.72 + (var(--charge-ratio) * 0.5)));
}
.xp-booster-dashboard[data-xp-state="active"] .xp-charge-track,
.xp-booster-dashboard[data-xp-state="cooldown"] .xp-charge-track {
  background: conic-gradient(rgba(103,232,249,0.95) var(--charge-progress), rgba(15,23,42,0.24) 0);
}
.xp-booster-dashboard[data-xp-state="active"] .xp-core-wrap::after,
.xp-booster-dashboard[data-xp-state="cooldown"] .xp-core-wrap::after {
  content: "";
  position: absolute;
  width: clamp(124px, 20vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2,6,23,0.86) 0 42%, rgba(34,211,238,0.1) 58%, transparent 72%);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.72), 0 0 42px rgba(34,211,238,0.16);
  z-index: 0;
}
.xp-core-orbit, .xp-charge-track, .xp-ring, .xp-core-orb, .xp-hold-progress, .xp-energy-cracks, .xp-fragment-field, .xp-shockwave { z-index: 1; }
.xp-core-orb, .xp-energy-cracks { z-index: 3; }
.xp-fragment-field, .xp-shockwave { z-index: 5; }

@keyframes xpHoldOverload {
  from { transform: scale(calc(var(--orb-scale) * 0.92)) translate3d(-1px, 1px, 0); box-shadow: 0 0 58px rgba(255,255,255,0.74), 0 0 110px rgba(103,232,249,0.92), inset 0 0 30px rgba(255,255,255,0.22); }
  to { transform: scale(calc(var(--orb-scale) * 0.78)) translate3d(1px, -1px, 0); box-shadow: 0 0 86px rgba(255,255,255,0.95), 0 0 150px rgba(168,85,247,0.95), inset 0 0 50px rgba(255,255,255,0.44); }
}
@keyframes xpMicroShake { 0%,100% { transform: translate3d(0,0,0); } 25% { transform: translate3d(var(--shake-distance), calc(var(--shake-distance) * -1), 0); } 50% { transform: translate3d(calc(var(--shake-distance) * -1), var(--shake-distance), 0); } 75% { transform: translate3d(1px, 0, 0); } }
@keyframes xpCrackFlicker { 50% { opacity: 0.42; filter: drop-shadow(0 0 18px rgba(255,255,255,1)); } }
@keyframes xpCrackFlash { 0% { transform: scale(0.9); opacity: 0.2; } 35% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes xpCoreDisintegrate { 0% { transform: scale(0.82); opacity: 1; filter: brightness(2.2) saturate(1.8); } 26% { transform: scale(1.42); opacity: 1; filter: brightness(4) saturate(0); } 46% { transform: scale(0.32); opacity: 0.38; } 100% { transform: scale(0.04); opacity: 0; filter: brightness(0.2); } }
@keyframes xpMegaShockwave { 0% { opacity: 1; transform: scale(0.42); border-width: 8px; box-shadow: 0 0 48px rgba(255,255,255,0.9); } 100% { opacity: 0; transform: scale(4.8); border-width: 1px; box-shadow: 0 0 120px rgba(34,211,238,0); } }
@keyframes xpExplosionChromatic { 0% { filter: none; } 18% { filter: brightness(2.8) saturate(0) drop-shadow(10px 0 rgba(34,211,238,0.95)) drop-shadow(-10px 0 rgba(236,72,153,0.75)); } 100% { filter: none; } }
@keyframes xpShardBurst { 0% { transform: translate3d(0,0,0) rotate(0deg) scale(0.35); opacity: 0; } 18% { opacity: 1; } 100% { transform: translate3d(var(--fx), var(--fy), 0) rotate(var(--fr)) scale(0.05); opacity: 0; } }
@keyframes xpOuterRingVibrate { 0%,100% { transform: translate3d(0,0,0) scale(1); } 18% { transform: translate3d(3px,-2px,0) scale(1.04); } 38% { transform: translate3d(-3px,2px,0) scale(1.08); } 62% { transform: translate3d(2px,1px,0) scale(1.02); } }

@media (max-width: 820px) {
  .xp-booster-stage { grid-template-columns: 1fr; text-align: center; transform: none; margin-bottom: 0.8rem; }
  .xp-core-wrap { justify-self: center; width: 100%; min-height: 246px; }
  .xp-boost-copy { justify-self: center; }
  .daily-claim-panel { min-height: 190px; }
}

@media (max-width: 560px) {
  .xp-core-wrap { min-height: 220px; }
  .daily-mission-card { grid-template-columns: auto minmax(0, 1fr); }
  .daily-mission-counter { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 8px; }
  .daily-claim-button span { font-size: clamp(1.55rem, 9vw, 2.45rem); }
}
.xp-booster-dashboard[data-xp-state="active"] .xp-core-orb,
.xp-booster-dashboard[data-xp-state="cooldown"] .xp-core-orb {
  animation: xpReconstructCore 2.8s ease-in-out infinite;
}
@keyframes xpReconstructCore {
  0%, 100% { transform: scale(var(--orb-scale)) translate3d(0, 0, 0); }
  50% { transform: scale(calc(var(--orb-scale) * 1.08)) translate3d(0, -1px, 0); }
}

/* Cinematic center terminal: menu-only replacement. */
.vinyl-terminal-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 650px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  padding: clamp(16px, 2.6vw, 30px);
  border-color: rgba(var(--accent-rgb), 0.34);
  background:
    radial-gradient(circle at 18% 12%, rgba(var(--accent-rgb), 0.2), transparent 15rem),
    radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 16rem),
    radial-gradient(circle at 50% 72%, rgba(0, 0, 0, 0.82), transparent 17rem),
    linear-gradient(150deg, rgba(var(--surface-strong-rgb), 0.88), rgba(var(--surface-rgb), 0.78) 48%, color-mix(in srgb, var(--accent) 13%, var(--panel))),
    var(--panel);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.58),
    0 0 62px rgba(var(--accent-rgb), 0.2),
    0 0 42px color-mix(in srgb, var(--accent-2) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 70px rgba(var(--accent-rgb), 0.045);
}

.vinyl-terminal-card::before,
.vinyl-terminal-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.vinyl-terminal-card::before {
  inset: -35% -25%;
  background:
    conic-gradient(from 115deg at 50% 50%, transparent, rgba(var(--accent-rgb), 0.16), transparent 18%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 36%);
  filter: blur(22px);
  opacity: 0.58;
  animation: terminalLightSweep 13s linear infinite;
}

.vinyl-terminal-card::after {
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.12), transparent),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 8px);
  mix-blend-mode: screen;
  opacity: 0.38;
  animation: terminalScanDrift 7s ease-in-out infinite alternate;
}

.vinyl-terminal-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.vinyl-terminal-particles i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 72%, var(--text));
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.86), 0 0 28px color-mix(in srgb, var(--accent-2) 36%, transparent);
  animation: terminalParticleFloat 8s ease-in-out infinite;
}

.vinyl-terminal-particles i:nth-child(1) { left: 9%; top: 22%; animation-delay: -1s; }
.vinyl-terminal-particles i:nth-child(2) { left: 18%; top: 78%; animation-delay: -5s; }
.vinyl-terminal-particles i:nth-child(3) { left: 32%; top: 14%; animation-delay: -3s; }
.vinyl-terminal-particles i:nth-child(4) { left: 49%; top: 84%; animation-delay: -7s; }
.vinyl-terminal-particles i:nth-child(5) { left: 61%; top: 20%; animation-delay: -2s; }
.vinyl-terminal-particles i:nth-child(6) { left: 76%; top: 73%; animation-delay: -6s; }
.vinyl-terminal-particles i:nth-child(7) { left: 86%; top: 36%; animation-delay: -4s; }
.vinyl-terminal-particles i:nth-child(8) { left: 92%; top: 58%; animation-delay: -8s; }

.vinyl-terminal-scan {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-rgb), 0.12) 49%, transparent 52%);
  opacity: 0.2;
  transform: translateY(-58%);
  animation: terminalScanLine 9s ease-in-out infinite;
}

.vinyl-terminal-card > :not(.vinyl-terminal-particles, .vinyl-terminal-scan) {
  position: relative;
  z-index: 1;
}

.terminal-eyebrow {
  margin-bottom: clamp(6px, 1.2vh, 10px);
  color: color-mix(in srgb, var(--accent-2) 72%, var(--text));
  letter-spacing: 0.14em;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.7);
  text-transform: lowercase;
}

.terminal-title {
  display: block;
  padding: 0 0 0.08em;
  font-size: clamp(3.4rem, min(11vw, 11vh), 7.2rem);
  line-height: 0.82;
  letter-spacing: -0.095em;
  text-transform: uppercase;
  background:
    linear-gradient(92deg, var(--text) 0%, color-mix(in srgb, var(--accent-2) 72%, var(--text)) 25%, var(--accent) 58%, color-mix(in srgb, var(--accent-2) 68%, var(--accent)) 78%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 24px rgba(var(--accent-rgb), 0.32),
    0 0 48px color-mix(in srgb, var(--accent-2) 24%, transparent);
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.28));
}

.terminal-subtitle {
  margin: clamp(4px, 0.8vh, 7px) auto clamp(12px, 2vh, 18px);
  max-width: 35rem;
  color: var(--theme-text-soft);
  font-size: clamp(0.62rem, 1.35vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.55;
  text-transform: lowercase;
}

.vinyl-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 390px, 40vh);
  aspect-ratio: 1;
  margin: 0 auto clamp(12px, 2vh, 18px);
}

.vinyl-glow-orbit {
  position: absolute;
  inset: 4.5%;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.84), color-mix(in srgb, var(--accent-2) 18%, transparent), color-mix(in srgb, var(--accent-2) 88%, transparent), rgba(var(--accent-rgb), 0.12));
  filter: blur(8px);
  opacity: 0.72;
  animation: terminalPulse 3.8s ease-in-out infinite;
}

.vinyl-record {
  position: relative;
  display: grid;
  place-items: center;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 7px),
    conic-gradient(from 22deg, rgba(255, 255, 255, 0.12), transparent 9%, rgba(var(--accent-rgb), 0.1) 13%, transparent 22%, color-mix(in srgb, var(--accent-2) 10%, transparent) 35%, transparent 48%, rgba(255, 255, 255, 0.08) 58%, transparent 70%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--panel-strong) 78%, #000000) 0 7%, #020617 7.2% 10%, rgba(var(--surface-strong-rgb), 0.92) 10.2% 15%, #02030a 15.3% 100%),
    conic-gradient(from 22deg, #050812, rgba(var(--surface-strong-rgb), 0.86), #02040b, color-mix(in srgb, var(--accent) 16%, #111827), #04050c, rgba(var(--surface-rgb), 0.9), #050812);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.72),
    0 0 46px rgba(var(--accent-rgb), 0.27),
    0 0 66px color-mix(in srgb, var(--accent-2) 19%, transparent),
    inset 0 0 38px rgba(255, 255, 255, 0.045),
    inset 0 0 95px rgba(0, 0, 0, 0.92);
  animation: vinylSpin 18s linear infinite;
}

.vinyl-record::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: inherit;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 8px, rgba(255, 255, 255, 0.105) 9px 10px, transparent 11px 15px),
    conic-gradient(from 210deg, transparent 0 10%, rgba(255, 255, 255, 0.16) 13%, transparent 18% 54%, rgba(var(--accent-rgb), 0.12) 59%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0.62;
}

.vinyl-record::after {
  content: "";
  position: absolute;
  inset: 43%;
  border-radius: 999px;
  background: radial-gradient(circle, var(--text) 0 9%, color-mix(in srgb, var(--accent-2) 78%, var(--accent)) 10% 18%, color-mix(in srgb, var(--accent) 28%, #111827) 20% 58%, #020617 60% 100%);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.52), inset 0 0 14px rgba(255, 255, 255, 0.24);
}

.vinyl-reflection {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  mix-blend-mode: screen;
}

.reflection-one {
  inset: 8% 15% 51% 24%;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.32), transparent 60%);
  filter: blur(5px);
  opacity: 0.42;
}

.reflection-two {
  inset: 54% 20% 12% 55%;
  background: linear-gradient(132deg, rgba(var(--accent-rgb), 0.18), transparent 62%);
  filter: blur(8px);
  opacity: 0.6;
}

.vinyl-label {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 25%;
  aspect-ratio: 1;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.24), color-mix(in srgb, var(--accent-2) 22%, rgba(var(--surface-strong-rgb), 0.72)) 54%, rgba(2, 6, 23, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 24px color-mix(in srgb, var(--accent-2) 25%, transparent);
  color: color-mix(in srgb, var(--accent-2) 72%, var(--text));
  text-transform: uppercase;
}

.vinyl-label b {
  font-size: clamp(0.95rem, 3vw, 1.55rem);
  letter-spacing: -0.08em;
}

.vinyl-label small {
  margin-top: -12%;
  font-size: 0.42rem;
  letter-spacing: 0.18em;
  opacity: 0.7;
}

.tonearm {
  position: absolute;
  top: 8%;
  right: 2%;
  width: 44%;
  height: 33%;
  z-index: 4;
  transform-origin: 82% 16%;
  animation: tonearmHover 4.8s ease-in-out infinite;
}

.tonearm-base {
  position: absolute;
  top: 0;
  right: 0;
  width: 27%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(226, 232, 240, 0.9), rgba(var(--surface-strong-rgb), 0.88) 55%, rgba(2, 6, 23, 0.95));
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.tonearm-beam {
  position: absolute;
  top: 20%;
  right: 19%;
  width: 76%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 78%, var(--accent)), rgba(226, 232, 240, 0.9) 38%, rgba(var(--accent-rgb), 0.82));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.34), 0 0 24px color-mix(in srgb, var(--accent-2) 22%, transparent);
  transform: rotate(34deg);
  transform-origin: 100% 50%;
}

.tonearm-head {
  position: absolute;
  left: 0;
  bottom: 10%;
  width: 18%;
  height: 16%;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(135deg, rgba(var(--surface-strong-rgb), 0.96), color-mix(in srgb, var(--accent) 34%, rgba(var(--surface-rgb), 0.9)));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.56), 0 0 28px color-mix(in srgb, var(--accent-2) 32%, transparent);
  transform: rotate(26deg);
}

.tonearm-head::after {
  content: "";
  position: absolute;
  left: 38%;
  bottom: -42%;
  width: 24%;
  height: 60%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 82%, var(--accent));
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.82), 0 0 28px color-mix(in srgb, var(--accent-2) 58%, transparent);
}

.terminal-controls {
  width: min(100%, 540px);
  margin: 0 auto;
}

.terminal-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.terminal-form-grid label span {
  color: color-mix(in srgb, var(--accent-2) 62%, var(--theme-text-soft));
  letter-spacing: 0.12em;
}

.terminal-form-grid input {
  padding: 12px 14px;
  border-color: rgba(var(--accent-rgb), 0.18);
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.74), rgba(var(--surface-rgb), 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 22px rgba(var(--accent-rgb), 0.05);
}

.terminal-actions {
  gap: 10px;
  margin-top: 12px;
}

.terminal-actions button {
  min-height: 44px;
  padding: 11px 16px;
}

.terminal-primary,
.terminal-secondary {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.terminal-primary {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 62%, var(--accent-2)) 46%, var(--accent-2) 100%);
  box-shadow: 0 16px 38px rgba(var(--accent-rgb), 0.34), 0 0 32px color-mix(in srgb, var(--accent-2) 18%, transparent);
}

.terminal-primary:hover:not(:disabled) {
  box-shadow: 0 20px 48px rgba(var(--accent-rgb), 0.46), 0 0 40px color-mix(in srgb, var(--accent-2) 28%, transparent);
}

.terminal-secondary,
button.terminal-secondary {
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background: linear-gradient(145deg, rgba(var(--surface-strong-rgb), 0.64), rgba(2, 6, 23, 0.44));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 24px rgba(var(--accent-rgb), 0.06);
}

.terminal-secondary:hover:not(:disabled),
button.terminal-secondary:hover:not(:disabled) {
  border-color: rgba(var(--accent-rgb), 0.52);
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.14), color-mix(in srgb, var(--accent-2) 18%, rgba(var(--surface-rgb), 0.2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 30px rgba(var(--accent-rgb), 0.16);
}

@keyframes vinylSpin {
  to { transform: rotate(360deg); }
}

@keyframes terminalPulse {
  0%, 100% { opacity: 0.56; transform: scale(0.992); }
  50% { opacity: 0.9; transform: scale(1.02); }
}

@keyframes tonearmHover {
  0%, 100% { transform: rotate(-1.2deg) translateY(0); }
  50% { transform: rotate(1.4deg) translateY(4px); }
}

@keyframes terminalLightSweep {
  to { transform: rotate(360deg); }
}

@keyframes terminalScanDrift {
  from { opacity: 0.24; transform: translateY(-6px); }
  to { opacity: 0.42; transform: translateY(6px); }
}

@keyframes terminalScanLine {
  0%, 18% { transform: translateY(-62%); opacity: 0; }
  40% { opacity: 0.18; }
  58%, 100% { transform: translateY(62%); opacity: 0; }
}

@keyframes terminalParticleFloat {
  0%, 100% { opacity: 0.14; transform: translate3d(0, 16px, 0) scale(0.75); }
  50% { opacity: 0.78; transform: translate3d(12px, -18px, 0) scale(1.16); }
}

@media (max-width: 720px) {
  .vinyl-terminal-card {
    width: min(100%, 560px);
    padding: clamp(14px, 4vw, 20px);
  }

  .terminal-title {
    font-size: clamp(3.15rem, min(17vw, 10vh), 5.6rem);
  }

  .terminal-subtitle {
    letter-spacing: 0.13em;
  }

  .vinyl-stage {
    width: min(100%, 340px, 37vh);
  }

  .terminal-form-grid {
    grid-template-columns: 1fr;
  }

  .terminal-actions button {
    font-size: clamp(0.72rem, 2.8vw, 0.88rem);
  }
}

@media (max-height: 700px) {
  .vinyl-terminal-card {
    padding: clamp(12px, 2vh, 18px);
  }

  .terminal-subtitle {
    margin-bottom: clamp(8px, 1.4vh, 12px);
    line-height: 1.38;
  }

  .vinyl-stage {
    width: min(100%, 310px, 32vh);
    margin-bottom: clamp(8px, 1.4vh, 12px);
  }

  .terminal-form-grid input {
    padding: 10px 12px;
  }

  .terminal-actions {
    gap: 8px;
    margin-top: 10px;
  }

  .terminal-actions button {
    min-height: 40px;
    padding: 9px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vinyl-terminal-card::before,
  .vinyl-terminal-card::after,
  .vinyl-terminal-particles i,
  .vinyl-terminal-scan,
  .vinyl-glow-orbit,
  .vinyl-record,
  .tonearm {
    animation: none;
  }
}

.dev-console-popup {
  position: fixed;
  top: 12vh;
  left: 24px;
  width: 420px;
  min-width: 280px;
  min-height: 180px;
  resize: both;
  overflow: auto;
  z-index: 160;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(2,6,23,.95);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(2,6,23,.45);
  padding: 10px;
}
.dev-console-popup.hidden { display: none; }
.dev-console-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:#e2e8f0; }
.dev-console-header { cursor: move; user-select: none; touch-action: none; }
.dev-console-popup.dragging { opacity: .94; }
.dev-console-header button { background:transparent; color:#cbd5e1; border:0; font-size:20px; cursor:pointer; }
.dev-console-output {
  white-space: pre-wrap;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #94f4c3;
  background: rgba(15,23,42,.88);
  border: 1px solid rgba(148,163,184,.3);
  border-radius: 8px;
  padding: 8px;
  height: 140px;
  overflow: auto;
}
.dev-console-input {
  width: 100%;
  margin-top: 8px;
  background: #020617;
  color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 8px;
  padding: 8px 10px;
  font: 13px ui-monospace, SFMono-Regular, Menlo, monospace;
}