/* ═══════════════════════════════════════════════════════════════════════════
   TOXIC // theme layer (loaded last on every page)
   Readable type (Inter body + Barlow Condensed headings), toxic-green accent,
   calmer surfaces, grouped navigation with dropdowns, mobile tab bar.
   Fonts are self-hosted (SIL OFL — see /static/fonts/OFL-*.txt).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* headings: regular-weight display text renders semi-bold, bold renders bold */
@font-face { font-family: "Barlow Condensed"; font-weight: 100 599; font-display: swap;
  src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 100 599; font-display: swap;
  src: url("../fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600 900; font-display: swap;
  src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600 900; font-display: swap;
  src: url("../fonts/barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #0a0d0c;
  --bg-2: #0f1311;
  --panel: #141917;
  --panel-2: #1a201d;
  --panel-3: #222a26;
  --bone: #eef3ef;
  --bone-dim: #cdd6d0;
  --muted: #a0aca4;
  --hud: #bcd3c2;
  --line: rgba(214, 240, 222, .10);
  --line-2: rgba(214, 240, 222, .18);
  --hazard: #ff8a1f;
  --ok: #8ad86b;
  --r: 10px;
  --nav-h: 66px;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", "Bahnschrift", sans-serif;
  --focus: 0 0 0 3px rgba(61, 220, 110, .45);
}

/* ── base type ───────────────────────────────────────────── */
body { font: 400 16px/1.6 var(--body); letter-spacing: 0; font-feature-settings: "cv11", "ss03"; text-rendering: optimizeLegibility; }
body::after { display: none; }                        /* no animated grain over the text */
body::before { filter: opacity(.045); }
p, li { color: var(--bone-dim); }
.card p, .card li { color: var(--bone-dim); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: .01em; line-height: 1.08; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.12rem; }
small, .small { font-size: .875rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus); }
::selection { color: #04140a; }

/* every tiny ALL-CAPS label: bigger, tighter, heavier — far easier to read */
.eyebrow, .kicker, .stat-label, .card-sub, .table th, .badge, .chip, .sub, .page-head .sub, .brand-tag,
.wpn-class, .wpn-tier-l, .wpn-patched, .slot-table .st-slot, .arm-count, .fresh-pill, .arm-crumbs, .wpn-go,
.code-pill .copy-label, .att-count, .kv dt, .empty, .step, .field > label, .form label:not(.check), .label,
.mem-tile span, .ch-top, .or, .fs legend, .fs-num, .wpick-tier, .seg-pick span small, .trend,
.tabs > a, .tabs > button, .subnav a, .subnav .subnav-title, .subnav h4, .user-drop a, .user-drop button,
.footer .legal, input[type=file]::file-selector-button, .boot-meta {
  letter-spacing: .05em !important; font-weight: 600;
}
.eyebrow, .kicker, .stat-label, .card-sub, .table th, .badge, .chip, .wpn-class, .wpn-tier-l, .wpn-patched, .slot-table .st-slot,
.arm-count, .fresh-pill, .code-pill .copy-label, .att-count, .mem-tile span, .ch-top, .fs legend, .fs-num, .wpick-tier,
.field > label, .form label:not(.check), .label, .subnav .subnav-title, .subnav h4, .kv dt {
  font-size: max(.78rem, 12.5px) !important;
}
.empty { text-transform: none; font-size: .95rem; color: var(--muted); }
.eyebrow::before { width: 18px; }
.sub, .page-head .sub { text-transform: none; font-size: 1rem; font-weight: 500; color: var(--bone-dim); opacity: 1; }
.muted { color: var(--muted); }

/* ── buttons ─────────────────────────────────────────────── */
.btn { font: 650 .92rem/1 var(--body); letter-spacing: .04em; text-transform: none; --c: 8px; }
.btn-sm { font-size: .85rem; }
.btn-primary, .btn-primary:hover { --b-fg: #04140a; color: #04140a; }
.btn-primary:hover { filter: drop-shadow(0 0 12px rgba(61, 220, 110, .45)); }

/* ── page chrome / cards ─────────────────────────────────── */
.page-head {
  clip-path: none; border-radius: var(--r); padding: 26px 28px 24px; border: 1px solid var(--line);
  background: linear-gradient(110deg, rgba(61, 220, 110, .08), transparent 45%), linear-gradient(var(--panel), var(--bg-2));
}
.page-head::before { opacity: .06; }
.page-head::after { width: 4px; background: var(--orange); border-radius: 4px 0 0 4px; }
.hud-title { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--bone); letter-spacing: .02em; }
.hud-title::before { width: 6px; height: .9em; border-radius: 2px; clip-path: none; }
.hud-title::after { height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); -webkit-mask-image: none; mask-image: none; }
.stencil:not(.hero *) { background: none; -webkit-text-fill-color: currentColor; }

.card {
  border-radius: var(--r); border-color: var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--panel);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 28px -20px rgba(0, 0, 0, .9);
}
.card::before { display: none; }                      /* drop the busy HUD corner brackets */
.card:hover { border-color: rgba(61, 220, 110, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 16px 34px -22px rgba(61, 220, 110, .35); }
.card.accent { border-left: 3px solid var(--orange); }
.card-title { font-weight: 700; letter-spacing: .02em; font-size: 1.3rem; }
.stat-value { font-weight: 700; }
.table { border-radius: var(--r); }
.table th { background: rgba(255, 255, 255, .035); color: var(--hud); }
.table td { color: var(--bone-dim); }
.table tbody tr:hover td { background: rgba(61, 220, 110, .04); }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { border-radius: 8px; font-size: 1rem; }
.empty { border-radius: var(--r); }
.subnav { border-radius: var(--r); }
.subnav a { text-transform: none; font-size: .95rem; font-weight: 550; border-radius: 6px; }
.subnav a.active, .subnav a[aria-current] { background: rgba(61, 220, 110, .10); color: var(--bone); }
.tabs > a, .tabs > button { text-transform: none; font-size: .95rem; }

/* ═════════════ header / navigation ═════════════ */
.nav { background: rgba(10, 13, 12, .86); border-bottom: 1px solid var(--line); }
.nav.scrolled { background: rgba(10, 13, 12, .97); }
.nav::after { background: linear-gradient(90deg, transparent, var(--orange) 25%, transparent 60%); opacity: .45; }
.nav-inner { gap: 18px; max-width: 1320px; }
.brand-name { font: 700 1.6rem/1 var(--display); letter-spacing: .08em; }
.brand-tag { color: var(--orange); font-size: .66rem !important; margin-top: 2px; }
.nav-links { gap: 2px; justify-content: center; }
.nav-links > a, .nav-group > .nav-top {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 8px;
  font: 600 .95rem/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--bone-dim);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.nav-links > a::before { display: none; }
.nav-links > a:hover, .nav-group > .nav-top:hover, .nav-group.open > .nav-top, .nav-group:focus-within > .nav-top { color: var(--bone); background: rgba(255, 255, 255, .05); }
.nav-links > a.active, .nav-group.active > .nav-top { color: var(--bone); background: rgba(61, 220, 110, .10); box-shadow: inset 0 -2px 0 var(--orange); }
.nav-top .chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; transition: transform .2s; }
.nav-group { position: relative; }
.nav-group.open .chev { transform: rotate(-135deg) translateY(-1px); }
.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; min-width: 300px; padding: 8px; z-index: 20;
  display: none; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .95);
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }  /* hover bridge */
.nav-group.open > .nav-menu { display: block; animation: drop .18s var(--ease); }
@media (hover: hover) and (min-width: 961px) { .nav-group:hover > .nav-menu { display: block; } .nav-group:hover .chev { transform: rotate(-135deg) translateY(-1px); } }
.nav-menu a { text-transform: none; letter-spacing: 0; font: 400 1rem/1.3 var(--body); white-space: normal; position: static;
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; color: var(--bone); }
.nav-menu a::before { content: none; display: none; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(61, 220, 110, .09); color: var(--bone); }
.nav-menu a.active { background: rgba(61, 220, 110, .13); }
.nav-menu .ni { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--panel-3); font-size: 1.05rem; line-height: 1; }
.nav-menu b { display: block; font-weight: 650; font-size: .95rem; line-height: 1.25; }
.nav-menu small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: 2px; }
.nav-menu .tag { margin-left: 6px; padding: 1px 6px; border-radius: 99px; font-size: .68rem; font-weight: 700; color: #04140a; background: var(--orange); vertical-align: 1px; }
.nav-right { gap: 10px; }
.nav-cta { white-space: nowrap; }
.user-btn { border-radius: 99px; padding: 3px 10px 3px 3px; font: 600 .9rem/1 var(--body); letter-spacing: 0; }
.user-btn .avatar { border-radius: 50%; clip-path: none; }
.user-btn .caret { border-color: var(--muted); }
.user-drop { border-radius: 12px; }
.user-drop a, .user-drop button { text-transform: none; font-size: .95rem; border-radius: 8px; }
.user-drop .who b { font-family: var(--body); font-weight: 700; letter-spacing: 0; }

@media (max-width: 1180px) { .nav-links > a, .nav-group > .nav-top { padding: 9px 9px; font-size: .9rem; } .nav-inner { gap: 12px; } }
@media (max-width: 960px) { .nav-right .nav-cta, .nav-right .burger { display: none !important; } }

/* drawer (mobile menu) — grouped */
.drawer { gap: 2px; padding: 14px 16px calc(96px + env(safe-area-inset-bottom)); background: var(--bg-2); }
.drawer::before { content: none; }
.drawer .dg-title { margin: 16px 8px 6px; font: 700 .78rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.drawer a.dl { padding: 13px 10px; border-radius: 10px; border-bottom: 0; font: 600 1.06rem/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--bone); gap: 12px; justify-content: flex-start; }
.drawer a.dl .ni { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--panel-3); font-size: 1rem; flex: none; }
.drawer a.dl::after { margin-left: auto; color: var(--muted); }
.drawer a.dl.active { background: rgba(61, 220, 110, .11); color: var(--bone); }
.drawer a.dl.active::after { color: var(--orange); }
.drawer .drawer-user { display: flex; align-items: center; gap: 12px; padding: 6px 8px 14px; border-bottom: 1px solid var(--line); }
.drawer .drawer-user .avatar { border-radius: 50%; clip-path: none; }

/* bottom tab bar on phones */
.tabbar { display: none; }
@media (max-width: 960px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(12, 16, 14, .97); border-top: 1px solid var(--line-2);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 4px 2px;
    border: 0; border-radius: 10px; background: none; color: var(--muted); font: 600 .72rem/1.1 var(--body); cursor: pointer;
  }
  .tabbar .ti { width: 22px; height: 22px; }
  .tabbar a.active, .drawer-open .tabbar button { color: var(--bone); background: rgba(61, 220, 110, .10); }
  .tabbar a.active .ti, .drawer-open .tabbar button .ti { color: var(--orange); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .flashes { top: calc(var(--nav-h) + 10px); }
  .drawer { bottom: 0; z-index: 999; }
}

/* icons */
.ic { width: 20px; height: 20px; flex: none; }
.nav-menu .ni .ic, .drawer .ni .ic { width: 18px; height: 18px; color: var(--orange); }
.mem-ico { display: inline-grid; place-items: center; width: 22px; color: var(--muted); }
.mem-ico .ic { width: 18px; height: 18px; }
.subnav a.active .mem-ico, .subnav a[aria-current] .mem-ico { color: var(--orange); }
.rank-pos { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 6px; font: 700 .95rem/1 var(--display); color: var(--bone-dim); background: var(--panel-3); }
.rank-pos.top { color: #04140a; background: var(--orange); }
.cp-key { font: 700 .7rem/1 var(--body) !important; letter-spacing: .06em; }

/* footer */
.footer { background: linear-gradient(var(--bg-2), #070908); }
.footer h4 { font-size: 1rem; letter-spacing: .06em; }
.footer a:not(.brand) { font-size: .95rem; }
.footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr 1fr; } }

/* ── member area ─────────────────────────────────────────── */
.mem-nav a { text-transform: none; }
.mem-tile b { font-weight: 700; }
.ch-title, .wpick-name, .camo-row-top b, .ms-name b, .seg-pick span { font-weight: 700; }

/* ── armory ──────────────────────────────────────────────── */
.wpn-name, .bp-weapon, .tc-title, .cb-title, .wcat-name, .pick .weapon { font-weight: 700; letter-spacing: .02em; }
.wpn-go { opacity: .85; transform: none; }

/* ── hero keeps its stencil logo font ───────────────────── */
.hero h1 { font-family: "Anton", "Impact", sans-serif; font-weight: 400; }
.hero .tagline { font-weight: 700; letter-spacing: .08em; }

/* tables scroll sideways on phones instead of squashing */
@media (max-width: 700px) { .table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } }

@media (prefers-reduced-motion: reduce) { #main { animation: none; } }

/* ── roster: one section per rank, colour-coded ── */
.rank-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 34px; }
@media (max-width: 760px) { .rank-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rank-stat { color: inherit; text-decoration: none; --orange: var(--rk); }
.rank-stat .stat-value { color: var(--rk, var(--bone)); }
.rank-leader { --rk: #ff4d4d; } .rank-officer { --rk: #ff9a3c; } .rank-veteran { --rk: #b48cf0; }
.rank-member { --rk: #3ddc6e; } .rank-trial { --rk: #9aa4a0; }
.rank-block .hud-title::before { background: var(--rk, var(--orange)); }
.rank-block { scroll-margin-top: calc(var(--nav-h) + 16px); }
.rank-tag { font: 700 .74rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--rk, var(--muted)); margin-top: 4px; }
.rank-empty { padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); font-size: .95rem; }

/* ═════════════ Hero video + clan reel ═════════════ */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; opacity: .78; pointer-events: none; filter: saturate(.85) contrast(1.05); }
.hero.has-video .hero-dots { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } .hero.has-video .hero-dots { display: flex; } }
@media (max-width: 640px) { .hero-video { opacity: .6; } }
.reel { position: relative; margin: 0; padding: 10px; border: 1px solid var(--line-2); background: rgba(20, 23, 21, .7); }
.reel video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; object-fit: cover; }
.reel-c { position: absolute; width: 18px; height: 18px; border: 2px solid var(--orange); pointer-events: none; }
.reel-c.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.reel-c.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.reel-c.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.reel-c.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.reel figcaption { display: flex; align-items: center; gap: 14px; padding: 10px 4px 2px; font: 500 .78rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #9aa4a0); }
.reel figcaption a { margin-left: auto; color: var(--orange); text-decoration: none; }
.reel figcaption a:hover { text-decoration: underline; }
.reel .rec { color: var(--orange); display: inline-flex; align-items: center; gap: 7px; }
.reel .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; }
.reel-compact { max-width: 880px; margin: 0 0 22px; }

/* ═════════════ Page headers: clip-frame banners ═════════════ */
.page-head {
  --head-img: url("../img/head-default.jpg");
  background:
    linear-gradient(100deg, rgba(17, 21, 19, .97) 28%, rgba(17, 21, 19, .84) 52%, rgba(17, 21, 19, .5) 100%),
    linear-gradient(110deg, rgba(61, 220, 110, .08), transparent 45%),
    var(--head-img) center 45% / cover no-repeat,
    var(--panel);
}
.page-head::before { opacity: .08; -webkit-mask-image: linear-gradient(100deg, #000 20%, transparent 60%); mask-image: linear-gradient(100deg, #000 20%, transparent 60%); }
body.page-roster .page-head  { --head-img: url("../img/head-roster.jpg"); }
body.page-gallery .page-head { --head-img: url("../img/head-gallery.jpg"); }
body.page-apply .page-head   { --head-img: url("../img/head-apply.jpg"); }
body.page-armory .page-head  { --head-img: url("../img/head-armory.jpg"); }
body.page-scrims .page-head  { --head-img: url("../img/head-gallery.jpg"); }
body.member-area .page-head  { --head-img: url("../img/head-default.jpg"); }
@media (max-width: 640px) {
  .page-head { background:
    linear-gradient(180deg, rgba(17, 21, 19, .78), rgba(17, 21, 19, .94)),
    var(--head-img) 60% 45% / cover no-repeat,
    var(--panel); }
}