/* ==========================================================================
   Floofderg SMP — "Ausjamcian" visual language
   Voxel server-status terminal: near-black canvas, one confident blue,
   warm off-white text, hand-drawn marker accents. Red is reserved.
   Source of truth for tokens: this :root block (mirror in DESIGN.md).
   ========================================================================== */

/* Monocraft — open-source (SIL OFL 1.1) pixel font for the Minecraft-style
   wordmark. Self-hosted; see fonts/Monocraft-LICENSE.txt. */
@font-face {
  font-family: 'Monocraft';
  src: url('../fonts/Monocraft.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand accent — the one primary color */
  --brand: #0065ca;
  --brand-deep: #004f9e;
  --brand-rgb: 0, 101, 202;
  --brand-ink: #3b82f6;   /* lighter blue for text/links on dark — meets WCAG AA 4.5:1 (the fill blue #0065ca is only 3.5:1) */

  /* Backgrounds & surfaces */
  --bg: #0b0b0d;
  --bg-2: #121215;
  --ink: #0a0a0a;
  --paper: #f6f3ec;
  --paper-pure: #ffffff;
  --line: rgba(255, 255, 255, 0.10);

  /* Text & neutrals */
  --cream: #efe9da;
  --muted: #9a978f;
  --muted-2: #8a877f;

  /* Semantic */
  --red: #e0353b;
  --red-deep: #b3262b;
  --green: #1fc77a;
  --blue: #2f9be0;

  /* Typography */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --marker: 'Permanent Marker', var(--mono);
  --mc: 'Monocraft', var(--mono);

  /* Shape & depth */
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 18px 50px -18px rgba(0, 0, 0, 0.7);

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* High-contrast mode — accents brighten, surfaces go pure */
.hc {
  --red: #ff7a7a;
  --green: #34e08f;
  --blue: #6ab0ff;
  --bg: #000000;
  --bg-2: #050505;
  --cream: #ffffff;
  --muted: #d6d6d6;
  --muted-2: #bcbcbc;
  --line: rgba(255, 255, 255, 0.28);
  --brand-ink: #6ab0ff;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--cream);
  line-height: 1.6;
  font-size: 15px;
  letter-spacing: 0.01em;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Layered atmosphere: faint voxel grid + a single blue bloom behind the top */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(var(--brand-rgb), 0.22), transparent 60%),
    radial-gradient(900px 500px at 5% 4%, rgba(47, 155, 224, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--ink) 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
}

img { max-width: 100%; display: block; }

a { color: var(--brand-ink); text-decoration: none; }

::selection { background: rgba(var(--brand-rgb), 0.45); color: #fff; text-shadow: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--brand);
}

.marker { font-family: var(--marker); font-weight: 400; letter-spacing: 0.01em; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --_bg: var(--bg-2);
  --_fg: var(--cream);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.22s ease,
    border-color 0.22s ease, background 0.22s ease;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --_fg: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 12px 30px -12px rgba(var(--brand-rgb), 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn--primary:hover {
  box-shadow: 0 18px 40px -12px rgba(var(--brand-rgb), 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn--ghost:hover { border-color: rgba(var(--brand-rgb), 0.6); color: #fff; }

.btn .ico { width: 16px; height: 16px; flex: 0 0 auto; }

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(11, 11, 13, 0.82), rgba(11, 11, 13, 0.45));
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  max-width: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  font-weight: 700;
}

.brand img { width: 30px; height: 30px; }

.brand b { font-size: 16px; letter-spacing: 0.02em; }
.brand span { color: var(--brand-ink); }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 13px;
  border-radius: 8px;
  transition: color 0.18s ease, background 0.18s ease;
}

.nav a:hover { color: var(--cream); background: rgba(255, 255, 255, 0.05); }
.nav a.is-cta { color: #fff; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.icon-btn:hover { color: var(--cream); border-color: rgba(var(--brand-rgb), 0.6); }
.icon-btn svg { width: 18px; height: 18px; }

.nav-toggle { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(56px, 9vw, 104px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.status-flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 7px 13px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted-2);
  box-shadow: 0 0 0 0 rgba(31, 199, 122, 0.6);
}

.dot.is-online {
  background: var(--green);
  animation: pulse 2.4s ease-out infinite;
}
.dot.is-offline { background: var(--red); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 199, 122, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(31, 199, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 199, 122, 0); }
}

.hero h1 {
  font-family: var(--mc);
  /* Monocraft is a pixel font — render it crisp, not anti-aliased-soft. */
  -webkit-font-smoothing: none;
  font-size: clamp(38px, 7.4vw, 78px);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 400;
  margin: 22px 0 0;
  text-transform: none;
}

.hero h1 .l2 { display: block; color: var(--brand); }

/* Hand-scrawled accent riding over the wordmark */
.scrawl {
  display: inline-block;
  font-family: var(--marker);
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream);
  font-size: clamp(20px, 3.4vw, 34px);
  transform: rotate(-4deg);
  position: relative;
  margin-left: 6px;
}

.scrawl::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -8px;
  bottom: -6px;
  height: 10px;
  background: var(--brand);
  border-radius: 60% 40% 55% 45% / 80% 70% 90% 60%;
  opacity: 0.85;
  z-index: -1;
  transform: rotate(1.5deg);
}

.hero .lede {
  margin-top: 22px;
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(15px, 1.8vw, 17px);
}

.hero .lede b { color: var(--cream); font-weight: 600; }

.hero-cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Hero visual: framed screenshot with the mascot breaking out of the frame */
.hero-visual { position: relative; }

.shot {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 10px;
  box-shadow: var(--shadow);
  transform: rotate(1.4deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-visual:hover .shot { transform: rotate(0deg) translateY(-4px); }

/* Mascot — overlaps the lower-left corner and spills outside the frame */
.mascot {
  position: absolute;
  left: -9%;
  bottom: -11%;
  width: 47%;
  max-width: 320px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55));
  animation: bob 5s ease-in-out infinite;
  transform-origin: bottom center;
}

.mascot img { width: 100%; height: auto; }

/* soft blue ground-glow so the derg reads as planted, not floating */
.mascot::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -6%;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(var(--brand-rgb), 0.45), transparent 70%);
  filter: blur(5px);
  z-index: -1;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

.shot picture { display: block; width: 100%; }

.shot img {
  border-radius: 12px;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  image-rendering: auto;
}

.shot::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.55), transparent 45%);
  z-index: -1;
  filter: blur(14px);
  opacity: 0.7;
}

/* little voxel chip in the corner of the shot */
.shot .shot-tag {
  position: absolute;
  right: 18px;
  bottom: 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid var(--line);
  padding: 6px 11px;
  border-radius: 8px;
  backdrop-filter: blur(6px);
}

/* ==========================================================================
   Connect / status terminal
   ========================================================================== */

.connect { position: relative; margin-top: clamp(8px, 3vw, 28px); }

.terminal {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(var(--brand-rgb), 0.07), transparent 38%),
    var(--bg-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}

.terminal__bar i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--muted-2); opacity: 0.6;
}
.terminal__bar i:nth-child(1) { background: var(--red); }
.terminal__bar i:nth-child(2) { background: #e0a93b; }
.terminal__bar i:nth-child(3) { background: var(--green); }
.terminal__bar span {
  margin-left: 8px; font-size: 12px; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}

.terminal__body { padding: clamp(20px, 3vw, 30px); }

.addr-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.addr-row {
  margin-top: 12px;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.addr {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(var(--brand-rgb), 0.5);
  background: rgba(var(--brand-rgb), 0.06);
}

.addr .prompt { color: var(--brand); font-weight: 700; }

.addr code {
  font-family: var(--mono);
  font-size: clamp(16px, 2.4vw, 21px);
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-btn { flex: 0 0 auto; }
.copy-btn.copied {
  background: linear-gradient(180deg, var(--green), #16a866);
  border-color: transparent;
  color: #04210f;
}

/* live stat strip */
.stat-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.stat { background: var(--bg-2); padding: 14px 16px; }

.stat .k {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.stat .v {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.1;
}

.stat .v small { font-size: 13px; color: var(--muted); font-weight: 500; }

.tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.tag::before { content: "▪ "; color: var(--brand); }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */

section { position: relative; }

.band { padding-block: clamp(56px, 9vw, 110px); }

.section-head { max-width: 60ch; }

.section-head h2 {
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-top: 16px;
  text-transform: uppercase;
}

.section-head p { margin-top: 14px; color: var(--muted); max-width: 52ch; }

/* ==========================================================================
   Feature grid
   ========================================================================== */

.features {
  margin-top: clamp(34px, 5vw, 54px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.card {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), rgba(18, 18, 21, 0.6));
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--brand-rgb), 0.5);
  box-shadow: var(--shadow-card);
}

/* pixel corner accent */
.card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 46px; height: 46px;
  background: linear-gradient(135deg, transparent 50%, rgba(var(--brand-rgb), 0.16) 50%);
  transition: background 0.28s ease;
}
.card:hover::after { background: linear-gradient(135deg, transparent 50%, rgba(var(--brand-rgb), 0.4) 50%); }

.card .glyph {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(var(--brand-rgb), 0.12);
  border: 1px solid rgba(var(--brand-rgb), 0.3);
  color: var(--brand);
  margin-bottom: 18px;
}
.card .glyph svg { width: 24px; height: 24px; }

.card h3 {
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
}

.card p { margin-top: 9px; color: var(--muted); font-size: 13.5px; }

/* ==========================================================================
   Link / action cards
   ========================================================================== */

.links-grid {
  margin-top: clamp(34px, 5vw, 54px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.link-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--cream);
  transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

.link-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--brand-rgb), 0.5);
  background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.08), var(--bg-2));
}

.link-card .glyph {
  flex: 0 0 auto;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(var(--brand-rgb), 0.12);
  border: 1px solid rgba(var(--brand-rgb), 0.3);
  color: var(--brand);
}
.link-card .glyph svg { width: 26px; height: 26px; }

.link-card .meta { min-width: 0; }
.link-card .meta b { display: block; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; }
.link-card .meta span { color: var(--muted); font-size: 13px; }
.link-card .arrow { margin-left: auto; color: var(--muted); transition: transform 0.24s ease, color 0.24s ease; }
.link-card:hover .arrow { transform: translateX(4px); color: var(--brand); }

.link-card--wide { grid-column: span 2; }

/* Donate — emphasis block */
.donate-card {
  grid-column: span 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: clamp(26px, 4vw, 40px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(420px 220px at 88% 12%, rgba(var(--brand-rgb), 0.18), transparent 70%),
    var(--bg-2);
  overflow: hidden;
}

.donate-card .copy { flex: 1 1 320px; }
.donate-card .copy h3 {
  font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.donate-card .copy h3 .marker { color: var(--brand); text-transform: none; }
.donate-card .copy p { margin-top: 10px; color: var(--muted); max-width: 48ch; }
.donate-card .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 44px;
  margin-top: clamp(40px, 6vw, 80px);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.site-footer .brand img { width: 26px; height: 26px; }
.site-footer .legal { color: var(--muted-2); font-size: 12.5px; }
.site-footer .legal a { color: var(--muted); }
.site-footer .socials { margin-left: auto; display: flex; gap: 8px; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in { opacity: 1; transform: none; }

.stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1365px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 560px; margin-inline: auto; width: 100%; }
  .shot { transform: rotate(0deg); }
  .mascot { width: 40%; max-width: 230px; left: -6%; bottom: -9%; }
  .features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1365px) {
  .nav { display: none; }
  .nav.is-open {
    display: flex;
    position: absolute;
    top: 68px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px var(--gutter) 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open a { padding: 13px; }
  .nav-toggle { display: inline-grid; margin-left: auto; }
  .stat-strip { grid-template-columns: 1fr; }
  /* Links: single column; icon sits beside the title, description spans full width below for more room */
  .links-grid { grid-template-columns: 1fr; }
  .link-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "glyph title arrow" "desc desc desc";
    align-items: center;
    gap: 4px 14px;
  }
  .link-card .glyph { grid-area: glyph; width: 44px; height: 44px; }
  .link-card .glyph svg { width: 22px; height: 22px; }
  .link-card .meta { display: contents; }
  .link-card .meta b { grid-area: title; }
  .link-card .meta span { grid-area: desc; margin-top: 4px; }
  .link-card .arrow { grid-area: arrow; margin-left: 0; align-self: start; }
  .link-card--wide { grid-column: span 1; }

  /* Donate: stack copy + full-width buttons so nothing clips off the right edge */
  .donate-card { grid-column: span 1; }
  .donate-card .actions { width: 100%; flex-direction: column; align-items: stretch; }
  .donate-card .actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .features { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   Recipes page (recipes.html)
   Read-only crafting/smelting book. Item icons overlaid on the vanilla GUI
   textures, using the same slot geometry as the admin editor.
   ========================================================================== */

.recipes-band { padding-top: clamp(40px, 7vw, 80px); }

/* ---- Filter / search bar ---- */
.rx-bar[hidden] { display: none; }

.rx-bar {
  margin-top: clamp(26px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Segmented pill toggle (All / Crafting / Smelting) */
.pill {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

.pill button {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.pill button.is-active { color: #fff; }

.pill__ind {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: left 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rx-search {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--cream);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 15px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.rx-search::placeholder { color: var(--muted-2); }
.rx-search:focus {
  outline: none;
  border-color: rgba(var(--brand-rgb), 0.6);
  background: rgba(var(--brand-rgb), 0.05);
}

/* ---- Empty / loading / no-match states ---- */
.rx-state {
  margin-top: clamp(34px, 6vw, 64px);
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
}

.rx-state__big {
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.rx-state p + p { margin-top: 8px; }

.rx-spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  animation: rx-spin 0.8s linear infinite;
}

@keyframes rx-spin { to { transform: rotate(360deg); } }

/* ---- Recipe grid ---- */
.rx-grid {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* Output-category section header (spans the whole grid row) */
.rx-group-head {
  grid-column: 1 / -1;
  margin: 16px 0 -2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rx-group-head:first-child { margin-top: 0; }
.rx-group-head::before { content: ""; width: 16px; height: 2px; background: var(--brand); flex: 0 0 auto; }
.rx-group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rx-group-head[hidden] { display: none; }

.rx-grid:empty { margin-top: 0; }

/* `[hidden]` must beat .rx-card's display:flex when a filter/search hides a card. */
.rx-card[hidden] { display: none; }

.rx-card {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), rgba(18, 18, 21, 0.6));
  transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}

.rx-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--brand-rgb), 0.5);
  box-shadow: var(--shadow-card);
}

.rx-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 16px;
}

.rx-card__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cream);
  line-height: 1.25;        /* full title now wraps instead of truncating */
}

.rx-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.rx-badge--crafting { color: var(--brand-ink); border-color: rgba(var(--brand-rgb), 0.4); background: rgba(var(--brand-rgb), 0.08); }
.rx-badge--smelting { color: #e0a93b; border-color: rgba(224, 169, 59, 0.4); background: rgba(224, 169, 59, 0.08); }
.rx-badge--smithing { color: #a78bfa; border-color: rgba(167, 139, 250, 0.4); background: rgba(167, 139, 250, 0.08); }

/* ---- The GUI stage ---- */
.rx-stage {
  position: relative;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--radius-sm);
  container-type: inline-size;
}

/* Preserve each texture's native aspect ratio (484x256 / 336x258). The bg image
   fills the stage exactly, so slot percentages map straight onto the texture. */
.rx-stage.crafting { max-width: 320px; aspect-ratio: 484 / 256; }
.rx-stage.smelting { max-width: 240px; aspect-ratio: 336 / 258; }
.rx-stage.smithing { max-width: 320px; aspect-ratio: 484 / 256; }

.rx-stage__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}

.rx-slot {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 3px;
}

.rx-slot img {
  width: 86%;
  height: 86%;
  object-fit: cover;
  object-position: center top;   /* animated textures (16x512 strips) show their top frame, not a squished sliver */
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.rx-slot.is-out img { width: 92%; height: 92%; }

.rx-slot[data-tip] { cursor: help; }

.rx-slot:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* Stack-count badge, bottom-right like in-game */
.rx-cnt {
  position: absolute;
  right: 2%;
  bottom: 0;
  font-family: var(--mono);
  font-size: clamp(11px, 3.4cqw, 15px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 1.5px 1.5px 0 rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

/* "any of a tag" slot: blue ring + ANY badge; the icon cycles through the tag's members */
.rx-slot.rx-tag { box-shadow: inset 0 0 0 2px rgba(var(--brand-rgb), 0.85); border-radius: 4px; }
.rx-any {
  position: absolute;
  left: 5%; top: 3%;
  font-family: var(--mono);
  font-size: clamp(7px, 2.6cqw, 10px);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--brand);
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1.2;
  pointer-events: none;
}

.rx-missing {
  display: grid;
  place-items: center;
  width: 80%;
  height: 80%;
  border-radius: 4px;
  border: 1px dashed rgba(var(--brand-rgb), 0.5);
  color: var(--muted);
  font-weight: 700;
}

/* ---- Hover/focus tooltip ---- */
.rx-slot[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px) scale(0.96);
  transform-origin: bottom center;
  margin-bottom: 2px;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(8, 8, 10, 0.96);
  border: 1px solid var(--line);
  color: var(--cream);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.rx-slot[data-tip]:hover::after,
.rx-slot[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -6px) scale(1);
}

@media (max-width: 480px) {
  .rx-grid { grid-template-columns: 1fr; }
  .rx-bar { gap: 10px; }
  .rx-search { flex-basis: 100%; order: 2; }
}


/* ===================== Parallax "flavor of the world" cards (from parallax-proto) ===================== */
  /* ---------------- staggered layout ---------------- */
  .flavor{max-width:min(1480px,94vw);margin:60px auto 0;display:flex;flex-direction:column;gap:180px}
  .flavor img{max-width:none}   /* opt out of the site-wide `img{max-width:100%}` reset (it zeroed the skeleton + shrank the cave front) */
  .fcard{--ch:380px;position:relative;width:min(560px,94%);height:var(--ch);border-radius:var(--radius);
         outline:none;cursor:pointer}
  .fcard:nth-child(odd){align-self:flex-start}
  .fcard:nth-child(even){align-self:flex-end}

  /* scene window (parallax layers clipped here) */
  .scene{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
         background:#070709;box-shadow:0 26px 60px -24px rgba(0,0,0,.8)}
  .lyr{position:absolute;inset:-7%;will-change:transform}
  .lyr img{image-rendering:pixelated;position:absolute;display:block}
  .fg{position:absolute;inset:-13% -11%;will-change:transform;pointer-events:none;z-index:3}

  /* hover scrim + text */
  .scrim{position:absolute;inset:0;border-radius:var(--radius);z-index:4;opacity:0;transition:opacity .35s ease;pointer-events:none;
         background:linear-gradient(180deg, rgba(6,7,11,.34), rgba(6,7,11,.82))}
  .text-clip{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius);z-index:6;pointer-events:none}  /* clips the sliding text to the card so it never shows below it */
  .text{position:absolute;left:0;right:0;top:0;padding:22px;pointer-events:none;
        transform:translateY(calc(var(--ch) - 96px));transition:transform .45s cubic-bezier(.2,.85,.2,1)}
  .text h3{font-size:20px;letter-spacing:.03em;text-transform:uppercase;font-weight:800;margin:0;
           text-shadow:0 2px 12px rgba(0,0,0,.7)}
  .text h3::before{content:"";display:inline-block;width:16px;height:2px;background:var(--brand);vertical-align:middle;margin-right:9px}
  .text p{margin:10px 0 0 25px;color:#cdc9bf;font-size:13px;line-height:1.55;max-width:34ch;
          opacity:0;transform:translateY(8px);transition:opacity .3s ease .06s, transform .35s ease .06s}
  .fcard:hover .scrim,.fcard:focus-within .scrim,.fcard.is-hover .scrim{opacity:1}
  .fcard:hover .text,.fcard:focus-within .text,.fcard.is-hover .text{transform:translateY(0)}
  .fcard:hover .text p,.fcard:focus-within .text p,.fcard.is-hover .text p{opacity:1;transform:none}

  /* ---------------- Survival scene (slowest → fastest) ---------------- */
  /* L1 cave bg + torch GLOW (behind) + torch — all one layer so the glow tracks the torch */
  .sv-bg{background:radial-gradient(120% 100% at 42% 120%, #16131a 0%, #0a0a0e 55%, #060608 100%)}
  .sv-torchglow{position:absolute;left:46%;top:21%;width:160px;height:160px;border-radius:50%;
                background:radial-gradient(circle, rgba(255,170,70,.55), rgba(255,140,40,.13) 48%, transparent 70%);
                mix-blend-mode:screen;animation:flick 2.6s ease-in-out infinite}
  @keyframes flick{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
  .sv-torch{position:absolute;left:54%;top:30%;width:26px}
  /* L2 skeleton */
  .skel{position:absolute;left:9%;bottom:20%;width:64px;opacity:.95;filter:drop-shadow(0 0 6px rgba(0,0,0,.8))}
  /* L3 cave entrance (stone mouth, breaks the border) */
  .sv-entrance .edge{position:absolute;background-repeat:repeat;background-size:30px;image-rendering:pixelated;filter:brightness(.6) saturate(.85)}
  .sv-entrance .top{left:0;right:0;top:0;height:26%;background-image:url(../img/items/vanilla/cobblestone.png);
              clip-path:polygon(0 0,100% 0,100% 50%,84% 76%,67% 54%,50% 84%,33% 52%,16% 78%,0 50%)}
  .sv-entrance .floor{left:0;right:0;bottom:0;height:22%;background-image:url(../img/items/vanilla/stone.png);
                clip-path:polygon(0 50%,14% 28%,30% 50%,48% 24%,66% 50%,82% 30%,100% 50%,100% 100%,0 100%)}
  .sv-entrance .lcol{left:0;top:0;bottom:0;width:13%;background-image:url(../img/items/vanilla/mossy_cobblestone.png);
               clip-path:polygon(0 0,100% 0,60% 20%,100% 44%,56% 68%,100% 86%,0 100%)}
  .sv-entrance .rcol{right:0;top:0;bottom:0;width:13%;background-image:url(../img/items/vanilla/cobblestone.png);
               clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 84%,0 60%,42% 40%,0 18%)}
  .sv-entrance .rock{position:absolute;image-rendering:pixelated;filter:brightness(.55) drop-shadow(0 5px 7px rgba(0,0,0,.7))}
  /* L4 foliage (dripstone, grass, vines — breaks the border) */
  .sv-foliage .drip{position:absolute;top:-8px;image-rendering:pixelated;filter:brightness(.8) drop-shadow(0 3px 3px rgba(0,0,0,.6))}
  .sv-foliage .grass{position:absolute;bottom:2%;image-rendering:pixelated;filter:brightness(.95) drop-shadow(0 3px 3px rgba(0,0,0,.5))}
  .sv-foliage .vine{position:absolute;width:18px;image-rendering:pixelated;filter:brightness(.7)}
  /* L5 character */
  .sv-player{position:absolute;right:9%;bottom:17%;width:104px;
             filter:drop-shadow(-5px 0 0 rgba(224,150,60,.22)) drop-shadow(0 10px 12px rgba(0,0,0,.6))}
  /* L6 arrow (fastest) */
  .sv-arrow{position:absolute;left:31%;top:45%;width:54px;transform:rotate(6deg);
            filter:drop-shadow(0 0 4px rgba(255,200,120,.5))}

  /* ---------------- Survival as a real CSS 3D room (interior mapping) ----------------
     A 5-faced box you peer into: faces converge in perspective, near things parallax
     more than far. Driven by shifting perspective-origin with the cursor (magnetic). */
  .room-scene{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
              background:#050507;box-shadow:0 26px 60px -24px rgba(0,0,0,.8);
              perspective:430px;perspective-origin:50% 50%}
  .room{position:absolute;inset:0;transform-style:preserve-3d}
  .face{position:absolute;top:50%;left:50%;background-repeat:repeat;background-size:34px;image-rendering:pixelated;backface-visibility:hidden}
  .face::after{content:"";position:absolute;inset:0}            /* depth-fade overlay */
  /* box: W560 H380 D440 (halves 280/190, depth-centre -220) */
  .face.back{width:560px;height:380px;margin:-190px 0 0 -280px;transform:translateZ(-440px);
             background:radial-gradient(120% 100% at 50% 58%, #16121c, #07070a 70%)}
  .face.left{width:440px;height:380px;margin:-190px 0 0 -220px;transform:translateX(-280px) translateZ(-220px) rotateY(90deg);
             background-image:url(../img/items/vanilla/mossy_cobblestone.png)}
  .face.right{width:440px;height:380px;margin:-190px 0 0 -220px;transform:translateX(280px) translateZ(-220px) rotateY(-90deg);
              background-image:url(../img/items/vanilla/cobblestone.png)}
  .face.floor{width:560px;height:440px;margin:-220px 0 0 -280px;transform:translateY(190px) translateZ(-220px) rotateX(90deg);
              background-image:url(../img/items/vanilla/stone.png)}
  .face.ceil{width:560px;height:440px;margin:-220px 0 0 -280px;transform:translateY(-190px) translateZ(-220px) rotateX(-90deg);
             background-image:url(../img/items/vanilla/cobblestone.png)}
  .face.left::after{background:linear-gradient(to left, #000 80%, transparent 100%)}    /* darken toward the entrance */
  .face.right::after{background:linear-gradient(to right, #000 80%, transparent 100%)}
  .face.floor::after{background:linear-gradient(to bottom, #000 80%, transparent 100%)}
  .face.ceil::after{background:linear-gradient(to top, #000 80%, transparent 100%)}
  .face.back::after{background:none}   /* the lit-stone circle (.r-walllit) provides the back-wall shading */
  /* torch glow (behind) + torch on the back wall, deep in the cave */
  /* back wall lit by the torch: a CIRCLE of stone around the glow that fades to orange-tinted
     darkness (glow radius + ~50%). The radial overlay sits on top of the cobblestone tile. */
  .r-walllit{position:absolute;inset:0;background:url(../img/items/vanilla/stone.png) repeat;background-size:30px;
             image-rendering:pixelated;filter:brightness(.82)}
  /* torch reveal mask: sits OVER the wall AND the ores, so the ores fade to dark away from the torch */
  .r-walldark{position:absolute;inset:0;pointer-events:none;
              background:radial-gradient(circle at 50% 38%,
                rgba(255,150,60,.16) 0%, rgba(255,150,60,0) 15%,
                rgba(30,16,6,.86) 26%, rgba(0,0,0,1) 37%)}
  /* ores embedded in the lit back wall, beside the torch */
  .r-ore{position:absolute;image-rendering:pixelated;filter:brightness(1.05) drop-shadow(0 0 5px rgba(255,170,70,.45))}
  .r-torch{position:absolute;left:45%;top:36%;width:82px;margin-left:-11px}
  .r-glow{position:absolute;left:50%;top:28%;width:150px;height:150px;margin-left:-75px;border-radius:50%;
          background:radial-gradient(circle, rgba(255,170,70,.5), transparent 64%);mix-blend-mode:screen;animation:flick 2.6s ease-in-out infinite}
  /* skeleton billboard, just behind the slim opening (near the front of the cave) */
  .sprite{position:absolute;top:50%;left:50%}
  .s-skel{top:78%;transform:translateZ(-46px)}  /* dropped down to stand on the cave floor */
  .r-skel{position:absolute;left:0;top:0;width:281px;transform:translate(-70%,-50%) scaleX(-1);filter:drop-shadow(0 0 7px #000)}  /* 1.5×, flipped on the vertical axis */
  /* circular blob shadow on the floor under the skeleton (same depth, so it parallaxes with it) */
  .s-shadow{top:86%;left:42%;width:170px;height:38px;margin:-19px 0 0 -85px;transform:translateZ(-46px);
            background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);border-radius:50%;pointer-events:none}
  /* foreground cave rock with a slim, irregular opening cut by the jamb shapes */
  .cave-rock{position:absolute;inset:0;z-index:3;border-radius:var(--radius);overflow:hidden;pointer-events:none}
  .jamb{position:absolute;background-repeat:repeat;background-size:30px;image-rendering:pixelated;
        filter:brightness(.58) saturate(.8);background-image:url(../img/items/vanilla/cobblestone.png)}
  /* blocky, right-angled (voxel) opening edges */
  .jamb.jl{left:0;top:0;bottom:0;width:42%;clip-path:polygon(0 0,100% 0,100% 20%,80% 20%,80% 40%,94% 40%,94% 62%,80% 62%,80% 82%,96% 82%,96% 100%,0 100%)}
  .jamb.jr{right:0;top:0;bottom:0;width:42%;background-image:url(../img/items/vanilla/mossy_cobblestone.png);
           clip-path:polygon(100% 0,0 0,0 20%,20% 20%,20% 40%,6% 40%,6% 62%,20% 62%,20% 82%,4% 82%,4% 100%,100% 100%)}
  .jamb.jt{left:0;right:0;top:0;height:22%;clip-path:polygon(0 0,100% 0,100% 100%,72% 100%,72% 58%,28% 58%,28% 100%,0 100%)}
  .jamb.jb{left:0;right:0;bottom:0;height:15%;clip-path:polygon(0 100%,100% 100%,100% 42%,70% 42%,70% 74%,30% 74%,30% 42%,0 42%)}
  .cave-rock::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 40px 8px rgba(0,0,0,.72)}  /* shade the opening edges */
  /* real painted cave front (front.png) — static foreground frame; its dark, semi-transparent
     opening lets the cubemap room behind show through (skeleton + torch glow) with parallax */
  /* static clip wraps the drifting front so it never exposes the card edge / overflows the border */
  .cave-front-clip{position:absolute;inset:0;z-index:3;border-radius:var(--radius);overflow:hidden;pointer-events:none}
  .cave-front{position:absolute;top:-2%;left:-2%;width:104%;height:104%;object-fit:cover;object-position:center 44%;
              image-rendering:pixelated;will-change:transform}
  /* the two flat parallax sprite layers in front: character + arrow */
  .sprite-lyr{position:absolute;inset:0;z-index:5;will-change:transform;pointer-events:none}  /* above the hover scrim */
  /* character and arrow each on their OWN parallax layer; both can spill off-frame */
  /* characters sit OUTSIDE their card with a fixed 5px gap (anchored to the card edge,
     so they never enter the card at any resolution). Stygian is the exception (below). */
  .svp-char .charw{left:calc(100% + 5px);right:auto;bottom:-80px;width:290px}  /* right of the Survival card */
  .svp-char .ch-aussy{filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
  /* auto-centring wrapper + light-blue circular ground shadow for the aussy characters */
  .charw{position:absolute}
  .charw>img{display:block;width:100%;position:relative}   /* positioned so it paints over the shadow */
  .char-shadow{position:absolute;left:50%;bottom:6%;width:60%;height:30px;transform:translateX(-50%);
               border-radius:50%;background:radial-gradient(ellipse at center, rgba(110,185,255,.6), transparent 70%);
               filter:blur(3px)}
  .svp-arrow .ch-arrow{position:absolute;right:-25px;top:33%;width:66px;transform:rotate(36deg);image-rendering:pixelated;
                       filter:drop-shadow(0 0 4px rgba(255,200,120,.5)) drop-shadow(0 5px 6px rgba(0,0,0,.5))}

  /* ---------------- open perspective scenes (cards 2-4) ----------------
     Same CSS-3D camera as the cave, but OPEN: no enclosing walls. The scene is a
     set of billboards placed at different translateZ depths over a static sky
     backdrop. Near billboards parallax more than far ones (real perspective).
     Driven by the same data-parallax3d engine (shifts perspective-origin).
     These are placeholders — swap for real art later. */
  .open .room-scene{perspective:640px}                 /* gentler than the cave (no walls to converge) */
  .open .room{position:absolute;inset:0;transform-style:preserve-3d}
  .bb{position:absolute;transform-style:preserve-3d}   /* a billboard: placed + pushed back via translateZ */
  .bb>img{display:block;width:100%;image-rendering:pixelated;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
  .fig{background:#0d0d13;filter:drop-shadow(0 6px 9px rgba(0,0,0,.55));   /* blocky placeholder player */
       clip-path:polygon(36% 0,64% 0,64% 22%,100% 30%,100% 46%,64% 40%,64% 60%,58% 100%,42% 100%,36% 60%,36% 40%,0 46%,0 30%,36% 22%)}
  .ph-tag{position:absolute;top:12px;right:14px;z-index:7;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7a7a82}

  /* semi-vanilla — sunset overworld */
  .vanilla .room-scene{background:linear-gradient(180deg,#0c1830 0%,#27374f 36%,#7a4b3a 74%,#caa05a 100%)}
  .v-sun{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,214,128,.95),rgba(255,170,80,.4) 45%,transparent 70%)}
  .v-hills{position:absolute;inset:0;background:#1b291b;clip-path:polygon(0 58%,16% 36%,34% 54%,52% 28%,70% 50%,86% 34%,100% 54%,100% 100%,0 100%)}
  .v-house{position:absolute;inset:0;background:#5a4632;clip-path:polygon(0 38%,50% 0,100% 38%,100% 100%,0 100%)}
  /* card 2 — turntable spritesheet scrubber: a square cell of the sheet, cursor scrubs which frame.
     JS sets background-size + background-position; the webp has alpha so it composites over the sky. */
  .vanilla .scene{border:none}
  /* sky as a slow parallax layer (oversized so its drift never exposes the card edge) */
  .sky-lyr{position:absolute;inset:-6%;background:url(../img/parallax/second/sky.webp) center / cover no-repeat;will-change:transform}
  .island-turntable{position:absolute;left:70%;top:75%;width:760px;height:760px;z-index:5;pointer-events:none;
                    transform:translate(-50%,-50%);   /* engine overwrites with parallax + zoom each frame */
                    background-image:url(../img/parallax/second/turntable_36f_6x6_512.webp);
                    background-repeat:no-repeat;will-change:transform,background-position}
  /* shotgun character standing to the LEFT of the card, outside its bounds (parallax layer) */
  .svp-shotgun .charw{right:calc(100% + 5px);left:auto;bottom:-20px;width:240px}  /* left of the Semi-Vanilla card */
  .svp-shotgun img{filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))}
  /* talking character on card 4, standing off the card's left edge (parallax layer) */
  .svp-talking .charw{right:calc(100% + 5px);left:auto;bottom:-25px;width:270px}  /* left of the Plasmo card */
  .svp-talking img{filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))}
  /* Stygian on the RIGHT edge of card 4 (spills off the right) */
  .svp-stygian .charw{left:78%;bottom:-05px;width:270px}
  .svp-stygian img{filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))}
  .svp-stygian .char-shadow{bottom:-10px;transform:translateX(calc(-50% + 20px));}   /* drop to the feet + nudge 10px right */
  /* mcmmo — skill arena */
  .mcmmo .room-scene{background:radial-gradient(120% 100% at 50% 55%,#15171f,#08080b 72%)}
  .m-ring{position:absolute;inset:0;border-radius:50%;border:3px dashed rgba(var(--brand-rgb),.5);box-shadow:inset 0 0 30px rgba(var(--brand-rgb),.18)}
  /* plasmo — proximity-voice: logo icon + dotted ring + ripples spreading out */
  .plasmo .scene{background:radial-gradient(120% 100% at 50% 42%,#121d3c,#0a0c18 70%);border:none}
  /* the Plasmo Voice logo, circle-masked so its blue background is clipped away */
  .p-icon{position:absolute;inset:0;   /* blue bg already cropped out in the PNG (clip-path breaks in 3D) */
          background:url(../img/parallax/fourth/plasmovoice-circle.png) center / contain no-repeat;
          filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));transition:filter .35s ease}
  /* dim the logo only while the description is sliding over it, so the text stays readable */
  .plasmo:hover .p-icon,.plasmo:focus-within .p-icon,.plasmo.is-hover .p-icon{
          filter:drop-shadow(0 8px 16px rgba(0,0,0,.5)) brightness(.36)}
  /* dotted ring (moved from mcMMO), slowly rotating */
  .p-dring{position:absolute;inset:0;border:3px dashed rgba(var(--brand-rgb),.5);border-radius:50%;animation:pspin 26s linear infinite}
  /* concentric ripples expanding + fading from the centre */
  .p-ripple{position:absolute;inset:0;border:2px solid rgba(var(--brand-rgb),.6);border-radius:50%;animation:pripple 3.6s ease-out infinite}
  .p-ripple:nth-of-type(2){animation-delay:1.2s}
  .p-ripple:nth-of-type(3){animation-delay:2.4s}
  @keyframes pspin{to{transform:rotate(360deg)}}
  @keyframes pripple{0%{transform:scale(.5);opacity:.7}70%{opacity:.12}100%{transform:scale(2.8);opacity:0}}

  /* Laptop → 1080p: keep the interactive parallax but reel the cards + their off-card art
     inward so nothing spills off-screen. Values scale with the viewport; >1920 keeps the
     original wide spread. (<1280 falls through to the full-mobile static block below.) */
  @media (min-width:1366px) and (max-width:1920px){
    .flavor{max-width:min(1160px,88vw);gap:130px}
    .island-turntable{left:56%;width:min(620px,40vw);height:min(620px,40vw)}
    /* characters stay 5px outside their card (base rule); here we only shrink them a
       little so the off-card ones don't run off the viewport on smaller laptops */
    .svp-char .charw{width:clamp(210px,18vw,290px)}
    .svp-shotgun .charw{width:clamp(170px,14vw,240px)}
    .svp-talking .charw{width:clamp(160px,13vw,270px)}
    .svp-stygian .charw{left:70%;width:clamp(180px,14vw,270px)}   /* exception: Stygian may enter the card */
  }

  @media(max-width:1365px){
    .flavor{gap:18px}
    /* Touch can't drive the parallax — drop the interactive scenes and show each card
       as a simple titled block. (Hiding .island-turntable also avoids loading its 1.3 MB sheet.) */
    .fcard{width:100%;align-self:stretch !important;height:auto;cursor:default;
           background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
           box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
    .fcard .scene,.fcard .cave-front-clip,.fcard .sprite-lyr,.fcard .island-turntable,.fcard .scrim{display:none !important}
    .text-clip{position:static;overflow:visible}
    .text{position:static;transform:none;padding:20px}
    .text p{opacity:1;transform:none;margin-left:25px;max-width:none}
  }


/* ===================== Game rules page ===================== */
.rules-band .wrap { max-width: 780px; }
.rules-body { margin-top: 8px; }
.rules-list { list-style: none; counter-reset: rule; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rules-list li { counter-increment: rule; position: relative; padding: 16px 18px 16px 58px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); line-height: 1.55; }
.rules-list li::before { content: counter(rule); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 800; font-size: .86rem; }
.rules-h { margin: 36px 0 14px; font-size: 1.18rem; font-weight: 800; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; }
.rules-h:first-child { margin-top: 6px; }
.rules-h::before { content: ""; width: 18px; height: 2px; background: var(--brand); flex: 0 0 auto; }
.rules-sub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.rules-sub li { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .86rem; padding: 9px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--cream); word-break: break-word; }
.rules-note { margin: 8px 0 0; color: var(--muted); line-height: 1.65; max-width: 62ch; }


/* ===================== Accessibility dock (fixed bottom-left) ===================== */
.a11y-dock { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.a11y-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(18, 18, 21, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cream); font-family: var(--mono); font-size: 13px; line-height: 1;
  cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.a11y-btn:hover { border-color: rgba(var(--brand-rgb), 0.6); color: #fff; background: rgba(24, 24, 28, 0.96); }
.a11y-btn[aria-pressed="true"] { border-color: rgba(var(--brand-rgb), 0.75); color: #fff; }
.a11y-btn .a11y-ic { width: 16px; height: 16px; flex: 0 0 auto; }
#motion-toggle .ic-play { display: none; }
body.motion-paused #motion-toggle .ic-pause { display: none; }
body.motion-paused #motion-toggle .ic-play { display: inline; }
/* Freeze CSS keyframe animations when the visitor pauses motion (JS also rests the parallax). */
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation-play-state: paused !important; }
@media (max-width: 560px) {
  .a11y-dock { left: 10px; bottom: 10px; gap: 6px; }
  .a11y-btn { padding: 8px 12px; font-size: 12px; }
}