/* ============================================================
   DUEL BOXING — Core Styles  ·  v2026 "NEO ARENA" redesign
   Design tokens: premium cyber-glass, aurora gradients, neon glow
   ============================================================ */

:root{
  /* Base surfaces — deep graphite-blue, richer than flat black */
  --bg: #05060c;
  --bg-alt: #0a0d1a;
  --bg-elevated: #0f1326;
  --bg-elevated-2: #141935;
  --glass: rgba(255,255,255,0.05);
  --glass-strong: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.1);
  --border-soft: rgba(255,255,255,0.055);
  --border-hair: rgba(255,255,255,0.14);

  /* Brand palette — cyan / violet / hot amber */
  --blue: #35e6ff;
  --blue-2: #2fa8ff;
  --blue-dim: rgba(53,230,255,0.14);
  --purple: #a875ff;
  --purple-2: #7c5cff;
  --purple-dim: rgba(168,117,255,0.16);
  --accent: #ff5d3a;
  --accent-2: #ffb020;
  --accent-dim: rgba(255,93,58,0.18);
  --gold: #ffc857;
  --success: #2bffa0;
  --success-dim: rgba(43,255,160,0.15);
  --danger: #ff4d6d;
  --danger-dim: rgba(255,77,109,0.15);

  --grad-primary: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  --grad-primary-hover: linear-gradient(135deg, #5cf0ff 0%, #bd93ff 100%);
  --grad-hot: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-success: linear-gradient(135deg, var(--success), #17c98a);
  --grad-mesh: radial-gradient(circle at 15% 20%, rgba(53,230,255,0.16), transparent 42%),
               radial-gradient(circle at 85% 15%, rgba(168,117,255,0.16), transparent 45%),
               radial-gradient(circle at 50% 100%, rgba(255,93,58,0.08), transparent 50%);

  --text: #f2f4fb;
  --text-dim: #98a0bf;
  --text-faint: #5c6384;

  --font-display: 'Rajdhani', 'Sora', sans-serif;
  --font-hero: 'Sora', 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.16,.84,.32,1);
  --ease-snap: cubic-bezier(.2,.9,.25,1.2);

  --shadow-glow-blue: 0 0 26px rgba(53,230,255,0.28), 0 0 2px rgba(53,230,255,0.5);
  --shadow-glow-purple: 0 0 26px rgba(168,117,255,0.28);
  --shadow-card: 0 14px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.35);
  --shadow-card-lift: 0 22px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;
  --shadow-inset-hair: inset 0 1px 0 rgba(255,255,255,0.07);
}

*{ box-sizing: border-box; margin:0; padding:0; }

html,body{ height:100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  position: relative;
}
@supports (overflow-x: clip) {
  body{ overflow-x: clip; }
}

/* Ambient background: soft aurora mesh + faint grain, fixed behind everything.
   Pure CSS/pseudo-element — no backdrop-filter, no effect on layout/JS. */
body::before{
  content:''; position: fixed; inset: 0; z-index: -2;
  background: var(--grad-mesh), var(--bg);
  pointer-events: none;
}
body::after{
  content:''; position: fixed; inset: 0; z-index: -1;
  opacity: .5; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

::selection{ background: var(--purple-dim); color: var(--text); }

.hidden{ display:none !important; }

button{ font-family: inherit; cursor:pointer; border:none; background:none; color: inherit; }
input{ font-family: inherit; }
ul,ol{ list-style:none; }
a{ color:inherit; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--blue-dim), var(--purple-dim)); border-radius: 10px; }
::-webkit-scrollbar-track{ background: transparent; }

/* ---------- Glass utility ---------- */
/* Opaque layered surface (no backdrop-filter, per prior WebView findings)
   with a gradient body + a hairline top highlight for a "glass edge" read. */
.glass{
  background: linear-gradient(165deg, #171d38 0%, #0d1224 60%, #0a0e1d 100%);
  border: 1px solid var(--border);
  position: relative;
  box-shadow: var(--shadow-inset-hair);
}
.glass::before{
  content:''; position:absolute; top:0; left:14px; right:14px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  pointer-events:none;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight:700;
  letter-spacing: 0.045em;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s var(--ease-snap), box-shadow .25s ease, opacity .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active{ transform: scale(0.96); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 15px; font-size:12px; }
.btn-primary{
  background: var(--grad-primary);
  color:#03121c;
  box-shadow: var(--shadow-glow-blue);
}
.btn-primary::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background: var(--grad-primary-hover); opacity:0; transition: opacity .25s ease;
}
.btn-primary:hover::after{ opacity:1; }
.btn-primary:hover{ box-shadow: 0 0 40px rgba(53,230,255,0.5), 0 0 0 1px rgba(255,255,255,0.15) inset; transform: translateY(-1px); }
.btn-secondary{
  background: var(--glass-strong);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-secondary:hover{ border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset, 0 0 18px rgba(53,230,255,0.18); }
.btn-ghost{ background: transparent; border: 1px solid var(--border-soft); color: var(--text-dim); }
.btn-ghost:hover{ color: var(--danger); border-color: var(--danger); }
.btn-danger{ background: linear-gradient(135deg, var(--danger), #ff7a5c); color:#1a0509; }
.btn-success{ background: var(--grad-success); color:#04160f; box-shadow: 0 0 22px rgba(43,255,160,0.28); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

.link-btn{ color: var(--blue); text-decoration: underline; text-underline-offset:3px; font-weight:600; background:none; padding:0; }

.icon-btn{
  width:42px; height:42px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass-strong); border:1px solid var(--border);
  font-size:18px; position:relative;
  transition: border-color .2s ease, transform .18s var(--ease-snap), box-shadow .2s ease;
}
.icon-btn:hover{ border-color: var(--blue); box-shadow: 0 0 16px rgba(53,230,255,0.25); transform: translateY(-1px); }
.icon-btn:active{ transform: scale(0.92); }

/* ============================================================
   AUTH SCREEN
   ============================================================ */
.auth-screen{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding: 24px; overflow:hidden;
}
.auth-bg{ position:absolute; inset:0; z-index:0; }
.grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(53,230,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,230,255,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  animation: gridDrift 26s linear infinite;
}
.glow-orb{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.55; animation: orbFloat 12s ease-in-out infinite; }
.orb-blue{ width:420px; height:420px; background: var(--blue); top:-140px; left:-110px; }
.orb-purple{ width:460px; height:460px; background: var(--purple); bottom:-180px; right:-130px; animation-delay: -6s; }
.aurora-veil{
  position:absolute; inset:-10%; z-index:0; opacity:.6; pointer-events:none;
  background: conic-gradient(from 0deg at 50% 50%, rgba(53,230,255,0.10), rgba(168,117,255,0.12), rgba(255,93,58,0.08), rgba(53,230,255,0.10));
  animation: auroraSpin 40s linear infinite;
  mask-image: radial-gradient(circle at 50% 40%, black, transparent 65%);
}
.particle-field{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.particle-field span{
  position:absolute; width:3px; height:3px; border-radius:50%; background: var(--blue);
  opacity:.55; box-shadow: 0 0 8px var(--blue); animation: particleRise linear infinite;
}
.particle-field span:nth-child(odd){ background: var(--purple); box-shadow: 0 0 8px var(--purple); }

.auth-layout{
  position:relative; z-index:1; width:100%; max-width:1180px;
  display:flex; align-items:center; justify-content:center; gap:64px;
}
.auth-showcase{ display:none; }

.auth-card{
  position:relative; z-index:1;
  width:100%; max-width: 440px;
  border-radius: var(--radius-xl);
  padding: 36px 30px;
  animation: floatIn .55s var(--ease);
  box-shadow: var(--shadow-card-lift);
}
.auth-logo{ display:flex; align-items:center; gap:11px; font-family: var(--font-display); font-size:21px; font-weight:700; letter-spacing:.06em; }
.auth-logo b{
  background: var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.auth-tagline{ color: var(--text-dim); font-size:13.5px; margin: 12px 0 8px; line-height:1.5; }
.auth-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.auth-badge{
  display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size:10.5px;
  color: var(--text-dim); background: var(--glass); border:1px solid var(--border-soft);
  padding: 5px 11px; border-radius: var(--radius-pill); letter-spacing:.02em;
}
.auth-badge b{ color: var(--blue); font-weight:700; }

.auth-tabs{ display:flex; background: var(--glass); border-radius: var(--radius-pill); padding:4px; margin-bottom:22px; border:1px solid var(--border-soft); }
.auth-tab{ flex:1; padding:11px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight:700; letter-spacing:.04em; color: var(--text-dim); font-size:13px; transition: all .2s ease; }
.auth-tab.active{ background: var(--grad-primary); color:#03121c; box-shadow: var(--shadow-glow-blue); }

.auth-form{ display:flex; flex-direction:column; gap:15px; }
.auth-form label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color: var(--text-dim); font-weight:600; }
.auth-form input{
  background: var(--bg-alt); border:1px solid var(--border); color: var(--text);
  padding: 13px 15px; border-radius: var(--radius-sm); font-size:14px; outline:none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-form input:focus{ border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); background: var(--bg-elevated); }
.checkbox-row{ flex-direction:row !important; align-items:center; gap:8px !important; }
.checkbox-row input{ width:16px; height:16px; accent-color: var(--blue); }
.auth-hint{ font-size:12px; color: var(--text-faint); text-align:center; margin-top:4px; }
.auth-error{ color: var(--danger); font-size:12.5px; margin-top:12px; text-align:center; min-height:16px; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width: 248px; flex-shrink:0; display:flex; flex-direction:column; gap:24px;
  padding: 24px 16px; border-right:1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--bg-alt), #070a15 90%);
  position: relative;
}
.sidebar::after{
  content:''; position:absolute; top:0; right:-1px; width:1px; height:100%;
  background: linear-gradient(180deg, transparent, rgba(53,230,255,0.25), transparent);
}
.sidebar-logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-size:17px; font-weight:700; letter-spacing:.05em; padding: 4px 6px 8px; }
.sidebar-logo b{ background: var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sidebar-nav{ display:flex; flex-direction:column; gap:5px; flex:1; }
.nav-item{
  display:flex; align-items:center; gap:12px; padding: 12px 13px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight:600; font-size:14px; text-align:left; transition: all .18s var(--ease);
  position: relative;
}
.nav-ico{ font-size:17px; width:22px; text-align:center; filter: grayscale(.4) opacity(.85); transition: filter .18s ease; }
.nav-item:hover{ background: var(--glass); color: var(--text); transform: translateX(2px); }
.nav-item:hover .nav-ico{ filter:none; }
.nav-item.active{
  background: linear-gradient(120deg, var(--blue-dim), var(--purple-dim));
  color: var(--text); box-shadow: inset 0 0 0 1px var(--border-hair), inset 3px 0 0 var(--blue);
}
.nav-item.active .nav-ico{ filter:none; }

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; gap:14px; padding: 15px 22px;
  border-bottom: 1px solid var(--border-soft); position:sticky; top:0;
  background: #090c17;
  background-image: linear-gradient(180deg, #0b0f1c, #090c17);
  z-index: 40;
}
.topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(53,230,255,0.4), rgba(168,117,255,0.4), transparent);
}
.topbar{ position:sticky; }
.topbar-user{ display:flex; align-items:center; gap:11px; }
.avatar-ring{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:15px;
  background: linear-gradient(135deg, var(--blue-dim), var(--purple-dim));
  border: 2px solid var(--blue); box-shadow: 0 0 12px rgba(53,230,255,0.45);
  color: var(--blue); position: relative;
  overflow: hidden;
}
.avatar-ring svg{ display:block; border-radius:50%; }
.avatar-ring.sm{ width:36px; height:36px; font-size:13px; }
.avatar-ring.lg{ width:78px; height:78px; font-size:26px; border-width:3px; }
.topbar-user-info{ display:flex; flex-direction:column; line-height:1.25; }
.topbar-user-info strong{ font-family: var(--font-display); font-size:14.5px; font-weight:700; letter-spacing:.03em; }
.status-dot{ width:8px; height:8px; border-radius:50%; background: var(--text-faint); display:inline-block; margin-top:3px; }
.status-dot.online{ background: var(--success); box-shadow: 0 0 7px var(--success); }
.status-dot.away{ background: var(--gold); box-shadow: 0 0 7px var(--gold); }
.status-dot.offline{ background: var(--text-faint); }

.topbar-stats{ display:flex; gap:9px; margin-left:auto; }
.stat-chip{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  background: var(--glass); border:1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 6px 14px; font-family: var(--font-mono); font-weight:700; font-size:13px;
  transition: border-color .2s ease;
}
.stat-chip:hover{ border-color: var(--blue); }
.stat-label{ font-family: var(--font-body); font-weight:700; font-size:9px; color: var(--text-faint); letter-spacing:.09em; }

.notif-dot{ position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); animation: pulseScale 1.4s ease infinite; }

.content{ flex:1; padding: 24px 26px 90px; max-width: 1120px; width:100%; margin:0 auto; }

.view{ display:none; animation: fadeUp .4s var(--ease); }
.view.active{ display:block; }

.view-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap: 12px; flex-wrap: wrap; }
.view-head h1{
  font-family: var(--font-display); font-size: 26px; font-weight:700; letter-spacing:.015em;
  background: linear-gradient(95deg, var(--text) 0%, var(--text) 45%, #b8e9f5 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.right-panel{
  width: 310px; flex-shrink:0; padding: 24px 18px; border-left: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--bg-alt), #070a15 90%);
}
.right-panel h3{ font-family: var(--font-display); font-size:15px; font-weight:700; letter-spacing:.04em; margin-bottom:14px; color: var(--text-dim); }
.right-panel-empty{ color: var(--text-faint); font-size:13px; }

.rp-self{
  display:flex; align-items:center; gap:11px; padding:12px; margin-bottom:14px;
  background: var(--glass); border:1px solid var(--border-soft); border-radius: var(--radius-md);
}
.rp-self strong{ display:block; font-family: var(--font-display); font-size:13.5px; font-weight:700; }
.rp-self span{ display:block; color: var(--text-faint); font-size:11px; margin-top:2px; }
.rp-hint{ font-size:12px; color: var(--text-faint); line-height:1.6; margin-bottom:20px; }
.rp-subhead{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:.1em; color: var(--text-faint);
  text-transform:uppercase; margin-bottom:10px;
}
.rp-mini-list{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.rp-mini-row{
  display:flex; align-items:center; gap:9px; padding:8px 9px;
  background: var(--glass); border:1px solid var(--border-soft); border-radius: var(--radius-sm);
}
.rp-mini-medal{ font-size:13px; width:16px; text-align:center; flex-shrink:0; }
.rp-mini-name{ flex:1; font-size:12.5px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-mini-rating{ font-family: var(--font-mono); font-size:12px; color: var(--blue); font-weight:700; }
.rp-viewall{ font-size:11.5px; }
.rp-back{ display:block; margin-bottom:14px; font-size:12.5px; }

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{ display:none; }

/* ============================================================
   MAP
   ============================================================ */
.map-search input{
  width:100%; background: var(--glass); border:1px solid var(--border); color: var(--text);
  padding: 13px 17px; border-radius: var(--radius-pill); font-size:14px; outline:none; margin-bottom:13px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.map-search input:focus{ border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }
/* Static prototype/testing disclaimer — visually distinct from the live
   activity ticker below it (dashed border + amber tint instead of the
   ticker's solid glass + red live-dot) so the two don't read as the same
   kind of message. */
.proto-banner{
  display:flex; align-items:flex-start; gap:10px;
  background: linear-gradient(90deg, rgba(255,176,32,0.1), rgba(255,176,32,0.03));
  border:1px dashed rgba(255,176,32,0.35); border-radius: var(--radius-md);
  padding: 11px 15px; margin-bottom:13px; font-size:12.5px; line-height:1.5; color: var(--text-dim);
}
.proto-banner-icon{ flex-shrink:0; font-size:15px; line-height:1.5; filter: drop-shadow(0 0 6px rgba(255,176,32,0.4)); }
.proto-banner-text{ min-width:0; }
.proto-banner-text a{
  color: var(--gold); font-weight:700; text-decoration: underline; text-underline-offset:2px; text-decoration-color: rgba(255,200,87,0.4);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.proto-banner-text a:hover{ color:#ffe4a3; text-decoration-color: currentColor; }
.activity-ticker{
  display:flex; align-items:center; gap:9px;
  background: var(--glass); border:1px solid var(--border-soft); border-radius: var(--radius-pill);
  padding: 9px 15px; margin-bottom:13px; font-size:12px; color: var(--text-dim);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.activity-ticker #activity-ticker-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; animation: fadeUp .3s ease; }
.live-dot{ width:7px; height:7px; border-radius:50%; background: var(--danger); flex-shrink:0; box-shadow: 0 0 7px var(--danger); animation: pulseScale 1.4s ease infinite; }
.leaflet-map{
  width:100%; height: 62vh; height: 62dvh; min-height:380px; border-radius: var(--radius-lg);
  overflow:hidden; border:1px solid var(--border); box-shadow: var(--shadow-card);
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  isolation: isolate;
  position: relative;
  z-index: 1;
}
.map-empty{
  text-align:center; padding: 30px 16px; color: var(--text-dim); display:flex; flex-direction:column; gap:12px; align-items:center;
}

/* Leaflet marker custom */
/* Smooth "gliding" movement: dummy players update position via
   marker.setLatLng() on a timer rather than being torn down and
   recreated, and Leaflet positions markers with a CSS transform — so
   transitioning that transform makes them visibly walk/drive around
   instead of teleporting every few seconds. Excluded during active
   dragging so panning the map by hand still feels instant. */
.leaflet-marker-icon{
  transition: transform 1.7s cubic-bezier(.4,0,.2,1);
}
.leaflet-dragging .leaflet-marker-icon{
  transition: none;
}
.player-marker{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 35% 28%, var(--blue-dim), var(--bg-elevated) 72%);
  border: 2.5px solid var(--blue);
  font-family: var(--font-display); font-weight:700; font-size:15px; color: var(--blue);
  text-shadow: 0 0 9px rgba(53,230,255,0.65);
  box-shadow: 0 0 16px rgba(53,230,255,0.6), 0 4px 10px rgba(0,0,0,0.5);
  position:relative;
}
.marker-avatar-clip{ width:100%; height:100%; border-radius:50%; overflow:hidden; display:block; }
.marker-avatar-clip svg{ display:block; }
.player-marker.away{ border-color: var(--gold); color: var(--gold); text-shadow:0 0 9px rgba(255,200,87,0.55); box-shadow: 0 0 16px rgba(255,200,87,0.5), 0 4px 10px rgba(0,0,0,0.5); background: radial-gradient(circle at 35% 28%, rgba(255,200,87,0.16), var(--bg-elevated) 72%); }
.player-marker.offline{ border-color: var(--text-faint); color: var(--text-faint); text-shadow:none; box-shadow:none; opacity:.55; background: var(--bg-elevated); }
.marker-chat-bubble{
  position:absolute; top:-16px; right:-8px; font-size:14px; line-height:1;
  background: var(--bg-elevated); border:1px solid var(--blue); border-radius:50%;
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 10px rgba(53,230,255,0.6);
  animation: popIn .25s ease, pulseScale 1s ease infinite;
}
.player-marker::after{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--blue); opacity:.6;
  animation: pulseRing 2.2s ease-out infinite;
}
.you-marker{
  width:20px; height:20px; border-radius:50%; background: var(--purple);
  border:3px solid #fff; box-shadow: 0 0 18px rgba(168,117,255,0.9);
}

.player-popup{ font-family: var(--font-body); min-width:190px; padding:2px; }
.player-popup .pp-name{ font-family: var(--font-display); font-weight:700; font-size:15px; }
.player-popup .pp-meta{ font-size:12px; color: var(--text-dim); margin: 3px 0 8px; }
.player-popup .pp-stats{ display:flex; gap:10px; font-family: var(--font-mono); font-size:11.5px; margin-bottom:10px; }
.leaflet-popup-content-wrapper{ background: var(--bg-elevated); color: var(--text); border-radius: var(--radius-md); border:1px solid var(--border); }
.leaflet-popup-tip{ background: var(--bg-elevated); }
.leaflet-popup-content{ margin:12px 14px; }
.leaflet-popup-close-button{
  color: var(--text-dim) !important;
  font-size: 20px !important;
  top: 8px !important; right: 8px !important;
  transition: color .15s ease;
}
.leaflet-popup-close-button:hover{ color: var(--blue) !important; }

.leaflet-bar{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  box-shadow: var(--shadow-card) !important;
}
.leaflet-bar a, .leaflet-bar a:hover{
  background: var(--bg-elevated) !important;
  color: var(--blue) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  width: 34px !important; height: 34px !important; line-height: 34px !important;
  font-size: 17px !important;
}
.leaflet-bar a:last-child{ border-bottom: none !important; }
.leaflet-bar a:hover{ background: var(--blue-dim) !important; color: var(--text) !important; }
.leaflet-control-attribution{
  background: rgba(5,7,15,0.85) !important;
  color: var(--text-faint) !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 8px 0 0 0 !important;
}
.leaflet-control-attribution a{ color: var(--text-dim) !important; }

/* ============================================================
   PLAYER CARD (shared: swipe + lists)
   ============================================================ */
.player-photo{
  width:100%; aspect-ratio:1/1; border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size: 64px;
  background: radial-gradient(circle at 30% 20%, var(--blue-dim), transparent 60%), var(--bg-elevated);
  border: 1px solid var(--border); color: var(--blue); position:relative; overflow:hidden;
}
.player-photo svg{ display:block; border-radius: var(--radius-md); }
.player-photo::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(160deg, transparent 55%, rgba(10,14,29,0.55));
}

/* ============================================================
   SWIPE / FIND OPPONENT
   ============================================================ */
.swipe-stage{ position:relative; height: 62vh; height: 62dvh; min-height:440px; max-width:380px; margin: 6px auto 20px; overscroll-behavior: contain; }
.swipe-card{
  position:absolute; inset:0; border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #171d38, #0d1224 65%, #0a0e1d);
  border:1px solid var(--border); box-shadow: var(--shadow-card);
  display:flex; flex-direction:column; padding:16px; touch-action: none; user-select:none;
  transition: transform .3s var(--ease), opacity .3s ease, box-shadow .3s ease;
}
.swipe-card .player-photo{ flex:1; font-size:88px; margin-bottom:14px; }
.swipe-card .sc-name{ font-family: var(--font-display); font-size:22px; font-weight:700; }
.swipe-card .sc-sub{ display:flex; gap:10px; align-items:center; color: var(--text-dim); font-size:13px; margin:4px 0 8px; font-family: var(--font-mono); }
.swipe-card .sc-style{ display:inline-block; background: var(--purple-dim); color: var(--purple); border-radius: var(--radius-pill); padding: 4px 12px; font-size:12px; font-weight:700; width:fit-content; }
.swipe-card .sc-badge{ position:absolute; top:20px; padding: 6px 16px; border-radius: 8px; font-family: var(--font-display); font-weight:700; letter-spacing:.06em; font-size:16px; border:3px solid; opacity:0; transition: opacity .15s ease; transform: rotate(-12deg); }
.swipe-card .sc-badge.pass{ left:20px; border-color: var(--danger); color: var(--danger); }
.swipe-card .sc-badge.like{ right:20px; border-color: var(--success); color: var(--success); transform: rotate(12deg); }

.swipe-actions{ display:flex; justify-content:center; gap:26px; margin-bottom: 8px; }
.swipe-queue{ max-width:460px; margin:0 auto; text-align:center; }
.swipe-queue-label{ display:block; font-family: var(--font-mono); font-size:10.5px; letter-spacing:.08em; color: var(--text-faint); margin-bottom:10px; }
.swipe-queue-row{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.swipe-queue-chip{ opacity:.75; transition: opacity .18s ease, transform .18s ease; cursor:default; }
.swipe-queue-chip:hover{ opacity:1; transform: translateY(-2px); }
.swipe-queue-chip .avatar-ring{ width:34px; height:34px; }
.swipe-btn{
  width:64px; height:64px; border-radius:50%; font-size:24px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(165deg, #171d38, #0d1224); border:1px solid var(--border); box-shadow: var(--shadow-card);
  transition: transform .18s var(--ease-snap), box-shadow .2s ease;
}
.swipe-btn:hover{ transform: translateY(-2px); }
.swipe-btn:active{ transform: scale(0.9); }
.swipe-btn.pass{ color: var(--danger); border-color: rgba(255,77,109,0.4); }
.swipe-btn.pass:hover{ box-shadow: 0 0 20px rgba(255,77,109,0.35); }
.swipe-btn.like{ color: var(--success); border-color: rgba(43,255,160,0.4); font-size:26px; }
.swipe-btn.like:hover{ box-shadow: 0 0 20px rgba(43,255,160,0.35); }


/* ============================================================
   MATCHES LIST
   ============================================================ */
.matches-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
.match-card{
  background: linear-gradient(165deg, #141a33 0%, #0e1224 70%);
  border:1px solid var(--border); border-radius: var(--radius-md); padding:17px;
  display:flex; flex-direction:column; gap:10px; transition: border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.match-card:hover{ border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.4), 0 0 18px rgba(53,230,255,0.12); }
.match-card-top{ display:flex; align-items:center; gap:12px; }
.match-card-name{ font-family: var(--font-display); font-weight:700; font-size:16px; }
.match-card-meta{ font-size:12px; color: var(--text-dim); }
.match-card-actions{ display:flex; gap:8px; margin-top:4px; }
.match-status{ font-size:11px; font-weight:700; padding:4px 11px; border-radius: var(--radius-pill); text-transform:uppercase; letter-spacing:.04em; display:inline-flex; align-items:center; gap:5px; }
.match-status::before{ content:''; width:6px; height:6px; border-radius:50%; }
.match-status.pending{ background: rgba(255,200,87,0.14); color: var(--gold); border: 1px solid rgba(255,200,87,0.3); }
.match-status.pending::before{ background: var(--gold); box-shadow: 0 0 5px var(--gold); }
.match-status.active{ background: var(--success-dim); color: var(--success); border: 1px solid rgba(43,255,160,0.3); }
.match-status.active::before{ background: var(--success); box-shadow: 0 0 5px var(--success); }
.match-status.rejected{ background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(255,77,109,0.3); }
.match-status.rejected::before{ background: var(--danger); box-shadow: 0 0 5px var(--danger); }

/* ============================================================
   MATCH FOUND OVERLAY
   ============================================================ */
.match-found-card{ text-align:center; color:#fff; z-index:2; position:relative; padding: 20px; }
.match-found-title{
  font-family: var(--font-display); font-size: 44px; font-weight:700; color: var(--blue);
  animation: pulseScale 1s ease infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .match-found-title{
    background: var(--grad-primary);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.match-found-sub{ font-family: var(--font-mono); letter-spacing:.15em; color: var(--text-dim); margin-bottom:28px; font-size:13px;}
.match-found-avatars{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:30px; }
.match-found-avatars .avatar-ring{ width:90px; height:90px; font-size:32px; }
.match-found-vs{ font-family: var(--font-display); font-size:20px; font-weight:700; color: var(--accent); }
.match-found-actions{ display:flex; gap:12px; justify-content:center; }

/* ============================================================
   MODALS (player / challenge / incoming / filters)
   ============================================================ */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(3,4,10,0.92);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:16px;
}
.modal{
  width:100%; max-width: 430px; border-radius: var(--radius-lg); padding:26px;
  max-height: 88vh; overflow-y:auto; box-shadow: var(--shadow-card-lift);
}
.modal h2{ font-family: var(--font-display); font-size:21px; font-weight:700; margin-bottom:4px; }
.modal-close{ position:absolute; top:16px; right:16px; }

.profile-modal-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.profile-modal-stats{ display:flex; gap:10px; margin: 14px 0; }
.pm-stat{ flex:1; text-align:center; background: var(--glass); border:1px solid var(--border-soft); border-radius: var(--radius-sm); padding:11px 6px; }
.pm-stat b{ display:block; font-family: var(--font-mono); font-size:16px; }
.pm-stat span{ font-size:10px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.modal-actions{ display:flex; gap:10px; margin-top: 18px; }

.notice-box{
  background: var(--accent-dim); border:1px solid rgba(255,93,58,0.35); color:#ffb59c;
  border-radius: var(--radius-sm); padding: 13px 15px; font-size:12.5px; margin: 14px 0; line-height:1.55;
}

.option-group{ display:flex; flex-direction:column; gap:8px; margin: 10px 0 16px; }
.option-row{
  display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--border-soft); font-size:14px; font-weight:600;
  transition: all .18s ease;
}
.option-row input{ accent-color: var(--blue); width:16px; height:16px; }
.option-row.selected{ border-color: var(--blue); background: var(--blue-dim); box-shadow: 0 0 0 1px var(--blue) inset; }
.option-group-label{ font-size:12px; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-top:8px; }

/* ============================================================
   DUEL ROOM
   ============================================================ */
.duelroom{
  width:100%; max-width:650px; background: linear-gradient(165deg, #171d38, #0d1224 65%, #0a0e1d);
  border:1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card-lift); max-height:92vh; overflow-y:auto;
}
.dr-mode-badge{ display:block; text-align:center; font-family: var(--font-mono); font-size:11px; letter-spacing:.15em; color: var(--purple); margin-bottom:14px; }
.dr-vs-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:10px; }
.dr-player{ flex:1; text-align:center; }
.dr-player .avatar-ring{ margin: 0 auto 8px; width:66px; height:66px; font-size:24px; }
.dr-player-name{ font-family: var(--font-display); font-weight:700; font-size:15px; }
.dr-vs-mid{ font-family: var(--font-display); font-size:19px; font-weight:700; color: var(--accent); flex-shrink:0; }
.dr-timer{ text-align:center; font-family: var(--font-mono); font-size:40px; font-weight:700; letter-spacing:.05em; margin: 4px 0 6px; color: var(--blue); text-shadow: 0 0 22px rgba(53,230,255,0.55); }
.dr-round{ text-align:center; font-size:12px; color: var(--text-dim); font-family: var(--font-mono); letter-spacing:.1em; margin-bottom:16px; }
.dr-bars{ display:flex; gap:16px; margin-bottom:18px; }
.dr-bar-col{ flex:1; }
.dr-bar-label{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:12px; margin-bottom:5px; }
.dr-bar-track{ height:11px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.06); overflow:hidden; }
.dr-bar-fill{ height:100%; border-radius: var(--radius-pill); transition: width .4s var(--ease); }
.dr-bar-fill.blue{ background: var(--grad-primary); box-shadow: 0 0 10px rgba(53,230,255,0.5); }
.dr-bar-fill.orange{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px rgba(255,93,58,0.4); }
.dr-score-buttons{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin-bottom:18px; }
.dr-score-buttons button{
  background: var(--glass); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px; font-family: var(--font-display); font-weight:700; font-size:13px; letter-spacing:.03em;
  display:flex; flex-direction:column; gap:2px; align-items:center; transition: all .18s ease;
}
.dr-score-buttons button:hover{ border-color: var(--blue); color: var(--blue); background: var(--blue-dim); transform: translateY(-1px); }
.dr-score-buttons small{ font-family: var(--font-body); font-weight:400; color: var(--text-faint); font-size:10px; }
.dr-controls{ display:flex; gap:10px; }
.dr-result{ text-align:center; padding: 10px 0; }
.dr-result .trophy{ font-size:48px; filter: drop-shadow(0 0 16px rgba(255,200,87,0.5)); }
.dr-result h2{ font-family: var(--font-display); font-size:22px; font-weight:700; margin: 8px 0 2px; }
.dr-result .winner-name{ color: var(--blue); font-size:27px; font-family: var(--font-display); font-weight:700; margin-bottom:10px; }
.dr-result .final-score{ font-family: var(--font-mono); font-size:20px; margin-bottom:6px; }
.dr-result .rating-change{ font-family: var(--font-mono); font-weight:700; font-size:16px; margin-bottom:18px; }
.dr-result .rating-change.up{ color: var(--success); }
.dr-result .rating-change.down{ color: var(--danger); }

/* ============================================================
   CHAT
   ============================================================ */
.chat-panel{ width:100%; max-width:420px; height:78vh; max-height:640px; border-radius: var(--radius-lg); display:flex; flex-direction:column; overflow:hidden; }
.chat-head{ display:flex; align-items:center; gap:10px; padding: 16px; border-bottom:1px solid var(--border-soft); }
.chat-head-name{ font-family: var(--font-display); font-weight:700; }
.chat-head-actions{ margin-left:auto; display:flex; gap:6px; }
.chat-messages{ flex:1; overflow-y:auto; padding: 14px; display:flex; flex-direction:column; gap:8px; }
.chat-msg{ max-width:75%; padding: 10px 14px; border-radius: 15px; font-size:13.5px; line-height:1.45; }
.chat-msg.me{ align-self:flex-end; background: linear-gradient(135deg, var(--blue-dim), var(--purple-dim)); border: 1px solid var(--border); border-bottom-right-radius:4px; }
.chat-msg.them{ align-self:flex-start; background: var(--glass); border:1px solid var(--border-soft); border-bottom-left-radius:4px; }
.chat-msg.typing{ display:flex; gap:4px; align-items:center; padding:12px 14px; }
.typing-dot{ width:6px; height:6px; border-radius:50%; background: var(--text-dim); animation: typingBounce 1.1s ease infinite; }
.typing-dot:nth-child(2){ animation-delay:.15s; }
.typing-dot:nth-child(3){ animation-delay:.3s; }
.chat-input-row{ display:flex; gap:8px; padding: 12px; border-top:1px solid var(--border-soft); }
.chat-input-row input{ flex:1; background: var(--bg-alt); border:1px solid var(--border); color: var(--text); padding:12px 15px; border-radius: var(--radius-pill); outline:none; font-size:14px; transition: border-color .18s ease; }
.chat-input-row input:focus{ border-color: var(--blue); }
.chat-send{ width:44px; height:44px; border-radius:50%; background: var(--grad-primary); color:#03121c; font-size:16px; box-shadow: var(--shadow-glow-blue); transition: transform .18s var(--ease-snap); }
.chat-send:hover{ transform: scale(1.06); }

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notif-panel{ width:100%; max-width:380px; max-height:70vh; overflow-y:auto; border-radius: var(--radius-lg); padding:18px; }
.notif-item{ display:flex; gap:10px; padding: 12px 8px; border-bottom:1px solid var(--border-soft); font-size:13.5px; }
.notif-item:last-child{ border-bottom:none; }
.notif-time{ font-size:11px; color: var(--text-faint); margin-top:2px; }


/* ============================================================
   RANKING
   ============================================================ */
.rank-filters{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.chip{ padding: 9px 17px; border-radius: var(--radius-pill); background: var(--glass); border:1px solid var(--border-soft); font-size:12px; font-weight:700; letter-spacing:.03em; color: var(--text-dim); transition: all .18s ease; }
.chip:hover{ color: var(--text); }
.chip.active{ background: var(--grad-primary); color:#03121c; border-color: transparent; box-shadow: var(--shadow-glow-blue); }
.rank-list{ display:flex; flex-direction:column; gap:8px; }
.rank-row{ display:flex; align-items:center; gap:14px; padding: 13px 17px; border-radius: var(--radius-md); background: var(--glass); border:1px solid var(--border-soft); transition: transform .18s ease, border-color .18s ease; }
.rank-row:hover{ transform: translateX(3px); border-color: var(--border-hair); }
.rank-pos{ font-family: var(--font-mono); font-weight:700; width:28px; text-align:center; color: var(--text-dim); }
.rank-row:nth-child(1){ border-color: rgba(255,211,92,0.4); background: linear-gradient(90deg, rgba(255,211,92,0.1), var(--glass)); }
.rank-row:nth-child(1) .rank-pos{ color:#ffd35c; text-shadow: 0 0 10px rgba(255,211,92,0.6); }
.rank-row:nth-child(2){ border-color: rgba(201,211,224,0.35); background: linear-gradient(90deg, rgba(201,211,224,0.09), var(--glass)); }
.rank-row:nth-child(2) .rank-pos{ color:#dde4ee; text-shadow: 0 0 8px rgba(201,211,224,0.55); }
.rank-row:nth-child(3){ border-color: rgba(224,160,107,0.4); background: linear-gradient(90deg, rgba(224,160,107,0.12), var(--glass)); }
.rank-row:nth-child(3) .rank-pos{ color:#f0b688; text-shadow: 0 0 8px rgba(224,160,107,0.55); }
/* Comes after the podium rules on purpose: if the current user IS in the
   top 3, they must still read clearly as "you" rather than the podium
   background silently winning the specificity tie. */
.rank-row.me{ border-color: var(--blue) !important; background: var(--blue-dim) !important; box-shadow: 0 0 18px rgba(53,230,255,0.18); }
.rank-name{ font-family: var(--font-display); font-weight:700; flex:1; }
.rank-rating{ font-family: var(--font-mono); font-weight:700; color: var(--blue); }

/* ============================================================
   TOURNAMENT
   ============================================================ */
.tournament-hero{
  border-radius: var(--radius-lg); padding: 24px; background: linear-gradient(135deg, var(--blue-dim), var(--purple-dim));
  border:1px solid var(--border); margin-bottom:20px; position:relative; overflow:hidden;
}
.tournament-hero::before{
  content:''; position:absolute; top:-40%; right:-15%; width:280px; height:280px; border-radius:50%;
  background: var(--accent); opacity:.13; filter: blur(60px);
}
.tournament-hero h2{ font-family: var(--font-display); font-size:23px; font-weight:700; margin-bottom:8px; }
.tournament-meta{ display:flex; gap:14px; flex-wrap:wrap; font-family: var(--font-mono); font-size:12.5px; color: var(--text-dim); margin-bottom:16px; }
.tournament-meta span:not(:first-child){ position:relative; padding-left:16px; }
.tournament-meta span:not(:first-child)::before{ content:'•'; position:absolute; left:0; opacity:.5; }
.tournament-champion-pick{
  margin-top:14px; font-size:12.5px; color: var(--text-dim);
  background: var(--glass); border:1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding:10px 14px; display:inline-block;
}
.tournament-champion-pick b{ color: var(--gold); text-shadow: 0 0 8px rgba(255,200,87,0.4); }
.bracket{ overflow-x:auto; display:flex; gap:36px; padding: 10px 4px 20px; }
.bracket-round{ display:flex; flex-direction:column; justify-content:space-around; gap:20px; min-width:170px; }
.bracket-round-title{ text-align:center; font-family: var(--font-mono); font-size:11px; color: var(--text-faint); letter-spacing:.1em; margin-bottom:6px; }
.bracket-match{ background: var(--glass); border:1px solid var(--border-soft); border-radius: var(--radius-sm); padding:9px 11px; font-size:12.5px; position:relative; transition: border-color .18s ease; }
.bracket-round.has-next .bracket-match::after{
  content:''; position:absolute; top:50%; right:-36px; width:36px; height:1px;
  background: linear-gradient(90deg, var(--border-hair), rgba(255,255,255,0.03));
}
.bracket-slot{ display:flex; justify-content:space-between; padding:4px 6px; border-radius:5px; }
.bracket-slot.winner{ color: var(--success); font-weight:700; background: rgba(43,255,160,0.09); }
.bracket-slot.winner::after{ content:'✓'; margin-left:6px; opacity:.8; }
.bracket-slot.tbd{ color: var(--text-faint); }
.bracket-match:has(.winner) .bracket-slot:not(.winner):not(:has(.tbd)){ opacity:.45; text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); }

/* ============================================================
   PROFILE
   ============================================================ */
.profile-head{ display:flex; align-items:center; gap:18px; margin-bottom:20px; flex-wrap:wrap; }
.profile-head-info h2{ font-family: var(--font-display); font-size:23px; font-weight:700; }
.profile-head-info p{ color: var(--text-dim); font-size:13px; margin-top:2px; }
.profile-stats-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap:11px; margin-bottom:20px; }
.profile-stat{ background: var(--glass); border:1px solid var(--border-soft); border-radius: var(--radius-md); padding:15px; text-align:center; transition: transform .18s ease, border-color .18s ease; }
.profile-stat:hover{ transform: translateY(-2px); border-color: var(--border-hair); }
.profile-stat b{ display:block; font-family: var(--font-mono); font-size:21px; }
.profile-stat span{ font-size:10.5px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.xp-bar-wrap{ margin-bottom:20px; }
.xp-bar-track{ height:15px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.05); overflow:hidden; border:1px solid var(--border); box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); }
.xp-bar-fill{ height:100%; min-width:6px; background: var(--grad-primary); border-radius: var(--radius-pill); box-shadow: 0 0 10px rgba(53,230,255,0.4); }
.xp-bar-label{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:12px; margin-bottom:6px; color: var(--text-dim); }
.achievements-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.achievement-chip{ display:flex; align-items:center; gap:6px; background: var(--glass); border:1px solid var(--border-soft); padding:9px 15px; border-radius: var(--radius-pill); font-size:12.5px; font-weight:600; transition: border-color .18s ease; }
.achievement-chip:hover{ border-color: var(--gold); }
.achievements-empty, .notif-empty, .swipe-empty, .empty-state, .history-empty, .blocked-empty{
  text-align:center; padding: 34px 20px; color: var(--text-dim); font-size:13px; line-height:1.6;
  background: var(--glass); border:1px dashed var(--border); border-radius: var(--radius-md);
}
.achievements-empty::before, .notif-empty::before, .swipe-empty::before, .empty-state::before, .history-empty::before, .blocked-empty::before{
  content:'🏆'; display:block; font-size:30px; margin-bottom:10px; opacity:.5; filter: grayscale(.3);
}
.notif-empty::before{ content:'🔔'; }
.swipe-empty::before{ content:'🔍'; }
.empty-state::before{ content:'⚔️'; }
.history-empty::before{ content:'🥊'; }
.blocked-empty::before{ content:'🛡️'; }
.swipe-empty p{ margin-bottom:14px; }
.history-table{ width:100%; border-collapse:collapse; font-size:13px; }
.history-table th{ text-align:left; color: var(--text-faint); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding: 8px 10px; border-bottom:1px solid var(--border-soft); }
.history-table td{ padding: 10px; border-bottom:1px solid var(--border-soft); }
.history-table .win{ color: var(--success); font-weight:700; }
.history-table .loss{ color: var(--danger); font-weight:700; }
.profile-section{ margin-bottom:24px; }
.profile-section h3{ font-family: var(--font-display); font-size:15px; font-weight:700; margin-bottom:10px; color: var(--text-dim); letter-spacing:.03em; }
.profile-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.profile-actions #btn-logout-profile{ margin-top:14px; padding-top:18px; border-top:1px solid var(--border-soft); }

.edit-profile-form{ display:flex; flex-direction:column; gap:12px; max-width:340px; }
.edit-profile-form label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color: var(--text-dim); font-weight:600; }
.edit-profile-form input, .edit-profile-form select{ background: var(--bg-alt); border:1px solid var(--border); color: var(--text); padding:11px 13px; border-radius: var(--radius-sm); outline:none; }

.blocked-list-item{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-soft); }

/* ============================================================
   ADMIN
   ============================================================ */
.admin-stats-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:12px; margin-bottom:22px; }
.admin-stat{ background: var(--glass); border:1px solid var(--border-soft); border-radius: var(--radius-md); padding:17px; transition: transform .18s ease; }
.admin-stat:hover{ transform: translateY(-2px); }
.admin-stat b{ display:block; font-family: var(--font-mono); font-size:25px; }
.admin-stat span{ font-size:11px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }
.admin-table{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom: 24px; }
.admin-table th{ text-align:left; color: var(--text-faint); font-weight:600; font-size:11px; text-transform:uppercase; padding:8px 10px; border-bottom:1px solid var(--border-soft); }
.admin-table td{ padding:10px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.admin-table .btn{ padding:6px 12px; font-size:11px; }
.admin-tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }

/* ============================================================
   RULES
   ============================================================ */
.rules-card{ border-radius: var(--radius-lg); padding: 24px; }
.rules-notice{ background: var(--accent-dim); border:1px solid rgba(255,93,58,0.35); color:#ffb59c; border-radius: var(--radius-sm); padding: 14px 16px; font-size:13px; line-height:1.6; margin-bottom:18px; }
.rules-list{ display:flex; flex-direction:column; gap:10px; counter-reset: rules; margin-bottom:20px; }
.rules-list li{ position:relative; padding-left:32px; font-size:14px; line-height:1.5; color: var(--text-dim); }
.rules-list li::before{
  counter-increment: rules; content: counter(rules); position:absolute; left:0; top:0;
  width:22px; height:22px; border-radius:50%; background: var(--glass); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:11px; font-weight:700; color: var(--blue);
}
.rules-emergency{ background: var(--glass); border:1px solid var(--border-soft); border-radius: var(--radius-sm); padding:14px 16px; font-size:13px; line-height:1.6; }
.rules-emergency strong{ display:block; margin-bottom:4px; color: var(--danger); }

/* ============================================================
   TOAST
   ============================================================ */
.toast-container{ position:fixed; top:80px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; width:100%; padding: 0 16px; pointer-events:none; }
.toast{
  background: linear-gradient(165deg, #171d38, #0d1224); border:1px solid var(--border); color: var(--text);
  padding: 13px 22px; border-radius: var(--radius-pill); font-size:13.5px; font-weight:600;
  box-shadow: var(--shadow-card-lift); animation: toastIn .3s var(--ease-snap), toastOut .25s ease 2.6s forwards;
}