/* =========================================================================
   blueclient.net

   The launcher's language, on a page: dark stone, hard 2px edges, radius 0,
   bevelled slabs, Inter throughout — no pixel face anywhere. Vanilla shapes
   carry the game feel; modern type carries the reading.

   The page opens on the game rather than on a picture of it. The HUD in the
   first screen is drawn here, in HTML, at the size the game draws it, with
   the same hard unblurred shadow under every character. That shadow is doing
   most of the work: it is what makes Inter read as in-game text without a
   single pixel font.
   ========================================================================= */

:root {
  --bg: #1b1b1a;
  --panel: #2b2a28;
  --panel-hover: #383631;
  --outline: #0d0d0b;
  --border: rgba(232, 226, 214, 0.11);

  --text-1: #f2f3f5;
  --text-2: #b4b0a9;
  --text-3: #8c8983;

  --accent: #00c7ff;
  --accent-hover: #2ad2ff;
  --accent-press: #00a6d6;
  --on-accent: #06222d;

  --green: #5cbe4a;
  --green-hover: #6fd15c;
  --green-press: #4aa33b;
  --on-green: #0a2408;

  /* The colour the page settles to under the first screen, and the colour
     that screen's own shadow lands on. Two places have to agree exactly or
     there is a line across the display where they meet. */
  --floor: 20, 20, 19;

  --bevel-light: rgba(255, 255, 255, 0.14);
  --bevel-dark: rgba(0, 0, 0, 0.4);
  --accent-bevel-light: rgba(255, 255, 255, 0.38);
  --accent-bevel-dark: rgba(0, 40, 56, 0.5);
  --green-bevel-light: rgba(255, 255, 255, 0.36);
  --green-bevel-dark: rgba(6, 46, 4, 0.5);

  --edge: 2px;
  --wrap: 1120px;
  --head: 64px;

  /* The game's own text shadow: one offset, pure black, no blur at all. */
  --hud-shadow: 2px 2px 0 rgba(0, 0, 0, 0.92);

  --dur-fast: 120ms;
  --dur-nav: 220ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font: Inter, "Segoe UI Variable Text", "Segoe UI", -apple-system,
          system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head) + 12px);
}

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The world, held still behind everything under the first screen. One fixed
   layer, not two — a second full-screen layer doubles the compositing for a
   wash this one can carry itself. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(18, 18, 17, 0.86), rgba(18, 18, 17, 0.86)),
    url("assets/world-sunrise.jpg") center / cover no-repeat;
}

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

.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: var(--edge) solid var(--accent); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }


/* ---------------------------------------------------------------- masthead */

.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--head);
  background: rgba(16, 16, 15, 0.2);
  border-bottom: var(--edge) solid transparent;
  transition: background var(--dur-nav) var(--ease),
              border-color var(--dur-nav) var(--ease);
}
.masthead.is-stuck {
  background: rgba(16, 16, 15, 0.94);
  border-bottom-color: var(--outline);
}

.masthead__inner {
  height: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 26px; height: 26px; image-rendering: pixelated; }
.brand__name {
  color: var(--text-1);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: var(--edge) solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-nav) var(--ease);
}
.nav a:hover { color: var(--text-1); border-bottom-color: var(--accent); }


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

/* Bevelled: light top and left, dark bottom and right, flat fill between.
   Hover lightens the fill; press flips the bevel and dips the slab. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border: var(--edge) solid var(--outline);
  background: var(--panel);
  color: var(--text-1);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 2px 2px 0 0 var(--bevel-light),
              inset -2px -2px 0 0 var(--bevel-dark);
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--panel-hover); }
.btn:active {
  transform: translateY(1px);
  box-shadow: inset -2px -2px 0 0 var(--bevel-light),
              inset 2px 2px 0 0 var(--bevel-dark);
}

.btn--accent {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 2px 2px 0 0 var(--accent-bevel-light),
              inset -2px -2px 0 0 var(--accent-bevel-dark);
}
.btn--accent:hover { background: var(--accent-hover); }
.btn--accent:active {
  background: var(--accent-press);
  box-shadow: inset -2px -2px 0 0 var(--accent-bevel-light),
              inset 2px 2px 0 0 var(--accent-bevel-dark);
}

.btn--green {
  background: var(--green);
  color: var(--on-green);
  box-shadow: inset 2px 2px 0 0 var(--green-bevel-light),
              inset -2px -2px 0 0 var(--green-bevel-dark);
}
.btn--green:hover { background: var(--green-hover); }
.btn--green:active {
  background: var(--green-press);
  box-shadow: inset -2px -2px 0 0 var(--green-bevel-light),
              inset 2px 2px 0 0 var(--green-bevel-dark);
}

.btn--sm { padding: 9px 15px; font-size: 14px; }
.btn--xl { padding: 16px 26px; font-size: 16px; }

.ico {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}


/* =========================================================================
   THE FRAME — the game, running, with the page's words inside it.
   ========================================================================= */

.frame {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.frame__world {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg,
      rgba(14, 16, 20, 0.34) 0%,
      rgba(14, 16, 20, 0.40) 46%,
      rgba(14, 16, 20, 0.56) 100%),
    url("assets/world-sunrise.jpg") center / cover no-repeat;
  filter: saturate(1.12) contrast(1.04);
}

/* The floor the frame lands on, so the section below starts on exactly the
   colour the frame ends on. */
.frame::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--floor), 0) 0%,
    rgba(var(--floor), 0.5) 48%,
    rgba(var(--floor), 0.9) 82%,
    rgb(var(--floor)) 100%);
}


/* ------------------------------------------------------------- the words */

.frame__say {
  position: relative;
  z-index: 3;
  max-width: 560px;
  margin-left: max(24px, calc(50vw - var(--wrap) / 2 + 24px));
  padding: calc(var(--head) + 104px) 0 120px;
}

.say__title {
  margin: 0 0 18px;
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.032em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.say__accent { color: var(--accent); }

.say__lede {
  margin: 0 0 28px;
  max-width: 44ch;
  font-size: 17.5px;
  color: #e2e0dc;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.say__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.say__meta {
  margin: 20px 0 0;
  font-size: 13.5px;
  color: #cdc9c2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}


/* =========================================================================
   THE HUD — drawn at the size the game draws it.
   ========================================================================= */

.hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: var(--hud-shadow);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

.hud__corner { position: absolute; display: flex; flex-direction: column; gap: 3px; }
.hud__corner--tl { top: calc(var(--head) + 14px); left: 16px; align-items: flex-start; }
.hud__corner--tr { top: calc(var(--head) + 14px); right: 16px; align-items: flex-end; }
.hud__corner--bl { bottom: 30px; left: 16px; align-items: flex-start; }
.hud__corner--br { bottom: 16px; right: 16px; align-items: flex-end; }

/* One readout. Text on the world with a hard shadow — no plate behind it,
   because the game does not put one there either. */
.mod { white-space: nowrap; line-height: 1.45; }
.mod__k { font-weight: 700; }
.mod__dim { color: #bdbdbd; font-weight: 400; }

/* The pieces that leave when the switch is flipped. They go at once — the
   stagger belongs to the arrival, not to this. */
.frame[data-mode="vanilla"] [data-bc] { opacity: 0; transition-delay: 0s; }

/* Pixel art, kept hard-edged at every size. */
.pix {
  width: 9px;
  height: 9px;
  display: inline-block;
  fill: currentColor;
  shape-rendering: crispEdges;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75));
  flex: none;
}
.pix.is-off { opacity: 0.26; }

.i-grass   { --ct: #7cb342; --cl: #6d4c33; --cr: #563c28; }
.i-stone   { --ct: #9e9e97; --cl: #7c7c76; --cr: #62625d; }
.i-gold    { --ct: #f7d047; --cl: #c9a52f; --cr: #a58526; }
.i-diamond { --ct: #4fd6e0; --cl: #35a8b4; --cr: #2b8993; }
.i-iron    { color: #d6d6d2; }


/* ------------------------------------------------------- crosshair + world */

.crosshair {
  position: absolute;
  top: 50%; left: 50%;
  width: 17px; height: 17px;
  margin: -8px 0 0 -8px;
  opacity: 0.8;
  mix-blend-mode: difference;
  background:
    linear-gradient(#fff, #fff) center / 17px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 17px no-repeat;
}

/* A waypoint standing in the world. The beam is the one thing here allowed
   to glow — the game's own beam glows, and this is world, not chrome. */
.beacon {
  position: absolute;
  top: 21%;
  left: 61%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --beam: 62, 196, 109;
}
.beacon--green { --beam: 62, 196, 109; }
.beacon--amber { --beam: 240, 180, 41; top: 30%; }

.beacon__tag {
  padding: 4px 9px;
  background: rgba(8, 9, 8, 0.66);
  border: var(--edge) solid rgb(var(--beam));
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: var(--hud-shadow);
}
.beacon__dist { color: rgb(var(--beam)); font-weight: 700; margin-left: 5px; }

.beacon__beam {
  width: 5px;
  height: 30vh;
  margin-top: 6px;
  background: linear-gradient(180deg,
    rgba(var(--beam), 0.85) 0%,
    rgba(var(--beam), 0.62) 55%,
    rgba(var(--beam), 0) 100%);
  box-shadow: 0 0 14px 2px rgba(var(--beam), 0.38);
  animation: breathe 5.5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}


/* --------------------------------------------------------------- the bars */

.hud__bottom {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.bars { width: 382px; display: flex; flex-direction: column; gap: 2px; }
.bars__row { display: flex; }
.bars__row--split { justify-content: space-between; }
.pips { display: flex; gap: 1px; }
.pips--heart  { color: #e8393f; }
.pips--food   { color: #c68a3e; }
.pips--armour { color: #e4e4e0; }

.xp {
  position: relative;
  height: 6px;
  margin-top: 9px;
  background: #0d0f0c;
  border: 1px solid #000;
}
.xp__fill { position: absolute; inset: 0 38% 0 0; background: #7ec820; }
.xp__lvl {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  color: #7ec820;
  font-size: 13px;
  font-weight: 700;
  text-shadow: var(--hud-shadow);
}

/* The hotbar at twice the size the game draws it.

   Vanilla's bar is 182x22: a 1px frame and nine 20x20 slots hard against one
   another. So this is a 2px frame and nine 40px slots with nothing between
   them. The slots are told apart by the bar's own shading — vanilla puts no
   border round each one, and drawing one is exactly what made an earlier
   version read as nine separate boxes instead of a hotbar.

   The held slot wears a frame that stands proud of the bar on every side and
   overlaps its neighbours, which is what the game's own selector does. */
.hotbar {
  display: flex;
  padding: 2px;
  background: rgba(24, 24, 24, 0.55);
  border: 2px solid rgba(0, 0, 0, 0.46);
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.24),
              inset -2px -2px 0 0 rgba(0, 0, 0, 0.32);
}
.hotbar__slot {
  position: relative;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.14);
  box-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.26),
              inset -2px -2px 0 0 rgba(255, 255, 255, 0.07);
}
.hotbar__slot .pix { width: 30px; height: 30px; }
.hotbar__slot.is-held {
  z-index: 1;
  background: rgba(0, 0, 0, 0.08);
  box-shadow: none;
  outline: 4px solid rgba(255, 255, 255, 0.95);
}
.hotbar__n {
  position: absolute;
  right: 2px; bottom: 0;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: var(--hud-shadow);
}


/* ------------------------------------------------------ keystrokes + gear */

/* W over A S D, with the two mouse buttons under them — placed explicitly,
   because letting six keys auto-flow into three columns puts A beside W. */
.keys {
  display: grid;
  grid-template-columns: repeat(6, 12px);
  gap: 3px;
  justify-content: end;
}
.keys:not(.keys--flat) .key:nth-child(1) { grid-area: 1 / 3 / 2 / 5; }
.keys:not(.keys--flat) .key:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
.keys:not(.keys--flat) .key:nth-child(3) { grid-area: 2 / 3 / 3 / 5; }
.keys:not(.keys--flat) .key:nth-child(4) { grid-area: 2 / 5 / 3 / 7; }
.keys:not(.keys--flat) .key:nth-child(5) { grid-area: 3 / 1 / 4 / 4; }
.keys:not(.keys--flat) .key:nth-child(6) { grid-area: 3 / 4 / 4 / 7; }
.key {
  height: 26px;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 9, 0.5);
  border: var(--edge) solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  text-shadow: var(--hud-shadow);
  transition: background var(--dur-fast) var(--ease);
}
.key--wide { height: 20px; font-size: 10.5px; }
.key.is-down { background: rgba(255, 255, 255, 0.82); color: #14140f; text-shadow: none; }

.keys--flat { display: inline-grid; grid-template-columns: repeat(4, 24px); }
.keys--flat .key:first-child { grid-column: auto; }
.keys--flat .key { height: 24px; }

.gear { display: flex; gap: 5px; }
.gear__slot {
  position: relative;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 9, 0.42);
  border: var(--edge) solid rgba(255, 255, 255, 0.18);
}
.gear__slot .pix { width: 17px; height: 17px; }
.gear__dur {
  position: absolute;
  left: 0; right: 0; bottom: -15px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #8ce06a;
  text-shadow: var(--hud-shadow);
}
.gear--flat { display: inline-flex; }


/* ---------------------------------------------------------- the switch */

.switch {
  position: absolute;
  right: 16px;
  bottom: 92px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.switch__hint {
  margin: 0;
  font-size: 12.5px;
  color: #d9d6d0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

/* Segmented, with a thumb that slides — one of the sanctioned glides. */
/* Wide enough that half of it holds the longer of the two words, so both
   halves come out the same width and the sliding thumb lands square on the
   label rather than part way across it. */
.seg {
  position: relative;
  display: flex;
  min-width: 220px;
  padding: 3px;
  background: rgba(16, 16, 15, 0.86);
  border: var(--edge) solid var(--outline);
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.1),
              inset -2px -2px 0 0 rgba(0, 0, 0, 0.42);
}
.seg__btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;                    /* basis 0, so the two halves are equal */
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-nav) var(--ease);
}
.seg__btn.is-on { color: var(--on-accent); }
.seg__thumb {
  position: absolute;
  top: 3px; bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--accent);
  transition: transform var(--dur-nav) var(--ease);
}
.seg[data-at="vanilla"] .seg__thumb { transform: translateX(0); }
.seg[data-at="blue"] .seg__thumb { transform: translateX(100%); }

/* The nudge downward at the foot of the frame. */
.frame__more {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: 4;
  width: 44px; height: 30px;
  display: grid;
  place-items: center;
  color: var(--text-2);
}
.frame__more svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square;
}
.frame__more:hover { color: var(--text-1); }


/* =========================================================================
   SHEETS — everything below the frame.
   ========================================================================= */

.sheet { position: relative; padding: 96px 0; }

/* Lifts out of the frame's floor colour, so there is no line where they meet. */
.sheet--emerge { isolation: isolate; }
.sheet--emerge::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 300px;
  z-index: -1;
  background: linear-gradient(180deg, rgb(var(--floor)), rgba(var(--floor), 0));
}

/* A band, faded in at both ends so it never draws an edge. */
.sheet--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(16, 16, 15, 0) 0,
    rgba(16, 16, 15, 0.74) 120px,
    rgba(16, 16, 15, 0.74) calc(100% - 120px),
    rgba(16, 16, 15, 0) 100%);
}

.lede { max-width: 640px; margin: 0 0 40px; }
.lede h2, .split__say h2 {
  margin: 0 0 14px;
  font-size: clamp(27px, 3.2vw, 36px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.026em;
}
.lede p, .split__say p {
  margin: 0;
  color: var(--text-2);
  font-size: 16.5px;
}

.note {
  margin: 32px 0 0;
  max-width: 62ch;
  color: var(--text-3);
  font-size: 14.5px;
}


/* ------------------------------------------------- the module rail (chips) */

.rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}

.chip {
  margin: 0;
  border: var(--edge) solid var(--outline);
  background: rgba(30, 30, 28, 0.86);
  box-shadow: inset 2px 2px 0 0 var(--bevel-light),
              inset -2px -2px 0 0 var(--bevel-dark);
  transition: background var(--dur-fast) var(--ease);
}
.chip:hover { background: rgba(42, 41, 38, 0.92); }
.chip--wide { grid-column: span 2; }

/* The readout, shown on a scrap of the world so it reads the way it reads in
   game rather than the way text reads on a card. */
.chip__art {
  height: 66px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  background: url("assets/world-sunrise.jpg") center 62% / 620px auto no-repeat;
  box-shadow: inset 0 0 0 999px rgba(16, 20, 14, 0.42);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-shadow: var(--hud-shadow);
  font-variant-numeric: tabular-nums;
}
/* A different scrap of the world under each one, so fourteen of them in a grid
   do not read as one tile repeated. */
.chip:nth-child(4n+1) .chip__art { background-position: 18% 58%; }
.chip:nth-child(4n+2) .chip__art { background-position: 72% 66%; }
.chip:nth-child(4n+3) .chip__art { background-position: 44% 38%; }
.chip:nth-child(4n)   .chip__art { background-position: 90% 74%; }

/* The minimap, in the colours the game paints a filled map with — because
   that is exactly what the real one uses. */
.mini {
  position: relative;
  display: block;
  width: 52px; height: 52px;
  /* The parchment edge a filled map is drawn on — seven parts in a hundred
     and forty-two, the ratio vanilla stretches its own map frame to. */
  border: 3px solid #d5cbb0;
  box-shadow: inset 0 0 0 1px rgba(90, 74, 48, 0.5);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.22) 0 26%, transparent 0 44%,
                            rgba(255,255,255,0.10) 0 58%, transparent 0 100%),
    linear-gradient(90deg, #6f9440 0 28%, #4a7fb5 0 44%, #6f9440 0 66%,
                           #8f8d85 0 82%, #7a7b74 0 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
}
/* The one in the first screen, at the size it is actually drawn in game. */
.mini--big {
  width: 116px; height: 116px;
  margin-bottom: 5px;
  border-width: 6px;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.22) 0 22%, transparent 0 38%,
                            rgba(255,255,255,0.10) 0 54%, transparent 0 72%,
                            rgba(0,0,0,0.16) 0 100%),
    linear-gradient(90deg, #6f9440 0 22%, #4a7fb5 0 38%, #6f9440 0 58%,
                           #8f8d85 0 74%, #7a7b74 0 88%, #6f9440 0 100%);
}

.mini__dot {
  position: absolute;
  top: 9px; right: 10px;
  width: 6px; height: 6px;
  background: #3ec46d;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.66);
}
.mini--big .mini__dot { top: 18px; right: 22px; }
/* One that has run off the map, held against the edge the way the real one
   holds it — the direction is worth more than the distance once it is gone. */
.mini__dot--far {
  top: auto; right: auto;
  bottom: 3px; left: 34px;
  background: #f0b429;
}
.mini__north {
  position: absolute;
  top: 4px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  background: #e5484d;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.66);
}
/* The player, always in the middle, always pointing up. */
.mini__me {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  margin: -6px 0 0 -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid #fff;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8));
}

.chip figcaption {
  padding: 9px 12px 10px;
  border-top: var(--edge) solid rgba(0, 0, 0, 0.5);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
}


/* --------------------------------------------------------- two-up sections */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 52px;
  align-items: center;
}
/* Flipped, the picture takes the wide column and the words the narrow one —
   swapping the order alone would leave the picture in the narrow track. */
.split--flip { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.split--flip .split__say { order: 2; }
.split__say p { margin-bottom: 20px; }

.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 10px;
  color: var(--text-2);
  font-size: 15.5px;
}
/* A small hard square rather than a tick glyph — the page has no round
   corners in it and a checkmark would be the only curve on the screen. */
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 8px; height: 8px;
  background: var(--accent);
}


/* -------------------------------------------------------- the world scenes */

.scene {
  position: relative;
  aspect-ratio: 16 / 10;
  border: var(--edge) solid var(--outline);
  overflow: hidden;
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08),
              inset -2px -2px 0 0 rgba(0, 0, 0, 0.45);
}
.scene__world {
  position: absolute;
  inset: 0;
  background: url("assets/world-sunrise.jpg") 30% 78% / 190% auto no-repeat;
  filter: saturate(1.08);
}
.scene__world--ridge { background-position: 68% 34%; background-size: 165% auto; }
.scene__hud { position: absolute; inset: 0; }
/* Top and bottom both pinned, so the beacon has a real height for the beam to
   fill. A percentage height on the beam alone resolves against an auto-height
   parent and collapses to nothing. */
.scene__hud .beacon { top: 13%; bottom: 24%; }
.scene__hud .beacon__beam { height: auto; flex: 1; }

/* The linked block, outlined the way the mod outlines it: lines only, on the
   block's own edges, nothing filled. */
.pickout {
  position: absolute;
  left: 19%;
  bottom: 12%;
  width: 76px; height: 76px;
}
.pickout svg { width: 100%; height: 100%; display: block; }
.pickout path {
  fill: none;
  stroke: #3ec46d;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}


/* ------------------------------------------------ the launcher, in the page */

.app {
  border: var(--edge) solid var(--outline);
  background: #1e1e1c;
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.09),
              inset -2px -2px 0 0 rgba(0, 0, 0, 0.45);
  overflow: hidden;
  font-size: 13px;
}
.app__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #191918;
  border-bottom: var(--edge) solid #000;
  color: var(--text-3);
  font-size: 12px;
}
.app__dot { width: 12px; height: 12px; background: var(--accent); flex: none; }

.app__tabs {
  display: flex;
  gap: 22px;
  padding: 0 16px;
  background: #232220;
  border-bottom: var(--edge) solid #000;
}
.app__tab {
  padding: 12px 2px;
  color: var(--text-3);
  font-weight: 500;
  border-bottom: var(--edge) solid transparent;
}
.app__tab.is-on { color: var(--text-1); border-bottom-color: var(--accent); }

.app__body {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
  padding: 14px;
  background:
    linear-gradient(rgba(18, 18, 17, 0.72), rgba(18, 18, 17, 0.72)),
    url("assets/world-sunrise.jpg") center 40% / cover no-repeat;
}

.app__main {
  position: relative;
  min-height: 216px;
  border: var(--edge) solid var(--outline);
  background: url("assets/world-sunrise.jpg") 40% 55% / 320% auto no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
}
.app__label {
  align-self: flex-start;
  padding: 5px 9px;
  background: rgba(12, 12, 11, 0.8);
  border: var(--edge) solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-shadow: var(--hud-shadow);
}
.app__play {
  align-self: center;
  width: 74%;
  padding: 13px;
  text-align: center;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  border: var(--edge) solid var(--outline);
  box-shadow: inset 2px 2px 0 0 var(--accent-bevel-light),
              inset -2px -2px 0 0 var(--accent-bevel-dark);
}

.app__side { display: flex; flex-direction: column; gap: 6px; }
.app__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  background: rgba(38, 37, 34, 0.92);
  border: var(--edge) solid var(--outline);
  box-shadow: inset 2px 2px 0 0 var(--bevel-light),
              inset -2px -2px 0 0 var(--bevel-dark);
}
.app__row.is-on { border-color: var(--accent); }
.app__row b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-1); }
.app__row i { display: block; font-style: normal; font-size: 11px; color: var(--text-3); }
.app__sw { width: 24px; height: 24px; flex: none; }
.app__sw.i-grass   { background: #7cb342; }
.app__sw.i-diamond { background: #4fd6e0; }
.app__sw.i-gold    { background: #f7d047; }


/* ----------------------------------------------------------------- specs */

.specs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 2px;
}
.spec {
  padding: 20px 22px;
  background: rgba(28, 28, 26, 0.74);
  border: var(--edge) solid rgba(0, 0, 0, 0.5);
}
.spec dt { font-weight: 600; font-size: 16px; margin-bottom: 5px; }
.spec dd { margin: 0; color: var(--text-2); font-size: 15px; }


/* -------------------------------------------------------------------- Q&A */

.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 14px;
}
.qa {
  padding: 22px 24px;
  background: rgba(30, 30, 28, 0.86);
  border: var(--edge) solid var(--outline);
  box-shadow: inset 2px 2px 0 0 var(--bevel-light),
              inset -2px -2px 0 0 var(--bevel-dark);
}
.qa h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 600; }
.qa p { margin: 0; color: var(--text-2); font-size: 15px; }
.qa strong { color: var(--text-1); font-weight: 600; }

.closer { margin-top: 56px; text-align: center; }
.closer__say {
  margin: 0 0 18px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.026em;
}
.closer .say__meta { text-shadow: none; color: var(--text-3); }


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

.footer {
  position: relative;
  padding: 40px 0 46px;
  background: rgba(12, 12, 11, 0.92);
  border-top: var(--edge) solid var(--outline);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-bottom: 18px;
}
.footer__name { font-weight: 700; }
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.footer__links a { color: var(--text-2); text-decoration: none; font-size: 14.5px; }
.footer__links a:hover { color: var(--text-1); }
.footer__legal { margin: 0; color: var(--text-3); font-size: 12.5px; max-width: 70ch; }


/* =========================================================================
   MOTION — micro only. A short rise as a section arrives, the HUD arriving
   in the order the game would draw it, and nothing else.
   ========================================================================= */

.reveal { opacity: 0; transform: translateY(8px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

/* The HUD does not animate in. It is simply there, the way it is there the
   moment a world loads — and nothing about seeing it depends on a frame
   callback firing or an animation being allowed to finish. The only thing
   that moves it is the switch. */
.hud [data-step] { transition: opacity var(--dur-nav) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .beacon__beam { animation: none; }
  .hud [data-step] { opacity: 1 !important; transition: none !important; }
  .frame__world { transform: none !important; }
}


/* =========================================================================
   NARROWER SCREENS
   ========================================================================= */

@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--flip .split__say { order: 0; }
  .hud__corner--bl, .hud__corner--br { display: none; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .sheet { padding: 72px 0; }
  .frame__say { padding-top: calc(var(--head) + 56px); padding-bottom: 230px; }
  .say__lede { font-size: 16.5px; }
  .beacon { left: auto; right: 7%; }
  .rail { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .specs, .qa-grid { grid-template-columns: 1fr; }
  .switch { bottom: 128px; }
}

@media (max-width: 620px) {
  .hud__corner--tr { display: none; }
  .hotbar__slot { width: 32px; height: 32px; }
  .hotbar__slot .pix { width: 18px; height: 18px; }
  .bars { width: 306px; }
  .switch { left: 16px; right: 16px; align-items: stretch; bottom: 136px; }
  .switch__hint { text-align: center; }
  .say__actions .btn { width: 100%; }
  .frame__more { display: none; }
  .chip--wide { grid-column: span 1; }
}