/* ============================================================================
   Pen Fire landing: the design system from the approved comp.
   Built to the game's own look, not the warm monochrome landing template:
   brush display type (Permanent Marker, skewed the way the wordmark is),
   Caveat for the handwritten margin notes, Barlow Condensed for labels and
   Nunito for text. Blue is the voice, red is the accent, gold is the crown.

   The page is a CENTRED COLUMN, not full-bleed: every section lives inside
   .page (--col) and nothing stretches to the viewport edge.
   ========================================================================= */
:root {
  color-scheme: light;

  /* paper and ink */
  --paper: #fbfaf7;
  --card: #ffffff;
  --tint: #f4f2ec;
  --ink: #111111;
  --ink-2: #55524d;
  --ink-3: #8b877f;
  --hairline: rgba(20, 18, 14, 0.1);

  /* the game's inks */
  --blue: #1e4fd8;
  --dblue: #1235b0;
  --red: #e0323c;
  --gold: #f5c518;
  --purple: #8f3fe0;
  --green: #2f9a4a;

  /* type */
  --brush: "Permanent Marker", "Marker Felt", Impact, sans-serif;
  /* the wordmark only: swapped on its own, never with the headings */
  --wordmark: "Permanent Marker", "Marker Felt", Impact, sans-serif;
  /* section headings. The hand is kept for the two ends of the page (the
     hero wordmark and the closing call to action); everything between them
     is set in this, which is the same face the numbered labels already use. */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --hand: "Caveat", "Patrick Hand", cursive;
  --caps: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ui: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-bloom: cubic-bezier(0.16, 1.02, 0.3, 1);

  /* the reading column. The house landings run 440 to 620px single-column;
     this one carries a two-column hero and rows of six, so it sits wider, but
     no wider than it has to. Dial it here. */
  --col: 780px;

  --shadow-card: 0 1px 2px rgba(20, 18, 14, 0.05), 0 10px 24px -12px rgba(20, 18, 14, 0.18);
  --shadow-lift: 0 2px 4px rgba(20, 18, 14, 0.06), 0 18px 36px -14px rgba(20, 18, 14, 0.26);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img {
  max-width: 100%;
}
button {
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px rgba(30, 79, 216, 0.55);
  border-radius: 8px;
}
::selection {
  background: rgba(30, 79, 216, 0.16);
}

/* the column: everything on the page lives inside it */
.page {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 28px 0;
}

/* ---------- display type ---------- */
/* Permanent Marker skewed the way the PEN FIRE wordmark is drawn, so the
   headings sit in the same hand as the logo. */
.display {
  margin: 0;
  font: 800 clamp(26px, 4vw, 40px) / 1.04 var(--display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
/* Section 08 closes the page, so it keeps the hand and the skew. A skew on a
   condensed grotesque reads as a faked italic; on a brush face it reads as
   the hand it already is. */
.download .display {
  font: 400 clamp(28px, 4.4vw, 42px) / 1.02 var(--brush);
  letter-spacing: 0.01em;
  transform: skewX(-6deg);
  /* centred copy, so the skew pivots on the middle: from the left bottom it
     would push the heading off the axis everything else sits on */
  transform-origin: bottom center;
}
.display em {
  font-style: normal;
  color: var(--red);
}
.lede {
  margin: 14px 0 0;
  max-width: 46ch;
  font: 400 15px/1.62 var(--ui);
  color: var(--ink-2);
  text-wrap: pretty;
}
/* handwritten margin notes */
.hand {
  position: relative;
  z-index: 2;
  font: 700 clamp(17px, 2vw, 21px) / 1.06 var(--hand);
  color: var(--blue);
  white-space: nowrap;
  text-shadow:
    0 1px 0 var(--paper),
    0 -1px 0 var(--paper),
    1px 0 0 var(--paper),
    -1px 0 0 var(--paper);
}
.sec-num {
  margin: 0 0 18px;
  font: 700 12px/1 var(--caps);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  font: 800 14px/1 var(--ui);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.16s var(--ease-out), box-shadow 0.2s var(--ease-out), background-color 0.16s var(--ease-out);
}
.btn-ink {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 10px 22px -12px rgba(0, 0, 0, 0.6);
}
.btn-ink:hover {
  background: #000;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 14px 26px -12px rgba(0, 0, 0, 0.7);
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn-arrow {
  font-size: 15px;
}
.lockable {
  display: inline-flex;
  justify-content: center;
}

/* ---------- top nav ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0 6px;
}
.nav-mark {
  display: inline-flex;
  width: 30px;
  height: 30px;
  transition: transform 0.16s var(--ease-out);
}
/* the painted crown, not a stroked path: it carries its own blue, so there is
   no currentColor to set here */
.nav-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nav-mark:hover {
  transform: translateY(-1px) rotate(-4deg);
}
.nav-links {
  display: flex;
  gap: 26px;
  margin: 0 auto;
}
.nav-links a {
  position: relative;
  font: 700 14px/1 var(--ui);
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.16s var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-out);
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-links a:hover::after {
  transform: scaleX(1);
}
.nav-cta {
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
}

/* ---------- store badges ---------- */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 18px 0 15px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  text-align: left;
  transition: transform 0.16s var(--ease-out), box-shadow 0.2s var(--ease-out);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 12px 24px -14px rgba(0, 0, 0, 0.7);
}
.store:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 18px 30px -14px rgba(0, 0, 0, 0.75);
}
.store:active {
  transform: translateY(0) scale(0.99);
}
.store svg {
  width: 24px;
  height: 24px;
  flex: none;
}
.store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.store-text small {
  font: 600 9.5px/1.2 var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}
.store-text b {
  font: 700 15px/1.2 var(--ui);
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: 20px;
  padding: 26px 0 54px;
}
/* the wordmark, set rather than drawn: Permanent Marker skewed the way the
   logo art is, PEN in the blue ink and FIRE in the red */
.hero-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0 0 14px;
  padding-top: 22px;
}
.mark-word {
  /* sized to the column, not the viewport, so PEN FIRE stays on one line */
  font: 400 clamp(40px, 6vw, 62px) / 0.92 var(--wordmark);
  white-space: nowrap;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  transform: skewX(-8deg);
  transform-origin: left bottom;
}
.mark-pen {
  color: var(--blue);
}
.mark-fire {
  color: var(--red);
}
.mark-tag {
  position: relative;
  align-self: flex-start;
  margin-left: 8%;
  font: 700 clamp(16px, 2vw, 20px) / 1 var(--hand);
  color: var(--blue);
  white-space: nowrap;
  transform: skewX(-8deg);
}
.mark-rule {
  display: block;
  width: 78%;
  height: 8px;
  margin-top: 1px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 3;
  stroke-linecap: round;
}
/* flicked ink, so the lettering sits in the same mess as the art */
.mark-splat {
  position: absolute;
  border-radius: 46% 54% 52% 48%;
  background: var(--blue);
  pointer-events: none;
}
.mark-splat-a {
  width: 13px;
  height: 11px;
  top: 26%;
  right: 12%;
  opacity: 0.9;
  transform: rotate(18deg);
  box-shadow: 14px 10px 0 -4px var(--blue), 26px -4px 0 -6px var(--blue);
}
.mark-splat-b {
  width: 9px;
  height: 8px;
  bottom: 16%;
  left: -4px;
  opacity: 0.85;
  transform: rotate(-12deg);
  box-shadow: -6px 12px 0 -3px var(--blue);
}
.hero .lede {
  max-width: 34ch;
  font-size: 14.5px;
}
.hero-art {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.hero-art img {
  display: block;
  width: min(100%, 420px);
  height: auto;
  /* the art carries its own paper: multiply drops it onto ours so no white box
     shows, and the mask fades the sketch out at the edges. The radii are loose
     on purpose: this art runs ink to all four edges, and the tighter mask this
     replaced washed out the shoe, the left flag and the right splatter. */
  mix-blend-mode: multiply;
  mask-image: radial-gradient(78% 80% at 50% 50%, #000 55%, transparent 96%);
}

/* ---------- sections ---------- */
.sec {
  padding: 54px 0;
  border-top: 1px solid var(--hairline);
}
.sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
.sec-head-text {
  min-width: 0;
}
.more {
  flex: none;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 800 13px/1 var(--ui);
  letter-spacing: 0.02em;
  color: var(--blue);
  text-decoration: none;
  text-transform: uppercase;
  transition: gap 0.2s var(--ease-out), color 0.16s var(--ease-out);
}
.more:hover {
  gap: 10px;
  color: var(--dblue);
}

/* ---------- 01 gameplay ---------- */
.gp {
  display: grid;
  /* a third to the copy, two thirds to the phone. It was 0.85 : 1.15, which
     gave the demo a 429px stage; this takes it to 497px. Going the whole way
     to 1 : 3 would leave the lede about 23 characters a line, which is where
     it stops reading as a paragraph. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 28px;
}
/* The landscape phone the gameplay plays in: a machined bezel with the island
   on the short edge, the side buttons, an inset screen and a soft glare, so it
   reads as a handset rather than a rounded rectangle. */
.device {
  position: relative;
}
.device-body {
  position: relative;
  padding: 11px 15px;
  border-radius: 34px;
  background: linear-gradient(150deg, #4a4a52 0%, #1a1a1f 16%, #101014 52%, #26262c 88%, #55555e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(20, 18, 14, 0.3),
    0 26px 44px -18px rgba(20, 18, 14, 0.55);
}
/* the island sits on the left short edge when the phone is held landscape */
.device-island {
  position: absolute;
  left: 5px;
  top: 50%;
  width: 7px;
  height: 54px;
  translate: 0 -50%;
  border-radius: 999px;
  background: #050507;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.device-btn {
  position: absolute;
  background: linear-gradient(180deg, #3a3a42, #1c1c21);
  border-radius: 2px;
}
/* volume pair along the top edge, power on the bottom */
.device-btn.vol-a {
  top: -2px;
  left: 26%;
  width: 34px;
  height: 3px;
}
.device-btn.vol-b {
  top: -2px;
  left: calc(26% + 42px);
  width: 34px;
  height: 3px;
}
.device-btn.power {
  bottom: -2px;
  right: 24%;
  width: 52px;
  height: 3px;
}
.device-screen {
  position: relative;
  aspect-ratio: 1280 / 634;
  border-radius: 20px;
  overflow: hidden;
  background: #dfe4f2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.device-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* a low sheen across the glass, gone the moment it plays */
.device-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 26%, transparent 42%);
  transition: opacity 0.4s var(--ease-out);
}
.device.playing .device-glare {
  opacity: 0;
}
.device-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  transition: opacity 0.24s var(--ease-out);
}
.device-play svg {
  position: relative;
  width: 22px;
  height: 22px;
  margin-left: 3px;
  fill: var(--ink);
}
.device-play::before {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s var(--ease-bloom);
}
.device-play:hover::before {
  transform: scale(1.07);
}
.device-play:active::before {
  transform: scale(0.96);
}
.device.playing .device-play {
  opacity: 0;
  pointer-events: none;
}
/* the red action slashes at the top corners */
.slash {
  position: absolute;
  top: -12px;
  width: 26px;
  height: 26px;
  pointer-events: none;
  background:
    linear-gradient(var(--red), var(--red)) 0 40% / 100% 3px no-repeat,
    linear-gradient(var(--red), var(--red)) 0 100% / 70% 3px no-repeat;
  border-radius: 2px;
}
.slash-l {
  left: -14px;
  transform: rotate(38deg);
}
.slash-r {
  right: -14px;
  transform: rotate(142deg);
}
/* ---------- 02 characters ---------- */
/* Three across, two rows. The card art is a whole illustration with the name
   and tagline already in it, so it is never cropped: the tile takes the
   image's own 760 x 550 shape and the only text is the weapon. */
.fighters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.fighter {
  --ink-c: var(--blue);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out);
}
.fighter:hover {
  transform: translateY(-4px);
}
.fighter:active {
  transform: translateY(-1px) scale(0.995);
}
.fighter-art {
  display: block;
  aspect-ratio: 760 / 550;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: box-shadow 0.2s var(--ease-out);
}
.fighter:hover .fighter-art {
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-lift);
}
/* the whole card, never cropped */
.fighter-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.fighter-weapon {
  font: 700 11.5px/1.2 var(--caps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-2);
}

/* ---------- 03 game modes ---------- */
.modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.mode {
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease-out);
}
.mode:hover {
  transform: translateY(-3px);
}
.mode-art {
  height: 104px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tint);
  margin-bottom: 12px;
}
.mode-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mode-name {
  font: 400 19px/1 var(--brush);
  text-transform: uppercase;
  transform: skewX(-6deg);
  transform-origin: left;
  margin-bottom: 6px;
}
.mode-desc {
  font: 400 13px/1.45 var(--ui);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- 04 world styles ---------- */
.worlds {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.world {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s var(--ease-out);
}
.world:hover {
  transform: translateY(-3px);
}
.world-art {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.world-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.world-name {
  font: 700 11.5px/1.2 var(--caps);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-2);
}

/* ---------- 05 play with friends ---------- */
.friends {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
}
.friends .btn {
  margin-top: 22px;
}
.friends-art {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.friends-art img {
  display: block;
  width: min(100%, 400px);
  height: auto;
}
.note-friends {
  position: absolute;
  right: -4px;
  bottom: 4px;
  transform: rotate(-5deg);
}

/* ---------- 06 news & events ---------- */
.news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 148px;
  padding: 16px;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
  background: #16151a;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.news-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 40%;
  z-index: -2;
  transition: transform 0.4s var(--ease-out);
}
.news-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(10, 9, 12, 0.94) 38%, rgba(10, 9, 12, 0.4) 72%, rgba(10, 9, 12, 0.15));
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.news-card:hover img {
  transform: scale(1.05);
}
.news-tag {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 4px 8px;
  border-radius: 5px;
  font: 800 10px/1 var(--caps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.news-tag.event {
  background: var(--red);
}
.news-tag.season {
  background: var(--blue);
}
.news-tag.update {
  background: #4a4640;
}
.news-title {
  margin-top: 14px;
  font: 400 18px/1.05 var(--brush);
  text-transform: uppercase;
  transform: skewX(-6deg);
  transform-origin: left;
}
.news-body {
  margin-top: 6px;
  font: 400 12.5px/1.45 var(--ui);
  color: rgba(255, 255, 255, 0.72);
}
.news-when {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font: 700 11px/1 var(--caps);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.news-when svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ---------- 07 download ---------- */
.download {
  border-bottom: 1px solid var(--hairline);
}
/* The closing art is panoramic, so this section stacks rather than splitting:
   squeezed into the old 320px right column the figure and the skyline were
   illegible. Copy first, then the picture across the whole column. */
.dl {
  display: grid;
  gap: 4px;
}
/* The page closes centred: the number, the heading, the line and the two store
   buttons all sit on the middle. `.lede` carries a 46ch max-width, so it needs
   the auto margins or it would stay pinned left inside a centred block. */
.dl-copy {
  text-align: center;
}
.dl-copy .lede {
  margin-inline: auto;
}
.dl-copy .stores {
  justify-content: center;
}

.dl-art {
  position: relative;
  display: flex;
  justify-content: center;
}
/* No mask here, unlike the hero. This art already carries wide white margins
   and fades out on its own, so multiply alone drops it onto the paper; a
   radial mask would eat the palms on the left and the skyline on the right. */
.dl-art img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
/* the top right of this art is open sky, so the note sits in it */
.note-dl {
  position: absolute;
  right: 2%;
  top: 6%;
  text-align: right;
  transform: rotate(-4deg);
}

/* ---------- footer ---------- */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 26px 0 34px;
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 800 14px/1 var(--ui);
}
.foot-brand img {
  border-radius: 6px;
}
.foot-copy {
  font: 400 12px/1 var(--ui);
  color: var(--ink-3);
  margin-left: 4px;
}
.foot-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.foot-links a {
  font: 600 12.5px/1 var(--ui);
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.16s var(--ease-out);
}
.foot-links a:hover {
  color: var(--blue);
}
.mute-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  transition: color 0.14s ease, transform 0.14s ease;
}
.mute-btn svg {
  width: 15px;
  height: 15px;
}
.mute-btn:hover {
  color: var(--ink);
}
.mute-btn:active {
  transform: scale(0.92);
}
.mute-btn .ic-off {
  display: none;
}
.mute-btn.muted .ic-on {
  display: none;
}
.mute-btn.muted .ic-off {
  display: block;
}

/* ---------- scroll-in reveal ---------- */
.reveal > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.reveal.in > * {
  opacity: 1;
  transform: none;
}

/* ---------- narrow screens ---------- */
@media (max-width: 820px) {
  .hero,
  .gp,
  .friends {
    grid-template-columns: 1fr;
  }
  .hero {
    padding-bottom: 40px;
  }
  .hero-art,
  .friends-art,
  .dl-art {
    justify-content: center;
  }
  .note-friends,
  .note-dl {
    position: static;
    display: block;
    margin-top: 12px;
    text-align: center;
    transform: rotate(-2deg);
  }
  .hero-art,
  .friends-art,
  .dl-art {
    flex-direction: column;
    align-items: center;
  }
  .modes {
    grid-template-columns: repeat(2, 1fr);
  }
  .worlds {
    grid-template-columns: repeat(3, 1fr);
  }
  .news {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .page {
    padding: 0 18px;
  }
  /* the top bar: mark and the call to action on one line, the sections
     centred underneath on their own */
  .nav {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 16px 0 2px;
  }
  .nav-links {
    order: 3;
    width: 100%;
    margin: 0;
    justify-content: center;
    gap: 16px;
    padding-top: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar {
    display: none;
  }
  .nav-links a {
    font-size: 13px;
    white-space: nowrap;
  }
  .nav-cta {
    margin-left: auto;
    height: 34px;
    padding: 0 14px;
  }
  /* one lane, so the hero reads down the middle */
  .hero {
    text-align: center;
    padding-top: 12px;
  }
  .hero-mark {
    align-items: center;
    padding-top: 26px;
  }
  .mark-tag {
    align-self: center;
    margin-left: 0;
    text-align: center;
  }
  .mark-rule {
    width: 86%;
    margin-inline: auto;
  }
  .hero .lede {
    margin-inline: auto;
  }
  .stores {
    justify-content: center;
  }
  .sec {
    padding: 40px 0;
  }
  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  /* two across on a phone: the name is inside the art, so it needs the width */
  .fighters {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .fighter-weapon {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
  .note-friends,
  .note-dl {
    position: static;
    display: block;
    margin-top: 10px;
    text-align: center;
    transform: none;
  }
  /* the decorative slashes have no room to sit outside the device here */
  .slash {
    display: none;
  }
}

/* ---------- reduced motion ---------- */
/* the movement goes, not just its easing: hover keeps its colour and shadow */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal > *,
  .reveal.in > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn,
  .btn:active,
  .store,
  .store:hover,
  .store:active,
  .nav-mark,
  .nav-mark:hover,
  .fighter,
  .fighter:hover,
  .fighter-art img,
  .fighter:hover .fighter-art img,
  .mode,
  .mode:hover,
  .world,
  .world:hover,
  .news-card,
  .news-card:hover,
  .news-card img,
  .news-card:hover img,
  .device-play::before,
  .device-play:hover::before,
  .device-play:active::before,
  .mute-btn,
  .mute-btn:active {
    transition: none;
    transform: none;
  }
  .nav-links a::after {
    transition: none;
  }
  .more:hover {
    gap: 6px;
  }
}

/* ============================================================================
   Subpages: /characters, /news, the documents and the 404.
   Same column, same type, same palette as the home page.
   ========================================================================= */
.sec-first {
  border-top: 0;
  padding-top: 18px;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0 0;
  font: 700 12px/1 var(--caps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crumb a {
  text-decoration: none;
  transition: color 0.16s var(--ease-out);
}
.crumb a:hover {
  color: var(--blue);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.chip {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font: 700 11px/1 var(--caps);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  transition: transform 0.16s var(--ease-out), color 0.16s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
a.chip:hover {
  color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
a.chip:active {
  transform: scale(0.97);
}

/* ---------- /characters: the roster list ---------- */
.picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 34px;
}
.pick {
  --ink-c: var(--blue);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.pick:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.pick:active {
  transform: translateY(-1px) scale(0.995);
}
.pick-art {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(58% 54% at 50% 58%, color-mix(in srgb, var(--ink-c) 62%, transparent) 0%, transparent 76%);
}
.pick-art img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.pick-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pick-name {
  font: 400 19px/1 var(--brush);
  text-transform: uppercase;
  color: var(--ink-c);
  transform: skewX(-6deg);
  transform-origin: left;
}
.pick-role {
  font: 700 10.5px/1.2 var(--caps);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pick-note {
  margin-top: 3px;
  font: 400 13px/1.4 var(--ui);
  color: var(--ink-2);
}
.pick-price {
  flex: none;
  font: 700 12px/1 var(--caps);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- /news ---------- */
.posts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 34px;
}
.post {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  scroll-margin-top: 24px;
}
.post-art {
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tint);
}
.post-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-body {
  min-width: 0;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.post-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 11px/1 var(--caps);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.post-date svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.post-title {
  margin: 10px 0 8px;
  font: 400 22px/1.05 var(--brush);
  text-transform: uppercase;
  transform: skewX(-6deg);
  transform-origin: left;
}
.post-body p {
  margin: 0 0 8px;
  font: 400 13.5px/1.55 var(--ui);
  color: var(--ink-2);
  text-wrap: pretty;
}
.post-body .more {
  margin-top: 4px;
  font-size: 12px;
}
/* the tag chips are shared with the home page's news cards */
.post .news-tag {
  margin: 0;
}

/* ---------- documents ---------- */
.doc-meta {
  margin: 18px 0 0;
  font: 700 11.5px/1.5 var(--caps);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.doc {
  max-width: 68ch;
  margin-top: 30px;
}
.doc h2 {
  margin: 34px 0 10px;
  font: 800 13px/1.3 var(--caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  scroll-margin-top: 24px;
}
.doc p {
  margin: 0 0 12px;
  font: 400 14.5px/1.65 var(--ui);
  color: var(--ink-2);
  text-wrap: pretty;
}
.doc p b {
  color: var(--ink);
  font-weight: 800;
}
.doc-note {
  padding: 18px 20px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.doc-note p:last-child {
  margin-bottom: 0;
}
.doc a,
.doc-meta a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  transition: border-color 0.16s var(--ease-out);
}
.doc a:hover,
.doc-meta a:hover {
  border-bottom-color: var(--blue);
}

/* ---------- 404 ---------- */
.nf {
  padding-bottom: 90px;
}

/* ---------- narrow screens (subpages) ---------- */
@media (max-width: 820px) {
  .picks {
    grid-template-columns: 1fr;
  }
  .post {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .post-art {
    height: 150px;
  }
}

/* ---------- reduced motion (subpages) ---------- */
@media (prefers-reduced-motion: reduce) {
  .pick,
  .pick:hover,
  .pick:active,
  .chip,
  a.chip:hover,
  a.chip:active {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ============================================================================
   Ink hunt (hunt.js): the enemies in the margins, the three weapons, and the
   hit and death effects from the game's spec. The layer never covers the
   column; only the two margin zones take the pointer.
   ========================================================================= */
.hunt {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  user-select: none;
}
/* the two margin zones are the play area */
.hunt-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: auto;
  cursor: none;
}
.hunt-zone.left {
  left: 0;
}
.hunt-zone.right {
  right: 0;
}

/* ---------- the reticle, one per weapon ---------- */
.hunt-reticle {
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.16s var(--ease-out);
}
.hunt-reticle.on {
  opacity: 0.85;
}
/* while the bolt cycles the crosshair thins out, so the wait reads as the
   weapon working rather than as the page ignoring you */
.hunt-reticle.cycling {
  opacity: 0.35;
}
/* the recoil lives on the sight alone: nothing that has been painted on the
   paper may move when a shot goes off */
.hunt-reticle.shot svg {
  animation: hunt-recoil 0.16s var(--ease-out);
}
@keyframes hunt-recoil {
  0% { scale: 1; }
  35% { scale: calc(1 + var(--kick, 4) * 0.014); }
  100% { scale: 1; }
}
.hunt-reticle.cycling .r-ring {
  animation: hunt-cycle 0.9s var(--ease-out);
}
@keyframes hunt-cycle {
  0% { rotate: 0deg; opacity: 0.2; }
  100% { rotate: 180deg; opacity: 1; }
}
.hunt-reticle svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.hunt-reticle .r-dot {
  fill: currentColor;
  stroke: none;
}
/* pistol: a tight cross, no ring */
.hunt[data-gear="pistol"] .hunt-reticle {
  scale: 0.62;
}
.hunt[data-gear="pistol"] .r-ring {
  display: none;
}
/* rifle: cross plus a loose ring, the way the hip spread reads */
.hunt[data-gear="rifle"] .hunt-reticle {
  scale: 0.85;
}
.hunt[data-gear="rifle"] .r-ring {
  opacity: 0.4;
}
/* sniper: a scope, thin cross, long hairs */
.hunt[data-gear="sniper"] .hunt-reticle {
  scale: 1.35;
  color: var(--red);
}
.hunt[data-gear="sniper"] .hunt-reticle svg {
  stroke-width: 1.2;
}
.hunt[data-gear="sniper"] .r-ring {
  r: 22;
}

/* ---------- the gear picker in the nav ---------- */
.gear {
  display: flex;
  gap: 3px;
  margin-left: auto;
  padding: 3px;
  border-radius: 9px;
  background: rgba(20, 18, 14, 0.05);
}
.gear-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-3);
  transition: background-color 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.gear-num {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(20, 18, 14, 0.1);
  font: 800 9.5px/1 var(--caps);
}
.gear-name {
  font: 700 11px/1 var(--caps);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gear-item:hover {
  color: var(--ink-2);
}
.gear-item.on {
  background: var(--ink);
  color: #fff;
}
.gear-item.on .gear-num {
  background: rgba(255, 255, 255, 0.2);
}

/* ---------- the enemies ---------- */
.hunt-enemy {
  position: fixed;
  display: block;
  pointer-events: auto;
  cursor: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-bloom);
}
.hunt-enemy svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.hunt-enemy .dot {
  fill: currentColor;
  stroke: none;
}
.hunt-enemy .f-dead {
  display: none;
}
/* they walk in from the edge of the paper, then breathe */
.hunt-enemy.left {
  transform: translateX(-150%);
}
.hunt-enemy.right {
  transform: translateX(150%);
}
.hunt-enemy.in {
  opacity: 1;
  transform: translateX(0);
  animation: hunt-bob var(--bob, 3s) ease-in-out infinite;
}
@keyframes hunt-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
/* 1 · the hit flash: the whole figure goes solid for 70ms (spec §9.1) */
.hunt-enemy.flash svg {
  fill: currentColor;
  stroke-width: 6;
}
/* 2 · flinch */
.hunt-enemy.flinch {
  animation: hunt-flinch 0.26s var(--ease-out);
}
@keyframes hunt-flinch {
  0% { rotate: 0deg; }
  30% { rotate: -7deg; }
  100% { rotate: 0deg; }
}
/* death: X-eyes and an O-mouth, then the topple, pivoting at the feet with a
   fast start and a soft landing (spec §10.3) */
.hunt-enemy.dead {
  animation: none;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: rotate(var(--fall, 90deg));
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s var(--ease-out);
}
.hunt-enemy.dead .f-live {
  display: none;
}
.hunt-enemy.dead .f-dead {
  display: block;
}
.hunt-enemy.gib {
  opacity: 0.9;
}
.hunt-enemy.fade {
  opacity: 0;
  scale: 0.9;
}

/* ---------- what a shot throws ---------- */
.hunt-flash {
  position: fixed;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  color: #f0a020;
  pointer-events: none;
  animation: hunt-flash 0.14s steps(2, end) forwards;
  scale: var(--s, 1);
  rotate: var(--rot, 0deg);
}
.hunt-flash svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes hunt-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.hunt-tracer {
  position: fixed;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, rgba(240, 160, 32, 0.15) 40%, rgba(240, 160, 32, 0.85));
  border-radius: 2px;
  pointer-events: none;
  animation: hunt-tracer 0.12s linear forwards;
}
@keyframes hunt-tracer {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}
.hunt-scuff {
  position: fixed;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: rgba(20, 18, 14, 0.28);
  pointer-events: none;
  animation: hunt-scuff 0.5s var(--ease-out) forwards;
}
@keyframes hunt-scuff {
  0% { opacity: 0.8; scale: 0.4; }
  100% { opacity: 0; scale: 1.6; }
}
/* splatter drops fall as they fly (gravity, spec §9.3) */
.hunt-drop {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  animation: hunt-drop 0.7s var(--ease-out) forwards;
}
@keyframes hunt-drop {
  0% { opacity: 0.95; translate: 0 0; }
  100% { opacity: 0; translate: var(--dx, 0) calc(var(--dy, 0) + 34px); }
}
/* a thrown part, spinning */
.hunt-part {
  position: fixed;
  border-radius: 40% 60% 55% 45%;
  pointer-events: none;
  animation: hunt-part 1s var(--ease-out) forwards;
}
@keyframes hunt-part {
  0% { opacity: 1; translate: 0 0; rotate: 0deg; }
  100% { opacity: 0; translate: var(--px, 0) var(--py, 60px); rotate: var(--spin, 360deg); }
}
/* the ink bomb's blast */
.hunt-boom {
  position: fixed;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  pointer-events: none;
  animation: hunt-boom 0.52s var(--ease-out) forwards;
}
@keyframes hunt-boom {
  0% { opacity: 0.9; scale: 0.3; }
  100% { opacity: 0; scale: 7; }
}
/* the pool left at the feet */
.hunt-pool {
  position: fixed;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  pointer-events: none;
  opacity: 0;
  transform: scale(calc(var(--size, 0.6) * 0.4)) rotate(var(--spin, 0deg));
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-bloom);
}
.hunt-pool svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hunt-pool.in {
  opacity: 0.16;
  transform: scale(var(--size, 0.6)) rotate(var(--spin, 0deg));
}

/* ---------- the tally ---------- */
.hunt-score {
  position: fixed;
  left: 22px;
  bottom: 22px;
  font: 800 13px/1 var(--caps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.hunt-score.in {
  opacity: 1;
  transform: none;
}
.hunt-score.bump {
  animation: hunt-bump 0.34s var(--ease-bloom);
}
@keyframes hunt-bump {
  0% { scale: 1; }
  40% { scale: 1.18; }
  100% { scale: 1; }
}
.hunt-erased {
  position: fixed;
  left: 22px;
  bottom: 42px;
  font: 400 18px/1 var(--brush);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--red);
  pointer-events: none;
  opacity: 0;
  transform: skewX(-6deg) translateY(6px);
  transition: opacity 0.2s var(--ease-out), transform 0.4s var(--ease-bloom);
}
.hunt-erased.in {
  opacity: 1;
  transform: skewX(-6deg) translateY(-6px);
}
/* the callout that rises off a headshot */
.hunt-pop {
  position: fixed;
  font: 400 17px/1 var(--brush);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--red);
  pointer-events: none;
  white-space: nowrap;
  translate: -50% 0;
  animation: hunt-pop 0.9s var(--ease-out) forwards;
}
@keyframes hunt-pop {
  0% { opacity: 0; transform: skewX(-6deg) scale(0.8) translateY(0); }
  18% { opacity: 1; transform: skewX(-6deg) scale(1.05) translateY(-8px); }
  100% { opacity: 0; transform: skewX(-6deg) scale(1) translateY(-34px); }
}

/* shown once, so the game can be found at all */
.hunt-hint {
  position: fixed;
  font: 700 18px/1 var(--hand);
  color: var(--blue);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: rotate(-6deg) translateY(4px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.hunt-hint.in {
  opacity: 1;
  transform: rotate(-6deg);
}

/* A backstop only: hunt.js decides whether the game runs (it needs 152px of
   margin, so it starts at 1184px wide). This sits safely below that. */
@media (max-width: 1180px) {
  .hunt,
  .gear {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hunt,
  .gear {
    display: none;
  }
}

/* ============================================================================
   The bottom dock (dock.js): the template's glassy pill, carrying the site
   links, the weapon selector for the ink hunt, and the site-wide mute.
   ========================================================================= */
#dock-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none; /* only the pill itself is interactive */
}
.dock {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(251, 250, 247, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px var(--hairline),
    0 10px 28px -8px rgba(20, 18, 14, 0.24),
    0 2px 6px rgba(20, 18, 14, 0.1);
  animation: dock-in 0.5s var(--ease-bloom) both;
}
@keyframes dock-in {
  0% { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.dock-item {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.16s var(--ease-out), transform 0.12s ease, background-color 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .dock-item:hover {
    color: var(--ink);
    background: rgba(20, 18, 14, 0.05);
  }
}
.dock-item:active {
  transform: scale(0.9);
}
/* The ground matters now that home is a picture: an <img> cannot take
   currentColor, so colour alone would leave the home item looking identical
   whether you are on that page or not. */
.dock-item[aria-current="page"] {
  color: var(--ink);
  background: rgba(20, 18, 14, 0.07);
}
.dock-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(251, 250, 247, 0.95), 0 0 0 4px rgba(30, 79, 216, 0.5);
}
.dock-glyph {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the weapon glyphs are filled shapes, not outlines */
.dock-glyph.solid {
  fill: currentColor;
  stroke: none;
}
/* the home mark is the painted crown, not a stroked path: the stroke and fill
   above mean nothing to an <img>, and it brings its own colour */
.dock-mark {
  object-fit: contain;
}
.dock-mute svg {
  width: 20px;
  height: 20px;
  display: block;
}
.dock-mute .ic-off {
  display: none;
}
.dock-mute.muted .ic-on {
  display: none;
}
.dock-mute.muted .ic-off {
  display: block;
}
.dock-divider {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: var(--hairline);
}
/* the active-page indicator, behind the current item */
.dock-indicator {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent);
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-bloom);
}
.dock-indicator.ready {
  opacity: 1;
  transform: scale(1);
}
/* hover tips, above the item */
.dock-tip {
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 7px;
  background: #26231f;
  color: #fff;
  font: 700 11px/1 var(--ui);
  box-shadow: 0 5px 16px -5px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out), visibility 0.16s;
}
.dock-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #26231f;
}
.dock-tip kbd {
  font: 700 9.5px/1 var(--caps);
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  padding: 2px 4px 3px;
}
.dock-item:hover .dock-tip,
.dock-item:focus-visible .dock-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* the weapon selector, filled by hunt.js. The art is black ink on
   transparency, so the selected slot is a raised paper chip rather than an
   ink fill: filling it would swallow the weapon. */
.dock-gear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dock-gear[hidden] {
  display: none;
}
.gear-item {
  width: 52px;
  height: 40px;
  border-radius: 10px;
}
.gear-art {
  width: 44px;
  height: auto;
  display: block;
  opacity: 0.48;
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gear-item:hover {
    background: none;
  }
  .gear-item:hover .gear-art {
    opacity: 0.75;
  }
}
.gear-item.on {
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 1px 2px rgba(20, 18, 14, 0.08);
}
.gear-item.on .gear-art {
  opacity: 1;
  transform: scale(1.04);
}
/* room under the last section so the dock never covers the footer */
.foot {
  padding-bottom: 96px;
}
@media (max-width: 620px) {
  .dock {
    gap: 2px;
    padding: 5px;
  }
  .dock-item {
    width: 38px;
    height: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dock,
  .dock-indicator,
  .dock-item,
  .dock-item:active,
  .dock-tip {
    animation: none;
    transition: opacity 0.12s ease, visibility 0.12s;
    transform: none;
  }
  .dock-tip {
    transform: translateX(-50%);
  }
  .dock-item:hover .dock-tip,
  .dock-item:focus-visible .dock-tip {
    transform: translateX(-50%);
  }
  .dock-indicator.ready {
    transform: none;
  }
}