@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Pixelify+Sans:wght@400;500;600;700&family=Press+Start+2P&display=swap');

:root {
  --ink: #eef7ff;
  --muted: #a7b8cc;
  --bg: #030916;
  --bg-2: #07142a;
  --panel: rgba(8, 20, 41, .90);
  --panel-2: rgba(12, 31, 61, .88);
  --line: rgba(119, 174, 255, .22);
  --blue: #168cff;
  --blue-2: #00c2ff;
  --green: #42c63a;
  --green-dark: #207b27;
  --gold: #ffb238;
  --red: #ff5b65;
  --shadow: 0 20px 70px rgba(0,0,0,.42);
  --pixel-shadow: 0 4px 0 rgba(0,0,0,.42), 4px 0 0 rgba(0,0,0,.24);
  --container: 1180px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(25,115,255,.22), transparent 34rem),
    linear-gradient(180deg, #020814 0%, #061126 48%, #030914 100%);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  background-image:
    linear-gradient(90deg, #fff 1px, transparent 1px),
    linear-gradient(#fff 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 80%);
  z-index: -1;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.pixel-font { font-family: "Pixelify Sans", monospace; }
.micro-font { font-family: "Press Start 2P", monospace; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Navigation */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.site-header.scrolled {
  background: rgba(2,8,20,.91);
  border-color: var(--line);
  backdrop-filter: blur(15px);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.nav-wrap { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: "Pixelify Sans", monospace; font-size: 25px; font-weight: 700; letter-spacing: .4px; }
.brand img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 7px 12px rgba(0,0,0,.42)); }
.brand span b { color: var(--blue-2); }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links > a { padding: 10px 13px; color: #c9d7e8; font-weight: 700; font-size: 14px; border: 1px solid transparent; }
.nav-links > a:hover, .nav-links > a.active { color: white; background: rgba(27,102,204,.18); border-color: rgba(76,151,255,.24); }
.nav-cta { margin-left: 4px; }
.menu-toggle { display: none; width: 48px; height: 44px; border: 1px solid var(--line); background: rgba(6,19,39,.9); color: white; cursor: pointer; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { content:""; display:block; width:22px; height:3px; background:#fff; margin:4px auto; }

/* Buttons */
.btn {
  --btn-bg: #1b3968;
  --btn-edge: #0c2141;
  --btn-highlight: rgba(255,255,255,.26);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  color: white;
  background: var(--btn-bg);
  box-shadow: inset 0 4px 0 var(--btn-highlight), inset 0 -5px 0 var(--btn-edge), 0 7px 0 rgba(0,0,0,.38), 0 14px 24px rgba(0,0,0,.25);
  font-family: "Pixelify Sans", monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .25px;
  cursor: pointer;
  transform: translateY(0);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.btn:active { transform: translateY(5px); box-shadow: inset 0 3px 0 var(--btn-highlight), inset 0 -2px 0 var(--btn-edge), 0 2px 0 rgba(0,0,0,.42); }
.btn-green { --btn-bg: #45c641; --btn-edge: #1c741e; color: #071206; text-shadow: 0 1px rgba(255,255,255,.35); }
.btn-blue { --btn-bg: #168cff; --btn-edge: #0751a1; }
.btn-gold { --btn-bg: #ffb238; --btn-edge: #a55e0e; color:#201000; }
.btn-dark { --btn-bg: #142543; --btn-edge: #071225; }
.btn-small { min-height: 44px; padding-inline: 17px; font-size: 16px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .52; cursor: not-allowed; filter: grayscale(.4); }

/* Hero */
.hero {
  position: relative;
  min-height: 820px;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #03102a;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../images/muffinsmp-banner.webp');
  background-size: cover;
  background-position: center;
  transform: scale(1.035);
  animation: hero-drift 16s ease-in-out infinite alternate;
  z-index: -3;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(1,5,14,.18) 0%, rgba(1,7,20,.08) 38%, rgba(1,8,21,.86) 88%, #030916 100%),
    radial-gradient(circle at center, transparent 18%, rgba(0,3,10,.28) 74%);
}
@keyframes hero-drift { to { transform: scale(1.075) translateY(-8px); } }
.hero-particles { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.pixel-particle { position:absolute; width:5px; height:5px; background:#64bdff; box-shadow:0 0 12px #3c9cff; opacity:.7; animation:float-pixel var(--dur) linear infinite; }
@keyframes float-pixel { from { transform:translateY(70px) rotate(0); opacity:0; } 12% {opacity:.75;} to { transform:translateY(-850px) rotate(180deg); opacity:0;} }
.hero-inner { padding-top: 108px; text-align:center; width:min(980px, calc(100% - 34px)); }
.hero-mark { width:min(650px, 76vw); margin:0 auto 14px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.7)); }
.hero-kicker { display:inline-flex; align-items:center; gap:9px; padding:8px 12px; margin-bottom:18px; background:rgba(3,15,37,.72); border:1px solid rgba(104,183,255,.38); font-family:"Press Start 2P",monospace; font-size:10px; line-height:1.6; text-transform:uppercase; }
.hero-kicker::before { content:""; width:9px; height:9px; background:var(--green); box-shadow:0 0 14px var(--green); }
.hero-copy { max-width:730px; margin:0 auto; font-size:19px; line-height:1.7; color:#d7e7fa; text-shadow:0 2px 10px #000; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:30px; }
.hero .btn { min-width:200px; min-height:61px; font-size:22px; }
.server-mini { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin:28px auto 0; color:#d6e6f8; font-weight:700; }
.server-mini > span { background:rgba(3,13,31,.72); border:1px solid rgba(93,169,255,.32); padding:9px 13px; backdrop-filter:blur(8px); }
.status-dot { display:inline-block; width:10px; height:10px; margin-right:7px; background:#71839a; box-shadow:0 0 0 3px rgba(113,131,154,.15); }
.status-dot.online { background:#4cdc4a; box-shadow:0 0 12px rgba(76,220,74,.9); }
.status-dot.offline { background:#ff5963; box-shadow:0 0 12px rgba(255,89,99,.7); }
.scroll-cue { position:absolute; bottom:28px; left:50%; translate:-50% 0; display:grid; place-items:center; gap:8px; color:#9db8d4; font-family:"Press Start 2P",monospace; font-size:8px; }
.scroll-cue i { width:12px; height:12px; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(45deg); animation:bob 1.4s infinite; }
@keyframes bob { 50% { transform:translateY(7px) rotate(45deg); } }

/* Sections */
.section { padding:100px 0; position:relative; }
.section-sm { padding:72px 0; }
.section-dark { background:rgba(1,7,17,.58); border-block:1px solid rgba(100,163,240,.12); }
.section-heading { text-align:center; max-width:820px; margin:0 auto 46px; }
.eyebrow { color:#62b8ff; font-family:"Press Start 2P",monospace; font-size:10px; line-height:1.7; text-transform:uppercase; letter-spacing:.7px; }
h1,h2,h3,p { margin-top:0; }
.block-title { margin:12px 0 18px; font-family:"Pixelify Sans",monospace; font-size:clamp(38px,5vw,64px); line-height:.94; text-wrap:balance; letter-spacing:-1px; text-shadow:0 5px 0 rgba(0,0,0,.36); }
.block-title.sm { font-size:clamp(30px,4vw,48px); }
.lead { color:var(--muted); font-size:18px; line-height:1.75; }
.grid { display:grid; gap:22px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.pixel-card {
  position:relative;
  padding:26px;
  background:linear-gradient(180deg, rgba(13,35,69,.94), rgba(6,19,40,.94));
  border:2px solid rgba(91,155,231,.24);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.018), var(--shadow);
  clip-path:polygon(10px 0, calc(100% - 10px) 0, calc(100% - 10px) 5px, 100% 5px, 100% calc(100% - 10px), calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) 100%, 10px 100%, 10px calc(100% - 5px), 0 calc(100% - 5px), 0 10px, 5px 10px, 5px 5px, 10px 5px);
}
.pixel-card::before { content:""; position:absolute; inset:0; border-top:3px solid rgba(255,255,255,.06); pointer-events:none; }
.pixel-card.hover { transition:transform .18s, border-color .18s, background .18s; }
.pixel-card.hover:hover { transform:translateY(-7px); border-color:rgba(62,170,255,.58); background:linear-gradient(180deg, rgba(17,49,93,.96), rgba(7,23,48,.96)); }
.feature-icon { width:54px; height:54px; display:grid; place-items:center; margin-bottom:19px; background:#0b2b57; border:2px solid #1f6cbc; box-shadow:inset 0 4px 0 rgba(255,255,255,.09), 0 5px 0 #041329; font-family:"Pixelify Sans"; font-size:28px; }
.pixel-card h3 { font-family:"Pixelify Sans",monospace; font-size:25px; line-height:1; margin-bottom:11px; }
.pixel-card p { color:#aebfd2; line-height:1.65; margin-bottom:0; }
.feature-tag { display:inline-block; margin-top:16px; padding:6px 8px; color:#74c8ff; background:rgba(20,126,215,.13); border:1px solid rgba(60,154,244,.26); font-family:"Press Start 2P",monospace; font-size:8px; line-height:1.5; }

/* Status panel */
.status-panel { margin-top:-54px; position:relative; z-index:4; }
.status-shell { display:grid; grid-template-columns:1.4fr repeat(4,1fr) auto; align-items:stretch; background:#07172f; border:2px solid rgba(84,154,240,.36); box-shadow:0 18px 60px rgba(0,0,0,.5), inset 0 4px 0 rgba(255,255,255,.045); }
.status-cell { padding:21px 22px; border-right:1px solid rgba(107,169,240,.18); min-width:0; }
.status-cell small { display:block; margin-bottom:7px; color:#7794b3; font-family:"Press Start 2P"; font-size:7px; line-height:1.5; text-transform:uppercase; }
.status-cell strong { display:flex; align-items:center; font-family:"Pixelify Sans"; font-size:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-action { display:grid; place-items:center; padding:13px 18px; }

/* Split / image panel */
.split { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.art-panel { position:relative; min-height:460px; display:grid; place-items:center; background:radial-gradient(circle, rgba(16,124,255,.36), transparent 62%), #06132b; border:2px solid rgba(88,155,236,.3); box-shadow:var(--shadow), inset 0 0 70px rgba(17,93,190,.18); overflow:hidden; }
.art-panel::before, .art-panel::after { content:""; position:absolute; width:140px; height:140px; border:24px solid rgba(61,151,255,.11); transform:rotate(45deg); }
.art-panel::before { left:-85px; top:-85px; } .art-panel::after { right:-85px; bottom:-85px; }
.art-panel img { position:relative; z-index:2; width:min(390px,75%); filter:drop-shadow(0 26px 28px rgba(0,0,0,.57)); animation:mascot 4s ease-in-out infinite; }
@keyframes mascot { 50% { transform:translateY(-12px) rotate(-1deg); } }
.check-list { display:grid; gap:13px; margin:28px 0 34px; }
.check-item { display:flex; gap:12px; align-items:flex-start; color:#cad8e9; line-height:1.55; }
.check-item i { width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; color:#061207; background:var(--green); box-shadow:inset 0 3px rgba(255,255,255,.28), 0 3px #1c6f20; font-style:normal; font-weight:900; }

/* Roadmap */
.roadmap { position:relative; display:grid; gap:26px; }
.roadmap::before { content:""; position:absolute; left:27px; top:30px; bottom:30px; width:4px; background:linear-gradient(var(--green), var(--blue), #5c6d85); }
.roadmap-item { position:relative; margin-left:77px; padding:28px; }
.roadmap-dot { position:absolute; left:-66px; top:30px; width:34px; height:34px; background:#0b1d39; border:6px solid var(--blue); box-shadow:0 0 20px rgba(22,140,255,.45); }
.roadmap-item.complete .roadmap-dot { border-color:var(--green); }
.roadmap-item.future .roadmap-dot { border-color:#62738a; }
.roadmap-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.badge { display:inline-flex; align-items:center; min-height:27px; padding:4px 8px; font-family:"Press Start 2P"; font-size:7px; line-height:1.4; text-transform:uppercase; background:#15345f; border:1px solid rgba(96,170,255,.32); color:#9ed4ff; }
.badge.green { background:rgba(51,160,49,.18); color:#86eb7d; border-color:rgba(71,207,65,.35); }
.badge.gold { background:rgba(255,178,56,.14); color:#ffd07e; border-color:rgba(255,178,56,.35); }
.roadmap-item h3 { font-family:"Pixelify Sans"; font-size:30px; margin-bottom:9px; }
.roadmap-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; }
.roadmap-list span { padding:8px 10px; color:#c7d7e8; background:rgba(6,14,30,.75); border:1px solid rgba(104,159,221,.2); font-size:13px; }

/* Staff */
.staff-lead { display:grid; grid-template-columns:270px 1fr; gap:28px; align-items:stretch; margin-bottom:28px; }
.staff-avatar { display:grid; place-items:center; background:radial-gradient(circle, rgba(31,137,255,.28), transparent 65%), #07172f; border:2px solid rgba(78,150,237,.32); min-height:300px; }
.staff-avatar img { width:190px; filter:drop-shadow(0 18px 20px rgba(0,0,0,.55)); }
.staff-rank { display:inline-block; padding:6px 9px; margin-bottom:12px; background:rgba(255,178,56,.16); color:#ffd27f; border:1px solid rgba(255,178,56,.35); font-family:"Press Start 2P"; font-size:8px; }
.rank-card { min-height:190px; }
.rank-order { color:#4daeff; font-family:"Press Start 2P"; font-size:8px; margin-bottom:13px; }

/* Page hero */
.page-hero { position:relative; min-height:500px; display:grid; align-items:end; padding:145px 0 72px; overflow:hidden; background:#06142c; border-bottom:1px solid rgba(83,152,234,.2); }
.page-hero::before { content:""; position:absolute; inset:0; background:url('../images/muffinsmp-banner.webp') center/cover; opacity:.34; filter:saturate(.9); }
.page-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,5,14,.4), rgba(3,9,22,.96)), linear-gradient(90deg, rgba(1,6,15,.84), transparent 70%); }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { max-width:850px; margin:13px 0 14px; font-family:"Pixelify Sans"; font-size:clamp(48px,8vw,86px); line-height:.9; text-shadow:0 6px 0 rgba(0,0,0,.45); }
.page-hero p { max-width:690px; color:#c1d4e8; font-size:18px; line-height:1.7; margin-bottom:0; }
.breadcrumb { display:flex; gap:9px; align-items:center; color:#85bdea; font-family:"Press Start 2P"; font-size:8px; line-height:1.5; }

/* Play page */
.ip-display { padding:25px; background:#020a17; border:2px solid rgba(78,158,255,.42); box-shadow:inset 0 5px 0 rgba(255,255,255,.025); text-align:center; }
.ip-display small { color:#758fac; font-family:"Press Start 2P"; font-size:8px; }
.ip-display strong { display:block; margin:15px 0 4px; color:#fff; font-family:"Pixelify Sans"; font-size:clamp(28px,5vw,50px); overflow-wrap:anywhere; }
.step { display:grid; grid-template-columns:62px 1fr; gap:20px; }
.step-no { width:62px; height:62px; display:grid; place-items:center; background:#1387f4; border:3px solid #6fc3ff; box-shadow:inset 0 5px rgba(255,255,255,.2), 0 6px #074981; font-family:"Press Start 2P"; font-size:15px; }
.step h3 { font-family:"Pixelify Sans"; font-size:28px; margin:4px 0 7px; }

/* Rules */
.rules-layout { display:grid; grid-template-columns:260px 1fr; gap:36px; align-items:start; }
.rules-nav { position:sticky; top:105px; padding:18px; background:#07172e; border:1px solid var(--line); }
.rules-nav a { display:block; padding:11px 10px; color:#9eb2c8; border-left:3px solid transparent; font-weight:700; }
.rules-nav a:hover { color:#fff; border-color:var(--blue); background:rgba(22,140,255,.09); }
.rule-section { margin-bottom:24px; }
.rule-section h2 { font-family:"Pixelify Sans"; font-size:35px; margin-bottom:17px; }
.rule-list { counter-reset:rule; display:grid; gap:11px; }
.rule { counter-increment:rule; display:grid; grid-template-columns:46px 1fr; gap:14px; padding:18px; background:rgba(8,24,48,.82); border:1px solid rgba(91,153,225,.19); }
.rule::before { content:counter(rule, decimal-leading-zero); width:42px; height:42px; display:grid; place-items:center; background:#0d315f; color:#7bc8ff; font-family:"Press Start 2P"; font-size:8px; }
.rule strong { display:block; margin-bottom:5px; font-family:"Pixelify Sans"; font-size:22px; }
.rule span { color:#aebfd1; line-height:1.6; }

/* News */
.news-card { display:grid; grid-template-columns:190px 1fr; gap:24px; align-items:stretch; }
.news-date { display:grid; place-items:center; min-height:170px; background:linear-gradient(145deg,#153f78,#071832); border:1px solid var(--line); text-align:center; }
.news-date strong { display:block; font-family:"Pixelify Sans"; font-size:43px; line-height:.9; }
.news-date span { font-family:"Press Start 2P"; font-size:8px; color:#89c7ff; }
.news-body { padding:25px; }
.news-body h2 { font-family:"Pixelify Sans"; font-size:35px; margin-bottom:10px; }

/* Hub */
.hub-shell { display:grid; grid-template-columns:240px 1fr; min-height:650px; background:#06142b; border:2px solid rgba(83,153,239,.27); box-shadow:var(--shadow); overflow:hidden; }
.hub-side { padding:25px 18px; background:#040d1d; border-right:1px solid rgba(93,157,231,.18); }
.hub-profile { text-align:center; padding-bottom:22px; border-bottom:1px solid rgba(106,162,224,.18); }
.hub-avatar { width:88px; height:88px; margin:0 auto 12px; display:grid; place-items:center; background:#0d2e58; border:3px solid #278de9; box-shadow:0 6px #06182f; font-family:"Pixelify Sans"; font-size:38px; }
.hub-nav { display:grid; gap:7px; margin-top:22px; }
.hub-nav button { text-align:left; padding:12px; color:#9fb3c8; background:transparent; border:1px solid transparent; cursor:pointer; font-weight:700; }
.hub-nav button.active { color:white; background:rgba(24,125,226,.15); border-color:rgba(77,157,241,.22); }
.hub-main { padding:30px; position:relative; }
.hub-lock { position:absolute; inset:0; display:grid; place-items:center; padding:30px; background:rgba(3,10,23,.74); backdrop-filter:blur(6px); z-index:4; }
.hub-lock-card { width:min(480px,100%); text-align:center; }
.hub-lock-card img { width:120px; margin:0 auto 13px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat-card { padding:18px; background:#0a2141; border:1px solid rgba(83,151,227,.22); }
.stat-card small { color:#7894b0; font-family:"Press Start 2P"; font-size:7px; }
.stat-card strong { display:block; margin-top:10px; font-family:"Pixelify Sans"; font-size:29px; }
.progress { height:15px; margin-top:13px; background:#020914; border:2px solid #17335a; }
.progress span { display:block; height:100%; width:62%; background:linear-gradient(90deg,var(--blue),var(--blue-2)); }
.blur-demo { filter:blur(1.4px); opacity:.65; user-select:none; }

/* FAQ */
.faq { border:1px solid rgba(86,154,229,.22); background:rgba(6,20,42,.8); }
.faq + .faq { margin-top:10px; }
.faq button { width:100%; display:flex; justify-content:space-between; gap:20px; padding:20px; color:white; background:transparent; border:0; cursor:pointer; text-align:left; font-family:"Pixelify Sans"; font-size:23px; }
.faq button span:last-child { color:#62b8ff; }
.faq-panel { max-height:0; overflow:hidden; transition:max-height .25s; }
.faq-panel p { padding:0 20px 20px; margin:0; color:#aebfd1; line-height:1.65; }
.faq.open .faq-panel { max-height:260px; }

/* CTA */
.cta { position:relative; padding:56px; text-align:center; overflow:hidden; background:linear-gradient(135deg, rgba(14,88,176,.95), rgba(5,28,64,.96)); border:2px solid rgba(98,180,255,.42); box-shadow:var(--shadow), inset 0 5px 0 rgba(255,255,255,.06); }
.cta::before, .cta::after { content:""; position:absolute; width:210px; height:210px; background:rgba(255,255,255,.025); transform:rotate(45deg); }
.cta::before { left:-120px; top:-120px; } .cta::after { right:-120px; bottom:-120px; }
.cta > * { position:relative; z-index:1; }
.cta h2 { font-family:"Pixelify Sans"; font-size:clamp(40px,6vw,68px); margin-bottom:11px; }
.cta p { max-width:680px; margin:0 auto; color:#d1e6fb; line-height:1.7; }

/* Footer */
.site-footer { padding:64px 0 26px; background:#010610; border-top:1px solid rgba(84,146,220,.16); }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; }
.footer-brand img { width:78px; margin-bottom:14px; }
.footer-brand p { max-width:360px; color:#8097af; line-height:1.65; }
.footer-col h3 { font-family:"Pixelify Sans"; font-size:22px; margin-bottom:14px; }
.footer-col a { display:block; color:#879eb7; padding:5px 0; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:44px; padding-top:20px; border-top:1px solid rgba(84,146,220,.14); color:#647a92; font-size:13px; }

/* Modal/toast */
.modal { position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:20px; background:rgba(0,3,9,.82); backdrop-filter:blur(9px); }
.modal.open { display:grid; }
.modal-card { width:min(560px,100%); padding:34px; text-align:center; background:#071831; border:2px solid rgba(82,165,255,.46); box-shadow:0 30px 100px #000; }
.modal-card img { width:120px; margin:0 auto 13px; }
.modal-card h2 { font-family:"Pixelify Sans"; font-size:44px; margin-bottom:9px; }
.modal-card p { color:#a9bdd1; line-height:1.6; }
.modal-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:22px; }
.toast { position:fixed; left:50%; bottom:28px; z-index:400; translate:-50% 130px; padding:13px 18px; background:#0c2d55; border:1px solid #2a84d8; box-shadow:0 14px 45px #000; font-weight:800; transition:translate .25s; }
.toast.show { translate:-50% 0; }

/* Reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }

/* Error page */
.error-page { min-height:100vh; display:grid; place-items:center; padding:30px; text-align:center; background:radial-gradient(circle,rgba(22,140,255,.25),transparent 50%),#020817; }
.error-page img { width:190px; margin:0 auto 14px; }
.error-code { font-family:"Press Start 2P"; font-size:clamp(52px,12vw,120px); color:#51adff; text-shadow:0 8px #08294c; }

@media (max-width: 1050px) {
  .nav-links { position:fixed; top:78px; right:18px; left:18px; display:none; padding:16px; background:#06152c; border:1px solid rgba(83,155,240,.33); box-shadow:var(--shadow); }
  .nav-links.open { display:grid; }
  .nav-links > a { padding:14px; }
  .nav-cta { margin:0; }
  .menu-toggle { display:block; }
  .status-shell { grid-template-columns:repeat(3,1fr); }
  .status-cell:first-child { grid-column:span 2; }
  .status-action { grid-column:span 3; }
  .split { grid-template-columns:1fr; }
  .art-panel { min-height:390px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .rules-layout { grid-template-columns:1fr; }
  .rules-nav { position:static; display:flex; overflow:auto; }
  .rules-nav a { white-space:nowrap; border-left:0; border-bottom:3px solid transparent; }
  .staff-lead { grid-template-columns:1fr; }
  .hub-shell { grid-template-columns:1fr; }
  .hub-side { display:none; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px) {
  .container { width:min(100% - 26px,var(--container)); }
  .nav-wrap { height:68px; }
  .brand { font-size:21px; }
  .brand img { width:39px; height:39px; }
  .nav-links { top:68px; }
  .hero { min-height:760px; }
  .hero-inner { padding-top:95px; }
  .hero-mark { width:94vw; }
  .hero-copy { font-size:16px; }
  .hero .btn { min-width:160px; min-height:55px; font-size:19px; }
  .status-panel { margin-top:-28px; }
  .status-shell { grid-template-columns:1fr 1fr; }
  .status-cell:first-child { grid-column:1/-1; }
  .status-action { grid-column:1/-1; }
  .section { padding:72px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .pixel-card { padding:22px; }
  .roadmap::before { left:17px; }
  .roadmap-item { margin-left:53px; }
  .roadmap-dot { left:-51px; width:30px; height:30px; }
  .page-hero { min-height:440px; padding-top:115px; }
  .news-card { grid-template-columns:1fr; }
  .news-date { min-height:120px; }
  .step { grid-template-columns:48px 1fr; gap:14px; }
  .step-no { width:48px; height:48px; font-size:11px; }
  .cta { padding:38px 20px; }
  .hub-main { padding:18px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}