/* ============================================================
   LATIPOV GAME – Math Tug of War  v2.0
   style.css — Cyberpunk / Sci-Fi Game UI
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:ital,wght@0,300;0,400;0,600;1,300&display=swap');

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --c-blue:    #00d4ff;
  --c-cyan:    #00ffea;
  --c-purple:  #bf00ff;
  --c-pink:    #ff4477;
  --c-gold:    #ffd060;
  --c-green:   #00ff88;
  --c-red:     #ff3b3b;

  --bg:        #020912;
  --glass:     rgba(255,255,255,0.035);
  --glass-b:   rgba(0,212,255,0.16);
  --glass-b2:  rgba(191,0,255,0.16);

  --glow-b:  0 0 18px rgba(0,212,255,0.45), 0 0 50px rgba(0,212,255,0.18);
  --glow-p:  0 0 18px rgba(191,0,255,0.45), 0 0 50px rgba(191,0,255,0.18);
  --glow-pk: 0 0 18px rgba(255,68,119,0.45), 0 0 50px rgba(255,68,119,0.18);
  --glow-g:  0 0 18px rgba(0,255,136,0.45), 0 0 50px rgba(0,255,136,0.18);

  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Exo 2', sans-serif;

  --radius-card: 20px;
  --radius-btn:  14px;
  --trans-main:  all 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
  background: var(--bg);
  font-family: var(--font-body);
  color: #e0eeff;
  cursor: none;
  user-select: none;
}
button { border: none; background: none; cursor: none; font-family: inherit; }
input  { cursor: text; }

/* ── CANVAS BACKGROUND ─────────────────────────────────────── */
#bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.spotlight {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 1000px; height: 1000px;
  background: radial-gradient(circle,
    rgba(0,90,180,0.07) 0%,
    rgba(80,0,160,0.04) 45%,
    transparent 68%);
  pointer-events: none; z-index: 1;
  animation: spotlight-pulse 7s ease-in-out infinite;
}
@keyframes spotlight-pulse {
  0%,100% { opacity:.7; transform:translate(-50%,-50%) scale(1); }
  50%      { opacity:1;  transform:translate(-50%,-50%) scale(1.12); }
}
.scanlines {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 200;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.025) 2px, rgba(0,0,0,0.025) 4px);
}

/* ── CORNER DECORATIONS ────────────────────────────────────── */
.corner {
  position: fixed; width:52px; height:52px;
  pointer-events:none; z-index:5; opacity:.35;
}
.corner.tl { top:14px; left:14px; border-top:1.5px solid var(--c-blue); border-left:1.5px solid var(--c-blue); }
.corner.tr { top:14px; right:14px; border-top:1.5px solid var(--c-purple); border-right:1.5px solid var(--c-purple); }
.corner.bl { bottom:14px; left:14px; border-bottom:1.5px solid var(--c-blue); border-left:1.5px solid var(--c-blue); }
.corner.br { bottom:14px; right:14px; border-bottom:1.5px solid var(--c-purple); border-right:1.5px solid var(--c-purple); }

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
#cursor {
  position: fixed; width:14px; height:14px;
  border:2px solid var(--c-cyan); border-radius:50%;
  pointer-events:none; z-index:9999;
  transition: transform .12s ease, border-color .2s;
  mix-blend-mode: screen;
}
#cdot {
  position: fixed; width:4px; height:4px;
  background: var(--c-cyan); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
}

/* ── HUD BAR ───────────────────────────────────────────────── */
.hud-bar {
  position: fixed; top:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:16px;
  font-family: var(--font-display); font-size:8px;
  letter-spacing:3px; color:rgba(0,212,255,0.28);
  z-index:20; pointer-events:none;
}
.hud-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--c-cyan); box-shadow:0 0 6px var(--c-cyan);
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── GAME HEADER ───────────────────────────────────────────── */
#game-header {
  position: fixed; top:0; left:0; right:0; height:54px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
  background:rgba(2,9,18,0.88);
  border-bottom:1px solid rgba(0,212,255,0.1);
  backdrop-filter:blur(16px);
  z-index:100;
}
#game-header.hidden { display:none; }
.header-logo {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:3px; color:var(--c-blue);
}
.logo-mini-img {
  width:32px; height:32px; border-radius:8px;
  background:linear-gradient(135deg,#0a2040,#040f20);
  border:1px solid rgba(0,212,255,0.35);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; box-shadow:var(--glow-b);
}
.header-right { display:flex; align-items:center; gap:10px; }
.coin-badge {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,208,96,0.1); border:1px solid rgba(255,208,96,0.25);
  border-radius:10px; padding:5px 12px;
  font-family:var(--font-display); font-size:11px; color:var(--c-gold);
}
.user-badge {
  display:flex; align-items:center; gap:8px;
  background:rgba(0,212,255,0.07); border:1px solid rgba(0,212,255,0.2);
  border-radius:10px; padding:5px 12px;
  font-family:var(--font-display); font-size:10px; letter-spacing:2px; color:#aad4ee;
  transition:var(--trans-main);
}
.user-badge:hover { border-color:var(--c-blue); background:rgba(0,212,255,0.12); }
.user-avatar {
  width:22px; height:22px; border-radius:6px;
  background:linear-gradient(135deg,var(--c-blue),var(--c-purple));
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#fff;
}
.logout-btn {
  font-size:10px; color:rgba(255,60,60,0.5);
  padding:2px 4px; border-radius:4px;
  transition:color .2s;
}
.logout-btn:hover { color:var(--c-red); }

/* ── SCREENS ───────────────────────────────────────────────── */
.screen {
  position: absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:10; padding:20px;
  transition: opacity .5s cubic-bezier(.16,1,.3,1),
              transform .5s cubic-bezier(.16,1,.3,1);
}
.screen.hidden      { opacity:0; pointer-events:none; transform:scale(.96) translateY(16px); }
.screen.slide-out   { opacity:0; pointer-events:none; transform:translateX(-60px) scale(.97); }
.screen.slide-right { opacity:0; pointer-events:none; transform:translateX(60px) scale(.97); }
.screen.has-header  { padding-top:70px; }

/* ── BACK BUTTON ───────────────────────────────────────────── */
.back-btn {
  position:absolute; top:60px; left:22px;
  display:flex; align-items:center; gap:8px;
  border:1px solid rgba(0,212,255,0.2); border-radius:10px;
  padding:7px 14px; color:rgba(0,212,255,0.55);
  font-family:var(--font-display); font-size:9px; letter-spacing:2px;
  transition:var(--trans-main);
}
.back-btn:hover {
  border-color:var(--c-blue); color:var(--c-blue);
  box-shadow:var(--glow-b); transform:translateX(-3px);
}

/* ── SCREEN: SPLASH ────────────────────────────────────────── */
#screen-splash { gap:0; }
.splash-wrap {
  display:flex; flex-direction:column;
  align-items:center; gap:0;
}

/* App icon — multi-layer fade-in */
.splash-icon {
  position:relative; width:200px; height:200px;
  margin-bottom:28px;
  opacity:0;
  animation: splash-icon-in 1s 0.2s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes splash-icon-in {
  from { opacity:0; transform:scale(.7) translateY(30px); }
  to   { opacity:1; transform:scale(1)  translateY(0); }
}
.splash-icon-glow {
  position:absolute; inset:-28px; border-radius:60px;
  background:radial-gradient(circle,
    rgba(0,180,255,0.15) 0%, rgba(0,100,200,0.07) 50%, transparent 70%);
  animation: icon-pulse 3s ease-in-out infinite;
  opacity:0; animation: icon-glow-in 1s 0.8s ease forwards, icon-pulse 3s 1.8s ease-in-out infinite;
}
@keyframes icon-glow-in { from{opacity:0} to{opacity:1} }
@keyframes icon-pulse {
  0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.08);opacity:1}
}
.splash-icon-ring {
  position:absolute; inset:-14px; border-radius:48px;
  border:1px solid rgba(0,212,255,0.2);
  opacity:0;
  animation: ring-in 0.7s 0.6s ease forwards, icon-pulse 3s 1.3s ease-in-out infinite .5s;
}
.splash-icon-ring.r2 {
  inset:-24px; border-color:rgba(191,0,255,0.12);
  animation: ring-in 0.7s 0.9s ease forwards, icon-pulse 3.5s 1.6s ease-in-out infinite .9s;
}
@keyframes ring-in { from{opacity:0;transform:scale(1.1)} to{opacity:1;transform:scale(1)} }
.splash-icon-box {
  position:relative; width:100%; height:100%;
  border-radius:36px;
  background:linear-gradient(145deg,#061525,#030c1a);
  border:2px solid rgba(0,212,255,0.4);
  box-shadow: var(--glow-b), inset 0 0 30px rgba(0,212,255,0.06);
  overflow:hidden;
}
.splash-icon-box::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,212,255,0.08) 0%, transparent 60%);
}

/* Title + subtitle — staggered fade-up */
.splash-title {
  font-family:var(--font-display); font-size:clamp(26px,5vw,46px);
  font-weight:900; letter-spacing:5px; text-align:center;
  background:linear-gradient(90deg, var(--c-blue), var(--c-cyan), var(--c-pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; background-size:200% auto;
  filter:drop-shadow(0 0 12px rgba(0,212,255,0.4));
  opacity:0;
  animation: grad-flow 4s linear infinite, splash-title-in 0.9s 0.9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes splash-title-in {
  from { opacity:0; transform:translateY(20px); letter-spacing:8px; }
  to   { opacity:1; transform:translateY(0); letter-spacing:5px; }
}
@keyframes grad-flow {
  0%{background-position:0% center} 100%{background-position:200% center}
}
.splash-subtitle {
  font-family:var(--font-display); font-size:11px; letter-spacing:7px;
  color:rgba(0,212,255,0.45); text-align:center; margin-top:6px;
  opacity:0; animation: fade-up .8s 1.2s forwards;
}
.loading-dots {
  display:flex; gap:8px; margin-top:20px;
  opacity:0; animation: fade-up .8s 1.5s forwards;
}
.loading-dots span {
  width:7px; height:7px; border-radius:50%;
  background:var(--c-blue); box-shadow:0 0 8px var(--c-blue);
  animation: dot-bounce .9s ease-in-out infinite;
}
.loading-dots span:nth-child(2){animation-delay:.15s;background:var(--c-pink);box-shadow:0 0 8px var(--c-pink);}
.loading-dots span:nth-child(3){animation-delay:.3s;background:var(--c-purple);box-shadow:0 0 8px var(--c-purple);}
@keyframes dot-bounce {
  0%,80%,100%{transform:scale(1);opacity:.6} 40%{transform:scale(1.4);opacity:1}
}

/* ── SCREEN: MENU ──────────────────────────────────────────── */
.menu-logo-row {
  display:flex; align-items:center; gap:12px; margin-bottom:6px;
  animation: fade-up .8s both;
}
.logo-sym {
  width:58px; height:58px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:24px; font-weight:900;
  border:2px solid; transition:var(--trans-main);
}
.logo-sym.blue   { color:var(--c-cyan);   border-color:var(--c-cyan);   background:rgba(0,255,234,0.05);  box-shadow:var(--glow-b); animation:sym-glow 3s ease-in-out infinite; }
.logo-sym.purple { color:var(--c-purple); border-color:var(--c-purple); background:rgba(191,0,255,0.05); box-shadow:var(--glow-p); animation:sym-glow 3s ease-in-out infinite .8s; }
@keyframes sym-glow {
  0%,100%{filter:brightness(1)} 50%{filter:brightness(1.35)}
}
.menu-title {
  font-family:var(--font-display); font-size:clamp(22px,4vw,38px);
  font-weight:900; letter-spacing:4px; text-align:center;
  background:linear-gradient(90deg,var(--c-blue),var(--c-cyan),var(--c-purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; background-size:200% auto;
  animation: grad-flow 4s linear infinite, fade-up .8s .1s both;
  filter:drop-shadow(0 0 10px rgba(0,212,255,0.35));
}
.menu-sub {
  font-family:var(--font-display); font-size:11px;
  letter-spacing:7px; color:rgba(0,212,255,0.4);
  text-align:center; margin-top:5px;
  animation: fade-up .8s .2s both;
}
.divider {
  width:220px; height:1px; margin:18px auto;
  background:linear-gradient(90deg,transparent,var(--c-cyan),var(--c-purple),transparent);
  animation: fade-up .8s .3s both;
}
.btn-group { display:flex; flex-direction:column; gap:11px; width:268px; animation: fade-up .8s .4s both; }

.btn {
  position:relative; padding:13px 24px;
  border:1px solid var(--glass-b); border-radius:var(--radius-btn);
  background:var(--glass); backdrop-filter:blur(16px);
  color:#d0eeff; font-family:var(--font-display);
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; text-align:center;
  transition:var(--trans-main); overflow:hidden;
}
.btn::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius-btn);
  background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(191,0,255,.05));
  opacity:0; transition:opacity .3s;
}
.btn::after {
  content:''; position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  transition:left .5s;
}
.btn:hover { transform:translateY(-3px) scale(1.02); border-color:var(--c-blue); color:var(--c-cyan); box-shadow:0 8px 28px rgba(0,212,255,.22), 0 0 0 1px rgba(0,212,255,.18); }
.btn:hover::before { opacity:1; }
.btn:hover::after { left:100%; }
.btn:active { transform:translateY(-1px) scale(.99); }
.btn-primary {
  background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(0,80,180,.1));
  border-color:rgba(0,212,255,.4); box-shadow:0 4px 18px rgba(0,212,255,.14);
}
.btn-primary:hover {
  background:linear-gradient(135deg,rgba(0,212,255,.25),rgba(0,120,255,.15));
  box-shadow:0 8px 36px rgba(0,212,255,.38), 0 0 50px rgba(0,212,255,.12);
  color:#fff;
}
.btn span { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-ic { font-size:15px; transition:transform .3s; }
.btn:hover .btn-ic { transform:scale(1.2) rotate(5deg); }

/* ── SCREEN: MODE SELECT ───────────────────────────────────── */
.mode-heading { font-family:var(--font-display); font-size:clamp(16px,3vw,26px); font-weight:900; letter-spacing:5px; color:#fff; text-align:center; animation:fade-up .6s both; }
.mode-sub { font-size:11px; color:rgba(0,212,255,.4); letter-spacing:4px; text-align:center; text-transform:uppercase; margin:6px 0 36px; animation:fade-up .6s .1s both; }

.cards-row { display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; }

.mode-card {
  --cc: var(--c-blue); --cg: rgba(0,212,255,.28); --cg2: rgba(0,212,255,.08);
  position:relative; width:210px; padding:30px 22px 24px;
  border-radius:22px; border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.028); backdrop-filter:blur(20px);
  text-align:center; transition:var(--trans-main); overflow:hidden;
  animation: card-in .7s both;
}
.mode-card:nth-child(2){ --cc:var(--c-purple); --cg:rgba(191,0,255,.28); --cg2:rgba(191,0,255,.08); animation-delay:.1s; }
.mode-card:nth-child(3){ --cc:var(--c-cyan);   --cg:rgba(0,255,234,.28); --cg2:rgba(0,255,234,.08); animation-delay:.2s; }
@keyframes card-in {
  from{opacity:0;transform:translateY(36px) scale(.9)} to{opacity:1;transform:translateY(0) scale(1)}
}

/* Top glow line */
.mode-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cc),transparent); opacity:0;
  transition:opacity .4s;
}
/* Bottom glow line */
.mode-card::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--cc),transparent); opacity:0;
  transition:opacity .4s;
}

/* Energy scan overlay */
.card-energy {
  position:absolute; inset:0; border-radius:22px;
  background:radial-gradient(ellipse at 50% 0%, var(--cg2) 0%, transparent 70%);
  opacity:0; transition:opacity .5s;
  pointer-events:none;
}
/* Scan line */
.card-scan {
  position:absolute; top:-100%; left:0; right:0; height:40%;
  background:linear-gradient(180deg, transparent 0%, var(--cg2) 50%, transparent 100%);
  transition:none; pointer-events:none;
}

.mode-card:hover {
  transform:translateY(-12px) scale(1.05);
  border-color:var(--cc);
  box-shadow:0 24px 60px var(--cg), 0 0 0 1px var(--cc), inset 0 0 30px var(--cg2);
}
.mode-card:hover::after  { opacity:1; }
.mode-card:hover::before { opacity:0.6; }
.mode-card:hover .card-energy { opacity:1; }
.mode-card:hover .card-scan {
  animation: card-scan-anim 0.7s ease-in-out;
}
@keyframes card-scan-anim {
  0%   { top:-100%; opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { top:110%;  opacity:0; }
}
.mode-card:hover .card-icon { transform:scale(1.22) translateY(-6px); filter:drop-shadow(0 0 14px var(--cc)); }
.mode-card:hover .card-btn  { background:rgba(255,255,255,.08); border-color:var(--cc); box-shadow:0 0 22px var(--cg); letter-spacing:4px; }

.card-icon { font-size:44px; display:block; margin-bottom:14px; transition:var(--trans-main); }
.card-tag  { font-family:var(--font-display); font-size:8px; letter-spacing:3px; color:var(--cc); text-transform:uppercase; opacity:.65; margin-bottom:7px; display:block; }
.card-title { font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:2px; color:#fff; margin-bottom:9px; text-transform:uppercase; }
.card-desc  { font-size:11px; color:rgba(180,210,255,.4); line-height:1.7; }
.card-btn {
  display:block; width:100%; margin-top:18px; padding:9px;
  border:1px solid rgba(255,255,255,.1); border-radius:10px;
  background:rgba(255,255,255,.04); color:var(--cc);
  font-family:var(--font-display); font-size:9px; letter-spacing:3px;
  text-transform:uppercase; transition:var(--trans-main);
}

/* ── SCREEN: DIFFICULTY ────────────────────────────────────── */
.diff-panel {
  background:rgba(255,255,255,.03); border:1px solid rgba(0,212,255,.12);
  border-radius:24px; padding:32px 36px;
  backdrop-filter:blur(20px); min-width:480px;
  animation: fade-up .6s both;
}
.diff-title { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:5px; color:var(--c-blue); margin-bottom:22px; text-align:center; }
.diff-cards { display:flex; gap:14px; }
.diff-card {
  flex:1; padding:22px 16px; border-radius:16px; text-align:center;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03);
  transition:var(--trans-main); position:relative; overflow:hidden;
}
.diff-card.selected { border-color:var(--dc, var(--c-blue)); background:rgba(255,255,255,.06); box-shadow:0 0 28px var(--dcg, rgba(0,212,255,.25)); }
.diff-card:hover { transform:translateY(-4px) scale(1.02); }
.diff-card.easy   { --dc:var(--c-green); --dcg:rgba(0,255,136,.22); }
.diff-card.medium { --dc:var(--c-gold);  --dcg:rgba(255,208,96,.22); }
.diff-card.hard   { --dc:var(--c-red);   --dcg:rgba(255,59,59,.22); }
.diff-dot  { width:30px; height:30px; border-radius:50%; margin:0 auto 12px; }
.diff-card.easy   .diff-dot { background:var(--c-green); box-shadow:0 0 14px rgba(0,255,136,.5); }
.diff-card.medium .diff-dot { background:var(--c-gold);  box-shadow:0 0 14px rgba(255,208,96,.5); }
.diff-card.hard   .diff-dot { background:var(--c-red);   box-shadow:0 0 14px rgba(255,59,59,.5); }
.diff-name { font-family:var(--font-display); font-size:12px; font-weight:700; color:#fff; margin-bottom:5px; }
.diff-desc { font-size:10px; color:rgba(160,200,255,.4); letter-spacing:1px; }
.diff-card.selected .diff-name { color:var(--dc); }
.start-btn {
  width:100%; margin-top:22px; padding:16px;
  border:1px solid rgba(0,212,255,.35); border-radius:14px;
  background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(0,80,180,.08));
  color:#fff; font-family:var(--font-display);
  font-size:13px; font-weight:700; letter-spacing:4px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:var(--trans-main); box-shadow:0 4px 18px rgba(0,212,255,.12);
}
.start-btn:hover {
  transform:translateY(-3px) scale(1.02);
  border-color:var(--c-blue); box-shadow:0 8px 36px rgba(0,212,255,.35);
  background:linear-gradient(135deg,rgba(0,212,255,.22),rgba(0,100,220,.14));
}

/* ── SCREEN: GAME ──────────────────────────────────────────── */
#screen-game {
  padding:60px 12px 10px;
  gap:8px; justify-content:flex-start;
  overflow-y: auto;
}

.score-panel {
  width:100%; max-width:780px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(0,212,255,.12);
  border-radius:18px; padding:12px 20px;
  display:flex; align-items:center;
  backdrop-filter:blur(16px);
  flex-shrink: 0;
}
.score-side { flex:1; display:flex; align-items:center; gap:10px; }
.score-side.right { justify-content:flex-end; flex-direction:row-reverse; }
.score-dot-blue  { width:10px; height:10px; border-radius:50%; background:var(--c-blue); box-shadow:0 0 8px var(--c-blue); flex-shrink:0; }
.score-dot-red   { width:10px; height:10px; border-radius:50%; background:var(--c-pink); box-shadow:0 0 8px var(--c-pink); flex-shrink:0; }
.score-dot-green { width:10px; height:10px; border-radius:50%; background:var(--c-green); box-shadow:0 0 8px var(--c-green); flex-shrink:0; }
.score-name { font-family:var(--font-display); font-size:10px; letter-spacing:2px; color:rgba(200,230,255,.7); }
.score-val {
  font-family:var(--font-display); font-size:26px; font-weight:900;
  color:var(--c-blue); text-shadow:var(--glow-b);
  min-width:32px; text-align:center;
}
.score-val.red   { color:var(--c-pink);  text-shadow:var(--glow-pk); }
.score-val.green { color:var(--c-green); text-shadow:var(--glow-g); }
.score-center { display:flex; flex-direction:column; align-items:center; gap:2px; }
.timer-circle {
  width:50px; height:50px; border-radius:50%;
  background:rgba(0,212,255,.08);
  border:2px solid var(--c-blue);
  box-shadow:var(--glow-b); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:16px; font-weight:700;
  color:var(--c-blue); transition:border-color .3s, color .3s;
}
.timer-circle.warning { border-color:var(--c-gold); color:var(--c-gold); box-shadow:0 0 18px rgba(255,208,96,.45); }
.timer-circle.danger  { border-color:var(--c-red);  color:var(--c-red);  box-shadow:0 0 18px rgba(255,59,59,.45); animation:timer-danger-pulse .4s ease-in-out infinite; }
@keyframes timer-danger-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.round-label { font-family:var(--font-display); font-size:9px; letter-spacing:2px; color:rgba(0,212,255,.4); }

/* Combo badge */
.combo-badge {
  background:rgba(255,208,96,.12); border:1px solid rgba(255,208,96,.3);
  border-radius:8px; padding:3px 8px;
  font-family:var(--font-display); font-size:10px; color:var(--c-gold);
  letter-spacing:1px; animation: combo-pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes combo-pop { from{transform:scale(.6)} to{transform:scale(1)} }

/* Local hint bar */
.local-hint {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 7px 20px;
  width: 100%; max-width: 780px;
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 2px; flex-shrink:0;
}
.hint-p1  { color: var(--c-blue); }
.hint-p2  { color: var(--c-green); }
.hint-sep { color: rgba(255,255,255,.15); font-size: 16px; }
kbd {
  display: inline-block; padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px; background: rgba(255,255,255,.06);
  font-family: var(--font-display); font-size: 9px; margin: 0 2px;
}

/* ── ARENA ─────────────────────────────────────────────────── */
.arena-panel {
  width:100%; max-width:780px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(0,212,255,.1);
  border-radius:18px; overflow:hidden;
  position:relative; height:148px;
  backdrop-filter:blur(8px);
  flex-shrink:0;
}
.arena-panel::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(0,180,255,.05) 0%, transparent 28%,
    transparent 72%, rgba(255,60,100,.05) 100%);
  pointer-events:none; z-index:1;
}
.arena-topbar {
  position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background:linear-gradient(90deg,var(--c-blue),var(--c-cyan),var(--c-pink));
  background-size:200% auto; animation:grad-flow 3s linear infinite;
}

/* ── STICKMEN — Rope-pulling pose ──────────────────────────── */
.sm-wrap {
  position:absolute; bottom:0; z-index:5;
}
/* Blue team (left side) */
.sm-wrap.blue-back  { left:1%;   width:62px;  opacity:.55; }
.sm-wrap.blue-front { left:10%;  width:82px; }
/* Red team (right side) — mirrored */
.sm-wrap.red-front  { right:10%; width:82px;  transform:scaleX(-1); }
.sm-wrap.red-back   { right:1%;  width:62px;  transform:scaleX(-1); opacity:.55; }

.sm-wrap svg { width:100%; height:auto; display:block; }

/* Rope-pull animation — lean back and heave */
.sm-wrap.blue-front svg {
  animation: pull-heave .9s ease-in-out infinite;
  transform-origin: 92% 42%;
}
.sm-wrap.blue-back svg {
  animation: pull-heave .9s ease-in-out infinite .25s;
  transform-origin: 88% 42%;
}
.sm-wrap.red-front svg {
  animation: pull-heave .9s ease-in-out infinite .12s;
  transform-origin: 92% 42%;
}
.sm-wrap.red-back svg {
  animation: pull-heave .9s ease-in-out infinite .38s;
  transform-origin: 88% 42%;
}
@keyframes pull-heave {
  0%,100% { transform: rotate(0deg)   translateX(0px);  }
  25%     { transform: rotate(-7deg)  translateX(-3px); }
  55%     { transform: rotate(-4deg)  translateX(-1.5px); }
}

/* ── ROPE ──────────────────────────────────────────────────── */
.rope-container {
  position:absolute; top:50%; left:24%; right:24%;
  transform:translateY(-50%); z-index:4;
}
.rope-track {
  height:5px; width:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--c-blue),#ffaa00,var(--c-pink));
  box-shadow:0 0 10px rgba(255,170,0,.55);
  position:relative;
}
/* Rope texture overlay */
.rope-track::after {
  content:''; position:absolute; inset:0; border-radius:3px;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0.12) 0px, rgba(255,255,255,0) 4px,
    rgba(0,0,0,0.08) 4px, rgba(0,0,0,0) 8px);
}
.rope-flag {
  position:absolute; top:50%; width:3px; height:38px; background:var(--c-red);
  border-radius:1.5px; transform:translate(-50%,-50%);
  box-shadow:0 0 10px var(--c-red);
  transition:left .5s cubic-bezier(.22,.68,0,1.2);
  z-index:2;
}
.rope-flag::after {
  content:''; position:absolute; top:-2px; left:0;
  width:13px; height:9px; background:var(--c-red);
  clip-path:polygon(0 0, 100% 50%, 0 100%); border-radius:1px;
}
.rope-zone {
  position:absolute; top:0; height:100%; width:14%; opacity:.4;
  border-radius:3px;
}
.rope-zone.blue { left:0;  background:linear-gradient(90deg,var(--c-blue),transparent); }
.rope-zone.red  { right:0; background:linear-gradient(90deg,transparent,var(--c-pink)); }

/* ── BATTLE PANELS ─────────────────────────────────────────── */
.battle-panels {
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%; max-width:780px;
  flex-shrink:0;
}
.battle-panels.local-mode {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
.battle-side {
  display:flex; flex-direction:column; gap:8px;
  flex:1;
}

/* Equation panel */
.eq-panel {
  width:100%;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(0,212,255,.1);
  border-radius:18px; padding:16px 24px;
  text-align:center; backdrop-filter:blur(8px);
  position:relative; overflow:hidden;
}
.eq-panel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--c-blue),var(--c-purple),transparent);
}
.p2-eq-panel { border-color: rgba(0,255,136,.12) !important; }
.p2-eq-panel::before {
  background: linear-gradient(90deg,transparent,var(--c-green),transparent) !important;
}
.eq-label {
  font-family:var(--font-display); font-size:9px; letter-spacing:5px;
  color:rgba(0,212,255,.35); margin-bottom:6px;
}
.eq-text {
  font-family:var(--font-display); font-size:clamp(22px,4.5vw,38px);
  font-weight:900; color:#fff;
  text-shadow:0 0 20px rgba(255,255,255,.15);
  letter-spacing:6px;
}
.eq-text.flash-correct { animation: flash-green .4s ease; }
.eq-text.flash-wrong   { animation: flash-red   .4s ease; }
@keyframes flash-green { 0%,100%{color:#fff} 50%{color:var(--c-green);text-shadow:0 0 30px var(--c-green)} }
@keyframes flash-red   { 0%,100%{color:#fff} 50%{color:var(--c-red);  text-shadow:0 0 30px var(--c-red)}   }

/* Answer buttons */
.ans-row { display:flex; gap:10px; width:100%; }
.ans-btn {
  flex:1; padding:18px 10px; border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04); backdrop-filter:blur(12px);
  font-family:var(--font-display); font-size:clamp(20px,4vw,32px); font-weight:900;
  color:#fff; letter-spacing:2px; text-align:center;
  transition:var(--trans-main); position:relative; overflow:hidden;
}
.ans-btn::before {
  content:''; position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(135deg,rgba(0,212,255,.1),transparent); opacity:0; transition:opacity .3s;
}
.ans-btn:hover { transform:translateY(-4px) scale(1.03); border-color:var(--c-blue); box-shadow:0 12px 40px rgba(0,212,255,.25); }
.ans-btn:hover::before { opacity:1; }
.ans-btn:active { transform:scale(.97); }
.ans-btn.correct { border-color:var(--c-green)!important; background:rgba(0,255,136,.08)!important; color:var(--c-green)!important; box-shadow:0 0 30px rgba(0,255,136,.3)!important; }
.ans-btn.wrong   { border-color:var(--c-red)!important;   background:rgba(255,59,59,.08)!important;  color:var(--c-red)!important;   box-shadow:0 0 30px rgba(255,59,59,.3)!important;  }
.ans-btn:disabled { pointer-events:none; opacity:.55; }

.ans-btn.p2-btn { border-color: rgba(0,255,136,.14); }
.ans-btn.p2-btn:hover { border-color: var(--c-green) !important; box-shadow: 0 12px 40px rgba(0,255,136,.22) !important; }

/* ── SCREEN: RESULT ────────────────────────────────────────── */
.result-wrap { display:flex; flex-direction:column; align-items:center; gap:0; animation: fade-up .6s both; }
.result-icon { font-size:72px; margin-bottom:10px; filter:drop-shadow(0 0 20px var(--c-gold)); animation: result-bounce .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes result-bounce { from{transform:scale(0) rotate(-20deg)} to{transform:scale(1) rotate(0)} }
.result-title {
  font-family:var(--font-display); font-size:clamp(28px,6vw,52px); font-weight:900;
  letter-spacing:5px; background:linear-gradient(90deg,var(--c-gold),var(--c-cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-align:center; margin-bottom:4px;
}
.result-title.lose { background:linear-gradient(90deg,var(--c-red),var(--c-pink)); -webkit-background-clip:text; background-clip:text; }
.result-sub { font-size:13px; color:rgba(200,230,255,.5); letter-spacing:4px; margin-bottom:24px; text-align:center; }
.result-score { display:flex; gap:28px; margin-bottom:20px; }
.result-score-item { text-align:center; }
.result-score-val { font-family:var(--font-display); font-size:36px; font-weight:900; }
.result-score-val.blue { color:var(--c-blue); text-shadow:var(--glow-b); }
.result-score-val.red  { color:var(--c-pink); text-shadow:var(--glow-pk); }
.result-score-lbl { font-family:var(--font-display); font-size:9px; letter-spacing:3px; color:rgba(200,230,255,.4); margin-top:3px; }
.result-rank-info {
  font-family:var(--font-display); font-size:10px; letter-spacing:3px;
  color:var(--c-gold); margin-bottom:20px; text-align:center;
  background:rgba(255,208,96,.08); border:1px solid rgba(255,208,96,.2);
  border-radius:10px; padding:8px 18px;
}
.result-btns { display:flex; gap:12px; }
.result-btn {
  padding:12px 28px; border-radius:12px; font-family:var(--font-display);
  font-size:11px; font-weight:700; letter-spacing:3px;
  border:1px solid; transition:var(--trans-main);
}
.result-btn.primary   { border-color:var(--c-blue);            color:var(--c-blue);            background:rgba(0,212,255,.08); }
.result-btn.secondary { border-color:rgba(255,255,255,.15);    color:rgba(255,255,255,.5);     background:transparent; }
.result-btn:hover { transform:translateY(-3px) scale(1.04); }
.result-btn.primary:hover { box-shadow:var(--glow-b); color:#fff; }

/* ── UTILITIES ─────────────────────────────────────────────── */
@keyframes fade-up {
  from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)}
}

/* Toast */
#toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(56px);
  background:rgba(2,14,30,.92); border:1px solid rgba(0,212,255,.28);
  border-radius:12px; padding:11px 22px;
  font-family:var(--font-display); font-size:9px; letter-spacing:3px;
  color:var(--c-cyan); z-index:1000; transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(16px); box-shadow:var(--glow-b); white-space:nowrap;
}
#toast.show { transform:translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════
   MODALS (Auth + Leaderboard)
═══════════════════════════════════════════════════════════ */
.modal {
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation: modal-in .3s ease;
}
.modal.hidden {
  display:none;
}
@keyframes modal-in { from{opacity:0} to{opacity:1} }

.modal-overlay {
  position:absolute; inset:0;
  background:rgba(2,9,18,.8);
  backdrop-filter:blur(6px);
}
.modal-box {
  position:relative; z-index:1;
  background:linear-gradient(145deg, #060e1e, #030a16);
  border:1px solid rgba(0,212,255,.25);
  border-radius:24px;
  padding:32px 36px;
  width:100%; max-width:380px;
  box-shadow:0 0 60px rgba(0,0,0,.6), var(--glow-b);
  animation: box-in .4s cubic-bezier(.16,1,.3,1);
}
@keyframes box-in { from{transform:scale(.88) translateY(24px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }

.modal-close {
  position:absolute; top:16px; right:18px;
  font-size:14px; color:rgba(0,212,255,.4);
  padding:4px 8px; border-radius:6px;
  transition:color .2s, background .2s;
}
.modal-close:hover { color:var(--c-red); background:rgba(255,59,59,.1); }

/* Auth tabs */
.modal-tabs {
  display:flex; gap:0; margin-bottom:28px;
  border:1px solid rgba(0,212,255,.15); border-radius:12px; overflow:hidden;
}
.modal-tab {
  flex:1; padding:10px;
  font-family:var(--font-display); font-size:10px; letter-spacing:3px;
  color:rgba(0,212,255,.4); transition:var(--trans-main);
}
.modal-tab.active {
  background:rgba(0,212,255,.12);
  color:var(--c-blue);
  border-bottom:2px solid var(--c-blue);
}
.modal-tab:hover:not(.active) { background:rgba(255,255,255,.04); color:rgba(0,212,255,.65); }

/* Form */
.modal-body { display:flex; flex-direction:column; gap:16px; }
.form-group  { display:flex; flex-direction:column; gap:7px; }
.form-label  {
  font-family:var(--font-display); font-size:9px; letter-spacing:3px;
  color:rgba(0,212,255,.45);
}
.form-input {
  background:rgba(0,212,255,.05);
  border:1px solid rgba(0,212,255,.2);
  border-radius:10px; padding:12px 16px;
  font-family:var(--font-display); font-size:12px; letter-spacing:1px;
  color:#e0eeff; outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.form-input:focus {
  border-color:var(--c-blue);
  box-shadow:0 0 0 3px rgba(0,212,255,.1);
}
.form-input::placeholder { color:rgba(0,212,255,.2); }

.auth-error {
  font-family:var(--font-display); font-size:9px; letter-spacing:2px;
  color:var(--c-red); min-height:18px; text-align:center;
}

.modal-submit {
  padding:14px;
  background:linear-gradient(135deg,rgba(0,212,255,.2),rgba(0,80,180,.12));
  border:1px solid rgba(0,212,255,.4);
  border-radius:12px; color:#fff;
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:4px;
  transition:var(--trans-main); margin-top:4px;
}
.modal-submit:hover {
  transform:translateY(-2px);
  box-shadow:var(--glow-b);
  background:linear-gradient(135deg,rgba(0,212,255,.28),rgba(0,100,220,.18));
}
.modal-submit:disabled { opacity:.5; pointer-events:none; }

/* ── LEADERBOARD MODAL ─────────────────────────────────────── */
.lb-box {
  max-width:520px;
  padding:28px 28px 24px;
}
.lb-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; flex-wrap:wrap; gap:12px;
}
.lb-title {
  font-family:var(--font-display); font-size:15px; font-weight:700;
  letter-spacing:4px; color:var(--c-gold);
}
.lb-filters { display:flex; gap:6px; }
.lb-filter {
  padding:5px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  font-family:var(--font-display); font-size:8px; letter-spacing:2px;
  color:rgba(200,230,255,.45); transition:var(--trans-main);
}
.lb-filter.active {
  border-color:var(--c-blue); color:var(--c-blue);
  background:rgba(0,212,255,.1);
}
.lb-filter:hover:not(.active) { border-color:rgba(0,212,255,.3); color:rgba(0,212,255,.6); }

.lb-content {
  max-height:340px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(0,212,255,.3) transparent;
}
.lb-content::-webkit-scrollbar { width:4px; }
.lb-content::-webkit-scrollbar-thumb { background:rgba(0,212,255,.3); border-radius:2px; }

.lb-loading {
  text-align:center; padding:40px;
  font-family:var(--font-display); font-size:10px; letter-spacing:3px;
  color:rgba(0,212,255,.35);
  animation: blink 1.2s ease-in-out infinite;
}
.lb-empty {
  text-align:center; padding:40px;
  font-family:var(--font-display); font-size:10px; letter-spacing:3px;
  color:rgba(255,255,255,.25);
}

.lb-table { width:100%; border-collapse:collapse; }
.lb-table th {
  font-family:var(--font-display); font-size:8px; letter-spacing:3px;
  color:rgba(0,212,255,.4); padding:8px 10px; text-align:left;
  border-bottom:1px solid rgba(0,212,255,.1);
}
.lb-table td {
  font-family:var(--font-display); font-size:11px; padding:10px 10px;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:#c0d8f0;
}
.lb-table tr:last-child td { border-bottom:none; }
.lb-table tr:hover td { background:rgba(0,212,255,.04); }

/* Rank column styling */
.lb-rank-1 { color:var(--c-gold) !important; font-weight:700; }
.lb-rank-2 { color:#c0c0c0 !important; font-weight:700; }
.lb-rank-3 { color:#cd7f32 !important; font-weight:700; }
.lb-score-val { color:var(--c-cyan) !important; font-weight:700; }
.lb-diff-easy   { color:var(--c-green) !important; }
.lb-diff-medium { color:var(--c-gold)  !important; }
.lb-diff-hard   { color:var(--c-red)   !important; }

.lb-my-rank {
  margin-top:14px; padding:10px 16px;
  background:rgba(255,208,96,.07);
  border:1px solid rgba(255,208,96,.2);
  border-radius:10px; text-align:center;
  font-family:var(--font-display); font-size:10px; letter-spacing:3px;
  color:var(--c-gold);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .diff-panel { min-width:unset; width:100%; max-width:360px; padding:22px 16px; }
  .diff-cards { flex-direction:column; gap:10px; }
  .mode-card  { width:160px; padding:22px 14px; }
  .cards-row  { gap:10px; }
  .arena-panel { height:110px; }
  .sm-wrap.blue-back, .sm-wrap.red-back { display:none; }
  .ans-btn { padding:14px; font-size:18px; }
  .battle-panels.local-mode { flex-direction:column; }
  .modal-box { padding:22px 18px; }
  .lb-box  { max-width:100%; }
}

/* ═══════════════════════════════════════════════════════════
   ONLINE MULTIPLAYER SCREENS
═══════════════════════════════════════════════════════════ */

/* Online Lobby */
.online-wrap {
  background: linear-gradient(145deg,#060e1e,#030a16);
  border: 1px solid rgba(0,212,255,.25);
  border-radius: 24px; padding: 32px 36px;
  width: 100%; max-width: 420px;
  box-shadow: var(--glow-b);
  animation: fade-up .5s both;
}
.online-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 4px; color: var(--c-blue); text-align: center;
  margin-bottom: 6px;
}
.online-sub {
  font-size: 11px; color: rgba(0,212,255,.35); letter-spacing: 3px;
  text-align: center; margin-bottom: 22px;
}
.online-tabs {
  display: flex; gap: 0; margin-bottom: 24px;
  border: 1px solid rgba(0,212,255,.15); border-radius: 12px; overflow: hidden;
}
.online-tab {
  flex: 1; padding: 10px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 3px;
  color: rgba(0,212,255,.4); transition: var(--trans-main);
}
.online-tab.active {
  background: rgba(0,212,255,.12); color: var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
}
.online-tab:hover:not(.active) { background: rgba(255,255,255,.04); }

.online-panel { display: flex; flex-direction: column; gap: 16px; }

.online-diff-row { display: flex; gap: 8px; }
.online-diff-btn {
  flex: 1; padding: 9px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  background: rgba(255,255,255,.03);
  font-family: var(--font-display); font-size: 9px; letter-spacing: 2px;
  color: rgba(200,230,255,.45); transition: var(--trans-main);
}
.online-diff-btn.active {
  border-color: var(--c-blue); color: var(--c-blue);
  background: rgba(0,212,255,.1);
}
.online-diff-btn:hover:not(.active) { border-color: rgba(0,212,255,.3); color: rgba(0,212,255,.6); }

/* Waiting Room */
.waiting-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  animation: fade-up .5s both;
}
.waiting-code-label {
  font-family: var(--font-display); font-size: 9px; letter-spacing: 5px;
  color: rgba(0,212,255,.35); margin-bottom: 10px;
}
.waiting-code {
  font-family: var(--font-display); font-size: clamp(36px,8vw,64px);
  font-weight: 900; letter-spacing: 12px; color: var(--c-gold);
  text-shadow: 0 0 30px rgba(255,208,96,.5);
  animation: blink 2s ease-in-out infinite;
  margin-bottom: 8px;
}
.waiting-hint {
  font-size: 11px; color: rgba(200,230,255,.3); letter-spacing: 3px;
  margin-bottom: 32px;
}
.waiting-players {
  display: flex; align-items: center; gap: 24px; margin-bottom: 28px;
}
.waiting-player { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wp-avatar {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #fff;
}
.blue-av { background: linear-gradient(135deg,#003c5a,#00d4ff22); border: 2px solid var(--c-blue); box-shadow: var(--glow-b); }
.red-av  { background: linear-gradient(135deg,#5a001a,#ff447722); border: 2px solid var(--c-pink); box-shadow: var(--glow-pk); }
.wp-name { font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; color: #c0d8f0; }
.wp-badge {
  font-family: var(--font-display); font-size: 8px; letter-spacing: 3px;
  color: var(--c-gold); border: 1px solid rgba(255,208,96,.3);
  border-radius: 6px; padding: 3px 8px; background: rgba(255,208,96,.08);
}
.waiting-vs {
  font-family: var(--font-display); font-size: 20px; font-weight: 900;
  color: rgba(255,255,255,.15);
}
.waiting-dots {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.waiting-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-blue); box-shadow: 0 0 8px var(--c-blue);
  animation: dot-bounce .9s ease-in-out infinite;
}
.waiting-dots span:nth-child(2){ animation-delay:.2s; background:var(--c-pink); box-shadow:0 0 8px var(--c-pink); }
.waiting-dots span:nth-child(3){ animation-delay:.4s; background:var(--c-purple); box-shadow:0 0 8px var(--c-purple); }
.waiting-status {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 3px;
  color: rgba(0,212,255,.4);
}

/* Online game wrap */
.online-game-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; width: 100%; padding-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE MODAL
═══════════════════════════════════════════════════════════ */
.prof-box {
  max-width: 400px;
  padding: 28px 30px 24px;
}
.prof-header {
  display: flex; align-items: center; gap: 18px; margin-bottom: 20px;
}
.prof-avatar-wrap {
  position: relative; flex-shrink: 0;
}
.prof-avatar {
  width: 68px; height: 68px; border-radius: 18px;
  background: linear-gradient(135deg, var(--c-blue), var(--c-purple));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 28px; font-weight: 900; color: #fff;
  border: 2px solid rgba(0,212,255,.5);
  box-shadow: var(--glow-b);
  position: relative; z-index: 1;
}
.prof-glow {
  position: absolute; inset: -8px; border-radius: 24px;
  background: radial-gradient(circle, rgba(0,212,255,.15) 0%, transparent 70%);
  animation: icon-pulse 3s ease-in-out infinite;
}
.prof-info { flex: 1; }
.prof-username {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 3px; color: #fff; margin-bottom: 6px;
}
.prof-coins-badge {
  display: inline-block;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 2px;
  color: var(--c-gold);
  background: rgba(255,208,96,.1); border: 1px solid rgba(255,208,96,.25);
  border-radius: 8px; padding: 4px 10px; margin-bottom: 5px;
}
.prof-joined {
  font-size: 10px; color: rgba(200,230,255,.3); letter-spacing: 2px;
}
.prof-divider {
  height: 1px; margin-bottom: 18px;
  background: linear-gradient(90deg, transparent, var(--c-blue), var(--c-purple), transparent);
}
.prof-stats {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;
}
.prof-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,.025); border-radius: 10px;
  border: 1px solid rgba(255,255,255,.05);
}
.ps-label {
  font-family: var(--font-display); font-size: 9px; letter-spacing: 3px;
  color: rgba(0,212,255,.4);
}
.ps-val {
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: #fff;
}
.prof-loading, .prof-empty {
  text-align: center; padding: 20px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 2px;
  color: rgba(0,212,255,.3);
}
.prof-logout-btn {
  width: 100%; padding: 12px;
  border: 1px solid rgba(255,59,59,.3); border-radius: 12px;
  background: rgba(255,59,59,.06);
  font-family: var(--font-display); font-size: 11px; letter-spacing: 3px;
  color: rgba(255,59,59,.7); transition: var(--trans-main);
}
.prof-logout-btn:hover {
  border-color: var(--c-red); color: var(--c-red);
  background: rgba(255,59,59,.1); transform: translateY(-2px);
}

/* Header avatar clickable */
#user-badge-logged { cursor: none; }
#user-badge-logged:hover .user-avatar {
  box-shadow: var(--glow-b); transform: scale(1.1);
  transition: var(--trans-main);
}
#user-badge-logged .logout-btn { display: none; }

/* ═══════════════════════════════════════════════════════════
   HOW TO PLAY MODAL
═══════════════════════════════════════════════════════════ */
.htp-box {
  max-width: 480px;
  padding: 28px 30px 24px;
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,212,255,.3) transparent;
}
.htp-box::-webkit-scrollbar { width: 4px; }
.htp-box::-webkit-scrollbar-thumb { background: rgba(0,212,255,.3); border-radius: 2px; }

.htp-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 4px; color: var(--c-blue); text-align: center;
  margin-bottom: 22px;
}
.htp-section { margin-bottom: 20px; }
.htp-section-title {
  font-family: var(--font-display); font-size: 9px; letter-spacing: 4px;
  color: var(--c-gold); margin-bottom: 10px; text-transform: uppercase;
}
.htp-text {
  font-size: 12px; color: rgba(200,230,255,.65); line-height: 1.8;
}
/* Controls */
.htp-controls { display: flex; flex-direction: column; gap: 8px; }
.htp-ctrl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05);
}
.htp-ctrl-badge {
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; padding: 4px 10px; border-radius: 6px; flex-shrink: 0;
}
.htp-ctrl-badge.blue   { background: rgba(0,212,255,.15);  color: var(--c-blue);   border: 1px solid rgba(0,212,255,.3); }
.htp-ctrl-badge.green  { background: rgba(0,255,136,.15);  color: var(--c-green);  border: 1px solid rgba(0,255,136,.3); }
.htp-ctrl-badge.purple { background: rgba(191,0,255,.15);  color: var(--c-purple); border: 1px solid rgba(191,0,255,.3); }
.htp-ctrl-keys { font-size: 11px; color: rgba(200,230,255,.55); }
/* Speed */
.htp-speed-bars { display: flex; flex-direction: column; gap: 6px; }
.htp-speed-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 10px; border-left: 3px solid;
}
.htp-speed-item.fast   { background: rgba(0,255,136,.06);  border-color: var(--c-green); }
.htp-speed-item.medium { background: rgba(255,208,96,.06); border-color: var(--c-gold); }
.htp-speed-item.slow   { background: rgba(255,59,59,.06);  border-color: var(--c-red); }
.hs-label { font-size: 10px; color: rgba(200,230,255,.5); letter-spacing: 1px; }
.hs-val   { font-family: var(--font-display); font-size: 11px; font-weight: 700; color: #fff; }
/* Combo */
.htp-combos { display: flex; flex-direction: column; gap: 6px; }
.htp-combo-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,136,0,.06); border: 1px solid rgba(255,136,0,.15);
}
.hc-num  { font-family: var(--font-display); font-size: 14px; font-weight: 900; color: var(--c-gold); min-width: 32px; }
.hc-desc { font-size: 11px; color: rgba(200,230,255,.6); }
/* Coins */
.htp-coins-list { display: flex; flex-direction: column; gap: 5px; }
.htc-row {
  display: flex; justify-content: space-between;
  padding: 7px 12px; border-radius: 8px;
  background: rgba(255,208,96,.04); border: 1px solid rgba(255,208,96,.1);
  font-size: 11px; color: rgba(200,230,255,.6);
}
.htc-val { font-family: var(--font-display); font-size: 11px; color: var(--c-gold); font-weight: 700; }
/* Difficulty */
.htp-diff-list { display: flex; flex-direction: column; gap: 6px; }
.htd-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 10px; border-left: 3px solid;
}
.htd-row.easy   { background: rgba(0,255,136,.05);  border-color: var(--c-green); }
.htd-row.medium { background: rgba(255,208,96,.05); border-color: var(--c-gold); }
.htd-row.hard   { background: rgba(255,59,59,.05);  border-color: var(--c-red); }
.htd-name { font-family: var(--font-display); font-size: 10px; font-weight: 700; color: #fff; }
.htd-desc { font-size: 10px; color: rgba(200,230,255,.45); }

/* ═══════════════════════════════════════════════════════════
   SHOP MODAL
═══════════════════════════════════════════════════════════ */
.shop-box {
  max-width: 560px;
  padding: 24px 26px 20px;
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,212,255,.3) transparent;
}
.shop-box::-webkit-scrollbar { width: 4px; }
.shop-box::-webkit-scrollbar-thumb { background: rgba(0,212,255,.3); border-radius: 2px; }

.shop-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.shop-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 4px; color: var(--c-blue);
}
.shop-balance {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--c-gold);
  background: rgba(255,208,96,.1); border: 1px solid rgba(255,208,96,.25);
  border-radius: 10px; padding: 5px 14px;
}
.shop-sub {
  font-size: 11px; color: rgba(0,212,255,.35); letter-spacing: 3px;
  margin-bottom: 20px;
}
.shop-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
}

/* Frame card */
.frame-card {
  border-radius: 16px; padding: 16px 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  text-align: center; cursor: none;
  transition: var(--trans-main); position: relative; overflow: hidden;
}
.frame-card:hover { transform: translateY(-4px) scale(1.03); }
.frame-card.owned  { border-color: rgba(0,255,136,.35); background: rgba(0,255,136,.04); }
.frame-card.active { border-color: var(--c-gold) !important; background: rgba(255,208,96,.06) !important; box-shadow: 0 0 24px rgba(255,208,96,.2); }

/* Avatar preview with frame */
.frame-preview-wrap {
  width: 56px; height: 56px; margin: 0 auto 10px;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.frame-preview-avatar {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #1a3a5c, #0d1f35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #fff;
  position: relative; z-index: 1;
}
.frame-preview-border {
  position: absolute; inset: 0; border-radius: 14px;
  pointer-events: none;
}
/* Frame styles */
.frame-starter  .frame-preview-border { border: 2px solid rgba(255,255,255,.3); }
.frame-bronze   .frame-preview-border { border: 3px solid #cd7f32; box-shadow: 0 0 12px rgba(205,127,50,.8), inset 0 0 8px rgba(205,127,50,.6); }
.frame-silver   .frame-preview-border { border: 3px solid #80ffff; box-shadow: 0 0 14px rgba(0,229,255,.8), inset 0 0 10px rgba(0,229,255,.6); animation: icy-pulse 2s infinite; }
.frame-neon-blue .frame-preview-border { border: 3px solid var(--c-blue); box-shadow: 0 0 16px rgba(0,212,255,.9), inset 0 0 12px rgba(0,212,255,.7); animation: glow-pulse-b 1.5s ease-in-out infinite; }
.frame-neon-purple .frame-preview-border { border: 3px solid var(--c-purple); box-shadow: 0 0 16px rgba(191,0,255,.9), inset 0 0 12px rgba(191,0,255,.7); animation: glow-pulse-p 1.5s ease-in-out infinite; }
.frame-gold     .frame-preview-border { border: 4px outset var(--c-gold); box-shadow: 0 0 20px rgba(255,208,96,.9), inset 0 0 12px rgba(255,208,96,.7); animation: glow-pulse-g 1.2s ease-in-out infinite; }
.frame-fire     .frame-preview-border { border: 4px dashed #ff3300; box-shadow: 0 0 24px #ff6600, inset 0 0 16px #ff3300; animation: fire-pulse 0.8s ease-in-out infinite; }
.frame-rainbow  .frame-preview-border { border: 4px solid #fff; animation: rainbow-border 2s linear infinite; }
.frame-vip      .frame-preview-border { border: 4px double var(--c-gold); border-radius: 18px; animation: vip-pulse 1s ease-in-out infinite; }
.frame-titan    .frame-preview-border { border: 5px double #e0e5ff; border-radius: 18px; animation: titan-pulse 1.5s ease-in-out infinite; }

@keyframes icy-pulse    { 0%,100%{box-shadow:0 0 10px rgba(0,229,255,.5), inset 0 0 6px rgba(0,229,255,.4)} 50%{box-shadow:0 0 20px rgba(0,229,255,.9), inset 0 0 14px rgba(0,229,255,.8)} }
@keyframes glow-pulse-b { 0%,100%{box-shadow:0 0 12px rgba(0,212,255,.6), inset 0 0 8px rgba(0,212,255,.5)} 50%{box-shadow:0 0 24px rgba(0,212,255,1), inset 0 0 16px rgba(0,212,255,.9)} }
@keyframes glow-pulse-p { 0%,100%{box-shadow:0 0 12px rgba(191,0,255,.6), inset 0 0 8px rgba(191,0,255,.5)} 50%{box-shadow:0 0 24px rgba(191,0,255,1), inset 0 0 16px rgba(191,0,255,.9)} }
@keyframes glow-pulse-g { 0%,100%{box-shadow:0 0 14px rgba(255,208,96,.6), inset 0 0 10px rgba(255,208,96,.5)} 50%{box-shadow:0 0 28px rgba(255,208,96,1), inset 0 0 20px rgba(255,208,96,.9)} }
@keyframes fire-pulse   { 0%,100%{box-shadow:0 0 16px #ff6600, inset 0 0 12px #ff3300; border-color:#ff3300} 50%{box-shadow:0 0 32px #ff9900, inset 0 0 24px #ff6600; border-color:#ff9900} }
@keyframes rainbow-border {
  0%  {border-color:#ff0000;box-shadow:0 0 18px #ff0000, inset 0 0 12px #ff0000}
  16% {border-color:#ff8800;box-shadow:0 0 18px #ff8800, inset 0 0 12px #ff8800}
  33% {border-color:#ffff00;box-shadow:0 0 18px #ffff00, inset 0 0 12px #ffff00}
  50% {border-color:#00ff00;box-shadow:0 0 18px #00ff00, inset 0 0 12px #00ff00}
  66% {border-color:#0088ff;box-shadow:0 0 18px #0088ff, inset 0 0 12px #0088ff}
  83% {border-color:#8800ff;box-shadow:0 0 18px #8800ff, inset 0 0 12px #8800ff}
  100%{border-color:#ff0000;box-shadow:0 0 18px #ff0000, inset 0 0 12px #ff0000}
}
@keyframes vip-pulse { 0%,100%{box-shadow:0 0 20px rgba(255,208,96,.8), inset 0 0 14px rgba(255,208,96,.6)} 50%{box-shadow:0 0 40px rgba(255,208,96,1), inset 0 0 28px rgba(255,208,96,.9)} }
@keyframes titan-pulse { 
  0%,100%{box-shadow: inset 0 0 16px #7b2cbf, 0 0 24px rgba(123,44,191,0.8), 0 0 4px #fff; border-color:#c0c6d8;} 
  50%{box-shadow: inset 0 0 32px #9d4edd, 0 0 48px rgba(157,78,221,1), 0 0 12px #fff; border-color:#ffffff;} 
}

.frame-card-name {
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 2px; color: #fff; margin-bottom: 4px;
}
.frame-card-price {
  font-family: var(--font-display); font-size: 10px; color: var(--c-gold);
  margin-bottom: 10px;
}
.frame-card-price.free-price { color: var(--c-green); }
.frame-buy-btn {
  width: 100%; padding: 7px;
  border-radius: 8px; font-family: var(--font-display);
  font-size: 8px; letter-spacing: 2px;
  border: 1px solid; transition: var(--trans-main);
}
.frame-buy-btn.buy   { border-color: rgba(0,212,255,.4); color: var(--c-blue); background: rgba(0,212,255,.07); }
.frame-buy-btn.buy:hover { background: rgba(0,212,255,.15); transform: scale(1.02); }
.frame-buy-btn.equip { border-color: rgba(0,255,136,.4); color: var(--c-green); background: rgba(0,255,136,.07); }
.frame-buy-btn.equip:hover { background: rgba(0,255,136,.15); }
.frame-buy-btn.equipped { border-color: rgba(255,208,96,.4); color: var(--c-gold); background: rgba(255,208,96,.07); cursor: default; }
.frame-buy-btn.no-coins { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.25); cursor: default; }

/* Active frame indicator */
.frame-card.active::before {
  content: '✓ ACTIVE';
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-display); font-size: 7px; letter-spacing: 1px;
  color: var(--c-gold); background: rgba(255,208,96,.12);
  border: 1px solid rgba(255,208,96,.3); border-radius: 4px; padding: 2px 5px;
}

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD TITLES & CLICKABLE ROWS
═══════════════════════════════════════════════════════════ */
.lb-table tr.lb-clickable { cursor: none; transition: background .2s; }
.lb-table tr.lb-clickable:hover td { background: rgba(0,212,255,.08) !important; }
.lb-title-badge {
  display: inline-block;
  font-family: var(--font-display); font-size: 7px; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 5px; margin-left: 4px;
  vertical-align: middle;
}
.title-legend   { background: rgba(255,208,96,.15); color: var(--c-gold);   border: 1px solid rgba(255,208,96,.3); }
.title-champion { background: rgba(0,212,255,.12);  color: var(--c-blue);   border: 1px solid rgba(0,212,255,.3); }
.title-master   { background: rgba(255,68,119,.12); color: var(--c-pink);   border: 1px solid rgba(255,68,119,.3); }
.title-expert   { background: rgba(0,255,136,.1);   color: var(--c-green);  border: 1px solid rgba(0,255,136,.3); }
.title-veteran  { background: rgba(191,0,255,.1);   color: var(--c-purple); border: 1px solid rgba(191,0,255,.3); }
.title-player   { background: rgba(255,255,255,.05);color: rgba(200,230,255,.5); border:1px solid rgba(255,255,255,.1); }

/* ═══════════════════════════════════════════════════════════
   PATCH v2.2 — Titles, Layout, Lang Toggle
═══════════════════════════════════════════════════════════ */

/* ── LANG TOGGLE ─────────────────────────────────────────── */
.lang-toggle {
  display: flex; align-items: center; gap: 0;
  background: rgba(0,212,255,.07);
  border: 1px solid rgba(0,212,255,.2);
  border-radius: 10px; overflow: hidden;
  font-family: var(--font-display); font-size: 9px;
  letter-spacing: 2px; transition: var(--trans-main);
}
.lang-toggle span {
  padding: 6px 11px; color: rgba(0,212,255,.4);
  transition: var(--trans-main);
}
.lang-toggle span.active {
  background: rgba(0,212,255,.15);
  color: var(--c-blue);
}
.lang-divider {
  width: 1px; height: 20px;
  background: rgba(0,212,255,.2);
}
.lang-toggle:hover { border-color: var(--c-blue); }

/* ── SCORE PANEL FIX — P1 LEFT · CPU RIGHT ───────────────── */
.score-side.p1-side {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-start;
}
.score-side.cpu-side {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  justify-content: flex-end;
  flex-direction: row;
}
.score-player-title {
  font-family: var(--font-display); font-size: 7px;
  letter-spacing: 1px; margin-top: 2px;
  min-height: 14px;
}

/* ── CYBERPUNK TITLE BADGES ──────────────────────────────── */
.title-ghost     { background:rgba(10,10,20,.8);     color:#e0e0ff; border:1px solid rgba(150,150,255,.4); text-shadow:0 0 8px rgba(150,150,255,.8); }
.title-apex      { background:rgba(255,60,0,.12);    color:#ff6030; border:1px solid rgba(255,60,0,.4);    text-shadow:0 0 8px rgba(255,60,0,.8); }
.title-warzone   { background:rgba(255,40,80,.1);    color:#ff2855; border:1px solid rgba(255,40,80,.4);   text-shadow:0 0 8px rgba(255,40,80,.8); }
.title-shadowops { background:rgba(120,0,200,.12);   color:#c060ff; border:1px solid rgba(120,0,200,.4);  text-shadow:0 0 8px rgba(120,0,200,.8); }
.title-ironwolf  { background:rgba(0,180,120,.1);    color:#00d490; border:1px solid rgba(0,180,120,.4);  text-shadow:0 0 8px rgba(0,180,120,.8); }
.title-rookie    { background:rgba(255,255,255,.05); color:rgba(200,230,255,.45); border:1px solid rgba(255,255,255,.1); }

/* Override old title classes to use new ones */
.title-legend   { background:rgba(10,10,20,.8);     color:#e0e0ff; border:1px solid rgba(150,150,255,.4); text-shadow:0 0 8px rgba(150,150,255,.8); }
.title-champion { background:rgba(255,60,0,.12);    color:#ff6030; border:1px solid rgba(255,60,0,.4);    text-shadow:0 0 8px rgba(255,60,0,.8); }
.title-master   { background:rgba(255,40,80,.1);    color:#ff2855; border:1px solid rgba(255,40,80,.4);   text-shadow:0 0 8px rgba(255,40,80,.8); }
.title-expert   { background:rgba(120,0,200,.12);   color:#c060ff; border:1px solid rgba(120,0,200,.4);  text-shadow:0 0 8px rgba(120,0,200,.8); }
.title-veteran  { background:rgba(0,180,120,.1);    color:#00d490; border:1px solid rgba(0,180,120,.4);  text-shadow:0 0 8px rgba(0,180,120,.8); }
.title-player   { background:rgba(255,255,255,.05); color:rgba(200,230,255,.45); border:1px solid rgba(255,255,255,.1); }

/* Overtime / Sudden Death banner */
.overtime-banner {
  width: 100%; max-width: 780px;
  text-align: center; padding: 8px;
  background: linear-gradient(90deg, rgba(255,40,80,.1), rgba(255,208,96,.1), rgba(255,40,80,.1));
  border: 1px solid rgba(255,40,80,.3);
  border-radius: 12px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 4px;
  color: var(--c-pink);
  animation: blink 1s ease-in-out infinite;
  display: none; flex-shrink: 0;
}
.overtime-banner.show { display: block; }

/* Momentum indicator */
.momentum-bar {
  width: 100%; max-width: 780px; height: 4px;
  border-radius: 2px; overflow: hidden;
  background: rgba(255,255,255,.05);
  flex-shrink: 0;
}
.momentum-fill {
  height: 100%; border-radius: 2px;
  transition: width .5s ease, background .5s ease;
  background: linear-gradient(90deg, var(--c-blue), var(--c-cyan));
}

/* ═══════════════════════════════════════════════════════════
   PATCH — Leaderboard avatar, Frame redesign, Titles
═══════════════════════════════════════════════════════════ */

/* Leaderboard avatar with frame */
.lb-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #1a3a5c, #0d1f35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; color: #fff;
  border: 2px solid rgba(255,255,255,.1);
  flex-shrink: 0; position: relative;
}
/* Apply frame styles to lb-avatar and prof-avatar */

/* Starter */
.lb-avatar.frame-starter { border: 2px solid rgba(255,255,255,.3); }
.prof-avatar.frame-starter-avatar { border: 3px solid rgba(255,255,255,.3) !important; }

/* Bronze */
.lb-avatar.frame-bronze { border: 2px solid #cd7f32; box-shadow: 0 0 12px rgba(205,127,50,.8), inset 0 0 8px rgba(205,127,50,.6); }
.prof-avatar.frame-bronze-avatar { border: 3px solid #cd7f32 !important; box-shadow: 0 0 20px rgba(205,127,50,.8), inset 0 0 12px rgba(205,127,50,.6) !important; }

/* Silver */
.lb-avatar.frame-silver { border: 2px solid #80ffff; box-shadow: 0 0 14px rgba(0,229,255,.8), inset 0 0 10px rgba(0,229,255,.6); animation: icy-pulse 2s infinite; }
.prof-avatar.frame-silver-avatar { border: 3px solid #80ffff !important; box-shadow: 0 0 24px rgba(0,229,255,.8), inset 0 0 16px rgba(0,229,255,.6) !important; animation: icy-pulse 2s infinite !important; }

/* Neon Blue */
.lb-avatar.frame-neon-blue { border: 3px inset var(--c-blue); animation: glow-pulse-b 1.5s infinite; }
.prof-avatar.frame-neon-blue-avatar { border: 4px inset var(--c-blue) !important; animation: glow-pulse-b 1.5s infinite !important; }

/* Neon Purple */
.lb-avatar.frame-neon-purple { border: 3px inset var(--c-purple); animation: glow-pulse-p 1.5s infinite; }
.prof-avatar.frame-neon-purple-avatar { border: 4px inset var(--c-purple) !important; animation: glow-pulse-p 1.5s infinite !important; }

/* Gold */
.lb-avatar.frame-gold { border: 3px outset var(--c-gold); animation: glow-pulse-g 1.2s infinite; }
.prof-avatar.frame-gold-avatar { border: 5px outset var(--c-gold) !important; animation: glow-pulse-g 1.2s infinite !important; }

/* Fire */
.lb-avatar.frame-fire { border: 3px dashed #ff3300; animation: fire-pulse 0.8s infinite; }
.prof-avatar.frame-fire-avatar { border: 5px dashed #ff3300 !important; animation: fire-pulse 0.8s infinite !important; }

/* Rainbow */
.lb-avatar.frame-rainbow { border: 3px solid #fff; animation: rainbow-border 2s linear infinite; }
.prof-avatar.frame-rainbow-avatar { border: 5px solid #fff !important; animation: rainbow-border 2s linear infinite !important; }

/* VIP */
.lb-avatar.frame-vip { border: 3px double var(--c-gold); border-radius: 12px; animation: vip-pulse 1s infinite; }
.prof-avatar.frame-vip-avatar { border: 6px double var(--c-gold) !important; border-radius: 18px !important; animation: vip-pulse 1s infinite !important; }

/* Titan */
.lb-avatar.frame-titan { border: 3px double #e0e5ff; border-radius: 12px; animation: titan-pulse 1.5s infinite; }
.prof-avatar.frame-titan-avatar { border: 8px double #e0e5ff !important; border-radius: 20px !important; animation: titan-pulse 1.5s infinite !important; }

/* Improved title badges — more visible, larger */
.lb-title-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 8px; letter-spacing: 1.5px;
  padding: 3px 8px; border-radius: 6px;
  font-weight: 700; white-space: nowrap;
}
.title-legend   { background:rgba(0,0,0,.6);   color:#e8e0ff; border:1px solid rgba(180,150,255,.6); text-shadow:0 0 12px rgba(180,150,255,1); box-shadow:0 0 8px rgba(180,150,255,.3); }
.title-champion { background:rgba(255,60,0,.15); color:#ff7040; border:1px solid rgba(255,80,0,.6); text-shadow:0 0 12px rgba(255,80,0,1); box-shadow:0 0 8px rgba(255,80,0,.3); }
.title-master   { background:rgba(255,0,60,.12); color:#ff3060; border:1px solid rgba(255,0,60,.6); text-shadow:0 0 12px rgba(255,0,60,1); box-shadow:0 0 8px rgba(255,0,60,.3); }
.title-expert   { background:rgba(140,0,255,.12); color:#c060ff; border:1px solid rgba(140,0,255,.6); text-shadow:0 0 12px rgba(140,0,255,1); box-shadow:0 0 8px rgba(140,0,255,.3); }
.title-veteran  { background:rgba(0,200,120,.1); color:#00e090; border:1px solid rgba(0,200,120,.5); text-shadow:0 0 10px rgba(0,200,120,.8); box-shadow:0 0 6px rgba(0,200,120,.2); }
.title-player   { background:rgba(255,255,255,.05); color:rgba(180,210,255,.45); border:1px solid rgba(255,255,255,.1); }

/* Frame shop redesign — more cyberpunk */
.frame-card {
  border-radius: 16px; padding: 20px 14px 16px;
  background: rgba(5,15,30,.8);
  border: 1px solid rgba(255,255,255,.07);
  text-align: center; cursor: none;
  transition: var(--trans-main); position: relative; overflow: hidden;
  backdrop-filter: blur(10px);
}
.frame-card::before {
  content: attr(data-name);
  display: none;
}
.frame-card:hover {
  transform: translateY(-6px) scale(1.04);
  background: rgba(5,20,40,.9);
}
.frame-card.owned  { border-color: rgba(0,255,136,.25); }
.frame-card.active { border-color: var(--c-gold) !important; box-shadow: 0 0 24px rgba(255,208,96,.2); }