/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --color-bg:         #05050A;
  --color-surface:    #0E0E18;
  --color-surface-2:  #16162A;
  --color-border:     #1E1E35;

  --color-gold:       #F5C842;
  --color-gold-dim:   #C9A030;
  --color-ember:      #FF6B35;
  --color-jade:       #2ECC8F;
  --color-crimson:    #E84545;
  --color-electric:   #4D9FFF;

  --color-text:       #F0EDE6;
  --color-text-muted: #9A97AA;
  --color-text-dim:   #6B6880;

  --font-display: "Syne", sans-serif;
  --font-body:    "DM Sans", sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  --shadow-gold:  0 0 40px rgba(245, 200, 66, 0.15);
  --shadow-ember: 0 0 40px rgba(255, 107, 53, 0.15);
  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--color-bg); color: var(--color-text); scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); line-height: 1.15; font-weight: 700; color: var(--color-text); margin: 0; }
ul,ol { list-style: none; padding: 0; margin: 0; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font-family: inherit; }

/* ── Focus visible (global) ────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Auth inputs get a softer ring */
.auth-input:focus-visible,
.auth-select:focus-visible { outline: none; border-color: rgba(6,182,212,0.6); box-shadow: 0 0 0 3px rgba(6,182,212,0.18); }
.dash-input:focus-visible  { outline: none; border-color: rgba(46,204,143,0.5); box-shadow: 0 0 0 3px rgba(46,204,143,0.12); }

/* ── Skip to main content ───────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 9999;
  background: var(--color-gold);
  color: var(--color-bg);
  padding: .625rem 1rem;
  border-radius: .5rem;
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 1rem; }

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

/* ── Toast animation ────────────────────────────────────────────────────────── */
.toast-enter { animation: slideUp .25s ease-out both; }

/* ── High-contrast WCAG fix for dim text ───────────────────────────────────── */
.stat-card-sub,
.footer-copy,
.footer-link,
.mobile-tab-link:not(.active) { color: var(--color-text-dim); }

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold-dim); }

/* ── Layout helpers ────────────────────────────────────────────────────────── */
.section-container { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px)  { .section-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .section-container { padding-inline: 4rem; } }

.section-padding { padding-block: 4rem; }
@media (min-width: 640px)  { .section-padding { padding-block: 5rem; } }
@media (min-width: 1024px) { .section-padding { padding-block: 7rem; } }

/* ── Gradient text ─────────────────────────────────────────────────────────── */
.text-gradient-gold {
  background: linear-gradient(to right, #F5C842, #FF6B35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-cool {
  background: linear-gradient(to right, #4D9FFF, #2ECC8F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-gold);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  text-decoration: none;
  font-size: 0.875rem;
}
.btn-primary:hover  { background: var(--color-gold-dim); }
.btn-primary:active { transform: scale(0.95); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-gold);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(245,200,66,0.4);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  text-decoration: none;
  font-size: 0.875rem;
}
.btn-outline:hover  { background: rgba(245,200,66,0.1); }
.btn-outline:active { transform: scale(0.95); }

/* ── Glows ─────────────────────────────────────────────────────────────────── */
.glow-gold  { box-shadow: 0 0 30px rgba(245,200,66,0.2), 0 0 60px rgba(245,200,66,0.08); }
.glow-ember { box-shadow: 0 0 30px rgba(255,107,53,0.2),  0 0 60px rgba(255,107,53,0.08); }

/* ── Animations ────────────────────────────────────────────────────────────── */
@keyframes float      { 0%,100%{transform:translateY(0)}   50%{transform:translateY(-18px)} }
@keyframes pulse-glow { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes shimmer    { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes tick       { 0%{transform:scale(1.1)} 100%{transform:scale(1)} }
@keyframes slide-up   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes blob       { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-50px) scale(1.1)} 66%{transform:translate(-20px,20px) scale(.9)} }
@keyframes fade-in-down { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in-up   { from{opacity:0;transform:translateY(20px)}  to{opacity:1;transform:translateY(0)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 10%,30%,50%,70%,90%{transform:translateX(-5px)} 20%,40%,60%,80%{transform:translateX(5px)} }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes slideUp { from{opacity:0;transform:translateY(1rem)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-1rem)} to{opacity:1;transform:translateY(0)} }

.animate-float      { animation: float      6s   ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s   ease-in-out infinite; }
.animate-shimmer    { animation: shimmer    2.5s  linear infinite; }
.animate-tick       { animation: tick       0.1s  ease-out; }
.animate-slide-up   { animation: slide-up   0.6s  ease-out both; }
.animate-spin       { animation: spin 1s linear infinite; }
.animate-blob       { animation: blob 7s infinite; }
.animate-fade-in-down { animation: fade-in-down 0.6s ease-out; }
.animate-fade-in-up   { animation: fade-in-up   0.6s ease-out 0.2s backwards; }
.animate-shake      { animation: shake 0.5s ease-in-out; }
.animate-bounce     { animation: bounce 1s ease-in-out infinite; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* ── Navbar ────────────────────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  width: 100%;
  transition: all 0.3s;
}
.navbar.scrolled {
  background: rgba(5,5,10,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
@media (min-width: 1024px) { .navbar-inner { height: 5rem; } }

.nav-links { display: none; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}
.nav-link:hover { color: var(--color-text); }
.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}
.nav-link:hover::after { transform: scaleX(1); }

.nav-cta { display: none; gap: 0.75rem; align-items: center; }
@media (min-width: 1024px) { .nav-cta { display: flex; } }

.hamburger { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
@media (min-width: 1024px) { .hamburger { display: none; } }
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--color-text);
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,6px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-6px); }

.mobile-menu {
  display: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s, border-color 0.3s;
}
.mobile-menu.open { max-height: 24rem; border-bottom: 1px solid var(--color-border); }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }
.mobile-menu-inner {
  padding-block: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(5,5,10,0.95);
  backdrop-filter: blur(20px);
}
.mobile-nav-link {
  color: var(--color-text-muted);
  padding-block: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  transition: color 0.2s;
  display: block;
}
.mobile-nav-link:last-of-type { border-bottom: none; }
.mobile-nav-link:hover { color: var(--color-text); }

/* ── Logo ──────────────────────────────────────────────────────────────────── */
.logo-mark {
  width: 2rem; height: 2rem;
  background: var(--color-gold);
  border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.logo-link { display: flex; align-items: center; gap: 0.5rem; }
.logo-link:hover .logo-mark { transform: scale(1.1); }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--color-text); }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 4rem;
}
@media (min-width: 1024px) { .hero-section { padding-top: 5rem; } }

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 0.375rem 1rem;
}
.live-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--color-jade);
}
.badge-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-h1 { font-family: var(--font-display); font-weight: 900; line-height: 1.05; }
.hero-h1 .line1 { display: block; font-size: clamp(2.5rem,8vw,5rem); color: var(--color-text); }
.hero-h1 .line2 { display: block; font-size: clamp(2.5rem,8vw,5rem); }

.hero-sub { max-width: 42rem; color: var(--color-text-muted); font-size: 1.125rem; line-height: 1.75; }

.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
@media (min-width: 640px) { .hero-cta { flex-direction: row; } }

.stats-bar {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  overflow: hidden;
  margin-top: 1rem;
}
.stat-item {
  padding: 1rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--color-border);
}
.stat-item:last-child { border-right: none; }
.stat-value { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: var(--color-gold); }
.stat-label { font-size: 0.65rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }

.scroll-indicator { color: var(--color-text-dim); margin-top: 2rem; }

/* ── Floating letters ──────────────────────────────────────────────────────── */
.floating-letter {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--color-gold);
  pointer-events: none;
  user-select: none;
}

/* ── Section headers ───────────────────────────────────────────────────────── */
.section-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.75rem);
  color: var(--color-text);
}
.section-sub {
  color: var(--color-text-muted);
  font-size: 1.125rem;
  max-width: 36rem;
  margin-inline: auto;
}

/* ── Games grid ────────────────────────────────────────────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px)  { .games-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .games-grid { grid-template-columns: repeat(4, 1fr); } }

.game-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: pointer;
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.2s;
}
.game-card:hover { transform: translateY(-2px); }
.game-card-top { display: flex; align-items: center; justify-content: space-between; }
.stage-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
}
.game-emoji { font-size: 1.875rem; transition: transform 0.2s; display: inline-block; }
.game-card:hover .game-emoji { transform: scale(1.1); }
.game-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--color-text); }
.game-desc { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.6; flex: 1; }
.game-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.game-meta { display: flex; align-items: center; gap: 0.375rem; }
.game-meta-text { font-size: 0.75rem; color: var(--color-text-muted); }

/* ── Modes section ─────────────────────────────────────────────────────────── */
.modes-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .modes-layout { grid-template-columns: 2fr 3fr; }
}
.mode-tabs { display: flex; flex-direction: row; gap: 0.75rem; }
@media (min-width: 1024px) { .mode-tabs { flex-direction: column; } }
.mode-tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  text-align: left;
  transition: all 0.2s;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  width: 100%;
}
.mode-tab.active { background: var(--color-surface); border-color: var(--color-border); }
.mode-tab:not(.active):hover { background: rgba(14,14,24,0.5); }
.mode-tab-label { font-weight: 600; font-size: 0.875rem; color: var(--color-text); }
.mode-tab-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 4px; }
.mode-detail-panel {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: border-color 0.3s;
}
.mode-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}
.mode-headline { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.25rem,3vw,1.875rem); color: var(--color-text); }
.mode-desc { color: var(--color-text-muted); line-height: 1.7; }
.feature-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .feature-list { grid-template-columns: repeat(2, 1fr); } }
.feature-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-muted); }

/* ── Steps timeline ────────────────────────────────────────────────────────── */
.steps-list { max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; }
.step-row { display: flex; gap: 1.5rem; }
.step-left { display: flex; flex-direction: column; align-items: center; }
.step-circle {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.step-row:hover .step-circle { transform: scale(1.1); }
.step-connector { width: 1px; flex: 1; background: var(--color-border); margin-block: 0.5rem; }
.step-right { padding-bottom: 2.5rem; padding-top: 0.5rem; flex: 1; }
.step-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.step-title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--color-text); }
.step-desc { color: var(--color-text-muted); line-height: 1.7; font-size: 0.875rem; }

/* ── Stats grid ────────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }

.stat-card {
  padding: 1.5rem;
  text-align: center;
  transition: border-color 0.3s;
}
.stat-card:hover { border-color: rgba(245,200,66,0.2); }
.stat-card-value { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem,4vw,2.25rem); margin-bottom: 0.25rem; }
.stat-card-label { color: var(--color-text); font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }
.stat-card-sub { color: var(--color-text-dim); font-size: 0.75rem; }

/* ── CTA section ───────────────────────────────────────────────────────────── */
.cta-content {
  position: relative;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.cta-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem,6vw,4.5rem); color: var(--color-text); max-width: 50rem; line-height: 1.05; }
.cta-sub { color: var(--color-text-muted); font-size: 1.125rem; max-width: 36rem; }
.cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
@media (min-width: 640px) { .cta-buttons { flex-direction: row; } }
.cta-micro { color: var(--color-text-dim); font-size: 0.875rem; }
.hairline {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(245,200,66,0.3), transparent);
}
.hairline-top { top: 0; }
.hairline-bottom { bottom: 0; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--color-border); padding-top: 4rem; padding-bottom: 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-brand { grid-column: span 2; }
@media (min-width: 768px) { .footer-brand { grid-column: span 1; } }
.footer-brand-desc { color: var(--color-text-dim); font-size: 0.875rem; line-height: 1.7; margin-top: 0; }
.footer-cat-title { font-weight: 600; font-size: 0.875rem; color: var(--color-text); margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-link { font-size: 0.875rem; color: var(--color-text-dim); transition: color 0.2s; }
.footer-link:hover { color: var(--color-text-muted); }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
.footer-copy { color: var(--color-text-dim); font-size: 0.875rem; }
.badge-18 {
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(232,69,69,0.4);
  color: var(--color-crimson);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Auth pages ────────────────────────────────────────────────────────────── */
.auth-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #020209, #0b0b18, #111122);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.auth-card {
  background: rgba(14,14,24,0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 2rem;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
.auth-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(30,30,53,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  color: white;
  font-size: 0.875rem;
  font-family: inherit;
  transition: all 0.2s;
  box-sizing: border-box;
}
.auth-input:focus { outline: none; border-color: rgba(6,182,212,0.5); box-shadow: 0 0 0 2px rgba(6,182,212,0.15); }
.auth-input.has-icon-left { padding-left: 2.5rem; }
.auth-input.error { border-color: rgba(239,68,68,0.7); }
.auth-input-wrapper { position: relative; }
.auth-input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(148,163,184,0.7);
  pointer-events: none;
}
.auth-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(30,30,53,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  color: white;
  font-size: 0.875rem;
  font-family: inherit;
  transition: all 0.2s;
  box-sizing: border-box;
}
.auth-select:focus { outline: none; border-color: rgba(6,182,212,0.5); }
.auth-select option { background: #16162A; color: white; }
.auth-select.error { border-color: rgba(239,68,68,0.7); }
.auth-label { display: block; font-size: 0.875rem; font-weight: 500; color: rgba(203,213,225,0.9); margin-bottom: 0.5rem; }
.auth-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(to right, #06b6d4, #7c3aed);
  color: white;
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(6,182,212,0.3);
}
.auth-btn:hover { transform: scale(1.02); box-shadow: 0 6px 30px rgba(6,182,212,0.4); }
.auth-btn:active { transform: scale(0.98); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.auth-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.5);
  color: #f87171;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.auth-success {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.5);
  color: #34d399;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.auth-field-error { color: #f87171; font-size: 0.875rem; margin-top: 0.25rem; }
.auth-divider { position: relative; margin-block: 1.5rem; }
.auth-divider::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: rgba(255,255,255,0.1);
}
.auth-divider span {
  position: relative;
  display: block;
  text-align: center;
  font-size: 0.875rem;
  color: rgba(148,163,184,0.8);
  background: rgba(14,14,24,0.5);
  padding-inline: 0.5rem;
  width: fit-content;
  margin-inline: auto;
}
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  background: rgba(30,30,53,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  color: rgba(203,213,225,0.8);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  gap: 0.5rem;
  width: 100%;
}
.social-btn:hover { background: rgba(30,30,53,0.8); border-color: rgba(255,255,255,0.2); }

/* ── Dashboard layout ──────────────────────────────────────────────────────── */
.dash-root { display: flex; min-height: 100vh; background: var(--color-bg); }
.dash-sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  width: 16rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  transform: translateX(-100%);
  transition: transform 0.3s;
}
@media (min-width: 1024px) { .dash-sidebar { transform: translateX(0); } }
.dash-sidebar.open { transform: translateX(0); }
.sidebar-logo { display: flex; align-items: center; gap: 0.5rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); }
.sidebar-nav { flex: 1; padding: 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all 0.2s;
  border: 1px solid transparent;
  text-decoration: none;
}
.sidebar-link:hover { color: var(--color-text); background: var(--color-surface-2); }
.sidebar-link:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -2px; }
.sidebar-link.active {
  background: rgba(245,200,66,0.1);
  color: var(--color-gold);
  border-color: rgba(245,200,66,0.2);
}
.sidebar-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sidebar-link.active .sidebar-dot { background: var(--color-gold); }
.sidebar-link:not(.active) .sidebar-dot { background: transparent; }
.sidebar-active-bar { margin-left: auto; width: 4px; height: 1rem; border-radius: 9999px; background: var(--color-gold); }
.sidebar-divider { height: 1px; background: var(--color-border); margin-block: 0.5rem; }
.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-crimson);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
}
.sidebar-logout:hover { background: rgba(232,69,69,0.1); border-color: rgba(232,69,69,0.2); }
.sidebar-logout:disabled { opacity: 0.5; cursor: not-allowed; }
.sidebar-footer { padding: 1rem; border-top: 1px solid var(--color-border); }
.sidebar-promo {
  background: rgba(245,200,66,0.1);
  border: 1px solid rgba(245,200,66,0.2);
  border-radius: 0.75rem;
  padding: 1rem;
}
.mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 30;
  display: none;
}
.mobile-backdrop.show { display: block; }
@media (min-width: 1024px) { .mobile-backdrop { display: none !important; } }
.dash-main { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
@media (min-width: 1024px) { .dash-main { padding-left: 16rem; } }
.dash-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5,5,10,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 640px) { .dash-header { padding-inline: 1.5rem; } }
.dash-menu-btn { color: var(--color-text-muted); transition: color 0.2s; background: none; border: none; cursor: pointer; padding: 4px; }
.dash-menu-btn:hover { color: var(--color-text); }
@media (min-width: 1024px) { .dash-menu-btn { display: none; } }
.dash-page-title { display: none; font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); }
@media (min-width: 1024px) { .dash-page-title { display: block; } }
.dash-header-right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.wallet-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  text-decoration: none;
  transition: border-color 0.2s;
}
.wallet-chip:hover { border-color: rgba(245,200,66,0.3); }
.wallet-coin-val { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--color-gold); }
.wallet-coin-label { font-size: 0.75rem; color: var(--color-text-muted); }
.avatar-btn {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--color-gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 0.875rem;
  color: var(--color-bg);
  text-decoration: none;
  transition: box-shadow 0.2s;
  border: none;
  cursor: pointer;
}
.avatar-btn:hover { box-shadow: 0 0 0 2px rgba(245,200,66,0.5); }
.dash-content { flex: 1; padding: 1rem; }
@media (min-width: 640px) { .dash-content { padding: 1.5rem; } }
@media (min-width: 1024px) { .dash-content { padding: 2rem; } }

/* Mobile bottom tabs */
.mobile-tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  background: rgba(14,14,24,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.5rem 0.5rem;
}
@media (min-width: 1024px) { .mobile-tabs { display: none; } }
.mobile-tab-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.75rem;
  text-decoration: none;
  color: var(--color-text-dim);
  transition: color 0.2s;
  font-size: 0;
}
.mobile-tab-link.active { color: var(--color-gold); }
.mobile-tab-link span { font-size: 0.625rem; font-weight: 500; }
.mobile-tab-active-bar { width: 1rem; height: 2px; border-radius: 9999px; background: var(--color-gold); margin-bottom: -2px; }

/* ── Dashboard home ────────────────────────────────────────────────────────── */
.greeting-row { display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; }
@media (min-width: 640px) { .greeting-row { flex-direction: row; align-items: center; } }
.user-avatar {
  width: 5rem; height: 5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold), var(--color-ember));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(245,200,66,0.2);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-bg);
}
.greeting-info { display: flex; align-items: flex-start; gap: 1rem; }
.greeting-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.25rem,3vw,1.875rem); color: var(--color-text); }
.greeting-sub { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.badge-chips { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.chip {
  font-size: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
}
.chip-gold { background: rgba(245,200,66,0.1); border-color: rgba(245,200,66,0.2); color: var(--color-gold); font-weight: 600; }
.chip-blue { background: rgba(77,159,255,0.1); border-color: rgba(77,159,255,0.2); color: var(--color-electric); }

.mini-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 1024px) { .mini-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.mini-stat-card { padding: 1rem; display: flex; align-items: center; gap: 0.75rem; transition: border-color 0.3s; }
.mini-stat-card:hover { border-color: rgba(245,200,66,0.2); }
.mini-stat-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; }
.mini-stat-val { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; }
.mini-stat-label { font-size: 0.75rem; color: var(--color-text-muted); }

.modes-dash-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .modes-dash-grid { grid-template-columns: repeat(2, 1fr); } }
.mode-dash-card { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; position: relative; overflow: hidden; }
.mode-dash-card.locked { opacity: 0.6; cursor: not-allowed; }
.mode-lock-badge {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  display: flex; align-items: center; gap: 0.375rem;
  background: var(--color-surface-2);
  border: 1px solid rgba(42,42,69,1);
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-dim);
}
.mode-open-badge {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  display: flex; align-items: center; gap: 0.375rem;
  background: rgba(46,204,143,0.1);
  border: 1px solid rgba(46,204,143,0.3);
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-jade);
}
.open-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-jade); }
.mode-link-arrow { font-size: 0.75rem; font-weight: 700; }

.two-col { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .two-col { grid-template-columns: repeat(2, 1fr); } }

.activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.activity-row:last-child { border-bottom: none; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.activity-game { font-size: 0.875rem; color: var(--color-text); font-weight: 500; }
.activity-meta { font-size: 0.75rem; color: var(--color-text-dim); }
.status-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}
.status-win { background: rgba(46,204,143,0.1); color: var(--color-jade); }
.status-loss { background: rgba(232,69,69,0.1); color: var(--color-crimson); }
.lb-row { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.5rem; border-bottom: 1px solid var(--color-border); }
.lb-row:last-child { border-bottom: none; }
.lb-rank { font-family: var(--font-display); font-weight: 900; font-size: 0.875rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.lb-avatar { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 0.875rem; flex-shrink: 0; }
.lb-name { font-size: 0.875rem; color: var(--color-text); font-weight: 500; }
.lb-loc { font-size: 0.75rem; color: var(--color-text-dim); }
.lb-score { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--color-gold); flex-shrink: 0; }
.lb-you-row {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgba(245,200,66,0.2);
  background: rgba(245,200,66,0.05);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.games-dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .games-dash-grid { grid-template-columns: repeat(4, 1fr); } }
.game-quick-card {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.2s;
  text-decoration: none;
}
.game-quick-card:hover { transform: scale(1.03); }
.game-quick-stage { font-size: 0.75rem; font-weight: 700; }
.game-quick-name { font-family: var(--font-display); font-weight: 900; font-size: 0.875rem; color: var(--color-text); }
.game-quick-desc { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
.game-quick-score { font-size: 0.75rem; font-weight: 700; margin-top: auto; }
.game-quick-empty { font-size: 0.75rem; color: var(--color-text-dim); margin-top: auto; }

/* ── Wallet page ───────────────────────────────────────────────────────────── */
.balance-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(245,200,66,0.2);
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #16162A 0%, #0E0E18 60%, rgba(245,200,66,0.05) 100%);
}
.balance-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.25rem; }
.balance-amount { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem,6vw,3rem); color: var(--color-gold); }
.balance-unit { color: var(--color-text-muted); font-size: 1.125rem; }
.balance-equiv { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.25rem; }
.balance-note { font-size: 0.75rem; color: var(--color-text-dim); margin-top: 0.25rem; }

.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.quick-action-btn { padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; transition: transform 0.2s, border-color 0.2s; cursor: pointer; border-radius: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); }
.quick-action-btn:hover { transform: scale(1.05); }
.quick-action-btn:active { transform: scale(0.95); }
.quick-action-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.quick-action-label { font-size: 0.75rem; font-weight: 600; }

.tx-row { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1rem; transition: background 0.15s; }
.tx-row:hover { background: var(--color-surface-2); }
.tx-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.tx-desc { font-size: 0.875rem; color: var(--color-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-date { font-size: 0.75rem; color: var(--color-text-dim); }
.tx-amount { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; }
.tx-amount.in { color: var(--color-jade); }
.tx-amount.out { color: var(--color-ember); }
.tx-status { font-size: 0.625rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px; }
.tx-status.completed { background: rgba(46,204,143,0.1); color: var(--color-jade); }
.tx-status.pending   { background: rgba(245,200,66,0.1); color: var(--color-gold); }
.tx-status.failed    { background: rgba(232,69,69,0.1);  color: var(--color-crimson); }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
@media (min-width: 640px) { .modal-backdrop { align-items: center; } }
.modal-box {
  position: relative;
  width: 100%;
  max-width: 28rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  z-index: 10;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-family: var(--font-display); font-weight: 900; font-size: 1.125rem; color: var(--color-text); }
.modal-close {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  font-size: 0.875rem;
}
.modal-close:hover { color: var(--color-text); }
.dash-input {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--color-text);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.dash-input:focus { outline: none; border-color: rgba(46,204,143,0.5); }
.dash-input.pl { padding-left: 2rem; }
.dash-input-wrap { position: relative; }
.dash-input-prefix { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-weight: 700; pointer-events: none; }
.input-label { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.5rem; }

/* ── Profile page ──────────────────────────────────────────────────────────── */
.profile-card { padding: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
@media (min-width: 640px) { .profile-card { flex-direction: row; align-items: flex-start; } }
.profile-avatar { position: relative; }
.profile-avatar-img { width: 6rem; height: 6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 2.25rem; color: var(--color-bg); background: linear-gradient(135deg, var(--color-gold), var(--color-ember)); overflow: hidden; flex-shrink: 0; }
.profile-avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-btn {
  position: absolute;
  bottom: -0.5rem; right: -0.5rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--color-jade);
  border: 2px solid var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}
.avatar-upload-btn:hover { background: rgba(46,204,143,0.8); }
.profile-name { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; color: var(--color-text); }
.profile-email { font-size: 0.875rem; color: var(--color-text-muted); }
.achievements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.achievement-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.75rem; border-radius: 0.75rem; border: 1px solid var(--color-border); text-align: center; transition: all 0.2s; }
.achievement-item.earned { border-color: rgba(245,200,66,0.2); background: rgba(245,200,66,0.05); }
.achievement-item:not(.earned) { opacity: 0.4; }
.achievement-icon { font-size: 1.5rem; }
.achievement-label { font-size: 0.625rem; color: var(--color-text-muted); line-height: 1.3; }
.achievement-earned { font-size: 0.5rem; color: var(--color-jade); font-weight: 700; }
.danger-zone-btns { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .danger-zone-btns { flex-direction: row; } }
.danger-btn {
  flex: 1;
  padding: 0.625rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(232,69,69,0.3);
  color: var(--color-crimson);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.danger-btn:hover { background: rgba(232,69,69,0.1); }

/* ── Word of the Day Modal ─────────────────────────────────────────────────── */
.wotd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.wotd-modal {
  width: 100%;
  max-width: 28rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  padding: 2rem;
  position: relative;
}
.wotd-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: color 0.2s;
}
.wotd-close:hover { color: var(--color-text); }

/* ── Leaderboard ───────────────────────────────────────────────────────────── */
.lb-table-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); transition: background 0.15s; }
.lb-table-row:last-child { border-bottom: none; }
.lb-table-row:hover { background: var(--color-surface-2); }
.lb-table-rank { font-family: var(--font-display); font-weight: 900; font-size: 0.875rem; width: 2rem; text-align: center; flex-shrink: 0; }
.lb-table-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 1rem; flex-shrink: 0; }
.lb-table-name { font-size: 0.875rem; color: var(--color-text); font-weight: 500; }
.lb-table-loc { font-size: 0.75rem; color: var(--color-text-dim); }
.lb-table-score { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-gold); margin-left: auto; flex-shrink: 0; }

/* ── Filter tabs ───────────────────────────────────────────────────────────── */
.filter-tabs { display: flex; gap: 0.375rem; }
.filter-tab {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-tab:hover { color: var(--color-text-muted); }
.filter-tab:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.filter-tab.active {
  background: rgba(245,200,66,0.1);
  border-color: rgba(245,200,66,0.3);
  color: var(--color-gold);
}

/* ── Loading spinner ───────────────────────────────────────────────────────── */
.spinner {
  width: 3rem; height: 3rem;
  border: 4px solid rgba(74,72,96,0.4);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-inline: auto;
}
.spinner-sm {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid rgba(74,72,96,0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast-success { display: flex; align-items: center; gap: 0.75rem; background: rgba(46,204,143,0.12); border: 1px solid rgba(46,204,143,0.35); border-radius: 0.75rem; padding: 0.875rem 1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.toast-error   { display: flex; align-items: center; gap: 0.75rem; background: rgba(232,69,69,0.12);  border: 1px solid rgba(232,69,69,0.35);  border-radius: 0.75rem; padding: 0.875rem 1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.toast-info    { display: flex; align-items: center; gap: 0.75rem; background: rgba(77,159,255,0.12); border: 1px solid rgba(77,159,255,0.35); border-radius: 0.75rem; padding: 0.875rem 1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.toast-success p, .toast-success span { color: #4AE3A0; font-size: 0.875rem; font-weight: 500; }
.toast-error   p, .toast-error   span { color: #F87171; font-size: 0.875rem; font-weight: 500; }
.toast-info    p, .toast-info    span { color: #93C5FD; font-size: 0.875rem; font-weight: 500; }

/* ── Grid utilities ────────────────────────────────────────────────────────── */
.two-col-form { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .two-col-form { grid-template-columns: repeat(2, 1fr); } }
.stat-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .stat-mini-grid { grid-template-columns: repeat(4, 1fr); } }
.wallet-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }

/* ── Pending payment banner ────────────────────────────────────────────────── */
.pending-banner {
  background: rgba(255,107,53,0.1);
  border: 2px solid rgba(255,107,53,0.3);
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Elimination flow ──────────────────────────────────────────────────────── */
.flow-bar { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.flow-stage { display: flex; align-items: center; gap: 0.375rem; }
.flow-dot { width: 8px; height: 8px; border-radius: 50%; }
.flow-label { font-size: 0.875rem; color: var(--color-text-muted); }
.flow-arrow { color: var(--color-text-dim); }

/* ── Play page cards ───────────────────────────────────────────────────────── */
.play-games-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .play-games-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Misc spacing ──────────────────────────────────────────────────────────── */
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.pb-safe { padding-bottom: 5rem; }
@media (min-width: 1024px) { .pb-safe { padding-bottom: 2rem; } }

/* ── Overlay promo ─────────────────────────────────────────────────────────── */
.bank-detail-box { background: var(--color-surface-2); border-radius: 0.75rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; border: 1px solid var(--color-border); }
.bank-label { font-size: 0.75rem; color: var(--color-text-dim); margin-bottom: 0.25rem; }
.bank-val { font-weight: 600; color: var(--color-text); }
.copy-btn { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: rgba(46,204,143,0.2); color: var(--color-jade); border: none; cursor: pointer; transition: background 0.2s; }
.copy-btn:hover { background: rgba(46,204,143,0.3); }