/* progression.css — menu, account, XP pass, and the hex kill-feed/banner.

   Design direction: field-ops console, not a generic dark dashboard. The
   in-game kill feed already set the visual DNA (angular chevron cuts,
   amber signal accent) — this extends that language with real depth and
   a deliberate color system instead of "everything is a thin amber box":

     --ink     base background, warm near-black
     --panel   module surface fill
     --line    structural edges (quiet, not bright)
     --signal  amber — active state / primary action / current progress
     --steel   cool gray — secondary/structural text, data labels
     --ok      green — unlocked / team A / success
     --danger  red — locked / denied

   Typography: a plain system sans carries headings and body text; a
   tabular/monospace face is reserved for actual numbers (stats, levels,
   XP) so it reads as telemetry, not decoration applied to every label.
   Loaded alongside the existing css/style.css — additive, not a replace. */

:root{
  --ink:#0a0908; --panel:#16130e; --panel2:#1c1810; --line:#2e2819;
  --signal:#e8a93a; --signal-dim:#8a6a2c; --steel:#8b929a; --steel-dim:#565b61;
  --ok:#4fae6e; --danger:#c2514a;
  --text:#e4ded0; --text-dim:#9a9488;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
}

/* ══ hex kill banner (kill feed rows + round-start banner) ══ */
.hexkf{
  display:flex; align-items:stretch; height:32px; margin-bottom:6px;
  font:600 13px/1 var(--sans); letter-spacing:.01em;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.hexkf .seg{ display:flex; align-items:center; padding:0 16px; white-space:nowrap; position:relative; }
.hexkf .killer{
  background:linear-gradient(90deg, rgba(8,10,8,.94), rgba(79,174,110,.14));
  color:var(--ok); border:1px solid rgba(79,174,110,.55); border-right:none;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  padding-right:24px;
}
.hexkf .killer.enemy{
  color:var(--signal); background:linear-gradient(90deg, rgba(10,9,8,.94), rgba(232,169,58,.14));
  border-color:rgba(232,169,58,.55);
}
.hexkf .mid{
  background:var(--ink); color:var(--text); width:32px; min-width:32px;
  clip-path:polygon(18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%, 0 50%);
  margin:0 -10px; z-index:2; justify-content:center; font-size:14px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.hexkf .victim{
  background:linear-gradient(90deg, rgba(232,169,58,.14), rgba(10,9,8,.94));
  color:var(--signal); border:1px solid rgba(232,169,58,.55); border-left:none;
  clip-path:polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  padding-left:24px;
}
.hexkf .victim.friendly{
  color:var(--ok); background:linear-gradient(90deg, rgba(79,174,110,.14), rgba(8,10,8,.94));
  border-color:rgba(79,174,110,.55);
}
.hexkf .wtag{ font:500 10px var(--mono); color:var(--text-dim); margin-left:8px; }
/* ── round / elimination banner ──
   Restyled to match the menu instead of being raw 34px white text: the
   title sits in a chevron-cut plate on the menu's panel colours, the
   subtitle is a mono caption under it, and the whole thing is a centred
   column. `text-indent` cancels the trailing letter-space so the text is
   optically centred rather than sitting a few pixels left. */
#banner.hexbanner{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  top:14%; letter-spacing:normal;
}
#banner.hexbanner b{
  display:block; padding:13px 46px;
  font:700 28px/1 var(--sans); letter-spacing:.26em; text-indent:.26em;
  color:var(--text);
  background:linear-gradient(90deg, rgba(10,9,8,0), rgba(10,9,8,.90) 16%,
                                     rgba(10,9,8,.90) 84%, rgba(10,9,8,0));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 50%,
                    calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
#banner.hexbanner small{
  display:block; margin:0;
  font:600 11px/1 var(--mono); letter-spacing:.3em; text-indent:.3em;
  color:var(--text-dim); text-transform:uppercase;
}
#banner.hexbanner.good b{ color:var(--ok); border-color:rgba(79,174,110,.5); }
#banner.hexbanner.bad  b{ color:var(--signal); border-color:rgba(232,169,58,.5); }

/* ══ Account panel (left) ══
   Who you are first — avatar, name, level and pass tier — with the
   account switch right under it (it used to float alone in the top-right
   corner). Badges are the panel's main content; raw stats are folded
   into a collapsible section underneath instead of being the headline. */
.profile{ display:flex; gap:14px; align-items:center; }
.avatar{
  flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:center;
  font:700 24px var(--sans); color:#14110c; letter-spacing:0;
  clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);
}
.avwrap{ position:relative; flex:0 0 56px; width:56px; height:56px; }
.avwrap .avatar{ width:56px; height:56px; }
.avatar.art{ background:#0d0b08; }
.avatar svg{ width:100%; height:100%; display:block; }
/* rank stud on the avatar's corner */
.avrank{ position:absolute; right:-9px; bottom:-7px; width:26px; height:26px; pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.avrank svg{ display:block; }
.pinfo{ min-width:0; flex:1; }
.pfname{ font:700 18px var(--sans); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmeta{ display:flex; gap:6px; margin-top:5px; align-items:center; }
.plv{ font:700 11px var(--mono); color:var(--signal); padding:2px 7px; border:1px solid var(--signal-dim); background:rgba(232,169,58,.08); }
.ptier{ font:700 9px var(--sans); letter-spacing:.12em; color:var(--text-dim); padding:3px 7px; border:1px solid var(--line); }
.ptier.vip{ color:#14110c; background:linear-gradient(90deg,#e8a93a,#f3cf7a); border-color:#e8a93a; }
.pstatus{ margin-top:6px; font:11px var(--sans); color:var(--steel-dim); }
.acctbtn{
  display:block; width:100%; margin:14px 0 4px; padding:9px 12px; cursor:pointer;
  position:relative; isolation:isolate; border:none;
  background:var(--signal-dim); color:var(--signal);                 /* = outline colour, see ::before */
  font:600 11px var(--sans); letter-spacing:.12em; text-align:center;
  clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition:background .15s ease, color .15s ease;
}
/* fill layer 1px inside the clipped shape, so the outline follows the
   slanted ends too (a plain border can't follow a clip-path) */
.acctbtn::before{
  content:''; position:absolute; inset:1px; z-index:-1; background:var(--panel2);
  clip-path:polygon(9.6px 0, 100% 0, calc(100% - 9.6px) 100%, 0 100%);
  transition:background .15s ease;
}
.acctbtn:hover{ background:var(--signal); color:#f6ddaa; }
.acctbtn.warn{ background:var(--signal); color:#f2c460; }
.acctbtn.warn::before{ background:#2a2010; }
.acctbtn:hover::before{ background:#2a2114; }

.sect{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:16px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line);
  font:700 10px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--steel);
}
.sect b{ font:700 11px var(--mono); color:var(--text-dim); letter-spacing:0; }
.badges{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.badge{
  position:relative; aspect-ratio:1/1.08; display:flex; align-items:center; justify-content:center;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:#1f1b14; color:#3d382d; cursor:default; transition:transform .12s ease, filter .12s ease;
}
.badge svg{ width:52%; height:52%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.badge.earned{ background:linear-gradient(160deg,#f3cf7a,#c4782c 70%); color:#1a130a; }
.badge.earned.tone-iron{ background:linear-gradient(160deg,#dfe5ea,#5d666f 75%); color:#161a1e; }
.badge.earned.tone-bronze{ background:linear-gradient(160deg,#f7cfa4,#9a5428 75%); color:#251207; }
.badge.earned.tone-silver{ background:linear-gradient(160deg,#ffffff,#8794a1 75%); color:#1a2027; }
.badge.earned.tone-gold{ background:linear-gradient(160deg,#fff3c8,#d49a2a 75%); color:#2e1d04; }
.badge.earned.tone-apex{ background:linear-gradient(160deg,#ffb3a6,#a3162e 75%); color:#24040c; }
.badge.earned.tone-champ{ background:radial-gradient(circle at 50% 40%,#7a1830,#120307 75%); color:#f2c460; }
.badge.earned:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.badge:not(.earned):hover{ color:#5d574a; }
.badgeinfo{ min-height:30px; margin-top:8px; font:11px/1.4 var(--sans); color:var(--text-dim); }
.badgeinfo b{ color:var(--text); }
.badgeinfo .got{ color:var(--ok); font-weight:700; }

.statsbox{ margin-top:12px; border-top:1px solid var(--line); }
.statsbox summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:baseline;
  padding:10px 0 8px; font:700 10px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--steel);
}
.statsbox summary::-webkit-details-marker{ display:none; }
.statsbox summary span::after{ content:' ▸'; color:var(--steel-dim); }
.statsbox[open] summary span::after{ content:' ▾'; }
.statsbox summary i{ font:11px var(--mono); font-style:normal; color:var(--text-dim); letter-spacing:0; text-transform:none; }
.statsbox summary:hover span{ color:var(--text); }

/* Title sizing: it sits in the gap between the two side panels, so it
   scales with that gap instead of the whole window — at 1280px wide it
   used to run underneath both panels. */
@media (min-width: 1101px){
  #menu .brand{ font-size:clamp(30px, calc((100vw - 720px) / 12.5), 70px); }
}

/* ══ side panels (stats / customization) ══ */
.sidepanel{
  position:fixed; top:148px; width:300px; max-height:calc(100vh - 250px); display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--panel), var(--ink) 85%);
  border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
}
.sidepanel.left{ left:32px; }
.sidepanel.right{ right:32px; }
/* Was `display:none` below 1100px — on anything narrower than that
   (a very common un-maximized laptop window width) the account's stats
   and customization panels vanished completely, which is the other half
   of the "can't see profile/signed as" report. Instead of removing them,
   shrink and drop them down below the menu so they stay reachable at any
   width; the 680px step below hides them only on genuinely phone-narrow
   viewports, where there isn't room for any sane layout anyway. */
.sidepanel > h4{
  margin:0; padding:12px 18px; font:700 13px var(--sans); color:var(--text);
  border-bottom:1px solid var(--line); background:rgba(232,169,58,.05);
  position:relative;
}
.sidepanel > h4::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--signal);
}
.sidepanel-body{ padding:14px 18px 18px; overflow-y:auto; }

.statrow{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:7px 0; border-bottom:1px solid var(--line); font:12px var(--sans); color:var(--text-dim);
}
.statrow b{ font:700 14px var(--mono); color:var(--text); font-variant-numeric:tabular-nums; }
.recentlist h5{
  margin:16px 0 8px; font:700 10px var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--steel); border-bottom:1px solid var(--line); padding-bottom:6px;
}
.recentrow{
  display:flex; justify-content:space-between; padding:5px 2px; font:11px var(--mono);
  border-left:2px solid var(--line); padding-left:8px; margin-bottom:3px;
}
.recentrow.win{ border-left-color:var(--ok); color:var(--text); }
.recentrow.loss{ border-left-color:var(--danger); color:var(--text-dim); }

.custom-tabs{ display:flex; gap:4px; margin-bottom:12px; }
.custom-tab{
  flex:1; padding:7px 4px; text-align:center; background:var(--panel2);
  border:1px solid var(--line); cursor:pointer; font:600 10px var(--sans); letter-spacing:.04em;
  color:var(--text-dim); transition:all .15s ease;
}
.custom-tab.on{ background:rgba(232,169,58,.14); border-color:var(--signal); color:var(--signal); }
.custom-tab:hover:not(.on){ border-color:var(--steel-dim); color:var(--text); }
.customlist{ max-height:300px; overflow-y:auto; }
.custitem{
  display:flex; justify-content:space-between; align-items:center; padding:9px 12px;
  margin-bottom:4px; background:var(--panel2); border-left:2px solid var(--line);
  font:12px var(--sans); color:var(--steel-dim); opacity:.65;
}
.custitem.unlocked{ opacity:1; cursor:pointer; color:var(--text); border-left-color:var(--ok); }
.custitem.unlocked:hover{ background:#211c13; }
.custitem.equipped{ border-left-color:var(--signal); background:rgba(232,169,58,.08); }
.custitem .lvl{ font:700 10px var(--mono); color:var(--text-dim); }
.custitem.unlocked .lvl{ color:var(--ok); }
.custitem{ gap:10px; }

/* ── per-weapon / per-kind grouping (Customization panel) ── */
.custgroup-label{
  margin:10px 2px 4px; font:700 10px var(--sans); letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim);
}
.custgroup-label:first-child{ margin-top:0; }
.custitem.default{ border-left-style:dashed; }
.custitem.default .rwicon{ opacity:.5; }

/* ── reward icon swatch — shared by Customization rows and Season Pass
   rows. A plain colored chip reading the item's own skin colors, shaped
   per reward type so it still reads at a glance with no color at all
   (unclaimed rows dim via parent opacity, not here). */
.rwicon{
  flex:0 0 auto; width:20px; height:20px; border:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.rwicon-gun{ clip-path:polygon(0 15%,85% 0,100% 85%,15% 100%); }
.rwicon-grenade{ border-radius:50%; }
.rwicon-music{ clip-path:polygon(20% 0,80% 0,100% 100%,0% 100%); }
.rwicon-avatar{
  width:28px; height:28px; margin:-4px 0;
  overflow:hidden; border:none; padding:0;
  clip-path:polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.rwicon-avatar svg{ width:100%; height:100%; display:block; }
.rwicon-generic{
  background:repeating-linear-gradient(135deg,#3a362d 0 4px,#2a271f 4px 8px);
  opacity:.6;
}

/* ══ bottom XP bar ══ */
#xpbar-wrap{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%);
  width:600px; max-width:88vw; background:none; border:none; padding:10px 20px 10px;
  cursor:pointer; text-align:left; transition:background .15s ease;
}
#xpbar-wrap:hover{ background:rgba(232,169,58,.06); }
#xpbar-wrap .xprow{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
#xpbar-wrap .xplevel{ font:700 15px var(--sans); color:var(--text); letter-spacing:.02em; }
#xpbar-wrap .xplevel b{ color:var(--signal); font:700 15px var(--mono); }
#xpbar-wrap #xpNext{ font:11px var(--sans); color:var(--text-dim); }
#xpbar-track{ height:5px; background:var(--line); overflow:hidden; }
#xpbar-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--signal-dim),var(--signal)); transition:width .4s ease; }
#xpbar-wrap:hover #xpbar-track{ box-shadow:0 0 0 1px rgba(232,169,58,.5); }

/* ══ season pass popup ══ */
#passModal{ position:fixed; inset:0; z-index:200; background:rgba(5,4,3,.82); display:flex; align-items:center; justify-content:center; }
#passPanel{
  width:760px; max-width:92vw; max-height:80vh; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.6);
}
#passHead{
  display:flex; justify-content:space-between; align-items:center; padding:16px 22px;
  border-bottom:1px solid var(--line); background:rgba(232,169,58,.06);
}
#passHead span{ font:700 14px var(--sans); color:var(--text); letter-spacing:.02em; }
#passHead button{
  background:none; border:1px solid var(--line); color:var(--text-dim);
  width:28px; height:28px; cursor:pointer; font:12px var(--mono);
}
#passHead button:hover{ color:var(--text); border-color:var(--steel); }
#passCols{ display:flex; flex:1; overflow:hidden; }
.passcol{ flex:1; padding:16px 18px; overflow-y:auto; }
.passcol:first-child{ border-right:1px solid var(--line); }
.passcol h4{ margin:0 0 12px; color:var(--signal); font:700 12px var(--sans); letter-spacing:.03em; }
.passitem{
  display:flex; align-items:center; gap:12px; padding:8px 10px;
  margin-bottom:4px; font:12px var(--sans); color:var(--steel-dim);
  background:var(--panel2); border-left:3px solid var(--line);
}
.passitem.claimed{ color:var(--text); border-left-color:var(--ok); }
.passitem.current{ border-left-color:var(--signal); background:rgba(232,169,58,.1); color:var(--text); }
.passitem .plvl{ font:700 11px var(--mono); color:var(--text-dim); width:40px; flex-shrink:0; }
.passitem.current .plvl{ color:var(--signal); }
.passitem .pname{ flex:1; }
.passitem .pstate{ font:700 9px var(--mono); letter-spacing:.05em; color:var(--text-dim); text-transform:uppercase; }
.passitem.claimed .pstate{ color:var(--ok); }

/* ══ account screen: ways in, and your account ══ */
#account.screen .panel{
  width:380px; max-width:calc(100vw - 32px); max-height:90vh; overflow-y:auto; box-sizing:border-box;
  background:var(--panel); border:1px solid var(--line); padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
#account h2{ font:700 18px var(--sans); color:var(--text); margin:0 0 12px; letter-spacing:.02em; }
#account input{
  width:100%; box-sizing:border-box; background:var(--ink);
  border:1px solid var(--line); color:var(--text); padding:10px 12px;
  margin-bottom:10px; font:13px var(--sans);
}
#account input:focus{ outline:none; border-color:var(--signal-dim); }
#acctError{ color:var(--danger); font:12px var(--sans); min-height:0; margin-bottom:8px; }
#acctError:empty{ margin:0; }
#acctNote{ color:var(--ok); font:12px var(--sans); margin-bottom:8px; }
#acctNote:empty{ margin:0; }
#acctTabs{ display:flex; gap:6px; margin-bottom:14px; }
#acctTabs .tab{
  flex:1; text-align:center; padding:8px; cursor:pointer; font:600 11px var(--sans); letter-spacing:.04em;
  background:var(--panel2); border:1px solid var(--line); color:var(--text-dim);
}
#acctTabs .tab.on{ background:rgba(232,169,58,.14); border-color:var(--signal); color:var(--signal); }
#account .aview{ display:none; }
#account[data-view="start"] .aview[data-view="start"],
#account[data-view="password"] .aview[data-view="password"],
#account[data-view="email"] .aview[data-view="email"],
#account[data-view="manage"] .aview[data-view="manage"]{ display:block; }
#account .abig{
  display:block; width:100%; box-sizing:border-box; padding:14px 16px; margin:0 0 6px; cursor:pointer;
  background:var(--signal); color:#1a1408; border:0; font:800 15px var(--sans); letter-spacing:.06em; text-align:left;
}
#account .abig small{ display:block; font:500 11px var(--sans); letter-spacing:0; opacity:.75; margin-top:3px; }
#account .abig.sm{ padding:11px 14px; font-size:13px; }
#account .abig:hover{ filter:brightness(1.08); }
#account .abig:disabled, #account .aopt:disabled{ opacity:.5; cursor:wait; }
#account .aopt{
  display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; margin:0 0 6px; padding:10px 12px;
  background:var(--panel2); border:1px solid var(--line); color:var(--text); cursor:pointer;
  font:700 12px var(--sans); letter-spacing:.05em; text-align:left;
}
#account .aopt small{ margin-left:auto; font:500 11px var(--sans); letter-spacing:0; color:var(--text-dim); }
#account .aopt:hover{ border-color:var(--signal-dim); background:#221d13; }
#account .aopt.half{ flex:1; margin:0; justify-content:center; }
#account .aico{ width:18px; height:18px; flex-shrink:0; background:currentColor; opacity:.85;
  -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat; }
#account .aico.key{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14a5 5 0 1 1 4.9-6H22v4h-2v3h-3v-3h-5.1A5 5 0 0 1 7 14zm0-3a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E"); }
#account .aico.mail{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2zm2 2v.5l8 5 8-5V7l-8 5z'/%3E%3C/svg%3E"); }
#account .aico.pw{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 1 1 12 0v2h2v12H4V10zm3 0h6V8a3 3 0 0 0-6 0z'/%3E%3C/svg%3E"); }
#account .aico.google{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 10.2H12v3.9h5.5c-.5 2.5-2.7 4.1-5.5 4.1a6.2 6.2 0 1 1 4-10.9l2.9-2.8A10.2 10.2 0 1 0 12 22.2c5.9 0 9.8-4.1 9.8-9.9 0-.7-.1-1.4-.2-2.1z'/%3E%3C/svg%3E"); }
#account .aico.discord{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.3 5.3A16.8 16.8 0 0 0 15 4l-.5 1.1a15.6 15.6 0 0 0-5 0L9 4a16.8 16.8 0 0 0-4.3 1.3C2 9.4 1.3 13.4 1.6 17.3a17 17 0 0 0 5.2 2.7l1.1-1.8-1.8-.9.4-.3a12 12 0 0 0 11 0l.4.3-1.8.9 1.1 1.8a17 17 0 0 0 5.2-2.7c.4-4.5-.7-8.5-3.1-12zM8.7 14.9c-1 0-1.8-1-1.8-2.1s.8-2.1 1.8-2.1 1.8 1 1.8 2.1-.8 2.1-1.8 2.1zm6.6 0c-1 0-1.8-1-1.8-2.1s.8-2.1 1.8-2.1 1.8 1 1.8 2.1-.8 2.1-1.8 2.1z'/%3E%3C/svg%3E"); }
#account .aico.microsoft{ --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2h9.5v9.5H2zm10.5 0H22v9.5h-9.5zM2 12.5h9.5V22H2zm10.5 0H22V22h-9.5z'/%3E%3C/svg%3E"); }
#account .aor{ display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:var(--steel-dim); font:11px var(--sans); }
#account .aor::before, #account .aor::after{ content:''; flex:1; height:1px; background:var(--line); }
#account .alink{ display:block; background:none; border:0; padding:8px 0 0; color:var(--text-dim); font:12px var(--sans); cursor:pointer; text-align:left; }
#account .alink:hover{ color:var(--text); text-decoration:underline; }
#account .alink.danger{ color:#a5534c; }
#account .ahint{ font:11px var(--sans); color:var(--steel-dim); margin:6px 0 4px; line-height:1.5; }
#account .ame{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
#account .ame b{ font:700 17px var(--sans); color:var(--text); }
#account .ame span{ font:600 10px var(--mono); color:var(--signal); letter-spacing:.06em; text-transform:uppercase; }
#account .abox{ border:1px solid var(--line); background:rgba(0,0,0,.18); padding:12px; margin-bottom:10px; }
#account .abox h5{ margin:0 0 8px; font:700 11px var(--sans); letter-spacing:.08em; color:var(--signal); }
#account .abox p{ margin:0 0 10px; font:12px/1.5 var(--sans); color:var(--text-dim); }
#account .arow{ display:flex; gap:6px; margin-bottom:6px; }
#account .arow input{ margin:0; flex:1; min-width:0; }
#account .arow.hide, #account .hide{ display:none; }
#account .alogin{ display:flex; align-items:center; gap:8px; font:12px var(--sans); color:var(--text); padding:5px 0; border-bottom:1px solid var(--line); }
#account .alogin:last-child{ border-bottom:0; }
#account .alogin button{ margin-left:auto; background:none; border:1px solid var(--line); color:var(--text-dim); font:11px var(--sans); padding:3px 8px; cursor:pointer; }
#account .alogin button:hover{ color:var(--danger); border-color:var(--danger); }
#aLogins{ margin-bottom:10px; }
#tsHolder:empty{ display:none; }
#tsBox{ margin-top:10px; }

/* VIP payment */
#vipModal{ position:fixed; inset:0; z-index:260; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.62); }
#vipModal.hide{ display:none; }
#vipModal .hide{ display:none; }
.phvip:not(.on){ cursor:pointer; }
.phvip:not(.on):hover{ color:var(--signal); border-color:var(--signal-dim); }
#vipModal .vipbox{ width:380px; max-width:calc(100vw - 32px); background:var(--panel); border:1px solid var(--signal-dim); padding:24px; box-sizing:border-box; }
#vipModal h3{ margin:0 0 6px; font:800 18px var(--sans); color:var(--signal); }
#vipModal p{ font:13px/1.5 var(--sans); color:var(--text-dim); margin:0 0 14px; }
#vipModal .abig{ display:block; width:100%; box-sizing:border-box; padding:13px 16px; margin:0 0 8px; cursor:pointer; background:var(--signal); color:#1a1408; border:0; font:800 14px var(--sans); text-align:center; text-decoration:none; }
#vipModal .aopt{ display:block; width:100%; box-sizing:border-box; padding:11px 14px; margin:0 0 8px; background:var(--panel2); border:1px solid var(--line); color:var(--text); cursor:pointer; font:700 12px var(--sans); text-align:center; }
#vipModal .aopt:hover{ border-color:var(--signal-dim); }
#vipModal input{ width:100%; box-sizing:border-box; background:var(--ink); border:1px solid var(--line); color:var(--text-dim); padding:8px 10px; font:11px var(--mono); margin-bottom:8px; }
#vipModal .vipnote{ font:11px/1.5 var(--sans); color:var(--steel-dim); }

/* ══ end-screen XP summary ══ */
#xpSummary{
  margin:18px auto; width:440px; max-width:90vw; text-align:left;
  background:var(--panel); border:1px solid var(--line); padding:18px 20px; font:var(--sans); color:var(--text-dim);
}
#xpSummary .xpline{ display:flex; justify-content:space-between; padding:4px 0; font-size:12px; }
#xpSummary .xpline span:last-child{ font:700 12px var(--mono); color:var(--text); }
#xpSummary .xptotal{ border-top:1px solid var(--line); margin-top:8px; padding-top:10px; }
#xpSummary .xptotal span:first-child{ font:700 13px var(--sans); color:var(--text); }
#xpSummary .xptotal span:last-child{ font:700 15px var(--mono); color:var(--signal); }
#xpSummary .unlockrow{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); color:var(--signal); font:700 12px var(--sans); }

/* ══ Deployment (lobby) + Settings panels — brought in line with the
   hex-chevron field-ops look used everywhere else (menu, account strip,
   kill feed, customization). These two screens were still the original
   plain boxed `.panel` from style.css; this re-skins that shared class
   and its contents for just these two screens without touching the HTML. ══ */
#lobby .panel, #settings .panel{
  width:560px; max-width:92vw;
  background:linear-gradient(180deg, var(--panel), var(--ink) 92%);
  border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  padding:0; overflow:hidden; display:flex; flex-direction:column;
}
#lobby .panel > h2, #settings .panel > h2{
  margin:0; padding:16px 24px; font:700 13px var(--sans); letter-spacing:.2em;
  color:var(--text); border-bottom:1px solid var(--line); background:rgba(232,169,58,.06);
  position:relative;
}
#lobby .panel > h2::before, #settings .panel > h2::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--signal);
}
#lobby .panel, #settings .panel{ overflow-y:auto; max-height:94vh; }   /* settings was cut off (SAVE & BACK unreachable) on short windows */
#lobby .panel > *:not(h2), #settings .panel > *:not(h2){ padding-left:24px; padding-right:24px; }
#lobby .panel > h2 + *, #settings .panel > h2 + *{ margin-top:18px; }   /* first row was jammed against the header in Settings */
#lobby .panel > .menu, #settings .panel > .menu{ padding-bottom:22px; }
#lobby .opt, #settings .opt{ margin-bottom:16px; }
#lobby .opt label, #settings .opt label{
  font:600 10px var(--sans); letter-spacing:.12em; color:var(--text-dim); text-transform:uppercase;
}
#lobby .opt .val, #settings .opt .val{ color:var(--signal); font-family:var(--mono); }

#lobby .modecard, #settings .modecard{
  border:1px solid var(--line); background:var(--panel2); border-left:3px solid var(--line);
  transition:border-color .15s ease, background .15s ease;
}
#lobby .modecard b, #settings .modecard b{ color:var(--text); font-family:var(--sans); letter-spacing:.06em; }
#lobby .modecard i, #settings .modecard i{ color:var(--text-dim); font-family:var(--sans); }
#lobby .modecard:hover, #settings .modecard:hover{ border-left-color:var(--signal-dim); background:#211c13; }
#lobby .modecard.on, #settings .modecard.on{ border-left-color:var(--signal); background:rgba(232,169,58,.1); }

#lobby .seg .btn, #settings .seg .btn,
#lobby .btn, #settings .btn{
  background:var(--panel2); border:1px solid var(--line); color:var(--text-dim);
  font-family:var(--sans); letter-spacing:.1em; transition:all .15s ease;
}
#lobby .seg .btn:hover, #settings .seg .btn:hover,
#lobby .btn:hover, #settings .btn:hover{ border-color:var(--steel-dim); color:var(--text); background:#211c13; transform:none; }
#lobby .seg .btn.on, #settings .seg .btn.on{
  border-color:var(--signal); color:var(--signal); background:rgba(232,169,58,.14);
}
/* Chevron buttons (DEPLOY / BACK / SAVE & BACK …). A CSS border can't
   follow a clip-path: the two angled edges got no outline at all and the
   1px left border survived only as a stub at the tip — the broken "arrow"
   where the orange outline met the point. Built in two layers instead:
   the button itself is the OUTLINE colour, clipped to the chevron, and a
   ::before 1px inside it — clipped to the same chevron — is the fill. So
   the outline runs evenly along every edge, angled ones included. */
#lobby .panel > .menu .btn, #settings .panel > .menu .btn{
  padding:13px 18px 13px 22px; border:none; isolation:isolate;
  background:var(--line);
  clip-path:polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
#lobby .panel > .menu .btn::before, #settings .panel > .menu .btn::before{
  content:''; position:absolute; inset:1px; z-index:-1; background:var(--panel2);
  clip-path:polygon(9.5px 0, 100% 0, 100% 100%, 9.5px 100%, 0 50%);
  transition:background .15s ease;
}
#lobby .panel > .menu .btn:hover, #settings .panel > .menu .btn:hover{
  color:var(--signal); background:var(--signal);
}
#lobby .panel > .menu .btn:hover::before, #settings .panel > .menu .btn:hover::before{
  background:#2a2114;
}

#lobby input[type=range], #settings input[type=range]{ background:var(--line); }
#lobby input[type=range]::-webkit-slider-thumb, #settings input[type=range]::-webkit-slider-thumb{
  background:var(--signal); border-radius:2px;
}
#lobby input[type=range]::-moz-range-thumb, #settings input[type=range]::-moz-range-thumb{
  background:var(--signal); border-radius:2px;
}
#lobby .code, #settings .code{ color:var(--signal); font-family:var(--mono); }
#lobby textarea, #settings textarea{
  background:var(--ink); border:1px solid var(--line); color:var(--text-dim); font-family:var(--mono);
}
#lobby .hint, #settings .hint{ color:var(--steel-dim); }
#lobby #netbox{ padding-top:2px; }

@media (max-width: 1100px){
  .sidepanel{
    position:static; width:min(420px, 86vw); max-height:34vh; margin:10px auto 0;
  }
  #menu{ padding-top:24px; justify-content:flex-start; overflow-y:auto; gap:10px; }
  .sidepanel.left{ order:2; }
  .sidepanel.right{ order:3; }
  #menu .menu{ order:1; margin-top:8px; }
}
@media (max-width: 680px){ .sidepanel{ display:none; } }

/* ══ Competitive rank ══
   One look everywhere a rank shows up (account card, lobby plate, ladder,
   end screen): the tier's metal is the accent colour (--tier, set inline
   from ranks.js) with a soft glow of it behind the emblem, and progress
   inside a rank is five slanted pips — one per point. */
.rankpips{ display:flex; gap:4px; }
.rankpips i{
  flex:1; height:7px; transform:skewX(-22deg);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07);
  transition:background .3s ease, box-shadow .3s ease;
}
.rankpips i.on{ background:var(--tier); border-color:var(--tier); box-shadow:0 0 6px var(--tierglow); }
.rankpips.sm{ gap:3px; }
.rankpips.sm i{ flex:0 0 13px; height:5px; }

.rankcard{
  display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px 10px 10px;
  cursor:pointer; text-align:left; position:relative; overflow:hidden;
  font:inherit; color:inherit; border:1px solid var(--line); border-left:3px solid var(--tier);
  background:radial-gradient(130% 160% at 0% 50%, var(--tierglow), transparent 55%), var(--panel2);
  transition:filter .15s ease, border-color .15s ease;
}
.rankcard:hover{ filter:brightness(1.12); border-color:var(--steel-dim); border-left-color:var(--tier); }
.rankcard::after{                      /* thin highlight sweep along the top edge */
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, var(--tier), transparent 70%); opacity:.6;
}
.rkemb{ flex:0 0 58px; height:58px; }
.rkemb svg, .mcemb svg{ display:block; filter:drop-shadow(0 0 7px var(--tierglow)) drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.rkinfo{ flex:1; min-width:0; display:flex; flex-direction:column; }
.rktier{ font:700 9px var(--sans); letter-spacing:.18em; color:var(--tier); }
.rkname{ font:700 17px var(--sans); color:var(--text); margin:2px 0 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rknext{ font:11px var(--sans); color:var(--text-dim); margin-top:6px; }
.rankcard.champ .rkname, .mcrank.champ .mcname{
  background:linear-gradient(90deg,#fff3c8,#e9b44c 45%,#fff3c8 55%,#e9b44c);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:rkshine 3.2s linear infinite;
}
@keyframes rkshine{ to{ background-position:-200% 0; } }

/* lobby: rank plate on the Competitive card */
#lobby .modecard.ranked{ display:flex; align-items:stretch; padding:0; overflow:hidden; }
#lobby .modecard.ranked .mctext{ flex:1; padding:11px; min-width:0; }
.rktag{
  font:700 8px var(--sans); font-style:normal; letter-spacing:.16em; vertical-align:2px;
  margin-left:7px; padding:2px 6px; color:#14110c; background:var(--signal);
}
.rktag.cap{ background:#5aa9e6; }
.mcrank{
  flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:8px 14px 8px 24px;
  background:linear-gradient(90deg, transparent, var(--tierglow) 160%), rgba(0,0,0,.25);
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%);
  border-left:none; position:relative;
}
.mcrank::before{                       /* the slanted divider, in the tier colour — traced along the clip edge */
  content:''; position:absolute; inset:0; background:var(--tier); opacity:.8;
  clip-path:polygon(14px 0, 15.5px 0, 1.5px 100%, 0 100%);
}
.mcemb{ flex:0 0 50px; height:50px; }
.mcinfo{ display:flex; flex-direction:column; gap:3px; }
.mclbl{ font:700 8px var(--sans); letter-spacing:.2em; color:var(--tier); }
.mcname{ font:700 13px var(--sans); color:var(--text); white-space:nowrap; }

/* rank ladder popup */
#rankModal{ position:fixed; inset:0; z-index:200; background:rgba(5,4,3,.82); display:flex; align-items:center; justify-content:center; }
#rankPanel{
  width:460px; max-width:92vw; max-height:84vh; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.6);
}
#rankHead{
  display:flex; justify-content:space-between; align-items:center; padding:16px 22px;
  border-bottom:1px solid var(--line); background:rgba(232,169,58,.06);
}
#rankHead span{ font:700 14px var(--sans); color:var(--text); letter-spacing:.02em; }
#rankHead button{ background:none; border:1px solid var(--line); color:var(--text-dim); width:28px; height:28px; cursor:pointer; font:12px var(--mono); }
#rankHead button:hover{ color:var(--text); border-color:var(--steel); }
#rankRules{ padding:10px 22px; font:11px/1.5 var(--sans); color:var(--text-dim); border-bottom:1px solid var(--line); }
#rankRules b{ color:var(--text); font-weight:700; }
#rankLadder{ overflow-y:auto; padding:4px 18px 18px; }
.rladtier{
  display:flex; align-items:center; gap:10px; margin:14px 0 6px;
  font:700 10px var(--sans); letter-spacing:.22em; color:var(--tier);
}
.rladtier::after{ content:''; flex:1; height:1px; background:var(--tier); opacity:.25; }
.rladrow{
  display:flex; align-items:center; gap:12px; padding:5px 12px 5px 8px; margin-bottom:3px;
  background:var(--panel2); border-left:3px solid transparent; opacity:.5;
}
.rladrow svg{ flex:0 0 auto; display:block; }
.rladrow.passed{ opacity:.8; }
.rladrow.current{
  opacity:1; border-left-color:var(--tier);
  background:radial-gradient(120% 200% at 0% 50%, var(--tierglow), transparent 55%), var(--panel2);
}
.rladrow.current svg{ filter:drop-shadow(0 0 6px var(--tierglow)); }
.rladnum{ font:700 11px var(--mono); color:var(--text-dim); width:18px; text-align:right; }
.rladname{ flex:1; font:600 13px var(--sans); color:var(--text); }
.rladpts{ font:700 10px var(--mono); color:var(--steel-dim); }

/* end screen: the rank result under the XP lines */
#xpSummary .rankres{
  display:flex; align-items:center; gap:14px; margin-top:12px; padding:10px 12px;
  border:1px solid var(--line); border-left:3px solid var(--tier);
  background:radial-gradient(130% 180% at 0% 50%, var(--tierglow), transparent 55%), var(--panel2);
}
#xpSummary .rankres svg{ display:block; flex:0 0 auto; filter:drop-shadow(0 0 7px var(--tierglow)); }
#xpSummary .rankres .rrinfo{ flex:1; display:flex; flex-direction:column; gap:5px; }
#xpSummary .rankres .rrhead{ font:700 9px var(--sans); letter-spacing:.2em; color:var(--tier); }
#xpSummary .rankres .rrname{ font:700 16px var(--sans); color:var(--text); }
#xpSummary .rankres .rrdelta{ font:700 14px var(--mono); }
#xpSummary .rankres .rrdelta.up{ color:var(--ok); }
#xpSummary .rankres .rrdelta.down{ color:var(--danger); }
#xpSummary .rankres.promoted{ animation:rkpromo 1.6s ease-out 1; }
@keyframes rkpromo{ 0%{ box-shadow:0 0 0 0 var(--tierglow); } 30%{ box-shadow:0 0 26px 6px var(--tierglow); } 100%{ box-shadow:0 0 0 0 transparent; } }

/* ══ WARZONE capture HUD ══
   Points race across the top: your team's bar fills toward the centre
   from the left, the enemy's from the right, the diamond between them is
   the zone in its current colour, and one line under it says what the
   zone is doing right now. */
#caphud{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none;
}
#caphud .cprow{ display:flex; align-items:center; gap:8px; }
#caphud .cpnum{ font:700 20px var(--mono); min-width:44px; text-shadow:0 1px 3px #000; font-variant-numeric:tabular-nums; }
#caphud .cpnum.a{ color:#7cbcf0; text-align:right; }
#caphud .cpnum.b{ color:#f0915c; text-align:left; }
#caphud .cpbar{
  width:170px; height:9px; background:rgba(8,8,8,.62); border:1px solid rgba(255,255,255,.14);
  position:relative; overflow:hidden;
}
#caphud .cpbar.a{ clip-path:polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
#caphud .cpbar.b{ clip-path:polygon(6px 0, 100% 0, 100% 100%, 0 100%); }
#caphud .cpbar i{ position:absolute; top:0; bottom:0; width:0; transition:width .25s linear; }
#caphud .cpbar.a i{ right:0; background:linear-gradient(270deg,#7cbcf0,#3b78ad); }
#caphud .cpbar.b i{ left:0; background:linear-gradient(90deg,#f0915c,#b4502a); }
#caphud .cpmid{ width:28px; height:28px; display:flex; }
#caphud .cpmid svg{ width:100%; height:100%; fill:rgba(10,10,10,.75); stroke:#f2e6c8; stroke-width:1.6;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.8)); transition:fill .2s, stroke .2s; }
#caphud .cpmid.own svg{ fill:#5aa9e6; stroke:#d6ecff; filter:drop-shadow(0 0 7px rgba(90,169,230,.8)); }
#caphud .cpmid.enemy svg{ fill:#e0743a; stroke:#ffd9c2; filter:drop-shadow(0 0 7px rgba(224,116,58,.8)); }
#caphud .cpmid.contested svg{ fill:#ff3b3b; stroke:#ffd0d0; animation:cpblink .5s steps(2) infinite; }
@keyframes cpblink{ 50%{ opacity:.35; } }
#caphud .cpcap{ width:120px; height:3px; background:rgba(8,8,8,.6); margin-top:-2px; visibility:hidden; }
#caphud .cpcap.on{ visibility:visible; }
#caphud .cpcap i{ display:block; height:100%; width:0; background:#f2e6c8; }
#caphud .cpcap.own i{ background:#7cbcf0; }
#caphud .cpcap.enemy i{ background:#f0915c; }
#caphud .cpstate{
  font:700 10px var(--sans); letter-spacing:.24em; text-indent:.24em; color:#e8dfd0;
  padding:4px 14px; background:linear-gradient(90deg, transparent, rgba(8,8,8,.7) 18%, rgba(8,8,8,.7) 82%, transparent);
  text-shadow:0 1px 2px #000;
}
#caphud .cpstate.own{ color:#9fd0f5; }
#caphud .cpstate.enemy{ color:#f5b08a; }
#caphud .cpstate.contested{ color:#ff8080; }
/* buy-phase / hostage objective line sits under the points race in WARZONE */
#hud.capmode #objective{ top:84px; }

/* zone marker that tracks the zone on screen (edge-clamped when off-screen) */
#zonemark{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%); pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:2px; z-index:3;
}
#zonemark svg{ width:20px; height:20px; fill:rgba(10,10,10,.55); stroke:#f2e6c8; stroke-width:1.8;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.9)); }
#zonemark span{ font:700 10px var(--mono); color:#f2e6c8; text-shadow:0 1px 2px #000; }
#zonemark.own svg{ stroke:#9fd0f5; fill:rgba(90,169,230,.45); }
#zonemark.enemy svg{ stroke:#f5b08a; fill:rgba(224,116,58,.45); }
#zonemark.contested svg{ stroke:#ff8080; fill:rgba(255,59,59,.5); }

/* ══ Buy menu — "Armory" ══
   Same language as the menus: warm dark panels, amber signal accent with
   a left bar on headers, chevron confirm, sans for labels and mono for
   numbers. Cards on the left, the selected gun on the right with live
   stat bars and attachment chips. */
#buy .buypanel{
  width:min(96vw, 980px); max-height:94vh; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg, var(--panel), var(--ink) 90%);
  border:1px solid var(--line); box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03);
  position:relative;
}
#buy .buyhead{
  display:flex; align-items:center; gap:18px; padding:12px 16px 12px 22px; position:relative;
  border-bottom:1px solid var(--line); background:rgba(232,169,58,.06);
}
#buy .buyhead::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--signal); }
#buy .bh-title{ display:flex; flex-direction:column; gap:2px; margin-right:auto; }
#buy .bh-title b{ font:700 16px var(--sans); letter-spacing:.22em; color:var(--text); }
#buy .bh-title span{ font:600 9px var(--sans); letter-spacing:.24em; color:var(--text-dim); }
#buy .bh-cash, #buy .bh-time{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
#buy .bh-cash i, #buy .bh-time i{ font:600 8px var(--sans); font-style:normal; letter-spacing:.22em; color:var(--steel-dim); }
#buy .bh-cash b{ font:700 20px var(--mono); color:#86d39a; }
#buy .bh-time b{ font:700 20px var(--mono); color:var(--signal); min-width:2ch; text-align:right; }
#buy #buyx{
  width:30px; height:30px; margin-left:6px; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); color:var(--text-dim); font:13px var(--mono);
}
#buy #buyx:hover{ color:var(--text); border-color:var(--signal-dim); background:#2a2114; }

#buy .buybody{ display:flex; min-height:0; flex:1; }
#buy .buycol{ width:300px; flex:0 0 300px; padding:12px 14px 16px; overflow-y:auto; border-right:1px solid var(--line); max-height:none; }
#buy .bhead{
  margin:12px 0 7px; font:700 9px var(--sans); letter-spacing:.22em; color:var(--steel);
  display:flex; align-items:center; gap:8px;
}
#buy .bhead::after{ content:''; flex:1; height:1px; background:var(--line); }
#buy .bhead:first-child{ margin-top:2px; }

#buy .bcard{
  display:grid; grid-template-columns:78px 1fr auto; align-items:center; gap:10px;
  padding:7px 10px 7px 8px; margin-bottom:5px; cursor:pointer; position:relative;
  background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--line);
  transition:background .12s ease, border-color .12s ease;
}
#buy .bcard svg{ width:78px; height:26px; fill:#6c675c; transition:fill .12s ease; }
#buy .bcard .bc-name{ font:600 12px var(--sans); color:var(--text); letter-spacing:.04em; }
#buy .bcard .bc-price{ font:700 11px var(--mono); color:#86d39a; }
#buy .bcard:hover{ background:#211c13; border-left-color:var(--signal-dim); }
#buy .bcard:hover svg{ fill:#9a9384; }
#buy .bcard.on{ background:rgba(232,169,58,.1); border-color:rgba(232,169,58,.45); border-left-color:var(--signal); }
#buy .bcard.on svg{ fill:var(--signal); }
#buy .bcard.own .bc-price{ color:var(--steel); letter-spacing:.08em; }
#buy .bcard.no{ opacity:.45; }
#buy .bcard.no .bc-price{ color:var(--danger); }

#buy .bnades{ display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; }
#buy .bnade{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 4px 7px; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); transition:background .12s ease, border-color .12s ease;
}
#buy .bnade:hover{ background:#211c13; border-color:var(--signal-dim); }
#buy .bnade .bn-name{ font:700 9px var(--sans); letter-spacing:.12em; color:var(--text); }
#buy .bnade .bn-pips{ display:flex; gap:4px; }
#buy .bnade .bn-pips i{ width:14px; height:5px; transform:skewX(-20deg); background:rgba(255,255,255,.08); }
#buy .bnade .bn-pips i.on{ background:var(--signal); }
#buy .bnade .bn-price{ font:700 10px var(--mono); color:#86d39a; }
#buy .bnade.own .bn-price{ color:var(--steel); }
#buy .bnade.no{ opacity:.45; }
#buy .bnade.no .bn-price{ color:var(--danger); }

#buy .buyprev{ flex:1; min-width:0; padding:14px 20px 16px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; }
#buy .bp-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#buy #prevtag{ font:700 9px var(--sans); letter-spacing:.24em; color:var(--signal); min-height:11px; }
#buy #prevname{ font:700 22px var(--sans); letter-spacing:.08em; color:var(--text); margin-top:3px; }
#buy #prevart svg{ width:200px; height:66px; fill:#3a362d; stroke:#6c675c; stroke-width:.4;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }

#buy #prevstats{ display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; }
#buy .bstat{ display:grid; grid-template-columns:108px 1fr 76px; align-items:center; gap:8px; }
#buy .bs-l{ white-space:nowrap; }
#buy .bs-l{ font:600 9px var(--sans); letter-spacing:.14em; color:var(--text-dim); }
#buy .bs-bar{ position:relative; height:5px; background:rgba(255,255,255,.07); overflow:hidden; }
#buy .bs-bar i{ position:absolute; top:0; bottom:0; }
#buy .bs-base{ left:0; background:linear-gradient(90deg, var(--signal-dim), #cfa457); }
#buy .bs-up{ background:var(--ok); }
#buy .bs-down{ background:var(--danger); }
#buy .bs-v{ font:700 10px var(--mono); color:var(--text); text-align:right; white-space:nowrap; }
#buy .bs-v.up{ color:#86d39a; }
#buy .bs-v.down{ color:#e2847c; }

#buy #attrows{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:12px; }
#buy .arow{ display:grid; grid-template-columns:78px 1fr; gap:10px; align-items:center; }
#buy .a-l{ font:700 9px var(--sans); letter-spacing:.18em; color:var(--steel); }
#buy .a-chips{ display:flex; flex-wrap:wrap; gap:5px; }
#buy .achip{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:96px; padding:6px 10px 6px 9px;
  cursor:pointer; text-align:left; background:var(--panel2); border:1px solid var(--line); border-left:2px solid var(--line);
  transition:background .12s ease, border-color .12s ease;
}
#buy .achip b{ font:600 10px var(--sans); letter-spacing:.06em; color:var(--text); }
#buy .achip i{ font:700 9px var(--mono); font-style:normal; color:#86d39a; }
#buy .achip:hover{ background:#211c13; border-left-color:var(--signal-dim); }
#buy .achip.on{ background:rgba(232,169,58,.12); border-color:rgba(232,169,58,.5); border-left-color:var(--signal); }
#buy .achip.on b{ color:var(--signal); }
#buy #attinfo{ min-height:16px; font:11px/1.45 var(--sans); color:var(--text-dim); }
#buy #attinfo b{ color:var(--text); }

#buy .buyfoot{
  margin-top:auto; display:flex; align-items:center; gap:16px; border-top:1px solid var(--line); padding-top:12px;
}
#buy .bf-total{ font:700 10px var(--sans); letter-spacing:.2em; color:var(--text-dim); }
#buy .bf-total b{ font:700 20px var(--mono); color:#86d39a; margin-left:8px; letter-spacing:0; }
#buy .bf-total b.over{ color:var(--danger); }
#buy .bf-keys{ margin-left:auto; font:600 9px var(--sans); letter-spacing:.18em; color:var(--steel-dim); }
/* confirm: the menus' two-layer chevron button, filled amber */
#buy #buyconfirm{
  width:180px; padding:12px 18px 12px 26px; text-align:left; border:none; isolation:isolate;
  font:700 12px var(--sans); letter-spacing:.2em; color:#1a1208; background:var(--signal);
  clip-path:polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
#buy #buyconfirm:hover{ background:#f3c062; transform:none; }
#buy #buyconfirm:disabled{ background:#4a4234; color:#8a8170; cursor:not-allowed; }
/* close: smaller, red — next to BUY so the two never get mixed up */
#buy #buyclose{
  width:120px; padding:12px 14px 12px 22px; text-align:left; border:none; isolation:isolate;
  font:700 11px var(--sans); letter-spacing:.2em; color:#fff; background:#b3362c;
  clip-path:polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
#buy #buyclose:hover{ background:#d0443a; transform:none; }

@media (max-width: 760px){
  #buy .buybody{ flex-direction:column; }
  #buy .buycol{ width:auto; flex:0 0 auto; border-right:none; border-bottom:1px solid var(--line); max-height:38vh; }
  #buy #prevstats{ grid-template-columns:1fr; }
}

/* ══ Deployment v2: two columns — how you play (mode, side, settings) on
   the left, where (map cards, the selected map's plan) on the right ══ */
#lobby .panel.lobby2{ width:1100px; max-width:96vw; }
.lobgrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:26px; margin-top:18px; }
.lobcol{ min-width:0; }
@media (max-width:900px){ .lobgrid{ grid-template-columns:1fr; } }

/* mode cards: 2 × 2 */
.modegrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.modecard2{
  position:relative; cursor:pointer; padding:11px 12px 10px; min-height:84px;
  background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--line);
  display:flex; flex-direction:column; gap:7px; transition:border-color .15s, background .15s, transform .15s;
}
.modecard2:hover{ border-left-color:var(--signal-dim); background:#211c13; }
.modecard2.on{ border-left-color:var(--signal); border-color:rgba(232,169,58,.45); background:linear-gradient(135deg, rgba(232,169,58,.14), rgba(232,169,58,.03)); }
.modecard2.war.on{ border-left-color:#5aa9e6; border-color:rgba(90,169,230,.45); background:linear-gradient(135deg, rgba(90,169,230,.14), rgba(90,169,230,.03)); }
.modecard2 .mchead{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.modecard2 b{ font:700 14px var(--sans); letter-spacing:.1em; color:var(--text); }
.modecard2 .rktag{ margin-left:0; }
.mcdots{ display:flex; align-items:center; gap:3px; height:12px; }
.mcdots i{ width:8px; height:8px; border-radius:50%; background:#6f93a8; box-shadow:0 0 0 1px rgba(0,0,0,.4); }
.mcdots s{ text-decoration:none; font:700 9px var(--mono); color:var(--steel-dim); margin:0 5px; }
.modecard2 .mcdots s ~ i{ background:#c4782c; }
.mcdots.big i{ background:#6f93a8; }
.mcsub{ font:11px var(--sans); color:var(--text-dim); }
#lobby .mcrank{ margin-top:8px; border:1px solid var(--line); clip-path:none; padding:8px 14px; }
#lobby .mcrank::before{ display:none; }
#modeinfo{ margin-top:8px; font:11px/1.6 var(--sans); color:var(--text-dim); padding:9px 12px;
  background:rgba(0,0,0,.25); border:1px solid var(--line); }
#modeinfo b{ color:var(--text); font-weight:700; }
#modeinfo .k{ color:var(--signal); font-family:var(--mono); }

/* side picker */
.sidepick{ display:grid; grid-template-columns:1fr .62fr 1fr; gap:8px; }
.sidecard{ cursor:pointer; padding:11px 12px; background:var(--panel2); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:3px; position:relative; overflow:hidden; transition:all .15s; }
.sidecard b{ font:800 26px/1 var(--sans); letter-spacing:.04em; }
.sidecard span{ font:700 9px var(--sans); letter-spacing:.18em; color:var(--text-dim); }
.sidecard i{ font:11px var(--sans); font-style:normal; color:var(--text-dim); margin-top:3px; }
.sidecard.ct b{ color:#8fbfe0; } .sidecard.t b{ color:#e8a35a; } .sidecard.rnd b{ color:var(--steel); }
.sidecard:hover{ background:#211c13; }
.sidecard.ct.on{ border-color:#6fa3c8; background:linear-gradient(160deg, rgba(90,150,200,.22), rgba(90,150,200,.04)); }
.sidecard.t.on{ border-color:#d08a40; background:linear-gradient(160deg, rgba(210,130,60,.22), rgba(210,130,60,.04)); }
.sidecard.rnd.on{ border-color:var(--steel); background:rgba(139,146,154,.12); }
.sidecard::after{ content:''; position:absolute; right:-14px; bottom:-14px; width:54px; height:54px; border-radius:50%;
  border:2px solid currentColor; opacity:.08; }

/* settings rows */
.setgrid{ display:flex; flex-direction:column; gap:6px; }
.setrow{ display:grid; grid-template-columns:118px 1fr; align-items:center; gap:10px; }
.setrow > span{ font:700 9px var(--sans); letter-spacing:.14em; color:var(--steel); }
#lobby .setrow .btn.sm{ padding:7px 4px; font-size:10px; }

/* map cards */
.mapgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.mapcard{ position:relative; cursor:pointer; aspect-ratio:16/10; border:1px solid var(--line); overflow:hidden;
  background:#0e0d0b center/cover no-repeat; transition:border-color .15s, transform .15s, filter .15s; filter:saturate(.75) brightness(.85); }
.mapcard:hover{ filter:none; transform:translateY(-2px); }
.mapcard.on{ border-color:var(--signal); filter:none; box-shadow:0 0 0 1px var(--signal), 0 8px 24px rgba(0,0,0,.5); }
.mapcard::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.85)); }
.mapcard .mcn{ position:absolute; left:8px; right:8px; bottom:6px; z-index:1; font:700 11px var(--sans); letter-spacing:.08em; color:#fff; }
.mapcard .mcz{ display:block; font:500 9px var(--mono); color:rgba(255,255,255,.6); letter-spacing:.04em; margin-top:2px; }
.mapcard .mcnew{ position:absolute; top:6px; left:6px; z-index:1; font:800 8px var(--sans); letter-spacing:.16em;
  padding:2px 6px; background:var(--signal); color:#14110c; }
.mapcard.locked{ cursor:not-allowed; opacity:.4; }
.mapinfo{ margin-top:10px; display:grid; grid-template-columns:1.25fr 1fr; gap:12px; align-items:start;
  background:rgba(0,0,0,.25); border:1px solid var(--line); padding:10px; }
.mapinfo .plan{ width:100%; display:block; border:1px solid var(--line); background:#0e0d0b; }
.mapinfo h3{ font:800 15px var(--sans); letter-spacing:.06em; color:var(--text); margin-bottom:3px; }
.mapinfo .sz{ font:600 10px var(--mono); color:var(--signal); letter-spacing:.06em; }
.mapinfo p{ font:12px/1.55 var(--sans); color:var(--text-dim); margin:8px 0; }
.mapinfo .legend{ display:flex; flex-direction:column; gap:4px; font:11px var(--sans); color:var(--text-dim); }
.mapinfo .legend span b{ display:inline-block; min-width:22px; text-align:center; font:800 10px var(--sans); padding:1px 4px; margin-right:6px; color:#14110c; }
.mapinfo .legend .lA b, .mapinfo .legend .lB b{ background:var(--signal); }
.mapinfo .legend .lT b{ background:#de8c46; } .mapinfo .legend .lCT b{ background:#6ea0cd; }
#lobby .panel > .menu.lobbtns{ width:auto; flex-direction:row; justify-content:flex-end; gap:10px; margin-top:6px; padding-top:14px; border-top:1px solid var(--line); }
#lobby .panel > .menu.lobbtns .btn{ min-width:170px; }
#lobby .panel > .menu.lobbtns #lStart{ order:2; }

/* ══ ARMORY page ══════════════════════════════════════════════════════════
   A full screen of its own: tabs across the top, the weapon list on the
   left, the turning 3D gun in the middle, every finish for that gun on the
   right as rendered cards. */
#armory{ justify-content:flex-start; padding:3vh 0; }
.armwrap{ position:relative; width:min(1320px, 96vw); height:94vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--panel), var(--ink) 95%); border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03); }
.armhead{ display:flex; align-items:center; gap:24px; padding:14px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(232,169,58,.10), rgba(232,169,58,0) 60%); position:relative; }
.armhead::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--signal); }
.armtitle{ display:flex; flex-direction:column; gap:3px; min-width:170px; }
.armtitle b{ font:800 22px var(--sans); letter-spacing:.24em; color:var(--text); }
.armtitle span{ font:600 10px var(--mono); letter-spacing:.12em; color:var(--text-dim); }
.armtitle span b{ font:700 11px var(--mono); letter-spacing:.06em; color:var(--signal); }
.armtitle .vip{ color:#e8c870; }
.armtabs{ display:flex; gap:4px; flex:1; }
.armtab{ cursor:pointer; padding:10px 16px; font:700 11px var(--sans); letter-spacing:.14em; color:var(--text-dim);
  border-bottom:2px solid transparent; }
.armtab:hover{ color:var(--text); }
.armtab.on{ color:var(--signal); border-bottom-color:var(--signal); }
.armacts{ display:flex; gap:8px; }
.armhbtn{ cursor:pointer; padding:9px 16px; font:700 11px var(--sans); letter-spacing:.12em; color:var(--text);
  background:var(--panel2); border:1px solid var(--line); transition:all .15s; }
.armhbtn:hover{ border-color:var(--signal); color:var(--signal); }
#armPass{ color:#14110c; background:linear-gradient(90deg, #e8a93a, #f2c460); border-color:transparent; }
#armPass:hover{ filter:brightness(1.1); color:#14110c; }
.armbody{ flex:1; min-height:0; display:grid; grid-template-columns:210px minmax(0,1.25fr) minmax(0,1fr); }
.armside{ border-right:1px solid var(--line); overflow-y:auto; padding:10px 0; }
.armside.hide{ display:none!important; }
.armbody:has(.armside.hide){ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
.armw{ cursor:pointer; padding:11px 18px; display:grid; grid-template-columns:1fr auto; gap:2px 8px;
  border-left:3px solid transparent; transition:background .15s; }
.armw b{ font:700 12px var(--sans); letter-spacing:.08em; color:var(--text); }
.armw span{ font:11px var(--sans); color:var(--text-dim); grid-column:1; }
.armw i{ grid-column:2; grid-row:1 / span 2; align-self:center; font:600 10px var(--mono); font-style:normal; color:var(--steel-dim); }
.armw:hover{ background:rgba(255,255,255,.03); }
.armw.on{ background:rgba(232,169,58,.08); border-left-color:var(--signal); }
.armw.on b{ color:var(--signal); }
.armcenter{ display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line); }
.armstage{ position:relative; flex:1; min-height:240px; cursor:grab; overflow:hidden;
  background:radial-gradient(ellipse at 50% 58%, #2a241b 0%, #15120e 55%, #0b0a08 100%); }
.armstage:active{ cursor:grabbing; }
.armstage::after{ content:''; position:absolute; left:12%; right:12%; bottom:16%; height:20px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); pointer-events:none; }
.armstage canvas{ position:absolute; inset:0; display:block; z-index:1; }
.armstage.flat canvas{ display:none; }
.armstage .armhint{ position:absolute; right:14px; bottom:10px; z-index:2; font:600 9px var(--mono); letter-spacing:.2em; color:var(--steel-dim); }
.armstage.flat .armhint{ display:none; }
.armflat{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.bigav{ width:min(48%, 260px); aspect-ratio:1; border-radius:22px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 0 1px var(--line); }
.bigav svg{ width:100%; height:100%; display:block; }
.bigdisc{ position:relative; width:min(46%, 250px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--disc) 0 18%, #111 19% 21%, #1a1a1a 22% 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.6); animation:spin 6s linear infinite; }
.bigdisc i{ position:absolute; inset:0; border-radius:50%; background:repeating-radial-gradient(circle, rgba(255,255,255,.04) 0 1px, transparent 1px 4px); }
/* the label text: a disc-sized box turning back against the disc, so the
   word stays upright and centred (a spin on the text itself replaced its
   centring transform and threw it off to one side) */
.bigdisc span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 33%; text-align:center;
  font:800 9.5px/1.15 var(--sans); color:#14110c; letter-spacing:.03em; overflow-wrap:anywhere; animation:spin 6s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.arminfo{ padding:16px 20px 18px; border-top:1px solid var(--line); background:rgba(0,0,0,.2); }
.arminfo .aik{ font:700 10px var(--sans); letter-spacing:.18em; color:var(--steel); }
.arminfo .aik em{ font-style:normal; color:#e8c870; }
.arminfo h3{ font:800 24px var(--sans); color:var(--text); letter-spacing:.02em; margin:4px 0 8px; }
.arminfo p{ font:12px/1.5 var(--sans); color:var(--text-dim); margin:6px 0 12px; }
.aisw{ display:flex; gap:5px; }
.aisw i{ width:26px; height:12px; border:1px solid rgba(255,255,255,.12); }
.armbtn{ cursor:pointer; padding:11px 26px; margin-right:8px; font:800 12px var(--sans); letter-spacing:.16em;
  color:#14110c; background:var(--signal); border:none; transition:filter .15s; }
.armbtn:hover{ filter:brightness(1.12); }
.armbtn.done{ background:transparent; color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok); cursor:default; filter:none; }
.armbtn.ghost{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }
.armbtn.lock{ background:transparent; color:var(--text-dim); box-shadow:inset 0 0 0 1px var(--line); }
.armbtn.lock:hover{ color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal); }
.armgrid{ overflow-y:auto; padding:14px; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; align-content:start; grid-auto-rows:max-content; }   /* rows keep the cards' height and the grid scrolls: on a short window they were squashed to a strip (overflow:hidden cards have no min height) */
.armgrid.g-avatar, .armgrid.g-music{ grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); }
.armcard{ position:relative; cursor:pointer; background:var(--panel2); border:1px solid var(--line); transition:all .15s; overflow:hidden; }
.armcard:hover{ border-color:var(--steel-dim); transform:translateY(-2px); }
.armcard.sel{ border-color:var(--signal); box-shadow:0 0 0 1px var(--signal); }
.armcard.eq::before{ content:'EQUIPPED'; position:absolute; top:6px; left:6px; z-index:2; font:800 8px var(--sans); letter-spacing:.14em;
  padding:2px 6px; color:#0d1a10; background:var(--ok); }
.armcard .acart{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 60%, #2a241b, #100e0b 75%); }
.armgrid.g-avatar .acart, .armgrid.g-music .acart{ aspect-ratio:1; }
.armcard .acart img{ width:100%; height:100%; object-fit:contain; display:block; }
.armcard.locked .acart img, .armcard.locked .acart .avart, .armcard.locked .acart .disc{ filter:grayscale(.85) brightness(.55); }
.armcard.locked::after{ content:''; position:absolute; top:7px; right:7px; width:9px; height:7px; border:2px solid var(--steel-dim); border-top:none;
  border-radius:0 0 2px 2px; box-shadow:0 -6px 0 -2px var(--panel2), 0 -7px 0 -2px var(--steel-dim); }
.armcard .acmeta{ padding:7px 9px 8px; display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line); }
.armcard .acmeta b{ font:700 12px var(--sans); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.armcard .acmeta span{ font:600 9px var(--mono); letter-spacing:.08em; color:var(--text-dim); }
.armcard.own .acmeta span{ color:var(--steel); }
.armcard.eq .acmeta span{ color:var(--ok); }
.armcard .acvip{ position:absolute; top:6px; right:22px; font:800 8px var(--sans); font-style:normal; letter-spacing:.14em; padding:2px 5px;
  color:#14110c; background:linear-gradient(90deg,#e8a93a,#f2c460); }
.armcard.own .acvip{ right:6px; }
.armcard .avart{ width:72%; aspect-ratio:1; border-radius:14px; overflow:hidden; display:block; }
.armcard .avart svg{ width:100%; height:100%; display:block; }
.disc{ position:relative; width:72%; aspect-ratio:1; border-radius:50%; display:block;
  background:radial-gradient(circle, var(--disc) 0 20%, #111 21% 23%, #1b1b1b 24% 100%); box-shadow:0 6px 16px rgba(0,0,0,.5); }
.disc i{ position:absolute; inset:0; border-radius:50%; background:repeating-radial-gradient(circle, rgba(255,255,255,.05) 0 1px, transparent 1px 4px); }
.nothumb{ width:60%; height:40%; background:rgba(255,255,255,.04); }
.armempty{ grid-column:1 / -1; padding:30px; text-align:center; font:12px var(--sans); color:var(--text-dim); }

/* ══ SEASON PASS v2: one strip, level by level ══ */
#passModal{ background:rgba(5,4,3,.86); backdrop-filter:blur(3px); }
#passPanel{ width:min(1320px, 96vw); max-height:none; height:auto; position:relative;
  background:linear-gradient(180deg, #1b1610, var(--ink) 90%); border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.7); display:flex; flex-direction:column; }
#passPanel::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 18% 0%, rgba(232,169,58,.18), transparent 50%); }
#passHead{ grid-column:1 / -1; display:flex; align-items:center; gap:28px; padding:18px 24px; justify-content:flex-start;
  border-bottom:1px solid var(--line); background:none; position:relative; }
#passHead .phl{ display:flex; flex-direction:column; gap:2px; min-width:200px; }
#passHead .phl span{ font:700 10px var(--mono); letter-spacing:.24em; color:var(--signal); }
#passHead .phl b{ font:800 26px var(--sans); letter-spacing:.14em; color:var(--text); }
#passHead .phlv{ flex:1; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; }
#passLvl{ grid-row:1 / span 2; display:flex; align-items:baseline; gap:4px; }
#passLvl b{ font:800 40px var(--mono); color:var(--signal); line-height:1; }
#passLvl span{ font:600 12px var(--mono); color:var(--text-dim); }
#passHead .phbar{ height:8px; background:rgba(255,255,255,.07); border:1px solid var(--line); overflow:hidden; }
#passHead .phbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--signal-dim), var(--signal), #ffd98a); transition:width .5s; }
#passXp{ font:600 10px var(--mono); color:var(--text-dim); letter-spacing:.06em; margin-top:6px; }
#passHead .phr{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
#passHead .phlv{ min-width:0; }
.phvip{ font:800 9px var(--sans); letter-spacing:.18em; padding:5px 10px; color:var(--text-dim); border:1px solid var(--line); }
.phvip.on{ color:#14110c; background:linear-gradient(90deg,#e8a93a,#f2c460); border-color:transparent; }
#passHead button{ background:var(--panel2); border:1px solid var(--line); color:var(--text-dim); height:32px; min-width:32px; padding:0 12px;
  cursor:pointer; font:700 11px var(--sans); letter-spacing:.1em; white-space:nowrap; flex:0 0 auto; width:auto; }
#passHead button:hover{ color:var(--text); border-color:var(--steel); }
#passArmory{ color:var(--signal)!important; border-color:rgba(232,169,58,.45)!important; }
.prow{ display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; transform:rotate(180deg);
  font:800 11px var(--sans); letter-spacing:.3em; color:var(--text-dim); border:1px solid var(--line); background:rgba(0,0,0,.25); }
.prow.pro{ color:#14110c; background:linear-gradient(180deg,#e8a93a,#f2c460); border-color:transparent; }
#passTrack{ display:flex; position:relative; gap:8px; overflow-x:auto; overflow-y:hidden; padding:14px 14px 18px; scroll-behavior:smooth; }
#passTrack::-webkit-scrollbar{ height:8px; } #passTrack::-webkit-scrollbar-thumb{ background:var(--line); }
.pcol{ flex:0 0 150px; display:grid; grid-template-rows:34px 1fr 1fr; gap:8px; }
.pcol.plabels{ flex:0 0 44px; position:sticky; left:-14px; z-index:3; padding-left:0; background:linear-gradient(90deg, #17130e 80%, rgba(23,19,14,0));
  margin-left:-14px; padding-left:14px; box-sizing:content-box; }
.pcol.plabels .plv{ border:none; }
.pcol .plv{ display:flex; align-items:center; justify-content:center; font:800 13px var(--mono); color:var(--text-dim);
  border-bottom:3px solid var(--line); position:relative; }
.pcol.done .plv{ color:var(--text); border-bottom-color:var(--signal); }
.pcol.next .plv{ color:#14110c; background:var(--signal); border-bottom-color:var(--signal); }
.pcol.next .plv::after{ content:'NEXT'; position:absolute; top:-15px; font:800 8px var(--sans); letter-spacing:.2em; color:var(--signal); }
.pcell{ position:relative; display:flex; flex-direction:column; background:var(--panel2); border:1px solid var(--line); cursor:pointer;
  transition:transform .15s, border-color .15s; min-height:150px; overflow:hidden; }
.pcell:hover{ transform:translateY(-3px); border-color:var(--steel-dim); }
.pcell.empty{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 6px, transparent 6px 12px); cursor:default; border-style:dashed; }
.pcell.empty:hover{ transform:none; border-color:var(--line); }
.pcell .pcart{ flex:1; display:flex; align-items:center; justify-content:center; min-height:90px;
  background:radial-gradient(ellipse at 50% 60%, #2a241b, #100e0b 78%); }
.pcell.k-gun .pcart img, .pcell.k-grenade .pcart img{ width:100%; height:100%; object-fit:contain; }
.pcell .pcart .avart{ width:58%; aspect-ratio:1; border-radius:12px; overflow:hidden; display:block; }
.pcell .pcart .avart svg{ width:100%; height:100%; display:block; }
.pcell .pcart .disc{ width:56%; }
.pcell .pcmeta{ padding:7px 9px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.pcell .pcmeta span{ font:700 8px var(--sans); letter-spacing:.16em; color:var(--steel); }
.pcell .pcmeta b{ font:700 11px var(--sans); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcell:not(.got) .pcart > *{ filter:grayscale(.7) brightness(.6); }
.pcell.got{ border-color:rgba(79,174,110,.5); }
.pcell .pcok{ position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%; background:var(--ok); color:#0d1a10;
  font:900 11px/18px var(--sans); text-align:center; font-style:normal; }
.pcell .pclk{ position:absolute; top:6px; right:6px; font:800 8px var(--sans); font-style:normal; letter-spacing:.14em; padding:2px 5px;
  color:#14110c; background:linear-gradient(90deg,#e8a93a,#f2c460); }
.pcell.viplock .pcart > *{ filter:grayscale(1) brightness(.45); }
.pcell.flash{ animation:pflash .5s ease 3; }
@keyframes pflash{ 50%{ border-color:var(--signal); box-shadow:0 0 0 2px var(--signal); } }
#passFoot{ grid-column:1 / -1; padding:10px 24px 14px; font:11px var(--sans); color:var(--steel-dim); border-top:1px solid var(--line); }

/* ══ PLAY ONLINE: quick play, custom lobbies, party, chat ══ */
#online .panel.onl{ width:900px; max-width:calc(100vw - 32px); max-height:92vh; overflow-y:auto; box-sizing:border-box;
  background:var(--panel); border:1px solid var(--line); padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
#online .onhead{ display:flex; align-items:baseline; gap:12px; }
#online h2{ font:700 18px var(--sans); color:var(--text); margin:0 0 12px; letter-spacing:.02em; }
#online .onst{ font:700 10px var(--mono); letter-spacing:.08em; color:var(--steel-dim); }
#online .onst.on{ color:var(--ok); }
#onError{ color:var(--danger); font:12px var(--sans); margin-bottom:8px; min-height:0; }
#onError:empty{ display:none; }
#online .ongrid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:720px){ #online .ongrid{ grid-template-columns:1fr; } }
#online h5{ margin:14px 0 8px; font:700 11px var(--sans); letter-spacing:.08em; color:var(--signal); }
#online h5:first-child{ margin-top:0; }
#online .onmodes{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px; }
#online .onmode{ background:var(--panel2); border:1px solid var(--line); color:var(--text-dim); padding:10px 4px; cursor:pointer; text-align:center; }
#online .onmode b{ display:block; font:800 16px var(--sans); color:var(--text); }
#online .onmode span{ font:600 9px var(--sans); letter-spacing:.1em; }
#online .onmode.on{ border-color:var(--signal); background:rgba(232,169,58,.12); }
#online .onmode.on b{ color:var(--signal); }
#online .onbig{ display:block; width:100%; padding:12px; margin:0 0 6px; cursor:pointer; background:var(--signal); color:#1a1408; border:0; font:800 14px var(--sans); letter-spacing:.06em; }
#online .onbig:hover{ filter:brightness(1.08); }
#online .onbig:disabled{ opacity:.45; cursor:not-allowed; }
#online .onbtn{ display:block; width:100%; padding:9px; margin:0 0 6px; cursor:pointer; background:var(--panel2); border:1px solid var(--line); color:var(--text); font:700 11px var(--sans); letter-spacing:.06em; }
#online .onbtn:hover{ border-color:var(--signal-dim); }
#online .onrow{ display:flex; gap:6px; margin-bottom:6px; align-items:center; }
#online .onrow input, #online .onrow select{ flex:1; min-width:0; background:var(--ink); border:1px solid var(--line); color:var(--text); padding:8px 10px; font:12px var(--sans); }
#online .onrow input:focus{ outline:none; border-color:var(--signal-dim); }
#online .onrow button{ background:var(--panel2); border:1px solid var(--line); color:var(--text); padding:8px 12px; cursor:pointer; font:700 11px var(--sans); letter-spacing:.05em; }
#online .onrow button:hover{ border-color:var(--signal-dim); }
#online .onrow .onbig, #online .onrow .onbtn{ margin:0; flex:1; }
#online .onhint{ font:11px/1.5 var(--sans); color:var(--steel-dim); margin:4px 0 6px; }
#online .onsearch{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--signal-dim); background:rgba(232,169,58,.08); margin-bottom:6px; font:700 12px var(--sans); color:var(--signal); }
#online .onsearch i{ width:10px; height:10px; border-radius:50%; background:var(--signal); animation:onpulse 1s infinite ease-in-out; }
#online .onsearch button{ margin-left:auto; background:none; border:1px solid var(--line); color:var(--text-dim); padding:4px 10px; cursor:pointer; font:700 10px var(--sans); }
@keyframes onpulse{ 50%{ opacity:.25; transform:scale(.7); } }
#online .hide{ display:none !important; }
#online .onlobby{ border:1px solid var(--line); background:rgba(0,0,0,.2); padding:12px; margin-top:8px; }
#online .onlhead{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
#online .onlhead span{ font:700 10px var(--sans); letter-spacing:.1em; color:var(--text-dim); }
#online .onlhead b{ font:800 24px var(--mono); letter-spacing:.2em; color:var(--signal); }
#online .onlhead button{ margin-left:auto; background:none; border:1px solid var(--line); color:var(--text-dim); padding:4px 10px; cursor:pointer; font:700 10px var(--sans); }
#online .onchk{ font:700 11px var(--sans); color:var(--text-dim); display:flex; gap:5px; align-items:center; white-space:nowrap; }
#online .onteams{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; }
#online .onteam{ border:1px solid var(--line); padding:8px; }
#online .onteam h6{ margin:0 0 6px; font:700 10px var(--sans); letter-spacing:.1em; color:var(--text-dim); }
#online .onteam[data-team="A"] h6{ color:#7fb3d6; }
#online .onteam[data-team="B"] h6{ color:#d69a6b; }
#online .ontlist{ min-height:40px; }
#online .onpl{ display:flex; align-items:center; gap:6px; font:12px var(--sans); color:var(--text); padding:3px 0; }
#online .onpl em{ font-style:normal; font:700 9px var(--mono); color:var(--signal); }
#online .onpl button{ margin-left:auto; background:none; border:0; color:var(--steel-dim); cursor:pointer; font:12px var(--sans); }
#online .onpl button:hover{ color:var(--danger); }
#online .onteam > button{ width:100%; margin-top:6px; background:var(--panel2); border:1px solid var(--line); color:var(--text-dim); padding:5px; cursor:pointer; font:700 10px var(--sans); }
#online .onparty{ border:1px solid var(--line); background:rgba(0,0,0,.2); padding:8px 10px; margin-bottom:6px; min-height:28px; }
#online .onch{ color:var(--steel-dim); font-weight:600; letter-spacing:0; }
.chatlog{ height:170px; overflow-y:auto; border:1px solid var(--line); background:var(--ink); padding:6px 8px; margin-bottom:6px; font:12px/1.45 var(--sans); color:var(--text); }
.chatlog .cl{ word-wrap:break-word; }
.chatlog .cl b{ color:var(--signal); font-weight:700; margin-right:5px; }
.chatlog .cl.sys{ color:var(--steel-dim); font-style:italic; }
#inviteToast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:280; display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--signal); padding:12px 14px; box-shadow:0 10px 40px rgba(0,0,0,.6); font:13px var(--sans); color:var(--text); }
#inviteToast.hide{ display:none; }
#inviteToast button{ background:var(--panel2); border:1px solid var(--line); color:var(--text); padding:6px 12px; cursor:pointer; font:700 11px var(--sans); }
#inviteToast #inviteYes{ background:var(--signal); color:#1a1408; border-color:var(--signal); }
/* in-match chat */
#mchat{ position:absolute; left:14px; bottom:120px; width:min(420px, 60vw); pointer-events:none; z-index:7; }
#mchatLog .cl{ font:12px/1.4 var(--sans); color:#e9e3d6; text-shadow:0 1px 2px #000; margin-top:2px; transition:opacity .4s; }
#mchatLog .cl b{ margin-right:5px; }
#mchatLog .cl b.ta{ color:#8cc3e8; } #mchatLog .cl b.tb{ color:#e8a882; }
#mchatLog .cl i{ font-style:normal; color:#bdb5a5; margin-right:4px; font-size:10px; }
#mchatIn{ pointer-events:auto; width:100%; box-sizing:border-box; margin-top:6px; background:rgba(10,9,8,.85); border:1px solid var(--signal-dim); color:var(--text); padding:7px 9px; font:12px var(--sans); }
#mchatIn.hide{ display:none; }
#online #onBack{ margin-top:14px; }
#online .alink{ display:block; background:none; border:0; padding:0; color:var(--text-dim); font:12px var(--sans); cursor:pointer; text-align:left; }
#online .alink:hover{ color:var(--text); text-decoration:underline; }