:root{
  --bg-void:#05050a;
  --bg-steel:#0b111b;
  --bg-panel:rgba(14,20,31,0.72);
  --bg-panel-strong:rgba(12,17,26,0.86);
  --cyan:#00f3ff;
  --magenta:#ff0055;
  --yellow:#f0ff3b;
  --text:#dce8f3;
  --text-dim:#7e93a8;
  --line:rgba(58,84,106,0.62);
  --line-hot:rgba(0,243,255,0.28);
  --blur:15px;
  --radius:10px;
  --power:cubic-bezier(0.19,1,0.22,1);
  --shadow-base:0 0 0 1px rgba(80,109,135,0.26),0 8px 20px rgba(0,0,0,0.42);
  --shadow-hover:0 0 0 1px rgba(0,243,255,0.28),0 12px 28px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    linear-gradient(165deg,rgba(255,0,85,0.02),transparent 36%),
    linear-gradient(18deg,rgba(0,243,255,0.025),transparent 44%),
    linear-gradient(0deg,rgba(255,255,255,0.01),rgba(255,255,255,0.01)),
    var(--bg-void);
  color:var(--text);
  font-family:'Rajdhani',sans-serif;
  font-size:16px;
  min-height:100vh;
  overflow-x:hidden;
  letter-spacing:.02em;
}

body.crt-on::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.42;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,rgba(0,0,0,.32) 2px 4px),
    repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.36) 3px 4px);
}

body.crt-on::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.2;
  background-image:
    linear-gradient(rgba(0,243,255,.17) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,243,255,.17) 1px,transparent 1px);
  background-size:56px 56px;
  animation:gridMove 16s linear infinite;
}

@keyframes gridMove{from{background-position:0 0}to{background-position:56px 56px}}
@keyframes bootGlitch{
  0%{opacity:0;transform:translateY(8px) scale(.985)}
  18%{opacity:.2}
  24%{opacity:.86}
  30%{opacity:.45}
  40%,100%{opacity:1;transform:none}
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes sweep{
  0%{transform:translateX(-65%)}
  50%{transform:translateX(40%)}
  100%{transform:translateX(105%)}
}
@keyframes shimmer{
  0%{transform:translateX(-140%)}
  100%{transform:translateX(160%)}
}
@keyframes crtFlicker{
  0%,100%{opacity:.32}
  7%{opacity:.24}
  13%{opacity:.38}
  21%{opacity:.26}
  31%{opacity:.42}
  45%{opacity:.23}
  63%{opacity:.4}
  78%{opacity:.25}
  89%{opacity:.36}
}
@keyframes crtDrift{
  0%{transform:translateX(0)}
  20%{transform:translateX(.5px)}
  52%{transform:translateX(-.45px)}
  77%{transform:translateX(.35px)}
  100%{transform:translateX(0)}
}

.app{position:relative;z-index:1;filter:contrast(1.08) saturate(1.14)}
body.crt-on .app::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.3;
  background:
    repeating-linear-gradient(90deg,rgba(255,0,85,.12) 0 1px,rgba(0,243,255,.1) 1px 2px,rgba(255,255,255,.02) 2px 3px,transparent 3px 5px),
    radial-gradient(circle at 50% 50%,transparent 52%,rgba(0,0,0,.48) 100%);
  mix-blend-mode:screen;
  animation:crtFlicker .12s steps(2,end) infinite,crtDrift 2.8s steps(3,end) infinite;
}
body.crt-on .app::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity:.14;
  background:
    radial-gradient(rgba(255,255,255,.45) .3px,transparent .3px),
    radial-gradient(circle at center,transparent 50%,rgba(0,0,0,.44) 100%);
  background-size:3px 3px,100% 100%;
}
.screen{display:none;animation:bootGlitch .45s var(--power) both}
.screen.active{display:block}

.hdr{
  position:relative;
  overflow:hidden;
  padding:1.35rem clamp(11rem,36vw,15rem) 1.05rem 1.5rem;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(24,35,50,.55),rgba(11,16,25,.75)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 40px);
  backdrop-filter:blur(calc(var(--blur) - 1px));
}
.hdr::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 28%);
}
.hdr::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:18%;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.08) 52%,transparent 76%);
  opacity:.28;
  pointer-events:none;
}
.hdr-line{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan) 40%,var(--magenta) 62%,transparent);
  opacity:.85;
  animation:sweep 3.6s var(--power) infinite;
}
.logo{
  font-family:'Orbitron',monospace;
  text-transform:uppercase;
  font-size:22px;
  font-weight:900;
  letter-spacing:4px;
  color:var(--yellow);
  text-shadow:0 0 4px rgba(240,255,59,.22);
}
.logo span{color:var(--magenta);text-shadow:none}
.logo-sub{
  margin-top:3px;
  font-family:'Orbitron',monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:3px;
  color:var(--text-dim);
}

.hdr-tools{
  position:absolute;
  top:12px;
  right:14px;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.hdr-btn{
  height:28px;
  padding:0 .75rem;
  border-radius:7px;
  border:1px solid rgba(0,243,255,.4);
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 35%),rgba(8,20,31,.86);
  color:var(--cyan);
  font-family:'Orbitron',monospace;
  font-size:9px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .35s var(--power);
}
.hdr-btn:hover{
  border-color:rgba(240,255,59,.5);
  color:var(--yellow);
}
.hdr-btn.off{
  color:#90a4b6;
  border-color:rgba(126,147,168,.45);
  background:rgba(10,16,24,.88);
}

.nav{
  display:flex;
  gap:0;
  flex-wrap:wrap;
  background:
    linear-gradient(180deg,rgba(19,29,44,.68),rgba(8,13,21,.78)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 34px);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(var(--blur));
}
.nav-btn{
  position:relative;
  padding:.78rem 1.15rem;
  font-family:'Orbitron',monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--text-dim);
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all .35s var(--power);
  white-space:nowrap;
}
.nav-btn.active{
  color:var(--yellow);
  border-bottom-color:var(--yellow);
  text-shadow:none;
}
.nav-btn:hover:not(.active){
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}
.nav-btn.disabled{opacity:.34;cursor:not-allowed}

.content{
  width:min(100%,980px);
  margin:0 auto;
  padding:1.7rem clamp(1rem,2.8vw,2rem);
}

.stitle{
  margin-bottom:1.05rem;
  display:flex;
  align-items:center;
  gap:.72rem;
  font-family:'Orbitron',monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:3px;
  color:var(--cyan);
  text-shadow:none;
}
.stitle::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--line-hot),transparent);
}

.card,.modal,.stat-box,.teammate-bar,.notif,.mode-card,.sub-card,.transfer-card,.bet-opp-card,.char-card{
  background:
    linear-gradient(180deg,rgba(27,40,56,.22),transparent 28%),
    var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--blur));
  box-shadow:var(--shadow-base);
  transition:transform .35s var(--power),box-shadow .35s var(--power),border-color .35s var(--power),background-color .35s var(--power);
}
.card{padding:1.25rem}
.card-accent{border-color:rgba(240,255,59,.45);box-shadow:var(--shadow-base),0 0 12px rgba(240,255,59,.12)}
.card:hover,.mode-card:hover,.sub-card:hover,.transfer-card:hover,.bet-opp-card:hover,.char-card:hover{
  transform:translateY(-2px) scale(1.008);
  border-color:var(--line-hot);
  box-shadow:var(--shadow-hover);
}

.btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.6rem 1.35rem;
  border:none;
  border-radius:9px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 36%),
    linear-gradient(90deg,rgba(0,243,255,.12),rgba(255,0,85,.13));
  color:var(--text);
  font-family:'Orbitron',monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:2px;
  cursor:pointer;
  overflow:hidden;
  transition:all .35s var(--power);
}
.btn::before,.btn::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.btn::before{
  border:1px solid transparent;
  border-image:linear-gradient(120deg,var(--cyan),var(--magenta),var(--yellow)) 1;
  opacity:.58;
  transform:scale(.97);
  transition:transform .35s var(--power),opacity .35s var(--power);
}
.btn::after{
  width:28%;
  background:linear-gradient(100deg,transparent 8%,rgba(255,255,255,.17) 48%,transparent 92%);
  transform:translateX(-170%);
}
.btn:hover::before{transform:scale(1);opacity:.94}
.btn:hover::after{animation:shimmer .95s var(--power)}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(0,243,255,.26),0 6px 14px rgba(0,0,0,.45);
}
.btn-primary{
  color:#101700;
  font-weight:700;
  background:
    linear-gradient(180deg,rgba(255,255,255,.23),transparent 36%),
    linear-gradient(90deg,var(--yellow),#dbef33);
}
.btn-secondary{background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 30%),rgba(0,243,255,.11);color:var(--cyan)}
.btn-danger{background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%),rgba(255,0,85,.16);color:#ff8aac}
.btn-sm{padding:.4rem .9rem;font-size:9px}
.btn:disabled{opacity:.36;cursor:not-allowed;transform:none!important;box-shadow:none}

.faction-gr{color:#00ff88}.faction-gr-bg{background:rgba(0,255,136,.1);border-color:rgba(0,255,136,.42)}
.faction-sfr{color:#ff3c9e}.faction-sfr-bg{background:rgba(255,60,158,.1);border-color:rgba(255,60,158,.42)}
.faction-js{color:#ff9800}.faction-js-bg{background:rgba(255,152,0,.1);border-color:rgba(255,152,0,.42)}
.faction-kk{color:#30b8ff}.faction-kk-bg{background:rgba(48,184,255,.1);border-color:rgba(48,184,255,.42)}
.faction-ac{color:#e0c070}.faction-ac-bg{background:rgba(224,192,112,.1);border-color:rgba(224,192,112,.42)}
.faction-un{color:#cc88ff}.faction-un-bg{background:rgba(204,136,255,.1);border-color:rgba(204,136,255,.42)}

.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-family:'Orbitron',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
}
.badge-leader{background:var(--yellow);color:#121800}
.badge-member{background:rgba(126,147,168,.22);color:#a7bacb}
.badge-unlock{background:rgba(204,136,255,.2);color:#dbb7ff}

.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.char-card{
  position:relative;
  overflow:hidden;
  padding:1rem .9rem;
  cursor:pointer;
}
.char-card::before{
  content:'';
  position:absolute;
  inset:0;
  opacity:0;
  background:linear-gradient(130deg,rgba(0,243,255,.08),transparent 56%);
  transition:opacity .35s var(--power);
}
.char-card:hover::before{opacity:1}
.char-card.selected{border-color:rgba(240,255,59,.5)!important;box-shadow:var(--shadow-base),0 0 14px rgba(240,255,59,.14)}
.char-avatar{
  width:66px;
  height:66px;
  margin:0 auto .75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:50%;
  border:2px solid rgba(0,243,255,.24);
  background:rgba(8,20,31,.95);
  font-family:'Orbitron',monospace;
  font-size:16px;
  font-weight:900;
}
.char-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.char-name{font-size:13px;font-weight:700;text-align:center;margin-bottom:4px;line-height:1.2}
.char-faction{font-size:10px;letter-spacing:1px;text-align:center;margin-bottom:.5rem;font-family:'Orbitron',monospace}
.char-role{text-align:center}
.char-locked{opacity:.4;cursor:not-allowed}
.char-locked::after{
  content:'LOCKED';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:2px;
  color:#7e90a0;
  background:rgba(5,5,10,.74);
}

.league-table{width:100%;border-collapse:collapse;font-size:14px}
.league-table th{
  padding:.5rem .75rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-family:'Orbitron',monospace;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--text-dim);
}
.league-table td{padding:.62rem .75rem;border-bottom:1px solid rgba(58,84,106,.42);vertical-align:middle}
.league-table tr.you-row td{background:rgba(240,255,59,.08);color:var(--yellow)}
.league-table tr:hover td{background:rgba(0,243,255,.05)}
.pos-num{width:30px;font-family:'Orbitron',monospace;font-size:13px;font-weight:700;color:var(--text-dim)}
.pos-num.p1{color:var(--yellow)}.pos-num.p2{color:#d7e1eb}.pos-num.p3{color:#f3ac73}
.pts-cell{text-align:right;font-family:'Orbitron',monospace;font-size:13px;font-weight:700;color:var(--yellow)}

.race-row{display:flex;align-items:center;gap:10px;padding:.62rem .92rem;border-bottom:1px solid rgba(58,84,106,.48)}
.race-num{min-width:60px;font-family:'Orbitron',monospace;font-size:10px;letter-spacing:1px;color:var(--text-dim)}
.race-name{flex:1;font-size:14px;font-weight:600}
.race-status-done{color:#00ff88;font-family:'Orbitron',monospace;font-size:9px;letter-spacing:1px}
.race-status-next{color:var(--yellow);font-family:'Orbitron',monospace;font-size:9px;letter-spacing:1px;animation:blink .95s ease infinite}

.inp{
  width:100%;
  padding:.48rem .76rem;
  border-radius:8px;
  border:1px solid rgba(66,101,128,.8);
  background:rgba(8,18,29,.8);
  color:var(--text);
  font-family:'Rajdhani',sans-serif;
  font-size:14px;
  transition:border-color .35s var(--power),box-shadow .35s var(--power),background-color .35s var(--power);
}
.inp:focus{
  outline:none;
  border-color:var(--cyan);
  background:rgba(8,21,33,.95);
  box-shadow:0 0 0 2px rgba(0,243,255,.16);
}
.inp-sm{width:70px;text-align:center}

.modal-wrap{
  display:none;
  min-height:300px;
  align-items:center;
  justify-content:center;
  padding:2rem;
  margin:1rem 0;
  border-radius:var(--radius);
  background:rgba(5,5,10,.74);
}
.modal-wrap.open{display:flex;animation:bootGlitch .44s var(--power) both}
.modal{
  width:100%;
  max-width:500px;
  padding:2rem;
  border-color:rgba(240,255,59,.4);
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%),
    var(--bg-panel-strong);
}
.modal-title{
  margin-bottom:1.5rem;
  font-family:'Orbitron',monospace;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--yellow);
  text-shadow:0 0 8px rgba(240,255,59,.28);
}

.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:1.5rem}
.stat-box{padding:.92rem .75rem;text-align:center}
.stat-val{font-family:'Orbitron',monospace;font-size:20px;font-weight:900;color:var(--cyan);text-shadow:none}
.stat-lbl{margin-top:3px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim)}

.teammate-bar{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;margin-bottom:1rem;border-left:3px solid var(--yellow)}

.podium-wrap{display:flex;align-items:flex-end;justify-content:center;gap:0;margin:1.5rem 0}
.podium-col{text-align:center;width:100px}
.podium-col .podium-name{font-size:12px;font-weight:700;margin-bottom:.4rem}
.podium-col .podium-pts{font-family:'Orbitron',monospace;font-size:11px;color:var(--text-dim);margin-bottom:.4rem}
.podium-block{border-radius:4px 4px 0 0}
.podium-1 .podium-block{height:80px;background:var(--yellow)}
.podium-2 .podium-block{height:56px;background:#a9b4c1}
.podium-3 .podium-block{height:40px;background:#f59d5c}
.podium-1 .podium-name{color:var(--yellow)}

.transfer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:.75rem;max-height:280px;overflow-y:auto}
.transfer-card{padding:.75rem;cursor:pointer;text-align:center}
.transfer-card.selected{border-color:rgba(240,255,59,.5);background:rgba(240,255,59,.08)}

::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:rgba(7,10,16,.95)}
::-webkit-scrollbar-thumb{background:linear-gradient(#425d76,var(--cyan));border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--yellow),var(--cyan))}

.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:1.5rem}
.mode-card{padding:1.25rem 1rem;cursor:pointer;text-align:center}
.mode-card.selected{border-color:rgba(240,255,59,.5);background:rgba(240,255,59,.08)}
.mode-icon{font-size:28px;margin-bottom:.5rem}
.mode-name{
  margin-bottom:.4rem;
  font-family:'Orbitron',monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--yellow);
  text-shadow:none;
}
.mode-desc{font-size:12px;color:var(--text-dim);line-height:1.4}

.sub-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.5rem}
.sub-card{padding:1rem;cursor:pointer;text-align:center}
.sub-card.selected{border-color:rgba(240,255,59,.5);background:rgba(240,255,59,.08)}
.sub-name{margin-bottom:.3rem;font-family:'Orbitron',monospace;font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--yellow)}
.sub-desc{font-size:12px;color:var(--text-dim)}

.notif{
  display:none;
  margin-bottom:1rem;
  padding:.75rem 1rem;
  font-size:13px;
  color:#8efdc3;
  background:rgba(0,255,136,.1);
  border:1px solid rgba(0,255,136,.42);
}
.notif.warn{color:#ffca6f;background:rgba(255,152,0,.12);border-color:rgba(255,152,0,.4)}
.notif.error{color:#ff84a8;background:rgba(255,0,85,.12);border-color:rgba(255,0,85,.4)}
.notif.show{display:block;animation:bootGlitch .3s var(--power)}

.room-tab{
  padding:.55rem 1.1rem;
  border-bottom:2px solid transparent;
  font-family:'Orbitron',monospace;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--text-dim);
  cursor:pointer;
  transition:all .35s var(--power);
}
.room-tab.active{color:var(--yellow);border-bottom-color:var(--yellow)}
.room-tab:hover:not(.active){color:var(--cyan)}

.template-strip{display:flex;gap:8px;overflow-x:auto;padding:6px 0 8px;scrollbar-width:thin}
.template-thumb{
  position:relative;
  flex-shrink:0;
  width:72px;
  height:48px;
  overflow:hidden;
  border-radius:5px;
  border:2px solid rgba(66,101,128,.72);
  cursor:pointer;
  transition:all .35s var(--power);
}
.template-thumb:hover{border-color:var(--line-hot);transform:translateY(-1px)}
.template-thumb.active{border-color:var(--yellow);box-shadow:0 6px 12px rgba(0,0,0,.38)}
.template-thumb canvas{width:100%;height:100%;display:block}
.template-label{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:2px 0;
  background:rgba(5,5,10,.82);
  font-family:'Orbitron',monospace;
  font-size:7px;
  letter-spacing:1px;
  color:var(--text);
  text-align:center;
}

.bet-opp-card{display:flex;align-items:center;gap:12px;padding:.75rem 1rem;cursor:pointer;margin-bottom:6px}
.bet-opp-card.selected{border-color:rgba(240,255,59,.5);background:rgba(240,255,59,.08)}
.bet-opp-card.disabled-card{opacity:.35;cursor:not-allowed;pointer-events:none}
.bet-risk-bar{width:70px;height:6px;border-radius:3px;background:rgba(66,101,128,.45);overflow:hidden;flex-shrink:0}
.bet-risk-fill{height:100%;border-radius:3px;transition:width .3s var(--power)}

/* ── RANK BADGES — emblem style ── */
.rank-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px 4px 8px;
  border-radius:6px;
  font-family:'Orbitron',monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:700;
  position:relative;
  overflow:hidden;
  vertical-align:middle;
}
.rank-badge::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 45%);
  pointer-events:none;
}
.rank-badge svg{flex-shrink:0}
.rank-badge-sm{font-size:8px;padding:2px 8px 2px 6px;letter-spacing:1.5px}

/* Rookie — steel grey, matte */
.rank-rookie{
  background:linear-gradient(135deg,rgba(80,100,118,.22),rgba(50,70,88,.18));
  color:#a8c0d0;
  border:1px solid rgba(126,147,168,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
/* Racer — neon green pulse */
.rank-racer{
  background:linear-gradient(135deg,rgba(0,255,136,.13),rgba(0,200,100,.08));
  color:#50f7ab;
  border:1px solid rgba(0,255,136,.45);
  box-shadow:0 0 8px rgba(0,255,136,.15),inset 0 1px 0 rgba(255,255,255,.06);
}
/* Drift King — amber fire */
.rank-driftking{
  background:linear-gradient(135deg,rgba(255,160,30,.15),rgba(200,100,0,.1));
  color:#ffbe6f;
  border:1px solid rgba(255,152,0,.45);
  box-shadow:0 0 10px rgba(255,140,0,.18),inset 0 1px 0 rgba(255,200,60,.1);
}
/* Street Legend — electric cyan */
.rank-streetlegend{
  background:linear-gradient(135deg,rgba(0,243,255,.12),rgba(0,180,210,.08));
  color:#88f2ff;
  border:1px solid rgba(0,243,255,.45);
  box-shadow:0 0 10px rgba(0,243,255,.18),inset 0 1px 0 rgba(255,255,255,.07);
}
/* Apex — violet plasma */
.rank-apex{
  background:linear-gradient(135deg,rgba(180,90,255,.15),rgba(120,50,200,.1));
  color:#ddb2ff;
  border:1px solid rgba(180,100,255,.48);
  box-shadow:0 0 12px rgba(180,100,255,.22),inset 0 1px 0 rgba(255,255,255,.08);
}
/* Screamer — gold animated glow */
.rank-screamer{
  background:linear-gradient(135deg,rgba(240,255,59,.16),rgba(200,220,0,.1));
  color:#f0ff3b;
  border:1px solid rgba(240,255,59,.55);
  box-shadow:0 0 14px rgba(240,255,59,.28),0 0 4px rgba(240,255,59,.15),inset 0 1px 0 rgba(255,255,240,.12);
  animation:screamerPulse 2.4s ease-in-out infinite;
}
@keyframes screamerPulse{
  0%,100%{box-shadow:0 0 14px rgba(240,255,59,.28),0 0 4px rgba(240,255,59,.15),inset 0 1px 0 rgba(255,255,240,.12)}
  50%{box-shadow:0 0 22px rgba(240,255,59,.48),0 0 8px rgba(240,255,59,.25),inset 0 1px 0 rgba(255,255,240,.12)}
}

.bet-hist-row{display:flex;align-items:center;gap:10px;padding:.55rem .75rem;border-bottom:1px solid rgba(58,84,106,.48);font-size:13px}
.bet-hist-row:last-child{border-bottom:none}
.bet-result-win{color:#00ff88;font-family:'Orbitron',monospace;font-size:10px;letter-spacing:1px}
.bet-result-loss{color:#ff608f;font-family:'Orbitron',monospace;font-size:10px;letter-spacing:1px}
.bet-result-pending{color:var(--yellow);font-family:'Orbitron',monospace;font-size:10px;letter-spacing:1px;animation:blink .95s ease infinite}
.driver-result-row{
  display:grid;
  grid-template-columns:34px 34px 1fr 80px;
  align-items:center;
  gap:8px;
  padding:.45rem 0;
  border-bottom:1px solid rgba(58,84,106,.48);
}
.driver-avatar{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.driver-result-row.you{background:rgba(240,255,59,.08);padding:.45rem 6px;border-radius:4px}


/* ══════════════════════════════════════════════
   HOME SCREEN
══════════════════════════════════════════════ */
.home-hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 1.5rem 4rem;
  overflow:hidden;
  min-height:45vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,243,255,.07),transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 80%,rgba(255,0,85,.05),transparent 60%);
}
.home-hero::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 48px);
  animation:gridMove 20s linear infinite;
}
.home-logo-wrap{
  position:relative;
  z-index:1;
  margin-bottom:2.5rem;
}
.home-logo{
  font-family:'Orbitron',monospace;
  font-size:clamp(38px,10vw,80px);
  font-weight:900;
  letter-spacing:8px;
  color:var(--yellow);
  text-shadow:0 0 30px rgba(240,255,59,.25),0 0 60px rgba(240,255,59,.1);
  line-height:1;
  margin-bottom:.35rem;
}
.home-logo span{
  color:var(--magenta);
  text-shadow:0 0 20px rgba(255,0,85,.35);
}
.home-logo-sub{
  font-family:'Orbitron',monospace;
  font-size:clamp(9px,2.2vw,13px);
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:.2rem;
}
.home-logo-sub2{
  font-family:'Orbitron',monospace;
  font-size:clamp(8px,1.8vw,10px);
  letter-spacing:3px;
  text-transform:uppercase;
  color:#3a4a5a;
}
.home-btns{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.home-cta{
  padding:.82rem 2.8rem;
  font-size:13px;
  letter-spacing:2px;
  min-width:220px;
}
.home-cta-sec{
  padding:.65rem 2rem;
  font-size:11px;
  letter-spacing:1.5px;
  min-width:220px;
}

/* Tutorial grid */
.home-tutorial{
  border-top:1px solid var(--line);
  padding-top:2rem;
  padding-bottom:3rem;
}
.tut-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}
.tut-card{
  padding:1.25rem 1.35rem;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--bg-panel);
  transition:border-color .3s var(--power);
}
.tut-card:hover{border-color:rgba(0,243,255,.25)}
.tut-num{
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:3px;
  color:var(--cyan);
  opacity:.55;
  margin-bottom:.45rem;
}
.tut-title{
  font-family:'Orbitron',monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--yellow);
  margin-bottom:.65rem;
}
.tut-body{
  font-size:13px;
  color:var(--text-dim);
  line-height:1.6;
}
.tut-body strong{color:var(--text)}

/* ══════════════════════════════════════════════
   SAVES SCREEN
══════════════════════════════════════════════ */
.save-card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--bg-panel);
  margin-bottom:10px;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  transition:border-color .3s var(--power),background .3s var(--power);
}
.save-card:hover{border-color:rgba(0,243,255,.25)}
.save-card-active{
  border-color:rgba(240,255,59,.35);
  background:rgba(240,255,59,.04);
}
.save-card-active:hover{border-color:rgba(240,255,59,.55)}
.save-card-body{
  flex:1;
  padding:1.1rem 1.25rem;
  min-width:0;
}
.save-card-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  padding:.75rem .9rem;
  border-left:1px solid var(--line);
  background:rgba(5,5,10,.3);
  justify-content:center;
  min-width:90px;
}
.save-delete-btn{
  background:transparent;
  border:1px solid rgba(255,0,85,.3);
  color:#ff608f;
  padding:.35rem .6rem;
  font-size:13px;
  cursor:pointer;
  border-radius:6px;
  transition:all .25s var(--power);
  font-family:'Rajdhani',sans-serif;
  text-align:center;
}
.save-delete-btn:hover{
  background:rgba(255,0,85,.12);
  border-color:rgba(255,0,85,.55);
}

@media (max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .content{padding:1.2rem .9rem 1.6rem}
  .sub-mode-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .nav-btn{padding:.66rem .86rem;font-size:9px}
  .home-hero{padding:3.5rem 1rem 2.5rem;min-height:38vh}
  .tut-grid{grid-template-columns:1fr}
  .save-card{flex-direction:column}
  .save-card-actions{flex-direction:row;border-left:none;border-top:1px solid var(--line);padding:.65rem .9rem}
  .home-btns{width:100%}
  .home-cta,.home-cta-sec{min-width:0;width:100%}
}
/* ── TROPHY TOAST ANIMATIONS ── */
@keyframes trophyPop{
  0%{opacity:0;transform:translateY(18px) scale(.88)}
  60%{transform:translateY(-4px) scale(1.03)}
  100%{opacity:1;transform:none}
}
@keyframes trophyFadeOut{
  to{opacity:0;transform:translateY(10px) scale(.95)}
}

/* ── ACHIEVEMENTS GRID ── */
.achievement-card-unlocked:hover{
  transform:translateY(-2px);
  border-color:currentColor !important;
}