:root {
  --bg: #050508;
  --ink: #f5f5fa;
  --muted: #8d8da6;
  --line: rgba(255, 255, 255, 0.12);
  --display: 'Unbounded', 'Inter', sans-serif;
  --pixel: 'Jersey 10', 'Space Mono', monospace;
  --mono: 'Space Mono', ui-monospace, monospace;
  --accent: #45e6a3;
}

/* Neon accent per card */
.t-green { --accent: #45e6a3; }
.t-yellow { --accent: #ffe14d; }
.t-blue { --accent: #8fa2ff; }
.t-pink { --accent: #ff5fd2; }
.t-purple { --accent: #c8a2ff; }
.t-orange { --accent: #ff9f43; }
.t-cyan { --accent: #4fe3ff; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: Inter, system-ui, sans-serif; line-height: 1.4;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.3px);
  background-size: 6px 6px;
}
a { color: inherit; }

/* Pixel scrollbars in the accent color */
/* Chrome ignores ::-webkit-scrollbar styles when scrollbar-color is set, so the standard
   properties are only for browsers without the webkit pseudo-elements (Firefox). */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #45e6a3 #07070b; }
  .member-list { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #07070b; border-left: 1px solid rgba(255, 255, 255, 0.08); }
::-webkit-scrollbar-thumb {
  background: repeating-linear-gradient(to bottom, var(--accent) 0 4px, color-mix(in srgb, var(--accent) 70%, #000) 4px 6px);
  border: 2px solid #07070b;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-corner, ::-webkit-scrollbar-button { display: none; }
code { font-family: var(--mono); background: rgba(255, 255, 255, 0.08); padding: 1px 6px; }
main { max-width: 1020px; margin: 0 auto; padding: 16px 16px 72px; position: relative; z-index: 1; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* Pixel-style buttons with offset shadow */
.btn {
  --accent: #f5f5fa;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 14px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 13px 18px; color: var(--ink); background: rgba(5, 5, 8, 0.6);
  border: 2px solid var(--accent); box-shadow: 4px 4px 0 var(--accent);
  text-decoration: none; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--accent); }
.btn.primary { --accent: #45e6a3; background: var(--accent); color: #05140d; border-color: var(--accent); box-shadow: 4px 4px 0 #f5f5fa; }
.t-pink .btn.primary, .panel.t-pink .btn.primary { --accent: #ff5fd2; color: #1d0516; }
.btn.small { padding: 9px 13px; font-size: 12px; }
.btn.big { padding: 18px 28px; font-size: 16px; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0 22px; }
.brand { font: 900 14px var(--display); letter-spacing: 0.02em; text-decoration: none; color: #45e6a3; }

/* Pixel back button, styled like the arrow buttons in the cards */
.back { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #45e6a3; }
.back-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 2px solid currentColor; box-shadow: 4px 4px 0 currentColor; background: #050508;
  transition: transform 0.08s, box-shadow 0.08s;
}
.back:hover .back-btn { transform: translate(2px, 2px); box-shadow: 2px 2px 0 currentColor; }
.pxi-arrow { width: 18px; height: auto; display: block; }
.back-label { font: 900 14px var(--display); letter-spacing: 0.02em; }
.foot { text-align: center; padding-top: 44px; }

/* ---------- Story cards (9:16) ---------- */
.slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 30px 22px; }
.slides.single { grid-template-columns: minmax(0, 390px); justify-content: center; }
.slide-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.slide {
  position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  background: var(--slide-bg, #07070b); color: var(--slide-ink, var(--ink));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex; flex-direction: column; padding: 18px 20px 14px;
}
.fx { position: absolute; pointer-events: none; }
.fx-glow {
  inset: 0;
  background:
    radial-gradient(90% 55% at 85% 8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(80% 45% at 0% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
.fx-dots {
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 26%, transparent) 1px, transparent 1.4px);
  background-size: 5px 5px;
  -webkit-mask-image: radial-gradient(120% 70% at 85% 0%, #000, transparent 75%);
  mask-image: radial-gradient(120% 70% at 85% 0%, #000, transparent 75%);
}
.fx-grid {
  left: -60%; right: -60%; bottom: -4%; height: 46%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 40%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
  transform: perspective(300px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 85%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 85%);
}
.fx-shape {
  position: absolute; width: 64%; right: -16%; top: 7%;
  color: var(--accent); transform: rotate(-14deg); opacity: 0.85;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent));
}
.fx-shape svg { display: block; width: 100%; height: auto; }

.slide-top, .slide-body, .slide-foot { position: relative; z-index: 1; }
.slide-top { display: flex; justify-content: space-between; align-items: center; }
.mark { font: 900 10px var(--display); color: var(--accent); letter-spacing: 0.03em; }
.step { font: 700 10px var(--mono); color: color-mix(in srgb, var(--accent) 80%, #fff); opacity: 0.8; }
.slide-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 22px; min-height: 0; }
.slide-foot { display: flex; justify-content: flex-end; padding-top: 8px; }
.glyphs { display: flex; gap: 10px; align-items: center; color: var(--accent); opacity: 0.85; }
.glyphs svg { height: 14px; width: auto; }
.spacer { flex: 1; min-height: 6px; }

.kicker { display: flex; align-items: center; gap: 8px; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.kicker .dot, .drop-note .dot { width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.headline {
  margin: 4px 0 0; font: 900 40px/0.95 var(--display); letter-spacing: -0.01em; color: var(--accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.headline.sm { font-size: 30px; }
.pix {
  font-family: var(--pixel); font-weight: 400; color: var(--accent); letter-spacing: 0.02em; line-height: 0.9;
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.pix.xl { font-size: 72px; }
.pix.xxl { font-size: 104px; }
.sub { margin: 2px 0 0; font-size: 15px; color: var(--sub-ink, #e6e6f0); }
.hl { background: var(--accent); color: var(--hl-ink, #0a0a0f); padding: 0 5px; font-weight: 700; }

.guild { display: flex; align-items: center; gap: 8px; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.guild.big-av { margin-top: 10px; }

.cells { display: grid; gap: 8px; margin-top: 10px; }
.cells.three { grid-template-columns: repeat(3, 1fr); }
.cells.two { grid-template-columns: repeat(2, 1fr); }
.cell {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--cell-bg, rgba(5, 5, 8, 0.72)); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.cell span { font: 700 9px var(--mono); letter-spacing: 0.12em; color: var(--label-ink, #c9c9d8); }
.cell b { font-size: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bars { display: flex; align-items: flex-end; gap: 4px; height: 26%; min-height: 70px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar .fill {
  width: 100%; background: repeating-linear-gradient(to top, var(--accent) 0 4px, transparent 4px 6px);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bar span { font: 700 9px var(--mono); color: var(--accent); }

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rows li {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--cell-bg, rgba(5, 5, 8, 0.75));
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 50%, transparent);
}
.rows .pos { font: 700 11px var(--mono); color: var(--accent); }
.rows .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; }
.rows .val { font-size: 24px; }

.awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.award {
  background: var(--cell-bg, rgba(5, 5, 8, 0.75)); padding: 9px; display: flex; flex-direction: column; gap: 5px; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 50%, transparent);
}
.award-icon { color: var(--accent); line-height: 0; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent)); }
.pxi { width: 30px; height: 30px; display: block; }
.pxi.sm { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; margin-right: 6px; }
.a-title { font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.a-who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; min-width: 0; }
.a-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.me { display: flex; align-items: center; gap: 12px; }
.me-name { font: 900 20px var(--display); color: var(--slide-ink, var(--ink)); }
.me-guild { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.home { margin-top: 8px; font: 700 10px var(--mono); letter-spacing: 0.12em; color: var(--label-ink, #c9c9d8); }
.home b { color: var(--accent); font-size: 12px; letter-spacing: 0.02em; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.badge { border: 1px solid var(--accent); color: var(--accent); padding: 4px 8px; font: 700 10px var(--mono); text-transform: uppercase; }

.avatar { border-radius: 50%; object-fit: cover; flex: none; background: rgba(255, 255, 255, 0.12); }
.avatar.xs { width: 22px; height: 22px; }
.avatar.sm { width: 28px; height: 28px; }
.avatar.md { width: 40px; height: 40px; }
.avatar.lg { width: 54px; height: 54px; box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Panels ---------- */
.panel {
  margin-top: 44px; padding: 24px; background: #07070b;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
.panel p { color: #d6d6e4; }
.panel .headline { margin-bottom: 14px; }
.search {
  width: 100%; padding: 13px 14px; background: var(--bg); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); font: 15px var(--mono);
}
.search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.member-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 480px; overflow: auto; }
.member-list a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; text-decoration: none; border: 1px solid var(--line); }
.member-list a:hover { border-color: var(--accent); }
.member-list span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.member-list .rank { font: 700 12px var(--mono); color: var(--accent); }

/* ---------- Landing ---------- */
.float { position: absolute; width: clamp(110px, 18vw, 230px); color: var(--accent); opacity: 0.75; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 50%, transparent)); }
.float svg { width: 100%; height: auto; display: block; }
.f1 { left: 3%; top: 8%; transform: rotate(-16deg); }
.f2 { right: 4%; top: 6%; transform: rotate(14deg); }
.f3 { left: 6%; bottom: 10%; transform: rotate(10deg); }
.f4 { right: 5%; bottom: 12%; transform: rotate(-10deg); }
.landing { text-align: center; padding-top: 12vh; max-width: 760px; }
.center-k { justify-content: center; }
.mega {
  margin: 18px 0; font: 900 clamp(48px, 11vw, 112px)/0.9 var(--display); color: var(--accent);
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 55%, transparent);
}
.lead { font-size: 18px; color: #d9d9e6; max-width: 560px; margin: 0 auto 30px; }
.how { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 40px 0 20px; }
.chip {
  padding: 12px 16px; background: rgba(5, 5, 8, 0.8); font: 700 13px var(--mono);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
.chip b { color: var(--accent); margin-right: 6px; }
.small-print { font-size: 13px; max-width: 580px; margin: 18px auto; }

@media (max-width: 420px) {
  .slide { padding: 16px 16px 12px; }
  .headline { font-size: 34px; }
  .pix.xxl { font-size: 88px; }
  .float { opacity: 0.35; }
}


/* ---------- Header actions & style switcher ---------- */
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pxi-ui { width: 20px; height: auto; display: block; }
.pxi-ui.sm { width: 11px; display: inline-block; }
.link-btn { background: none; border: 0; color: var(--muted); font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; text-decoration: underline; margin-top: 18px; }
.mega.small { font-size: clamp(40px, 8vw, 72px); }

/* ---------- Motion (story player + member card) ---------- */
.fx-scan { inset: 0; display: none; }
.story .slide .anim, .motion .slide .anim { opacity: 0; transform: translateY(16px); }
.slide.is-active .anim { animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--i, 0) * 85ms + 180ms); }
.slide.is-active .headline.anim { animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, flicker 0.9s steps(1) forwards; animation-delay: calc(var(--i, 0) * 85ms + 180ms); }
.slide.is-active .fx-shape { animation: shape-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both, bob 6s ease-in-out 1.1s infinite; }
.slide.is-active .fx-grid { animation: grid-run 3.5s linear infinite; }
.slide.is-active .fx-glow { animation: pulse 4s ease-in-out infinite; }
.slide.is-active .bar .fill { transform-origin: bottom; animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 500ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes flicker { 0%, 20%, 40% { opacity: 1; } 10%, 30% { opacity: 0.2; } 100% { opacity: 1; } }
@keyframes shape-in { from { opacity: 0; transform: rotate(-60deg) scale(0.4); } to { opacity: 0.85; transform: rotate(-14deg) scale(1); } }
@keyframes bob { 0%, 100% { transform: rotate(-14deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-12px); } }
@keyframes grid-run { from { background-position: 0 0; } to { background-position: 0 36px; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes grow { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) {
  .story .slide .anim, .motion .slide .anim { opacity: 1; transform: none; }
  .slide.is-active * { animation: none !important; }
}

/* ---------- Story player ---------- */
body.story-open { overflow: hidden; }
.story { position: fixed; inset: 0; z-index: 50; background: #030305; overflow: hidden; }
.story[hidden] { display: none; }
.story-start { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; background: #030305; text-align: center; padding: 16px; }
.story-start .fx-grid { height: 50%; background-size: 60px 60px; transform: perspective(500px) rotateX(64deg); animation: grid-run 3s linear infinite; }
.story-start .fx-dots { -webkit-mask-image: radial-gradient(60% 50% at 50% 40%, #000, transparent 80%); mask-image: radial-gradient(60% 50% at 50% 40%, #000, transparent 80%); }
.start-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.start-inner .mega { margin: 6px 0 22px; }
.blink { animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { box-shadow: 4px 4px 0 transparent; filter: brightness(1.25); } }
.story.playing .story-start { display: none; }

/* Full-screen slides: the backdrop fills the viewport, the text sits in one column scaled to the screen. */
.story { --accent: #45e6a3; }
.story[data-theme='green'] { --accent: #45e6a3; }
.story[data-theme='yellow'] { --accent: #ffe14d; }
.story[data-theme='blue'] { --accent: #8fa2ff; }
.story[data-theme='pink'] { --accent: #ff5fd2; }
.story[data-theme='purple'] { --accent: #c8a2ff; }
.story[data-theme='orange'] { --accent: #ff9f43; }
.story[data-theme='cyan'] { --accent: #4fe3ff; }

.story-stage-wrap, .story-stage, .story-slides { position: absolute; inset: 0; }
.story-slides .slide {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; border: 0;
  opacity: 0; transform: translateX(6vw); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.story-slides .slide.is-past { transform: translateX(-6vw); }
.story-slides .slide.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
.story-col {
  position: absolute; left: 50%; top: 50%; width: 360px; height: 640px; z-index: 1;
  display: flex; flex-direction: column; padding: 18px 20px 14px;
  transform: translate(-50%, -50%) scale(var(--k, 1));
}
.story-slides .slide .fx-grid { left: -20%; right: -20%; height: 42%; background-size: 64px 64px; transform: perspective(520px) rotateX(64deg); }
.story-slides .slide .fx-glow {
  background:
    radial-gradient(55% 60% at 80% 35%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(50% 50% at 10% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
.story-slides .slide .btn { position: relative; z-index: 3; }

/* Wide screens: text column on the left third, a big wireframe shape on the right. */
.story.landscape .story-col { left: 34%; }
.story.landscape .slide .fx-shape { width: min(40vw, 78vh); right: 7vw; top: calc(50% - min(20vw, 39vh)); }
.story.landscape .slide .slide-foot { visibility: hidden; }

/* Step indicator (no timer: it just shows where you are) */
.story-progress {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: min(520px, 62vw);
  display: flex; gap: 6px; z-index: 4;
}
.story-progress button { flex: 1; height: 6px; padding: 0; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.16); }
.story-progress button.done { background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
.story-progress button:hover { background: rgba(255, 255, 255, 0.4); }
.story-progress button.done:hover { background: var(--accent); }

.tap { display: none; position: absolute; top: 70px; bottom: 0; z-index: 2; background: transparent; border: 0; cursor: pointer; }
.tap-prev { left: 0; width: 30%; }
.tap-next { right: 0; width: 70%; }

.story-ui { position: absolute; top: 18px; right: 18px; display: flex; gap: 10px; z-index: 4; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  background: #050508; color: #f5f5fa; border: 2px solid #f5f5fa; box-shadow: 3px 3px 0 #f5f5fa;
}
.icon-btn .off, .icon-btn.muted .on { display: none; }
.icon-btn.muted .off { display: block; }
.nav-btn {
  position: absolute; bottom: 30px; width: 56px; height: 56px; display: grid; place-items: center; z-index: 4; cursor: pointer;
  background: #050508; color: var(--accent); border: 2px solid currentColor; box-shadow: 4px 4px 0 currentColor;
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.2s;
}
.nav-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 currentColor; }
.nav-btn .pxi-arrow { width: 22px; }
.nav-prev { left: 30px; }
.nav-next { right: 30px; }
.story.at-start .nav-prev { opacity: 0.25; pointer-events: none; }
.story:not(.playing) .nav-btn, .story:not(.playing) .story-progress { display: none; }

/* Phones: tap left/right to move, no arrow buttons */
@media (max-width: 700px) {
  .nav-btn { display: none; }
  .story.playing .tap { display: block; }
  .story-progress { width: calc(100vw - 130px); left: 16px; transform: none; }
}


/* ---------- Server League ---------- */
.league-hero { text-align: center; padding: 30px 0 6px; }
.league-hero .kicker { justify-content: center; }
.league { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.league li {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #050508;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.league li.podium { box-shadow: 4px 4px 0 var(--accent); border-color: var(--accent); }
.league li.p1 { --accent: #ffe14d; }
.league li.p2 { --accent: #d6dbe6; }
.league li.p3 { --accent: #ff9f43; }
.l-rank { width: 56px; font-size: 32px; }
.l-name { flex: 1; min-width: 0; font: 900 15px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 84px; }
.l-stat b { font-size: 26px; }
.l-stat small { font: 700 9px var(--mono); letter-spacing: 0.12em; color: var(--muted); }
@media (max-width: 560px) { .hide-sm { display: none; } }

/* ---------- Start screen: boot sequence ---------- */
.story-start { overflow: hidden; }
.story-start .fx-grid { height: 30%; opacity: 0.9; }
.story-start .fx-dots { opacity: 0.9; }
.start-horizon {
  position: absolute; left: 0; right: 0; bottom: 30%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, #fff 50%, var(--accent) 80%, transparent);
  box-shadow: 0 0 24px 4px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 80px 18px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: horizon 4s ease-in-out infinite;
}
@keyframes horizon { 50% { opacity: 0.6; } }

.start-ring {
  position: absolute; left: 50%; top: 50%; width: min(92vh, 92vw); height: min(92vh, 92vw);
  translate: -50% -50%; pointer-events: none; animation: spin 60s linear infinite;
}
.start-ring circle { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.1 14; opacity: 0.5; filter: drop-shadow(0 0 6px var(--accent)); }
.start-ring circle.inner { stroke-width: 4; stroke-dasharray: 0.1 10; opacity: 0.25; animation: spin 40s linear infinite reverse; transform-origin: 200px 200px; }
@keyframes spin { to { rotate: 360deg; } }

.start-float {
  position: absolute; width: clamp(90px, 13vw, 190px); color: var(--accent); opacity: 0.85; pointer-events: none;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 60%, transparent));
  animation: drift 9s ease-in-out infinite;
}
.start-float svg { display: block; width: 100%; height: auto; }
.sf1 { left: 7%; top: 12%; rotate: -18deg; animation-duration: 8s; }
.sf2 { right: 8%; top: 10%; rotate: 14deg; animation-duration: 10s; animation-delay: -2s; }
.sf3 { left: 15%; bottom: 20%; rotate: 10deg; animation-duration: 11s; animation-delay: -4s; width: clamp(70px, 9vw, 130px); }
.sf4 { right: 16%; bottom: 22%; rotate: -12deg; animation-duration: 9s; animation-delay: -1s; width: clamp(70px, 9vw, 130px); }
.sf5 { left: 2%; top: 46%; rotate: 8deg; animation-duration: 12s; animation-delay: -6s; width: clamp(60px, 7vw, 110px); }
.sf6 { right: 2%; top: 44%; rotate: -8deg; animation-duration: 10s; animation-delay: -3s; width: clamp(60px, 7vw, 110px); }
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(8deg); }
}

.hud { position: absolute; bottom: 64px; font: 700 11px var(--mono); letter-spacing: 0.14em; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.hud b { color: var(--accent); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.hud-bl { left: 28px; }
.hud-br { right: 28px; text-align: right; }

/* Glitchy title: pink/cyan split layers that jitter every few seconds */
.glitch { position: relative; text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 55%, transparent); }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; text-shadow: none;
}
.glitch::before { color: #ff5fd2; mix-blend-mode: screen; animation: glitch-a 3.2s steps(1) infinite; }
.glitch::after { color: #4fe3ff; mix-blend-mode: screen; animation: glitch-b 3.2s steps(1) infinite; }
@keyframes glitch-a {
  0%, 86%, 100% { transform: none; clip-path: inset(0 0 100% 0); }
  88% { transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); }
  91% { transform: translate(5px, -2px); clip-path: inset(60% 0 8% 0); }
  94% { transform: translate(-3px, 0); clip-path: inset(30% 0 40% 0); }
}
@keyframes glitch-b {
  0%, 86%, 100% { transform: none; clip-path: inset(0 0 100% 0); }
  89% { transform: translate(6px, -2px); clip-path: inset(50% 0 20% 0); }
  92% { transform: translate(-5px, 2px); clip-path: inset(5% 0 70% 0); }
  95% { transform: translate(3px, 1px); clip-path: inset(70% 0 5% 0); }
}

/* Boot loader, then the Start button appears */
.loader { width: min(420px, 80vw); display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.loader-bar { height: 14px; border: 2px solid var(--accent); padding: 2px; box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 50%, transparent); }
.loader-bar i {
  display: block; height: 100%; width: 100%; transform-origin: left;
  background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 10px);
  animation: load 1.8s steps(18) both 0.3s;
}
@keyframes load { from { transform: scaleX(0); } }
.loader-text { font: 700 12px var(--mono); letter-spacing: 0.16em; color: var(--accent); height: 16px; position: relative; }
.loader-text span { position: absolute; left: 0; right: 0; }
.loader-text .loading { animation: hide 0.01s 2.1s both; }
.loader-text .ready { opacity: 0; animation: show 0.01s 2.1s both, blink-text 1s steps(1) 2.1s infinite; }
@keyframes hide { to { opacity: 0; } }
@keyframes show { to { opacity: 1; } }
@keyframes blink-text { 50% { opacity: 0.35; } }
.reveal { opacity: 0; transform: translateY(10px); animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 2.2s forwards; }
.btn.reveal.blink { animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 2.2s forwards, blink 1.2s steps(1) 2.7s infinite; }

/* Stats ticker along the bottom */
.ticker {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px; overflow: hidden; pointer-events: none;
  border-top: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: rgba(3, 3, 5, 0.85);
  display: flex; align-items: center;
}
.ticker-track { display: flex; align-items: center; gap: 22px; height: 100%; white-space: nowrap; width: max-content; animation: marquee 40s linear infinite; }
/* A fixed line height keeps emoji (taller than the pixel font) from pushing items off the baseline. */
.ticker-track span { display: block; height: 40px; font: 400 22px/40px var(--pixel); color: var(--accent); letter-spacing: 0.04em; }
.ticker-track i { font-style: normal; color: #f5f5fa; opacity: 0.5; font-size: 12px; align-self: center; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 700px) {
  .start-float { opacity: 0.4; }
  .sf5, .sf6, .hud { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .start-ring, .start-ring circle.inner, .start-float, .ticker-track, .glitch::before, .glitch::after { animation: none; }
  .loader-bar i, .reveal, .loader-text span { animation-duration: 0.01s; animation-delay: 0s; }
}


/* Server name on the start screen */
.avatar.xl { width: 88px; height: 88px; }
.start-guild {
  font: 900 clamp(22px, 3.4vw, 36px)/1.1 var(--display); color: #f5f5fa; letter-spacing: 0.04em; text-transform: uppercase;
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent); margin-top: 6px; max-width: 80vw; overflow-wrap: anywhere;
}
.start-inner .kicker { margin-top: -2px; }


/* ---------- More accents ---------- */
.t-lime { --accent: #c6ff4a; }
.t-red { --accent: #ff5a6e; }
.t-white { --accent: #eef0ff; }
.story[data-theme='lime'] { --accent: #c6ff4a; }
.story[data-theme='red'] { --accent: #ff5a6e; }
.story[data-theme='white'] { --accent: #eef0ff; }

/* Server icons are shown exactly as uploaded */
.avatar.raw { border-radius: 0; background: none; box-shadow: none; object-fit: contain; }

/* Two cards side by side on the member page */
.slides.pair { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 380px)); justify-content: center; }

/* Text values inside cells */
.cell b.txt { font: 700 13px Inter, sans-serif; color: var(--slide-ink, var(--ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell em { font: 700 9px var(--mono); font-style: normal; letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; }
.bf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bf .pix { font-size: 22px; }

/* ---------- Heat map ---------- */
.heat { display: flex; flex-direction: column; gap: 2px; }
.hm-row { display: grid; grid-template-columns: 10px repeat(31, 1fr); gap: 2px; align-items: center; }
.hm-row span { font: 700 8px var(--mono); color: var(--label-ink, #c9c9d8); }
.heat i { display: block; aspect-ratio: 1; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.heat i.nx { background: none; }
.heat i.l1 { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.heat i.l2 { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.heat i.l3 { background: color-mix(in srgb, var(--accent) 78%, transparent); }
.heat i.l4 { background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent); }
.heat.mini { gap: 1px; margin: 4px 0 6px; }
.heat.mini .hm-row { gap: 1px; grid-template-columns: 8px repeat(31, 1fr); }
.heat.mini .hm-row span { font-size: 6px; }
.slide.is-active .heat.big i:not(.nx) { animation: cell-on 0.35s both; animation-delay: calc(var(--d, 0) * 3ms + 450ms); }
@keyframes cell-on { from { opacity: 0; transform: scale(0.2); } }

/* ---------- Activity clock ---------- */
.clock-wrap { display: flex; justify-content: center; margin: 4px 0; }
.clock { width: 74%; color: var(--accent); }
.clock rect { fill: var(--accent); }
.clock-labels { font: 700 9px var(--mono); opacity: 0.75; }
.slide.is-active .clock rect { transform-box: fill-box; transform-origin: bottom; animation: grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 35ms + 400ms); }

/* ---------- Moments ---------- */
.first {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--cell-bg, rgba(5, 5, 8, 0.75));
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 50%, transparent);
}
.first b { display: block; font-size: 14px; }
.first span { font: 700 10px var(--mono); color: var(--accent); letter-spacing: 0.04em; }

/* ---------- Duos ---------- */
.duos { display: flex; flex-direction: column; gap: 9px; }
.duo {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--cell-bg, rgba(5, 5, 8, 0.75));
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 50%, transparent);
}
.duo-av { display: flex; flex: none; }
.duo-av .avatar { width: 34px; height: 34px; box-shadow: 0 0 0 2px #07070b; }
.duo-av .avatar + .avatar { margin-left: -10px; }
.duo-names { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.2; }
.duo-names b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duo-names span { color: var(--accent); font: 700 10px var(--mono); }
.duo-n { display: flex; flex-direction: column; align-items: flex-end; }
.duo-n .pix { font-size: 26px; }
.duo-n small { font: 700 8px var(--mono); letter-spacing: 0.1em; color: var(--label-ink, #c9c9d8); }

/* ---------- Emoji ---------- */
.emoji-img { display: block; object-fit: contain; }
.emoji-uni { display: block; line-height: 1; }
.emoji-img.xl { width: 92px; height: 92px; }
.emoji-uni.xl { font-size: 84px; }
.emoji-img.sm { width: 26px; height: 26px; }
.emoji-uni.sm { font-size: 24px; }
.emoji-hero { display: flex; align-items: center; gap: 16px; padding: 14px; background: var(--cell-bg, rgba(5, 5, 8, 0.75));
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 50%, transparent); }
.emoji-hero .sub { margin: 0; }
.emoji-rank { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.emoji-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; background: var(--cell-bg, rgba(5, 5, 8, 0.75));
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 50%, transparent);
}
.emoji-chip b { font: 700 12px var(--mono); color: var(--accent); }

/* ---------- Server vibe (finale) ---------- */
.rows.facts .name { white-space: normal; font-size: 13px; }
.sub.see { margin-top: 12px; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }

/* ---------- Badge panel ---------- */
.badge-preview { margin: 6px 0 16px; }
.badge-preview img { display: block; max-width: 100%; height: auto; }
.snippets { display: flex; flex-direction: column; gap: 10px; }
.snippet { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; }
.snippet span { font: 700 11px var(--mono); letter-spacing: 0.12em; color: var(--accent); }
.snippet code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 9px 10px; background: #050508; border: 1px solid var(--line); font-size: 12px; }
@media (max-width: 560px) { .snippet { grid-template-columns: 1fr auto; } .snippet span { grid-column: 1 / -1; } }

/* ---------- League: division tabs and anonymous servers ---------- */
.tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 18px 0 0; }
.tabs a {
  --accent: #4fe3ff; text-decoration: none; padding: 9px 14px; font: 700 12px var(--mono); letter-spacing: 0.1em;
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); color: var(--muted);
}
.tabs a small { font-size: 10px; opacity: 0.7; }
.tabs a.on { color: #050508; background: var(--accent); border-color: var(--accent); box-shadow: 3px 3px 0 #f5f5fa; }
.l-name { display: flex; flex-direction: column; }
.l-name small { font: 700 9px var(--mono); letter-spacing: 0.12em; color: var(--muted); margin-top: 3px; }


/* ---------- Landing page ---------- */
.landing-body { overflow-x: hidden; }
.mega.glitch::before, .mega.glitch::after { white-space: pre-line; }

.global-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px auto 60px; max-width: 760px; }
.global-stats div {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; background: rgba(5, 5, 8, 0.85);
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
.global-stats .pix { font-size: clamp(40px, 6vw, 64px); }
.global-stats span { font: 700 11px var(--mono); letter-spacing: 0.14em; color: #c9c9d8; text-align: center; }

.landing-more { max-width: 1100px; margin: 0 auto; padding: 0 16px 80px; position: relative; z-index: 1; }

/* League preview: one column per division */
.league-preview { text-align: center; padding: 30px 0 10px; }
.league-preview .lead { margin-bottom: 26px; }
.league-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.league-col {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #07070b;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
.league-col > .btn { align-self: flex-start; margin-top: auto; }
.league-col-head { display: flex; justify-content: space-between; align-items: baseline; }
.league-col-head span { font: 900 18px var(--display); color: var(--accent); }
.league-col-head small { font: 700 9px var(--mono); letter-spacing: 0.12em; color: var(--muted); }
.mini-league { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mini-league li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid var(--line); }
.mini-league li.podium { border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent); }
.mini-league li.p1 { --accent: #ffe14d; }
.mini-league li.p2 { --accent: #d6dbe6; }
.mini-league li.p3 { --accent: #ff9f43; }
.mini-league .l-rank { width: 34px; font-size: 22px; }
.mini-league .l-name { flex: 1; min-width: 0; font: 900 12px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mini-league b.pix { font-size: 20px; }
.league-col .empty { color: var(--muted); font: 700 12px var(--mono); letter-spacing: 0.06em; margin: 8px 0; }

/* Feature tiles */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 70px 0 40px; }
.feature {
  position: relative; overflow: hidden; padding: 20px 18px 22px; background: #07070b; min-height: 220px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
.feature-icon { width: 76px; color: var(--accent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 50%, transparent)); transition: transform 0.4s; }
.feature-icon svg { width: 100%; height: auto; display: block; }
.feature:hover .feature-icon { transform: rotate(-10deg) scale(1.08); }
.feature h3 { margin: 14px 0 8px; font: 900 18px var(--display); color: var(--accent); text-transform: uppercase; }
.feature p { margin: 0; color: #cfcfe0; font-size: 14px; }


/* Footer: same width as the page content, compact */
.site-footer { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 26px 16px 22px; border-top: 1px solid rgba(69, 230, 163, 0.3); }
.footer-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.footer-brand .brand { font-size: 14px; }
.footer-brand p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; }
.footer-links a { color: #cfcfe0; text-decoration: none; font: 700 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.footer-links a:hover { color: #45e6a3; }
.footer-author {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; text-decoration: none; color: #f5f5fa;
  border: 2px solid #45e6a3; box-shadow: 3px 3px 0 #45e6a3; transition: transform 0.08s, box-shadow 0.08s;
}
.footer-author:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #45e6a3; }
.footer-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.footer-author span { display: flex; flex-direction: column; line-height: 1.1; }
.footer-author small { font: 700 9px var(--mono); letter-spacing: 0.14em; color: var(--muted); }
.footer-author b { font: 900 13px var(--display); color: #45e6a3; }
.x-logo { width: 16px; height: 16px; }
.footer-note { margin: 18px 0 0; color: var(--muted); font: 700 10px var(--mono); letter-spacing: 0.06em; }

/* Privacy / terms */
.text-page { max-width: 760px; }
.text-page h2 { font: 900 18px var(--display); color: var(--accent); margin: 34px 0 8px; text-transform: uppercase; }
.text-page p { color: #d0d0e0; line-height: 1.6; }


/* ---------- Scroll reveal ---------- */
.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal-on-scroll.in { opacity: 1; transform: none; }
.features .reveal-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.features .reveal-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.features .reveal-on-scroll:nth-child(4) { transition-delay: 0.3s; }

/* ---------- Header ---------- */
html { scroll-behavior: smooth; }
.site-header {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 14px 28px;
  background: rgba(5, 5, 8, 0.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(69, 230, 163, 0.25);
}
.site-header .brand { font-size: 15px; }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a { font: 700 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.site-nav a:hover { color: #45e6a3; }

/* ---------- Hero: ring, grid and shapes live only here and scroll away with it ---------- */
.hero-section { position: relative; overflow: hidden; min-height: calc(100vh - 62px); display: flex; align-items: center; justify-content: center; padding: 40px 16px 60px; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg .fx-dots { -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%); }
.hero-bg .fx-grid { height: 34%; background-size: 64px 64px; transform: perspective(500px) rotateX(64deg); animation: grid-run 3.5s linear infinite; }
.hero-bg .start-horizon { bottom: 34%; }
.hero-bg .start-ring { width: min(86vh, 86vw); height: min(86vh, 86vw); opacity: 0.75; }
.hero-bg .float { animation: drift 10s ease-in-out infinite; }
.hero-bg .f2 { animation-duration: 12s; animation-delay: -3s; }
.hero-bg .f3 { animation-duration: 9s; animation-delay: -5s; }
.hero-bg .f4 { animation-duration: 11s; animation-delay: -2s; }
.hero-inner { position: relative; z-index: 1; max-width: 900px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-inner .lead { max-width: 640px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-inner .global-stats { width: 100%; margin: 56px auto 0; }

/* ---------- Sections ---------- */
.sections { max-width: 1120px; margin: 0 auto; padding: 0 16px 60px; position: relative; z-index: 1; }
.section { padding: 110px 0 20px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.section-head { margin-bottom: 40px; }
.section-title { margin: 10px 0 0; font: 900 clamp(32px, 5vw, 56px)/1 var(--display); color: var(--accent); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.section-lead { color: #d0d0e0; font-size: 17px; max-width: 620px; margin: 14px 0 0; }

/* How it works: steps + Discord chat mock */
.how-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.steps li { display: flex; gap: 18px; padding: 18px; background: #07070b; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.steps .pix { font-size: 44px; line-height: 0.9; flex: none; }
.steps h3 { margin: 0 0 6px; font: 900 17px var(--display); text-transform: uppercase; }
.steps p { margin: 0; color: #cfcfe0; font-size: 14px; }

.dc-window { display: grid; grid-template-columns: 180px 1fr; min-height: 540px; background: #313338; border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 8px 8px 0 color-mix(in srgb, var(--accent) 45%, transparent); font-family: Inter, sans-serif; overflow: hidden; }
.dc-sidebar { background: #2b2d31; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; }
/* Both header bars share one height so their bottom borders line up. */
.dc-server, .dc-top { box-sizing: border-box; height: 48px; display: flex; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.35); box-shadow: 0 1px 0 rgba(4, 4, 5, 0.2); }
.dc-server { font-weight: 700; font-size: 14px; padding: 0 16px; margin: 0 -8px 12px; }
.dc-top { gap: 12px; padding: 0 16px; font-weight: 700; font-size: 15px; }
.dc-top small { font-weight: 500; font-size: 13px; color: #949ba4; padding-left: 12px; border-left: 1px solid #3f4147; }
.dc-cat { font-size: 11px; font-weight: 700; color: #949ba4; padding: 4px 8px; letter-spacing: 0.02em; }
.dc-chan { font-size: 15px; color: #949ba4; padding: 6px 8px; border-radius: 4px; }
.dc-chan.on { background: #404249; color: #f2f3f5; }
.dc-main { display: flex; flex-direction: column; min-width: 0; }
.dc-msgs { flex: 1; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 22px; }

/* "x used /command" line above an app reply, with Discord's curved connector */
.dc-used { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 4px 56px; font-size: 13px; color: #b5bac1; }
.dc-used::before { content: ''; position: absolute; left: -37px; top: 9px; bottom: -1px; width: 31px; border-left: 2px solid #4e5058; border-top: 2px solid #4e5058; border-top-left-radius: 6px; }
.dc-used b { color: #f2f3f5; font-weight: 600; }
.dc-slash { color: #c9cdfb; background: rgba(88, 101, 242, 0.3); padding: 0 3px; border-radius: 3px; }
.dc-mini { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; flex: none; }
.dc-mini.u1 { background: #c8a2ff; color: #1b0f30; }
.dc-mini.u2 { background: #ffe14d; color: #2a2300; }

.dc-row { display: flex; gap: 16px; }
.dc-body { flex: 1; min-width: 0; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.dc-avatar.bot { background: #45e6a3; color: #07140e; }
.dc-avatar.bot .pxi-ui { width: 20px; }
.dc-meta { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.dc-meta .bot-name { color: #45e6a3; font-weight: 600; }
.dc-meta em { font-style: normal; font-size: 10px; font-weight: 700; background: #5865f2; color: #fff; padding: 1px 5px; border-radius: 3px; line-height: 15px; }
.dc-meta time { font-size: 12px; color: #949ba4; margin-left: 2px; }
.dc-body p { margin: 3px 0 6px; font-size: 15px; line-height: 1.4; color: #dbdee1; }

/* Link preview embed with the big generated image */
.dc-embed {
  display: flex; flex-direction: column; gap: 4px; max-width: 432px; margin-top: 4px; padding: 10px 14px 14px;
  background: #2b2d31; border-left: 4px solid var(--accent); border-radius: 4px; font-size: 14px; color: #dbdee1;
}
.dc-embed small { font-size: 12px; color: #b5bac1; }
.dc-embed a { color: #00a8fc; font-weight: 600; font-size: 15px; }
.dc-embed > span { line-height: 1.4; }
.dc-og {
  position: relative; overflow: hidden; margin-top: 10px; aspect-ratio: 1200 / 630; border-radius: 4px; padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--accent);
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%),
    radial-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1.4px) 0 0 / 7px 7px,
    #07070b;
}
.dc-og-top { display: flex; align-items: center; gap: 6px; font: 900 10px var(--display); color: #f5f5fa; }
.dc-og-icon { width: 16px; height: 16px; border-radius: 4px; background: var(--accent); }
.dc-og-title { font: 900 30px/0.95 var(--display); }
.dc-og-rank { display: flex; align-items: center; gap: 10px; }
.dc-og-rank .pix { font-size: 64px; line-height: 0.8; }
.dc-og-tag { font: 700 11px var(--mono); background: var(--accent); color: #0a0a0f; padding: 2px 6px; }
.dc-og-stats { display: flex; gap: 6px; }
.dc-og-stats span { display: flex; flex-direction: column; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); background: #050508; font: 700 7px var(--mono); letter-spacing: 0.08em; color: #c9c9d8; }
.dc-og-stats .pix { font-size: 17px; color: var(--accent); }
.dc-og-shape { position: absolute; right: -6%; top: 10%; width: 40%; opacity: 0.85; transform: rotate(-14deg); }
.dc-og-shape svg { width: 100%; height: auto; display: block; }

.dc-button { display: inline-flex; align-items: center; margin-top: 8px; font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 4px; background: #4e5058; color: #fff; }
.dc-ephemeral { font-size: 12px; color: #949ba4; margin-top: 6px; }
.dc-ephemeral span { color: #00a8fc; }
.dc-input { display: flex; align-items: center; gap: 14px; margin: 8px 16px 20px; padding: 12px 16px; border-radius: 8px; background: #383a40; color: #6d6f78; font-size: 15px; }
.dc-input span { width: 22px; height: 22px; border-radius: 50%; background: #b5bac1; color: #383a40; display: grid; place-items: center; font-weight: 700; }

/* FAQ: one column so an open answer never stretches its neighbour */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.faq-item { background: #07070b; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px; font: 900 14px var(--display); text-transform: uppercase; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { font: 400 28px/0.6 var(--pixel); color: var(--accent); transition: transform 0.2s; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 18px 18px; color: #cfcfe0; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .dc-window { grid-template-columns: 1fr; }
  .dc-sidebar { display: none; }
}
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; }
  .league-cols, .features { grid-template-columns: 1fr 1fr; }
  .site-nav { display: none; }
  .site-header .btn { margin-left: auto; }
}
@media (max-width: 600px) {
  .league-cols, .features, .global-stats { grid-template-columns: 1fr; }
  .hero-bg .start-ring { opacity: 0.4; }
  .footer-links { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg .float, .hero-bg .fx-grid { animation: none; }
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* Drop-day countdown in the hero */
.drop { width: 100%; max-width: 760px; margin: 56px auto 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.countdown { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.countdown div {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; background: rgba(5, 5, 8, 0.85);
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
.countdown .pix { font-size: clamp(44px, 7vw, 72px); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font: 700 11px var(--mono); letter-spacing: 0.14em; color: #c9c9d8; }
.drop-note { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; font: 700 12px var(--mono); letter-spacing: 0.12em; color: #c9c9d8; }
.drop-note b { color: var(--accent); }
.league-col .empty .pix { font-size: 28px; color: var(--accent); margin-right: 4px; }
@media (max-width: 640px) {
  .countdown { grid-template-columns: repeat(2, 1fr); }
}