/* Sitas SMP - ported from the inline styles in Landing.dc.html */

:root {
  --ink:        oklch(20% 0.006 260);
  --ink-nav:    oklch(16% 0.006 260);
  --text:       oklch(92% 0.006 260);
  --text-dim:   oklch(85% 0.006 260);
  --muted:      oklch(70% 0.01 260);
  --on-blue:    oklch(95% 0.01 260);

  --blue:        oklch(50% 0.19 260);
  --blue-deep:   oklch(45% 0.19 260);
  --blue-soft:   oklch(70% 0.15 260);
  --blue-line:   oklch(52% 0.19 260);

  --pink:        oklch(68% 0.2 340);
  --pink-hover:  oklch(75% 0.2 340);

  /* the store's colour - it owns the nav tab, the buy buttons and the
     accents on store.sitassmp.lt, so nothing else on the site is purple */
  --purple:       oklch(64% 0.21 303);
  --purple-hover: oklch(74% 0.19 303);
  --purple-dim:   oklch(52% 0.17 303);

  /* the Imperatorius spotlight's colour - a rank that stands apart from the
     regular tiers, so it gets a colour none of them use */
  --gold:        oklch(80% 0.16 92);
  --gold-hover:  oklch(87% 0.15 92);
  --gold-dim:    oklch(60% 0.14 88);
  /* hover only - as bright and saturated as oklch's gamut allows at this
     hue, so the Imperatorius card's outline reads as unmistakably "lit up" */
  --gold-bright: oklch(93% 0.19 96);

  --rule:        oklch(30% 0.01 260);
  --rule-soft:   oklch(32% 0.01 260);

  --gutter: 40px;

  /* one knob for every wave's size, so the footer clearance below can be
     derived from the same number the waves are drawn at */
  --wave-scale: 1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--text);
}

a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-hover); }

::selection { background: oklch(65% 0.22 340 / 0.3); }

h1, h2 { font-family: 'Montserrat', system-ui, sans-serif; }

.accent { color: var(--pink); }

/* ---------- page shell ---------- */

.page {
  width: 100%;
  position: relative;
  color: var(--text);
  /* clip, not hidden: `overflow:hidden` would make this a scroll container
     and the sticky nav would scroll away with the page */
  overflow-x: clip;
  overflow-y: visible;
}

.page__inner { position: relative; z-index: 1; }

.glow-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.glow { position: absolute; }
.glow--a {
  top: -260px; left: -220px; width: 760px; height: 760px;
  background: radial-gradient(closest-side, rgba(43, 97, 235, 0.28), rgba(43, 97, 235, 0));
}
.glow--b {
  bottom: -320px; right: -260px; width: 860px; height: 860px;
  background: radial-gradient(closest-side, rgba(43, 97, 235, 0.24), rgba(43, 97, 235, 0));
}
.glow--c {
  top: 36%; left: 56%; width: 640px; height: 640px;
  background: radial-gradient(closest-side, rgba(43, 97, 235, 0.16), rgba(43, 97, 235, 0));
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  background: var(--ink-nav);
  border-bottom: 1px solid var(--rule);
}

@font-face {
  font-family: 'Minecraft Default';
  src: url('../fonts/MinecraftDefault-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 0;
  color: #fff;
}
.nav__brand:hover { color: #fff; }
.nav__brand img { height: 56px; display: block; }

.nav__brand-rule {
  width: 3px;
  height: 36px;
  border-radius: 999px;
  background: #7a7a7a;
  flex-shrink: 0;
}

.nav__wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Minecraft Default', sans-serif;
  font-size: 16px;
  font-weight: 700;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;
  -webkit-font-smoothing: none;
  transform: translateY(3px);
}

.nav__links { display: flex; align-items: center; gap: 28px; }

.nav__link {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.nav__link:hover { color: var(--blue-soft); }

/* ---------- the store tab ---------- */

.nav__link--store {
  position: relative;
  color: var(--purple);
  font-weight: 700;
}
.nav__link--store:hover { color: var(--purple-hover); }

/* A spark is one 2px pixel plus a box-shadow sprite of more 2px pixels: no
   radius, no blur, so every dot stays a hard square however it is scaled -
   pixel art, not a glow. Two sparks with co-prime-ish durations and
   different delays, so the pair never settles into a visible beat.

   Colour is two custom properties rather than hardcoded purple, so a
   modifier (.spark--gold, for the store's spotlight card) can retint the
   same sprite instead of duplicating the whole box-shadow list. */
.spark {
  position: absolute;
  width: 2px;
  height: 2px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  --spark-color: var(--purple-hover);
  --spark-dim: var(--purple-dim);
  box-shadow:
    /* centre and the four arms */
        0    0 0 var(--spark-color),
        0   -3px 0 var(--spark-color),
        0    3px 0 var(--spark-color),
      -3px   0 0 var(--spark-color),
       3px   0 0 var(--spark-color),
    /* dimmer tips, one pixel further out */
        0   -6px 0 var(--spark-dim),
        0    6px 0 var(--spark-dim),
      -6px   0 0 var(--spark-dim),
       6px   0 0 var(--spark-dim);
  /* steps(1) so the frames snap between sizes instead of easing through
     them - a tweened sparkle would read as a glow, not as pixels */
  animation-name: spark-twinkle;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}

.spark--a { top: 1px; right: -7px; animation-duration: 6.5s; animation-delay: 1.4s; }
.spark--b { bottom: 2px; left: -8px; animation-duration: 9.5s; animation-delay: 5.1s; }

.spark--gold { --spark-color: var(--gold-hover); --spark-dim: var(--gold-dim); }

/* visible for about a tenth of the cycle - a twinkle, not a strobe */
@keyframes spark-twinkle {
  0%, 88%    { opacity: 0; transform: scale(0.5); }
  90%        { opacity: 1; transform: scale(0.5); }
  93%        { opacity: 1; transform: scale(1); }
  96%        { opacity: 1; transform: scale(0.5); }
  98%, 100%  { opacity: 0; transform: scale(0.5); }
}

.btn-ip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--blue-line);
  background: transparent;
  color: var(--blue-soft);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-ip:hover { background: oklch(52% 0.19 260 / 0.12); }

/* ---------- buttons ---------- */

.btn {
  padding: 15px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.btn--light {
  border: none;
  background: white;
  color: var(--blue-deep);
}
.btn--light:hover { opacity: 0.9; color: var(--blue-deep); }

.btn--outline {
  border: 1.5px solid white;
  background: transparent;
  color: white;
}
.btn--outline:hover { background: rgba(255, 255, 255, 0.1); color: white; }

.btn--solo { display: inline-flex; }

/* ---------- waves between bands ---------- */

/* Each wave carries two identical copies of its pattern and is twice as wide
   as the section, so sliding it left by half swaps copy two into copy one's
   place - an endless drift with no seam. --wave-h/-dur/-dir come from the
   markup; content.py owns the sizes and keeps them inside its limits. */
.wave {
  --wave-height: calc(var(--wave-h, 110px) * var(--wave-scale));
  position: absolute;
  left: 0;
  width: 200%;
  height: var(--wave-height);
  display: block;
  pointer-events: none;
  animation: wave-drift var(--wave-dur, 72s) linear infinite;
  animation-direction: var(--wave-dir, normal);
  will-change: transform;
}
.wave path { fill: var(--blue); }

/* positioned with offsets rather than a translate, so the animation owns
   `transform` outright and the two cannot fight */
.wave--bottom { bottom: calc(1px - var(--wave-height)); }
.wave--top    { top:    calc(1px - var(--wave-height)); }

@keyframes wave-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--blue);
  padding: 180px var(--gutter);
  min-height: 640px;
}

/* the blue stays full-bleed; only the content is constrained and centred */
.hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: center;
}

/* both halves pull in toward the centre line - the copy noticeably more
   than the art, so the two stay visually distinct */
.hero__copy { padding-left: clamp(0px, 6vw, 96px); }
.hero__art  { padding-right: clamp(0px, 2.5vw, 40px); }

.hero__title {
  font-weight: 800;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.15;
  color: white;
  margin: 0 0 22px;
}

.hero__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--on-blue);
  max-width: 480px;
  margin: 0 0 36px;
}

.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero__art {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
/* <picture> is the flex item, so it carries the width; the img fills it */
.hero__art picture {
  display: block;
  width: 78%;
}
.hero__art img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

/* shown until static/assets/hero-render.png exists */
.hero__art-slot {
  width: 78%;
  aspect-ratio: 3 / 4;
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--on-blue);
}
.hero__art-slot span { font-size: 14px; letter-spacing: 0.04em; }
.hero__art-slot small { font-size: 11.5px; opacity: 0.65; line-height: 1.6; }
.hero__art-slot code { font-size: 11px; }

/* ---------- section furniture ---------- */

.section-title {
  font-weight: 800;
  font-size: 32px;
  margin: 0 0 14px;
}

.section-lede {
  font-size: 16px;
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto 70px;
}

/* ---------- gem orbit ---------- */

.gems {
  padding: 140px var(--gutter) 120px;
  text-align: center;
  position: relative;
}

.orbit-box {
  position: relative;
  width: min(600px, 90vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.orbit {
  position: absolute;
  inset: 0;
  animation: orbit-spin 90s linear infinite;
}
.orbit-box.is-paused .orbit { animation-play-state: paused; }

.gem {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 64px;
  height: 64px;
  display: block;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  transition:
    transform 0.35s cubic-bezier(.2, .8, .2, 1),
    opacity 0.45s ease;
}

/* the staggered entrance only applies on the way in - once the ring has
   settled the delay is dropped so hover responds immediately */
.orbit-box:not(.is-settled) .gem {
  transition-delay: var(--delay), var(--delay);
}

.orbit-box.is-revealed .gem {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.orbit-box.is-revealed .gem.is-active {
  transform: translate(-50%, -50%) scale(1.35);
  z-index: 2;
}

.gem__point {
  width: 100%;
  height: 100%;
  transform: rotate(var(--point-deg));
  transition: transform 0.4s ease;
}
/* when hovered the gem counter-rotates out of the orbit spin and snaps
   to a fixed angle; --counter-deg is written by landing.js */
.gem.is-active .gem__point {
  transform: rotate(var(--counter-deg, -45deg));
}

.gem__slot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(30% 0.05 var(--hue) / 0.5);
  border: 1px solid oklch(65% 0.17 var(--hue) / 0.4);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.25s ease;
}
.gem.is-active .gem__slot { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }

.gem__slot img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

.gem__ring {
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid oklch(65% 0.17 var(--hue));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.gem.is-active .gem__ring { opacity: 1; }

.orbit__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 14px;
  pointer-events: none;
}
.orbit__label[hidden] { display: none; }

.orbit__label-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--blue-soft);
}
.orbit__label-blurb {
  font-size: 12.5px;
  color: oklch(75% 0.01 260);
  margin-top: 8px;
  line-height: 1.5;
}

/* ---------- blue bands ---------- */

.band {
  position: relative;
  background: var(--blue);
  text-align: center;
}

.band--status  { padding: 150px var(--gutter) 130px; }
.band--discord { padding: 150px var(--gutter) 140px; }

.band__title {
  font-weight: 800;
  font-size: 28px;
  color: white;
  margin: 0 0 16px;
}
.band--status .band__title { font-size: 26px; margin: 0 0 20px; }

.band__lede {
  color: var(--on-blue);
  font-size: 16px;
  margin: 0 0 34px;
}

/* ---------- server status ---------- */

.status {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 44px;
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--on-blue);
  font-size: 14px;
  min-width: 300px;
  /* a long MOTD must wrap rather than stretch the panel across the band */
  max-width: min(560px, 100%);
}
.status.is-online { border-style: solid; }

.status__heading { letter-spacing: 0.04em; }

.status__value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
.status.is-offline .status__value { font-size: 15px; opacity: 0.75; }

.status__meta { font-size: 12px; opacity: 0.65; }
.status__meta:empty { display: none; }

/* ---------- roadmap ---------- */

.roadmap {
  padding: 130px var(--gutter);
  max-width: 920px;
  margin: 0 auto;
}
.roadmap .section-title { margin: 0 0 50px; text-align: center; font-size: 28px; }

.roadmap__list { display: flex; flex-direction: column; }

.roadmap__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--rule-soft);
}

.roadmap__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--blue-soft);
}

.roadmap__desc {
  font-size: 15.5px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ---------- footer ---------- */

.footer {
  padding: 52px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--rule-soft);
  flex-wrap: wrap;
  gap: 16px;
}

/* On the landing page the discord band's bottom wave hangs down into this
   space and would paint straight over the text, so the footer has to clear
   it. The height comes from the template (content.MAX_WAVE_HEIGHT), so
   resizing a wave can never silently re-break this. There the wave is the
   separator, so the rule goes too. */
.footer--under-wave {
  padding-top: calc(var(--wave-max-h, 120px) * var(--wave-scale) + 24px);
  border-top: none;
}

.footer__brand {
  font-weight: 700;
  font-size: 13px;
  color: var(--blue-soft);
}

.footer__links { display: flex; gap: 24px; font-size: 14px; }

/* ---------- wiki ---------- */

/* Sidebar, article, contents. The two rails collapse out on the way down:
   the TOC first (it is a convenience), then the sidebar into a drawer. */
.wiki {
  --wiki-rail: 258px;
  --wiki-top: 90px;          /* the sticky nav's height - both rails clear it */
  display: grid;
  grid-template-columns: var(--wiki-rail) minmax(0, 1fr) var(--wiki-rail);
  gap: 44px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px var(--gutter) 110px;
  align-items: start;
}

.wiki__toggle, .wiki__bar, .wiki__scrim { display: none; }

/* ---- sidebar ---- */

.wiki__sidebar-inner {
  position: sticky;
  top: calc(var(--wiki-top) + 20px);
  max-height: calc(100vh - var(--wiki-top) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

.wiki-nav__home {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 16px;
}
.wiki-nav__home:hover { color: var(--pink); }
.wiki-nav__home.is-active { color: var(--pink); }

.wiki__search { margin-bottom: 22px; }
.wiki__search .field__input { font-size: 13.5px; padding: 9px 12px; }

.wiki-nav__section { margin-bottom: 26px; }
.wiki-nav__section[hidden] { display: none; }

.wiki-nav__heading {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 8px 12px;
}

.wiki-nav__list { list-style: none; margin: 0; padding: 0; }
.wiki-nav__list li[hidden] { display: none; }

.wiki-nav__link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-dim);
  /* the active marker rides the left edge; a transparent border on every row
     keeps the text from shifting when it appears */
  border-left: 2px solid transparent;
}
.wiki-nav__link:hover {
  color: var(--text);
  background: oklch(52% 0.19 260 / 0.12);
}
.wiki-nav__link.is-active {
  color: white;
  font-weight: 700;
  background: oklch(52% 0.19 260 / 0.2);
  border-left-color: var(--pink);
}

.wiki-nav__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.wiki-nav__empty { font-size: 13.5px; color: var(--muted); padding-left: 12px; }

/* ---- article column ---- */

.wiki__main { min-width: 0; padding-top: 16px; }

.wiki__crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 18px;
}
.wiki__crumbs a { color: var(--blue-soft); }
.wiki__crumbs a:hover { color: var(--pink); }

.wiki__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--rule-soft);
}

.wiki__head-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.wiki__title { font-size: 34px; font-weight: 800; margin: 0; line-height: 1.15; }
.wiki__summary {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

.wiki__stub {
  padding: 30px;
  border: 1.5px dashed var(--rule);
  border-radius: 14px;
  color: var(--muted);
  font-size: 15px;
}
.wiki__stub p { margin: 0; }
.wiki__stub-hint { margin-top: 8px !important; font-size: 13.5px; opacity: 0.85; }

/* ---- rendered body ---- */

.wiki-body { font-size: 16px; line-height: 1.75; color: var(--text-dim); }
.wiki-body > :first-child { margin-top: 0; }

.wiki-body__h2 {
  font-size: 23px;
  font-weight: 800;
  color: var(--text);
  margin: 46px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.wiki-body__h3 { font-size: 18.5px; font-weight: 700; color: var(--text); margin: 34px 0 10px; }
.wiki-body__h4 { font-size: 15.5px; font-weight: 700; color: var(--blue-soft); margin: 26px 0 8px; }

/* headings are anchor targets, so they must clear the sticky nav */
.wiki-body__h2, .wiki-body__h3, .wiki-body__h4 { scroll-margin-top: calc(var(--wiki-top) + 16px); }

/* the # only appears on hover, and hangs in the margin so it never reflows
   the heading; on narrow screens there is no margin to hang in, so it goes */
.wiki-body__anchor {
  float: left;
  margin-left: -0.85em;
  width: 0.85em;
  color: var(--muted);
  opacity: 0;
  font-weight: 400;
  transition: opacity 0.15s ease;
}
.wiki-body__h2:hover .wiki-body__anchor,
.wiki-body__h3:hover .wiki-body__anchor,
.wiki-body__h4:hover .wiki-body__anchor { opacity: 1; }
.wiki-body__anchor:hover { color: var(--pink); }

.wiki-body p { margin: 0 0 18px; }

.wiki-body__list { margin: 0 0 18px; padding-left: 22px; }
.wiki-body__list li { margin-bottom: 7px; }
.wiki-body__list li::marker { color: var(--blue-soft); }

.wiki-body__note {
  border-left: 3px solid var(--blue-line);
  background: oklch(52% 0.19 260 / 0.1);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--text-dim);
}

.wiki-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.87em;
  padding: 2px 6px;
  border-radius: 6px;
  background: oklch(28% 0.01 260);
  color: oklch(85% 0.09 200);
}

.wiki-body__code {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: oklch(16% 0.008 260);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
}
.wiki-body__code code { background: none; padding: 0; color: var(--text-dim); }

/* a wide table scrolls inside its own box rather than widening the article */
.wiki-body__table-wrap { overflow-x: auto; margin: 0 0 22px; }
.wiki-body__table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
}
.wiki-body__table th, .wiki-body__table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
}
.wiki-body__table th {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-soft);
  border-bottom-color: var(--rule);
  white-space: nowrap;
}
.wiki-body__table tbody tr:hover { background: oklch(52% 0.19 260 / 0.07); }

.wiki-body__rule { border: none; border-top: 1px solid var(--rule-soft); margin: 34px 0; }

/* ---- pager ---- */

.wiki__pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-soft);
}

.wiki__pager-link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  max-width: 46%;
  color: var(--text);
}
.wiki__pager-link:hover { border-color: var(--blue-line); background: oklch(52% 0.19 260 / 0.1); color: var(--text); }
.wiki__pager-link--next { text-align: right; margin-left: auto; }

.wiki__pager-dir { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.wiki__pager-title { font-size: 14.5px; font-weight: 600; }

/* ---- index cards ---- */

.wiki__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.wiki-card {
  padding: 22px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: oklch(23% 0.008 260 / 0.7);
}
.wiki-card__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin: 0 0 14px;
}
.wiki-card__list { list-style: none; margin: 0; padding: 0; }
.wiki-card__list li { margin-bottom: 2px; }
.wiki-card__list a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--text-dim);
}
.wiki-card__list a:hover { color: white; background: oklch(52% 0.19 260 / 0.14); }

/* ---- table of contents ---- */

.wiki__toc-inner {
  position: sticky;
  top: calc(var(--wiki-top) + 20px);
  max-height: calc(100vh - var(--wiki-top) - 40px);
  overflow-y: auto;
  border-left: 1px solid var(--rule-soft);
  padding: 2px 0 2px 18px;
}

.wiki__toc-heading {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.wiki__toc-list { list-style: none; margin: 0; padding: 0; }

.wiki__toc-item a {
  display: block;
  padding: 5px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.wiki__toc-item a:hover { color: var(--text); }
.wiki__toc-item--h3 a { padding-left: 14px; font-size: 13px; }
.wiki__toc-item.is-active > a { color: var(--pink); font-weight: 600; }

/* ---------- form controls (admin) ---------- */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.field__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__input {
  background: oklch(24% 0.008 260);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  resize: vertical;
}
.field__input:focus {
  outline: none;
  border-color: var(--blue-line);
  box-shadow: 0 0 0 3px oklch(52% 0.19 260 / 0.22);
}

.btn--block { width: 100%; justify-content: center; }

/* ---------- staff ---------- */

.staff { padding: 90px var(--gutter) 110px; max-width: 1080px; margin: 0 auto; text-align: center; }

.staff__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  text-align: left;
}

.staff-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: oklch(23% 0.008 260 / 0.7);
}

.staff-card__skin {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.staff-card__skin img {
  width: 90px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

.staff-card__skin-fallback {
  width: 90px;
  aspect-ratio: 180 / 432;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--rule);
  border-radius: 12px;
  font-size: 30px;
  font-weight: 800;
  color: var(--muted);
}

.staff-card__nick {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 2px;
  word-break: break-word;
}

.staff-card__role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 14px;
}

.staff-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 14px;
  font-size: 13.5px;
}
.staff-card__meta dt { color: var(--muted); }
.staff-card__meta dd { margin: 0; color: var(--text-dim); word-break: break-word; }

.staff-card__socials { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-card__socials a {
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid oklch(52% 0.19 260 / 0.5);
  color: var(--blue-soft);
}
.staff-card__socials a:hover {
  background: oklch(52% 0.19 260 / 0.14);
  color: var(--blue-soft);
}

.staff__empty { padding: 40px 0 20px; color: var(--muted); }
.staff__empty p { margin: 0 0 6px; }
.staff__empty-hint { font-size: 14px; opacity: 0.75; }

/* ---------- admin ---------- */

.admin-login { padding: 90px var(--gutter) 140px; display: flex; justify-content: center; }
.admin-login__card {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: oklch(23% 0.008 260 / 0.8);
}
.admin-login__title { font-size: 22px; font-weight: 800; margin: 0; }
.admin-login__lede { margin: -8px 0 0; font-size: 14px; color: var(--muted); }
.admin-login__error {
  margin: 0;
  font-size: 13.5px;
  color: oklch(70% 0.19 25);
}

.admin { padding: 70px var(--gutter) 110px; max-width: 1000px; margin: 0 auto; }

.admin__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.admin__head .section-title { margin: 0 0 6px; }
.admin__lede { margin: 0; font-size: 15px; color: var(--muted); }

.admin__warn {
  padding: 14px 16px;
  border: 1px dashed oklch(70% 0.15 85 / 0.6);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: oklch(85% 0.09 85);
  margin-bottom: 26px;
}
.admin__warn code { font-size: 12.5px; }

/* the confirmation twin of .admin__warn - same shape, green instead of amber */
.admin__ok {
  padding: 14px 16px;
  border: 1px dashed oklch(72% 0.17 150 / 0.6);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: oklch(84% 0.13 150);
  margin-bottom: 26px;
}

/* ---------- discount codes ---------- */

/* .btn-ip is a button everywhere else on the site; here it is also a link */
a.btn-ip { text-decoration: none; display: inline-flex; }

.btn-ip--danger {
  border-color: oklch(68% 0.2 20 / 0.55);
  color: oklch(78% 0.15 20);
}
.btn-ip--danger:hover { background: oklch(68% 0.2 20 / 0.14); }

.codes__new {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.codes__field { display: block; flex: 1 1 150px; }
.codes__field span {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.codes__field span em { font-style: normal; font-weight: 600; opacity: 0.7; }
.codes__field input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: oklch(18% 0.008 260 / 0.8);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.codes__field input:focus { outline: none; border-color: var(--blue-line); }

.codes__field--code { flex: 1 1 190px; }
.codes__field--code input { text-transform: uppercase; font-weight: 700; }
.codes__field--code input::placeholder { font-weight: 400; }
.codes__field--small { flex: 0 0 120px; }
.codes__field--note { flex: 2 1 240px; }
.codes__field--note input { text-transform: none; }

/* the table is the one thing here that cannot shrink; let it scroll rather
   than push the page sideways */
.codes__table-wrap { overflow-x: auto; }

.codes__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}
.codes__table th {
  padding: 0 12px 10px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.codes__table td {
  padding: 12px 12px 12px 0;
  border-top: 1px solid var(--rule);
  vertical-align: middle;
}

.codes__code { font-weight: 800; white-space: nowrap; }
.codes__dim { color: var(--muted); font-weight: 400; }
.codes__note { color: var(--text-dim); max-width: 260px; }

/* switched off or past its date: still listed, visibly not in play */
.codes__row--off td { opacity: 0.5; }

.codes__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--rule-soft);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.codes__actions { display: flex; gap: 8px; }
.codes__actions .btn-ip { padding: 6px 12px; font-size: 12.5px; }

.admin__panel {
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 22px;
  background: oklch(22% 0.008 260 / 0.6);
}
.admin__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.admin__panel-head h2 { font-size: 15px; margin: 0; letter-spacing: 0.05em; text-transform: uppercase; }

.admin__list { display: flex; flex-direction: column; gap: 14px; }
.admin__empty { margin: 0; font-size: 14px; color: var(--muted); }

.admin__row {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px;
  background: oklch(25% 0.008 260 / 0.5);
}
.admin__row--roadmap {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 14px;
  align-items: start;
}

.admin__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.admin__sub-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin__socials { display: flex; flex-direction: column; gap: 10px; }
.admin__social {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 10px;
  align-items: end;
}

.admin__tools { display: flex; gap: 6px; align-items: center; }

/* ---- store switch ---- */

/* open/closed says the same thing as the checkbox, but up in the panel head
   where it is readable at a glance without hunting for a tick */
.admin__pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin__pill--on {
  background: oklch(30% 0.07 150);
  color: oklch(85% 0.14 150);
}
.admin__pill--off {
  background: oklch(30% 0.06 25);
  color: oklch(85% 0.12 25);
}

.admin__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.admin__toggle input { width: 16px; height: 16px; cursor: pointer; }

/* ---- wiki editor ---- */

.admin__hint {
  margin: -6px 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.admin__hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 5px;
  background: oklch(28% 0.01 260);
}

/* the section title field sits in the row head next to the move/remove
   buttons, so it must not stretch the whole way across */
.admin__row--section .admin__row-head .field { max-width: 320px; flex: 1; }

.admin__pages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.admin__page {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: oklch(22% 0.008 260 / 0.6);
}
.admin__page[open] { border-color: var(--blue-line); }

.admin__page-summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 14px;
  list-style: none;
}
.admin__page-summary::-webkit-details-marker { display: none; }
.admin__page-summary::before { content: '▸'; color: var(--muted); font-size: 11px; }
.admin__page[open] .admin__page-summary::before { content: '▾'; }

.admin__page-name { font-weight: 600; }
.admin__page-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
  margin-left: auto;
}

.admin__page > .admin__grid,
.admin__page > .admin__body-field { margin: 0 14px 12px; }
.admin__page > .admin__grid { margin-top: 4px; }

.admin__body-field textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
}

.admin__page-foot { display: flex; justify-content: flex-end; padding: 0 14px 12px; }

.admin__mini {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.admin__mini:hover { background: oklch(52% 0.19 260 / 0.16); border-color: var(--blue-line); }
.admin__mini--danger:hover { background: oklch(55% 0.2 25 / 0.2); border-color: oklch(60% 0.2 25); }

.admin__bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px 0;
  background: linear-gradient(to top, var(--ink) 60%, transparent);
}
.admin__status { font-size: 13.5px; color: var(--muted); }
.admin__status.is-ok { color: oklch(75% 0.15 155); }
.admin__status.is-error { color: oklch(72% 0.19 25); }

/* ---------- responsive ---------- */

/* the TOC is the first thing to go: it is a shortcut, not navigation */
@media (max-width: 1180px) {
  .wiki { grid-template-columns: var(--wiki-rail) minmax(0, 1fr); gap: 36px; }
  .wiki__toc { display: none; }
}

/* Below this the sidebar becomes a drawer over the article. It is driven by
   the hidden checkbox in the markup, so it opens and closes without JS. */
@media (max-width: 900px) {
  .wiki { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }

  .wiki__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--rule-soft);
  }

  .wiki__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1.5px solid var(--blue-line);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue-soft);
    cursor: pointer;
    flex-shrink: 0;
  }

  .wiki__bar-here {
    font-size: 13.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wiki__sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: min(310px, 84vw);
    background: var(--ink-nav);
    border-right: 1px solid var(--rule);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    /* off-canvas panels still take clicks, so it is switched off outright
       until it is open */
    visibility: hidden;
  }
  .wiki__toggle:checked ~ .wiki__sidebar { transform: none; visibility: visible; }

  .wiki__sidebar-inner {
    position: static;
    max-height: none;
    height: 100%;
    overflow-y: auto;
    padding: 22px var(--gutter);
  }

  .wiki__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }
  .wiki__toggle:checked ~ .wiki__scrim { opacity: 1; visibility: visible; }

  .wiki__main { padding-top: 20px; }
  .wiki__title { font-size: 27px; }
  .wiki__head { gap: 14px; }
  .wiki__head-icon { width: 48px; height: 48px; }
  .wiki-body__anchor { display: none; }
  .wiki__pager { flex-direction: column; }
  .wiki__pager-link { max-width: none; }
  .wiki__pager-link--next { text-align: left; margin-left: 0; }
}

@media (max-width: 900px) {
  :root { --gutter: 22px; }

  .hero {
    padding: 90px var(--gutter) 110px;
    min-height: 0;
    text-align: center;
  }
  /* stacked: the centring offsets would only push things off-axis */
  .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .hero__copy { padding-left: 0; }
  .hero__art { padding-right: 0; }
  .hero__lede { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__art { aspect-ratio: auto; order: -1; }
  .hero__art picture { width: 62%; max-width: 320px; }

  /* scaled rather than pinned, so the waves keep their relative sizes */
  :root { --wave-scale: 0.55; }

  .gems { padding: 90px var(--gutter) 80px; }
  .section-lede { margin-bottom: 46px; }

  .band--status, .band--discord { padding: 110px var(--gutter) 100px; }

  .roadmap { padding: 90px var(--gutter); }
  .roadmap__row { grid-template-columns: 1fr; gap: 8px; }

  .footer { justify-content: center; text-align: center; }
}

@media (max-width: 620px) {
  .nav { padding: 12px var(--gutter); }
  .nav__brand { gap: 8px; }
  .nav__brand img { height: 40px; }
  .nav__brand-rule { height: 30px; width: 2.5px; }
  .nav__wordmark { font-size: 12px; }
  .nav__links { gap: 14px; }
  .nav__link { font-size: 14px; }
  .btn-ip { padding: 8px 12px; font-size: 13px; }

  .section-title { font-size: 24px; }
  .band__title, .band--status .band__title { font-size: 22px; }

  /* the multi-column editor rows have to stack before they get unusable */
  .admin__row--roadmap { grid-template-columns: 1fr; }
  .admin__row--roadmap .admin__tools { justify-content: flex-end; }
  .admin__social { grid-template-columns: 1fr; }
  .admin__social .admin__mini { justify-self: end; }
  .staff-card { grid-template-columns: 72px 1fr; gap: 14px; padding: 16px; }
  .staff-card__skin img { width: 66px; }

  /* the ring shrinks but the gems must not overlap */
  .gem { width: 46px; height: 46px; }
  .status { min-width: 0; padding: 22px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  /* the waves keep their shapes and sizes, they just stop drifting;
     landing.js bails out on the same query so nothing tries to speed up
     an animation that is no longer there */
  .wave { animation: none; }
  .orbit { animation: none; }
  /* the store tab keeps its colour; only the twinkle stops */
  .spark { animation: none; }
  .gem, .gem__point, .gem__slot, .gem__ring, .btn, .btn-ip {
    transition-duration: 0.01ms;
  }
}

/* ---------- store ---------- */

.store {
  padding: 90px var(--gutter) 110px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

/* purple is the store's colour, so the headings follow the buy buttons
   rather than the pink the rest of the site accents with */
.store .accent { color: var(--purple); }

.store--result { padding-top: 130px; }

.store__notice {
  display: inline-block;
  margin: 0 auto 34px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid oklch(52% 0.19 260 / 0.5);
  background: oklch(52% 0.19 260 / 0.12);
  color: var(--blue-soft);
  font-size: 13.5px;
  font-weight: 600;
}
.store__notice--warn,
.store__notice--error {
  border-color: oklch(68% 0.2 340 / 0.5);
  background: oklch(68% 0.2 340 / 0.1);
  color: var(--pink);
}
/* a code that worked - the one notice on this page that is good news */
.store__notice--good {
  border-color: oklch(72% 0.17 150 / 0.5);
  background: oklch(72% 0.17 150 / 0.1);
  color: oklch(80% 0.15 150);
}

.store__form { text-align: left; }

/* ---------- consent ---------- */

/* The one thing on the store the buyer has to actively do besides typing a
   nickname, so it is a box rather than a line of fine print. */
.store__terms {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 560px;
  margin: -28px auto 52px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid var(--rule-soft);
  background: oklch(23% 0.008 260 / 0.5);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.store__terms:hover { border-color: var(--purple-dim); }

.store__terms input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--purple);
  cursor: pointer;
}
/* the box the browser scrolls to and outlines when the form is submitted
   unchecked - without this the invalid control is a bare 18px square */
.store__terms:has(input:focus-visible) { border-color: var(--purple); }

.store__terms a {
  color: var(--purple-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.store__terms a:hover { color: var(--text); }

@media (max-width: 620px) {
  .store__terms { margin-top: -18px; }
}

/* ---------- who is buying ---------- */

/* Nickname, code and the recalculate button on one line: together they are
   the question "who are you", and the prices below are the answer. They wrap
   to a column on narrow screens, where the button goes full width. */
.store__you {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 12px;
}

.store__field { display: block; }
.store__field span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.store__field input {
  width: 260px;
  max-width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--rule-soft);
  background: oklch(23% 0.008 260 / 0.7);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.2s ease;
}
.store__field input:focus {
  outline: none;
  border-color: var(--blue-line);
}
.store__field input::placeholder { color: var(--muted); font-weight: 400; }

/* optional, and shorter than the nickname so it reads as the lesser of the two */
.store__field--code input {
  width: 190px;
  text-transform: uppercase;
}
.store__field--code input::placeholder { text-transform: none; }

/* Outlined, not filled: Pirkti is the page's action, this only refreshes what
   the page says. */
.btn-check {
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid var(--purple-dim);
  background: transparent;
  color: var(--purple-hover);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.btn-check:hover {
  border-color: var(--purple);
  background: oklch(52% 0.19 300 / 0.12);
  color: var(--text);
}

.store__you-hint {
  max-width: 520px;
  margin: 0 auto 46px;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
}

.store__category { margin-bottom: 64px; }
.store__category:last-of-type { margin-bottom: 0; }

.store__category-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--purple);
}

.store__category-lede {
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.store__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* The ranks carry much longer perk lists than each other, so their columns
   are roomier. Cards are left to stretch to the tallest in the row and the
   perk list takes up the slack, which puts every price and Pirkti button on
   one line - the ranks are meant to be compared side by side. */
.store__grid--rankai { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.service-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: oklch(23% 0.008 260 / 0.7);
  /* thickening via outline, not border-width: outline is drawn outside the
     box model and never affects layout, so a card growing an outline on
     hover cannot push the row below it down - border-width did exactly
     that (auto height means "thicker" also meant "taller") */
  position: relative;
  z-index: 1;
  /* the outline is always at its full hover width, just invisible (transparent)
     until hovered - animating outline-width itself (0 -> 2.5px) is what made
     the hover feel choppy, since outline width doesn't interpolate smoothly
     in every browser. Transitioning only the colour is buttery by comparison. */
  outline: 2.5px solid transparent;
  outline-offset: -1px;
  transition: border-color 0.2s ease, outline-color 0.2s ease;
}
.service-card:hover {
  border-color: var(--purple);
  outline-color: var(--purple);
}

/* Šitas is the centre tier of the three ranks - a subtle pink glow and a
   touch of extra size mark it as the one to look at first. transform, not
   width/height, so it does not steal space from the grid track or push its
   neighbours - it just draws a little larger than the cards next to it. */
.service-card--sitas {
  /* z-index below its siblings (which stay at the base 1) so its glow sits
     behind Anas and Kitas instead of painting over them - the scale-up
     already makes it read as "in front" without needing the paint order too */
  z-index: 0;
  transform: scale(1.045);
  box-shadow: 0 0 26px 2px oklch(68% 0.2 340 / 0.22), 0 0 48px 10px oklch(68% 0.2 340 / 0.1);
}

/* optional, and centred with the title above it when a service does use one */
.service-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: oklch(52% 0.19 260 / 0.12);
}
.service-card__icon img { width: 44px; height: 44px; object-fit: contain; }

.service-card__name {
  margin: 0 0 16px;
  font-size: 23px;
  font-weight: 800;
  text-align: center;
  /* the rank word stays white; only the rank's own name takes a colour */
  color: #fff;
}

.rank-name--blue   { color: oklch(58% 0.2 260); }
.rank-name--purple { color: var(--purple); }
.rank-name--pink   { color: var(--pink); }
.rank-name--gold   { color: var(--gold); }

.service-card__perks {
  margin: 0;
  padding: 0;
  flex-grow: 1;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.service-card__perks li { margin-bottom: 7px; }
.service-card__perks li:last-child { margin-bottom: 0; }
/* the bullet sits inline right before the text, not pinned to the li's left
   edge, so marker+text move and centre together as one unit */
.service-card__perks li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  margin-bottom: 1px;
  vertical-align: middle;
  /* a square bullet rather than a disc - it matches the pixel spark in the nav */
  background: var(--purple);
}

/* "+ <rank> visos ranko privilegijos" - the lower tier in one line rather
   than repeating its perks, coloured to match that rank's own name */
.service-card__inherit {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.service-card__inherit .rank-name { font-weight: 800; }

.service-card__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.service-card__price-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.service-card__price {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue-soft);
  white-space: nowrap;
}

.service-card__vat {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- a price that is this buyer's ---------- */

/* The catalogue price, kept beside the discounted one rather than replaced by
   it: "9,50 €" alone is just a cheap rank, "13,99 € 9,50 €" is a saving. Both
   card kinds get it - same rules, two block names. */
.service-card__was,
.spotlight-card__was {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration-thickness: 1px;
}

.service-card__upgrade,
.spotlight-card__upgrade {
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.service-card__upgrade .rank-name,
.spotlight-card__upgrade .rank-name { font-weight: 800; }

/* Where the price and the button would be on a rank the buyer already holds.
   Same footprint, so a grid of cards does not go ragged when one is owned. */
.service-card__owned,
.spotlight-card__owned {
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px dashed var(--rule-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

/* Crates and gems only. Sits between the price and Pirkti because that is the
   order the decision is made in: what it costs, how many, buy. */
.store__qty {
  display: flex;
  align-items: center;
  gap: 10px;
}
.store__qty span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.store__qty input {
  width: 68px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--rule-soft);
  background: oklch(23% 0.008 260 / 0.7);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.2s ease;
}
.store__qty input:focus {
  outline: none;
  border-color: var(--blue-line);
}

.btn-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: var(--purple);
  color: white;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-buy:hover { background: var(--purple-hover); }
.btn-buy:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- the Imperatorius spotlight ---------- */

.store__spotlight { margin-top: 12px; }

/* Plain grey card, same tone as the regular service cards - the gold shows
   up as a glow around the box (box-shadow) instead of living in the
   background fill. */
.spotlight-card {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding: 34px 30px 30px;
  border: 1.5px solid oklch(80% 0.16 92 / 0.5);
  border-radius: 18px;
  background: oklch(23% 0.008 260 / 0.85);
  box-shadow: 0 0 32px 4px oklch(80% 0.16 92 / 0.25), 0 0 64px 12px oklch(80% 0.16 92 / 0.12);
  text-align: center;
  /* thickening via outline, not border-width - see the note on
     .service-card for why border-width caused the page to jump on hover.
     Outline stays at its full hover width always, transparent until
     hovered - animating outline-width itself is what made this choppy. */
  outline: 3px solid transparent;
  outline-offset: -1.5px;
  transition: border-color 0.2s ease, outline-color 0.2s ease;
  /* the sparks sit a few px outside the border on purpose */
  overflow: visible;
}
.spotlight-card:hover {
  border-color: var(--gold-bright);
  outline-color: var(--gold-bright);
}

.spotlight-card__name {
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
}

.spotlight-card__perks {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
}
.spotlight-card__perks li { margin-bottom: 8px; }
.spotlight-card__perks li:last-child { margin-bottom: 0; }
/* inline, not left-pinned - see the same note on .service-card__perks above */
.spotlight-card__perks li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  margin-bottom: 1px;
  vertical-align: middle;
  background: var(--gold);
}

/* "+ <rank> visos ranko privilegijos" - Imperatorius inherits Šitas the same
   way the grid ranks inherit each other, just sized for the bigger card */
.spotlight-card__inherit {
  margin: 0 0 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}
.spotlight-card__inherit .rank-name { font-weight: 800; }

.spotlight-card__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.spotlight-card__price-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.spotlight-card__price {
  font-size: 26px;
  font-weight: 800;
  color: var(--gold);
}

.spotlight-card__vat {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.btn-buy--gold {
  min-width: 160px;
  background: var(--gold);
  /* dark text on a light gold fill reads better than white does */
  color: oklch(22% 0.03 90);
}
.btn-buy--gold:hover { background: var(--gold-hover); }

/* six sparks scattered around the edge rather than at symmetric corners -
   each keeps its own duration/delay from .spark, so the card never flashes
   as a group the way evenly-spaced, evenly-timed sparks would */
.spotlight-card__spark--a { top: -7px;   left: 14%;   animation-duration: 5.5s; animation-delay: 0.3s; }
.spotlight-card__spark--b { top: 22%;    right: -8px; animation-duration: 8.2s; animation-delay: 2.6s; }
.spotlight-card__spark--c { bottom: -7px; left: 34%;  animation-duration: 6.8s; animation-delay: 4.4s; }
.spotlight-card__spark--d { bottom: 18%; left: -8px;  animation-duration: 9.6s; animation-delay: 1.5s; }
.spotlight-card__spark--e { top: 10%;    left: -8px;  animation-duration: 7.3s; animation-delay: 3.7s; }
.spotlight-card__spark--f { bottom: 32%; right: -8px; animation-duration: 10.4s; animation-delay: 5.9s; }

.order-status {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid var(--rule-soft);
  background: oklch(23% 0.008 260 / 0.7);
  font-size: 15px;
  font-weight: 600;
}
.order-status[data-status="paid"] {
  border-color: oklch(52% 0.19 260 / 0.6);
  color: var(--blue-soft);
}
.order-status[data-status="delivered"] {
  border-color: oklch(65% 0.17 150 / 0.6);
  color: oklch(80% 0.17 150);
}
.order-status[data-status="failed"] {
  border-color: oklch(68% 0.2 340 / 0.6);
  color: var(--pink);
}

.store__fine {
  margin: 44px auto 0;
  max-width: 480px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.store__fine code { font-size: 12px; }

@media (max-width: 620px) {
  .store { padding: 60px var(--gutter) 80px; }
  .store__you-hint { margin-bottom: 34px; }
  /* stacked, so the button is not a stub next to a full-width field */
  .store__you { gap: 16px; }
  .store__field, .store__field input, .btn-check { width: 100%; }
}

/* ---------- terms ---------- */

.terms {
  padding: 110px var(--gutter) 100px;
  max-width: 760px;
  margin: 0 auto;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.75;
}

.terms__head { text-align: center; margin-bottom: 48px; }
.terms .accent { color: var(--purple); }

.terms__version {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.terms__lead { margin: 0 0 18px; }
.terms__lead--muted { font-size: 13.5px; color: var(--muted); }

.terms__section { margin-top: 44px; }

.terms__section h2 {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
}

/* section 4 is the one a buyer is agreeing to be bound by, so it is the one
   section that does not read as more of the same body text */
.terms__section--key {
  padding: 4px 26px 22px;
  border-left: 3px solid var(--purple-dim);
  background: oklch(23% 0.008 260 / 0.4);
  border-radius: 0 14px 14px 0;
}
.terms__section--key h2 { margin-top: 20px; }

.terms__list,
.terms__defs { margin: 0; padding-left: 22px; }
.terms__list > li,
.terms__defs > li { margin-bottom: 10px; }
.terms__list > li::marker { color: var(--muted); font-weight: 700; }
.terms__defs { list-style: none; padding-left: 0; }
.terms__defs > li { padding-left: 16px; border-left: 1px solid var(--rule-soft); }

.terms strong { color: var(--text); font-weight: 700; }

.terms a {
  color: var(--purple-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.terms a:hover { color: var(--text); }

@media (max-width: 620px) {
  .terms { padding: 80px var(--gutter) 70px; font-size: 14.5px; }
  .terms__section--key { padding: 4px 16px 18px; }
}