/* =================================================================
   FIVE STAR INTEL — design system (GTA VI)
   Neon sunset on night navy. Change a colour here, it changes everywhere.
   ================================================================= */
:root{
  color-scheme: dark;
  --bg:#0B0B14; --rail:#0E0D1A; --panel:#141228; --panel-2:#1B1834; --panel-3:#241F44;
  --line:#2A2548; --line-2:#3B3462;
  --text:#F5F2FF; --muted:#B3ACD3; --dim:#938CB8;
  --sun:#FF2E88; --sun-2:#FF8A3D; --sun-soft:rgba(255,46,136,.14);
  --teal:#19D3C5; --grad:linear-gradient(100deg,#FF2E88 0%,#FF5A5F 50%,#FF8A3D 100%);
  --ok:#4CC38A; --warn:#F2C14E; --danger:#FF5C6C;
  --display:"Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --body:"Barlow", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r:12px; --rail-w:240px;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-padding-top:80px}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--sun-2)}
:focus-visible{outline:2px solid var(--sun); outline-offset:2px}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0}
img{max-width:100%; display:block}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; z-index:200; background:var(--sun); color:#1A0712; padding:8px 12px; border-radius:8px; font-weight:700}
.skip:focus{left:8px}

/* ---------- shell ---------- */
.app{min-height:100vh; display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr)}
.rail{position:sticky; top:0; height:100vh; background:var(--rail); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:16px; padding:16px 12px; overflow:auto}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); padding:4px 8px 8px}
.logostar{width:42px; height:42px; flex:none; filter:drop-shadow(0 0 4px rgba(255,138,61,.75)) drop-shadow(0 0 10px rgba(255,46,136,.45))}
.logotext{display:grid; gap:2px}
.logo b{font-family:var(--display); font-weight:900; font-size:24px; letter-spacing:.02em; text-transform:uppercase; line-height:.95}
.logo b span,.acc{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.acc{filter:drop-shadow(0 0 22px rgba(255,46,136,.35))}
.logo small{font-size:10px; letter-spacing:.12em; white-space:nowrap; text-transform:uppercase; color:var(--muted)}
.navgroup{display:grid; gap:1px}
.navgroup .h{font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); padding:0 10px 4px}
.navlink{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:9px; text-decoration:none; color:#CFC9E6; font-weight:600; font-size:14.5px}
.navlink:hover{background:var(--panel); color:var(--text)}
.navlink[aria-current="page"]{background:var(--panel-2); color:var(--text); box-shadow:inset 2px 0 0 var(--sun)}
.navlink .ic{width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:11.5px; font-weight:800; background:var(--panel-2); color:var(--muted); flex:none}
.navlink[aria-current="page"] .ic{background:var(--grad); color:#1A0712}
.navlink .n{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--dim)}
.navlink .soon{margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.railcount{margin-top:auto; background:linear-gradient(150deg,#2A0F2E,var(--panel) 65%); border:1px solid rgba(255,46,136,.3); border-radius:var(--r); padding:12px 14px; display:grid; gap:2px; text-decoration:none; color:var(--text)}
.railcount .k{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--sun); font-weight:700}
.railcount .d{font-family:var(--display); font-weight:900; font-size:38px; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.railcount .s{font-size:12.5px; color:var(--muted)}

.scrim{display:none}
.main{min-width:0; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; gap:12px; padding:10px clamp(14px,2.5vw,28px); border-bottom:1px solid var(--line); background:rgba(11,11,20,.86); backdrop-filter:blur(10px); position:sticky; top:0; z-index:40}
.menubtn{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--panel); cursor:pointer; font-size:18px; flex:none}
.gsearch{position:relative; flex:1; max-width:620px}
.gsearch input{width:100%; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px 10px 38px}
.gsearch input::placeholder{color:var(--dim)}
.gsearch .mag{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--dim); pointer-events:none}
.gsearch kbd{position:absolute; right:10px; top:50%; transform:translateY(-50%); font:600 11px var(--mono); color:var(--dim); border:1px solid var(--line-2); border-radius:5px; padding:1px 6px}
.gresults{position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:0 24px 60px -20px rgba(0,0,0,.8); padding:6px; display:grid; gap:2px; z-index:60; max-height:65vh; overflow:auto}
.gresults a{display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--text)}
.gresults a:hover,.gresults a.on{background:var(--panel-2)}
.gresults .s{font-size:12.5px; color:var(--muted); grid-column:1}
.gresults .c{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); grid-row:1 / span 2; grid-column:2}
.gresults .none{padding:10px; color:var(--muted); font-size:14px}
.topcta{flex:none}
.content{flex:1; padding:28px clamp(16px,3vw,40px) 56px}
.wrapc{max-width:1180px; margin:0 auto; display:grid; gap:44px}
.wrapc > *{min-width:0}

/* ---------- type & shared ---------- */
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sun); text-shadow:0 0 14px rgba(255,46,136,.45)}
.h1{font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:.92; font-size:clamp(38px,5.6vw,74px)}
.h2{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(24px,2.8vw,32px); line-height:1}
.lede{color:var(--muted); font-size:17px; max-width:64ch}
.fine{font-size:13px; color:var(--muted)}
.label{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.stack{display:grid; gap:14px; align-content:start}
.stack > *{min-width:0}
.btns{display:flex; flex-wrap:wrap; gap:10px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; background:var(--grad); color:#1A0712; font-size:14.5px; transition:box-shadow .2s, filter .2s, background .2s, border-color .2s}
.btn:hover{filter:brightness(1.08); box-shadow:0 8px 26px -10px rgba(255,46,136,.8)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line-2)}
.btn.ghost:hover{background:var(--panel-2); box-shadow:none}
.btn.small{padding:6px 12px; font-size:13px}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.sec-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:10px 24px; margin-bottom:16px}
.sec-head a{font-weight:600; text-decoration:none; font-size:14px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:3px 8px; border-radius:6px; background:var(--panel-2); color:var(--muted); border:1px solid var(--line-2); white-space:nowrap}
.st-verified{color:var(--ok); border-color:rgba(76,195,138,.45); background:rgba(76,195,138,.1)}
.st-official{color:#FF7DB4; border-color:rgba(255,46,136,.45); background:rgba(255,46,136,.1)}
.st-community{color:var(--sun-2); border-color:rgba(255,138,61,.45); background:rgba(255,138,61,.1)}
.st-unconfirmed{color:var(--warn); border-color:rgba(242,193,78,.4); background:rgba(242,193,78,.08)}
.chip.spoil{color:var(--danger); border-color:rgba(255,92,108,.45)}
.empty{font-size:15px; color:var(--muted); padding:22px; border:1px dashed var(--line-2); border-radius:var(--r); display:grid; gap:10px; justify-items:start}
.empty b{color:var(--text); font-size:16px}
.glow-line{height:1px; background:linear-gradient(90deg,transparent,rgba(255,46,136,.6),rgba(255,138,61,.6),transparent); border:0; margin:0}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--panel-3); border:1px solid rgba(255,46,136,.45); color:var(--text); padding:10px 16px; border-radius:999px; font-weight:600; font-size:14px; z-index:120; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; box-shadow:0 14px 40px -12px rgba(0,0,0,.7)}
.toast.on{opacity:1; transform:translateX(-50%)}
.inp,.search,select.inp{width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:10px; padding:10px 12px}
textarea.inp{min-height:110px; resize:vertical}
.field{display:grid; gap:6px}
.field label{font-weight:600; font-size:14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.scroll{overflow-x:auto}
.mono{font-family:var(--mono)}

/* ---------- art slots (Higgsfield images drop in here; gradients if missing) ---------- */
.art{position:relative; overflow:hidden; background:
  radial-gradient(90% 120% at 90% 110%, rgba(255,138,61,.28) 0%, rgba(255,46,136,.16) 30%, transparent 60%),
  radial-gradient(120% 140% at 85% 30%, #2A1747 0%, #141030 45%, #0B0B14 100%)}
.art > img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55}
.art > .fade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,11,20,.92) 0%, rgba(11,11,20,.55) 55%, rgba(11,11,20,.15) 100%)}
.art > *:not(img):not(.fade):not(.grid3d){position:relative; z-index:1}
.art > .bigsearch{z-index:5 !important}
.grid3d{position:absolute; left:-10%; right:-10%; bottom:0; height:46%; background:
  repeating-linear-gradient(90deg, rgba(255,46,136,.20) 0 1px, transparent 1px 64px),
  repeating-linear-gradient(0deg, rgba(255,46,136,.20) 0 1px, transparent 1px 30px);
  -webkit-mask-image:linear-gradient(transparent, #000); mask-image:linear-gradient(transparent, #000); transform:perspective(420px) rotateX(58deg); transform-origin:bottom; pointer-events:none; opacity:.55}

/* ---------- home ---------- */
.hero{border-radius:20px; border:1px solid rgba(255,46,136,.3); padding:clamp(26px,5vw,60px); display:grid; gap:22px; min-height:460px; align-content:center}
.bigsearch{position:relative; max-width:560px}
.bigsearch input{width:100%; background:rgba(11,11,20,.78); border:1px solid var(--line-2); border-radius:12px; padding:15px 16px 15px 44px; font-size:16px}
.bigsearch .mag{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--dim)}
.cd{display:grid; grid-template-columns:repeat(4,minmax(0,108px)); gap:10px}
.cd div{padding:14px 10px 10px; border-radius:12px; background:rgba(11,11,20,.62); border:1px solid rgba(255,46,136,.3); text-align:center}
.cd b{display:block; font-family:var(--display); font-weight:900; font-size:clamp(36px,5.4vw,60px); line-height:.9; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.cd span{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700}
.cd.out{grid-template-columns:auto}
.statline{display:flex; flex-wrap:wrap; gap:6px 22px; color:var(--muted); font-size:14px}
.statline b{font-family:var(--mono); color:var(--text); font-weight:600; margin-right:5px}
.cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.cat{display:grid; align-content:end; gap:6px; min-height:170px; padding:18px; border-radius:14px; border:1px solid var(--line); text-decoration:none; color:var(--text); transition:border-color .2s, transform .2s, box-shadow .25s}
.cat:hover{border-color:rgba(255,46,136,.55); transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,46,136,.28), 0 18px 44px -24px rgba(255,46,136,.7)}
.cat .ti{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(11,11,20,.7); color:var(--sun); font-weight:800; font-size:16px; border:1px solid rgba(255,46,136,.35); margin-bottom:auto}
.cat b{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:24px; line-height:1}
.cat p{color:var(--muted); font-size:13.5px}
.cat .ct{font-family:var(--mono); font-size:12px; color:var(--sun-2)}
.cat.art .fade{background:linear-gradient(0deg, rgba(11,11,20,.95) 10%, rgba(11,11,20,.4) 100%)}
.tools{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.tool{display:grid; gap:8px; align-content:start; padding:18px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); text-decoration:none; color:var(--text); transition:border-color .2s, transform .2s}
.tool:hover{border-color:rgba(255,46,136,.5); transform:translateY(-2px)}
.tool .ti{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--sun-soft); color:var(--sun); font-weight:800; font-size:17px}
.tool b{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:21px; line-height:1}
.tool p{color:var(--muted); font-size:13.5px}
.cta{display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; border-radius:16px; border:1px solid rgba(255,46,136,.3); padding:24px 26px; background:linear-gradient(110deg,#2A0F2E 0%, #1A1530 40%, var(--panel) 100%)}
.rows{display:grid}
.rowlink{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:12px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--text)}
.rowlink:hover .t{color:var(--sun-2)}
.rowlink .t{font-weight:600}
.rowlink .s{font-size:13px; color:var(--muted)}
.log{display:grid; margin:0}
.log div{display:grid; grid-template-columns:92px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--line)}
.log dt{font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:2px}
.log dd{margin:0; font-size:14.5px}

/* ---------- hub ---------- */
.factlist{display:grid; margin:0}
.factlist div{display:grid; grid-template-columns:170px 1fr; gap:14px; padding:13px 0; border-bottom:1px solid var(--line)}
.factlist dt{color:var(--muted); font-size:14px; font-weight:600}
.factlist dd{margin:0}
.srcs{font-size:12.5px; color:var(--dim)}
.srcs a{color:var(--muted)}
.timeline{display:grid; margin:0; padding:0; list-style:none}
.timeline li{display:grid; grid-template-columns:120px 18px 1fr; gap:12px; align-items:start; padding-bottom:16px}
.timeline .when{font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:2px; text-align:right}
.timeline .dotc{width:12px; height:12px; border-radius:50%; background:var(--grad); margin-top:4px; box-shadow:0 0 12px rgba(255,46,136,.7)}
.timeline li.next .dotc{background:transparent; border:2px solid var(--sun)}
.places{display:flex; flex-wrap:wrap; gap:8px}
.places a{padding:7px 12px; border-radius:999px; border:1px solid rgba(255,46,136,.35); background:rgba(255,46,136,.08); font-weight:600; font-size:14px; color:var(--text); text-decoration:none}
.places a:hover{border-color:var(--sun)}

/* ---------- database ---------- */
.dbhead{border-radius:18px; border:1px solid var(--line); padding:clamp(22px,4vw,40px); display:grid; gap:14px}
.dbgrid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:26px; align-items:start}
.dbside{position:sticky; top:84px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 10px; display:grid; gap:18px; max-height:calc(100vh - 110px); overflow:auto}
.facet{display:grid; gap:2px}
.facet .fh{display:flex; justify-content:space-between; align-items:center; padding:0 6px 4px}
.facet .fh button{background:none; border:0; color:var(--dim); font-size:12px; cursor:pointer; padding:0}
.opt{display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:8px; cursor:pointer; user-select:none; font-size:14px}
.opt:hover{background:var(--panel-2)}
.opt input{accent-color:var(--sun); width:15px; height:15px; margin:0; flex:none}
.opt .n{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--dim)}
.opt.zero{opacity:.45}
.dbtools{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:14px}
.dbtools .l{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.dbtools select{background:var(--panel); border:1px solid var(--line-2); border-radius:9px; padding:8px 10px}
.dbtools .search{width:260px; max-width:100%}
.filterbtn{display:none}
.entries{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.entry{display:grid; gap:10px; align-content:start; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px; text-decoration:none; color:var(--text); transition:border-color .2s, box-shadow .25s, transform .2s}
.entry:hover{border-color:rgba(255,46,136,.5); box-shadow:0 0 0 1px rgba(255,46,136,.28), 0 18px 44px -24px rgba(255,46,136,.7)}
.entry .nm{font-weight:700; font-size:17px; line-height:1.25}
.entry .ar{font-size:13px; color:var(--muted)}
.entry .ex{font-size:14px; color:#CFC9E6}
.entry .thumb{aspect-ratio:16/9; border-radius:9px; object-fit:cover; width:100%; background:var(--panel-2)}
.prog{display:flex; align-items:center; gap:12px; min-width:200px}
.bar{flex:1; height:7px; background:var(--bg); border-radius:99px; overflow:hidden; border:1px solid var(--line)}
.bar i{display:block; height:100%; width:0; background:var(--grad); transition:width .4s}
.prog span{font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap}

/* ---------- entry page ---------- */
.crumbs{font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px}
.crumbs a{color:var(--muted)}
.article{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:36px; align-items:start}
.amain{display:grid; gap:22px}
.amain > *{min-width:0}
.amain .desc{font-size:18px; max-width:64ch; color:#DCD6F0}
.amain h2.sh{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:22px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.amain p,.amain li{color:#CFC9E6}
.amain ol,.amain ul{display:grid; gap:8px; padding-left:22px; margin:0}
.infobox{position:sticky; top:84px; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.infobox .ib-h{padding:14px 16px; font-weight:700; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center}
.infobox .ib-img{aspect-ratio:16/9; object-fit:cover; width:100%}
.facts{display:grid; margin:0; padding:6px 16px 10px}
.facts div{display:grid; grid-template-columns:110px 1fr; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.infobox .btns{padding:0 16px 16px}
.tog[aria-pressed="true"]{border-color:rgba(255,46,136,.6); background:var(--sun-soft)}
.box{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:14px; display:grid; gap:8px}
.box h3{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700}
.callout{border-left:3px solid var(--sun); background:linear-gradient(120deg,rgba(255,46,136,.1),var(--panel-2) 60%)}
.spoiler{position:relative; border-radius:10px}
.spoiler > .sp-body{filter:blur(9px); user-select:none; pointer-events:none}
.spoiler > .sp-btn{position:absolute; inset:0; margin:auto; width:max-content; height:max-content; z-index:2}
.spoiler.open > .sp-body{filter:none; user-select:auto; pointer-events:auto}
.spoiler.open > .sp-btn{display:none}
.video{aspect-ratio:16/9; width:100%; border:0; border-radius:12px; background:#000}
.checklist{display:grid; gap:0}
.checklist label{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:12px 6px; border-bottom:1px solid var(--line); cursor:pointer}
.checklist input{accent-color:var(--sun); width:18px; height:18px; margin-top:2px}
.checklist .done{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--sun)}

/* ---------- tables, compare, tiers ---------- */
.dtable{width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px}
.dtable th,.dtable td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.dtable th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700}
.cmp-pick{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.tier{display:grid; grid-template-columns:70px 1fr; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.tier + .tier{margin-top:8px}
.tier .tl{display:grid; place-items:center; font-family:var(--display); font-weight:900; font-size:34px; color:#1A0712}
.tier .ti{display:flex; flex-wrap:wrap; gap:8px; padding:12px; background:var(--panel)}
.tier .ti a{padding:6px 10px; border-radius:8px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--text); text-decoration:none; font-weight:600; font-size:14px}
.t-S{background:#FF2E88}.t-A{background:#FF5A5F}.t-B{background:#FF8A3D}.t-C{background:#F2C14E}.t-D{background:#9AA7B5}

/* ---------- map ---------- */
.mapwrap{position:relative; height:calc(100vh - 63px); overflow:hidden; background:#090A1E; margin:-28px calc(-1 * clamp(16px,3vw,40px)) -56px}
#map{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab}
#map.dragging{cursor:grabbing}
.mpanel{position:absolute; left:14px; top:14px; bottom:14px; width:290px; background:rgba(20,18,40,.94); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; overflow:hidden; z-index:5}
.mpanel .ph{padding:14px; border-bottom:1px solid var(--line); display:grid; gap:10px}
.mpanel .pb{overflow:auto; padding:10px; display:grid; gap:14px; align-content:start}
.mapctl{position:absolute; right:14px; top:14px; display:grid; gap:6px; z-index:4}
.mapctl button{width:40px; height:40px; border-radius:10px; border:1px solid var(--line-2); background:rgba(27,24,52,.92); cursor:pointer; font-size:19px; font-weight:600}
.mapsoon{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:min(460px,calc(100% - 340px)); text-align:center; display:grid; gap:12px; justify-items:center; padding:28px; border-radius:18px; background:rgba(14,13,30,.88); border:1px solid rgba(255,46,136,.35); box-shadow:0 30px 80px -30px rgba(255,46,136,.5)}
.coords{position:absolute; right:14px; bottom:14px; font-family:var(--mono); font-size:11.5px; background:rgba(14,13,30,.85); border:1px solid var(--line); padding:5px 9px; border-radius:8px; color:var(--muted); z-index:3}
.pin{cursor:pointer}

/* ---------- footer ---------- */
.foot{max-width:1180px; margin:48px auto 0; padding-top:20px; display:grid; gap:18px; font-size:13px; color:var(--dim)}
.foot .top{display:flex; flex-wrap:wrap; gap:18px 28px; justify-content:space-between; align-items:start}
.foot .fl{display:flex; gap:12px; align-items:center; max-width:520px}
.foot .fl svg{width:30px; height:30px; flex:none; filter:drop-shadow(0 0 4px rgba(255,138,61,.6))}
.foot nav{display:flex; flex-wrap:wrap; gap:8px 18px}
.foot nav a{color:var(--muted); text-decoration:none}
.foot nav a:hover{color:var(--text)}
.socials{display:flex; flex-wrap:wrap; gap:8px}
.socials a{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--line-2); border-radius:999px; color:var(--text); text-decoration:none; font-weight:600; font-size:12.5px}
.socials a:hover{border-color:var(--sun)}

/* ---------- prose pages ---------- */
.prose{display:grid; gap:14px; max-width:72ch}
.prose h2{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:24px; margin-top:14px}
.prose p,.prose li{color:#CFC9E6}
.prose ul{display:grid; gap:6px; padding-left:22px; margin:0}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; counter-reset:st; margin:0; padding:0; list-style:none}
.steps li{counter-increment:st; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:grid; gap:6px}
.steps li::before{content:counter(st); font-family:var(--display); font-weight:900; font-size:30px; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.steps span{color:var(--muted); font-size:14px}
.msg{font-size:14px; padding:10px 12px; border-radius:10px; background:var(--panel-2)}
.msg.ok{color:var(--ok)} .msg.err{color:var(--danger)}

/* ---------- responsive ---------- */
@media (max-width:1100px){ .tools{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed; inset:0 auto 0 0; width:280px; z-index:90; transform:translateX(-102%); transition:transform .3s; height:100%}
  .menu-open .rail{transform:none; box-shadow:30px 0 80px rgba(0,0,0,.6)}
  .menu-open .scrim{display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80}
  .menubtn{display:inline-grid; place-items:center}
  .gsearch kbd,.topcta{display:none}
  .two,.article,.grid2,.dbgrid,.cmp-pick{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .infobox,.dbside{position:static; max-height:none}
  .dbside{display:none}
  .dbside.open{display:grid}
  .filterbtn{display:inline-flex}
  .factlist div{grid-template-columns:1fr; gap:4px}
  .timeline li{grid-template-columns:86px 16px 1fr}
  .mpanel{left:0; right:0; top:auto; bottom:0; width:auto; max-height:46%; border-radius:16px 16px 0 0}
  .mapsoon{width:calc(100% - 28px); top:38%}
  .mapwrap{height:calc(100vh - 63px)}
}
@media (max-width:560px){ .tools{grid-template-columns:1fr} .cd{grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px} .cd div{padding:10px 4px 8px} .hero{min-height:0} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* =================================================================
   MOST WANTED leaderboard
   ================================================================= */
.board{display:grid; gap:28px}
.board > *{min-width:0}
.bhero{position:relative; overflow:hidden; border-radius:20px; border:1px solid rgba(255,46,136,.3); padding:clamp(26px,5vw,56px); display:grid; gap:16px; justify-items:start;
  background:radial-gradient(120% 90% at 85% 0%, rgba(255,46,136,.22), transparent 60%), radial-gradient(80% 80% at 0% 100%, rgba(25,211,197,.10), transparent 60%), linear-gradient(180deg,#141030,#0B0B14)}
.bhero > *:not(.siren):not(.grid3d){position:relative; z-index:1}
.bhero .h1{font-size:clamp(52px,9vw,120px)}
.siren{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen}
.siren span{position:absolute; top:-30%; width:70%; height:120%; filter:blur(50px); opacity:0; animation:siren 1.6s infinite}
.siren .r{left:-10%; background:radial-gradient(closest-side, rgba(255,40,70,.55), transparent)}
.siren .b{right:-10%; background:radial-gradient(closest-side, rgba(40,120,255,.55), transparent); animation-delay:.8s}
@keyframes siren{0%,100%{opacity:0} 15%,35%{opacity:.9} 50%{opacity:0}}
.wl{display:inline-flex; gap:2px; font-size:18px; line-height:1}
.wl i{font-style:normal; color:rgba(255,255,255,.14); text-shadow:none}
.wl i.on{color:#FFD86B; text-shadow:0 0 10px rgba(255,190,60,.75), 0 0 2px #fff}
.wl.sm{font-size:14px}
.wl.lg{font-size:clamp(30px,4.5vw,46px); gap:6px}
.wl.flash i.on{animation:starflash 2.4s infinite}
.wl.flash i:nth-child(2){animation-delay:.12s}.wl.flash i:nth-child(3){animation-delay:.24s}.wl.flash i:nth-child(4){animation-delay:.36s}.wl.flash i:nth-child(5){animation-delay:.48s}
@keyframes starflash{0%,60%,100%{opacity:1; transform:none} 70%{opacity:.25; transform:scale(.9)} 80%{opacity:1; transform:scale(1.12)}}
.bstats{display:flex; flex-wrap:wrap; gap:10px}
.bstats > span{background:rgba(11,11,20,.7); border:1px solid var(--line-2); border-radius:12px; padding:10px 14px; display:grid; gap:2px; min-width:130px}
.bstats b{font-family:var(--mono); font-size:18px; color:var(--text)}
.bstats .fine{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}

/* dispatch ticker */
.ticker{display:flex; align-items:stretch; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel)}
.ticker .tl{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--grad); color:#1A0712; font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; flex:none}
.ticker .tl i{width:8px; height:8px; border-radius:50%; background:#1A0712; animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.ticker .tv{overflow:hidden; flex:1; display:flex; align-items:center; mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker .trk{display:flex; gap:22px; align-items:center; white-space:nowrap; padding:10px 0; animation:tick var(--dur,32s) linear infinite; font-size:14px; color:var(--muted)}
.ticker .trk b{color:var(--text)} .ticker .trk a{color:var(--sun-2); text-decoration:none} .ticker .trk em{font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.ticker .trk > i{font-style:normal; color:var(--sun)}
.ticker:hover .trk{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* controls */
.bctl{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.bctl .inp{width:auto; flex:1 1 180px}
.seg{display:inline-flex; background:var(--panel); border:1px solid var(--line-2); border-radius:12px; padding:4px; gap:4px}
.seg button{background:none; border:0; border-radius:9px; padding:8px 14px; font-weight:700; font-size:14px; color:var(--muted); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--grad); color:#1A0712}
.bscope{margin-top:-16px; letter-spacing:.12em; text-transform:uppercase; font-size:11.5px; font-weight:700; color:var(--dim)}

/* podium */
.podium{display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:14px; align-items:end}
.pod{position:relative; display:grid; justify-items:center; gap:6px; text-align:center; padding:22px 12px 0; border-radius:16px 16px 0 0; border:1px solid var(--line-2); border-bottom:0; cursor:pointer; color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 70%), var(--panel); transition:transform .2s, box-shadow .25s}
button.pod:hover{transform:translateY(-4px)}
.pod .pr{position:absolute; top:10px; left:12px; font-family:var(--display); font-weight:900; font-size:30px; line-height:1; color:var(--dim)}
.pod .ph{font-weight:800; font-size:17px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pod .hv{font-size:22px}
.pod .pl{font-size:12px; color:var(--muted); margin-bottom:10px}
.pod .plinth{width:calc(100% + 24px); margin:0 -12px; height:40px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)); border-top:1px solid var(--line-2)}
.pod.p1{padding-top:34px; border-color:rgba(255,216,107,.55); box-shadow:0 0 0 1px rgba(255,216,107,.2), 0 -10px 60px -20px rgba(255,190,60,.55)}
.pod.p1 .plinth{height:70px; background:linear-gradient(180deg, rgba(255,216,107,.16), rgba(255,46,136,.04))}
.pod.p1 .pr{color:#FFD86B; text-shadow:0 0 14px rgba(255,190,60,.7)}
.pod.p2 .pr{color:#D9DCEB}.pod.p2 .plinth{height:48px}
.pod.p3 .pr{color:#E39A62}.pod.p3 .plinth{height:30px}
.pod .crown{position:absolute; top:-18px; font-size:30px; color:#FFD86B; text-shadow:0 0 16px rgba(255,190,60,.8); animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.pod.me{outline:2px solid var(--teal); outline-offset:2px}
.pod.ghost{cursor:default; opacity:.75; border-style:dashed}
.pod.ghost .sil{width:66px; height:66px; border-radius:50%; background:radial-gradient(circle at 50% 38%, #2C2652 0 26%, transparent 27%), radial-gradient(ellipse at 50% 100%, #2C2652 0 48%, transparent 49%); border:2px dashed var(--line-2)}
.pod.ghost.p1 .sil{width:84px; height:84px}
.pod.ghost .ph{color:var(--dim); font-family:var(--mono)}
.hv{font-family:var(--mono); font-weight:600; color:#FF9A4D; text-shadow:0 0 12px rgba(255,110,60,.45); display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.hv small,.bt small{font-size:.58em; letter-spacing:.12em; margin-left:3px; opacity:.8}
.flm{width:.7em; height:.95em; flex:none; color:#FF5A3D; filter:drop-shadow(0 0 4px rgba(255,90,60,.8))}
.hv.sm{font-size:13px}
.av{flex:none; display:block}

/* table */
.btable td{vertical-align:middle}
.btable tbody tr{cursor:pointer; transition:background .15s}
.btable tbody tr:hover,.btable tbody tr:focus-visible{background:var(--panel-2)}
.btable tr.me{background:rgba(25,211,197,.08); box-shadow:inset 3px 0 0 var(--teal)}
.btable .rk{white-space:nowrap; width:76px}
.btable .rk b{font-family:var(--display); font-size:24px; font-weight:900; margin-right:6px}
.btable tr.top .rk b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.btable .hn{display:flex; align-items:center; gap:10px}
.btable .rn{font-size:12px; color:var(--muted)}
.btable .bt,.bt{text-align:right; font-family:var(--mono); font-weight:600; color:#FF9A4D; white-space:nowrap}
.bt .flm{vertical-align:-1px; margin-right:4px}
.you{margin-left:6px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:var(--teal); color:#062522; padding:2px 6px; border-radius:5px; vertical-align:2px}
.mv{font-family:var(--mono); font-size:11px; color:var(--dim)}
.mv.up{color:var(--ok)} .mv.down{color:var(--danger)} .mv.new{color:var(--teal); font-weight:700; text-transform:uppercase; letter-spacing:.06em}

/* track yourself + sticky bar */
.mecard{display:grid; grid-template-columns:1fr minmax(0,360px); gap:16px; align-items:center}
.mef{display:flex; gap:8px}
.mebar{position:sticky; bottom:12px; z-index:40; margin:20px auto 0; max-width:1180px; display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px;
  background:rgba(20,18,40,.92); backdrop-filter:blur(10px); border:1px solid rgba(25,211,197,.45); box-shadow:0 18px 40px -16px rgba(0,0,0,.9)}
.mebar .mi{flex:1; min-width:0} .mebar .mx{display:grid; gap:4px; min-width:150px}
.xp{height:6px; border-radius:6px; background:var(--panel-3); overflow:hidden}
.xp i{display:block; height:100%; background:linear-gradient(90deg,#FF2E88,#FF8A3D,#FFD86B)}

/* ladder */
.ladder{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.ladder li{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px; display:grid; gap:6px; align-content:start; position:relative; overflow:hidden}
.ladder li::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--grad); opacity:.25}
.ladder li.lv5{border-color:rgba(255,216,107,.5); background:linear-gradient(180deg, rgba(255,216,107,.08), transparent), var(--panel)}
.ladder li.lv5::after{opacity:1}
.ladder b{font-family:var(--display); font-weight:800; font-size:20px; text-transform:uppercase}

/* badges */
.badges{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.bdg{display:flex; gap:10px; align-items:center; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:14px}
.bdg i{font-style:normal; flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:9px; font-weight:800; color:#1A0712; background:var(--grad); box-shadow:0 0 16px -4px rgba(255,46,136,.7)}
.bdg .fine{font-size:12px}

/* hall of fame */
.hof{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.champ{display:flex; align-items:center; gap:10px; text-align:left; background:var(--panel); border:1px solid rgba(255,216,107,.3); border-radius:var(--r); padding:12px; color:var(--text); cursor:pointer}
.champ > span:nth-child(2){flex:1; min-width:0}

/* hunter profile drawer */
.drawer{position:fixed; inset:0; z-index:150; background:rgba(5,4,12,.6); backdrop-filter:blur(3px); opacity:0; transition:opacity .2s}
.drawer.on{opacity:1}
.dpanel{position:absolute; right:0; top:0; bottom:0; width:min(440px,100%); background:var(--bg); border-left:1px solid var(--line-2); overflow-y:auto; padding:22px; transform:translateX(30px); transition:transform .22s}
.drawer.on .dpanel{transform:none}
.dclose{position:sticky; top:0; float:right; z-index:2; width:36px; height:36px; border-radius:10px; border:1px solid var(--line-2); background:var(--panel); color:var(--text); cursor:pointer}
.dbody{display:grid; gap:14px}
.poster{display:grid; justify-items:center; gap:6px; text-align:center; padding:22px 16px; border-radius:14px; border:2px solid rgba(255,216,107,.35);
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px), radial-gradient(90% 70% at 50% 0%, rgba(255,46,136,.2), transparent), var(--panel)}
.poster .pw{font-family:var(--display); font-weight:900; font-size:28px; letter-spacing:.3em; text-transform:uppercase; color:#FFD86B; text-shadow:0 0 18px rgba(255,190,60,.5)}
.poster .rn{color:var(--muted); font-size:13px}
.poster .hv{font-size:26px}
.dstats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.dstats div{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center; display:grid}
.dstats b{font-size:17px} .dstats span{font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em}
.dh{font-family:var(--display); text-transform:uppercase; font-size:18px}
.dpanel .badges{grid-template-columns:1fr}
.dfinds{display:grid; gap:6px}
.dfinds a{display:flex; justify-content:space-between; gap:10px; align-items:center; text-decoration:none; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.dfinds a:hover{border-color:var(--line-2)}

@media (max-width:900px){ .ladder{grid-template-columns:1fr 1fr} .ladder li.lv5{grid-column:1/-1} .mecard{grid-template-columns:1fr} }
@media (max-width:560px){
  .podium{grid-template-columns:1fr 1.1fr 1fr; gap:6px}
  .pod{padding:26px 4px 0} .pod .ph{font-size:13px} .pod .hv{font-size:14px} .pod .pl{font-size:10.5px} .pod .wl{font-size:10px}
  .pod .av{width:46px; height:46px} .pod.p1 .av{width:58px; height:58px} .pod .pr{font-size:20px; top:6px; left:8px}
  .pod.ghost .sil{width:44px; height:44px} .pod.ghost.p1 .sil{width:56px; height:56px}
  .btable{min-width:0} .btable th:nth-child(3),.btable td:nth-child(3),.btable th:nth-child(4),.btable td:nth-child(4){display:none}
  .btable .hn .av{width:30px; height:30px}
  .badges{grid-template-columns:1fr}
  .mebar .mx{display:none}
  .seg{width:100%} .seg button{flex:1; padding:8px 6px}
}
@media (prefers-reduced-motion:reduce){ .siren span,.wl.flash i,.ticker .trk,.crown,.ticker .tl i{animation:none!important} .siren span{opacity:.35} }

.brules ul{margin:0; padding-left:20px; display:grid; gap:8px; color:#CFC9E6}
.brules b{color:var(--text)}
/* top bar leaderboard link + home banner */
.toplb{flex:none; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:10px; border:1px solid rgba(255,216,107,.45); color:var(--text); text-decoration:none; font-weight:700; font-size:13px; background:rgba(255,216,107,.06)}
.toplb .st{color:#FFD86B; text-shadow:0 0 10px rgba(255,190,60,.8); font-size:15px}
.toplb:hover,.toplb[aria-current]{background:rgba(255,216,107,.14)}
.lbbanner{position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; padding:24px 28px; border-radius:18px; text-decoration:none; color:var(--text);
  border:1px solid rgba(255,216,107,.4); background:radial-gradient(80% 120% at 0% 50%, rgba(255,46,136,.18), transparent 60%), linear-gradient(180deg,#151133,#0E0C20)}
.lbbanner > *:not(.siren){position:relative; z-index:1}
.lbbanner .lbt{display:grid; gap:4px} .lbbanner .lbt b{font-family:var(--display); font-weight:900; font-size:clamp(28px,3.4vw,40px); text-transform:uppercase; line-height:1}
.lbbanner .lbt span{color:var(--muted)}
.lbbanner .wl.lg{font-size:30px}
@media (max-width:720px){ .lbbanner{grid-template-columns:1fr; gap:12px; padding:22px} .toplb .tx{display:none} .toplb{padding:6px 10px} }
/* confirm dialog + my list rows */
.cfm{position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:16px; background:rgba(5,4,12,.7); backdrop-filter:blur(3px); opacity:0; transition:opacity .18s}
.cfm.on{opacity:1}
.cfm-box{width:min(420px,100%); background:var(--panel); border:1px solid var(--line-2); border-radius:16px; padding:22px; display:grid; gap:10px; box-shadow:0 30px 80px -20px rgba(0,0,0,.9); transform:translateY(8px); transition:transform .18s}
.cfm.on .cfm-box{transform:none}
.cfm-t{font-family:var(--display); font-size:24px; text-transform:uppercase}
.cfm-box p{color:var(--muted)}
.cfm-box .btns{justify-content:flex-end; margin-top:6px}
.btn.danger{background:var(--danger); color:#1A0508}
.btn.danger-ghost{color:var(--danger); border-color:rgba(255,92,108,.45)}
.mlhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.mlist{display:grid; gap:10px}
.mlrow{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center}
.mlrow .entry{min-width:0}
@media (max-width:560px){ .mlrow{grid-template-columns:1fr} .mlrow > button{justify-self:end} }
.bmore{justify-self:center; margin-top:-14px}


/* =================================================================
   GUIDES
   ================================================================= */
.gtools{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px}
.gtools .l{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.gtools select{background:var(--panel); border:1px solid var(--line-2); border-radius:9px; padding:8px 10px}
.gtools .search{width:240px; max-width:100%}
.tchips{display:flex; flex-wrap:wrap; gap:6px}
.tchip{background:var(--panel); border:1px solid var(--line-2); color:var(--muted); border-radius:999px; padding:7px 14px; font-weight:700; font-size:13.5px; cursor:pointer}
.tchip:hover{color:var(--text)}
.tchip[aria-pressed="true"]{background:var(--grad); color:#1A0712; border-color:transparent}
.ggrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px}
.ggrid.sm{grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.gcard{display:grid; grid-template-rows:auto 1fr; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:var(--text); transition:transform .2s, border-color .2s, box-shadow .25s}
a.gcard:hover{transform:translateY(-3px); border-color:rgba(255,46,136,.5); box-shadow:0 0 0 1px rgba(255,46,136,.25), 0 24px 50px -26px rgba(255,46,136,.75)}
.gcover{aspect-ratio:16/9; overflow:hidden; position:relative; background:var(--panel-2)}
.gcover img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
a.gcard:hover .gcover img{transform:scale(1.04)}
.gcover.noimg{display:grid; place-items:center; background:radial-gradient(80% 90% at 30% 20%, rgba(255,46,136,.35), transparent 60%), radial-gradient(80% 90% at 90% 100%, rgba(255,138,61,.25), transparent 60%), linear-gradient(160deg,#1B1640,#0E0C20)}
.gcover.noimg > span{font-family:var(--display); font-weight:900; font-size:64px; color:rgba(255,255,255,.85); text-shadow:0 0 30px rgba(255,46,136,.7)}
.gcover em{position:absolute; top:12px; left:12px; font-style:normal; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:rgba(11,11,20,.75); border:1px solid var(--line-2); padding:4px 8px; border-radius:6px; color:var(--warn)}
.gb{display:grid; gap:8px; padding:16px 18px 18px; align-content:start}
.gt{font-family:var(--display); font-weight:800; font-size:24px; line-height:1.05; text-transform:uppercase}
.gb p{color:#CFC9E6; font-size:14.5px}
.gm{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:2px}
.chip.vid{color:#FF5C6C; border-color:rgba(255,92,108,.45)}
.gcard.soon{opacity:.72; border-style:dashed}
.ghero{position:relative; overflow:hidden; border-radius:20px; border:1px solid rgba(255,46,136,.3); padding:clamp(24px,4.5vw,52px); min-height:340px; display:grid; align-content:end}
.ghero > .bg-cover{position:absolute !important; inset:0}
.ghero > .bg-cover img{width:100%; height:100%; object-fit:cover; opacity:.6}
.ghero > .bg-cover.noimg{background:radial-gradient(60% 90% at 85% 10%, rgba(255,46,136,.35), transparent 60%), linear-gradient(160deg,#1B1640,#0B0B14)}
.ghero > .bg-cover.noimg span{position:absolute; right:6%; top:8%; font-family:var(--display); font-weight:900; font-size:clamp(120px,18vw,240px); color:rgba(255,255,255,.06)}
.ghero > .fade{position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,11,20,.96) 8%, rgba(11,11,20,.35) 100%)}
.ghero > .stack{position:relative; z-index:1}
.gsteps{counter-reset:gs; list-style:none; padding:0!important}
.gsteps li{counter-increment:gs; position:relative; padding:10px 12px 10px 48px; background:var(--panel); border:1px solid var(--line); border-radius:10px}
.gsteps li::before{content:counter(gs); position:absolute; left:12px; top:9px; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--grad); color:#1A0712; font-weight:800; font-size:13px}
.gimgs{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px}
.gimgs figure{margin:0; display:grid; gap:6px}
.gimgs img{border-radius:10px; border:1px solid var(--line); width:100%}
.gimgs figcaption{font-size:13px; color:var(--muted)}
.tip{border-left:3px solid var(--teal); background:rgba(25,211,197,.07); border-radius:0 10px 10px 0; padding:12px 14px; display:grid; gap:4px}
.tip b{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal)}
.toc{display:grid; gap:2px; padding:0 16px 14px}
.toc .label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:700; margin:4px 0 6px}
.toc a{font-size:14px; color:var(--muted); text-decoration:none; padding:5px 8px; border-radius:7px}
.toc a:hover{background:var(--panel-2); color:var(--text)}
@media (max-width:560px){ .ggrid{grid-template-columns:1fr} .gtools .search{width:100%} .gtools .l{width:100%} .tchips{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; margin:0 -2px} .tchip{flex:none} }
/* map filter hint + quick layer buttons */
.mhint{display:grid; gap:2px; padding:10px 12px; border-radius:10px; background:linear-gradient(100deg, rgba(255,46,136,.16), rgba(255,138,61,.10)); border:1px solid rgba(255,46,136,.35)}
.mhint b{font-size:14px} .mhint span{font-size:12.5px; color:#DCD6F0} .mhint em{font-style:normal; font-weight:700; color:var(--sun-2)}
.lrow{display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px}
.only{background:none; border:1px solid var(--line-2); color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:6px; padding:3px 7px; cursor:pointer}
.only:hover{color:var(--text); border-color:var(--sun)}
.lall{display:flex; gap:4px} .lall button{background:none; border:0; color:var(--sun-2); font-weight:700; font-size:12px; cursor:pointer; padding:2px 4px}
.pin.focus circle:first-child{animation:pinpulse 1.4s ease-out infinite}
@keyframes pinpulse{0%{r:16; fill-opacity:.5} 100%{r:40; fill-opacity:0}}
@media (max-width:760px){ .mhint span{display:none} .mhint{padding:8px 10px} }
.steps.four{grid-template-columns:repeat(4,1fr)} @media (max-width:900px){.steps.four{grid-template-columns:1fr 1fr}} @media (max-width:560px){.steps.four{grid-template-columns:1fr}}
/* bigger tap targets on touch screens */
@media (max-width:900px), (pointer:coarse){
  .foot nav a, .crumbs a, .sec-head a, .lall button, .facet .fh button{display:inline-flex; align-items:center; min-height:40px; padding:0 8px}
  .foot nav{gap:0 4px} .crumbs{align-items:center}
  .lall{gap:0}
}

/* =================================================================
   COMPARE ANYTHING + LOADOUT BUILDER + stat bars
   ================================================================= */
.chip.mode{color:var(--teal); border-color:rgba(25,211,197,.45)}
.sbars{display:grid; gap:8px}
.sbar{display:grid; grid-template-columns:110px 1fr 34px; gap:10px; align-items:center; font-size:14px}
.sbar > span:first-child{color:var(--muted)}
.sbar b{font-family:var(--mono); font-size:13px; text-align:right}
.track{height:8px; border-radius:6px; background:var(--panel-3); overflow:hidden; display:block}
.track i{display:block; height:100%; border-radius:6px; background:var(--grad)}
.sbars.sm .sbar{grid-template-columns:84px 1fr 28px; font-size:12.5px} .sbars.sm .track{height:6px}

.cmp2{display:grid; gap:16px}
.ctabs{display:flex; flex-wrap:wrap; gap:6px}
.ctab .n{margin-left:6px; font-family:var(--mono); font-size:11px; opacity:.7}
.cbar{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center}
.cslots{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.cslot{position:relative; display:grid; gap:8px; align-content:start; padding:14px; border-radius:14px; background:var(--panel); border:1px dashed var(--line-2); min-height:150px}
.cslot.on{border-style:solid; border-color:rgba(255,46,136,.4); background:linear-gradient(180deg, rgba(255,46,136,.08), transparent 60%), var(--panel)}
.cslot .cimg{aspect-ratio:16/9; width:100%; object-fit:cover; border-radius:9px}
.cic{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-family:var(--display); font-weight:900; font-size:24px; background:var(--grad); color:#1A0712}
.cic.empty-ic{background:var(--panel-2); color:var(--dim); border:1px dashed var(--line-2)}
.cslot .cn{font-weight:800; font-size:16px; color:var(--text); text-decoration:none; line-height:1.2; padding-right:26px}
.cslot .cn:hover{color:var(--sun-2)}
.cslot select{font-size:14px; padding:8px 10px}
.cx{position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:8px; border:1px solid var(--line-2); background:var(--panel-2); color:var(--muted); cursor:pointer}
.cx:hover{color:var(--text); border-color:var(--danger)}
.cempty{grid-column:1/-1} .clist{color:var(--text); font-size:14px}
.chint{text-align:center; padding:6px}
.ctable{padding:6px 16px 16px; overflow-x:auto}
.chead{position:sticky; top:0; display:grid; grid-template-columns:150px repeat(var(--n),minmax(110px,1fr)); gap:10px; padding:14px 0 12px; border-bottom:1px solid var(--line); background:var(--panel); z-index:1; min-width:max-content}
.chead::before{content:""}
.ch{position:relative; display:grid; gap:2px; padding:6px 8px; border-radius:10px}
.ch b{font-size:15px; line-height:1.2}
.ch.champ{background:rgba(255,216,107,.08); box-shadow:inset 0 0 0 1px rgba(255,216,107,.45)}
.ch .crown{position:absolute; top:-12px; right:8px; color:#FFD86B; text-shadow:0 0 12px rgba(255,190,60,.8); font-size:20px}
.csec{display:grid; min-width:max-content}
.csec .dh{margin:16px 0 4px; font-size:15px; color:var(--muted)}
.crow{display:grid; grid-template-columns:150px 1fr; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line)}
.cl{font-size:13.5px; color:var(--muted)}
.cvs{display:grid; grid-template-columns:repeat(var(--n),minmax(110px,1fr)); gap:10px}
.cv{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; font-size:14px; min-width:0}
.cv .track{flex:1}
.cv b{font-family:var(--mono); font-size:12.5px; width:26px; text-align:right}
.cv.best{background:rgba(76,195,138,.12); box-shadow:inset 0 0 0 1px rgba(76,195,138,.5); color:#8FF0B9; font-weight:700}
.cv.best .track i{background:linear-gradient(90deg,#4CC38A,#8FF0B9)}
.cv .na{color:var(--dim)}
.cverdict{text-align:center; color:#FFE6A3}
.cact{justify-content:center}

.lobar{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.lobar .inp{flex:1 1 240px; width:auto}
.lo{display:grid; gap:20px}
.logrid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start}
.loslots{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.loslot{display:grid; gap:8px; align-content:start; padding:12px; border-radius:14px; background:var(--panel); border:1px dashed var(--line-2)}
.loslot.on{border-style:solid; border-color:rgba(255,46,136,.4)}
.lsh{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lsh a{margin-left:auto; text-decoration:none}
.lic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--panel-2); border:1px solid var(--line-2); font-weight:800; font-size:12px; color:var(--sun-2)}
.loslot.on .lic{background:var(--grad); color:#1A0712; border-color:transparent}
.loslot select{font-size:14px; padding:8px 10px}
.losum{position:sticky; top:84px; display:grid; gap:12px}
.lsname{font-family:var(--display); font-weight:900; font-size:26px; text-transform:uppercase; line-height:1}
.lstat{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.lstat div{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:10px; display:grid}
.lstat b{font-family:var(--mono); font-size:17px}
.chip.role{color:#FFD86B; border-color:rgba(255,216,107,.45)}
.bwho{margin:-4px 0 2px 120px; font-size:11.5px}
.losaved{display:grid; gap:8px}
.losv{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
@media (max-width:1000px){ .logrid{grid-template-columns:1fr} .losum{position:static} .cslots{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .chead{grid-template-columns:repeat(var(--n),minmax(96px,1fr))} .chead::before{display:none}
  .crow{grid-template-columns:1fr; gap:4px} .cvs{grid-template-columns:repeat(var(--n),minmax(96px,1fr))}
  .cslot{min-height:0; padding:12px} .cic{width:38px; height:38px; font-size:19px}
  .sbar{grid-template-columns:90px 1fr 30px} .bwho{margin-left:100px}
  .ctabs{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px} .ctab{flex:none}
}
.lomini{display:none}
@media (max-width:1000px){ .lomini{display:flex; position:sticky; bottom:10px; z-index:30; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px 10px 16px; border-radius:14px; background:rgba(20,18,40,.94); backdrop-filter:blur(10px); border:1px solid rgba(255,46,136,.45); box-shadow:0 16px 40px -14px rgba(0,0,0,.9)} .lomini b{font-family:var(--mono)} }
@media (max-width:900px), (pointer:coarse){ .lsh a{display:inline-flex; align-items:center; min-height:40px} }
/* home hero, louder */
.hero{position:relative; min-height:520px}
.hero .hh{font-size:clamp(46px,7.4vw,104px); line-height:.9; text-shadow:0 4px 40px rgba(0,0,0,.5)}
.acc.hot{background:linear-gradient(100deg,#FF2E88 0%,#FF4F9A 30%,#FF7A45 50%,#FF4F9A 70%,#FF2E88 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,46,136,.55)); animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.hstars{font-size:clamp(22px,2.6vw,30px); gap:6px; margin-bottom:-8px}
.siren.soft span{filter:blur(70px); animation-duration:3.2s} .siren.soft .r{opacity:0} .hero .siren.soft{opacity:.45}
.herostar{position:absolute; right:-40px; top:50%; width:min(46%,520px); transform:translateY(-50%) rotate(-12deg); opacity:.22; pointer-events:none; filter:drop-shadow(0 0 40px rgba(255,46,136,.7)); animation:floaty 9s ease-in-out infinite}
.herostar svg{width:100%; height:auto; display:block}
@keyframes floaty{50%{transform:translateY(-53%) rotate(-8deg)}}
.hero > video.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55}
@media (max-width:760px){ .herostar{width:80%; right:-30%; top:18%; opacity:.12} .hero{min-height:0} }
@media (prefers-reduced-motion:reduce){ .acc.hot,.herostar{animation:none} }
.hero > .herostar,.hero > .siren,.hero > video.bg{position:absolute !important; z-index:0 !important}
.hero > .siren{inset:0}

.nw{white-space:nowrap}
@media (max-width:560px){ .hero .hh{font-size:clamp(38px,11.5vw,52px)} }
@media (max-width:420px){ .cd span{font-size:9.5px; letter-spacing:.06em} .cd div{padding:12px 4px 8px; overflow:hidden} }
/* customisable Database menu */
.hrow{display:flex; justify-content:space-between; align-items:center}
.navedit{background:none; border:1px solid var(--line-2); color:var(--muted); font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-radius:6px; padding:3px 8px; cursor:pointer}
.navedit:hover,.navedit[aria-expanded="true"]{color:var(--text); border-color:var(--sun)}
.navitems{display:grid; gap:1px}
.navitems .navlink[hidden]{display:none}
.naved{display:grid; gap:4px; padding:6px 4px; background:var(--panel); border:1px solid var(--line-2); border-radius:12px}
.nedh{font-size:11.5px; color:var(--dim); padding:4px 6px}
.nedr{display:grid; grid-template-columns:1fr repeat(3,30px); gap:4px; align-items:center; padding:3px 4px 3px 8px; border-radius:8px; font-size:13.5px; font-weight:600; color:#CFC9E6}
.nedr:hover{background:var(--panel-2)}
.nedr button{height:30px; border-radius:7px; border:1px solid var(--line-2); background:var(--bg); color:var(--muted); cursor:pointer; font-size:11px}
.nedr button:hover:not([disabled]){color:var(--text); border-color:var(--sun)}
.nedr button[disabled]{opacity:.3; cursor:default}
.nedr.off{grid-template-columns:1fr auto; color:var(--dim)}
.nedr .add{width:auto; padding:0 10px; color:var(--teal); border-color:rgba(25,211,197,.45); font-weight:700}
.nedb{display:flex; gap:6px; padding:6px 4px 2px}
.toast .undo{margin-left:10px; background:none; border:1px solid var(--line-2); color:var(--sun-2); font-weight:800; border-radius:6px; padding:3px 9px; cursor:pointer}
.toast.on{pointer-events:auto}
.mltools{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-bottom:14px}
.mltools .l{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.mltools select{background:var(--panel); border:1px solid var(--line-2); border-radius:9px; padding:8px 10px}
.mltools .search{width:220px; max-width:100%}
.tchip .n{margin-left:4px; font-family:var(--mono); font-size:11px; opacity:.7}
.box.demo{border-color:rgba(242,193,78,.5)}
@media (pointer:coarse){ .nedr{grid-template-columns:1fr repeat(3,40px)} .nedr button{height:40px; font-size:13px} .navedit{padding:8px 12px} }
@media (max-width:560px){ .mltools .l,.mltools .search{width:100%} .mltools .tchips{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px} .mltools .tchip{flex:none} }
/* home hero: neon star logo */
.hero > .herologo{position:absolute !important; z-index:0 !important; right:clamp(-20px,2vw,40px); top:50%; width:clamp(300px,34vw,500px); aspect-ratio:1; transform:translateY(-50%); pointer-events:none}
.herologo img{width:100%; height:100%; mix-blend-mode:screen; -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 52%, transparent 71%); mask-image:radial-gradient(circle at 50% 50%, #000 52%, transparent 71%);
  animation:neonOn 2.4s ease-out both, neonBuzz 7s 2.4s infinite, floaty2 8s 2.4s ease-in-out infinite}
.herologo .halo{position:absolute; inset:18%; border-radius:50%; background:radial-gradient(circle, rgba(255,46,136,.45), rgba(255,138,61,.18) 45%, transparent 70%); filter:blur(30px); animation:haloPulse 4s ease-in-out infinite}
@keyframes neonOn{0%{opacity:0} 8%{opacity:.9} 12%{opacity:.1} 20%{opacity:1} 24%{opacity:.3} 32%,100%{opacity:1}}
@keyframes neonBuzz{0%,92%,100%{opacity:1} 93%{opacity:.55} 94%{opacity:1} 96%{opacity:.7} 97%{opacity:1}}
@keyframes floaty2{50%{transform:translateY(-10px)}}
@keyframes haloPulse{50%{opacity:.55; transform:scale(1.08)}}
.hero.has-art .herologo{opacity:.9}
@media (max-width:1100px){ .hero > .herologo{width:clamp(220px,40vw,340px); right:-6%; opacity:.6} }
@media (max-width:760px){
  .hero > .herologo{position:relative !important; right:auto; top:auto; transform:none; width:150px; margin:-10px 0 -4px -14px; opacity:1}
  .herologo .halo{inset:10%}
}
@media (prefers-reduced-motion:reduce){ .herologo img,.herologo .halo{animation:none} }
/* star placement v2: top-right, clear of the headline */
.hero > .herologo{top:clamp(10px,2vw,30px); right:clamp(8px,3vw,50px); width:clamp(220px,24vw,340px); transform:none}
@media (max-width:1100px){ .hero > .herologo{width:clamp(170px,22vw,240px); right:2%; opacity:.9} }
@media (max-width:760px){
  .hero > .herologo{position:absolute !important; top:10px; right:6px; width:118px; margin:0; opacity:1}
  .hero > .eyebrow{padding-right:104px}
}
/* star placement v3: bottom-right empty space (computer + tablet); phones keep the small top-right star */
@media (min-width:761px){
  .hero > .herologo{top:auto; bottom:clamp(10px,2.5vw,36px); right:clamp(10px,4vw,70px); width:clamp(220px,25vw,360px)}
}
@media (min-width:761px) and (max-width:1100px){ .hero > .herologo{width:clamp(170px,21vw,230px); right:2%; bottom:14px} }
@media (min-width:761px) and (max-width:1100px){ .hero > .herologo{top:clamp(10px,2vw,30px); bottom:auto} }
/* star v4: transparent neon star, no dark backing, bigger, tilted right, brighter */
.herologo img{mix-blend-mode:normal; -webkit-mask-image:none; mask-image:none; filter:brightness(1.12) saturate(1.2) drop-shadow(0 0 18px rgba(255,46,136,.55)) drop-shadow(0 0 40px rgba(255,138,61,.35))}
.hero > .herologo{rotate:14deg}
.herologo .halo{inset:24%; background:radial-gradient(circle, rgba(255,46,136,.32), rgba(255,138,61,.12) 50%, transparent 72%); filter:blur(40px)}
@media (min-width:1101px){ .hero > .herologo{width:clamp(300px,30vw,460px); right:clamp(0px,3vw,60px); bottom:clamp(0px,1.5vw,24px)} }
@media (max-width:760px){ .hero > .herologo{width:132px; top:4px; right:2px; rotate:14deg} }
@media (min-width:1101px){
  .hero > .herologo{width:clamp(270px,23vw,380px); right:clamp(14px,3.5vw,64px); bottom:clamp(22px,2.6vw,44px)}
  .hero > .lede{max-width:54ch}
}
@media (max-width:760px){ .hero > .herologo{width:112px; top:0; right:4px} .hero > .eyebrow{padding-right:96px} }

/* =================================================================
   FULL-WIDTH HOME BANNER (Higgsfield scenes behind, edge to edge)
   ================================================================= */
.main{overflow-x:clip}
.hero.bleed{border:0; border-radius:0; background:none; overflow:visible; position:relative}
.hero.bleed > .hbg{position:absolute !important; z-index:0 !important; top:-28px; bottom:-10px; left:50%; width:calc(100vw - var(--rail-w)); transform:translateX(-50%); overflow:hidden; pointer-events:none;
  background:radial-gradient(120% 90% at 80% 10%, rgba(255,46,136,.22), transparent 60%), radial-gradient(90% 80% at 10% 100%, rgba(25,211,197,.10), transparent 60%), linear-gradient(180deg,#141030 0%,#0D0B1F 70%,var(--bg) 100%)}
.hero.bleed > *:not(.hbg){position:relative; z-index:1}
.hbg > .hs,.hbg > .hv{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease}
.hbg > .hs.on,.hbg > .hv.on{opacity:.62}
.hbg > .hs.on{animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)} to{transform:scale(1.08) translateX(-1.5%)}}
.hbg .hfade{position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(11,11,20,.94) 0%, rgba(11,11,20,.80) 28%, rgba(11,11,20,.35) 58%, rgba(11,11,20,.10) 100%),
  linear-gradient(0deg, var(--bg) 0%, rgba(11,11,20,0) 22%), linear-gradient(180deg, rgba(11,11,20,.55) 0%, rgba(11,11,20,0) 18%)}
.hbg .siren,.hbg .grid3d{position:absolute} .hbg .siren{inset:0; opacity:.4}
.hbg .grid3d{left:-10%; right:-10%; bottom:0; height:40%}
.aurora{position:absolute; inset:0; filter:blur(60px); opacity:.55}
.aurora i{position:absolute; border-radius:50%; width:46%; aspect-ratio:1; animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){background:rgba(255,46,136,.35); left:48%; top:-10%}
.aurora i:nth-child(2){background:rgba(255,138,61,.25); left:62%; top:40%; animation-duration:28s; animation-delay:-6s}
.aurora i:nth-child(3){background:rgba(120,80,255,.25); left:20%; top:30%; animation-duration:34s; animation-delay:-12s}
@keyframes drift{to{transform:translate(-14%,10%) scale(1.15)}}
.hero.has-art .aurora{opacity:.25}
@media (max-width:900px){ .hero.bleed > .hbg{width:100vw} }
@media (max-width:760px){ .hero.bleed > .hbg{top:-20px} .hbg .hfade{background:linear-gradient(90deg, rgba(11,11,20,.85), rgba(11,11,20,.55)), linear-gradient(0deg, var(--bg) 0%, rgba(11,11,20,0) 25%)} }
@media (prefers-reduced-motion:reduce){ .aurora i,.hbg > .hs.on{animation:none} }
/* readability pass: brighter side menu */
.navlink{color:#ECE8FA; font-weight:600}
.navlink:hover{color:#fff}
.navlink .ic{color:#D4CDEF; background:var(--panel-3)}
.navgroup .h{color:#A9A2CF; font-size:11px}
.navlink .n,.navlink .soon{color:#A9A2CF}
.logo small{color:#B3ACD3}
/* readability pass: body copy a touch brighter on cards */
.cat p,.tool p,.entry .ex,.gb p,.amain p,.amain li{color:#D9D4EE}
.fine{color:var(--muted)}
.lede{color:#C9C3E3}
.hero .lede{color:#D6D0EC}
@media (max-width:560px){
  .tools{grid-template-columns:1fr 1fr; gap:10px}
  .tool{padding:14px; gap:6px}
  .tool .ti{width:32px; height:32px; font-size:15px}
  .tool b{font-size:17px}
  .tool p{font-size:12.5px; line-height:1.4}
}
.hbg > picture.hs{position:absolute; inset:0; display:block}
.hbg > picture.hs img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- database v2: picture cards, brand chips, galleries ---------- */
.entries{grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.entry.pic{padding:0; gap:0; overflow:hidden; transition:border-color .2s, box-shadow .2s, transform .2s}
.entry.pic:hover{transform:translateY(-3px)}
.entry.pic .cv{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--panel-2)}
.entry.pic .cv > img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.entry.pic:hover .cv > img,.entry.pic:hover .ph .phw{transform:scale(1.05)}
.entry.pic .cv::after{content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(transparent,rgba(11,11,20,.75)); pointer-events:none}
.entry.pic .ov{position:absolute; top:10px; left:10px; right:10px; display:flex; flex-wrap:wrap; gap:6px; z-index:2}
.entry.pic .ov .chip{background:rgba(11,11,20,.78); backdrop-filter:blur(6px)}
.entry.pic .pn{position:absolute; right:10px; bottom:9px; z-index:2; font:600 11.5px var(--mono); color:#fff; background:rgba(11,11,20,.7); padding:3px 7px; border-radius:6px}
.entry.pic .cb{display:grid; gap:6px; padding:14px 16px 16px; align-content:start}
.entry.pic .ar{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--sun-2)}
.entry.pic .nm{font-family:var(--display); font-size:24px; font-weight:800; letter-spacing:.01em; line-height:1.05; text-transform:uppercase}
.entry.pic .tg{font-style:italic; color:#E7E2F7; font-size:14px}
.entry.pic .ex{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.45}
.entry.pic .cf{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; padding-top:10px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}
.chip.ed{color:#FFD27A; border-color:rgba(255,210,122,.5)}
/* placeholder art until screenshots arrive */
.ph{position:absolute; inset:0; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--c) 38%, transparent), transparent 60%),
             radial-gradient(90% 80% at 0% 100%, rgba(255,46,136,.28), transparent 60%), linear-gradient(160deg,#1C1838,#0E0C1E)}
.ph .phg{position:absolute; inset:-1px; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px; -webkit-mask-image:linear-gradient(170deg,#000,transparent 75%); mask-image:linear-gradient(170deg,#000,transparent 75%)}
.ph .phw{position:relative; font:900 clamp(30px,4.2vw,46px)/1 var(--display); text-transform:uppercase; letter-spacing:.04em; color:transparent; -webkit-text-stroke:1.4px color-mix(in srgb, var(--c) 85%, #fff); text-shadow:0 0 26px color-mix(in srgb, var(--c) 45%, transparent); transform:rotate(-6deg); transition:transform .5s ease; padding:0 12px; text-align:center; max-width:100%; overflow-wrap:anywhere}
.ph .phi{position:absolute; right:12px; bottom:10px; font:800 13px var(--mono); color:var(--c); opacity:.75}
.ph.big .phw{font-size:clamp(44px,8vw,96px)}
/* brand chips */
.quick{display:grid; gap:8px; margin:0 0 16px}
.quick .qrow{display:flex; flex-wrap:wrap; gap:8px}
.qchip{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--panel); color:var(--text); cursor:pointer; font:600 14px var(--body); min-height:38px}
.qchip span{font:600 11.5px var(--mono); color:var(--muted)}
.qchip:hover{border-color:var(--c)}
.qchip[aria-pressed="true"]{background:color-mix(in srgb, var(--c) 22%, var(--panel)); border-color:var(--c)}
.statline.sm{font-size:13.5px; margin-top:4px}
/* entry gallery */
.gal{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--panel-2); margin:6px 0 4px}
.gtrack{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.gtrack::-webkit-scrollbar{display:none}
.gs{flex:0 0 100%; margin:0; scroll-snap-align:center; aspect-ratio:16/9}
.gs img{width:100%; height:100%; object-fit:cover; display:block}
.gb{position:absolute; top:calc(50% - 60px); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(11,11,20,.65); color:#fff; font-size:26px; line-height:1; cursor:pointer; backdrop-filter:blur(6px); z-index:2}
.gb.prev{left:12px} .gb.next{right:12px}
.gb:hover{border-color:var(--sun)}
.gcount{position:absolute; right:12px; top:12px; font:600 12px var(--mono); background:rgba(11,11,20,.7); padding:4px 8px; border-radius:6px; z-index:2}
.gthumbs{display:flex; gap:6px; padding:8px; overflow-x:auto; scrollbar-width:thin}
.gt{flex:0 0 96px; aspect-ratio:16/9; border-radius:7px; overflow:hidden; border:2px solid transparent; padding:0; background:none; cursor:pointer; opacity:.6}
.gt img{width:100%; height:100%; object-fit:cover; display:block}
.gt.on{border-color:var(--sun); opacity:1}
.gcred{font-size:12.5px; color:var(--dim); margin:2px 0 18px}
.gal.empty{position:relative; aspect-ratio:21/9}
.gsoon{position:absolute; left:14px; bottom:12px; font:600 12px var(--mono); color:var(--muted); background:rgba(11,11,20,.7); padding:5px 9px; border-radius:7px}
.gal.empty + *{margin-top:18px}
/* entry body bits */
.pq{margin:18px 0; padding:16px 18px; border-left:3px solid var(--sun); background:linear-gradient(110deg,rgba(255,46,136,.12),transparent 70%); border-radius:0 12px 12px 0; font-size:clamp(18px,2.2vw,22px); font-style:italic; color:#F5F2FF; line-height:1.4}
.pq cite{display:block; margin-top:8px; font-size:12.5px; font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.ticks{list-style:none; padding:0; margin:0 0 8px; display:grid; gap:8px}
.ticks li{position:relative; padding-left:24px}
.ticks li::before{content:"★"; position:absolute; left:0; top:0; color:var(--sun-2); font-size:13px}
.ticks.music li::before{content:"♪"; color:#C77DFF}
.seen{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px}
.seen .sn{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line-2); font-size:14px}
.seen .sn i{width:8px; height:8px; border-radius:50%; background:var(--sun); box-shadow:0 0 10px var(--sun)}
.nbox{margin:16px 0}
.facts .pend dd{color:var(--dim); font-style:italic}
.entries.rel{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.entries.rel .entry.pic .ex{display:none}
@media (max-width:900px){
  .gb{display:none}
  .gs{aspect-ratio:4/3}
  .gal.empty{aspect-ratio:16/9}
}
@media (max-width:560px){
  .entries{grid-template-columns:1fr}
  .entries.rel{grid-template-columns:1fr 1fr; gap:10px}
  .entries.rel .entry.pic .nm{font-size:18px}
  .entries.rel .entry.pic .cf,.entries.rel .entry.pic .tg{display:none}
  .entries.rel .entry.pic .ov .chip:not(:first-child){display:none}
  .quick .qrow{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; margin:0 -16px; padding-left:16px; padding-right:16px; scrollbar-width:none}
  .quick .qrow::-webkit-scrollbar{display:none}
  .qchip{flex:none}
  .gt{flex-basis:72px}
}
@media (max-width:560px){
  .entries:not(.rel) .entry.pic{grid-template-columns:118px minmax(0,1fr)}
  .entries:not(.rel) .entry.pic .cv{aspect-ratio:auto; height:100%; min-height:118px}
  .entries:not(.rel) .entry.pic .cv::after{display:none}
  .entries:not(.rel) .entry.pic .ov{top:auto; bottom:7px; left:7px; right:7px}
  .entries:not(.rel) .entry.pic .ov .chip{font-size:9.5px; padding:2px 5px}
  .entries:not(.rel) .entry.pic .ov .chip:not(:first-child){display:none}
  .entries:not(.rel) .entry.pic .pn{display:none}
  .entries:not(.rel) .entry.pic .ph .phw{font-size:17px; -webkit-text-stroke-width:1px}
  .entries:not(.rel) .entry.pic .cb{padding:11px 12px 12px; gap:4px}
  .entries:not(.rel) .entry.pic .nm{font-size:20px}
  .entries:not(.rel) .entry.pic .ex{font-size:13.5px}
  .entries:not(.rel) .entry.pic .tg{font-size:13px}
  .entries:not(.rel) .entry.pic .cf{font-size:12px; padding-top:7px}
  .entries.rel .entry.pic .ph .phw{font-size:22px}
}
.ph{container-type:size}
.ph .phw{font-size:min(46px, calc(150cqw / var(--l,8)), 30cqh)}
.ph.big .phw{font-size:min(110px, calc(150cqw / var(--l,8)), 34cqh)}
.entries:not(.rel) .entry.pic .ph .phw{font-size:min(46px, calc(150cqw / var(--l,8)), 30cqh)}
.qchip.more{display:none}
.quick.open .qchip.more{display:inline-flex}
.qmore{color:var(--muted); border-style:dashed}
.entries.rel{grid-template-columns:repeat(2,minmax(0,1fr))}
.qfacts{display:none}
@media (max-width:900px){
  .qfacts{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:4px 0 14px}
  .qfacts div{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 11px; min-width:0}
  .qfacts dt{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
  .qfacts dd{margin:2px 0 0; font-weight:600; font-size:14.5px; overflow-wrap:anywhere}
}
@media (max-width:560px){ .quick.open .qrow{flex-wrap:wrap} }
.ph .phw{overflow-wrap:normal; padding:0 6px; font-size:min(46px, calc(118cqw / var(--l,8)), 30cqh)}
.ph.big .phw{font-size:min(110px, calc(118cqw / var(--l,8)), 34cqh)}
.entries:not(.rel) .entry.pic .ph .phw{font-size:min(46px, calc(118cqw / var(--l,8)), 30cqh)}
@media (max-width:560px){ .entries:not(.rel) .entry.pic .ph .phw{-webkit-text-stroke-width:1px; letter-spacing:.02em} }
.entry.pic{min-width:0} .entry.pic .cb{min-width:0} .entry.pic .nm{overflow-wrap:anywhere}
@media (max-width:560px){ .entries.rel .entry.pic .ph .phw{font-size:min(30px, calc(110cqw / var(--l,8)), 30cqh)} }
@media (max-width:560px){ .ph.big .phw{font-size:min(64px, calc(110cqw / var(--l,8)), 26cqh)} }

/* ---------- launch strip ---------- */
.lstrip{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:2px 0 0; font-size:14px; color:#D6D0EC}
.lstrip > span:not(.fine){display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; background:rgba(11,11,20,.55); border:1px solid var(--line-2)}
.lstrip .fine{flex-basis:100%; font-size:12.5px}
.lstrip .dot{width:8px; height:8px; border-radius:50%; background:var(--warn); box-shadow:0 0 10px var(--warn)}
.lstrip .live .dot,.lstrip b.live + i{background:var(--ok)}
/* ---------- hot right now / recently viewed ---------- */
.hrow,.rrow{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,260px); gap:14px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x proximity; scrollbar-width:thin}
.hrow > .entry{scroll-snap-align:start}
.hrow .entry.pic .ex{display:none}
.rrow{grid-auto-columns:max-content}
.rrow a{display:grid; gap:2px; padding:10px 14px; border-radius:10px; background:var(--panel); border:1px solid var(--line); text-decoration:none; color:var(--text); min-width:150px; max-width:240px; scroll-snap-align:start}
.rrow a:hover{border-color:rgba(255,46,136,.5)}
.rrow a span{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sun-2); font-weight:700}
.rrow a b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* ---------- cards / table toggle ---------- */
.vt{display:inline-flex; border:1px solid var(--line-2); border-radius:9px; overflow:hidden}
.vbtn{background:var(--panel); color:var(--muted); border:0; padding:8px 11px; font:600 13.5px var(--body); cursor:pointer; min-height:36px}
.vbtn + .vbtn{border-left:1px solid var(--line-2)}
.vbtn[aria-pressed="true"]{background:var(--panel-3); color:var(--text)}
.tc,.thead{display:none}
.tbl .thead{display:grid; grid-template-columns:minmax(180px,1.6fr) repeat(var(--tn),minmax(0,1fr)) 128px; gap:12px; padding:8px 16px; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line-2)}
.tbl .entries{grid-template-columns:1fr; gap:0}
.tbl .entries .entry.pic{display:block; border-radius:0; border-width:0 0 1px; background:transparent; transform:none}
.tbl .entries .entry.pic:hover{background:var(--panel); box-shadow:none}
.tbl .entries .entry.pic .cv,.tbl .entries .entry.pic .ex,.tbl .entries .entry.pic .cf,.tbl .entries .entry.pic .tg,.tbl .entries .entry.pic .ar,.tbl .entries .entry.pic .prog{display:none}
.tbl .entries .entry.pic .cb{display:grid; grid-template-columns:minmax(180px,1.6fr) repeat(var(--tn),minmax(0,1fr)) 128px; gap:12px; align-items:center; padding:11px 16px}
.tbl .entries .entry.pic .nm{font:700 15.5px var(--body); text-transform:none; letter-spacing:0}
.tbl .entries .tc{display:contents}
.tbl .entries .tcell{font-size:14px; color:#D9D4EE; min-width:0; overflow:hidden; text-overflow:ellipsis}
/* prev / next */
.pnav{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0 4px}
.pnav a{display:grid; gap:2px; padding:12px 14px; border-radius:11px; border:1px solid var(--line); background:var(--panel); text-decoration:none; color:var(--text); min-width:0}
.pnav a:last-child{text-align:right}
.pnav a:hover{border-color:rgba(255,46,136,.5)}
.pnav b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lis{font-size:13px; margin-left:6px; white-space:nowrap}
@media (max-width:900px){
  .tbl .thead{display:none}
  .tbl .entries .entry.pic .cb{grid-template-columns:1fr; gap:3px; padding:11px 4px}
  .tbl .entries .tc{display:flex; flex-wrap:wrap; gap:2px 12px}
  .tbl .entries .tcell{font-size:13px; color:var(--muted)}
  .tbl .entries .tcell:not(.st)::before{content:attr(data-l) ": "; color:var(--dim)}
  .tbl .entries .tcell.st{order:-1; flex-basis:100%}
  .tbl .entries .tcell.st .chip{font-size:9.5px}
}
@media (max-width:560px){
  .hrow{grid-auto-columns:78%; margin:0 -16px; padding-left:16px; padding-right:16px}
  .hrow .entry.pic{display:grid; grid-template-columns:1fr}
  .rrow{margin:0 -16px; padding-left:16px; padding-right:16px}
  .lstrip{font-size:13px}
}
.hrow{align-items:stretch}
.hrow > .entry.pic{align-self:stretch; transform:none}
.hrow > .entry.pic:hover{transform:translateY(-2px)}
@media (max-width:560px){ .hrow,.rrow{scroll-padding-inline:16px} }