/* ORYTHM menu.css
   Covers: main menu, lobbies browser, global scoreboard, options, about.
   The page-shell, hero, and mini-leaderboard live here. game.css covers the
   in-game stage; lobby.css covers the live lobby waiting room.
*/

/* ----- FLOATING STICKERS (decorative bobbing emoji-likes) -------------- */
.sticker-stage {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.float-sticker {
  position: absolute;
  font-family: 'Bagel Fat One', system-ui;
  font-weight: 400;
  user-select: none;
  will-change: transform;
  filter: drop-shadow(0 6px 16px oklch(20% 0.04 295 / .12));
}
.float-sticker.s-1 { top: 8%;  left: 6%;   font-size: 4rem; color: var(--pop-yellow); animation: stickerFloat calc(11s / var(--quality)) ease-in-out infinite alternate; }
.float-sticker.s-2 { top: 18%; right: 18%; font-size: 5rem; color: var(--pop-pink);   animation: stickerFloat calc(9s  / var(--quality)) ease-in-out -2s infinite alternate; }
.float-sticker.s-3 { top: 70%; left: 14%;  font-size: 3rem; color: var(--pop-grape);  animation: stickerFloat calc(13s / var(--quality)) ease-in-out -4s infinite alternate; }
.float-sticker.s-4 { top: 80%; right: 10%; font-size: 4.5rem; color: var(--pop-mint);  animation: stickerFloat calc(10s / var(--quality)) ease-in-out -1s infinite alternate; }
.float-sticker.s-5 { top: 38%; left: 4%;   font-size: 2.4rem; color: var(--pop-yellow); animation: stickerSpin calc(20s / var(--quality)) linear infinite; }
.float-sticker.s-6 { top: 60%; right: 6%;  font-size: 2.2rem; color: var(--pop-pink);   animation: stickerSpin calc(24s / var(--quality)) linear infinite reverse; }
.float-sticker.s-7 { top: 50%; left: 88%;  font-size: 3.4rem; color: var(--pop-sky);   animation: stickerFloat calc(12s / var(--quality)) ease-in-out -3s infinite alternate; }
.float-sticker.s-8 { top: 92%; left: 50%;  font-size: 2.6rem; color: var(--pop-grape); animation: stickerSpin calc(18s / var(--quality)) linear infinite; }

@keyframes stickerFloat {
  from { transform: translate3d(0, 0, 0) rotate(-6deg); }
  to   { transform: translate3d(18px, -28px, 0) rotate(8deg); }
}
@keyframes stickerSpin {
  from { transform: rotate(0deg) translateY(0); }
  to   { transform: rotate(360deg) translateY(-10px); }
}

/* ----- SHARED USER CHIP (top-left) -------------------------------------- */
.userchip {
  position: fixed; top: 1.2rem; left: 1.4rem;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.45rem 0.95rem 0.45rem 0.5rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-chip);
  box-shadow: var(--lift-2);
  cursor: pointer;
  transition: transform 220ms var(--spring), box-shadow 220ms var(--tx);
  z-index: 80;
  max-width: 20rem;
}
.userchip:hover { transform: translateY(-2px) scale(1.015); box-shadow: var(--lift-pop); }
.userchip:active { transform: translateY(1px) scale(0.99); box-shadow: var(--lift-1); }
.userchip-stack { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.userchip-row { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.userchip-name { font-weight: 800; line-height: 1.1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11.25rem; }
.userchip-pts { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; white-space: nowrap; font-size: 0.82rem; line-height: 1; }
.userchip-pts .pts-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--pop-pink); }
.userchip-pts .pts-label { color: var(--ink-soft); font-weight: 700; letter-spacing: 0.08em; }

/* ----- MENU PAGE -------------------------------------------------------- */
.menu-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 2rem;
  padding: 6rem 2rem 2rem;
  padding-right: calc(64px + 2rem);
}

.menu-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.6rem;
}
.menu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-chip);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  box-shadow: var(--lift-1);
  margin-bottom: 0.4rem;
}
.eyebrow-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pop-pink);
}
/* Pulsing ring as a pseudo-element scaling out — GPU-only, no repaint */
.eyebrow-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid oklch(70% 0.24 0 / .55);
  animation: dotPulseRing 2.4s var(--ease-out) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes dotPulseRing {
  0%   { opacity: 0.7; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(2); }
}

.menu-title {
  font-family: 'Bagel Fat One', system-ui;
  font-weight: 400;
  font-size: clamp(4.2rem, 11vw, 9rem);
  letter-spacing: 0.02em;
  line-height: 0.9;
  margin: 0;
  display: inline-flex;
  gap: 0.04em;
  user-select: none;
}
.menu-title .mt-letter {
  display: inline-block;
  position: relative;
  filter: drop-shadow(0 5px 0 var(--ink)) drop-shadow(0 12px 18px oklch(20% 0.04 295 / .25));
  animation: letterBob calc(3.6s / var(--quality)) ease-in-out infinite;
}
.menu-title .mt-o { color: var(--pop-pink);   animation-delay: 0s; }
.menu-title .mt-r { color: var(--pop-yellow); animation-delay: -0.3s; }
.menu-title .mt-y { color: var(--pop-mint);   animation-delay: -0.6s; }
.menu-title .mt-t { color: var(--pop-sky);    animation-delay: -0.9s; }
.menu-title .mt-h { color: var(--pop-grape);  animation-delay: -1.2s; }
.menu-title .mt-m { color: var(--pop-coral);  animation-delay: -1.5s; }
@keyframes letterBob {
  0%,100% { transform: translateY(0)   rotate(0deg); }
  50%     { transform: translateY(-8px) rotate(-1.5deg); }
}
[data-theme="night"] .menu-title .mt-letter {
  filter: drop-shadow(0 5px 0 oklch(28% 0.05 285)) drop-shadow(0 12px 24px oklch(0% 0 0 / .55));
}

.menu-tagline {
  margin-top: 0.6rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  font-weight: 600;
  max-width: 38ch;
}

/* ----- ACTIONS -------------------------------------------------------- */
.menu-actions {
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  width: min(440px, 100%);
}
.menu-cta {
  display: grid;
  grid-template-areas:
    "icon label"
    "icon sub";
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 0 0.7rem;
  text-align: left;
  padding: 0.85rem 1.15rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  border-radius: var(--r-sticker);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  box-shadow: var(--lift-2);
  transition: transform 240ms var(--spring), background 220ms var(--tx), border-color 220ms var(--tx), box-shadow 220ms var(--tx);
}
.menu-cta:hover { transform: translateY(-3px) scale(1.012); box-shadow: var(--lift-pop); border-color: var(--ink-soft); }
.menu-cta:active { transform: translateY(2px); box-shadow: var(--lift-1); }
.menu-cta-icon {
  grid-area: icon;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border-radius: var(--r-tile);
  color: var(--pop-grape);
  font-size: 1.4rem;
  font-weight: 900;
  border: 1.5px solid var(--line);
  transition: transform 280ms var(--spring), background 220ms var(--tx);
}
.menu-cta:hover .menu-cta-icon { background: var(--pop-yellow); color: oklch(20% 0.04 70); transform: rotate(-6deg) scale(1.06); }
.menu-cta-label { grid-area: label; font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.menu-cta-sub { grid-area: sub; font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.menu-cta:not(:has(.menu-cta-sub)) {
  grid-template-areas: "icon label";
  grid-template-rows: auto;
}

.menu-cta.primary {
  background: var(--pop-pink);
  color: oklch(20% 0.04 295);
  border-color: var(--pop-pink-2);
}
.menu-cta.primary .menu-cta-icon {
  background: oklch(20% 0.04 295);
  color: var(--pop-yellow);
  border-color: oklch(20% 0.04 295);
}
.menu-cta.primary:hover .menu-cta-icon {
  background: var(--pop-yellow);
  color: oklch(20% 0.04 295);
  border-color: var(--pop-yellow-2);
}
.menu-cta.primary .menu-cta-sub { color: oklch(20% 0.04 295 / .75); }
.menu-cta.primary:hover {
  background: oklch(74% 0.24 0);
  box-shadow: var(--lift-pop), 0 0 0 5px oklch(70% 0.24 0 / .22);
}
.menu-cta.lg .menu-cta-icon { width: 56px; height: 56px; font-size: 1.7rem; }
.menu-cta.lg .menu-cta-label { font-size: 1.4rem; }
.menu-cta.lg { grid-template-columns: 64px 1fr; padding: 1.05rem 1.4rem; }

.menu-cta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 0.7rem;
  justify-content: center;            /* centers the pair under the wider Play CTA */
  margin: 0 auto;
}
.menu-cta-row .menu-cta {
  grid-template-areas:
    "icon"
    "label";
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding: 1rem 0.7rem;
  gap: 0.5rem;
}
.menu-cta-row .menu-cta-label { font-size: 0.95rem; }
.menu-cta-row .menu-cta-icon { width: 44px; height: 44px; font-size: 1.3rem; }
@media (max-width: 540px) {
  .menu-cta-row { grid-template-columns: 1fr; }
}

/* ----- MINI LEADERBOARD (top-LEFT card on home) ----- */
.mini-board {
  position: fixed;
  top: 1.2rem; left: 1.4rem;
  /* rem so the widget rides the fluid root font: stays ~300px at the
     1440p baseline and shrinks proportionally on smaller windows. */
  width: 18.75rem;
  padding: 1rem 1.1rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sticker);
  box-shadow: var(--lift-2);
  cursor: pointer;
  transition: transform 240ms var(--spring), box-shadow 240ms var(--tx);
  z-index: 70;
  max-height: calc(100vh - 2.4rem);
  overflow-y: auto;
}

/* Sign-in nudge — small soft pill under the menu actions for guests
   and signed-out users. Hidden for fully-linked accounts so the home
   screen reads clean once you're set up. */
.menu-signin-nudge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 1.2rem auto 0;
  padding: 0.55rem 1rem;
  background: var(--surface-1);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-chip);
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 90%;
  text-align: center;
}
.menu-signin-icon { color: var(--pop-yellow-2); }
.menu-signin-link { color: var(--pop-pink); font-weight: 800; text-decoration: none; }
.menu-signin-link:hover { text-decoration: underline; }
.mini-board:hover { transform: translateY(-2px); box-shadow: var(--lift-pop); }
.mini-board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.mini-board-title { color: var(--pop-grape); margin: 0; font-size: 0.7rem; }
.mini-board-go { color: var(--pop-pink); font-weight: 900; font-size: 1.1rem; transition: transform 240ms var(--spring); }
.mini-board:hover .mini-board-go { transform: translateX(3px); }

.mini-board-list { display: flex; flex-direction: column; gap: 0.35rem; }
.mini-board-row {
  display: grid;
  grid-template-columns: 32px 28px 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.4rem 0.55rem;
  background: var(--surface-1);
  border: 1.5px solid var(--line);
  border-radius: var(--r-tile);
  font-size: 0.85rem;
  transition: transform 220ms var(--spring), border-color 200ms var(--tx);
}
.mini-board-row:hover { transform: translateX(2px); border-color: var(--line-strong); }
.mini-board-row .mb-rank { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--ink-soft); font-size: 0.85rem; }
.mini-board-row .mb-name { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.3rem; }
.mini-board-row .mb-pts { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--pop-pink); font-size: 0.85rem; }
.mini-board-row .mb-pts-sub { color: var(--ink-soft); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; }
.mini-board-row.rank-1 { background: oklch(88% 0.18 95 / .15); border-color: var(--pop-yellow); }
.mini-board-row.rank-1 .mb-rank { color: var(--pop-yellow-2); }
.mini-board-row.rank-2 { background: oklch(76% 0.02 270 / .14); border-color: oklch(72% 0.02 270); }
.mini-board-row.rank-2 .mb-rank { color: oklch(80% 0.02 270); }
.mini-board-row.rank-3 { background: oklch(80% 0.12 50 / .12); border-color: oklch(72% 0.16 50); }
.mini-board-row.me { background: oklch(78% 0.18 165 / .15); border-color: var(--pop-mint); }
.mini-board-row.role-admin .mb-name { color: var(--pop-coral-2); }
.mini-board-row.role-mod   .mb-name { color: var(--pop-sky-2); }
.mini-board-sep { text-align: center; color: var(--ink-faint); padding: 0.2rem; letter-spacing: 0.4em; font-size: 0.8rem; }

@media (max-width: 1100px) {
  .mini-board { display: none; }
}

/* ----- LOBBIES BROWSER ------------------------------------------------- */
.lobby-list-page {
  position: relative;
  min-height: 100vh;
  padding: 5rem 2rem 6rem;
  padding-right: calc(64px + 2rem);
  display: flex; flex-direction: column;
  gap: 1.2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.lobby-list-page header {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  flex-wrap: wrap;
}
.lobby-list-page header h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 0;
}
.lobby-list-page header .header-sub { color: var(--ink-soft); font-weight: 700; }
.host-bar {
  padding: 1.2rem 1.6rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background: var(--pop-yellow);
  border: 1.5px solid var(--pop-yellow-2);
  border-radius: var(--r-sticker);
  color: oklch(20% 0.04 70);
  box-shadow: var(--lift-2);
  position: relative;
  overflow: hidden;
}
.host-bar::before {
  content: '';
  position: absolute;
  top: -30%; right: -8%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, oklch(99% 0.01 80 / .6), transparent 65%);
  pointer-events: none;
}
.host-bar h2 { margin: 0; font-size: 1.2rem; }
.host-bar p { margin: 0; font-size: 0.92rem; color: oklch(30% 0.06 70); max-width: 50ch; }
.host-bar-stack { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; min-width: 220px; }
.host-bar-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 800; font-size: 0.85rem; color: oklch(20% 0.04 70); margin: 0; text-transform: none; letter-spacing: 0; }
.host-bar .primary {
  background: oklch(20% 0.04 295);
  color: var(--pop-yellow);
  border-color: oklch(20% 0.04 295);
}
.host-bar .primary:hover { background: oklch(28% 0.06 295); border-color: oklch(28% 0.06 295); box-shadow: var(--lift-pop); }

.join-bar {
  display: flex; gap: 0.7rem; align-items: center;
  padding: 0.85rem 1.1rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sticker);
  box-shadow: var(--lift-1);
  flex-wrap: wrap;
}
.join-bar-label { font-weight: 800; color: var(--ink); flex-shrink: 0; }
.join-code-input {
  flex: 1; min-width: 140px;
  text-transform: uppercase;
  font-family: 'Space Grotesk', monospace;
  letter-spacing: 0.32em;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
}

.section-title {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0.4rem 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pop-grape);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.section-title-meta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  color: var(--pop-pink);
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: none;
  padding: 0.15em 0.6em;
  background: oklch(70% 0.24 0 / .14);
  border: 1.5px solid var(--pop-pink);
  border-radius: var(--r-chip);
}
.section-title-meta:empty { display: none; }

.lobby-row {
  display: flex; flex-direction: column;
  gap: 0.7rem;
}
.lobby-row-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lobby-row-mid { display: flex; flex-direction: column; gap: 0.5rem; }
.lobby-row-bot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.lobby-meter {
  width: 100%; height: 8px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.lobby-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--pop-mint);
  box-shadow: 0 0 8px currentColor;
  transition: width 320ms var(--spring);
}
.lobby-row .count {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--pop-pink);
  font-size: 1.1rem;
}

.lobby-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.lobby-row {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.7rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sticker);
  box-shadow: var(--lift-1);
  cursor: pointer;
  transition: transform 240ms var(--spring), box-shadow 240ms var(--tx), border-color 220ms var(--tx);
  position: relative;
  overflow: hidden;
}
.lobby-row::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, oklch(70% 0.24 0 / .14), transparent 70%);
  pointer-events: none;
  transition: opacity 220ms var(--tx);
  opacity: 0;
}
.lobby-row:hover { transform: translateY(-3px); box-shadow: var(--lift-pop); border-color: var(--pop-pink); }
.lobby-row:hover::after { opacity: 1; }
.lobby-row .code {
  font-family: 'Space Grotesk', monospace;
  color: var(--pop-grape);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  background: oklch(65% 0.22 295 / .12);
  border: 1.5px solid var(--pop-grape);
  border-radius: var(--r-tile);
  padding: 0.2em 0.7em;
  display: inline-block;
  align-self: flex-start;
}
.lobby-row .host { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); font-weight: 700; font-size: 0.92rem; }
.lobby-row .host .avatar { width: 28px; height: 28px; border-width: 2px; }
.lobby-row .lobby-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lobby-row .count {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--pop-pink);
  font-size: 0.95rem;
}
.lobby-row .lobby-state { font-size: 0.78rem; }
.lobby-list-empty {
  padding: 3rem;
  text-align: center;
  color: var(--ink-soft);
}
.lobby-list-empty .big { font-size: 3rem; margin-bottom: 0.5rem; }

/* ----- BACK LINK ------------------------------------------------------- */
.back-link {
  position: fixed;
  top: 1.2rem; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--ink-soft); cursor: pointer;
  padding: 0.5rem 1rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-chip);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: var(--lift-1);
  z-index: 80;
  transition: transform 240ms var(--spring), color 200ms var(--tx), box-shadow 240ms var(--tx);
}
.back-link:hover { color: var(--pop-pink); transform: translate(-50%, -2px); box-shadow: var(--lift-2); border-color: var(--pop-pink); }

/* ----- GLOBAL SCOREBOARD ----------------------------------------------- */
.sb-page {
  position: relative;
  min-height: 100vh;
  padding: 5rem 2rem 4rem;
  padding-right: calc(64px + 2rem);
  display: flex; flex-direction: column; gap: 1.5rem;
  max-width: 920px;
  margin: 0 auto;
}
.sb-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.sb-header h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.sb-jump { font-size: 0.85rem; padding: 0.5em 1.1em; }

.sb-panel {
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sticker);
  box-shadow: var(--lift-2);
  flex: 1;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.sb-list { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.8rem; overflow-y: auto; flex: 1; }

.sb-row {
  display: grid;
  grid-template-columns: 60px 32px 36px 1fr auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 1rem;
  background: var(--surface-1);
  border: 1.5px solid var(--line);
  border-radius: var(--r-tile);
  cursor: pointer;
  transition: transform 220ms var(--spring), background 200ms var(--tx), border-color 200ms var(--tx);
}
.sb-row:hover { background: var(--surface-2); transform: translateX(3px); border-color: var(--line-strong); }
.sb-row.compact { padding: 0.5rem 0.8rem; }
.sb-row .sb-rank { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; color: var(--ink-soft); }
.sb-row .sb-medal { font-size: 1.4rem; line-height: 1; text-align: center; }
.sb-row .sb-name { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.4rem; }
.sb-row .sb-points { font-family: 'Space Grotesk', sans-serif; color: var(--pop-pink); font-weight: 700; }
.sb-row.me {
  border-color: var(--pop-mint);
  background: oklch(78% 0.18 165 / .12);
  box-shadow: var(--lift-1);
}
.sb-row.role-admin .sb-name { color: var(--pop-coral-2); }
.sb-row.role-mod   .sb-name { color: var(--pop-sky-2); }
.sb-row.rank-1 {
  border-color: var(--pop-yellow);
  background: oklch(88% 0.18 95 / .15);
  box-shadow: var(--lift-1);
}
.sb-row.rank-1 .sb-rank { color: var(--pop-yellow-2); }
.sb-row.rank-2 {
  border-color: oklch(72% 0.02 270);
  background: oklch(76% 0.02 270 / .14);
  box-shadow: var(--lift-1);
}
.sb-row.rank-2 .sb-rank { color: oklch(80% 0.02 270); }
.sb-row.rank-3 {
  border-color: oklch(72% 0.16 50);
  background: oklch(80% 0.12 50 / .12);
}
.sb-row.rank-3 .sb-rank { color: oklch(58% 0.18 50); }
.sb-row.flash { animation: sbFlash 1.6s var(--spring); }
@keyframes sbFlash {
  0%   { box-shadow: var(--lift-1), 0 0 0 0 oklch(70% 0.24 0 / .55); }
  35%  { box-shadow: var(--lift-pop), 0 0 0 8px oklch(70% 0.24 0 / .22); }
  100% { box-shadow: var(--lift-1), 0 0 0 0 oklch(70% 0.24 0 / 0); }
}
.sb-divider { text-align: center; color: var(--ink-faint); padding: 0.5rem; letter-spacing: 0.6em; font-size: 0.8rem; }

.sb-search-bar { padding: 0 0.8rem 0.8rem; }
.sb-search-wrap { position: relative; }
.sb-search-wrap input { padding: 0.7em 1.2em; font-size: 0.95rem; }
.sb-search-results {
  position: absolute; bottom: 100%; left: 0; right: 0;
  margin-bottom: 0.4rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sticker);
  max-height: 280px; overflow-y: auto;
  box-shadow: var(--lift-pop);
  z-index: 5;
  padding: 0.5rem;
}
.sb-search-results.hidden { display: none; }
.sb-search-results .sb-row { background: transparent; border: 0; border-radius: var(--r-tile); }

@media (max-width: 800px) {
  .sb-page { padding-right: 2rem; }
  .sb-row { grid-template-columns: 40px 28px 32px 1fr auto; }
  .sb-row .sb-medal { display: none; }
}

/* ----- SCOREBOARD HERO PODIUM ----------------------------------------- */
.sb-podium { display: flex; justify-content: center; }
/* Classic stadium podium: silver on the left, gold (largest) in the
   middle, bronze (smallest) on the right. DOM stays in rank order so
   screen readers + tab order read 1 → 2 → 3; CSS `order` handles the
   visual flip.

   Column widths reflect the visual hierarchy — middle is widest, left
   is medium, right is narrowest. align-items:end so all three sit on
   the same baseline despite different padding.
*/
.sb-top-podium {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.85fr;
  gap: 1rem;
  align-items: end;
  width: min(720px, 100%);
}
.sb-podium-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem;
  padding: 1.4rem 1rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sticker);
  box-shadow: var(--lift-2);
  text-align: center;
  animation: sbPodiumIn 0.7s var(--spring) both;
}
/* Tight dark drop-shadow to crisp the text against the bright metallic
   backgrounds. A light/white halo washes out dark text on yellow, so we
   go the other way. */
.sb-podium-1 .sb-podium-rank,
.sb-podium-1 .sb-podium-name,
.sb-podium-1 .sb-podium-pts,
.sb-podium-1 .sb-podium-pts-sub,
.sb-podium-2 .sb-podium-rank,
.sb-podium-2 .sb-podium-name,
.sb-podium-2 .sb-podium-pts,
.sb-podium-2 .sb-podium-pts-sub,
.sb-podium-3 .sb-podium-rank,
.sb-podium-3 .sb-podium-name,
.sb-podium-3 .sb-podium-pts,
.sb-podium-3 .sb-podium-pts-sub {
  text-shadow: 0 1px 2px oklch(20% 0.04 295 / .25);
}
.sb-podium-card .avatar { width: 64px; height: 64px; border-width: 3px; }
.sb-podium-rank {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.sb-podium-name {
  font-weight: 800;
  font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.sb-podium-pts {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--pop-pink);
  font-size: 1rem;
}
.sb-podium-pts-sub { font-size: 0.7em; color: var(--ink-soft); letter-spacing: 0.06em; }

/* GOLD (#1) — middle column, biggest, animated crown above. Gradient
   instead of pure pop-yellow so dark text reads cleanly against it. */
.sb-podium-1 {
  order: 2;
  background: linear-gradient(165deg, oklch(86% 0.17 90), oklch(72% 0.16 70));
  border-color: var(--pop-yellow-2);
  color: oklch(20% 0.04 70);
  padding: 2rem 1rem 1.6rem;
  box-shadow: var(--lift-pop), 0 0 0 4px oklch(82% 0.18 90 / .35);
  animation-delay: 0.4s;
}
.sb-podium-1 .sb-podium-rank { color: oklch(18% 0.06 70); font-size: 1.2rem; }
.sb-podium-1 .sb-podium-name { color: oklch(15% 0.04 70); font-size: 1.05rem; font-weight: 900; }
.sb-podium-1 .sb-podium-pts  { color: oklch(18% 0.06 295); font-size: 1.15rem; font-weight: 800; }
.sb-podium-1 .sb-podium-pts-sub { color: oklch(20% 0.06 70 / .9); }
.sb-podium-1 .avatar { width: 88px; height: 88px; border-color: var(--pop-yellow-2); }
.sb-podium-1::before {
  content: '♛';
  position: absolute;
  top: -1.3rem; left: 50%; transform: translateX(-50%);
  font-size: 1.8rem;
  color: var(--pop-yellow-2);
  filter: drop-shadow(0 3px 0 oklch(28% 0.06 70)) drop-shadow(0 6px 12px oklch(20% 0.04 295 / .3));
  animation: crownBob calc(2.4s / var(--quality)) ease-in-out infinite;
}

/* SILVER (#2) — left column, medium size. */
.sb-podium-2 {
  order: 1;
  background: linear-gradient(160deg, oklch(85% 0.02 270), oklch(76% 0.02 270));
  border-color: oklch(64% 0.02 270);
  color: oklch(20% 0.02 270);
  padding: 1.3rem 0.85rem 1.2rem;
  animation-delay: 0.2s;
}
.sb-podium-2 .sb-podium-rank { color: oklch(18% 0.02 270); }
.sb-podium-2 .sb-podium-name { color: oklch(14% 0.02 270); font-weight: 900; }
.sb-podium-2 .sb-podium-pts  { color: oklch(20% 0.08 295); font-weight: 800; }
.sb-podium-2 .sb-podium-pts-sub { color: oklch(20% 0.02 270 / .9); }
.sb-podium-2 .avatar { width: 64px; height: 64px; border-color: oklch(64% 0.02 270); }
.sb-podium-2::before {
  content: '🥈';
  position: absolute;
  top: -1rem; left: 50%; transform: translateX(-50%);
  font-size: 1.5rem;
  filter: drop-shadow(0 3px 6px oklch(20% 0.04 295 / .35));
}

/* BRONZE (#3) — right column, smallest. */
.sb-podium-3 {
  order: 3;
  background: linear-gradient(160deg, oklch(70% 0.10 50), oklch(58% 0.13 45));
  border-color: oklch(45% 0.13 45);
  color: oklch(20% 0.06 50);
  padding: 1rem 0.7rem 0.95rem;
  animation-delay: 0s;
}
.sb-podium-3 .sb-podium-rank { color: oklch(18% 0.10 45); font-size: 1rem; }
.sb-podium-3 .sb-podium-name { color: oklch(14% 0.10 45); font-size: 0.85rem; font-weight: 900; }
.sb-podium-3 .sb-podium-pts  { color: oklch(18% 0.10 295); font-size: 0.92rem; font-weight: 800; }
.sb-podium-3 .sb-podium-pts-sub { color: oklch(20% 0.10 45 / .9); }
.sb-podium-3 .avatar { width: 52px; height: 52px; border-color: oklch(45% 0.13 45); }
.sb-podium-3::before {
  content: '🥉';
  position: absolute;
  top: -0.85rem; left: 50%; transform: translateX(-50%);
  font-size: 1.3rem;
  filter: drop-shadow(0 3px 6px oklch(20% 0.04 295 / .35));
}

@keyframes sbPodiumIn {
  0%   { opacity: 0; transform: translateY(28px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (max-width: 700px) {
  .sb-top-podium { grid-template-columns: 1fr; }
  /* Single column — gold first, silver, bronze. The desktop visual flip
     is undone here so the most important card is at the top. */
  .sb-podium-1 { order: 1; }
  .sb-podium-2 { order: 2; }
  .sb-podium-3 { order: 3; }
}

/* ----- ABOUT / OPTIONS PAGES ------------------------------------------ */
.about-card {
  position: relative;
  max-width: 760px; margin: 5rem auto 4rem;
  padding: 2.5rem 3rem;
  line-height: 1.65;
  color: var(--ink);
}
.about-card h1 { font-size: 2.6rem; margin-bottom: 0.4em; }
.about-card .lead { color: var(--ink-soft); font-size: 1.15rem; margin-bottom: 1.2em; max-width: 60ch; font-weight: 600; }
.about-card kbd {
  padding: 0.15em 0.5em;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  border-bottom-width: 2.5px;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--pop-grape);
}
.about-card section { margin-bottom: 1.6rem; }
.about-card section h2 { font-size: 1.3rem; color: var(--pop-grape); margin-bottom: 0.4em; }

/* ----- STATS GRID (used on options/profile) --------------------------- */
.stats-grid {
  display: grid;
  /* auto-fit so the row count adapts to the panel width; minmax floor
     bumped a bit on desktop where 1.5x scale needs more breathing room. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.8rem;
  /* Equal-height rows so XP-with-subtitle doesn't tower over neighbors. */
  grid-auto-rows: 1fr;
}
.stat-card {
  padding: 1rem 1.1rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sticker);
  display: flex; flex-direction: column; gap: 0.25rem;
  /* Fixed minimum so equal-height grid rows look uniform. */
  min-height: 110px;
  justify-content: space-between;
  box-shadow: var(--lift-1);
  transition: transform 240ms var(--spring), box-shadow 240ms var(--tx);
  position: relative;
  overflow: hidden;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.stat-card::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, oklch(70% 0.24 0 / .14), transparent 70%);
  pointer-events: none;
}
.stat-card .stat-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.stat-card .stat-value {
  font-family: 'Space Grotesk', sans-serif;
  /* Fluid scale that shrinks for long values like "8,712 OP" so they
     fit on one line at any panel width. */
  font-size: clamp(1.2rem, 2.8vw, 1.7rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card .stat-sub {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card.gold  .stat-value { color: var(--pop-yellow-2); }
.stat-card.cyan  .stat-value { color: var(--pop-sky-2); }
.stat-card.red   .stat-value { color: var(--pop-coral-2); }
.stat-card.fruit .stat-value { color: var(--pop-pink); }
.stat-card.mint  .stat-value { color: var(--pop-mint-2); }
.stat-card.grape .stat-value { color: var(--pop-grape); }

/* ----- OPTIONS GRID --------------------------------------------------- */
.options-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.1rem 1.6rem;
  align-items: center;
  max-width: 720px;
}
.options-grid label { margin: 0; font-size: 0.85rem; }
.range-row { display: flex; align-items: center; gap: 1rem; }
.range-row input[type=range] { flex: 1; }
.range-row .val {
  font-family: 'Space Grotesk', sans-serif;
  width: 4ch; text-align: right;
  color: var(--pop-grape); font-weight: 700;
  font-size: 0.95rem;
}
.options-page {
  position: relative;
  min-height: 100vh;
  padding: 5rem 2rem 4rem;
  padding-right: calc(64px + 2rem);
  max-width: 880px;
  margin: 0 auto;
}
.options-page h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.options-section {
  margin-bottom: 2rem;
  padding: 1.6rem 1.8rem;
  background: var(--surface-pop);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sticker);
  box-shadow: var(--lift-1);
}
.options-section h2 {
  font-size: 1.1rem;
  color: var(--pop-grape);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.options-section h2 .sec-icon {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--pop-yellow);
  border: 1.5px solid var(--pop-yellow-2);
  border-radius: var(--r-tile);
  color: oklch(20% 0.04 70);
  font-size: 1rem; font-weight: 900;
  box-shadow: var(--lift-1);
}

/* ----- THEME SWATCH PICKER (Day/Night, accent) ----------------------- */
.theme-swatches {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
}
.swatch {
  width: 44px; height: 44px;
  border-radius: var(--r-tile);
  border: 2.5px solid var(--surface-pop);
  cursor: pointer;
  box-shadow: var(--lift-1);
  position: relative;
  transition: transform 240ms var(--spring), box-shadow 240ms var(--tx);
}
.swatch:hover { transform: translateY(-2px) scale(1.06); box-shadow: var(--lift-2); }
.swatch.selected { box-shadow: var(--lift-2), 0 0 0 3px var(--pop-grape); transform: scale(1.06); }
.swatch.s-pink   { background: var(--pop-pink); }
.swatch.s-yellow { background: var(--pop-yellow); }
.swatch.s-mint   { background: var(--pop-mint); }
.swatch.s-grape  { background: var(--pop-grape); }
.swatch.s-sky    { background: var(--pop-sky); }
.swatch.s-day    { background: linear-gradient(135deg, oklch(98% 0.012 60), oklch(92% 0.025 45)); }
.swatch.s-night  { background: linear-gradient(135deg, oklch(20% 0.04 290), oklch(14% 0.025 295)); }

/* ----- AUTH / RESET PAGES --------------------------------------------- */
.auth-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.auth-card {
  position: relative;
  width: min(420px, 100%);
  padding: 2.2rem 2.4rem 2rem;
  background: var(--surface-pop);
  border-radius: var(--r-pop);
  box-shadow: var(--lift-pop);
  border: 1.5px solid var(--line-strong);
}
.auth-home {
  position: absolute;
  top: 1rem; left: 1rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-chip);
  background: var(--surface-1);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: transform 220ms var(--spring), color 200ms var(--tx), border-color 200ms var(--tx);
}
.auth-home:hover { color: var(--pop-pink); border-color: var(--pop-pink); transform: translateY(-1px); }
.auth-home-arrow { transition: transform 220ms var(--spring); display: inline-block; }
.auth-home:hover .auth-home-arrow { transform: translateX(-3px); }

.auth-brand {
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
  margin-bottom: 0.4rem;
}
.auth-mark {
  font-size: clamp(2.2rem, 6vw, 3.4rem) !important;
}
.auth-sub {
  text-align: center;
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Discord-only sign-in stack: big purple Discord CTA + smaller guest button. */
.auth-cta-stack {
  display: flex; flex-direction: column; gap: 0.7rem;
  margin-top: 0.4rem;
}
.auth-cta-stack .btn { width: 100%; justify-content: center; }
.auth-discord {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  background: #5865F2 !important;
  border-color: #4752C4 !important;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
}
.auth-discord:hover { background: #4752C4 !important; }
.auth-google {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  background: #fff !important;
  color: #1f1f1f !important;
  border: 1.5px solid #dadce0 !important;
  font-weight: 700;
  text-decoration: none;
}
.auth-google:hover { background: #f7f8fa !important; border-color: #c5c8cc !important; }
.auth-provider-icon { display: inline-flex; }
.auth-divider {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--ink-faint);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800;
  margin: 0.2rem 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1.5px; background: var(--line);
}
.auth-guest {
  background: var(--surface-1);
  border: 1.5px solid var(--line);
}
.auth-foot {
  margin-top: 1.2rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  line-height: 1.4;
}
.auth-foot p { margin: 0; }
.auth-warn { color: var(--pop-coral-2); font-weight: 700; }

/* Settings → Account → Connected accounts */
.connected-list { display: flex; flex-direction: column; gap: 0.55rem; }
.connected-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 0.95rem;
  background: var(--surface-1);
  border: 1.5px solid var(--line);
  border-radius: var(--r-tile);
}
.connected-row.linked { border-color: oklch(75% 0.18 165 / .6); }
.connected-name { font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.connected-tag {
  font-size: 0.7rem; font-weight: 800;
  padding: 0.15em 0.55em;
  border-radius: var(--r-chip);
  background: oklch(78% 0.18 165 / .25);
  color: oklch(45% 0.16 165);
  letter-spacing: 0.04em;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--surface-1);
  border: 1.5px solid var(--line);
  border-radius: var(--r-chip);
  padding: 4px;
  margin-bottom: 1rem;
}
.auth-tab {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0.55em 0.4em;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ink-soft);
  border-radius: var(--r-chip);
  cursor: pointer;
  transition: background 200ms var(--tx), color 200ms var(--tx);
}
.auth-tab:hover { background: var(--surface-2); color: var(--ink); transform: none; box-shadow: none; }
.auth-tab.active {
  background: var(--pop-pink);
  color: oklch(20% 0.04 295);
  box-shadow: var(--lift-1);
}
.auth-tab.active:hover { background: var(--pop-pink); transform: none; }

.auth-form {
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.auth-form input { font-size: 1rem; padding: 0.85em 1.1em; }
.auth-form button.primary { margin-top: 0.4rem; }

.auth-error {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pop-coral);
  min-height: 1.4em;
  text-align: center;
  margin-top: 0.2rem;
}

.auth-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
  font-weight: 600;
  margin-top: -0.2rem;
}
.auth-code-target {
  color: var(--pop-pink);
  font-weight: 800;
  font-family: 'Space Grotesk', monospace;
}
.auth-code {
  text-align: center;
  letter-spacing: 0.6em;
  font-family: 'Space Grotesk', monospace;
  font-size: 1.6rem;
  font-weight: 700;
  text-indent: 0.3em;
}
.auth-actions-row {
  display: flex; justify-content: space-between;
  margin-top: 0.4rem;
}
.auth-foot {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.85rem;
}

/* ----- BG IMAGE PICKER (in Options) ----------------------------------- */
.bg-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.bg-image-card {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.5rem;
  background: var(--surface-1);
  border: 1.5px solid var(--line);
  border-radius: var(--r-tile);
  cursor: pointer;
  transition: transform 220ms var(--spring), border-color 200ms var(--tx), box-shadow 200ms var(--tx);
  box-shadow: var(--lift-1);
}
.bg-image-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--lift-2); }
.bg-image-card.selected { border-color: var(--pop-pink); box-shadow: var(--lift-2), 0 0 0 3px oklch(70% 0.24 0 / .25); }
.bg-image-thumb {
  height: 80px;
  border-radius: var(--r-tile);
  border: 1.5px solid var(--line);
  overflow: hidden;
  background-size: cover; background-position: center;
}
.bg-image-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ----- BG MUSIC LIST (in Options) ------------------------------------- */
.bg-music-list { display: flex; flex-direction: column; gap: 0.4rem; }
.bg-music-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface-1);
  border: 1.5px solid var(--line);
  border-radius: var(--r-tile);
  font-weight: 700;
  font-size: 0.85rem;
}
.bg-music-icon {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--pop-pink);
  color: oklch(20% 0.04 295);
  border-radius: 50%;
  font-size: 1rem;
  border: 1.5px solid var(--pop-pink-2);
  box-shadow: var(--lift-1);
}
.bg-music-label { flex: 1; color: var(--ink); }
.tiny-kbd { font-family: 'Space Grotesk', monospace; background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 4px; border: 1px solid var(--line); }

/* ----- DANGER ZONE (Options account) ---------------------------------- */
.options-section.danger-zone {
  border-color: var(--pop-coral);
  background: oklch(68% 0.24 25 / .08);
}

/* ----- USER-SUPPLIED BG IMAGE LAYER ----------------------------------- */
body.has-user-bg::before {
  background:
    var(--user-bg) center / cover no-repeat,
    radial-gradient(circle at 30% 40%, oklch(70% 0.24 0 / .10),  transparent 32%);
  filter: blur(0) saturate(1.05) brightness(0.85);
  opacity: calc(0.55 * var(--quality));
  z-index: -2;
}
[data-theme="night"] body.has-user-bg::before {
  filter: blur(0) saturate(1.05) brightness(0.55);
}

/* ============ MOBILE / PHONE ============================================ */
/* Phone portrait. Padding shrinks because the friends rail is already
   hidden (base.css), the hero scales tighter, and floating chrome (user
   chip, mini-board, sticker rain) is dialed back so the page reads. */
@media (max-width: 600px) {

  /* --- floating overlays trimmed for small screens --- */
  .userchip {
    top: 0.7rem; left: 0.7rem;
    padding: 0.35rem 0.7rem 0.35rem 0.4rem;
    max-width: calc(100vw - 1.4rem);
  }
  .userchip-name { max-width: 100px; font-size: 0.85rem; }
  .userchip .avatar { width: 32px; height: 32px; }
  .userchip-pts { font-size: 0.75rem; gap: 0.35rem; }
  .userchip-pts .lvl-badge { display: none; }

  /* Mini-board already hidden < 1100px globally, just reaffirm */
  .mini-board { display: none; }

  /* Sticker rain: half the count to keep things readable */
  .float-sticker.s-2,
  .float-sticker.s-4,
  .float-sticker.s-6,
  .float-sticker.s-8 { display: none; }

  .back-link {
    top: 0.7rem; left: auto; right: 0.7rem;
    transform: none;
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
  }
  .back-link:hover { transform: translateY(-2px); }

  /* --- main menu --- */
  .menu-page {
    gap: 1.4rem;
    padding: 4.5rem 1rem 3rem;
  }
  .menu-title { letter-spacing: 0.01em; }
  .menu-tagline { font-size: 0.95rem; }
  .menu-actions { width: 100%; gap: 0.6rem; }
  .menu-cta-row { grid-template-columns: 1fr; }

  /* --- lobbies browser --- */
  .lobby-list-page {
    padding: 4.5rem 1rem 5rem;
  }
  .lobby-list-page header h1 { font-size: 2rem; }
  .lobby-list-grid { grid-template-columns: 1fr; }
  .host-bar, .join-bar { padding: 1rem 1.1rem; }
  .host-bar { gap: 0.7rem; }
  .host-bar-stack { min-width: 0; }
  .host-bar-stack h2 { font-size: 1.05rem; }
  .host-bar-stack p { font-size: 0.85rem; }
  .host-bar .btn,
  .host-bar button { width: 100%; }
  .join-bar { flex-direction: column; align-items: stretch; }
  .join-bar-label { font-size: 0.85rem; }
  .join-code-input { font-size: 0.95rem; }

  /* --- scoreboard --- */
  .sb-page { padding: 4.5rem 1rem 3rem; }
  .sb-header h1 { font-size: 2rem; }
  .sb-jump { margin-left: auto; font-size: 0.78rem; padding: 0.4em 0.9em; min-height: 36px; }
  .sb-list { padding: 0.5rem; gap: 0.35rem; }
  .sb-row {
    grid-template-columns: 36px 28px 1fr auto;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
  }
  .sb-row .sb-medal { display: none; }
  .sb-row .lvl-badge { display: none; }
  .sb-row .sb-rank { font-size: 0.85rem; }
  .sb-row .sb-points { font-size: 0.85rem; }
  .sb-search-bar { padding: 0 0.5rem 0.5rem; }

  .sb-top-podium { grid-template-columns: 1fr; gap: 0.6rem; }
  .sb-podium-1 { order: 1; padding-top: 1.6rem; }
  .sb-podium-2 { order: 2; }
  .sb-podium-3 { order: 3; }
  .sb-podium-card .avatar { width: 56px; height: 56px; }
  .sb-podium-1 .avatar { width: 68px; height: 68px; }
  .sb-podium-3 .avatar { width: 48px; height: 48px; }

  /* --- options page --- */
  .options-page { padding: 4.5rem 1rem 3rem; }
  .options-page h1 { font-size: 2rem; }
  .options-section { padding: 1rem 1.1rem; }
  .options-section h2 { font-size: 1rem; }
  .options-section h2 .sec-icon { width: 28px; height: 28px; font-size: 0.9rem; }
  .options-grid { grid-template-columns: 1fr; gap: 0.6rem 0; }
  .options-grid label { margin-bottom: 0.05rem; }
  .options-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .options-tabs::-webkit-scrollbar { display: none; }
  .options-tabs .auth-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.78rem;
    padding: 0.5em 0.95em;
  }
  .bg-image-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
  .bg-image-thumb { height: 70px; }

  /* --- stats grid scales down --- */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .stat-card { padding: 0.7rem 0.85rem; }
  .stat-card .stat-value { font-size: 1.3rem; }
  .stat-card .stat-label { font-size: 0.62rem; letter-spacing: 0.1em; }

  /* --- about / long-form --- */
  .about-card {
    margin: 4.5rem 1rem 3rem;
    padding: 1.7rem 1.4rem;
  }
  .about-card h1 { font-size: 1.8rem; }
  .about-card .lead { font-size: 1rem; }
  .about-card section h2 { font-size: 1.1rem; }
  .about-card ol, .about-card p { font-size: 0.95rem; }

  /* --- auth / reset cards --- */
  .auth-page { padding: 1.2rem; }
  .auth-card { padding: 1.6rem 1.4rem 1.4rem; }
  .auth-mark { font-size: 1.9rem !important; }
  .auth-tabs { gap: 2px; padding: 3px; }
  .auth-tab { padding: 0.5em 0.4em; font-size: 0.78rem; }
  .auth-form input { font-size: 16px; padding: 0.75em 1em; }
  .auth-code { font-size: 1.3rem; letter-spacing: 0.4em; }
  .auth-home { top: 0.6rem; left: 0.6rem; padding: 0.3rem 0.65rem; font-size: 0.7rem; }

  /* --- bg music list rows --- */
  .bg-music-item { font-size: 0.78rem; padding: 0.4rem 0.7rem; }
  .bg-music-icon { width: 24px; height: 24px; font-size: 0.85rem; }

  /* Section title under "Public lobbies" — tighter */
  .section-title { font-size: 0.85rem; letter-spacing: 0.1em; }
  .section-title-meta { font-size: 0.72rem; }

  /* Theme swatch picker — slightly tighter */
  .swatch { width: 38px; height: 38px; }
}

/* Very small phones (≤ 380px). One more squeeze. */
@media (max-width: 380px) {
  .menu-page { padding: 4rem 0.7rem 2rem; }
  .menu-cta-icon { width: 38px; height: 38px; font-size: 1.1rem; }
  .menu-cta { padding: 0.7rem 0.85rem; }
  .menu-cta-label { font-size: 1rem; }
  .lobby-list-page,
  .sb-page,
  .options-page { padding-left: 0.7rem; padding-right: 0.7rem; }
  .userchip-name { max-width: 70px; font-size: 0.78rem; }
}