:root{
  --bg:#03070b; --panel:#071017cc; --panel2:#0b151dcc; --line:#213240; --text:#f0f4f6; --muted:#8d98a1;
  --red:#ff2626; --blue:#21a4ff; --cyan:#00e5ff; --gold:#ffb933; --green:#53ff73; --purple:#c65bff;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:radial-gradient(circle at 50% -10%,#132838 0,#03070b 42%,#010204 100%);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 10%,rgba(255,0,0,.16),transparent 24%),radial-gradient(circle at 86% 16%,rgba(0,216,255,.14),transparent 26%);pointer-events:none;z-index:-2}
.scanlines,.noise{position:fixed;inset:0;pointer-events:none;z-index:50}.scanlines{background:linear-gradient(to bottom,transparent 0 96%,rgba(255,255,255,.035) 97%);background-size:100% 5px;mix-blend-mode:screen;opacity:.25}.noise{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E")}
.zx-nav{height:74px;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:28px;padding:0 28px;background:rgba(1,3,6,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 10px 40px #000}
.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-weight:900;font-size:28px;letter-spacing:2px}.brand b{color:var(--red)}.sigil{width:38px;height:38px;border:1px solid #761919;border-radius:50%;display:grid;place-items:center;color:var(--red);box-shadow:0 0 25px #ff000033}
.zx-nav nav{display:flex;gap:26px;flex:1;justify-content:center}.zx-nav nav a{color:#d7dde0;text-transform:uppercase;font-size:14px;text-decoration:none;letter-spacing:.7px;padding:28px 0;position:relative}.zx-nav nav a.active:after,.zx-nav nav a:hover:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);box-shadow:0 0 14px var(--red)}.nav-icons{display:flex;gap:12px}.nav-icons button{background:#05090e;border:1px solid #2b3a43;border-radius:8px;color:#dce5e8;width:44px;height:44px;font-size:18px}
main{max-width:1760px;margin:0 auto;padding:0 16px 30px}.hero{min-height:245px;border:1px solid #253441;border-radius:14px;margin-top:10px;overflow:hidden;background:linear-gradient(90deg,#05080d 0,#05101acc 45%,transparent),url('../images/hero_bg.jpg') center/cover;position:relative;display:flex;align-items:center;padding:45px 56px;box-shadow:0 25px 80px #000 inset}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));pointer-events:none}.hero-copy{position:relative;z-index:2}.eyebrow{color:var(--red);text-transform:uppercase;letter-spacing:10px;font-weight:800}.hero h1{font-size:72px;line-height:.9;text-transform:uppercase;margin:8px 0 18px;letter-spacing:8px;text-shadow:0 0 25px #000}.hero h1 span{font-size:26px;color:var(--red);letter-spacing:12px}.hero p{color:#d5dce0;font-size:18px}
.hero-target{position:absolute;right:23%;top:50%;width:180px;height:180px;transform:translateY(-50%);opacity:.7}.hero-target span{position:absolute;inset:0;border:1px solid #68e8ff;border-radius:50%;animation:spin 12s linear infinite;box-shadow:0 0 30px #00d9ff33}.hero-target span:nth-child(2){inset:22px;animation-duration:8s;animation-direction:reverse}.hero-target span:nth-child(3){inset:54px;animation-duration:4s}
@keyframes spin{to{transform:rotate(360deg)}}
.layout{display:grid;grid-template-columns:340px minmax(0,1fr) 360px;border:1px solid #263641;border-top:0;border-radius:0 0 14px 14px;overflow:hidden;background:rgba(1,5,9,.65)}
.sidebar,.grid-shell,.spotlight{padding:22px;background:rgba(4,10,16,.72);border-right:1px solid #263641}.spotlight{border-right:0;border-left:1px solid #263641}.search{height:46px;border:1px solid #2d3d49;border-radius:8px;display:flex;align-items:center;padding:0 14px;background:#081019}.search input{flex:1;background:transparent;border:0;outline:0;color:white;font-size:15px}.search span{color:#9ba7b0;font-size:22px}
h3{margin:28px 0 12px;color:#b7c0c6;text-transform:uppercase;font-size:13px;letter-spacing:1.2px}.filters button,.factions button{width:100%;display:flex;gap:12px;align-items:center;text-align:left;background:linear-gradient(180deg,#0c151d,#071018);border:1px solid #22323e;color:#e3e6e8;padding:12px 14px;border-radius:8px;margin-bottom:10px;cursor:pointer;transition:.25s}.filters button:hover,.filters button.active,.factions button:hover{border-color:var(--red);box-shadow:0 0 28px #ff00001f;transform:translateX(3px)}.filters i{font-style:normal;width:24px}.red{color:var(--red)}.blue{color:var(--blue)}.cyan{color:var(--cyan)}.gold{color:var(--gold)}
.factions b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;box-shadow:0 0 22px currentColor}.factions span{display:flex;flex-direction:column;gap:4px}.factions small,.map-btn small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.map-btn{margin-top:32px;width:100%;padding:18px;background:linear-gradient(90deg,#2b0306,#12070a);border:1px solid #782121;color:white;border-radius:10px;text-align:left;text-transform:uppercase;font-weight:800;letter-spacing:.5px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.section-head h2{font-size:15px;text-transform:uppercase;color:#d1d8dc;letter-spacing:1px}.section-head h2 span{color:var(--red);margin-right:8px}.view-toggle{display:flex;align-items:center;gap:12px;text-transform:uppercase;color:#b7c0c6}.view-toggle button{background:transparent;border:0;color:#b7c0c6;font-size:24px}.view-toggle button.active{color:var(--red)}
.character-grid{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:14px}.char-card{min-height:390px;border:1px solid #283945;border-radius:10px;overflow:hidden;background:#05090d;position:relative;cursor:pointer;transform:translateY(30px);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s,box-shadow .25s,border-color .25s}.char-card.show{transform:translateY(0);opacity:1}.char-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent),transparent 45%),0 0 42px color-mix(in srgb,var(--accent),transparent 70%);transform:translateY(-8px) scale(1.015)}
.char-card img{width:100%;height:225px;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.08);transition:.45s}.char-card:hover img{transform:scale(1.08);filter:saturate(1.3) contrast(1.15)}.char-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.94));z-index:1}.char-info{position:relative;z-index:2;margin-top:-72px;padding:18px}.char-info h2{font-size:22px;margin:0;text-transform:uppercase;letter-spacing:1px}.char-info b{display:block;color:var(--accent);text-transform:uppercase;font-size:13px;margin:6px 0 8px;letter-spacing:1px}.char-info p{color:#bac4ca;line-height:1.4;font-size:14px;margin:0 0 16px}.char-info button{width:100%;height:42px;border:1px solid var(--accent);background:rgba(0,0,0,.25);color:var(--accent);text-transform:uppercase;font-weight:800;border-radius:6px;letter-spacing:.6px}
.spotlight h3{color:var(--red)}.spot-card{border:1px solid #263641;border-radius:10px;overflow:hidden;background:#070b0f}.spot-card img{width:100%;height:355px;object-fit:cover}.spot-body{padding:18px}.spot-body h2{font-size:29px;letter-spacing:2px;margin:0;text-transform:uppercase}.spot-body p{color:var(--red);margin:6px 0 18px}.stat{margin:12px 0}.stat label{display:flex;justify-content:space-between;color:#adb7bd;font-size:12px;text-transform:uppercase}.bar{height:7px;background:#131b22;border:1px solid #25333c;border-radius:99px;overflow:hidden;margin-top:6px}.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--red),#ff7b7b);box-shadow:0 0 15px var(--red);width:50%}.status{border-top:1px solid #25333c;margin-top:20px;padding-top:16px;color:var(--red);text-transform:uppercase}.status small{display:block;color:#98a3a9;margin-top:5px;font-size:11px}.play-card{margin-top:18px;padding:20px;border:1px solid #5a191d;border-radius:10px;background:linear-gradient(145deg,#220508,#06090e);box-shadow:inset 0 0 40px #ff000011}.play-card b{color:var(--red);text-transform:uppercase}.play-card p{color:#aab4ba}.play-card button,.modal-actions button{height:42px;border:1px solid var(--red);background:#1a0407;color:#ffb5b5;border-radius:6px;text-transform:uppercase;font-weight:900;padding:0 22px}.play-card button{width:100%}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;place-items:center;z-index:100;padding:24px}.modal.open{display:grid}.modal-card{width:min(980px,92vw);min-height:520px;background:#061018;border:1px solid #365062;border-radius:16px;display:grid;grid-template-columns:42% 1fr;overflow:hidden;box-shadow:0 0 80px #000}.modal-card img{width:100%;height:100%;object-fit:cover}.modal-copy{padding:36px}.modal-copy h2{font-size:42px;text-transform:uppercase;margin:0}.modal-copy h4{color:var(--red);text-transform:uppercase;letter-spacing:2px}.modal-copy p{color:#c5d0d5;line-height:1.7}.close{position:absolute;top:24px;right:32px;width:42px;height:42px;background:#090d12;color:white;border:1px solid #354a58;border-radius:50%;font-size:24px}.modal-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}.modal-actions{display:flex;gap:12px;margin-top:24px}.modal-actions .ghost{background:transparent;color:#dce5e8;border-color:#405766}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1350px){.layout{grid-template-columns:280px 1fr}.spotlight{display:none}.character-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}.zx-nav nav{gap:15px}.zx-nav nav a{font-size:12px}}
@media(max-width:900px){.zx-nav nav{display:none}.layout{display:block}.sidebar{border-right:0;border-bottom:1px solid #263641}.hero{padding:34px 24px}.hero h1{font-size:46px}.character-grid{grid-template-columns:repeat(2,1fr)}.modal-card{grid-template-columns:1fr}.modal-card img{height:320px}}
@media(max-width:560px){main{padding:0 8px}.character-grid{grid-template-columns:1fr}.brand{font-size:22px}.hero h1{font-size:36px}.hero h1 span{font-size:18px}.sidebar,.grid-shell{padding:14px}}