/* Squad Up Syndicate · DMZ Intel
   Design: a syndicate field dossier. Matte black, Syndicate crimson for anything you act on,
   bone-white text, stencil wordmark, mono readouts for numbers, red tape bands and corner brackets
   as the signature. One committed dark look.  */
:root{
  --bg:#0b0a0a;
  --bg-2:#100e0e;
  --panel:#151313;
  --cell:#1c1919;
  --line:#2d2828;
  --line-2:#3a3333;
  --fg:#efe9e1;
  --muted:#a69f97;
  --dim:#6f6862;
  --red:#e3202b;
  --red-2:#b3141d;
  --red-deep:#5c0a0f;
  --red-ink:#ff5a60;
  --wf:#e2664f;
  --sc:#e3b73c;
  --sv:#3cb3a5;
  --pr:#d98b3b;
  --good:#7fc46a;
  --warn:#e3a54c;
  --stealth:#89b6de;
  --stack:#b99fe4;
  --r-common:#a7a29c;
  --r-uncommon:#62c15b;
  --r-rare:#4c93e6;
  --r-epic:#a866e3;
  --r-legendary:#ea9a33;
  --r-ultra:#ff3b45;
  --f-brand:"Saira Stencil One","Saira Condensed",Impact,"Arial Narrow",sans-serif;
  --f-display:"Saira Condensed","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Share Tech Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --hexclip:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  --shieldclip:polygon(0 0,100% 0,100% 64%,50% 100%,0 64%);
  --wrap:1200px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:84px}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-size:16px;line-height:1.55;
  background-image:
    radial-gradient(90% 40% at 85% -5%, rgba(227,32,43,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px);
  -webkit-tap-highlight-color:transparent;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:60;background:var(--bg)}
img{max-width:100%}
a{color:var(--red-ink);text-underline-offset:3px}
a:hover{color:var(--fg)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0;text-align:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--red);color:#fff;padding:8px 12px;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,72px)}
h2{font-size:clamp(26px,3.4vw,36px)}
h3{font-size:21px;letter-spacing:.05em}
h4{font-size:17px}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--red)}
.lede{color:var(--muted);font-size:17.5px;max-width:64ch}
.mono{font-family:var(--f-mono)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.small{font-size:14px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top, 0px);z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--red) 0 18%,transparent 18%)}
.hdr{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);flex-shrink:0}
.brand img{width:40px;height:40px;object-fit:contain;display:block}
.brand-words{display:flex;flex-direction:column;line-height:.92}
.brand-words b{font-family:var(--f-brand);font-weight:400;font-size:19px;letter-spacing:.06em;text-transform:uppercase}
.brand-words small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;color:var(--red-ink);text-transform:uppercase;margin-top:3px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{font-family:var(--f-display);font-weight:600;font-size:15.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:8px 10px;position:relative;white-space:nowrap}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--red)}
.hdr-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);color:var(--fg)}
.icon-btn:hover{border-color:var(--line-2)}
.icon-btn svg{width:20px;height:20px}
.search-btn{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:14.5px;min-width:200px}
.search-btn svg{width:18px;height:18px}
.search-btn kbd{margin-left:auto}
kbd{font-family:var(--f-mono);font-size:11px;padding:2px 6px;border:1px solid var(--line-2);color:var(--muted)}
.menu-btn{display:none}
.drawer{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;min-height:66px;padding-left:var(--gutter-l);padding-right:var(--gutter-r);border-bottom:1px solid var(--line)}
.drawer nav{display:flex;flex-direction:column;padding:12px var(--gutter-r) 24px var(--gutter-l);overflow:auto}
.drawer nav a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg);font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:.06em;text-transform:uppercase}
.drawer nav a small{font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.08em;color:var(--dim)}
.drawer nav a[aria-current="page"]{color:var(--red-ink)}
.drawer .btn{margin:0 var(--gutter-r) 0 var(--gutter-l)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 18px;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--fg);border:1px solid var(--line-2);background:var(--cell);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.btn:hover{color:var(--fg);border-color:var(--muted)}
.btn svg{width:18px;height:18px}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red-2);border-color:var(--red-2);color:#fff}
.btn-ghost{background:transparent}
.btn-sm{min-height:38px;padding:6px 12px;font-size:14.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.discord-btn[data-pending]{opacity:.7}

/* ---------- Heroes ---------- */
.home-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.home-hero .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:56px 64px}
.hero-mark{font-family:var(--f-brand);font-weight:400;font-size:clamp(18px,2.2vw,22px);letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink);display:flex;align-items:center;gap:12px}
.hero-mark img{width:34px;height:34px;object-fit:contain}
.home-hero h1{font-size:clamp(46px,8vw,104px);line-height:.88;margin-top:14px}
.home-hero h1 span{display:block;color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.home-hero .lede{margin-top:18px}
.hero-search{margin-top:26px;display:flex;align-items:center;gap:12px;width:100%;max-width:560px;min-height:56px;padding:0 16px;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);font-size:16.5px;text-align:left}
.hero-search:hover{border-color:var(--muted)}
.hero-search svg{width:20px;height:20px;color:var(--red-ink)}
.hero-search kbd{margin-left:auto}
.hero .btn-row,.home-hero .btn-row{margin-top:18px}
.dossier{position:relative;border:1px solid var(--line-2);background:linear-gradient(160deg,var(--panel),var(--bg-2));padding:20px 20px 18px;display:flex;flex-direction:column;gap:14px}
.dossier-top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;border-bottom:1px dashed var(--line-2);padding-bottom:10px}
.dossier-top b{color:var(--red-ink);font-weight:400}
.dossier dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dossier dl div{border-left:2px solid var(--red);padding-left:10px;min-width:0}
.dossier dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.dossier dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.05;font-variant-numeric:tabular-nums}
.dossier .stamp{position:absolute;right:14px;bottom:12px;font-family:var(--f-brand);font-size:15px;letter-spacing:.12em;color:var(--red);border:2px solid var(--red);padding:2px 8px;transform:rotate(-6deg);opacity:.85}
.tape{height:14px;background:repeating-linear-gradient(-45deg,var(--red) 0 12px,var(--bg) 12px 24px);opacity:.9}

.page-hero{border-bottom:1px solid var(--line);position:relative}
.page-hero .wrap{display:flex;flex-direction:column;gap:14px;padding-block:38px 30px}
.page-hero .lede{max-width:70ch}
.readouts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.readouts div{border:1px solid var(--line);background:var(--panel);padding:7px 14px;min-width:110px}
.readouts dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.readouts dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.readouts{margin:0}

/* ---------- Sections ---------- */
main{display:block}
.section{padding-block:40px}
.section + .section{border-top:1px solid var(--line)}
.section-head{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.section-head p{color:var(--muted);max-width:68ch}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stack{display:flex;flex-direction:column;gap:14px}

/* Cards with corner brackets */
.card{position:relative;border:1px solid var(--line);background:var(--panel);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.bracket::before,.bracket::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--red);border-style:solid;pointer-events:none}
.bracket::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
.bracket::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.card h3{font-size:20px}
.card p{color:var(--muted);font-size:15px}

/* Sector tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tile{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;min-height:168px;border:1px solid var(--line);background:var(--panel);text-decoration:none;color:var(--fg);overflow:hidden;min-width:0}
.tile:hover{border-color:var(--line-2);color:var(--fg)}
.tile:hover .tile-go{color:var(--red-ink);transform:translateX(3px)}
.tile .tile-n{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;color:var(--dim)}
.tile h3{font-size:24px}
.tile p{color:var(--muted);font-size:14.5px}
.tile .tile-count{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tile .tile-count b{font-family:var(--f-display);font-weight:700;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.tile .tile-count span{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.tile-go{font-family:var(--f-mono);font-size:13px;color:var(--muted);transition:transform .15s}
.tile.feature{grid-column:span 2;background:linear-gradient(135deg,color-mix(in srgb,var(--red) 22%,var(--panel)),var(--panel) 65%);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.tile.feature h3{font-size:32px}

/* Quick-answer list */
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qa a{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline;padding:14px 16px;border:1px solid var(--line);background:var(--panel);text-decoration:none;color:var(--fg)}
.qa a:hover{border-color:var(--line-2);color:var(--fg)}
.qa .q{grid-column:1/-1;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.qa .a-big{font-family:var(--f-display);font-weight:700;font-size:28px;line-height:1;color:var(--red-ink);font-variant-numeric:tabular-nums}
.qa .a-txt{color:var(--fg);font-size:15px}

/* Chips & filters */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:14px;padding:6px 10px;border:1px solid var(--line);border-left:3px solid var(--t,var(--dim));background:var(--cell);color:var(--fg);text-decoration:none;min-height:34px}
.chip:hover{border-color:var(--muted);border-left-color:var(--t,var(--dim));color:var(--fg)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px}
.filter-group{display:flex;flex-wrap:wrap;gap:6px}
.filter{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--line);color:var(--muted);background:var(--panel);min-height:38px}
.filter[aria-pressed="true"]{color:var(--fg);border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--panel))}
.field-search{flex:1 1 260px;min-width:0;min-height:44px;padding:8px 14px;border:1px solid var(--line);background:var(--cell);font-size:16px}
.field-search::placeholder{color:var(--dim)}
.result-count{font-family:var(--f-mono);font-size:12px;color:var(--dim)}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel)}
table.data{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
table.data th,table.data td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.data thead th{position:sticky;top:0;background:var(--bg-2);font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;z-index:1}
table.data th[data-sort]{cursor:pointer}
table.data th[data-sort]::after{content:" \2195";color:var(--dim)}
table.data th[aria-sort="ascending"]::after{content:" \2191";color:var(--red-ink)}
table.data th[aria-sort="descending"]::after{content:" \2193";color:var(--red-ink)}
table.data tbody tr:hover{background:color-mix(in srgb,var(--red) 4%,transparent)}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:target,table.data tbody tr.flash{background:color-mix(in srgb,var(--red) 16%,transparent)}
table.data td.name{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
table.data td.num{text-align:right}
table.data th.num{text-align:right}
table.data td .sub{display:block;font-family:var(--f-body);font-weight:400;font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);white-space:normal}
.empty{padding:18px;color:var(--muted)}

/* Rarity */
.rar{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--rc,var(--muted))}
.rar::before{content:"";width:8px;height:8px;background:var(--rc,var(--muted))}
.rar-common{--rc:var(--r-common)}.rar-uncommon{--rc:var(--r-uncommon)}.rar-rare{--rc:var(--r-rare)}.rar-epic{--rc:var(--r-epic)}.rar-legendary{--rc:var(--r-legendary)}.rar-ultra{--rc:var(--r-ultra)}
.tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor;white-space:nowrap;display:inline-block}
.tag-sell{color:var(--good)}.tag-keep{color:var(--warn)}.tag-some{color:var(--sc)}
.conf-low{color:var(--warn)}
.conf-pill{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--warn);border:1px dashed var(--warn);padding:1px 5px;text-transform:uppercase;white-space:nowrap}

/* Lists, callouts */
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.facts li{position:relative;padding-left:20px;color:var(--fg)}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}
.callout{border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 7%,var(--panel));padding:12px 14px;font-size:15px}
.callout b{color:var(--warn)}
.callout.red{border-color:color-mix(in srgb,var(--red) 50%,var(--line));background:color-mix(in srgb,var(--red) 8%,var(--panel))}
.callout.red b{color:var(--red-ink)}

/* Ladder (slot costs etc.) */
.ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ladder div{border:1px solid var(--line);background:var(--panel);padding:12px;display:flex;flex-direction:column;gap:4px;position:relative}
.ladder div::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--w,20%);background:var(--red)}
.ladder span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.ladder b{font-family:var(--f-display);font-weight:700;font-size:26px;font-variant-numeric:tabular-nums}

/* Boss cards */
.boss{position:relative;border:1px solid var(--line);background:var(--panel);display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;min-width:0}
.boss .bar{width:6px;background:var(--red)}
.boss .body{padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.boss h3{font-size:24px}
.boss dl{margin:0;display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 12px;font-size:15px}
.boss dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.boss dd{margin:0}

/* Guide */
.guide-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}
.toc{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.toc a{padding:6px 14px;color:var(--muted);text-decoration:none;font-size:14.5px;border-left:2px solid transparent;margin-left:-1px}
.toc a:hover{color:var(--fg);border-left-color:var(--red)}
.guide-sec{padding-block:6px 30px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.guide-sec:last-child{border-bottom:0}
.guide-sec h2{font-size:28px;display:flex;align-items:baseline;gap:12px}
.guide-sec h2 .n{font-family:var(--f-mono);font-size:13px;color:var(--red-ink);letter-spacing:.1em}
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px}
.region{border:1px solid var(--line);background:var(--panel);padding:14px;display:flex;flex-direction:column;gap:6px}
.region h3{font-size:19px}
.region p{color:var(--muted);font-size:14.5px}
.faq details{border:1px solid var(--line);background:var(--panel);margin-bottom:8px}
.faq summary{cursor:pointer;padding:14px 16px;font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:.03em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--red-ink)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 16px 16px;color:var(--muted)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);margin-left:6px}
.timeline li{position:relative;padding:0 0 22px 22px}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;background:var(--bg);border:2px solid var(--red);transform:rotate(45deg)}
.timeline .when{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--red-ink)}
.timeline h3{font-size:19px;margin:2px 0 6px}
.timeline ul{margin:0;padding-left:18px;color:var(--muted);font-size:15px}

/* Discord band */
.join{position:relative;border:1px solid color-mix(in srgb,var(--red) 50%,var(--line));background:linear-gradient(120deg,color-mix(in srgb,var(--red) 20%,var(--panel)),var(--panel) 60%);padding:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;overflow:hidden}
.join h2{font-size:clamp(28px,4vw,44px)}
.join p{color:var(--muted);margin-top:8px;max-width:56ch}
.join .ghost-mark{position:absolute;right:-10px;bottom:-26px;font-family:var(--f-brand);font-size:120px;line-height:1;color:color-mix(in srgb,var(--red) 18%,transparent);pointer-events:none;letter-spacing:.04em}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:24px;background:var(--bg-2)}
.site-footer .tape{height:8px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px;padding-block:36px 24px}
.foot-grid h4{font-family:var(--f-mono);font-weight:400;font-size:11.5px;letter-spacing:.16em;color:var(--muted);margin-bottom:10px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.foot-grid a{color:var(--fg);text-decoration:none;font-size:15px}
.foot-grid a:hover{color:var(--red-ink)}
.foot-legal{border-top:1px solid var(--line);padding-block:16px 28px;font-size:13px;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.foot-about p{color:var(--muted);font-size:14.5px;margin-top:10px;max-width:42ch}

/* Search palette */
.palette{position:fixed;inset:0;z-index:80;background:rgba(5,4,4,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:flex-start;padding:max(10vh, calc(env(safe-area-inset-top,0px) + 16px)) var(--gutter-r) 16px var(--gutter-l)}
.pal-box{width:min(680px,100%);max-height:min(72vh,640px);display:flex;flex-direction:column;border:1px solid var(--line-2);background:var(--panel);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.pal-in{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line)}
.pal-in svg{width:20px;height:20px;color:var(--red-ink);flex-shrink:0}
.pal-in input{flex:1;min-width:0;min-height:58px;border:0;background:transparent;font-size:18px;outline:none}
.pal-list{list-style:none;margin:0;padding:6px;overflow:auto}
.pal-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;text-decoration:none;color:var(--fg);border-left:2px solid transparent}
.pal-list a[aria-selected="true"],.pal-list a:hover{background:var(--cell);border-left-color:var(--red)}
.pal-list .pt{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:.03em;text-transform:uppercase}
.pal-list .pk{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;align-self:center}
.pal-list .pd{grid-column:1/-1;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-foot{border-top:1px solid var(--line);padding:8px 14px;font-family:var(--f-mono);font-size:11px;color:var(--dim);display:flex;gap:14px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom, 0px));z-index:90;background:var(--fg);color:var(--bg);padding:10px 16px;font-weight:600;font-size:14.5px;max-width:calc(100vw - 32px);box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ---------- Responsive ---------- */
@media (max-width:1320px){
  .search-btn{min-width:0}
  .search-btn span{display:none}
}
@media (max-width:1180px){
  .nav a{padding:8px 7px;font-size:14.5px;letter-spacing:.06em}
  .search-btn kbd{display:none}
  .hdr .discord-btn span{display:none}
}
@media (max-width:1100px){
  .nav,.hdr .discord-btn{display:none}
  .menu-btn{display:grid}
  .hdr-actions{margin-left:auto}
  .search-btn{width:42px;padding:0;justify-content:center}
}
@media (max-width:960px){
  .home-hero .wrap{grid-template-columns:minmax(0,1fr);padding-block:36px 40px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-about{grid-column:1/-1}
  .guide-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;border-left:0;gap:6px}
  .toc a{border:1px solid var(--line);margin:0;padding:6px 10px;font-size:13.5px}
  .ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.page-hero.compact .wrap{padding-block:22px 16px;gap:8px}
.page-hero.compact h1{font-size:clamp(28px,5vw,46px)}
.page-hero.compact .lede{font-size:15px;max-width:64ch}
@media (max-width:640px){
  body{font-size:15.5px}
  .page-hero .wrap{padding-block:18px 14px;gap:6px}
  .page-hero h1{font-size:30px;line-height:1}
  .page-hero .lede{font-size:14.5px}
  .page-hero .readouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:4px}
  .page-hero .readouts div{min-width:0;padding:6px 10px}
  .page-hero .readouts dd{font-size:19px}
  .page-hero.compact .wrap{padding-block:14px 12px;gap:4px} .page-hero.compact .lede{display:none} .page-hero.compact h1{font-size:26px}
  .tiles,.grid-2,.grid-3,.qa{grid-template-columns:minmax(0,1fr)}
  .tile.feature{grid-column:auto}
  .join{grid-template-columns:minmax(0,1fr);padding:22px}
  .dossier dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .boss dl{grid-template-columns:minmax(0,1fr)}
  .boss dt{padding-top:6px}
  .ladder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-words b{font-size:16px}
  .section{padding-block:30px}
}
.tile-map{background-size:cover;background-position:center right;background-repeat:no-repeat}
.tile-map::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--panel) 34%,color-mix(in srgb,var(--panel) 28%,transparent) 100%);z-index:0}
.tile-map:hover::before{background:linear-gradient(90deg,var(--panel) 32%,color-mix(in srgb,var(--panel) 25%,transparent) 100%)}
.tile-map > *{position:relative;z-index:1}
@media (max-width:640px){
  .table-wrap table.data td.name,.table-wrap table.data th:first-child{position:sticky;left:0;background:var(--panel);z-index:1;box-shadow:1px 0 0 var(--line)}
  .table-wrap table.data thead th:first-child{z-index:2}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Source lists */
details.srcs{border:1px solid var(--line);background:var(--panel)}
details.srcs summary{cursor:pointer;padding:12px 16px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);list-style:none}
details.srcs summary::-webkit-details-marker{display:none}
details.srcs summary::before{content:"+ ";color:var(--red-ink)}
details.srcs[open] summary::before{content:"\2212  "}
details.srcs ul{margin:0;padding:0 16px 16px 34px;display:flex;flex-direction:column;gap:4px;font-size:14.5px}

details.more-facts ul.facts li{list-style:none}
details.more-facts > ul{padding-left:16px!important}

/* Nav dropdown */
.nav-dd{position:relative}
.nav-dd summary{list-style:none;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:15.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px;position:relative;white-space:nowrap}
.nav-dd summary::-webkit-details-marker{display:none}
.nav-dd summary::after{content:" \25BE";font-size:12px}
.nav-dd summary:hover,.nav-dd[open] summary{color:var(--fg)}
.nav-dd summary[aria-current="page"]{color:var(--fg)}
.nav-dd summary[aria-current="page"]::before{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--red)}
.nav-menu{position:absolute;left:0;top:100%;min-width:230px;margin-top:6px;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 20px 50px rgba(0,0,0,.6);padding:6px;display:flex;flex-direction:column;z-index:60}
.nav-menu a{display:flex;flex-direction:column;gap:1px;padding:9px 12px!important;font-family:var(--f-body)!important;text-transform:none!important;letter-spacing:0!important;font-size:15px!important;color:var(--fg)!important;border-left:2px solid transparent}
.nav-menu a:hover{background:var(--cell);border-left-color:var(--red)}
.nav-menu a[aria-current="page"]{border-left-color:var(--red)}
.nav-menu a::after{display:none!important}
.nav-menu b{font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.nav-menu small{font-size:12.5px;color:var(--muted)}

/* Shared tracker controls on database pages */
.key-state{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border:1px solid var(--line-2);min-width:72px;text-align:center;color:var(--muted);white-space:nowrap}
.key-state.found,li.found .key-state{color:var(--sc);border-color:var(--sc)}
.key-state.used,li.used .key-state{color:var(--good);border-color:var(--good)}
.tick{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;cursor:pointer}
label.tick{justify-content:flex-start}
.tick input{accent-color:var(--red);width:18px;height:18px}

/* icons cropped from the in-game captures */
.ic{width:40px;height:40px;object-fit:cover;border-radius:4px;vertical-align:middle;margin-right:10px;background:#15171a;box-shadow:0 0 0 1px var(--line);flex:none}
td.name{min-width:220px}
td.name .ic{float:left;margin:-2px 10px 4px 0}
td.name .nm-line{display:inline;line-height:1.3}
td.name .nm-line .flag{white-space:nowrap}
.fl-ver{font-family:var(--f-mono);font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:1px 5px;border:1px solid var(--good);color:var(--good);white-space:nowrap;margin-left:6px;vertical-align:middle}
.grid-chip{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;padding:1px 6px;border:1px solid var(--line-2);color:var(--muted);margin-left:6px;vertical-align:middle}
/* join page steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:12px}
.steps li{counter-increment:st;position:relative;border:1px solid var(--line);background:var(--panel);padding:16px 18px 16px 64px;min-width:0}
.steps li::before{content:counter(st);position:absolute;left:16px;top:16px;width:32px;height:32px;display:grid;place-items:center;background:var(--red);color:#fff;font-family:var(--f-brand,inherit);font-weight:700;font-size:18px;clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)}
.steps h3{font-size:19px;margin:0 0 6px}
.steps p{color:var(--muted);font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.steps b{color:var(--fg)}
@media (max-width:640px){.steps li{padding:14px 14px 14px 56px}.steps li::before{left:12px;top:14px;width:30px;height:30px;font-size:16px}}