:root{
  --bg:#07050c;
  --bg2:#0d0916;
  --panel:#130d20;
  --panel2:#180f28;
  --purple:#9b3bff;
  --purple2:#c084ff;
  --purple-deep:#5b12b8;
  --purple-glow: rgba(155,59,255,.55);
  --cyan:#26f0e0;
  --magenta:#ff3b3b;
  --gold:#ffd166;
  --silver:#c9d3e0;
  --bronze:#e0975a;
  --line: rgba(155,59,255,.22);
  --text-dim:#a89bc4;
}
*{ -webkit-tap-highlight-color: transparent; box-sizing:border-box; }
::-webkit-scrollbar{ display:none; }
body{
  background:
    radial-gradient(480px 320px at 18% 0%, rgba(155,59,255,.30), transparent 62%),
    radial-gradient(420px 300px at 100% 10%, rgba(38,240,224,.08), transparent 60%),
    radial-gradient(460px 340px at 85% 95%, rgba(255,59,59,.10), transparent 60%),
    radial-gradient(600px 500px at 50% 60%, rgba(91,18,184,.16), transparent 70%),
    var(--bg);
  font-family:'Vazirmatn',system-ui,sans-serif;
  color:#eee6ff;
  margin:0; padding:0;
  min-height:100vh;
  overflow-x:hidden;
}
.num{ font-family:'Oswald',sans-serif; }
.brand-title{ font-family:'Teko',sans-serif; letter-spacing:1px; }
.hexa-title{ font-family:'Orbitron',sans-serif; font-weight:900; font-style:italic; letter-spacing:.5px; }
.glow-text{ text-shadow:0 0 12px var(--purple-glow), 0 0 26px rgba(155,59,255,.3); }

/* sharp-cut edges (Sicily-inspired geometry, PXL palette) */
.edge{ clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.edge-sm{ clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.edge-l{ clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }

.panel{ background:linear-gradient(160deg, var(--panel2) 0%, var(--panel) 100%); border:1px solid var(--line); position:relative; }
.panel-purple{ background:linear-gradient(155deg, rgba(155,59,255,.20) 0%, rgba(19,13,32,.92) 60%); border:1px solid rgba(155,59,255,.45); position:relative; }

.glow-purple{ box-shadow:0 0 20px rgba(155,59,255,.30); }
.glow-purple-lg{ box-shadow:0 0 30px rgba(155,59,255,.4), 0 10px 34px rgba(0,0,0,.55); }

.stripe-title{ position:relative; display:inline-block; }
.stripe-title::before{
  content:''; position:absolute; right:-13px; top:8%; bottom:8%; width:4px;
  background:linear-gradient(var(--purple2), var(--magenta)); transform:skewX(-12deg);
}

/* mission card redesign */
.mission-progress-outer{ width:60px; height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; flex-shrink:0; }
.mission-progress-inner{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg, var(--purple2), var(--gold)); transition:width .3s ease; }
.mission-reward-badge{ display:flex; align-items:center; gap:4px; }
.mission-claim-btn{
  background:linear-gradient(160deg, rgba(255,209,102,.35) 0%, rgba(40,28,10,.92) 60%);
  border:1px solid rgba(255,209,102,.7); color:#FFE9A8; font-weight:800; font-size:10.5px;
  padding:6px 12px; border-radius:7px; text-shadow:0 0 8px rgba(255,209,102,.6);
  box-shadow:0 0 12px rgba(255,209,102,.28); white-space:nowrap; transition:transform .1s ease;
}
.mission-claim-btn:active{ transform:scale(.96); }
.mission-card-done{ border:1px solid rgba(255,209,102,.6) !important; box-shadow:0 0 14px rgba(255,209,102,.15); }
.mission-card-locked{ border:1px dashed rgba(255,255,255,.28) !important; background:linear-gradient(155deg, rgba(155,59,255,.08) 0%, rgba(19,13,32,.92) 60%) !important; }
.mission-start-btn{
  width:100%; margin-top:9px; background:transparent; border:1px solid var(--purple2); color:var(--purple2);
  font-weight:700; font-size:10.5px; padding:7px 0; border-radius:7px; letter-spacing:.3px; transition:transform .1s ease;
}
.mission-start-btn:active{ transform:scale(.97); }

.btn-purple{
  background:linear-gradient(160deg, rgba(122,40,220,.35) 0%, rgba(23,14,38,.96) 55%, rgba(10,6,16,.98) 100%);
  border:1px solid rgba(155,59,255,.6);
  box-shadow:0 0 16px rgba(155,59,255,.28), inset 0 0 16px rgba(155,59,255,.14), inset 0 0 0 1px rgba(255,255,255,.04);
  color:#f3ecff;
  text-shadow:0 0 9px rgba(155,59,255,.65);
  letter-spacing:.4px;
  transition:box-shadow .2s ease, transform .1s ease;
}
.btn-purple:active{ transform:scale(.97); box-shadow:0 0 8px rgba(155,59,255,.2), inset 0 0 10px rgba(155,59,255,.12); }

/* tab bar - sharp box segmented control, Sicily style */
.seg-tabs{ display:flex; background:rgba(255,255,255,.03); border:1px solid var(--line); }
.seg-tab{
  flex:1; padding:10px 6px; text-align:center; font-size:11px; font-weight:700;
  color:var(--text-dim); transition:all .2s ease; position:relative;
}
.seg-tab.active{
  background:linear-gradient(135deg, rgba(155,59,255,.4), rgba(155,59,255,.15));
  color:#fff; box-shadow: inset 0 0 14px rgba(155,59,255,.3);
}
/* solo = gold, squad = purple, for the ticket-mode toggle */
.ticket-mode[data-mode="solo"].active{
  background:linear-gradient(135deg, rgba(255,209,102,.45), rgba(255,209,102,.15));
  color:#fff; text-shadow:0 0 10px rgba(255,209,102,.7); box-shadow: inset 0 0 14px rgba(255,209,102,.4);
}
.ticket-mode[data-mode="solo"].active i{ color:#fff; }
.ticket-mode[data-mode="squad"].active{
  background:linear-gradient(135deg, rgba(155,59,255,.45), rgba(155,59,255,.15));
  color:#fff; box-shadow: inset 0 0 14px rgba(155,59,255,.4);
}

/* league = purple, event = cyan, for the ticket-type toggle */
.ticket-type[data-type="event"] .event-label{ color:var(--text-dim); transition:color .2s ease; }
.ticket-type[data-type="event"].active{
  background:linear-gradient(135deg, rgba(38,240,224,.4), rgba(38,240,224,.15));
  box-shadow: inset 0 0 14px rgba(38,240,224,.4);
}
.ticket-type[data-type="event"].active .event-label{ color:var(--cyan); text-shadow:0 0 10px rgba(38,240,224,.6); }

/* solo = gold, squad = purple, for the activity log solo/squad toggle */
.pf-mode[data-mode="solo"].active{
  background:linear-gradient(135deg, rgba(255,209,102,.45), rgba(255,209,102,.15));
  color:#fff; text-shadow:0 0 10px rgba(255,209,102,.7); box-shadow: inset 0 0 14px rgba(255,209,102,.4);
}
.pf-mode[data-mode="solo"].active i{ color:#fff; }
.pf-mode[data-mode="squad"].active{
  background:linear-gradient(135deg, rgba(155,59,255,.45), rgba(155,59,255,.15));
  color:#fff; box-shadow: inset 0 0 14px rgba(155,59,255,.4);
}

/* mode preview image (solo/squad) under the toggle */
.mode-preview{ position:relative; height:110px; border:1px solid var(--line); }
.mode-preview img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.mode-preview img.active{ opacity:1; }

.tab-pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--text-dim);
  transition:all .2s ease;
}
.tab-pill.active{
  background:linear-gradient(135deg, rgba(155,59,255,.35), rgba(155,59,255,.12));
  color:#fff;
  border-color:var(--purple);
  box-shadow:0 0 16px var(--purple-glow), inset 0 0 10px rgba(155,59,255,.22);
}

.rank-badge{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:13px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.rank-badge.gold{background:linear-gradient(145deg,#ffe29a,#c9911a); color:#3a2400; box-shadow:0 0 12px rgba(255,209,102,.6);}
.rank-badge.silver{background:linear-gradient(145deg,#eef2f7,#9aa7b8); color:#1c2430; box-shadow:0 0 12px rgba(201,211,224,.5);}
.rank-badge.bronze{background:linear-gradient(145deg,#f0b27a,#8a4f21); color:#2c1500; box-shadow:0 0 12px rgba(224,151,90,.5);}
.rank-badge.plain{background:rgba(255,255,255,.06); color:#cfc4ea; border:1px solid var(--line);}
.rank-gold{ background:linear-gradient(135deg, rgba(255,209,102,.14), rgba(255,209,102,.02)); }
.rank-silver{ background:linear-gradient(135deg, rgba(201,211,224,.12), rgba(201,211,224,.02)); }
.rank-bronze{ background:linear-gradient(135deg, rgba(224,151,90,.12), rgba(224,151,90,.02)); }

.pr-badge{
  min-width:42px; padding:3px 9px; text-align:center;
  background:radial-gradient(circle at 30% 20%, rgba(155,59,255,.55), rgba(155,59,255,.12));
  border:1px solid var(--purple); box-shadow:0 0 12px var(--purple-glow);
  font-family:'Oswald',sans-serif; font-weight:700;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.points-cell{ color:#fff; font-weight:700; text-shadow:0 0 8px rgba(155,59,255,.55); }
.top-chip{ font-size:10px; padding:2px 7px; font-family:'Oswald',sans-serif; }
.chip-top5{ background:rgba(38,240,224,.12); color:var(--cyan); border:1px solid rgba(38,240,224,.4); }
.chip-top10{ background:rgba(255,59,59,.10); color:var(--magenta); border:1px solid rgba(255,59,59,.35); }

table.lb thead th{
  font-family:'Oswald',sans-serif; font-weight:500; color:var(--text-dim); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.4px; padding:9px 7px; border-bottom:1px solid var(--line);
  white-space:nowrap; text-align:center;
}
table.lb tbody td{ padding:9px 7px; border-bottom:1px solid rgba(155,59,255,.08); font-size:12.5px; white-space:nowrap; text-align:center;}
table.lb.lb-sm thead th{ font-size:11px; padding:7px 5px; }
table.lb.lb-sm tbody td{ font-size:10.5px; padding:6px 5px; }
table.lb.lb-sm td.lb-sticky, table.lb.lb-sm th.lb-sticky{ min-width:128px; max-width:128px; }
table.lb.lb-sm .rank-badge{ width:22px; height:22px; font-size:10.5px; }

/* fixed rank/name column, rest of the table scrolls horizontally (LTR, left → right) */
table.lb th.lb-sticky, table.lb td.lb-sticky{
  position:sticky; left:0; z-index:6;
  text-align:left; min-width:150px; max-width:150px;
  box-shadow:6px 0 10px -4px rgba(0,0,0,.5);
}
table.lb th.lb-sticky{ background:var(--panel); z-index:8; }
table.lb td.lb-sticky{ background:var(--panel2); }
table.lb tbody tr.rank-gold td.lb-sticky{ background:linear-gradient(135deg, rgba(255,209,102,.22), transparent 70%), var(--panel2); }
table.lb tbody tr.rank-silver td.lb-sticky{ background:linear-gradient(135deg, rgba(201,211,224,.20), transparent 70%), var(--panel2); }
table.lb tbody tr.rank-bronze td.lb-sticky{ background:linear-gradient(135deg, rgba(224,151,90,.20), transparent 70%), var(--panel2); }

/* vertical scroll wrapper with sticky header row (used for the ranks 11-40 table) */
.lb-vscroll{ max-height:420px; overflow-y:auto; }
.lb-vscroll thead th{ position:sticky; top:0; z-index:9; background:var(--panel); box-shadow:0 2px 6px -2px rgba(0,0,0,.5); }
.lb-vscroll thead th.lb-sticky{ z-index:11; }

/* accordion for the points-rule legend panel */
.legend-toggle-bar{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.legend-toggle-bar i.legend-chevron{ transition:transform .25s ease; }
.legend-toggle-bar.open i.legend-chevron{ transform:rotate(180deg); }
#points-legend-content{ overflow:hidden; max-height:0; opacity:0; transition:max-height .3s ease, opacity .25s ease, margin-top .3s ease; }
#points-legend-content.open{ max-height:600px; opacity:1; margin-top:12px; }

.legend-row{ border:1px solid var(--line); }
.legend-row-solo{ border-color:rgba(255,209,102,.4); background:linear-gradient(135deg, rgba(255,209,102,.10), transparent 75%); box-shadow: inset 0 0 18px rgba(255,209,102,.14); }
.legend-row-squad{ border-color:rgba(155,59,255,.4); background:linear-gradient(135deg, rgba(155,59,255,.10), transparent 75%); box-shadow: inset 0 0 18px rgba(155,59,255,.14); }
.pt-chip{ width:64px; height:58px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }

.session-box{ border:1px solid rgba(155,59,255,.4); background:linear-gradient(180deg, rgba(255,255,255,.025), transparent); box-shadow:0 0 12px rgba(155,59,255,.10), inset 0 0 14px rgba(155,59,255,.06); }
.session-box.sold{ opacity:.5; filter:grayscale(.4); }
.led{ width:7px;height:7px;border-radius:50%; display:inline-block; }
.led.red{ background:#ff3b5c; box-shadow:0 0 8px #ff3b5c;}
.led.yellow{ background:#ffcc33; box-shadow:0 0 8px #ffcc33;}

.section{ display:none; }
.section.active{ display:block; animation:fadein .25s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.nav-icon,.nav-label{ transition:all .2s ease; }
.top-navbtn .nav-icon{ color:rgba(255,255,255,.45); }
.top-navbtn .nav-label{ color:rgba(255,255,255,.4); }
.top-navbtn.active .nav-icon{ color:#fff; text-shadow:0 0 10px var(--purple-glow); filter:drop-shadow(0 0 8px var(--purple-glow)); }
.top-navbtn.active .nav-label{ color:var(--purple2); }
.nav-logo{ height:20px; width:auto; object-fit:contain; filter:grayscale(1) opacity(.5); transition:all .2s ease; }
.top-navbtn.active .nav-logo{ filter:drop-shadow(0 0 10px var(--purple-glow)); }
/* bottom bar: selected = label hidden, icon bigger */
.top-navbtn{ min-height:46px; }
.top-navbtn .nav-icon{ transform-origin:center; }
.top-navbtn .nav-label{ display:block; max-height:12px; overflow:hidden; }
.top-navbtn.active .nav-label{ max-height:0; opacity:0; }
.top-navbtn.active .nav-icon{ transform:scale(1.35); margin-bottom:0 !important; }
.nav-logo{ transform-origin:center; }
.top-navbtn.active .nav-logo{ transform:scale(1.22); }
@media (prefers-reduced-motion:reduce){ .top-navbtn .nav-icon,.top-navbtn .nav-label,.nav-logo{ transition:none; } }
/* Activision Id bar stays pinned at the left edge while the table scrolls horizontally */
.lb-idbar{ position:sticky; left:0; width:max-content; max-width:100%; z-index:5; }

.mega-panel{
  position:absolute; top:52px; left:0; min-width:230px;
  background:linear-gradient(180deg, rgba(24,15,40,.72), rgba(19,13,32,.72));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border:1px solid rgba(155,59,255,.35);
  box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 26px rgba(155,59,255,.16);
  padding:8px; display:none; z-index:95;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.mega-panel.open{ display:block; }
.mega-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; color:#e7dcff; font-size:13px; }
.mega-item:active{ background:rgba(155,59,255,.15); }

/* mega menu nav rows - selected = purple, rest = light gray */
.mega-nav-item{
  display:flex; align-items:center; gap:12px; padding:11px 12px;
  color:rgba(226,222,238,.68); font-size:11.5px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; font-family:'Oswald',sans-serif;
  border-right:3px solid transparent; transition:all .18s ease;
}
.mega-nav-item i{ width:16px; text-align:center; color:rgba(226,222,238,.55); font-size:14px; transition:all .18s ease; }
.mega-nav-item.active{ color:#fff; background:linear-gradient(90deg, rgba(155,59,255,.22), transparent); border-right-color:var(--purple); }
.mega-nav-item.active i{ color:var(--purple2); text-shadow:0 0 8px var(--purple-glow); }
.mega-nav-item:active{ background:rgba(155,59,255,.12); }

.hero-glow{ background: radial-gradient(340px 200px at 50% 0%, rgba(155,59,255,.32), transparent 72%); }
.dot-cyan{ color:var(--cyan); }
.dot-magenta{ color:var(--magenta); }
.corner-tick{ position:absolute; width:14px; height:14px; border-color:var(--purple2); opacity:.7; }
.corner-tl{ top:8px; left:8px; border-top:2px solid; border-left:2px solid; }
.corner-br{ bottom:8px; right:8px; border-bottom:2px solid; border-right:2px solid; }

/* logout row in header menu */
.mega-nav-item.mega-logout, .mega-nav-item.mega-logout i{ color:#ff3b3b; }
.mega-nav-item.mega-logout:active{ background:rgba(255,59,59,.14); }

/* ===== ACCOUNT / USER INFO PAGE ===== */
.acc-label{ font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; display:flex; align-items:center; justify-content:space-between; }
.acc-field{ display:flex; align-items:center; gap:10px; padding:0 12px; height:46px; background:linear-gradient(160deg, var(--panel2), var(--panel)); border:1px solid var(--line); transition:border-color .2s ease, box-shadow .2s ease; }
.acc-field i{ color:var(--purple2); font-size:13px; width:16px; text-align:center; flex-shrink:0; }
.acc-field input{ flex:1; min-width:0; background:transparent; outline:none; border:0; color:#fff; font-size:14px; font-family:'Oswald','Vazirmatn',sans-serif; letter-spacing:.4px; }
.acc-field input::placeholder{ color:rgba(255,255,255,.22); }
.acc-field:focus-within{ border-color:var(--purple); box-shadow:0 0 14px var(--purple-glow), inset 0 0 12px rgba(155,59,255,.14); }
.acc-field.locked{ opacity:.62; background:rgba(255,255,255,.03); border-style:dashed; }
.acc-field.locked input{ color:rgba(255,255,255,.7); cursor:not-allowed; }
.acc-field.locked i{ color:var(--text-dim); }
.acc-field.gold{ border:1px solid var(--gold); background:linear-gradient(160deg, rgba(255,209,102,.16), rgba(40,28,10,.55) 70%); box-shadow:0 0 14px rgba(255,209,102,.22), inset 0 0 14px rgba(255,209,102,.08); }
.acc-field.gold i{ color:var(--gold); }
.acc-field.gold:focus-within{ box-shadow:0 0 20px rgba(255,209,102,.42), inset 0 0 14px rgba(255,209,102,.14); }
.acc-field.gold input{ color:#FFE9A8; font-weight:600; }
.acc-field.err{ border-color:var(--magenta) !important; box-shadow:0 0 14px rgba(255,59,59,.4) !important; }
.acc-lock-chip{ font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:1px; padding:1px 6px; color:var(--text-dim); border:1px solid var(--line); }
.acc-avatar-wrap{ position:relative; width:104px; height:104px; }
.acc-avatar{ width:100%; height:100%; overflow:hidden; border:2px solid var(--purple); box-shadow:0 0 22px var(--purple-glow); background:var(--panel2); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:30px; letter-spacing:1px; }
.acc-cam{ position:absolute; right:-6px; bottom:-6px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg, rgba(122,40,220,.9), rgba(40,14,80,.98)); border:1px solid var(--purple2); box-shadow:0 0 14px var(--purple-glow); color:#fff; font-size:13px; }
.acc-gender .seg-tab{ display:flex; align-items:center; justify-content:center; gap:7px; height:44px; padding:0; font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:1.4px; }