/* ===================================================================================
   WarRoom — one stylesheet. The original MW2-menu green identity on a clean, simple base.
   Order: tokens → base → layout → nav → components → pages → cosmetics (verbatim) → responsive.
   Rules: one accent (MW2 menu green), smoky black/olive surfaces, stencil headings, square-ish corners, faint grain.
   =================================================================================== */
:root {
  --bg: #090a08; --bg2: #0f110c; --surface: #13150f; --surface2: #1a1d15; --surface3: #22261b;
  --line: rgba(220,230,200,.09); --line2: rgba(220,230,200,.17); --line3: rgba(220,230,200,.28);
  --text: #ecebe2; --dim: #9a9c8c; --faint: #5d6052;
  --acc: #9bd22b; --acc2: #c4f05a; --acc-ink: #0b0d08;          /* MW2 menu green: the one accent */
  --od: #5f6d3a; --od2: #7a8a48; --green: #9bd22b;              /* olive support; green = success, verified, wins */
  --gold: #e8c547; --gold2: #c9962b; --red: #e5484d; --purple: #a98bff; --blue: #6fa8ff;
  --silver: #c7ccd1; --bronze: #c98a4f;
  --head: "Saira Stencil One", "Saira Condensed", Impact, sans-serif;
  --stencil: "Saira Stencil One", "Saira Condensed", Impact, sans-serif;
  --body: "Barlow", system-ui, -apple-system, sans-serif;
  --label: "Saira Condensed", "Barlow Condensed", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --r: 6px; --r2: 4px; --rpill: 4px;
  --sh1: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.6);
  --sh2: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -18px rgba(0,0,0,.7);
  --glow: 0 0 0 1px rgba(155,210,43,.35), 0 0 24px rgba(155,210,43,.15);
  --cut: 0px; --chip: none; --weave: none; --noise: none; --grime: none; --hazard: none; --brackets: none; --brackets2: none;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { color: var(--text); font: 500 16px/1.5 var(--body); min-height: 100vh; background: radial-gradient(1200px 700px at 70% -10%, rgba(120,130,90,.20), transparent 60%), radial-gradient(900px 600px at 0% 100%, rgba(80,90,60,.18), transparent 60%), var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; }
body::before { /* faint film grain + scanlines, like the MW2 menus */ content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .22; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
a { color: var(--acc2); text-decoration: none; }
a:hover { color: #fff; }
::selection { background: var(--acc); color: var(--acc-ink); }
h1, h2, h3, h4 { margin: 0; font-family: var(--head); font-weight: 700; letter-spacing: .3px; line-height: 1.1; }
h3 { font-size: 18px; }
p { margin: 0 0 10px; }
small, .small { font-size: 12.5px; }
.muted { color: var(--dim); }
.mono { font-family: var(--mono); font-size: .92em; }
.center { text-align: center; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hide-phone { }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px 48px; }
img { max-width: 100%; }
svg.chart { width: 100%; height: auto; display: block; }

/* ---------- top bar ---------- */
/* Installed app on iPhone: the status bar is see-through, so pad the sticky header below it (0 in a normal tab). */
.topbar { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top); background: rgba(11,13,16,.82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); }
.topbar .inner { max-width: 1180px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 18px; height: 64px; min-width: 0; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font: 400 24px/1 var(--stencil); letter-spacing: 1.5px; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.brand svg { flex: none; }
.who { flex: none; }
.brand:hover { color: #fff; }
.brand svg { width: 32px; height: 32px; }
.brand b { color: var(--acc-ink); background: var(--acc); font: 700 12px/1 var(--label); padding: 4px 7px; border-radius: 6px; letter-spacing: 1px; }
.who { display: flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; font: 700 14px var(--label); }
.who .sub { display: block; font: 600 11px var(--label); color: var(--dim); letter-spacing: .6px; text-transform: uppercase; }
.who .mini { width: 110px; margin-top: 4px; }
.who .av, .av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--surface3); border: 1px solid var(--line2); }
.who .btn { padding: 8px 14px; }
.coinchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--rpill); background: var(--surface2); border: 1px solid var(--line2); color: var(--gold); font: 700 13px var(--label); }
.lockchip { color: var(--dim); }
.bell { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--line2); }
.bell i, .bell b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font: 700 11px/18px var(--label); font-style: normal; text-align: center; }

/* ---------- main nav: top on desktop, bottom bar on phones ---------- */
.bnav { display: flex; align-items: center; gap: 2px; }
.bnav a { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--rpill); color: var(--dim); font: 700 13px var(--label); letter-spacing: .8px; text-transform: uppercase; transition: background .15s, color .15s; }
.bnav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bnav a:hover { color: #fff; background: rgba(255,255,255,.05); }
.bnav a.on { color: var(--acc-ink); background: var(--acc); }
.subnav { display: flex; gap: 6px; margin: 16px 0 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 9px 14px; border-radius: var(--rpill); background: var(--surface); border: 1px solid var(--line); color: var(--dim); font: 700 12.5px var(--label); letter-spacing: .6px; text-transform: uppercase; }
.subnav a.on { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); }
.moresheet { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: flex-end; padding: 72px 16px 0; }
.moresheet .sheet { width: min(640px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: var(--sh2); }
.moresheet .sheet a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: var(--r2); color: var(--text); font: 700 14px var(--label); letter-spacing: .4px; }
.moresheet .sheet a:hover { background: var(--surface2); }
.moresheet .sheet a b { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--surface3); font-size: 17px; }
.moresheet .sheet a small { display: block; margin-top: 1px; color: var(--dim); font: 500 12px var(--body); letter-spacing: 0; }

/* ---------- live ticker ---------- */
.ticker { display: flex; align-items: center; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--rpill); background: var(--surface); overflow: hidden; }
.ticker[hidden] { display: none; }
.ticker .lbl { flex: none; font: 700 11px var(--label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--acc-ink); background: var(--acc); padding: 7px 12px 7px 14px; border-radius: var(--rpill); margin: 3px; }
.ticker .track { flex: 1; overflow: hidden; white-space: nowrap; font: 600 12.5px var(--label); letter-spacing: .8px; color: var(--dim); padding: 7px 0; }
.ticker .track > div { display: inline-block; padding-left: 100%; animation: tick 50s linear infinite; }
.ticker .track b { color: var(--text); }
@keyframes tick { to { transform: translateX(-100%); } }

/* ---------- page header, layout ---------- */
h1.page { font: 400 32px/1 var(--head); letter-spacing: 2px; text-transform: uppercase; margin: 22px 0 4px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h1.page small { font: 600 13px var(--body); color: var(--dim); letter-spacing: 0; text-transform: none; }
.crumb { margin: 16px 0 4px; font-size: 14px; }
.grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.grid.even { grid-template-columns: 1fr 1fr; }
.grid > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel { position: relative; margin-top: 14px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh1); overflow: hidden; }
.grid > div > .panel, .grid > .panel { margin-top: 0; }
.panel::before, .panel::after { display: none; }
.panel h2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 16px 11px; font: 400 17px/1 var(--head); letter-spacing: 1.8px; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, rgba(155,210,43,.12), transparent 70%); box-shadow: inset 3px 0 0 var(--acc); border-bottom: 1px solid var(--line); }
.panel h2 small { font: 500 12px var(--body); color: var(--faint); letter-spacing: 0; text-transform: none; }
.panel h2 small a { color: var(--acc2); }
.panel.gold { border-color: rgba(227,185,76,.25); }
.panel.gold h2 { color: var(--gold); }
.pad { padding: 16px; }
.empty { padding: 28px 16px; text-align: center; color: var(--dim); font-size: 14.5px; }
.empty .btn { margin-top: 10px; }
.note { margin: 10px 0; padding: 12px 14px; border-radius: var(--r2); background: rgba(155,210,43,.07); border: 1px solid rgba(155,210,43,.18); color: #d9dccb; font-size: 14px; }
.note::before { display: none; }
.note.announce { background: rgba(227,185,76,.12); border-color: rgba(227,185,76,.35); color: var(--text); font-weight: 600; }
.explain { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r2); background: var(--surface); border: 1px solid var(--line); color: var(--dim); font-size: 13.5px; line-height: 1.45; }
.explain .qi { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface3); color: var(--acc2); font: 700 12px var(--label); }
.explain b { color: var(--text); }
footer { margin-top: 48px; padding: 20px 0 8px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.hits { white-space: nowrap; } .hits i { font-style: normal; font-family: var(--mono); color: var(--dim); }

/* ---------- hero (HQ) ---------- */
.hero { position: relative; overflow: hidden; margin-top: 14px; padding: 36px 28px 28px; border-radius: var(--r); border: 1px solid var(--line2); background: linear-gradient(110deg, #181c12 0%, #101309 55%, #0b0d08 100%); box-shadow: var(--sh2); }
.hero::before, .hero::after { display: none; }
.hero .topo { position: absolute; right: -60px; top: -40px; width: 560px; opacity: .14; pointer-events: none; filter: sepia(1) saturate(.4) brightness(1.6); animation: spin 120s linear infinite; transform-origin: 70% 48%; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero .kicker { position: relative; font: 700 12px var(--label); letter-spacing: 2px; color: var(--acc); text-transform: uppercase; }
.hero .kicker::before { content: none; }
.hero h1 { position: relative; margin: 8px 0 10px; font: 400 clamp(40px, 7vw, 72px)/.95 var(--head); letter-spacing: 2px; text-shadow: 0 2px 0 #000; text-transform: uppercase; }
.hero h1 em { font-style: normal; color: var(--acc); }
.hero.compact { padding: 18px 18px 16px; }
/* signed-in HQ: the daily strip is the first thing, the hero becomes a slim banner */
.daily { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.dtile { display: grid; align-content: start; gap: 4px; padding: 12px 12px 10px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface); color: var(--text); min-width: 0; position: relative; }
.dtile:hover { border-color: var(--acc); color: var(--text); }
.dtile.scan { background: linear-gradient(135deg, rgba(155,210,43,.18), rgba(155,210,43,.04)); border-color: rgba(155,210,43,.5); }
.dtile b { font: 400 17px/1.1 var(--head); text-transform: uppercase; letter-spacing: .5px; }
.dtile span { font-size: 12px; color: var(--dim); line-height: 1.3; } .dtile span u { color: var(--acc); text-decoration: none; }
.dtile .bar { display: block; height: 4px; border-radius: 2px; background: var(--surface3); margin-top: 6px; overflow: hidden; } .dtile .bar i { display: block; height: 100%; background: var(--acc); }
.hero.slim { padding: 14px 18px; } .hero.slim h1 { display: none; } .hero.slim .hstats { display: none; } .hero.slim .row { margin-top: 8px; }
@media (max-width: 720px) { .daily { grid-template-columns: 1fr; } .dtile b { font-size: 16px; } }
.hero.compact h1 { font-size: clamp(26px, 5.5vw, 40px); margin: 4px 0 12px; }
.hero.compact .hstats { margin-top: 14px; gap: 18px; }
.hero.compact .hstats div b { font-size: 22px; }
.hero p { position: relative; max-width: 520px; color: var(--dim); margin: 0 0 18px; font-size: 16px; }
.hero .row { position: relative; gap: 8px; flex-wrap: wrap; }
.hero .hstats { position: relative; display: flex; gap: 26px; margin-top: 24px; flex-wrap: wrap; }
.hero .hstats div b { display: block; font: 700 32px/1 var(--head); color: #fff; font-variant-numeric: tabular-nums; }
.hero .hstats div span { font: 600 11px var(--label); letter-spacing: 1.4px; color: var(--faint); text-transform: uppercase; }
.lbgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lbgrid.six { grid-template-columns: repeat(6, 1fr); }
.lbgrid .btn { justify-content: center; text-align: center; padding: 11px 10px; font-size: 12.5px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; border: 0; border-radius: var(--r2); padding: 11px 18px; min-height: 42px; font: 700 14px var(--label); letter-spacing: .8px; text-transform: uppercase; color: var(--acc-ink); background: var(--acc); transition: transform .08s, filter .15s, background .15s; clip-path: none; text-decoration: none; }
.btn:hover { color: var(--acc-ink); filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--surface2); color: var(--text); border: 1px solid var(--line2); }
.btn.ghost:hover { background: var(--surface3); color: #fff; border-color: var(--line3); }
.btn.gold, .btn.orange { background: var(--gold); color: var(--acc-ink); }
.btn.red { background: var(--red); color: #fff; }
.btn.danger { background: transparent; color: var(--red); border: 1px solid rgba(229,72,77,.35); }
.btn.twitch { background: #9146ff; color: #fff; } .btn.discord { background: #5865f2; color: #fff; }
.btn.sm { font-size: 12.5px; padding: 7px 12px; min-height: 36px; border-radius: 9px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; filter: grayscale(.6); }
.btn.playbtn { font-size: 18px; padding: 14px 30px; min-height: 52px; letter-spacing: 1.5px; box-shadow: var(--glow); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--acc2); outline-offset: 2px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.startbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------- badges, tags, names ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--rpill); border: 1px solid var(--line2); background: var(--surface2); color: var(--dim); font: 700 11px var(--label); letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.badge.green { color: var(--green); border-color: rgba(155,210,43,.4); background: rgba(155,210,43,.1); }
.badge.orange { color: var(--gold); border-color: rgba(227,185,76,.4); background: rgba(227,185,76,.1); }
.badge.red { color: #ff7b7f; border-color: rgba(229,72,77,.4); background: rgba(229,72,77,.1); }
.badge.blue { color: var(--acc2); border-color: rgba(155,210,43,.4); background: rgba(155,210,43,.1); }
.tag { font: 700 .92em var(--label); color: var(--acc); letter-spacing: .3px; }
.pn, .clanname { color: var(--text); font-weight: 700; }
.clanname { display: inline-flex; align-items: center; gap: 8px; }
.live { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--red); color: #fff; font: 700 10px var(--label); letter-spacing: 1px; }
.trust, .ops-index { font: 700 11px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.form-strip { display: inline-flex; gap: 3px; vertical-align: middle; }
.form-strip i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font: 700 10px var(--label); font-style: normal; color: #111; }
.form-strip .f-W { background: var(--green); } .form-strip .f-L { background: var(--red); color: #fff; } .form-strip .f-D { background: var(--dim); }
td small.up, td small.down { display: block; font: 700 10px var(--label); }
td small.up { color: var(--green); } td small.down { color: #ff7b7f; }

/* ---------- forms ---------- */
label { display: block; margin: 12px 0 6px; font: 700 11.5px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
input, select, textarea { width: 100%; font: 500 16px var(--body); color: var(--text); background: var(--bg2) !important; border: 1px solid var(--line2) !important; border-radius: var(--r2) !important; padding: 11px 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: var(--acc) !important; box-shadow: 0 0 0 3px rgba(155,210,43,.18) !important; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--acc); vertical-align: middle; }
input[type=file] { padding: 9px; font-size: 14px; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%) !important; background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; padding-right: 34px; }
textarea { resize: vertical; min-height: 44px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.fields.three { grid-template-columns: repeat(3, 1fr); }
.sizes { display: flex; gap: 6px; }
.sizes button { flex: 1; padding: 10px; border-radius: var(--r2); background: var(--surface2); border: 1px solid var(--line2); color: var(--text); font: 700 13px var(--label); cursor: pointer; }
.sizes button.on { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.class-public-toggle { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; text-transform: none; letter-spacing: 0; font: 500 14px var(--body); color: var(--text); }
.cmp-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border-radius: var(--rpill); border: 1px solid var(--line2); background: var(--surface2); font: 600 13px var(--body); color: var(--text); cursor: pointer; }
.cmp-pick input { width: 16px; height: 16px; margin: 0; }
.cmp-pick.off { opacity: .5; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { font: 700 11px var(--label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); background: transparent; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255,255,255,.025); }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num b { color: #fff; }
td.rank, .rank { font: 700 16px var(--head); color: var(--faint); }
tr.gold td { background: linear-gradient(90deg, rgba(227,185,76,.10), transparent 60%); } tr.gold .rank { color: var(--gold); }
tr.silver td { background: linear-gradient(90deg, rgba(199,204,209,.07), transparent 60%); } tr.silver .rank { color: var(--silver); }
tr.bronze td { background: linear-gradient(90deg, rgba(201,138,79,.09), transparent 60%); } tr.bronze .rank { color: var(--bronze); }
th.sortcol { color: var(--acc2); }
table.counts td.yes { color: var(--green); font-weight: 700; text-align: center; } table.counts td.no { color: var(--faint); text-align: center; } table.counts th { text-align: center; } table.counts td:first-child, table.counts th:first-child { text-align: left; }
.countsfor { margin-top: 10px; font-size: 13px; color: var(--dim); }

/* ---------- phone card rows (clan directory, ladder, rosters) ---------- */
.only-phone { display: none; }
.cardlist .crow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); }
.cardlist .crow:last-child { border-bottom: 0; }
.cardlist .crank { flex: none; width: 22px; text-align: center; font: 700 15px var(--head); color: var(--dim); }
.cardlist .crank.gold { color: var(--gold); } .cardlist .crank.silver { color: var(--silver); } .cardlist .crank.bronze { color: var(--bronze); }
.cardlist .cmain { flex: 1; min-width: 0; }
.cardlist .cname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardlist .csub { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardlist .cbadges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; }
.cardlist .cnum { flex: none; text-align: right; line-height: 1.1; }
.cardlist .cnum b { display: block; font: 700 18px var(--head); } .cardlist .cnum small { font-size: 11px; font-weight: 700; } .cardlist .cnum span { display: block; font: 600 10px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.cardlist .cnum small.up { color: var(--green); } .cardlist .cnum small.down { color: var(--red); }
/* finished match: result first, setup panels after */
.war-finished > div:first-child { display: flex; flex-direction: column; }
.war-finished .panel.proof { order: -1; }
/* weapon rows in the stat scanner: name on one line, numbers on the next (fits a phone, no sideways scroll) */
.wrow { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.wrow:last-child { border-bottom: 0; }
.w-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 6px; align-items: center; }
.w-nums input { padding: 9px 6px; text-align: center; font-size: 15px; }
.w-nums .btn { padding: 0 10px; min-height: 40px; }
/* offline banner + update toast */
.netbar { margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r2); background: rgba(216,67,47,.12); border: 1px solid rgba(216,67,47,.35); color: var(--text); font-size: 13px; }
.toast.act { display: flex; align-items: center; gap: 10px; }
/* ---------- modal, toast, HANDLER button ---------- */
.modal-bg { position: fixed; inset: 0; z-index: 80; background: rgba(5,6,8,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; padding: 0; overflow-y: auto; }
.modal { width: min(600px, 100%); max-height: 94dvh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r) var(--r) 0 0; box-shadow: var(--sh2); overflow: hidden; }
.modal::before { display: none; }
.modal .panel { margin: 0; border: 0; border-radius: 0; box-shadow: none; flex: none; }
.modal .panel h2 { font: 700 20px/1.1 var(--head); color: var(--text); letter-spacing: .2px; text-transform: none; padding: 18px 18px 14px; }
.modal .pad { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 18px 16px; }
.modal .foot { flex: none; position: relative; z-index: 1; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--line); background: var(--surface); }
.modal [hidden] { display: none !important; }
.toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: var(--r2); background: #1f242b; border: 1px solid var(--line2); border-left: 3px solid var(--green); color: var(--text); font: 600 14px var(--body); box-shadow: var(--sh2); animation: toastin .18s ease-out; }
.toast.err { border-left-color: var(--red); }
.xptoast { position: fixed; left: 50%; bottom: calc(132px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 89; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: var(--r2); background: #1f242b; border: 1px solid var(--line2); border-left: 3px solid var(--gold); color: var(--gold); font: 600 13px var(--body); box-shadow: var(--sh2); animation: toastin .18s ease-out; pointer-events: none; }
.levelup-pop { position: fixed; left: 50%; top: calc(72px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 88; width: min(340px, calc(100% - 32px)); padding: 16px; text-align: center; background: var(--surface); border: 1px solid rgba(255,210,74,.45); border-radius: var(--r); box-shadow: var(--sh2); animation: toastin .25s ease-out; pointer-events: none; } /* never blocks a tap underneath; the button dismisses it */
.levelup-pop .btn { pointer-events: auto; }
.levelup-pop h3 { margin: 6px 0 4px; font: 400 26px/1 var(--head); text-transform: uppercase; letter-spacing: 1px; color: #fff; }
.levelup-pop .btn { margin-top: 10px; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } }
.askfab { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--rpill); background: var(--surface2) !important; color: var(--text) !important; border: 1px solid var(--line2); box-shadow: var(--sh2) !important; font: 700 13px var(--label); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; clip-path: none; }
.askfab span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--acc) !important; color: var(--acc-ink) !important; font-weight: 800; clip-path: none; }
.askfab:hover { background: var(--surface3) !important; }
.asklog { display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
.asklog .q { justify-self: end; max-width: 85%; padding: 10px 12px; border-radius: 14px 14px 4px 14px; background: var(--acc); color: var(--acc-ink); }
.asklog .a { justify-self: start; max-width: 90%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface2); white-space: pre-wrap; }

/* ---------- progression ---------- */
.progress, .xpbar { height: 8px; border-radius: 4px; background: var(--surface3); overflow: hidden; }
.progress i, .xpbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold2), var(--gold)); }
.xpbar.lg { height: 12px; border-radius: 6px; }
.xpnums { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--dim); }
.rankline { display: flex; align-items: center; gap: 14px; }
.rsub { font: 700 11px var(--label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.rname { font: 700 26px/1 var(--head); text-transform: uppercase; color: var(--gold); }
.insignia { flex: none; }
.bigstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.bigstats div { padding: 14px 10px; text-align: center; background: var(--surface); }
.bigstats b { display: block; font: 700 26px/1 var(--head); color: #fff; font-variant-numeric: tabular-nums; }
.bigstats span { display: block; margin-top: 4px; font: 700 10px var(--label); color: var(--faint); text-transform: uppercase; letter-spacing: 1.2px; }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 14px; }
.medal { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; text-align: center; border-radius: var(--r2); background: var(--surface2); border: 1px solid var(--line); }
.medal svg { width: 52px; height: 60px; display: block; }
.medal.locked { opacity: .35; filter: grayscale(1); }
.medal b { font: 700 12px var(--label); letter-spacing: .4px; text-transform: uppercase; }
.medal span { font-size: 11px; color: var(--dim); line-height: 1.3; }
.cotw { padding: 16px; display: grid; gap: 6px; }
.crown { color: var(--gold); }
.levelup { color: var(--gold); font-weight: 800; }

/* ---------- comms, match cards, shouts ---------- */
.shouts { max-height: 320px; overflow: auto; padding: 6px 0; }
.shout { padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.shout time { float: right; margin-left: 10px; font: 500 11px var(--mono); color: var(--faint); }
.mcard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mcard .side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mcard .side.r { justify-content: flex-end; text-align: right; }
.mcard .side a { color: #fff; font: 700 18px/1 var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard .side.lose a { color: var(--faint); }
.mcard .score { font: 700 24px/1 var(--head); text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.mcard .score small { display: block; margin-top: 3px; font: 600 10px var(--label); color: var(--faint); letter-spacing: 1.2px; text-transform: uppercase; }
.mcard .w { color: var(--green); } .mcard .l { color: var(--faint); }
.profile-head { display: flex; gap: 18px; align-items: center; padding: 20px 16px; flex-wrap: wrap; }
.profile-head > img, .pavatar > img { width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--line3); object-fit: cover; }
.pavatar { flex: none; display: grid; justify-items: center; gap: 6px; }
.pav-empty { width: 100%; height: 100%; min-width: 64px; min-height: 64px; border-radius: 50%; border: 2px dashed var(--line3); display: grid; place-items: center; font: 700 30px var(--head); color: var(--faint); } .pavatar .pav-empty { width: 100px; height: 100px; }
.stakes { font-size: 13px; color: var(--dim); border-top: 1px solid var(--line); } .stakes b { color: var(--gold); }
.panel.comms .shouts { max-height: 180px; overflow: auto; }
.payline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; font-size: 13px; color: var(--dim); } .payline b { color: var(--gold); font: 700 12px var(--label); letter-spacing: 1px; text-transform: uppercase; } .payline .insignia { flex: none; }
.pav-pick { font: 700 11px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--acc); }
/* player emblems (shop): the disc next to a name */
.pe { display: inline-grid; place-items: center; vertical-align: middle; flex: none; position: relative; border-radius: 50%; }
.pe svg { width: 100%; height: 100%; display: block; }
@keyframes wr-ember { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
.pe svg .gl { animation: wr-ember 2.6s ease-in-out infinite; } /* no transform-origin here: it would re-anchor the group's own SVG transform and shift the insignia off-center */
.pe-hot svg { filter: drop-shadow(0 0 3px rgba(255,181,46,.55)); }
.pe-x-dev svg { filter: drop-shadow(0 0 5px rgba(255,210,74,.8)); }
.crestgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.crest { display: grid; justify-items: center; gap: 6px; padding: 16px 10px 12px; text-align: center; border: 1px solid var(--line); border-radius: var(--r); background: radial-gradient(90% 60% at 50% 30%, rgba(255,181,46,.07), transparent 70%), rgba(255,255,255,.02); }
.crest.on { border-color: var(--acc); } .crest.locked .pe { filter: grayscale(.85) brightness(.55); } .crest.locked .pe svg .gl { animation: none; }
.crest .cname { font: 400 16px/1.1 var(--head); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
.crest .csub { font: 600 11px var(--label); letter-spacing: .8px; text-transform: uppercase; color: var(--faint); }
.crest .btn, .crest .lockchip { margin-top: 4px; } .lockchip.center { align-items: center; text-align: center; }
.btn.gold { background: var(--gold); color: #1a1200; border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .pe svg .gl { animation: none !important; } }
.profile-head h1 { margin: 0; font: 700 32px/1.05 var(--head); text-transform: uppercase; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.emblem { flex: none; }

/* ---------- Armory: builds, classes, catalog, compare ---------- */
.game-switch { display: flex; align-items: center; gap: 4px; margin: 14px 0 6px; padding: 4px; border-radius: var(--rpill); background: var(--surface); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.game-switch-label { padding: 0 12px; font: 700 10.5px var(--label); letter-spacing: 1.4px; color: var(--faint); text-transform: uppercase; }
.game-switch button { padding: 9px 16px; border: 0; border-radius: var(--rpill) !important; background: transparent !important; color: var(--dim); font: 700 12.5px var(--label); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; clip-path: none; }
.game-switch button.active { background: var(--acc) !important; color: var(--acc-ink) !important; }
.build-form, .class-form { display: grid; gap: 4px; }
.build-grid, .class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.build-card, .class-card { position: relative; padding: 16px; border-radius: var(--r); background: var(--surface2); border: 1px solid var(--line); box-shadow: var(--sh1); min-width: 0; transition: border-color .15s, transform .15s; }
.build-card::after, .class-card::after { display: none; }
.build-card:hover, .class-card:hover { border-color: var(--line3); }
.build-card h3, .class-card h3 { margin: 8px 0 2px; font: 700 20px/1.1 var(--head); }
.build-card h3 a, .class-card h3 a { color: var(--text); }
.build-card-top, .class-card-top, .build-meta, .build-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.build-weapon { font: 700 14px var(--label); letter-spacing: .6px; text-transform: uppercase; color: var(--acc) !important; }
.build-check { margin: 6px 0 2px; }
.build-check .badge { transform: none; }
.build-rating { font: 700 13px var(--label); color: var(--gold); } .build-rating small { color: var(--faint); font-weight: 500; }
.build-code { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--bg2); border: 1px dashed var(--line2); }
.build-code span { font: 700 10px var(--label); letter-spacing: 1.2px; color: var(--faint); }
.build-code code { font: 600 13px var(--mono); color: var(--acc2); overflow-wrap: anywhere; }
.build-attachments, .class-attachments { display: grid; gap: 4px; margin-top: 10px; }
.build-attachments div, .class-attachments div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--bg2); font-size: 13px; }
.build-attachments span, .class-attachments span { color: var(--faint); font: 700 10.5px var(--label); letter-spacing: .8px; text-transform: uppercase; align-self: center; }
.build-attachments b, .class-attachments b { text-align: right; font-weight: 600; }
.build-notes, .strat-body, .lfg-note, .feed-text { margin: 10px 0 0; color: #d7d3c8; font-size: 14.5px; white-space: pre-line; overflow-wrap: anywhere; }
.build-actions { margin-top: 12px; justify-content: flex-start; }
.build-actions .rate-row { display: inline-flex; gap: 6px; align-items: center; }
.build-actions select { width: auto; min-width: 90px; padding: 7px 30px 7px 10px; font-size: 13px; }
.class-creator { font-size: 13px; margin-bottom: 8px; }
.class-weapons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.class-weapons section { min-width: 0; padding: 10px; border-radius: var(--r2); background: var(--bg2); }
.class-weapons small, .class-extras small { display: block; font: 700 10px var(--label); letter-spacing: 1.2px; color: var(--faint); text-transform: uppercase; margin-bottom: 4px; }
.class-weapons b { display: block; overflow-wrap: anywhere; color: var(--acc2) !important; font: 700 15px var(--head); }
.class-weapons code { display: block; margin-top: 8px; overflow-wrap: anywhere; color: var(--acc2); font-size: 11.5px; }
.class-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.class-extras div { min-width: 0; padding: 8px 10px; border-radius: var(--r2); background: var(--bg2); }
.class-extras b { display: block; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
.class-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.class-editor-slot { padding: 14px; border-radius: var(--r2); background: var(--bg2); border: 1px solid var(--line); }
.class-editor-slot h3 { font: 700 12px var(--label); letter-spacing: 1.4px; color: var(--acc); text-transform: uppercase; }
.weapon-editor select, .weapon-editor input { width: 100%; }
.weapon-editor [data-we-free], .weapon-editor [data-we-code] { margin-top: 8px; }
.we-info { margin: 8px 0 4px; font-size: 12.5px; line-height: 1.5; }
.att-list { display: grid; gap: 6px; margin-top: 6px; }
.att-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; }
.att-row.free { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.att-slot { color: var(--faint); font: 700 10.5px var(--label); letter-spacing: .8px; text-transform: uppercase; }
.att-count { justify-self: end; color: var(--dim); font: 600 11px var(--mono); }
.att-count.over { color: var(--red); }
input.read-ok { border-color: rgba(155,210,43,.8) !important; }
input.read-miss { border-color: rgba(229,72,77,.6) !important; border-style: dashed !important; }
.build-single, .lfg-single, .feed-single { max-width: 720px; }
.cmp-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 44; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 8px 8px 14px; border-radius: var(--rpill); background: var(--surface2); border: 1px solid var(--line3); box-shadow: var(--sh2); font: 700 12px var(--label); letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.cmp-bar[hidden] { display: none; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cmp-table th, .cmp-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.cmp-table tbody th { color: var(--faint); font: 700 10px var(--label); letter-spacing: .4px; text-transform: uppercase; width: 84px; overflow-wrap: normal; }
.cmp-table tr.diff td { color: var(--acc2); background: rgba(155,210,43,.06); }
.cmp-table.vs td.better { color: var(--acc2); font-weight: 700; background: rgba(155,210,43,.08); }
.cat-list { display: grid; gap: 8px; margin-top: 12px; }
.cat-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r2); background: var(--surface2); border: 1px solid var(--line); }
.cat-row.retired { opacity: .55; }
.item-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.item-kind h3 { margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: var(--rpill); background: var(--surface2); border: 1px solid var(--line2); font-size: 13px; }
.chip button { min-width: 28px; min-height: 28px; border: 0; border-radius: 50%; background: none; color: var(--dim); cursor: pointer; }
.item-add { display: flex; gap: 8px; align-items: flex-end; } .item-add textarea { flex: 1; }
.slot-ed { margin-bottom: 10px; padding: 10px; border-radius: var(--r2); background: var(--bg2); border: 1px solid var(--line); }
.slot-ed .row { gap: 8px; flex-wrap: nowrap; } .slot-ed input { flex: 1; } .slot-ed textarea { margin-top: 6px; width: 100%; }
.ai-read { display: grid; gap: 6px; padding: 12px 14px; margin-bottom: 4px; border-radius: var(--r2); background: rgba(155,210,43,.07); border: 1px solid rgba(155,210,43,.2); }
.ai-read b { font: 700 15px var(--head); color: var(--acc2); }
.ai-read .ocr:empty { display: none; }
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.showcase-card { position: relative; display: grid; gap: 8px; padding: 16px; border-radius: var(--r); background: var(--surface2); border: 1px solid var(--line); color: var(--text); box-shadow: var(--sh1); }
.showcase-card::after { display: none; }
.showcase-card:hover { border-color: var(--line3); color: var(--text); }
.showcase-rank { position: absolute; top: 12px; right: 14px; font: 700 20px var(--head); color: var(--faint); }
.showcase-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--surface3); display: grid; place-items: center; overflow: hidden; font: 700 22px var(--head); color: var(--acc); }
.showcase-avatar img { width: 100%; height: 100%; object-fit: cover; }
.showcase-name { font: 700 20px/1.1 var(--head); }
.showcase-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.showcase-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.showcase-stats div { padding: 8px; border-radius: 8px; background: var(--bg2); text-align: center; }
.showcase-stats b { display: block; font: 700 18px/1 var(--head); } .showcase-stats small { font: 700 9.5px var(--label); letter-spacing: 1px; color: var(--faint); text-transform: uppercase; }
.showcase-foot { font-size: 12.5px; color: var(--dim); }

/* ---------- Showcase on profiles ---------- */
.sc-bio { margin: 10px 0 4px; max-width: 640px; color: #d7d3c8; white-space: pre-line; overflow-wrap: anywhere; }
.sc-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; }
.sc-facts > * { display: flex; flex-direction: column; color: var(--text); }
.sc-facts small { font: 700 10px var(--label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.sc-facts b { font: 700 18px/1.1 var(--head); }
.sc-facts a:hover b { color: var(--acc2); }
.sc-socials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-medals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sc-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sc-item { margin: 0; border-radius: var(--r2); overflow: hidden; background: var(--surface2); border: 1px solid var(--line); min-width: 0; }
.sc-item img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.sc-clip { display: flex; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 16/9; background: linear-gradient(160deg, var(--surface3), var(--bg2)); color: var(--text); font: 700 13px var(--label); letter-spacing: 1px; text-transform: uppercase; }
.sc-play { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); font-size: 16px; clip-path: none; }
.sc-item figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; }
.sc-item figcaption b { flex: 1 1 100%; overflow-wrap: anywhere; }
.sc-h3 { margin: 16px 0 6px; font: 700 15px var(--head); letter-spacing: .3px; color: var(--text); }
.sc-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-follows { display: grid; gap: 4px; }
.sc-follows a { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; color: var(--text); } .sc-follows a:hover { background: var(--surface2); }
.sc-card-img { display: block; width: 100%; max-width: 360px; margin: 0 auto 10px; border-radius: var(--r2); border: 1px solid var(--line2); }

/* ---------- Combat Intel, scanner ---------- */
.scan-steps { display: flex; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.scan-steps li { flex: 1; padding: 8px 4px; text-align: center; border-radius: 8px; font: 700 11px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); background: var(--bg2); border-bottom: 3px solid var(--line2); }
.scan-steps li.on { color: var(--acc2); border-bottom-color: var(--acc); }
.scan-h { margin: 18px 0 6px; font: 700 15px var(--head); color: var(--text); }
.intel-actions { gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.itiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.itile { padding: 12px; border-radius: var(--r2); background: var(--bg2); border: 1px solid var(--line); min-width: 0; }
.itile b { display: block; font: 700 24px/1.1 var(--head); color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.itile span { display: block; margin-top: 3px; font: 700 10px var(--label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.itile small { display: block; color: var(--dim); font-size: 11.5px; margin-top: 2px; }
svg.chart .grid { stroke: var(--line2); stroke-dasharray: 3 4; } svg.chart .ax { fill: var(--faint); font: 600 10px var(--label); }
svg.chart .ln { fill: none; stroke: var(--acc); stroke-width: 2; } svg.chart .pt { fill: var(--surface); stroke: var(--acc2); stroke-width: 2; }
svg.chart .pt.win { fill: var(--green); stroke: var(--green); } svg.chart .pt.loss { fill: var(--red); stroke: var(--red); }
.report { margin: 0; padding-left: 18px; display: grid; gap: 8px; } .report li { line-height: 1.45; } .report .badge { margin-left: 4px; }
.pick-list { display: grid; gap: 4px; margin-top: 8px; max-height: 50vh; overflow: auto; }
.pick-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 10px; border-radius: var(--r2); background: var(--surface2); border: 1px solid var(--line); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.pick-row:hover { border-color: var(--acc); }
table.mh td input[type=checkbox] { width: 20px; height: 20px; }
.h2h-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; }
.h2h-side { display: grid; justify-items: center; gap: 4px; min-width: 0; } .h2h-side b { overflow-wrap: anywhere; } .h2h-side span { color: var(--dim); font-size: 12.5px; }
.h2h-mid b { display: block; font: 700 30px var(--head); color: var(--acc2); } .h2h-mid small { color: var(--faint); font: 700 10px var(--label); letter-spacing: 1px; text-transform: uppercase; }
.chance { height: 10px; border-radius: 5px; overflow: hidden; background: var(--red); } .chance i { display: block; height: 100%; background: var(--green); }
.season-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.season-top li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r2); background: var(--bg2); border: 1px solid var(--line); }
.season-top li > b { font: 700 18px var(--head); color: var(--faint); }
.season-top li.gold > b { color: var(--gold); } .season-top li.silver > b { color: var(--silver); } .season-top li.bronze > b { color: var(--bronze); }
.season-top li span { color: var(--dim); font-size: 12.5px; }
.hof { padding: 14px 0; border-bottom: 1px solid var(--line); }

/* ---------- Tactical maps ---------- */
.tac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.tac-card { display: block; overflow: hidden; border-radius: var(--r); background: var(--surface2); border: 1px solid var(--line); color: var(--text); box-shadow: var(--sh1); }
.tac-card:hover { border-color: var(--line3); color: var(--text); } .tac-card.retired { opacity: .55; }
.tac-thumb { aspect-ratio: 16/9; background: var(--bg2); display: grid; place-items: center; overflow: hidden; color: var(--faint); font: 700 11px var(--label); letter-spacing: 2px; }
.tac-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tac-meta { padding: 12px 14px; display: grid; gap: 6px; } .tac-meta b { font: 700 20px var(--head); }
.tac-map { position: relative; width: 100%; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line2); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tac-map img { display: block; width: 100%; height: auto; pointer-events: none; }
.tac-map.placing, .tac-map.draw { cursor: crosshair; outline: 2px dashed var(--acc); outline-offset: -2px; }
.tac-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; } .tac-route.on { opacity: 1; }
.tac-route polyline { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 1.6 1; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px #000); }
.pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 0; background: none; border: 0; cursor: pointer; }
.pin i { width: 12px; height: 12px; border-radius: 50%; background: var(--acc); border: 2px solid #000; box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.pin span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font: 700 10px var(--label); letter-spacing: .5px; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.72); padding: 2px 6px; border-radius: 4px; pointer-events: none; }
.tac-map.nonames .pin span { display: none; } .pin.sel i { background: #fff; transform: scale(1.4); } .pin[hidden] { display: none; }
.pin.k-buy_station i { background: var(--blue); } .pin.k-contract i { background: var(--gold); } .pin.k-vehicle i { background: var(--purple); } .pin.k-landing i { background: var(--green); } .pin.k-spawn i { background: var(--red); } .pin.k-objective i { background: #ff9f43; }
.tac-noimg { padding: 24px 12px; text-align: center; color: var(--dim); border-radius: var(--r2); background: var(--bg2); border: 1px dashed var(--line2); }
.tac-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tac-info, .tac-routebar { margin-top: 8px; padding: 10px 12px; border-radius: var(--r2); background: var(--bg2); border: 1px solid var(--line); }
.tac-routebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tac-info[hidden], .tac-routebar[hidden] { display: none; }
.poi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 8px; }
.poi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--r2); background: var(--surface2); border: 1px solid var(--line); color: var(--text); text-align: left; font: inherit; cursor: pointer; min-height: 44px; }
.poi-row small { flex-basis: 100%; } .poi-row[hidden] { display: none; }
.strat-list { display: grid; gap: 10px; margin-top: 12px; }
.strat { padding: 14px; border-radius: var(--r); background: var(--surface2); border: 1px solid var(--line); } .strat[hidden] { display: none; }
.strat h3 { margin: 8px 0 6px; font: 700 19px var(--head); }
.tac-upload { min-height: 60px; margin-bottom: 6px; } .tac-upload img { width: 100%; max-height: 180px; object-fit: contain; border-radius: var(--r2); border: 1px solid var(--line2); }

/* ---------- Community feed ---------- */
.feed-layout > div { min-width: 0; }
.feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; margin-top: 12px; align-items: start; }
.composer { padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line2); display: grid; gap: 8px; }
.composer textarea { width: 100%; }
.composer:not(.open) textarea { height: 46px; min-height: 0; resize: none; }
.composer:not(.open) .composer-more { display: none; }
.composer-more { margin-top: 8px; }
.composer-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .composer-row select { flex: 1 1 140px; width: auto; }
.composer-prev img { max-height: 120px; border-radius: 8px; border: 1px solid var(--line2); margin-right: 8px; vertical-align: middle; }
.feed-filters { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.feed-filters::-webkit-scrollbar { display: none; }
.feed-sep { flex: none; width: 1px; height: 22px; background: var(--line2); }
.feed-tabs { display: flex; flex: none; gap: 4px; margin: 0; padding: 4px; border-radius: var(--rpill); background: var(--surface); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.feed-tabs a { flex: none; text-align: center; padding: 9px 12px; border-radius: var(--rpill); font: 700 12.5px var(--label); letter-spacing: .8px; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.feed-tabs a.on { color: var(--acc-ink); background: var(--acc); }
.feed-types { display: flex; flex: none; flex-wrap: nowrap; gap: 6px; margin: 0; } .feed-types .badge { padding: 6px 11px; }
.feed-list { display: grid; gap: 10px; }
.feed-card { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh1); min-width: 0; overflow: hidden; }
.feed-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; } .feed-head > div { flex: 1; min-width: 0; } .feed-head .av { width: 36px; height: 36px; flex: none; } .feed-head > .badge { flex: none; }
.feed-body { padding: 8px 14px; overflow-wrap: anywhere; }
.feed-title { display: block; font: 700 19px/1.1 var(--head); color: var(--text); margin-bottom: 4px; }
.feed-img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r2); margin: 6px 0; }
.feed-clip { margin: 6px 0; max-height: 220px; border-radius: var(--r2); }
.feed-chips { display: flex; flex-wrap: wrap; gap: 4px; } .feed-chips span { padding: 4px 8px; border-radius: 6px; background: var(--bg2); font-size: 12.5px; } .feed-chips small { color: var(--acc); font: 700 10px var(--label); letter-spacing: 1px; text-transform: uppercase; }
.feed-att { display: grid; gap: 2px; margin: 6px 0; padding: 10px 12px; border-radius: var(--r2); background: var(--surface2); border: 1px solid var(--line2); color: var(--text); } .feed-att small { color: var(--acc); font: 700 10px var(--label); letter-spacing: 1.2px; }
.feed-actions { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 8px 8px; border-top: 1px solid var(--line); }
.fa { min-height: 40px; padding: 6px 10px; border-radius: 8px; background: none; border: 0; color: var(--dim); font: 700 12px var(--label); letter-spacing: .8px; text-transform: uppercase; cursor: pointer; }
.fa:hover:not([disabled]) { color: var(--text); background: var(--surface2); } .fa.on { color: var(--acc2); } .fa[data-like].on { color: #ff7b7f; } .fa[disabled] { opacity: .5; cursor: default; } .fa.danger { color: var(--red); }
.feed-thread { padding: 0 14px 14px; border-top: 1px dashed var(--line2); } .feed-thread[hidden] { display: none; }
.cmt { padding: 10px 0; border-bottom: 1px solid var(--line); } .cmt p { margin: 2px 0; white-space: pre-line; overflow-wrap: anywhere; }
.cmt-acts button { background: none; border: 0; color: var(--faint); font: 700 11px var(--label); text-transform: uppercase; cursor: pointer; padding: 4px 8px 4px 0; min-height: 32px; }
.cmt-form { display: flex; gap: 6px; margin-top: 10px; } .cmt-form input { flex: 1; }
.feed-side .creator { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); } .feed-side .creator span { display: grid; min-width: 0; } .feed-side .creator small { font-size: 11.5px; }

/* ---------- Squad Finder ---------- */
.lfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; }
.lfg-card { padding: 14px; border-radius: var(--r); background: var(--surface2); border: 1px solid var(--line); box-shadow: var(--sh1); min-width: 0; }
.lfg-host { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; } .lfg-host > div:nth-child(2) { flex: 1; min-width: 0; } .lfg-host .av { width: 38px; height: 38px; flex: none; }
.lfg-slots { text-align: center; padding: 6px 12px; border-radius: var(--r2); background: var(--bg2); border: 1px solid var(--line); }
.lfg-slots b { display: block; font: 700 20px/1 var(--head); color: var(--acc2); } .lfg-slots small { font: 700 9px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.lfg-tags { display: flex; flex-wrap: wrap; gap: 4px; } .lfg-tags span { padding: 4px 9px; border-radius: var(--rpill); font: 700 11px var(--label); letter-spacing: .5px; text-transform: uppercase; color: var(--dim); background: var(--bg2); border: 1px solid var(--line); }
.lfg-filters { margin: 10px 0; padding: 10px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.lfg-filters summary { cursor: pointer; font: 700 12.5px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--acc2); min-height: 32px; display: flex; align-items: center; }
.lfg-filters summary .hint { margin-left: 8px; font: 500 12px var(--body); letter-spacing: 0; text-transform: none; }
.lfg-filters[open] summary .hint { display: none; }
.lfg-filters form { margin-top: 10px; }
.roster-row, .req-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); } .roster-row b { min-width: 110px; } .req-row { justify-content: space-between; } .req-row p { margin: 4px 0 0; }

/* ---------- Round A ---------- */
#setupCard .grid { gap: 10px; }

/* ---------- compact guide box, boards chip row, phone action rows ---------- */
details.explain { display: block; padding: 0; }
details.explain summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; color: var(--text); }
details.explain summary::-webkit-details-marker { display: none; }
details.explain summary b { font: 700 13px var(--label); letter-spacing: .6px; text-transform: uppercase; }
details.explain summary .muted { margin-left: auto; font-size: 12px; }
details.explain[open] summary .muted { display: none; }
details.explain .explain-body { padding: 0 12px 12px 42px; color: var(--dim); }
.boards { display: flex; align-items: center; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.boards::-webkit-scrollbar { display: none; }
.boards-lbl { flex: none; font: 700 10.5px var(--label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); padding-right: 4px; }
.boards a { flex: none; padding: 8px 12px; border-radius: var(--rpill); background: var(--surface); border: 1px solid var(--line); color: var(--text); font: 700 12.5px var(--label); letter-spacing: .4px; white-space: nowrap; }
.boards a:hover { border-color: var(--line3); color: #fff; }
.clanname span, .pn { white-space: nowrap; }
.sc-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; }
.sc-actions::-webkit-scrollbar { display: none; }
.sc-actions > * { flex: none; }
.profile-head > div { flex: 1 1 260px; min-width: 0; }

/* ---------- long-tail components carried over from the original theme (war map, bracket, shop, kill race, scanner, guide) ---------- */
.chal-tabs { display: flex; gap: 6px; padding: 10px 16px 0; }
.chal-tabs button { flex: 1; padding: 8px 10px; border: 1px solid var(--line2); background: var(--surface2); color: var(--dim); font: 700 12px var(--label); letter-spacing: 1px; text-transform: uppercase; border-radius: var(--r); cursor: pointer; }
.chal-tabs button b { color: var(--text); margin-left: 4px; font-weight: 800; }
.chal-tabs button.on { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); } .chal-tabs button.on b { color: var(--acc-ink); }
.chal-list { padding: 8px 16px 14px; display: grid; gap: 8px; }
.chal { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255,255,255,.02); }
.chal .ci { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface3); font-size: 16px; }
.chal .cn { font: 400 16px/1.1 var(--head); letter-spacing: 1px; text-transform: uppercase; }
.chal .cn .ok { color: var(--green); }
.chal .cd { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.chal .cprog { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .chal .cprog .xpbar { flex: 1; } .chal .cprog .mono { font-size: 11px; color: var(--faint); }
.chal .cx { text-align: right; font: 800 14px/1.1 var(--head); color: var(--gold); display: grid; gap: 2px; }
.chal .cx small { font: 600 10px var(--mono); color: var(--dim); }
.chal .cx .coin { color: var(--acc); font-size: 13px; }
.chal.done { border-color: rgba(155,210,43,.35); background: rgba(155,210,43,.05); } .chal.done .ci { background: rgba(155,210,43,.18); }
.chal.bonus { border-style: dashed; } .chal.bonus .ci { color: var(--gold); }
.chal-foot { padding: 0 2px; }
.chal.mission .cn .tier { font: 700 10px var(--label); letter-spacing: 1.5px; color: var(--gold); border: 1px solid rgba(255,210,74,.4); padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: middle; }
.chal .tiers { display: flex; gap: 5px; align-items: center; margin-top: 6px; } .chal .tiers i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface3); border: 1px solid var(--line2); display: inline-block; }
.chal .tiers i.on { background: var(--gold); border-color: var(--gold); } .chal .tiers .muted { margin-left: 6px; }
.cotw .cn { font: 400 28px/1.1 var(--head); text-transform: uppercase; letter-spacing: 1px; }
.cotw .cs { font: 600 12px var(--label); color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; }
.bracket { display: flex; gap: 28px; overflow-x: auto; padding: 16px; }
.round { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; min-width: 200px; }
.round h3 { font: 400 18px var(--head); color: var(--acc); text-transform: uppercase; margin: 0 0 4px; text-align: center; letter-spacing: 2px; }
.match { border: 1px solid var(--line2); background: rgba(3,6,12,.6); border-radius: 8px; overflow: hidden; }
.slot { padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); font-weight: 600; }
.slot:last-child { border-bottom: 0; }
.slot.win { background: linear-gradient(90deg, rgba(143,163,74,.18), transparent); color: #fff; box-shadow: inset 3px 0 0 var(--green); }
.slot.empty { color: var(--faint); font-style: italic; font-weight: 500; }
.slot button { all: unset; cursor: pointer; font: 800 10.5px var(--label); letter-spacing: 1px; color: var(--acc); text-transform: uppercase; }
.champ { text-align: center; padding: 18px; font: 400 34px/1 var(--head); color: var(--gold); letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 0 18px rgba(255,200,61,.5); }
.levelup .lu { font: 800 13px var(--label); letter-spacing: 4px; color: var(--gold); }
.drop { border: 1px dashed var(--line2); border-radius: 2px; padding: 18px; text-align: center; cursor: pointer; color: var(--dim); background: rgba(3,6,12,.5); font: 600 13px var(--label); letter-spacing: .5px; }
.drop:hover { border-color: var(--acc); color: var(--text); }
.drop img { max-width: 100%; max-height: 220px; display: block; margin: 10px auto 0; border-radius: 6px; }
.cropwrap { margin-top: 12px; }
.cropbox { position: relative; border-radius: 8px; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; border: 1px solid var(--line2); }
.cropbox img { display: block; width: 100%; pointer-events: none; }
.cropbox .sel { position: absolute; border: 2px solid var(--gold); background: rgba(255,200,61,.12); box-shadow: 0 0 0 9999px rgba(0,0,0,.45); border-radius: 3px; }
.warmap { display: block; width: 100%; height: auto; max-height: 72vh; background: #0d0f0a; }
.warmap polygon[data-clan]:hover { fill-opacity: .85; }
.warmap polygon:not([data-clan]):hover { fill: #252a1c; }
.guide { font-size: 15.5px; line-height: 1.65; }
.guide ol, .guide ul { margin: 0; padding-left: 22px; }
.guide li { margin: 4px 0; }
.guide p { margin: 8px 0; }
.guide h3 { font: 400 20px var(--head); margin: 18px 0 6px; letter-spacing: 1px; }
.guide code { font-family: var(--mono); background: rgba(0,0,0,.4); padding: 1px 5px; }
.guide table td { padding: 7px 10px; }
.playpick { display:grid;gap:10px }
.playpick button { display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:18px;background:#10140c;border:1px solid #2c3d1c;color:#e8e8e0;cursor:pointer }
.playpick button b { font:400 24px/1 var(--head);letter-spacing:1px;color:var(--acc);text-transform:uppercase }
.playpick button span { color:#9a9a90;font-size:14px }
.playpick button:hover { border-color:var(--acc);background:#151c0e }
.pickrow { padding:10px 0;border-bottom:1px solid var(--line);gap:10px;flex-wrap:nowrap }
.picklist { max-height:44vh;overflow:auto;margin-top:8px }
.krgame { border:1px solid var(--line);padding:10px;margin-top:10px;background:#0d100a }
.krtotal { margin-top:12px;padding:10px;border-left:3px solid var(--acc);background:#10140c;font-size:15px }


/* ===== Shop cosmetics (CSS only, no game art). Owner 11/08 (Round D): restyling bought items is allowed; owners get the new look. ===== */
.coinchip { font: 700 13px var(--label); color: var(--gold); white-space: nowrap; padding: 4px 8px; border: 1px solid rgba(255,210,74,.35); margin-right: 6px; }
.coinchip:hover { background: rgba(255,210,74,.12); }
/* ===== Standard (non-Elite) cosmetics: still designs, no animation (Elite is the animated tier) ===== */
/* name colors (players) + tag styles (clans): two-tone metal-style text with a dark edge so they read on any background */
.ns-olive, .ts-olive, .ns-arctic, .ts-arctic, .ns-blaze, .ts-blaze, .ns-crimson, .ts-crimson, .ns-gold, .ts-gold { -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important; filter: drop-shadow(0 1px 0 rgba(0,0,0,.85)); }
.ns-olive, .ts-olive { background-image: linear-gradient(180deg, #d4e68c 0%, #a3c05a 45%, #5f7a24 100%); }
.ns-arctic, .ts-arctic { background-image: linear-gradient(180deg, #ffffff 0%, #bdefff 40%, #5fb8e6 100%); filter: drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(150,220,255,.35)); }
.ns-blaze, .ts-blaze { background-image: linear-gradient(180deg, #ffe08a 0%, #ff9a2a 45%, #e0410f 100%); }
.ns-crimson, .ts-crimson { background-image: linear-gradient(180deg, #ff9c9c 0%, #ff4d4d 40%, #9e0f1c 100%); filter: drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(255,60,60,.35)); }
.ns-gold, .ts-gold { background-image: linear-gradient(180deg, #fffbe0 0%, #ffe066 30%, #ffc21a 60%, #fff0a0 100%); filter: drop-shadow(0 1px 0 rgba(70,45,0,.95)) drop-shadow(0 0 6px rgba(255,200,40,.45)); }
.ns-neon, .ts-neon { color: #b6ff8f !important; text-shadow: 0 0 2px #fff, 0 0 7px rgba(140,255,95,.95), 0 0 16px rgba(140,255,95,.55); }
/* calling cards (players) + banners (clans): layered scenes, still */
.cc { position: relative; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.cc-nightops { background: radial-gradient(130% 120% at 0% 0%, transparent 55%, rgba(0,0,0,.65)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='160' viewBox='0 0 300 160'%3E%3Cg fill='none' stroke='%235b8cff' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M-10 40 C40 10 90 70 150 40 S260 10 310 45'/%3E%3Cpath d='M-10 62 C40 32 90 92 150 62 S260 32 310 67'/%3E%3Cpath d='M-10 84 C40 54 90 114 150 84 S260 54 310 89'/%3E%3Cpath d='M-10 106 C40 76 90 136 150 106 S260 76 310 111'/%3E%3Cpath d='M-10 128 C40 98 90 158 150 128 S260 98 310 133'/%3E%3Cellipse cx='225' cy='60' rx='34' ry='18'/%3E%3Cellipse cx='225' cy='60' rx='18' ry='9'/%3E%3C/g%3E%3C/svg%3E") right center / 300px 160px repeat, radial-gradient(60% 80% at 78% 40%, rgba(70,120,255,.28), transparent 70%), linear-gradient(135deg, #050912, #142445) !important; }
.cc-desert { background: radial-gradient(40px 40px at 82% 26%, #fff3c4 0 38%, rgba(255,214,120,.55) 40%, transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='160' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0 110 C80 80 140 120 220 95 S340 70 400 90 V160 H0Z' fill='%238a5f2c' fill-opacity='.55'/%3E%3Cpath d='M0 135 C90 110 170 145 250 125 S360 110 400 125 V160 H0Z' fill='%235c3b17' fill-opacity='.7'/%3E%3C/svg%3E") bottom / 100% 70% no-repeat, linear-gradient(180deg, #e9b46a 0%, #c98a45 45%, #8a5a26 100%) !important; }
.cc-camo { background: radial-gradient(130% 120% at 0% 0%, transparent 60%, rgba(0,0,0,.45)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Crect width='240' height='160' fill='%235a6b34'/%3E%3Cpath d='M-10 20 C10 0 40 8 52 22 C66 38 44 52 28 48 C14 44 4 58 -10 50Z' fill='%232c3a1a'/%3E%3Cpath d='M70 10 C92 -4 120 6 126 20 C132 34 114 40 104 34 C92 30 84 44 70 38 C58 32 58 18 70 10Z' fill='%234a3a22'/%3E%3Cpath d='M150 30 C170 14 206 18 214 36 C222 54 196 62 184 56 C170 70 146 64 144 50 C142 40 144 34 150 30Z' fill='%231c2412'/%3E%3Cpath d='M20 80 C36 66 68 70 74 86 C80 102 62 112 48 106 C34 118 8 110 10 96 C12 88 14 84 20 80Z' fill='%234a3a22'/%3E%3Cpath d='M96 70 C116 58 140 64 146 80 C152 98 132 104 120 100 C106 112 86 104 88 90 C88 80 90 74 96 70Z' fill='%232c3a1a'/%3E%3Cpath d='M176 92 C196 80 230 86 234 102 C238 118 216 126 202 120 C188 132 166 124 168 110 C168 100 170 96 176 92Z' fill='%234a3a22'/%3E%3Cpath d='M40 130 C58 120 84 124 88 138 C92 152 72 160 58 154 C44 164 24 156 26 144 C26 136 32 134 40 130Z' fill='%231c2412'/%3E%3Cpath d='M118 124 C130 116 148 120 150 130 C152 140 140 146 130 142 C120 148 108 142 110 134Z' fill='%238a7a4e'/%3E%3Cpath d='M204 140 C220 132 246 138 246 150 C246 162 226 166 214 160 C204 164 192 156 196 148Z' fill='%232c3a1a'/%3E%3Cpath d='M126 36 C134 30 146 32 148 40 C150 48 140 52 132 48 C126 50 120 44 126 36Z' fill='%238a7a4e'/%3E%3Cpath d='M4 112 C12 106 24 108 24 116 C24 124 14 126 8 122Z' fill='%238a7a4e'/%3E%3C/svg%3E") 0 0 / 240px 160px repeat !important; }
.cc-bloodmoon { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='160' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0 130 L40 112 L70 122 L110 96 L150 118 L190 104 L230 124 L270 98 L320 120 L360 106 L400 118 V160 H0Z' fill='%230a0202'/%3E%3C/svg%3E") bottom / 100% 45% no-repeat, radial-gradient(circle at 80% 38%, rgba(0,0,0,.18) 0 6px, transparent 7px), radial-gradient(circle at 76% 30%, rgba(0,0,0,.15) 0 9px, transparent 10px), radial-gradient(circle at 80% 34%, #ff6a4d 0 44px, #b8261a 46px, rgba(216,67,47,.35) 48px, rgba(216,67,47,.12) 80px, transparent 110px), linear-gradient(180deg, #140303, #3d0a0a 70%, #220404) !important; }
.cc-static { background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px, linear-gradient(90deg, rgba(255,0,80,.08), rgba(0,200,255,.08)), #26292d !important; }
.cc-goldrush { background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.35) 46%, transparent 54%), repeating-linear-gradient(115deg, rgba(0,0,0,.18) 0 2px, transparent 2px 7px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), linear-gradient(135deg, #3a2700, #c8961a 40%, #f2cf5b 55%, #8a6200 75%, #2e1f00) !important; }
/* Round D cards (owner 11/08): green-theme scenes */
.cc-stencil { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120'%3E%3Cg fill='none' stroke='%239bd22b' stroke-opacity='.28' stroke-width='3'%3E%3Cpath d='M10 95 40 30h14L24 95zM60 95 90 30h14L74 95z'/%3E%3Crect x='120' y='34' width='120' height='56' stroke-dasharray='14 7'/%3E%3C/g%3E%3Cg fill='%239bd22b' fill-opacity='.9' font-family='Arial Black,Impact,sans-serif' font-size='13' letter-spacing='3'%3E%3Ctext x='130' y='58'%3EPROPERTY OF%3C/text%3E%3Ctext x='130' y='78'%3EWARROOM%3C/text%3E%3C/g%3E%3C/svg%3E") right 10px center / 260px 120px no-repeat, repeating-linear-gradient(135deg, rgba(155,210,43,.07) 0 10px, transparent 10px 24px), linear-gradient(90deg, #0d110a, #151b10); }
.cc-topo { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='160' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%239bd22b' stroke-opacity='.35' stroke-width='1.2'%3E%3Cpath d='M0 120C60 90 90 150 150 110S260 60 320 100s60 30 80 10'/%3E%3Cpath d='M0 100C60 70 95 130 150 92S255 42 320 82s60 26 80 4'/%3E%3Cpath d='M0 80C60 50 100 110 150 74S250 24 320 64s60 22 80 0'/%3E%3Cpath d='M0 60C60 30 105 90 150 56S245 6 320 46s60 18 80-4'/%3E%3Cpath d='M0 140C60 110 85 170 150 128S265 78 320 118s60 34 80 16'/%3E%3C/g%3E%3Cpath d='M300 70l8 14h-16z' fill='%239bd22b' fill-opacity='.8'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(120deg, #0a0f08, #121a0e); }
.cc-killfeed { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Cg font-family='Arial,sans-serif' font-size='11' fill='%23ecebe2' fill-opacity='.85'%3E%3Ctext x='150' y='22'%3EYOU %5B%E2%9C%9A%5D ENEMY_01%3C/text%3E%3Ctext x='150' y='42' fill='%239bd22b'%3EYOU %5B%E2%9C%9A%5D ENEMY_02%3C/text%3E%3Ctext x='150' y='62'%3EYOU %5B%E2%9C%9A%5D ENEMY_03%3C/text%3E%3Ctext x='150' y='82' fill='%23ffd24a'%3EYOU %5B%E2%9C%9A%5D ENEMY_04%3C/text%3E%3Ctext x='150' y='102' fill-opacity='.5'%3EYOU %5B%E2%9C%9A%5D ENEMY_05%3C/text%3E%3C/g%3E%3C/svg%3E") right center / 300px 120px no-repeat, radial-gradient(120% 100% at 100% 50%, rgba(155,210,43,.1), transparent 60%), linear-gradient(90deg, #0a0c09, #11150d); }
.cc-dogtags { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140'%3E%3Cg transform='rotate(-18 130 70)'%3E%3Crect x='98' y='30' width='60' height='96' rx='12' fill='%23b8c0c4'/%3E%3Crect x='104' y='36' width='48' height='84' rx='9' fill='none' stroke='%23e8edf0' stroke-width='1.5'/%3E%3Ccircle cx='128' cy='46' r='4' fill='%23303840'/%3E%3Cg fill='%23303840' font-family='Courier New,monospace' font-size='9' font-weight='700'%3E%3Ctext x='108' y='66'%3EWARROOM%3C/text%3E%3Ctext x='108' y='80'%3EMW4%3C/text%3E%3Ctext x='108' y='94'%3EO POS%3C/text%3E%3C/g%3E%3C/g%3E%3Cpath d='M20 10c30 10 60 30 100 20' fill='none' stroke='%23d0d6da' stroke-width='2' stroke-dasharray='2 3'/%3E%3C/svg%3E") right 8px center / 200px 140px no-repeat, radial-gradient(130% 120% at 0% 0%, transparent 55%, rgba(0,0,0,.6)), linear-gradient(120deg, #2a2d24, #11130e 70%); }
/* emblem frames (clans): two-layer rings that follow the emblem's hexagon shape */
svg.fr-steel { filter: drop-shadow(1px 0 0 #2a2f34) drop-shadow(-1px 0 0 #2a2f34) drop-shadow(0 1px 0 #2a2f34) drop-shadow(0 -1px 0 #2a2f34) drop-shadow(1.5px 0 0 #c9d1d8) drop-shadow(-1.5px 0 0 #c9d1d8) drop-shadow(0 1.5px 0 #8a949c) drop-shadow(0 -1.5px 0 #e6ecf0); }
svg.fr-bronze { filter: drop-shadow(1px 0 0 #3b1f08) drop-shadow(-1px 0 0 #3b1f08) drop-shadow(0 1px 0 #3b1f08) drop-shadow(0 -1px 0 #3b1f08) drop-shadow(1.5px 0 0 #e09a52) drop-shadow(-1.5px 0 0 #e09a52) drop-shadow(0 1.5px 0 #8a4f1c) drop-shadow(0 -1.5px 0 #f3c08a) drop-shadow(0 0 4px rgba(205,127,50,.45)); }
svg.fr-hazard { filter: drop-shadow(1.5px 0 0 #111) drop-shadow(-1.5px 0 0 #111) drop-shadow(0 1.5px 0 #111) drop-shadow(0 -1.5px 0 #111) drop-shadow(2px 0 0 #f5c400) drop-shadow(-2px 0 0 #f5c400) drop-shadow(0 2px 0 #f5c400) drop-shadow(0 -2px 0 #f5c400) drop-shadow(0 0 5px rgba(245,196,0,.5)); }
svg.fr-gold { filter: drop-shadow(1px 0 0 #4a3300) drop-shadow(-1px 0 0 #4a3300) drop-shadow(0 1px 0 #4a3300) drop-shadow(0 -1px 0 #4a3300) drop-shadow(1.5px 0 0 #ffd24a) drop-shadow(-1.5px 0 0 #ffd24a) drop-shadow(0 1.5px 0 #b8860b) drop-shadow(0 -1.5px 0 #fff0a8) drop-shadow(0 0 8px rgba(255,210,74,.7)); }
/* titles */
.ptitle { font: 700 12px var(--label); letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 2px 0 4px; }
/* shop layout */
.shophead { margin: 16px 0 8px; font: 700 14px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shopitem { border: 1px solid var(--line); padding: 10px; background: rgba(255,255,255,.02); }
.shopitem.on { border-color: var(--acc); }
.shopitem .pv { min-height: 56px; display: flex; align-items: center; }
.shopitem .pv > .cc { height: 72px !important; border-radius: var(--r2); }
.shop-chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; border-bottom: 1px solid var(--line); } .shop-chips::-webkit-scrollbar { display: none; }
.shop-chips a { flex: none; padding: 7px 12px; border: 1px solid var(--line2); border-radius: var(--rpill); font: 700 12px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); background: var(--surface2); } .shop-chips a:hover { color: var(--text); border-color: var(--acc); }
.loadout { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 12px 16px 16px; }
.loadout .slot { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; background: rgba(255,255,255,.02); display: grid; gap: 6px; min-width: 0; }
.loadout .slot small { font: 700 10px var(--label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.loadout .slot .v { display: flex; align-items: center; gap: 8px; min-height: 36px; overflow: hidden; } .loadout .slot .v .cc { width: 100%; height: 36px; border-radius: var(--r2); border: 1px solid var(--line); }
.loadout .slot .none { color: var(--faint); font-size: 13px; }
.shopitem .pv > .cc { width: 100%; }
.shopitem button[disabled] { opacity: .45; cursor: not-allowed; }

/* ===== ELITE (animated) cosmetics: original tactical designs ===== */
.tag:not([class*="ts-"]), .ttl, .badge, .live, h1 small { -webkit-text-fill-color: currentColor; } /* a tag inside an animated name keeps its own color */
.ttl { font: 700 10px var(--label); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(255,210,74,.35); padding: 1px 5px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
@keyframes wr-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes wr-flow { from { background-position: 0 0; } to { background-position: 300% 0; } }
@keyframes wr-glitch { 0%, 86%, 100% { text-shadow: 0 0 0 transparent; transform: none; } 88% { text-shadow: -2px 0 #ff2a6d, 2px 0 #05d9e8; transform: translateX(1px); } 91% { text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8; transform: translateX(-1px); } 94% { text-shadow: -1px 0 #ff2a6d, 1px 0 #05d9e8; transform: none; } }
@keyframes wr-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .55; } 49% { opacity: 1; } 72% { opacity: .8; } 73% { opacity: 1; } }
@keyframes wr-spin { to { transform: rotate(360deg); } }
@keyframes wr-pulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes wr-slide { from { background-position: 0 0; } to { background-position: 400px 0; } }
@keyframes wr-rise { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 -240px, 0 -160px, 0 -120px; } }
@keyframes wr-scan { from { transform: translateY(-120%); } to { transform: translateY(120%); } }
@keyframes wr-jitter { 0%, 100% { transform: translateY(0); opacity: .0; } 10% { opacity: .9; } 20% { transform: translateY(40%); } 30% { opacity: 0; } 60% { transform: translateY(-30%); opacity: .7; } 70% { opacity: 0; } }
@keyframes wr-beam { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* names + clan tags */
.ns-e-gold, .ts-e-gold { text-shadow: none !important; background: linear-gradient(100deg, #9c7400 0%, #ffd24a 35%, #fffbe6 50%, #ffd24a 65%, #9c7400 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: wr-sheen 3.2s linear infinite; }
.ns-e-thermal, .ts-e-thermal { text-shadow: none !important; background: linear-gradient(90deg, #ff2a00, #ff8a00, #ffe14d, #ff8a00, #ff2a00); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: wr-flow 2.6s linear infinite; filter: drop-shadow(0 0 3px rgba(255,90,0,.55)); }
.ns-e-glitch, .ts-e-glitch { color: #e9f6ff !important; display: inline-block; animation: wr-glitch 2.8s steps(1) infinite; }
.ns-e-nv, .ts-e-nv { color: #8dff6a !important; text-shadow: 0 0 6px rgba(141,255,106,.85), 0 0 1px #fff; animation: wr-flicker 5s linear infinite; }
.ns-e-spectral, .ts-e-spectral { text-shadow: none !important; background: linear-gradient(90deg, #00e5ff, #7c4dff, #ff3dcb, #ffb300, #00e5ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: wr-flow 4s linear infinite; filter: drop-shadow(0 0 4px rgba(124,77,255,.55)); }

/* animated calling cards: the moving layer sits behind the header's content */
.cc[class*="cc-e-"] { overflow: hidden; isolation: isolate; }
.cc[class*="cc-e-"] > * { position: relative; z-index: 1; }
.cc[class*="cc-e-"]::before, .cc[class*="cc-e-"]::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
.cc-e-radar { background: repeating-radial-gradient(circle at 82% 50%, rgba(125,255,90,.18) 0 1px, transparent 1px 34px), linear-gradient(135deg, #04110a, #0b2414) !important; }
.cc-e-radar::before { width: 640px; height: 640px; left: calc(82% - 320px); top: calc(50% - 320px); border-radius: 50%; background: conic-gradient(from 0deg, rgba(125,255,90,.5), rgba(125,255,90,.08) 18%, transparent 24%); animation: wr-spin 4s linear infinite; }
.cc-e-tracer { background: radial-gradient(120% 90% at 100% 100%, #3a1606, #0c0605 60%) !important; }
.cc-e-tracer::before { inset: 0; background: repeating-linear-gradient(100deg, transparent 0 70px, rgba(255,200,90,.9) 71px, rgba(255,120,30,.4) 73px, transparent 75px 170px); background-size: 400px 100%; animation: wr-slide .9s linear infinite; opacity: .8; }
.cc-e-embers { background: linear-gradient(180deg, #120404, #3a0d04 70%, #6b1d05) !important; }
.cc-e-embers::before { inset: 0; background-image: radial-gradient(2px 2px at 20% 80%, #ffb347 60%, transparent), radial-gradient(1.5px 1.5px at 60% 90%, #ff7a1a 60%, transparent), radial-gradient(2.5px 2.5px at 85% 70%, #ffd27a 60%, transparent); background-size: 140px 240px, 110px 160px, 90px 120px; animation: wr-rise 3.5s linear infinite; }
.cc-e-embers::after { inset: 0; background: radial-gradient(80% 60% at 50% 110%, rgba(255,90,20,.45), transparent 70%); }
.cc-e-hud { background: repeating-linear-gradient(0deg, rgba(5,217,232,.08) 0 1px, transparent 1px 18px), repeating-linear-gradient(90deg, rgba(5,217,232,.08) 0 1px, transparent 1px 18px), linear-gradient(135deg, #020a14, #071c2e) !important; }
.cc-e-hud::before { left: 0; right: 0; top: 30%; height: 18%; background: linear-gradient(90deg, transparent, rgba(5,217,232,.55) 20%, rgba(255,42,109,.35) 50%, rgba(5,217,232,.55) 80%, transparent); mix-blend-mode: screen; animation: wr-jitter 2.2s steps(1) infinite; }
.cc-e-nvscan { background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px), radial-gradient(120% 120% at 50% 50%, #1f5a12, #071a04 75%) !important; }
.cc-e-nvscan::before { left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(180deg, transparent 45%, rgba(170,255,140,.55) 50%, transparent 55%); animation: wr-scan 3s linear infinite; }
.cc-e-orbital { background: radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 38% 70%, #cfe8ff, transparent), radial-gradient(1.5px 1.5px at 66% 30%, #fff, transparent), radial-gradient(1px 1px at 88% 80%, #fff, transparent), radial-gradient(120% 100% at 75% 120%, #3a0b0b, #050510 60%) !important; }
.cc-e-orbital::before { left: calc(75% - 6px); top: 0; width: 12px; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,240,200,.95) 80%, #fff); box-shadow: 0 0 24px 6px rgba(255,140,60,.6); animation: wr-beam 1.6s ease-in-out infinite; }
.cc-e-orbital::after { left: calc(75% - 60px); bottom: -60px; width: 120px; height: 120px; border-radius: 50%; border: 3px solid rgba(255,160,80,.8); animation: wr-pulse 1.6s ease-out infinite; }

/* animated emblem frames: the emblem gets a wrapper with a moving ring around it */
.efr { position: relative; display: inline-grid; place-items: center; vertical-align: middle; }
.efr::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; }
.efr.fr-e-reticle::before { border: 2px dashed rgba(125,255,90,.85); animation: wr-spin 6s linear infinite; }
.efr.fr-e-pulse::before { border: 2px solid rgba(255,90,60,.9); animation: wr-pulse 1.4s ease-out infinite; }
.efr.fr-e-spark::before { background: conic-gradient(from 0deg, transparent 0 70%, #9fe3ff 85%, #fff 90%, transparent 92%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: wr-spin 1.2s linear infinite; }
.efr.fr-e-spectral::before { background: conic-gradient(#00e5ff, #7c4dff, #ff3dcb, #ffb300, #00e5ff); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: wr-spin 3s linear infinite; }

/* shop: elite look + rank lock */
.shopitem { position: relative; }
.shopitem.elite { border-color: rgba(255,210,74,.45); background: linear-gradient(180deg, rgba(255,210,74,.06), rgba(255,255,255,.01)); }
.elitebadge { position: absolute; top: -1px; right: -1px; font: 700 10px var(--label); letter-spacing: 1.5px; background: var(--gold); color: #000; padding: 2px 6px; z-index: 2; }
.elitehead { color: var(--gold) !important; }
.lockchip { display: inline-flex; flex-direction: column; align-items: flex-end; font: 700 11px var(--label); letter-spacing: .5px; color: var(--dim); text-align: right; }
.lockchip small { font: 600 11px var(--label); color: var(--dim); opacity: .8; }
.shopitem .pv .cc { position: relative; }

/* people who turn on "reduce motion" on their phone get the still versions */
@media (prefers-reduced-motion: reduce) {
  [class*="ns-e-"], [class*="ts-e-"], .cc[class*="cc-e-"]::before, .cc[class*="cc-e-"]::after, .efr::before { animation: none !important; }
}

/* ===== 1/1 EXCLUSIVES (admin-granted, one owner each) ===== */
.ns-x-dev { text-shadow: none !important; background: linear-gradient(100deg, #ffffff 0%, #8ff3ff 22%, #ffffff 38%, #ffd24a 52%, #ffffff 66%, #8ff3ff 82%, #ffffff 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: wr-sheen 2.2s linear infinite; filter: drop-shadow(0 0 4px rgba(143,243,255,.65)) drop-shadow(0 1px 0 rgba(0,0,0,.9)); }
a.ns-x-dev::after { content: " ◆"; font-size: .62em; vertical-align: .25em; -webkit-text-fill-color: #ffd24a; }
.ts-x-founders { text-shadow: none !important; background: linear-gradient(110deg, #b8860b 0%, #ffd24a 30%, #ffffff 46%, #ffd24a 60%, #b8860b 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: wr-sheen 1.8s linear infinite; filter: drop-shadow(0 0 5px rgba(255,210,74,.75)) drop-shadow(0 1px 0 rgba(60,40,0,.9)); }
.cc[class*="cc-x-"] { overflow: hidden; isolation: isolate; }
.cc[class*="cc-x-"] > * { position: relative; z-index: 1; }
.cc[class*="cc-x-"]::before, .cc[class*="cc-x-"]::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
.cc-x-dev { background:
  linear-gradient(#ffd24a, #ffd24a) 10px 10px / 26px 2px no-repeat, linear-gradient(#ffd24a, #ffd24a) 10px 10px / 2px 26px no-repeat,
  linear-gradient(#ffd24a, #ffd24a) calc(100% - 10px) calc(100% - 10px) / 26px 2px no-repeat, linear-gradient(#ffd24a, #ffd24a) calc(100% - 10px) calc(100% - 10px) / 2px 26px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Ctext x='210' y='112' text-anchor='end' font-family='Impact, Arial Black, sans-serif' font-size='96' fill='%23ffd24a' fill-opacity='.10'%3E1/1%3C/text%3E%3C/svg%3E") right bottom / 220px 120px no-repeat,
  repeating-linear-gradient(0deg, rgba(143,243,255,.06) 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, rgba(143,243,255,.06) 0 1px, transparent 1px 20px),
  linear-gradient(135deg, #01060d, #06213a 60%, #0a1626) !important; }
.cc-x-dev::before { left: 55%; right: 0; top: 0; height: 200%; opacity: .55;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(143,243,255,.55) 9px 11px, transparent 11px 18px, rgba(155,210,43,.45) 18px 20px, transparent 20px 31px, rgba(143,243,255,.35) 31px 33px, transparent 33px 44px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 25%, #000 70%, transparent); animation: wr-code 6s linear infinite; }
.cc-x-dev::after { width: 300px; height: 300px; right: -90px; top: calc(50% - 150px); border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,210,74,.45), rgba(255,210,74,.05) 16%, transparent 22%); animation: wr-spin 3.5s linear infinite; }
@keyframes wr-code { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.cc-x-hq { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath d='M14 0h28l14 24-14 24H14L0 24z' fill='none' stroke='%239bd22b' stroke-opacity='.16'/%3E%3C/svg%3E") 0 0 / 56px 48px repeat, radial-gradient(90% 120% at 30% 50%, #10220a, #040803 75%) !important; }
.cc-x-hq::before { inset: 0; background-image: radial-gradient(5px 5px at 22% 35%, #ff4d4d 60%, transparent), radial-gradient(5px 5px at 58% 62%, #ffd24a 60%, transparent), radial-gradient(5px 5px at 81% 28%, #8ff3ff 60%, transparent), radial-gradient(5px 5px at 40% 80%, #9bd22b 60%, transparent); animation: wr-blink 1.6s steps(2) infinite; }
.cc-x-hq::after { left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(180deg, transparent 46%, rgba(155,210,43,.35) 50%, transparent 54%); animation: wr-scan 4s linear infinite; }
@keyframes wr-blink { 50% { opacity: .25; } }
.efr.fr-x-crown::before { background: conic-gradient(#ffd24a, #fff6c8, #b8860b, #ffd24a, #ffffff, #ffd24a); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: wr-spin 2.5s linear infinite; box-shadow: 0 0 14px rgba(255,210,74,.6); }
.efr.fr-x-crown::after { content: ""; position: absolute; inset: -22%; border-radius: 50%; border: 2px dashed rgba(255,246,200,.75); animation: wr-spin 7s linear infinite reverse; pointer-events: none; }
.shopitem.x1 { border-color: #8ff3ff; background: linear-gradient(180deg, rgba(143,243,255,.08), rgba(255,210,74,.04)); }
.shopitem.x1 .elitebadge { background: linear-gradient(90deg, #8ff3ff, #ffd24a); }
@media (prefers-reduced-motion: reduce) {
  .ns-x-dev, .ts-x-founders, .cc[class*="cc-x-"]::before, .cc[class*="cc-x-"]::after, .efr::after { animation: none !important; }
}
tr.me td { background: rgba(155,210,43,.14); } tr.me td:first-child { box-shadow: inset 3px 0 0 var(--acc); }



/* ---------- responsive: phones and tablets ---------- */
@media (max-width: 1000px) {
  .lbgrid.six { grid-template-columns: repeat(3, 1fr); }
  .feed-layout { grid-template-columns: minmax(0, 1fr); } /* minmax(0): a scrolling filter row must not widen the column */
}
@media (max-width: 900px) {
  /* no backdrop-filter on the top bar on phones: it would trap the fixed bottom nav inside it */
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(9,10,8,.97); }
  .topbar .inner { height: 58px; gap: 12px; }
  .brand { font-size: 21px; letter-spacing: 1px; gap: 8px; } .brand svg { width: 28px; height: 28px; }
  .brand { font-size: 21px; } .brand svg { width: 28px; height: 28px; }
  .bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(9,10,8,.92); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); border-top: 1px solid var(--line2); }
  /* sentence-case labels: "Community" must fit a sixth of a 390px screen even in a wide fallback font */
  .bnav a { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; min-height: 54px; padding: 6px 0; border-radius: 12px; font: 600 10.5px/1 "Barlow", -apple-system, "Helvetica Neue", Arial, "Liberation Sans", system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
  .bnav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .bnav a svg { width: 22px; height: 22px; }
  .bnav a.on { background: rgba(155,210,43,.14); color: var(--acc2); }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  /* phones: HANDLER lives in the More menu; a floating button would sit on top of content */
  .askfab { display: none !important; }
  .moresheet { align-items: flex-end; justify-content: stretch; padding: 0 0 calc(70px + env(safe-area-inset-bottom)); }
  .moresheet .sheet { width: 100%; border-radius: var(--r) var(--r) 0 0; }
  .cmp-bar { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .grid, .grid.even, .class-editor-grid, .item-kinds { grid-template-columns: 1fr; }
  .hide-phone, .hs { display: none !important; }
  .only-phone { display: block; }
  .grid.has-requests > div:last-child { order: -1; } /* a leader with join requests sees them first */
  .who .sub, .who > div { display: none; }
  .who { gap: 8px; } .coinchip { padding: 5px 9px; font-size: 12.5px; }
  .subnav a { padding: 8px 12px; font-size: 12px; }
  .hero { padding: 26px 18px 22px; } .hero .hstats { gap: 18px; } .hero .hstats div b { font-size: 26px; }
  .lbgrid, .lbgrid.six { grid-template-columns: repeat(2, 1fr); }
  .fields.three { grid-template-columns: 1fr 1fr; }
  .modal-bg { align-items: flex-end; }
  h1.page { font-size: 30px; }
  .panel h2 { padding: 12px 14px 10px; } .pad { padding: 14px; }
  .mcard .side a { font-size: 16px; } .mcard .score { font-size: 20px; }
  .bigstats { grid-template-columns: repeat(3, 1fr); }
  .class-weapons, .class-extras { grid-template-columns: 1fr 1fr; }
  .att-row { grid-template-columns: 92px minmax(0, 1fr); }
  .build-actions .btn, .cmp-pick { min-height: 40px; }
  .sc-media { grid-template-columns: 1fr 1fr; } .sc-facts b { font-size: 16px; }
  th, td { padding: 10px 10px; }
}
@media (max-width: 430px) {
  .wrap { padding: 0 12px 48px; } .topbar .inner { padding: 0 12px; }
  .bnav a { font-size: 10px; }
  .class-weapons, .class-extras, .sc-media { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr 1fr; }
  .moresheet .sheet { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: clamp(38px, 12vw, 56px); }
}
@media (min-width: 901px) {
  .modal-bg { align-items: center; padding: 24px; }
  .modal { border-radius: var(--r); max-height: 88vh; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.pe.av { background: none; border: 0; } /* an emblem in a list circle: the frame is its own edge */
footer .legal a { color: var(--dim); } footer .legal a:hover { color: var(--acc); }
.panel.danger { border-color: rgba(216,67,47,.45); } .panel.danger h2 { color: var(--red); }
.modal.ask .body { padding: 14px 16px 4px; } .modal.ask input { margin-top: 4px; }

.gfact { padding: 8px 10px; border-top: 1px solid var(--line); font-size: 13px; } .gfact .row { gap: 6px; }
.match.mine { border-color: var(--acc); } .slot.mine b { color: var(--acc); }
.shotprev { margin-top: 8px; } .crow.gfrow .chev { align-self: center; color: var(--faint); font-size: 22px; }