/* Dualmines — floating pixel nav, centred hero, dark ice theme */
:root{
  --bg:#0b1219;
  --panel:#132130;
  --panel-2:#1a2c3d;
  --line:#25394d;
  --ink:#e8f4fb;
  --muted:#8fa9bb;
  --ice:#3ec8f2;
  --ice-hi:#8ee3fb;
  --ice-deep:#0e7aa8;
  --on-ice:#04202d;
  --gold:#ffcf4a;
  --blurple:#5865f2;
  --blurple-hi:#7983f5;
  --pixel:"Pixelify Sans", "Courier New", monospace;
  --mono:"VT323", ui-monospace, monospace;
  --body:"Rubik", system-ui, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg) url("bg.png") repeat;background-size:128px;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;line-height:1.1;text-wrap:balance;font-family:var(--pixel);font-weight:700}
:focus-visible{outline:3px solid var(--ice-hi);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}

/* ---------- nav ---------- */
.topbar{position:relative;z-index:30;padding-top:18px}
.nav{display:flex;align-items:stretch;background:rgba(19,33,48,.92);border:2px solid var(--line);box-shadow:0 6px 0 rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.nav-logo{display:grid;place-items:center;padding:8px 16px;border-right:2px solid var(--line);flex:none}
.nav-logo img{width:40px;height:40px;display:block}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0 14px;flex:1;min-width:0}
.nav-links a{display:block;text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 14px;position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:3px;background:var(--ice)}
.nav-links a.store{background:var(--gold);color:#2a1d00;margin-left:8px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.nav-links a.store:hover{filter:brightness(1.08)}
.nav-right{display:flex;align-items:center;gap:8px;padding:0 12px;flex:none}
.pxbtn{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);color:var(--ink);border:2px solid var(--line);font:inherit;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;cursor:pointer;text-decoration:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.pxbtn:hover{border-color:var(--ice);color:var(--ice-hi)}
.pxbtn svg{width:18px;height:18px;flex:none}
.pxbtn.icon{padding:9px}
.menu-btn{display:none}
@media (max-width:900px){
  .nav{flex-wrap:wrap}
  .menu-btn{display:inline-flex}
  .nav-links{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;padding:8px;border-top:2px solid var(--line);display:none}
  .nav.open .nav-links{display:flex}
  .nav-links a.store{margin:6px 0 0;text-align:center}
  .nav-links a[aria-current="page"]::after{left:14px;right:auto;width:24px}
  .nav-right{margin-left:auto}
  .copy-label{display:none}
}

/* ---------- hero ---------- */
.home .topbar{position:absolute;inset:0 0 auto}
.hero{position:relative;padding-top:96px;overflow:hidden;border-bottom:2px solid var(--line)}
.hero-bg-wrap{position:absolute;inset:0}
.hero-bg,.hero-photo{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-photo{background:url("hero.jpg") center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(11,18,25,.15), rgba(11,18,25,.75) 75%),linear-gradient(to bottom, rgba(11,18,25,.3), var(--bg) 98%);pointer-events:none}
.hero-inner{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:22px;padding-block:64px 80px}
.live{display:inline-flex;align-items:center;gap:10px;background:rgba(11,18,25,.85);border:2px solid var(--line);padding:6px 14px;font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.live .dot{width:10px;height:10px;background:#5ee38a;box-shadow:0 0 10px #5ee38a}
.live b{font-family:var(--mono);font-size:1.35rem;font-weight:400;color:#5ee38a;letter-spacing:0;line-height:1}
.brand{position:relative;display:grid;justify-items:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand img{width:clamp(180px, 26vw, 280px);height:auto;filter:drop-shadow(0 0 30px rgba(62,200,242,.45)) drop-shadow(0 8px 0 rgba(0,0,0,.35))}
.brand h1{font-size:clamp(2.6rem, 8vw, 4.6rem);color:var(--ink);letter-spacing:.02em;text-shadow:0 5px 0 var(--ice-deep), 0 0 30px rgba(62,200,242,.35);margin-top:-6px}
.splash{position:absolute;right:-60px;bottom:28px;transform:rotate(-16deg);font-family:var(--pixel);font-weight:700;color:var(--gold);font-size:clamp(.95rem, 2vw, 1.25rem);text-shadow:2px 2px 0 #3f2f00;white-space:nowrap;animation:splash .6s ease-in-out infinite alternate;transform-origin:center}
@keyframes splash{to{transform:rotate(-16deg) scale(1.08)}}
@media (max-width:560px){.splash{right:-14px;bottom:4px}}

.address{display:flex;align-items:stretch;background:var(--ice);color:var(--on-ice);border:3px solid var(--on-ice);box-shadow:0 0 0 2px var(--ice), 0 8px 0 rgba(0,0,0,.4);width:min(460px, 100%);text-align:left;cursor:pointer;font:inherit;padding:0}
.address .txt{flex:1;min-width:0;padding:10px 16px}
.address .lbl{display:block;font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.address .ip{display:block;font-family:var(--mono);font-size:2rem;line-height:1.1;overflow-wrap:anywhere}
.address .cp{display:grid;place-items:center;width:56px;margin:8px;background:rgba(4,32,45,.12);border:2px solid rgba(4,32,45,.35)}
.address:hover .cp{background:rgba(4,32,45,.22)}
.discord-btn{display:inline-flex;align-items:center;gap:12px;background:var(--blurple);color:#fff;text-decoration:none;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:12px 22px;border:3px solid #2b2f7a;box-shadow:0 0 0 2px var(--blurple), 0 8px 0 rgba(0,0,0,.4)}
.discord-btn:hover{background:var(--blurple-hi)}
.discord-btn svg{width:24px;height:24px}
.discord-btn .count{background:rgba(0,0,0,.25);padding:2px 8px;font-size:.8rem;letter-spacing:.02em;text-transform:none}

/* ---------- page header (inner pages) ---------- */
.page-head{position:relative;border-bottom:4px dashed var(--line);padding-block:72px 48px}
.page-head h1{font-size:clamp(2.2rem, 6vw, 3.6rem);letter-spacing:.03em;text-transform:uppercase}
.page-head h1 em{font-style:normal;color:var(--ice)}
.page-head p{color:var(--muted);max-width:56ch;margin-top:14px;font-size:1.05rem}

/* ---------- sections ---------- */
section.block{padding-block:64px}
.sec-title{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-title h2{font-size:clamp(1.8rem, 4vw, 2.5rem);text-transform:uppercase;letter-spacing:.03em}
.sec-title h2 em{font-style:normal;color:var(--ice)}
.more{font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ice);text-decoration:none}
.more:hover{color:var(--ice-hi)}

.panel{background:var(--panel);border:2px solid var(--line);box-shadow:0 6px 0 rgba(0,0,0,.3)}
.chip{display:inline-block;font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;background:var(--c, var(--ice));color:#0b1219;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}

/* news cards */
.news-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:20px}
@media (max-width:900px){.news-grid{grid-template-columns:1fr}}
.news-card{display:grid;gap:12px;align-content:start;padding:22px;border-top:4px solid var(--c, var(--ice));text-decoration:none}
.news-card:hover{border-color:var(--line);border-top-color:var(--c, var(--ice));transform:translateY(-3px)}
.news-card h3{font-size:1.45rem}
.news-card .meta{color:var(--muted);font-size:.85rem}
.news-card p.ex{color:var(--muted)}
.news-card .more{margin-top:4px}
@media (prefers-reduced-motion:reduce){.news-card:hover{transform:none}.splash{animation:none}}

/* full posts */
.posts{display:grid;gap:24px;max-width:820px}
.post{padding:clamp(20px, 4vw, 36px);border-left:4px solid var(--c, var(--ice));display:grid;gap:14px;scroll-margin-top:24px}
.post h2{font-size:clamp(1.6rem, 4vw, 2.2rem)}
.post .meta{color:var(--muted);font-size:.9rem}
.post .body{display:grid;gap:14px;color:#c7dbe8;max-width:68ch}
.post .body a{color:var(--ice-hi)}
.post img.cover{border:2px solid var(--line);display:block}
.empty{color:var(--muted);padding:28px}

/* staff */
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));gap:20px}
.staff{display:grid;grid-template-rows:auto 1fr;border-top:4px solid var(--c, var(--ice))}
.staff .skin{height:180px;display:grid;place-items:end center;background:radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--c, var(--ice)) 25%, transparent), transparent 70%);overflow:hidden}
.staff .skin img{height:165px;width:auto;image-rendering:pixelated;display:block}
.staff .skin .ph{width:60px;height:150px;background:linear-gradient(var(--muted) 0 26%, var(--line) 26% 70%, var(--panel-2) 70%);opacity:.6}
.staff .info{background:var(--panel-2);padding:16px;display:grid;gap:10px;align-content:start}
.staff .roles{display:flex;flex-wrap:wrap;gap:6px}
.staff h3{font-size:1.5rem;overflow-wrap:anywhere}
.staff .handle{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}
.staff .handle svg{width:15px;height:15px;flex:none}
.staff p.bio{color:var(--muted);font-size:.92rem}
.staff .nm{margin-top:4px;padding-top:12px;border-top:2px solid var(--line);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c, var(--ice));text-decoration:none}
.group-title{font-size:1.2rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:40px 0 16px}
.group-title:first-child{margin-top:0}

/* home info */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.info-grid > *{min-width:0}
@media (max-width:820px){.info-grid{grid-template-columns:1fr}}
.info{padding:28px;display:grid;gap:14px;align-content:start}
.info h2{font-size:1.8rem;text-transform:uppercase}
.info p{color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:baseline;color:var(--muted)}
.steps li::before{content:counter(s);flex:none;width:28px;height:28px;display:grid;place-items:center;background:var(--ice);color:var(--on-ice);font-family:var(--pixel);font-weight:700;transform:translateY(4px)}
.steps b{color:var(--ink)}
code{font-family:var(--mono);font-size:1.2em;background:var(--panel-2);color:var(--ice-hi);padding:0 6px}

.cta{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:clamp(24px, 4vw, 40px);border-color:#2b2f7a;background:linear-gradient(135deg, #1b2050, var(--panel))}
.cta > *{min-width:0}
.cta h2{font-size:clamp(1.8rem, 4vw, 2.4rem);text-transform:uppercase}
.cta p{color:var(--muted);margin-top:8px}
@media (max-width:700px){.cta{grid-template-columns:1fr}}

/* rules */
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rules-grid > *{min-width:0}
@media (max-width:860px){.rules-grid{grid-template-columns:1fr}}
.rulebox{padding:26px;display:grid;gap:16px;align-content:start;border-top:4px solid var(--c, var(--ice))}
.rulebox h2{font-size:1.7rem;text-transform:uppercase}
.rulebox ol{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:r}
.rulebox li{counter-increment:r;display:grid;grid-template-columns:34px 1fr;gap:12px;color:var(--muted)}
.rulebox li::before{content:counter(r);font-family:var(--mono);font-size:1.4rem;line-height:1.15;color:var(--c, var(--ice))}
.rulebox li b{color:var(--ink)}
.note{color:var(--muted);margin-bottom:24px;max-width:70ch}

/* footer */
footer{border-top:2px solid var(--line);background:rgba(11,18,25,.9);margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding-block:28px;color:var(--muted);font-size:.85rem}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer nav a{text-decoration:none;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
footer nav a:hover{color:var(--ink)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);background:var(--ice);color:var(--on-ice);font-weight:700;padding:10px 20px;border:3px solid var(--on-ice);z-index:50}