/* =========================================================
   DikkeSMP — "Van hemel naar Nether"
   De pagina reist van een sterrennacht (Overworld) via
   enchant-magie naar de gloeiende Nether in de footer.
   Kleuren komen rechtstreeks uit het logo & de banner.
   ========================================================= */

/* ---------- Lettertypen (zelf gehost, geen Google) ---------- */
@font-face { font-family: "Unbounded"; src: url("../assets/fonts/unbounded.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../assets/fonts/onest.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("../assets/fonts/pixelify-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
:root {
  /* Nacht (achtergronden) */
  --night-950: #070b1f;
  --night-900: #0b1230;
  --night-850: #0f1840;
  --night-800: #15204f;
  --night-700: #1f2d68;
  --line: rgba(120, 170, 255, .14);
  --line-strong: rgba(120, 190, 255, .28);

  /* Logo-kleuren */
  --diamond: #4fe3f5;       /* "SMP", zwaard, pikhouweel */
  --diamond-hi: #a8f6ff;
  --diamond-lo: #1a9bb8;
  --smp-blue: #2f7bff;      /* schaduw van SMP-letters */
  --crown: #ffc93c;         /* kroon */
  --crown-lo: #c98a12;
  --portal: #9b5cff;        /* nether portal */
  --portal-lo: #5b2bb8;
  --lava: #ff7a1a;
  --grass: #6fd63d;
  --dirt: #8a5a2b;
  --stone: #eef1f8;         /* "DIKKE"-letters */

  /* Tekst */
  --text: #eef1f8;
  --muted: #a9b4da;
  --faint: #7885b3;

  /* Minecraft-UI */
  --mc-tooltip-bg: #100010;
  --mc-green: #55ff55;
  --mc-aqua: #55ffff;
  --mc-gold: #ffaa00;
  --mc-pink: #ff55ff;
  --mc-gray: #aaaaaa;
  --xp: #80ff20;

  /* Type */
  --f-display: "Unbounded", system-ui, sans-serif;
  --f-body: "Onest", system-ui, sans-serif;
  --f-pixel: "Pixelify Sans", ui-monospace, monospace;

  /* Maat */
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --n: 6px;                 /* pixel-notch op hoeken */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--night-950);
  /* De reis: nacht → dieper blauw → enchant-paars → nether */
  background-image: linear-gradient(180deg,
    var(--night-950) 0%,
    var(--night-900) 30%,
    #0e1238 55%,
    #150d33 78%,
    #1c0b24 92%,
    #220a14 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.1; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
code { font-family: var(--f-pixel); color: var(--diamond); background: rgba(79,227,245,.1); padding: .05em .35em; }
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--crown); outline-offset: 3px; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--crown); color: var(--night-950); padding: 10px 16px; font-weight: 700;
  transition: top .2s;
}
.skip:focus { top: 12px; }

/* Pixel-notch: blokkige hoeken i.p.v. ronde */
.notch, .btn, .ip-slot, .world, .toast, .slot, .tabs, .tabs button, .discord, .faq details, .status__inner {
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}

/* Pixel-icoontjes (gevuld door JS) */
.px-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.px-icon svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }

/* ---------- Buttons (Minecraft-bevel, maar in diamant) ---------- */
.btn {
  --bg: var(--diamond); --hi: var(--diamond-hi); --lo: var(--diamond-lo); --fg: #04202a;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 1.4em;
  font: 700 .95rem/1 var(--f-display); letter-spacing: 0;
  color: var(--fg); background: var(--bg); border: 0; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 3px 0 var(--hi), inset 0 -5px 0 var(--lo);
  transition: transform .15s var(--ease), filter .15s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 5px 0 var(--lo), inset 0 -2px 0 var(--hi); }
.btn--sm { min-height: 44px; padding: 0 1.1em; font-size: .85rem; }
.btn--block { width: 100%; }
.btn--gold { --bg: var(--crown); --hi: #fff0b0; --lo: var(--crown-lo); --fg: #2a1800; }
.btn--portal { --bg: var(--portal); --hi: #d2b6ff; --lo: var(--portal-lo); --fg: #fff; }
.btn--ghost {
  --bg: rgba(255,255,255,.04); --hi: rgba(255,255,255,.12); --lo: rgba(0,0,0,.35); --fg: var(--text);
  box-shadow: inset 0 0 0 2px var(--line-strong), inset 0 -5px 0 var(--lo);
}
.btn--ghost:hover { --bg: rgba(79,227,245,.1); }

/* ---------- Header ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 11, 31, .72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 900 1.15rem var(--f-display); letter-spacing: -.02em; }
.brand img { filter: drop-shadow(0 0 10px rgba(79,227,245,.35)); }
.brand b { color: var(--diamond); font-weight: 900; }

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__links a {
  position: relative; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--muted);
  transition: color .15s;
}
/* Hotbar-selectie als hover/actief */
.nav__links a::after {
  content: ""; position: absolute; inset: 4px 2px;
  border: 2px solid var(--stone); opacity: 0; transform: scale(.9);
  transition: opacity .15s, transform .15s var(--ease);
  pointer-events: none;
}
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--text); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { opacity: .9; transform: none; }
.nav__links .nav__store { color: var(--crown); font-weight: 700; }
.nav__links .nav__store::after { border-color: var(--crown); }

.nav__toggle { display: none; }

@media (max-width: 900px) {
  .nav__cta { margin-left: auto; }
  .nav__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 48px; height: 48px; padding: 0 12px; background: rgba(255,255,255,.05);
    border: 2px solid var(--line-strong); cursor: pointer;
  }
  .nav__toggle span { height: 3px; background: var(--text); transition: transform .2s, opacity .2s; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .nav__links {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 12px var(--gutter) 20px;
    background: rgba(7, 11, 31, .97); border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s var(--ease), visibility .2s;
  }
  .nav__links.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__links a { padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav__links a::after { display: none; }
}
@media (max-width: 420px) { .brand span { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px) 0 clamp(80px, 10vw, 120px); }
.hero__sky { position: absolute; inset: 0; pointer-events: none; }
.stars { position: absolute; inset: -50% 0 0; background-repeat: repeat; }
.stars--a {
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, #cfe9ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 200px 160px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 200px, #a8f6ff 50%, transparent 51%);
  background-size: 260px 240px; opacity: .55;
  animation: twinkle 5s ease-in-out infinite alternate;
}
.stars--b {
  background-image:
    radial-gradient(2px 2px at 90px 40px, var(--diamond-hi) 50%, transparent 51%),
    radial-gradient(1px 1px at 300px 120px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 180px 260px, #fff 50%, transparent 51%);
  background-size: 380px 320px; opacity: .35;
  animation: twinkle 7s ease-in-out infinite alternate-reverse;
}
.aurora {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 50% at 78% 40%, rgba(47,123,255,.35), transparent 70%),
    radial-gradient(30% 40% at 85% 55%, rgba(79,227,245,.22), transparent 70%),
    radial-gradient(35% 45% at 10% 90%, rgba(155,92,255,.18), transparent 70%);
}
@keyframes twinkle { from { opacity: .25; } to { opacity: .7; } }

.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }

.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 .95rem var(--f-pixel); color: var(--grass); letter-spacing: .02em;
  padding: 6px 12px; background: rgba(111,214,61,.1); border: 2px solid rgba(111,214,61,.35);
}
.tag--soon { color: var(--crown); background: rgba(255,201,60,.1); border-color: rgba(255,201,60,.4); font-variant-numeric: tabular-nums; }
.tag--soon .dot { background: var(--crown); box-shadow: 0 0 10px var(--crown); }
.dot { width: 8px; height: 8px; background: var(--grass); box-shadow: 0 0 10px var(--grass); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

.hero__title {
  margin: 22px 0 20px;
  font-size: clamp(2.6rem, 6.4vw, 5.2rem); font-weight: 900; line-height: .98; letter-spacing: -.035em;
}
.hero__title span { display: block; }
.w-stone { color: var(--stone); text-shadow: 0 4px 0 #6b7390, 0 8px 24px rgba(0,0,0,.4); }
.w-diamond { color: var(--diamond); text-shadow: 0 4px 0 var(--smp-blue), 0 0 40px rgba(79,227,245,.35); }
.w-gold {
  background: linear-gradient(180deg, #ffe07a 0%, var(--crown) 45%, var(--lava) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #8a3a05);
}
.hero__lead { max-width: 34em; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: stretch; }

/* Serveradres als inventory-slot */
.ip-slot {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 10px 8px 8px;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(31,45,104,.9), rgba(15,24,64,.95));
  border: 0;
  box-shadow: inset 0 0 0 2px var(--line-strong), inset 0 -4px 0 rgba(0,0,0,.35);
  transition: box-shadow .2s, transform .15s var(--ease);
}
.ip-slot:hover { box-shadow: inset 0 0 0 2px var(--diamond), inset 0 -4px 0 rgba(0,0,0,.35), 0 0 30px rgba(79,227,245,.25); transform: translateY(-2px); }
.ip-slot__item {
  width: 48px; height: 48px; padding: 8px;
  background: #1a2350; box-shadow: inset 2px 2px 0 #0a0f2a, inset -2px -2px 0 #34427e;
}
.ip-slot__text { display: flex; flex-direction: column; line-height: 1.2; }
.ip-slot__text small { font: 400 .8rem var(--f-pixel); color: var(--faint); letter-spacing: .02em; }
.ip-slot__text strong { font: 700 1.15rem var(--f-display); letter-spacing: -.01em; }
.ip-slot__copy {
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: 8px;
  color: var(--diamond); background: rgba(79,227,245,.1);
}

.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 26px 0 0; font-size: .9rem; color: var(--faint); }
.hero__meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta li::before { content: ""; width: 6px; height: 6px; background: var(--diamond); }

/* Logo + runencirkel */
.hero__art { position: relative; aspect-ratio: 1; width: min(100%, 520px); justify-self: center; }
.rune-ring { position: absolute; inset: -4%; width: 108%; height: 108%; animation: spin 60s linear infinite; }
.rr-line { fill: none; stroke: rgba(79,227,245,.35); stroke-width: 1.5; stroke-dasharray: 2 6; }
.rr-line--thin { stroke: rgba(79,227,245,.18); stroke-dasharray: none; }
.rr-text { fill: rgba(168,246,255,.7); font-size: 17px; letter-spacing: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__logo {
  position: relative; z-index: 2; width: 82%; margin: 9% auto 0;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 0 50px rgba(47,123,255,.35));
  animation: float 6s ease-in-out infinite;
}
.hero__island {
  position: absolute; left: 22%; right: 22%; bottom: 2%; height: 18px; z-index: 1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%);
  animation: shadow 6s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-14px); } }
@keyframes shadow { 50% { transform: scaleX(.85); opacity: .6; } }

/* Zwevende enchant-tekens (enchanting table) */
.glyphs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.glyph {
  position: absolute; font-size: 18px; color: var(--diamond-hi);
  text-shadow: 0 0 8px var(--diamond);
  animation: glyph 4.5s ease-in forwards;
}
@keyframes glyph {
  0% { opacity: 0; transform: translate(0, 0) scale(.8); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); }
}

/* Gras-rand onderaan hero */
.grass-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  background:
    linear-gradient(90deg, var(--grass) 0 16px, #58b52c 16px 32px, #7fe34a 32px 48px, #58b52c 48px 64px) 0 0 / 64px 8px repeat-x,
    linear-gradient(90deg, #6b421d 0 16px, var(--dirt) 16px 32px, #6b421d 32px 48px, #9b6834 48px 64px) 0 8px / 64px 16px repeat-x;
  opacity: .9;
  -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__art { order: -1; width: min(78vw, 360px); }
}

/* ---------- Status / XP-bar ---------- */
.status { position: relative; margin-top: -8px; z-index: 5; }
.status__inner {
  --n: 8px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center;
  padding: 22px 28px;
  background: linear-gradient(180deg, rgba(21,32,79,.95), rgba(11,18,48,.95));
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.status__state { display: flex; align-items: center; gap: 12px; }
.status__state small, .status__facts dt, .xp__label { font: 400 .8rem var(--f-pixel); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.status__state strong { display: block; font: 700 1.05rem var(--f-display); }
.status__dot { width: 12px; height: 12px; background: var(--faint); }
.status__dot[data-state="online"] { background: var(--grass); box-shadow: 0 0 12px var(--grass); }
.status__dot[data-state="offline"] { background: #ff5566; box-shadow: 0 0 12px #ff5566; }
.status__dot[data-state="maintenance"] { background: var(--crown); box-shadow: 0 0 12px var(--crown); animation: blink 2s steps(2) infinite; }
.status__state:has([data-state="maintenance"]) strong { color: var(--crown); }
.status__dot[data-state="loading"] { animation: blink 1s steps(2) infinite; }

.xp { position: relative; display: grid; justify-items: center; gap: 6px; padding-top: 4px; }
.xp__level {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font: 600 1.6rem var(--f-pixel); color: var(--xp);
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
}
.xp__bar {
  position: relative; width: 100%; max-width: 520px; height: 14px;
  background: #1b1b1b; box-shadow: inset 0 0 0 2px #000;
}
.xp__fill {
  position: absolute; inset: 2px auto 2px 2px; width: 0;
  background: linear-gradient(180deg, #b6ff6a, var(--xp) 50%, #4fb80d);
  transition: width 1.2s var(--ease);
}
/* Segmentjes net als de echte XP-bar */
.xp__bar::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 18 - 2px), #000 calc(100% / 18 - 2px) calc(100% / 18));
}
.status__facts { display: flex; gap: 28px; margin: 0; }
.status__facts dd { margin: 0; font: 700 1rem var(--f-display); }

@media (max-width: 900px) {
  .status__inner { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .xp { grid-column: 1 / -1; grid-row: 2; }
  .status__facts { justify-content: flex-end; }
}
@media (max-width: 520px) {
  .status__inner { grid-template-columns: 1fr; padding: 20px; }
  .status__facts { justify-content: flex-start; }
  .xp { grid-row: auto; margin-top: 18px; }
}

/* ---------- Secties ---------- */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section__head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 56px); }
.section__head h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; margin: 10px 0 14px; }
.section__head p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; }
.section__head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.eyebrow { font: 600 1rem var(--f-pixel); color: var(--diamond); letter-spacing: .04em; }
.eyebrow--gold { color: var(--crown); }
.eyebrow--purple { color: #c7a2ff; }

.link-arrow { font-weight: 600; color: var(--diamond); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Werelden ---------- */
.worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.world {
  --n: 8px; --accent: var(--grass);
  position: relative; display: flex; flex-direction: column; min-height: 460px;
  background: var(--night-850);
  box-shadow: inset 0 0 0 2px var(--line);
  transition: translate .3s var(--ease), box-shadow .3s;
}
.world:hover { translate: 0 -6px; }
/* Rand als overlay, zodat hij ook over de afbeelding loopt */
.world::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--line-strong);
  transition: box-shadow .3s;
}
.world:hover::after { box-shadow: inset 0 0 0 2px var(--accent); }
.world__img { position: relative; height: 260px; overflow: hidden; }
.world__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.world__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--night-850)); }
.world--build   .world__img img { object-position: 50% 45%; }
.world--explore .world__img img { object-position: 60% 40%; }
.world--conquer .world__img img { object-position: 50% 70%; }
.world:hover .world__img img { transform: scale(1.06); }
.world--explore { --accent: var(--diamond); }
.world--conquer { --accent: var(--lava); }

.world__body { position: relative; padding: 4px 28px 30px; margin-top: -30px; }
.world__num { font: 600 .95rem var(--f-pixel); color: var(--accent); }
.world h3 { display: flex; align-items: center; gap: 12px; font-size: 1.8rem; font-weight: 900; margin: 6px 0 12px; }
.world h3 .px-icon { width: 32px; height: 32px; }
.world p { color: var(--muted); }
.world::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 2;
  background: var(--accent); box-shadow: 0 0 20px var(--accent);
}

@media (max-width: 900px) {
  .worlds { grid-template-columns: 1fr; }
  .world { min-height: 0; }
  .world__img { height: 200px; }
}

/* ---------- Joinen (crafting) ---------- */
.section--join { position: relative; }
.section--join::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, rgba(47,123,255,.12), transparent 70%);
}
.join { position: relative; }
.tabs { --n: 4px; display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px var(--line); }
.tabs button {
  --n: 3px; min-height: 44px; padding: 0 20px; border: 0; cursor: pointer;
  font: 600 .95rem var(--f-body); color: var(--muted); background: transparent;
  transition: background .15s, color .15s;
}
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--diamond); color: #04202a; box-shadow: inset 0 -3px 0 var(--diamond-lo); }

.recipe {
  --n: 10px;
  display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center;
  padding: clamp(20px, 4vw, 36px);
  background: linear-gradient(180deg, #232d5e, #182048);
  box-shadow: inset 0 0 0 2px var(--line-strong), inset 4px 4px 0 rgba(255,255,255,.05), inset -4px -4px 0 rgba(0,0,0,.25);
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}
.recipe[hidden] { display: none; }
.recipe__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.slot-step { display: flex; align-items: center; gap: 18px; }
.slot-step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; }
.slot-step p { color: var(--muted); }
.slot-step em { font-style: normal; color: var(--text); font-weight: 600; }

.slot {
  --n: 2px;
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px;
  background: #10173a;
  box-shadow: inset 3px 3px 0 #070b1f, inset -3px -3px 0 #3a4990;
}
.slot b { font: 600 1.5rem var(--f-pixel); color: var(--diamond); }
.slot .px-icon { width: 60%; height: 60%; }
.slot--big { width: 88px; height: 88px; }

.inline-ip {
  font: 600 .95rem var(--f-pixel); color: var(--diamond); cursor: pointer;
  background: rgba(79,227,245,.1); border: 1px dashed rgba(79,227,245,.5); padding: 2px 8px;
  min-height: 32px;
}
.inline-ip:hover { background: rgba(79,227,245,.2); }

.recipe__arrow {
  width: 64px; height: 40px;
  background: #3a4990;
  clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%);
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge { 50% { transform: translateX(6px); background: var(--diamond); } }
.recipe__result { display: grid; justify-items: center; gap: 10px; }
.recipe__result small { font: 600 .95rem var(--f-pixel); color: var(--grass); }

@media (max-width: 760px) {
  .recipe { grid-template-columns: 1fr; justify-items: start; }
  .recipe__arrow { transform: rotate(90deg); justify-self: center; animation: none; }
  .recipe__result { justify-self: center; }
}

/* ---------- Nieuws (advancement toasts) ---------- */
.toasts { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.toast {
  --n: 8px; --accent: var(--crown);
  display: flex; flex-direction: column; gap: 16px; padding: 22px;
  background: #1d1f33;
  background: linear-gradient(180deg, #1c2044, #141833);
  box-shadow: inset 0 0 0 2px #0a0d20, inset 0 0 0 4px #3c4580, inset 0 -6px 0 rgba(0,0,0,.3);
  transition: translate .3s var(--ease), rotate .3s var(--ease);
}
.toast:hover { translate: 0 -5px; rotate: -.4deg; }
.toast--feature { grid-row: span 2; }
.toast__img { --n: 4px; margin: -8px -8px 0; overflow: hidden; aspect-ratio: 16 / 9;
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% 100%, 0 100%); }
.toast__img img { width: 100%; height: 100%; object-fit: cover; }
.toast__head { display: flex; align-items: center; gap: 14px; }
.toast__head .slot { width: 52px; height: 52px; }
.toast__kind { display: block; font: 600 .9rem var(--f-pixel); color: var(--crown); letter-spacing: .02em; }
.toast__kind--green { color: var(--mc-green); }
.toast__kind--purple { color: #d49bff; }
.toast h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.toast > p { color: var(--muted); flex: 1; }
.toast footer { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--faint); border-top: 1px solid var(--line); padding-top: 8px; }
.toast--challenge { box-shadow: inset 0 0 0 2px #0a0d20, inset 0 0 0 4px #6a3cc0, inset 0 -6px 0 rgba(0,0,0,.3); }

/* Hele kaart klikbaar via de titel-link */
.toast { position: relative; }
.toast__link { text-decoration: none; }
.toast__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.toast__link:focus-visible { outline: none; }
.toast:has(.toast__link:focus-visible) { box-shadow: inset 0 0 0 3px var(--crown); }
.toast:hover .link-arrow::after { transform: translateX(4px); }

.toasts.toasts--all { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.empty { color: var(--muted); }

@media (max-width: 1000px) {
  .toasts { grid-template-columns: 1fr 1fr; }
  .toast--feature { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .toasts { grid-template-columns: 1fr; }
  .section__head--row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Rangen (Minecraft item-tooltips) ---------- */
.section--ranks { position: relative; }
.section--ranks::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 50% 55%, rgba(255,201,60,.08), transparent 70%);
}
.ranks { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; align-items: stretch; }
.tooltip {
  --rank: var(--mc-aqua);
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 20px;
  font-family: var(--f-pixel); font-size: 1.05rem;
  background: rgba(16, 0, 16, .94);
  /* Het echte Minecraft-tooltip randje */
  border: 3px solid; border-image: linear-gradient(180deg, #5000ff, #28007f) 1;
  outline: 3px solid var(--mc-tooltip-bg);
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  transition: translate .3s var(--ease), box-shadow .3s;
}
.tooltip:hover {
  translate: 0 -6px;
  border-image: linear-gradient(180deg, var(--rank), #28007f) 1;
  box-shadow: 0 0 40px color-mix(in srgb, var(--rank) 22%, transparent), 0 30px 60px rgba(0,0,0,.45);
}
.tooltip__head { display: flex; align-items: center; gap: 14px; }
.tooltip__head .slot { width: 52px; height: 52px; }
.tooltip__head small { font-size: .9rem; }
.tooltip h3 { font: 600 1.6rem var(--f-pixel); letter-spacing: 0; color: var(--rank); text-shadow: 2px 2px 0 color-mix(in srgb, var(--rank) 25%, #000); }
.tooltip ul { list-style: none; padding: 12px 0 0; margin: 4px 0 0; display: grid; gap: 4px; border-top: 1px solid rgba(255,255,255,.08); }
.tooltip__inherit { padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.1); font-size: .95rem; }
.tooltip__cmds { color: #8a8a8a; line-height: 1.5; overflow-wrap: anywhere; }
.tooltip .btn { margin-top: 6px; font-family: var(--f-display); }
.tooltip__price { margin-top: auto; padding-top: 14px; font-size: 1.5rem; color: var(--text); }
.tooltip__price span { font-size: 1rem; }
/* Hoogste rang: Netherite */
.tooltip--top {
  background: linear-gradient(180deg, rgba(36,20,40,.97), rgba(16,0,16,.97));
  border-image: linear-gradient(180deg, #c9a8ff, #3a2a44) 1;
  box-shadow: 0 0 60px rgba(155,92,255,.22), 0 30px 60px rgba(0,0,0,.45);
}
.tooltip__badge {
  position: absolute; top: -16px; right: 16px; padding: 4px 10px;
  font: 600 .85rem var(--f-pixel); color: #fff; background: var(--portal);
  box-shadow: inset 0 -3px 0 var(--portal-lo);
}
.c-aqua { color: var(--mc-aqua); } .c-gold { color: var(--mc-gold); } .c-pink { color: var(--mc-pink); }
.c-gray { color: var(--mc-gray); } .c-green { color: var(--mc-green); }

.ranks__note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 40px; padding: 20px 24px;
  background: rgba(21,32,79,.6); box-shadow: inset 0 0 0 2px var(--line);
}
.ranks__note p { color: var(--muted); max-width: 40em; }
.ranks__note strong { color: var(--crown); }

@media (max-width: 1000px) { .ranks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ranks { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; gap: 32px; } }

/* ---------- Community + FAQ ---------- */
.community { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.discord {
  --n: 10px;
  position: relative; overflow: hidden; padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(135deg, #24104f, #150a33 60%);
  box-shadow: inset 0 0 0 2px rgba(155,92,255,.4);
}
.discord h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; margin: 10px 0 14px; max-width: 12ch; }
.discord p:not(.eyebrow) { color: #cdbdf0; max-width: 30em; margin-bottom: 28px; }
.discord .btn { position: relative; z-index: 1; }
.discord__portal {
  position: absolute; right: -30px; bottom: -30px; width: 190px; height: 240px; opacity: .55;
  background:
    repeating-linear-gradient(45deg, rgba(210,182,255,.25) 0 6px, transparent 6px 18px),
    linear-gradient(180deg, #7b3cff, #3d138f);
  box-shadow: 0 0 0 18px #120a24, 0 0 80px rgba(155,92,255,.6);
  animation: portal 3s linear infinite;
}
@keyframes portal { to { background-position: 36px 36px, 0 0; } }

.faq { display: grid; gap: 10px; }
.faq__title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; margin-bottom: 8px; }
.faq details {
  --n: 5px;
  background: rgba(21,32,79,.6); box-shadow: inset 0 0 0 2px var(--line);
  transition: background .2s;
}
.faq details[open] { background: rgba(21,32,79,.95); box-shadow: inset 0 0 0 2px var(--line-strong); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 14px 20px; cursor: pointer; list-style: none; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font: 600 1.4rem var(--f-pixel); color: var(--diamond);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 18px; color: var(--muted); }

@media (max-width: 900px) { .community { grid-template-columns: 1fr; } }

/* ---------- Footer (de Nether) ---------- */
.footer { position: relative; margin-top: 40px; padding: 72px 0 28px; background: linear-gradient(180deg, #2a0c10, #160508); }
.lava-edge {
  position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  background:
    linear-gradient(90deg, #ff9b2e 0 12px, #ff5a0a 12px 24px, #ffc34d 24px 36px, #e8430a 36px 48px) 0 0 / 48px 12px repeat-x;
  box-shadow: 0 0 40px 6px rgba(255,110,20,.45);
  animation: lava 6s linear infinite;
}
@keyframes lava { to { background-position: 48px 0; } }
.footer__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; }
.footer__brand p { color: #e2a88f; margin: 12px 0 20px; font: 600 1rem var(--f-pixel); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__cols h3 { font-size: .95rem; margin-bottom: 10px; color: var(--crown); }
.footer__cols a { display: flex; align-items: center; min-height: 40px; color: #e9c8bb; text-decoration: none; transition: color .15s; }
.footer__cols a:hover { color: #fff; }
.footer__legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,140,90,.15); font-size: .85rem; color: #b78878; }

@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Subpagina's (nieuws / artikel) ---------- */
.page-head { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 64px); }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; margin: 12px 0 14px; }
.page-head p:not(.eyebrow) { color: var(--muted); font-size: 1.1rem; max-width: 36em; }
.page-body { padding-bottom: clamp(72px, 10vw, 128px); }

.article { width: min(100% - var(--gutter) * 2, 780px); margin-inline: auto; padding: clamp(40px, 6vw, 72px) 0; }
.article__back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--diamond); font-weight: 600; text-decoration: none;
}
.article__back::before { content: "←"; transition: transform .2s var(--ease); }
.article__back:hover::before { transform: translateX(-4px); }
.article__meta { display: flex; align-items: center; gap: 14px; margin: 24px 0 18px; }
.article__meta .slot { width: 52px; height: 52px; }
.article__meta time { display: block; color: var(--faint); font-size: .95rem; }
.article h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; }
.article__cover {
  --n: 8px; margin: 32px 0 36px; overflow: hidden; aspect-ratio: 16 / 9;
  box-shadow: inset 0 0 0 2px var(--line-strong);
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.article__missing { padding: 40px 0; display: grid; gap: 18px; justify-items: start; }

.prose { font-size: 1.1rem; line-height: 1.75; color: #d5dbf0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.45rem; font-weight: 700; color: var(--text); margin-top: 1.8em; }
.prose strong { color: var(--text); }
.prose ul { padding: 0; list-style: none; display: grid; gap: .5em; }
.prose li { position: relative; padding-left: 1.6em; }
.prose li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--diamond); box-shadow: 0 0 8px rgba(79,227,245,.6); }
.prose a { color: var(--diamond); }

.gallery { margin-top: 56px; }
.gallery h2 { font-size: 1.45rem; margin-bottom: 18px; }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.gallery__grid a { display: block; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: inset 0 0 0 2px var(--line); }
.gallery__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery__grid a:hover img { transform: scale(1.05); }

.more { border-top: 1px solid var(--line); padding-top: clamp(48px, 7vw, 80px); }
.more h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; margin-bottom: 28px; }

/* ---------- Ticket / FAQ-pagina / privacy ---------- */
.discord p.discord__ticket { position: relative; z-index: 1; margin: 22px 0 0; font-size: .95rem; max-width: 26em; color: #b9a8e0; }
.discord__ticket strong { color: #fff; }
.faq__more { margin-top: 6px; }

.faq-page { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.faq-page__toc { position: sticky; top: 96px; display: grid; gap: 4px; }
.faq-page__toc a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--muted); text-decoration: none; font-weight: 600;
  border-left: 3px solid var(--line); transition: color .15s, border-color .15s;
}
.faq-page__toc a:hover { color: var(--text); border-color: var(--diamond); }
.faq-group { scroll-margin-top: 96px; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 900; margin-bottom: 16px; }
.faq-group h2 .px-icon { width: 28px; height: 28px; }
.faq-group .faq details p + p { padding-top: 0; }

.help-box {
  --n: 8px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 56px; padding: 24px 28px;
  background: linear-gradient(135deg, #24104f, #150a33 70%);
  box-shadow: inset 0 0 0 2px rgba(155,92,255,.4);
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}
.help-box h2 { font-size: 1.3rem; font-weight: 900; margin-bottom: 4px; }
.help-box p { color: #cdbdf0; }

.prose h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-top: 1.4em; }
.prose .updated { color: var(--faint); font-size: .95rem; }
/* Nog in te vullen (valt bewust op) */
.todo { background: rgba(255,201,60,.18); color: var(--crown); padding: 0 .3em; outline: 1px dashed var(--crown); }

@media (max-width: 900px) {
  .faq-page { grid-template-columns: 1fr; }
  .faq-page__toc { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .faq-page__toc a { border: 2px solid var(--line); min-height: 40px; }
}

/* ---------- Regels ---------- */
.rules-tldr { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rules-tldr li {
  --c: var(--mc-green);
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: rgba(16, 0, 16, .7); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent);
}
.rules-tldr li.is-no { --c: #ff5555; }
.rules-tldr__mark {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  font: 600 1.4rem/1 var(--f-pixel); color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.rules-tldr strong { display: block; font-family: var(--f-display); font-size: .95rem; }
.rules-tldr span:not(.rules-tldr__mark) { font-size: .9rem; color: var(--muted); }

.rules__intro { color: var(--muted); font-size: 1.05rem; margin-bottom: 16px; max-width: 40em; }
.rule {
  --n: 6px;
  padding: 22px 24px; margin-top: 12px;
  background: rgba(21,32,79,.55); box-shadow: inset 0 0 0 2px var(--line);
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}
.rule > * + * { margin-top: 12px; }
.rule h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 1.15rem; font-weight: 700; }
.rule p { color: #d5dbf0; }
.rule--strict { box-shadow: inset 0 0 0 2px rgba(255,85,85,.35); background: linear-gradient(180deg, rgba(60,14,30,.5), rgba(21,32,79,.5)); }
.rule__tag { font: 600 .85rem var(--f-pixel); color: #ff7777; background: rgba(255,85,85,.12); padding: 2px 8px; letter-spacing: .02em; }
.rule__why { padding: 10px 14px; background: rgba(79,227,245,.07); border-left: 3px solid var(--diamond); font-size: .95rem; }
.rule__why b { font: 600 1rem var(--f-pixel); color: var(--diamond); margin-right: 4px; }
.rule__note { padding: 10px 14px; background: rgba(255,201,60,.07); border-left: 3px solid var(--crown); font-size: .95rem; }

.rule-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.rule-list li { position: relative; padding-left: 30px; color: #d5dbf0; }
.rule-list li::before {
  position: absolute; left: 0; top: .1em; width: 20px; height: 20px; display: grid; place-items: center;
  font: 600 1rem/1 var(--f-pixel);
}
.rule-list--ok li::before, .rule-list li.is-ok::before { content: "+"; color: var(--mc-green); background: rgba(85,255,85,.12); }
.rule-list--no li::before, .rule-list li.is-no::before { content: "×"; color: #ff5555; background: rgba(255,85,85,.14); }

.rules__motto { margin-top: 56px; font: 900 clamp(1.6rem, 4vw, 2.6rem)/1.1 var(--f-display); letter-spacing: -.03em; }
.rules__motto span { display: block; }

@media (max-width: 900px) { .rules-tldr { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rules-tldr { grid-template-columns: 1fr; } }

/* ---------- Afrekenen (Tebex) ---------- */
.checkout {
  width: min(100% - 32px, 460px); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible;
}
.checkout::backdrop { background: rgba(4, 6, 18, .78); backdrop-filter: blur(4px); }
.checkout[open] { animation: pop .25s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.checkout__box {
  position: relative; display: grid; gap: 18px;
  padding: 28px 24px 22px; max-height: calc(100dvh - 32px); overflow-y: auto;
  font-family: var(--f-body);
  background: rgba(16, 0, 16, .97);
  border: 3px solid; border-image: linear-gradient(180deg, #5000ff, #28007f) 1;
  outline: 3px solid var(--mc-tooltip-bg);
  box-shadow: 0 40px 80px rgba(0,0,0,.6);
}
.checkout__box > * { min-width: 0; }
.checkout__close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  font: 600 1.6rem/1 var(--f-pixel); color: var(--mc-gray); background: transparent; border: 0; cursor: pointer;
}
.checkout__close:hover { color: #fff; }
.checkout__head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.checkout__head .slot { width: 56px; height: 56px; }
.checkout__head h2 { font: 600 1.7rem var(--f-pixel); letter-spacing: 0; }
.checkout__price { font: 600 1.05rem var(--f-pixel); color: var(--text); }

.checkout__edition { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 0; padding: 0; margin: 0; }
.checkout__edition legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.checkout__edition label { position: relative; cursor: pointer; }
.checkout__edition input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.checkout__edition span {
  display: grid; place-items: center; min-height: 44px;
  font-weight: 600; color: var(--muted); background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 2px var(--line);
  transition: background .15s, color .15s, box-shadow .15s;
}
.checkout__edition input:checked + span { color: #04202a; background: var(--diamond); box-shadow: inset 0 -3px 0 var(--diamond-lo); }
.checkout__edition input:focus-visible + span { outline: 3px solid var(--crown); outline-offset: 2px; }

.checkout__field label { display: block; font-weight: 600; margin-bottom: 8px; }
/* Naamveld in de stijl van het Minecraft-aambeeld */
.anvil {
  display: flex; align-items: center; min-height: 52px; padding: 0 14px;
  background: #000; box-shadow: inset 0 0 0 2px #a0a0a0, inset 0 0 0 4px #3f3f3f;
  font: 600 1.25rem var(--f-pixel);
}
.anvil:focus-within { box-shadow: inset 0 0 0 2px var(--crown), inset 0 0 0 4px #3f3f3f; }
.anvil__prefix { color: var(--mc-gray); }
.anvil input {
  flex: 1; width: 100%; min-width: 0; height: 48px; padding: 0 0 0 2px;
  font: inherit; color: #ffff55; background: transparent; border: 0; outline: none;
  caret-color: #ffff55;
}
.checkout__hint { margin-top: 6px; font-size: .9rem; color: var(--faint); }
.checkout__error { margin-top: 6px; font-size: .95rem; color: #ff7070; }
.checkout__error:empty { display: none; }
.checkout__note { font-size: .95rem; color: #cdbdf0; padding: 10px 14px; background: rgba(155,92,255,.1); border-left: 3px solid var(--portal); }
.checkout__secure { text-align: center; font-size: .85rem; color: var(--faint); }
.checkout__discord { display: flex; align-items: flex-start; gap: 10px; font-size: .85rem; color: #b9a8e0; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
.checkout__discord .px-icon { width: 20px; height: 20px; margin-top: 1px; }
.checkout .btn[disabled] { filter: grayscale(.6); cursor: progress; transform: none; }

/* ---------- Bedankpagina ---------- */
.thanks { min-height: calc(100dvh - 72px); padding-bottom: clamp(64px, 8vw, 96px); }
.thanks__inner { position: relative; max-width: 680px; display: grid; gap: 28px; }
.thanks__toast { box-shadow: inset 0 0 0 2px #0a0d20, inset 0 0 0 4px var(--crown), 0 0 60px rgba(255,201,60,.18); }
.thanks__toast h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 900; }
.thanks__toast > p { color: var(--muted); font-size: 1.05rem; }
.thanks__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.thanks__steps li { display: flex; align-items: flex-start; gap: 16px; }
.thanks__steps h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.thanks__steps p { color: var(--muted); }
.thanks__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Kopieer-melding ---------- */
.copied {
  position: fixed; left: 50%; bottom: 24px; z-index: 90;
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  font: 600 1rem var(--f-pixel); color: var(--text);
  background: #1c2044;
  box-shadow: inset 0 0 0 2px #0a0d20, inset 0 0 0 4px var(--grass), 0 20px 40px rgba(0,0,0,.5);
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform .35s var(--ease), opacity .35s;
}
.copied .px-icon { width: 28px; height: 28px; }
.copied.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease), translate .3s var(--ease), rotate .3s var(--ease), box-shadow .3s; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}