:root { --bg:#090a0c; --panel:#13151a; --panel2:#1c1f26; --line:#2a2e37; --text:#ffffff; --soft:#c8ccd4; --muted:#8d93a0; --lime:#35f23a; --orange:#ffe033; --gold:#ffe033; --red:#ff3b30; --r:14px; }
@font-face { font-family:Inter; src:url(/static/inter.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:Grotesk; src:url(/static/grotesk.woff2) format("woff2"); font-weight:300 700; font-display:swap; }
* { box-sizing:border-box; } [hidden] { display:none !important; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; color:var(--text); background:var(--bg); font:16px/1.6 Inter,"Segoe UI",system-ui,sans-serif; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
#stars { position:fixed; inset:0; width:100%; height:100%; z-index:-1; opacity:.5; }
a { color:var(--lime); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2,h3 { font-family:Grotesk,Inter,sans-serif; font-weight:700; letter-spacing:-.025em; line-height:1.12; margin:0; }
h1 { font-size:2.7rem; margin-bottom:.35em; } h2 { font-size:1.6rem; margin:1.5em 0 .6em; } h3 { font-size:1.12rem; }
.c { color:var(--lime); } .p { color:var(--orange); } .gold { color:var(--gold); } .muted,small { color:var(--muted); } .center { text-align:center; }
.ic { width:1.1em; height:1.1em; vertical-align:-.17em; margin-right:.45em; flex:none; }
/* Top: a thin status strip, then a bar with the logo in the middle. */
.strip { display:flex; align-items:center; justify-content:space-between; gap:8px 18px; flex-wrap:wrap; padding:6px 24px; background:var(--lime); color:#06140a; font-size:.84rem; font-weight:500; } .strip a { color:#06140a; } .strip b { font-weight:800; } .strip .acct { display:flex; align-items:center; gap:14px; } .strip form { margin:0; } .strip .link { color:#06140a; font-weight:500; } .strip .join { padding:2px 12px; background:#06140a; color:var(--lime); border-radius:999px; font-weight:700; } .strip .join:hover { text-decoration:none; } .strip .ic { margin-right:.25em; } .live { display:inline-flex; align-items:center; gap:7px; }
.pulse { display:inline-block; width:9px; height:9px; border-radius:50%; background:#06140a; animation:beat 1.5s infinite; } @keyframes beat { 0% { box-shadow:0 0 0 0 rgba(20,26,5,.55); } 70%,100% { box-shadow:0 0 0 8px rgba(20,26,5,0); } } .pulsefeed .pulse { background:var(--lime); animation-name:beatl; } @keyframes beatl { 0% { box-shadow:0 0 0 0 rgba(53,242,58,.5); } 70%,100% { box-shadow:0 0 0 8px rgba(53,242,58,0); } }
.bar { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:6px 24px; background:rgba(11,13,10,.93); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.nav { display:flex; gap:4px; } .navl { justify-content:flex-end; } .navr { justify-content:flex-start; } .nav a { padding:8px 13px; border-radius:999px; color:var(--soft); font:600 .95rem Grotesk,Inter,sans-serif; white-space:nowrap; } .nav a:hover { background:var(--panel2); color:var(--text); text-decoration:none; } .nav a.on { background:var(--lime); color:#06140a; }
.brand { display:flex; align-items:center; gap:8px; color:var(--text); } .brand:hover { text-decoration:none; } .brand img { width:58px; height:58px; display:block; } .brand span { font:700 1.35rem Grotesk,Inter,sans-serif; letter-spacing:.06em; }
.burger { display:none; justify-self:end; padding:6px; cursor:pointer; color:var(--text); } .burger .ic { margin:0; width:28px; height:28px; vertical-align:middle; }
main { width:100%; max-width:1080px; margin:0 auto; padding:34px 20px 60px; flex:1; } main.wide { max-width:1180px; } main.flush { max-width:none; padding:0 0 60px; } .content { width:100%; max-width:1240px; margin:0 auto; padding:0 20px; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; border:0; border-radius:999px; background:var(--lime); color:#06140a; font:700 1rem Grotesk,Inter,sans-serif; cursor:pointer; white-space:nowrap; transition:transform .12s,box-shadow .12s; } .btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(53,242,58,.28); text-decoration:none; }
.btn.ghost { background:var(--panel2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); } .btn.ghost:hover { box-shadow:inset 0 0 0 1px var(--lime); } .btn.gold { background:var(--gold); color:#221800; } .btn.danger { background:#3a1414; color:#ffcfcf; } .btn.small { padding:7px 15px; font-size:.88rem; }
.link { padding:0; border:0; background:none; color:var(--lime); font:inherit; cursor:pointer; } .link:hover { text-decoration:underline; } .link.danger { color:var(--red); font-size:.85rem; }
/* Home: stage and map reel. */
.stage { position:relative; overflow:hidden; text-align:center; padding:44px 20px 34px; } #pulsar { position:absolute; inset:0; width:100%; height:100%; opacity:.32; } .stagein { position:relative; z-index:1; max-width:720px; margin:0 auto; } .word { width:min(350px,78vw); height:auto; display:block; margin:0 auto 12px; filter:drop-shadow(0 6px 24px rgba(0,0,0,.8)); } .stage h1 { font-size:clamp(2.3rem,6vw,4rem); margin-bottom:.2em; } .stage p { margin:0 auto 20px; max-width:560px; font-size:1.1rem; color:var(--soft); } .cta { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.reel { display:flex; gap:6px; height:380px; padding:0 20px; max-width:1500px; margin:0 auto; } .panel { position:relative; flex:1 1 0; min-width:0; overflow:hidden; border-radius:var(--r); background:#000; color:var(--text); transition:flex-grow .35s ease; } .panel:hover,.panel:focus-visible { flex-grow:4.5; text-decoration:none; } .panel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.75) brightness(.72); transition:filter .3s; } .panel:hover img { filter:none; } .panel::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.88)); } .vname { position:absolute; z-index:1; left:50%; bottom:16px; writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg); font:700 1.08rem Grotesk,sans-serif; white-space:nowrap; transition:opacity .2s; } .panel:hover .vname { opacity:0; } .more-info { position:absolute; z-index:1; left:18px; right:18px; bottom:16px; display:flex; flex-direction:column; gap:3px; opacity:0; transition:opacity .2s .08s; } .panel:hover .more-info,.panel:focus-visible .more-info { opacity:1; } .more-info b { font:700 1.6rem Grotesk,sans-serif; } .more-info small { color:#dfe4d5; } .more-info em { font-style:normal; color:var(--lime); font-weight:700; font-size:.88rem; }
.ticker { display:grid; grid-template-columns:repeat(4,1fr); margin:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .ticker div { padding:18px 8px; text-align:center; border-left:1px solid var(--line); } .ticker div:first-child { border-left:0; } .ticker b { display:block; font:700 2.3rem/1.1 Grotesk,sans-serif; color:var(--lime); } .ticker span { color:var(--muted); font-size:.85rem; }
.trio { display:grid; grid-template-columns:1.1fr 1.3fr 1fr; gap:14px; align-items:stretch; } .trio article { padding:22px; background:var(--panel); border-radius:var(--r); position:relative; } .trio h2 { margin:0 0 10px; font-size:1.25rem; } .chal { background:linear-gradient(145deg,#ff6b1a,#c24309) !important; color:#fff; overflow:hidden; } .chal small { color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:.74rem; } .chal h2 { margin:.25em 0 .35em; font-size:2rem; max-width:80%; } .chal p { margin:0; max-width:80%; } .chal img { position:absolute; right:14px; bottom:14px; width:64px; height:64px; }
.pulsefeed h2 { display:flex; align-items:center; gap:10px; } .pulsefeed ul { list-style:none; margin:0; padding:0; } .pulsefeed li { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px solid var(--line); font-size:.92rem; } .pulsefeed small { white-space:nowrap; }
.top5 { list-style:none; counter-reset:n; padding:0; margin:0 0 8px; } .top5 li { counter-increment:n; display:flex; gap:8px; padding:7px 0; border-top:1px solid var(--line); } .top5 li::before { content:counter(n); color:var(--lime); font-weight:800; } .top5 span { margin-left:auto; color:var(--muted); font-size:.88rem; } .top5.flat li::before { display:none; } .top5.flat .name { color:var(--gold); font-weight:700; } .top5.flat span:last-child { margin-left:0; } .more { font-weight:600; white-space:nowrap; }
.why { display:grid; grid-template-columns:260px 1fr; gap:30px; margin:50px 0 20px; } .whyhead h2 { margin:0 0 .3em; font-size:2.2rem; } .whyhead p { color:var(--muted); margin:0 0 14px; } .whylist { display:grid; grid-template-columns:1fr 1fr; gap:24px 30px; } .whylist article { display:flex; gap:14px; } .whylist img { width:52px; height:52px; flex:none; } .whylist p { margin:.2em 0 0; color:var(--muted); font-size:.94rem; }
/* Servers: rows with filter tabs. */
.head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 20px; margin:34px 0 16px; } .head.first { margin-top:0; } .head h1 { margin:0; } .head p { margin:.3em 0 0; color:var(--muted); }
.tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; } .tabs button { padding:7px 16px; border:0; border-radius:999px; background:var(--panel2); color:var(--soft); font:600 .92rem Grotesk,Inter,sans-serif; cursor:pointer; } .tabs button:hover { color:var(--text); } .tabs button.on { background:var(--lime); color:#06140a; }
.servers { display:flex; flex-direction:column; gap:8px; } .server { display:grid; grid-template-columns:150px minmax(0,1fr) 150px 150px; align-items:center; gap:18px; padding:10px 16px 10px 10px; background:var(--panel); border-radius:var(--r); transition:background .15s; } .server:hover { background:var(--panel2); } .thumb { display:block; height:84px; overflow:hidden; border-radius:9px; background:#000; } .thumb img { display:block; width:100%; height:100%; object-fit:cover; } .server:not(.up) .thumb img { filter:saturate(.45) brightness(.7); } .what h3 a { color:var(--text); } .what p { margin:.15em 0 0; color:var(--muted); font-size:.92rem; } .who { color:var(--lime) !important; }
.tag { display:inline-block; padding:1px 9px; border-radius:999px; font:700 .68rem Inter,sans-serif; letter-spacing:.03em; vertical-align:middle; color:#06140a; } .tag.lime { background:var(--lime); } .tag.orange { background:var(--orange); color:#fff; } .tag.goldtag { background:var(--gold); } .tag.whitetag { background:var(--text); }
.state { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.88rem; white-space:nowrap; } .state b { color:var(--text); } .state.big { font-size:1rem; display:flex; color:var(--soft); } .sig { display:inline-flex; align-items:flex-end; gap:2px; height:15px; } .sig i { width:4px; border-radius:1px; background:#3a4034; } .sig i:nth-child(1) { height:5px; } .sig i:nth-child(2) { height:8px; } .sig i:nth-child(3) { height:12px; } .sig i:nth-child(4) { height:15px; } .server.up .sig i.on,.state.big:not(.off) .sig i.on { background:var(--lime); }
.copy { display:inline-flex; align-items:center; justify-content:center; width:100%; padding:9px 12px; background:var(--panel2); border:0; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); color:var(--soft); font:600 .86rem Grotesk,Inter,sans-serif; cursor:pointer; white-space:nowrap; } .server:hover .copy { background:#262b22; } .copy:hover { box-shadow:inset 0 0 0 1px var(--lime); color:var(--lime); } .copy.done { box-shadow:inset 0 0 0 1px var(--lime); color:var(--lime); } .copy.small { width:auto; flex:none; padding:5px 12px; font-size:.8rem; }
code,kbd { padding:2px 7px; background:#0d0f13; border:1px solid var(--line); border-radius:6px; font:.86rem Consolas,monospace; color:var(--lime); }
/* Shared pages. */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0; } .stats div { padding:18px; text-align:center; background:var(--panel); border-radius:var(--r); } .stats img { display:block; margin:0 auto 6px; width:36px; height:36px; } .stats .ic { display:block; margin:0 auto 6px; width:24px; height:24px; color:var(--lime); } .stats b { display:block; font:700 1.8rem Grotesk,sans-serif; } .stats span { color:var(--muted); font-size:.85rem; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:22px 0; } .grid3 article,.card,.post,.board { background:var(--panel); border-radius:var(--r); padding:20px; } .grid3 h2 { margin:.4em 0 .2em; font-size:1.2rem; } .grid3 p { margin:0; color:var(--soft); } .grid3 img { display:block; }
.hero.small { padding:10px 0 16px; text-align:center; } .hero.small img { display:block; margin:0 auto; mix-blend-mode:lighten; } .hero.small p { color:var(--soft); margin:.3em auto; max-width:600px; } .plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; } .plans h2 { margin:0; } .price { margin:.2em 0 0; font:700 2.3rem Grotesk,sans-serif; color:var(--gold); }
.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:18px; align-items:start; } .card { margin:12px 0; } .card h2 { margin:0 0 .5em; font-size:1.25rem; } .card p { margin:.5em 0; } .narrow { max-width:430px; margin:30px auto; } .narrow h1 { font-size:1.8rem; }
.scroll { overflow-x:auto; background:var(--panel); border-radius:var(--r); } table { width:100%; border-collapse:collapse; } th,td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; } th { color:var(--muted); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; } tr:last-child td { border-bottom:0; } tbody tr:hover { background:var(--panel2); }
.boards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; } .board { color:var(--text); transition:background .15s,transform .15s; } .board:hover { background:var(--panel2); text-decoration:none; transform:translateY(-2px); } .board > .ic { display:block; width:24px; height:24px; color:var(--lime); margin:0 0 8px; } .board p { margin:.3em 0; color:var(--soft); font-size:.94rem; }
.threads { list-style:none; margin:10px 0 16px; padding:0; } .threads li { padding:13px 18px; margin-bottom:8px; background:var(--panel); border-radius:12px; } .threads small { display:block; }
.post { margin-bottom:12px; } .post header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line); } .user { font-weight:700; color:var(--text); }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; background:#343a2c; color:var(--text); font:700 .68rem Inter,sans-serif; vertical-align:middle; } .badge.vip { background:var(--gold); color:#221800; } .badge.staff { background:var(--orange); color:#fff; }
.tools { display:flex; flex-wrap:wrap; gap:8px; margin:0; } .crumb { margin:0 0 4px; color:var(--muted); font-size:.92rem; }
label { display:block; margin-bottom:14px; font-weight:600; font-size:.92rem; } input,textarea { display:block; width:100%; margin-top:5px; padding:11px 13px; background:#0d0f13; border:1px solid var(--line); border-radius:10px; color:var(--text); font:1rem Inter,sans-serif; } input:focus,textarea:focus { outline:2px solid var(--lime); outline-offset:1px; } .hp { position:absolute; left:-9999px; } #navtoggle { display:none; }
.notice { padding:11px 16px; border-radius:12px; background:var(--panel); } .notice.err { background:#3a1414; color:#ffcfcf; } .notice.info { background:rgba(53,242,58,.1); }
.steps { padding-left:0; list-style:none; counter-reset:s; } .steps li { counter-increment:s; position:relative; padding:18px 20px 18px 70px; margin-bottom:10px; background:var(--panel); border-radius:var(--r); } .steps li::before { content:counter(s); position:absolute; left:20px; top:18px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:#06140a; font:700 1rem Grotesk,sans-serif; } .steps p { margin:.3em 0 0; color:var(--soft); }
.bigcode { font:700 1.5rem Consolas,monospace; color:var(--gold); }
.cmds { display:grid; grid-template-columns:auto 1fr; gap:8px 12px; margin:0; align-items:start; } .cmds dd { margin:0; color:var(--soft); font-size:.92rem; } .cmds dt code { white-space:nowrap; }
.xp { height:10px; background:var(--panel2); border-radius:999px; overflow:hidden; margin:6px 0; } .xp i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lime),var(--orange)); border-radius:999px; } .mini { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; } .mini div { padding:10px; text-align:center; background:var(--panel2); border-radius:10px; } .mini b { display:block; font-size:1.15rem; } .mini span { color:var(--muted); font-size:.78rem; }
.plain { list-style:none; margin:0 0 10px; padding:0; } .plain li { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); } .plain li:last-child { border-bottom:0; } .plain img { width:64px; height:36px; object-fit:cover; border-radius:6px; } .plain span { flex:1; } .plain small { display:block; } .chalcard small { color:var(--orange); font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:.74rem; } .chalcard h2 { margin:.15em 0 .3em; }
.mods { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; } .mod { display:flex; flex-direction:column; overflow:hidden; background:var(--panel); border-radius:var(--r); } .mod > img { display:block; width:100%; height:150px; object-fit:cover; background:#0d0f13; } .mod > div { padding:16px 18px; } .mod p { margin:.4em 0; color:var(--soft); font-size:.94rem; } .mod .where { color:var(--lime); font-size:.84rem; font-weight:600; } .mod img[src*="pulsar_"],.mod img[src*="icon_"],.mod img[src*="item_"] { object-fit:contain; padding:14px; }
.maphero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr); gap:26px; align-items:center; margin-bottom:10px; } .maphero > img { width:100%; height:auto; border-radius:var(--r); } .maphero h1 { margin:.25em 0 .1em; } .maphero p { color:var(--soft); } .maphero .copy { width:auto; } .tips { margin:0; padding-left:20px; color:var(--soft); } .tips li { margin-bottom:6px; }
.ach { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:8px; } .ach div { padding:12px; background:var(--panel2); border-radius:10px; opacity:.5; } .ach div.got { opacity:1; box-shadow:inset 0 0 0 1px var(--gold); } .ach .ic { display:block; margin:0 0 4px; color:var(--muted); } .ach .got .ic { color:var(--gold); } .ach b { display:block; font-size:.9rem; } .ach small { font-size:.76rem; }
footer { padding:26px 20px; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:.85rem; } footer img { display:block; margin:0 auto 8px; } footer p { margin:.25em 0; }
@media (max-width:1040px) { .bar { grid-template-columns:auto 1fr; } .brand { order:0; } .burger { display:block; order:1; } .navl { order:2; grid-column:1 / -1; } .navr { order:3; grid-column:1 / -1; } .nav { display:none; flex-direction:column; align-items:stretch; } #navtoggle:checked ~ .nav { display:flex; } .todaylink { display:none; } .trio { grid-template-columns:1fr 1fr; } .chal { grid-column:1 / -1; } .why { grid-template-columns:1fr; gap:14px; } .server { grid-template-columns:110px minmax(0,1fr) 130px; } .server .copy { grid-column:2 / -1; } .thumb { height:70px; } }
@media (max-width:700px) { .strip { padding:6px 14px; } .bar { padding:4px 14px; } .brand img { width:46px; height:46px; } .reel { height:auto; overflow-x:auto; padding:0 14px 8px; scroll-snap-type:x mandatory; gap:8px; } .panel { flex:0 0 72%; height:240px; scroll-snap-align:center; } .panel .vname { display:none; } .more-info { opacity:1; } .panel img { filter:none; } .ticker { grid-template-columns:1fr 1fr; } .ticker div:nth-child(3) { border-left:0; } .ticker div:nth-child(n+3) { border-top:1px solid var(--line); } .trio,.whylist { grid-template-columns:1fr; } .server { grid-template-columns:90px minmax(0,1fr); gap:12px; } .server .state,.server .copy { grid-column:1 / -1; } .server .state { justify-content:flex-start; } h1 { font-size:2rem; } .cmds { grid-template-columns:1fr; } .cmds dd { margin-bottom:6px; } .maphero { grid-template-columns:1fr; } }

/* Colours from the in-game server names: red EU, green PUL, yellow SAR, white ZOMBIES. */
.eu { color:var(--red); font-weight:800; } .pul { color:var(--lime); } .sar { color:var(--orange); } .zm { color:#fff; }
/* Dark status strip instead of a solid bar. */
.strip { background:#000; color:var(--soft); border-bottom:1px solid var(--line); } .strip a { color:var(--soft); } .strip a:hover { color:#fff; } .strip b { color:#fff; } .strip .link { color:var(--soft); } .strip .join { background:var(--lime); color:#06140a; } .strip .join:hover { color:#06140a; } .pulse { background:var(--lime); animation-name:beatl; } .todaylink b { color:var(--orange); } .strip .bal { color:var(--orange); }
/* Bar: active link gets an underline, name in two colours. */
.wordname { font:700 1.35rem Grotesk,Inter,sans-serif; letter-spacing:.06em; } .nav a.on { background:none; color:var(--lime); box-shadow:inset 0 -2px 0 var(--lime); border-radius:0; } .nav a:hover { border-radius:6px; }
/* The name as it looks in the server list. */
.ingame { display:inline-block; margin:0 0 12px; padding:5px 14px; background:rgba(0,0,0,.72); border:1px solid var(--line); border-radius:6px; font:700 .95rem Grotesk,Inter,sans-serif; letter-spacing:.04em; } .ingame.small { display:block; margin:0 0 3px; padding:0; background:none; border:0; font-size:.68rem; letter-spacing:.06em; } .stage p.ingame { max-width:none; color:inherit; font-size:.95rem; margin-bottom:12px; }
/* Stats sit above the reel as one bar. */
.ticker { max-width:1200px; margin:0 auto 18px; padding:0 20px; border:0; grid-template-columns:repeat(4,1fr); gap:8px; } .ticker div { background:var(--panel); border:0; border-radius:var(--r); } .ticker div:nth-child(1) b { color:var(--lime); } .ticker div:nth-child(2) b { color:var(--orange); } .ticker div:nth-child(3) b { color:#fff; } .ticker div:nth-child(4) b { color:var(--red); }
.content { padding-top:24px; }
/* Challenge card in yellow with dark text. */
.chal { background:var(--orange) !important; color:#14120a; } .chal small { color:#14120a; } .chal h2,.chal p,.chal b { color:#14120a; }
.btn { background:var(--lime); color:#06140a; } .btn:hover { box-shadow:0 8px 24px rgba(53,242,58,.3); }
.tag.orange { background:var(--orange); color:#14120a; } .tag.redtag { background:var(--red); color:#fff; } .tag.goldtag { background:var(--orange); }
.badge.staff { background:var(--red); } .badge.vip { background:var(--orange); color:#14120a; } .btn.gold { background:var(--orange); color:#14120a; }
.panel .more-info em { color:var(--orange); } .vname { color:#fff; }
.server { border-left:3px solid transparent; } .server.up { border-left-color:var(--lime); } .tabs button.on { background:var(--orange); color:#14120a; }
.xp i { background:linear-gradient(90deg,var(--lime),var(--orange)); } .steps li::before { background:var(--orange); color:#14120a; }
#pulsar { opacity:.28; }
@media (max-width:700px) { .ticker { grid-template-columns:1fr 1fr; padding:0 14px; } .ticker div:nth-child(n+3) { border-top:0; } .ingame.small { font-size:.62rem; } }

/* ========== PULSAR: one blue accent, in shades, on glass over flying stars ========== */
:root { --bg:#040a18; --panel:rgba(120,175,255,.075); --panel2:rgba(120,175,255,.14); --line:rgba(150,200,255,.16); --text:#f4f9ff; --soft:#c7d7ea; --muted:#8ba2bd; --lime:#38b6ff; --orange:#8fd8ff; --gold:#8fd8ff; --red:#1e7be8; }
html { background:#040a18; } body { background:transparent; }
#stars { opacity:1; z-index:-1; }
.pul { color:var(--lime); } .sar { color:var(--lime); } .eu { color:var(--lime); }
.strip { background:rgba(4,10,24,.72); backdrop-filter:blur(14px); } .strip .join { background:var(--lime); color:#03121f; } .strip .join:hover { color:#03121f; } .pulse,.pulsefeed .pulse { background:var(--lime); animation-name:beatb; } @keyframes beatb { 0% { box-shadow:0 0 0 0 rgba(56,182,255,.55); } 70%,100% { box-shadow:0 0 0 8px rgba(56,182,255,0); } } .todaylink b,.strip .bal { color:var(--orange); }
.bar { background:rgba(4,10,24,.62); backdrop-filter:blur(16px) saturate(1.3); } .wordname { color:#fff; } .nav a.on { color:var(--lime); box-shadow:inset 0 -2px 0 var(--lime); } .brand img { filter:drop-shadow(0 0 8px rgba(56,182,255,.55)); } .nav a:hover { background:var(--panel2); }
.btn { background:linear-gradient(180deg,#5ec5ff,#2a9df0); color:#03121f; } .btn:hover { box-shadow:0 8px 26px rgba(56,182,255,.38); } .btn.ghost { background:rgba(120,175,255,.1); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); backdrop-filter:blur(8px); } .btn.ghost:hover { box-shadow:inset 0 0 0 1px var(--lime); } .btn.gold { background:linear-gradient(180deg,#b5e6ff,#7fcfff); color:#03121f; } .btn.danger { background:rgba(30,60,120,.6); color:#d4e7ff; }
.stage { padding-top:38px; } #pulsar { opacity:.7; mix-blend-mode:screen; } .word { width:min(300px,70vw); filter:drop-shadow(0 8px 30px rgba(30,110,235,.55)); } .stage p { color:var(--soft); } .ingame { background:rgba(4,10,24,.55); backdrop-filter:blur(8px); }
.ticker div,.trio article,.server,.card,.post,.board,.grid3 article,.stats div,.mod,.steps li,.threads li,.scroll,.top5 li,.readout,.notice { backdrop-filter:blur(10px); } .ticker div { background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); } .ticker div:nth-child(1) b { color:#38b6ff; } .ticker div:nth-child(2) b { color:#62c6ff; } .ticker div:nth-child(3) b { color:#8fd8ff; } .ticker div:nth-child(4) b { color:#bce8ff; }
.trio article,.server,.card,.post,.board,.grid3 article,.stats div,.mod,.steps li,.threads li,.scroll { box-shadow:inset 0 0 0 1px var(--line); }
.chal { background:linear-gradient(145deg,rgba(56,182,255,.95),rgba(30,100,225,.82)) !important; color:#03121f; box-shadow:none !important; } .chal small,.chal h2,.chal p,.chal b { color:#03121f; }
.panel { box-shadow:inset 0 0 0 1px var(--line); } .panel img { filter:saturate(.7) brightness(.7) hue-rotate(-6deg); } .panel::after { background:linear-gradient(180deg,rgba(4,20,60,.1) 40%,rgba(3,12,32,.92)); } .more-info em { color:var(--orange); }
.tabs button { background:var(--panel); color:var(--soft); box-shadow:inset 0 0 0 1px var(--line); backdrop-filter:blur(8px); } .tabs button.on { background:var(--lime); color:#03121f; }
.server { background:var(--panel); } .server:hover { background:var(--panel2); } .server.up { border-left-color:var(--lime); } .server:hover .copy { background:rgba(120,175,255,.16); } .copy { background:rgba(120,175,255,.09); }
.tag.lime { background:rgba(56,182,255,.9); color:#03121f; } .tag.orange { background:rgba(143,216,255,.9); color:#03121f; } .tag.whitetag { background:rgba(244,249,255,.92); color:#03121f; } .tag.goldtag,.tag.redtag { background:#1e6feb; color:#fff; }
.sig i { background:rgba(150,200,255,.2); } .server.up .sig i.on,.state.big:not(.off) .sig i.on { background:var(--lime); } .state.big.off .sig i.on { background:rgba(150,200,255,.2); }
code,kbd { background:rgba(3,10,24,.7); color:var(--orange); } input,textarea { background:rgba(3,10,24,.6); } input:focus,textarea:focus { outline-color:var(--lime); } .notice { background:var(--panel); } .notice.err { background:rgba(30,60,130,.5); color:#dbe9ff; } .notice.info { background:rgba(56,182,255,.14); }
.badge { background:rgba(120,175,255,.25); } .badge.vip { background:var(--orange); color:#03121f; } .badge.staff { background:#1e6feb; color:#fff; } .steps li::before { background:rgba(56,182,255,.2); color:var(--lime); } .xp i { background:linear-gradient(90deg,#1e6feb,#38b6ff,#bce8ff); } .price,.bigcode,.gold { color:var(--orange); } .ach div.got { box-shadow:inset 0 0 0 1px var(--lime); } .ach .got .ic { color:var(--lime); } .top5 li::before { color:var(--lime); } .top5.flat .name { color:var(--orange); } .who { color:var(--orange) !important; } tbody tr:hover { background:var(--panel2); }
footer { background:rgba(4,10,24,.55); backdrop-filter:blur(10px); } .mod > img { background:rgba(3,10,24,.5); } .mod .where { color:var(--orange); }
.whylist article { padding:14px; background:var(--panel); border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line); backdrop-filter:blur(10px); } .whylist { gap:10px; }
.ingame.small { background:none; backdrop-filter:none; border:0; padding:0; }

.inline { display:inline-block; margin:0 0 0 6px; padding:0; background:none; border:0; box-shadow:none; } .friends { list-style:none; margin:0; padding:0; } .friend { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid rgba(255,255,255,.08); } .friend:first-child { border-top:0; } .friend .who small { display:block; color:var(--muted,#9aa7b4); } .friend.up .who small { color:#38b6ff; } .friend .acts { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* SEO content blocks */
.seoabout { margin: 28px auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; backdrop-filter: blur(10px); }
.content > .seoabout { max-width: 1100px; }
.seoabout h2 { margin-top: 0; }
.seoabout p, .seoabout li { color: var(--soft); line-height: 1.65; }
.seoabout a { color: var(--lime); }
.seoabout ol { padding-left: 20px; }
.faq { display: grid; gap: 10px; margin: 12px 0 28px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--text); }
.faq details[open] summary { color: var(--lime); }
.faq details p { color: var(--soft); margin: 10px 0 0; line-height: 1.6; }