/* Rusty Drill Games: one shared stylesheet for every page (style A "Dig Down", round 2).
   The live site's CSP forbids inline styles and scripts: every style lives here, and
   site.js changes looks only through classes, attributes or the CSSOM. */
:root {
  /* sky */
  --sky-1: #45a3ec; --sky-2: #7cc3f0; --sky-3: #c4ecfa; --sun: rgba(255, 248, 214, 0.85); --sun-0: rgba(255, 248, 214, 0);
  --cloud: #ffffff; --cloud-shade: #d3ecf8;
  /* game panels */
  --cream: #e3d7b5; --cream-light: #f3ead0; --cream-dark: #c4b48c; --cream-edge: #8a7a52;
  --ink: #3a2a1c; --soil: #7a5a3c; --soil-dark: #4a3522; --soil-deep: #2e2016; --pill-edge: #120c07;
  --shadow: rgba(20, 12, 6, 0.42); --shadow-soft: rgba(0, 0, 0, 0.3); --hi: rgba(255, 255, 255, 0.32);
  /* signals */
  --orange: #e8772e; --orange-edge: #a8501a; --gold: #ffd24a; --gold-edge: #b07a12; --gold-light: #fff3c4;
  --green: #5fae4a; --green-edge: #34702a; --teal: #3a9a94; --teal-edge: #1f5e5a;
  --gem: #5fd0e8; --gem-edge: #1f6f86; --blue: #4a8fd0; --blue-edge: #2a5a8a;
  --legend: #ff9a1f; --legend-edge: #9a4a06; --company: #9a6a3c; --company-edge: #5a3a1c;
  --heart: #e05a47; --copper: #d9772f; --iron: #9aa3ab; --white: #ffffff;
  --cork: #b98d5c; --cork-dot: #9c7246; --frame-dark: #17100b; --frame-fill: #2b1e17;
  --discord: #5865f2; --discord-edge: #3c45a5;
  --dirt: #6b4a30;
  --dev-body: #2e2a27; --dev-steel: #9aa6b1; --dev-steel-hi: #c6d0d8;
  --gx-wood: #b98a5a; --gx-wood-dark: #9c7146; --gx-floor: #c9c2b4; --gx-floor-line: #8a7a66;
  --paper: #f6eed6; --paper-fold: #ddd0ad; --paper-ink: #8a7a5c; --paper-line: #b8a888;
  --show-bg: #17110d; --show-text: #fff5de; --show-note: #f3dca0;
  --bubble-bg: #ffffff;
  --haze: rgba(255, 250, 236, 0.72); --ray: rgba(255, 255, 255, 0.34);
  --hill-far: #a9d8f2; --hill-mid: #86c3e6; --hill-near: #74b85e;
  --velvet-1: #563a61; --velvet-2: #2e1c38; --velvet-3: #1b1022; --velvet-edge: #120a18;
  --steel-1: #8d9aa6; --steel-2: #5d6b78; --steel-3: #434e59; --brass-1: #ffe39a; --brass-2: #f2bf4a; --brass-3: #b07a12; --spot: rgba(255, 214, 140, 0.32); --brass-text: #6b4a12;
  --boss-red: #c9362a; --boss-red-edge: #6b1d0c;
  --tier4: #a65fd0; --slot-glow: #4a3a2c; --gold-hover: #fff8dc; --company-trim: #b8875a; --underline: rgba(58, 42, 28, 0.35);
  /* strata */
  --top-bg: #6e4f35; --deep-bg: #5b412c; --bed-bg: #4f5a70; --bed-tint-1: rgba(16, 22, 34, 0.30); --bed-tint-2: rgba(16, 22, 34, 0.55);
  --rock-bg: #3a3029; --rock-fade: rgba(15, 10, 6, 0.65); --core-bg: #140d08; --tunnel: #0f0a06; --tunnel-2: #24170e;
  --lamp: rgba(255, 190, 90, 0.38); --lamp-2: rgba(232, 119, 46, 0.14); --lamp-0: rgba(232, 119, 46, 0);
  --line: rgba(243, 234, 208, 0.5); --on-dark: #f3ead0; --on-dark-soft: #d9ccab; --dash-dark: rgba(243, 234, 208, 0.22);
  --lc-top: #c98a5a; --lc-deep: #a07850; --lc-bed: #9fb0c8; --lc-rock: #b0a090; --lc-sky: #7cc3f0;
  /* lights off in the footer */
  --dark-bg: #070504; --on-dark-dim: #b5a98b; --gold-dim: #cfa93e; --legal-dim: #9d927a;
  --bulb-off: #5a4c3c; --bulb-off-core: #3a3027;
  /* type and layout */
  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: Nunito, system-ui, "Segoe UI", sans-serif;
  --gut: clamp(16px, 4vw, 40px);
  --maxw: 1080px;
  color-scheme: dark;
}
@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}
/* base: the subpages are full documents (the home page gets the same from its publish skeleton) */
body { margin: 0; background: var(--core-bg); color: var(--ink); font: 14px system-ui, sans-serif; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.page { font: 600 17px/1.6 var(--body); color: var(--ink); overflow-x: clip; }
.page *, .page *::before, .page *::after { box-sizing: border-box; }
:where(.page) img { display: block; height: auto; }
:where(.page) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.page) :where(ul, ol) { padding: 0; list-style: none; }
:where(.page) a { color: inherit; }
:where(.page) button { font: inherit; color: inherit; }
.page :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.sky :focus-visible, .panel :focus-visible, .note :focus-visible, .pcard :focus-visible { outline-color: var(--soil-deep); }
.fact-sheet :focus-visible { outline-color: var(--gold); }
section[id], header[id], footer[id] { scroll-margin-top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* one gutter for the whole page */
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.sec { position: relative; z-index: 1; padding-block: 28px 76px; }

/* ---------- shared game UI pieces ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 10px 22px 11px; border: 3px solid; border-radius: 16px;
  font: 20px/1.1 var(--display); letter-spacing: 0.01em; text-decoration: none; text-align: center;
  cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn-orange { background: var(--orange); border-color: var(--orange-edge); color: var(--white); text-shadow: 0 2px 0 var(--orange-edge); box-shadow: 0 5px 0 var(--orange-edge), inset 0 3px 0 var(--hi); }
.btn-orange:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange-edge), inset 0 3px 0 var(--hi); }
.btn-green { background: var(--green); border-color: var(--green-edge); color: var(--white); text-shadow: 0 2px 0 var(--green-edge); box-shadow: 0 5px 0 var(--green-edge), inset 0 3px 0 var(--hi); }
.btn-green:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--green-edge), inset 0 3px 0 var(--hi); }
.btn-cream { background: var(--cream-light); border-color: var(--cream-edge); color: var(--ink); box-shadow: 0 5px 0 var(--cream-edge), inset 0 3px 0 var(--white); }
.btn-cream:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--cream-edge), inset 0 3px 0 var(--white); }
.btn-discord { background: var(--discord); border-color: var(--discord-edge); color: var(--white); text-shadow: 0 2px 0 var(--discord-edge); box-shadow: 0 5px 0 var(--discord-edge), inset 0 3px 0 var(--hi); }
.btn-discord:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--discord-edge), inset 0 3px 0 var(--hi); }
.btn-discord svg { flex: none; width: 32px; height: 32px; filter: drop-shadow(0 2px 0 var(--discord-edge)); }
.btn-big { min-height: 58px; padding: 12px 28px 13px; font-size: 23px; }

.panel {
  position: relative; background: var(--cream); color: var(--ink);
  border: 4px solid var(--soil-deep); border-radius: 26px;
  box-shadow: 5px 8px 0 var(--shadow), inset 0 3px 0 var(--cream-light), inset 0 -6px 0 var(--cream-dark);
  padding: clamp(20px, 3vw, 32px);
}
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 900 13px/1.2 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-edge); }
.eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--gold); border: 2px solid var(--soil-deep); border-radius: 2px; transform: rotate(45deg); }
.eyebrow::after { content: ""; flex: none; width: 34px; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.45; }
/* the hero's brass name plate, the same metal as Rusty's display stand */
.nameplate {
  position: relative; display: inline-grid; justify-items: center; gap: 2px; padding: 9px 34px 10px;
  background: linear-gradient(var(--brass-1), var(--brass-2) 58%, var(--brass-3)); border: 3px solid var(--soil-deep); border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(120, 80, 10, 0.35), 0 4px 0 var(--soil-deep), 4px 8px 0 4px rgba(46, 32, 22, 0.18);
  transform: rotate(-1.5deg);
}
.nameplate::before, .nameplate::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--white) 0 1.5px, var(--steel-1) 2px); border: 2px solid var(--soil-deep); }
.nameplate::before { left: 10px; }
.nameplate::after { right: 10px; }
.np-name { font: 21px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soil-deep); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
.np-sub { font: 900 11px/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-text); }
/* the hero's studio line: plain dark text */
.hero-tag { font: 900 clamp(17px, 1.6vw, 20px)/1.3 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soil-deep); }
.sticker {
  font: clamp(38px, 5.2vw, 60px)/1.04 var(--display); letter-spacing: 0.01em; color: var(--cream-light);
  -webkit-text-stroke: 9px var(--soil-deep); paint-order: stroke fill; text-shadow: 0 6px 0 var(--soil-deep);
}
.plate { display: inline-block; max-width: 65ch; background: rgba(30, 20, 12, 0.82); color: var(--on-dark); font: 800 18px/1.5 var(--body); border-radius: 14px; padding: 8px 16px; margin-top: 16px; }
.plate a { color: var(--gold); font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.plate a:hover { color: var(--gold-light); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px 5px; background: var(--soil-deep); color: var(--cream-light); border: 3px solid var(--pill-edge); border-radius: 999px; box-shadow: 3px 4px 0 var(--shadow-soft); font: 17px/1.2 var(--display); letter-spacing: 0.02em; }
.pill b { font-weight: 400; color: var(--gold); }

/* speech bubbles (Rusty talks) */
.bubble {
  position: relative; display: inline-block; max-width: 100%;
  background: var(--bubble-bg); color: var(--ink);
  border: 4px solid var(--soil-deep); border-radius: 22px; padding: 12px 18px 13px;
  font: 21px/1.2 var(--display); letter-spacing: 0.01em; box-shadow: 4px 6px 0 var(--shadow);
}
.bubble::after {
  content: ""; position: absolute; width: 22px; height: 22px; background: var(--bubble-bg);
  border-right: 4px solid var(--soil-deep); border-bottom: 4px solid var(--soil-deep);
  left: 46px; bottom: -14px; transform: rotate(45deg);
}
.bubble.tail-left::after { left: -14px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(135deg); }
.bubble.tail-right::after { left: auto; right: -14px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }
.say { display: flex; align-items: center; gap: 22px; }
.say-mark { flex: none; width: 76px; filter: drop-shadow(3px 5px 0 var(--shadow)); }
.say .bubble { min-width: 0; }

/* copy email and small cream buttons */
.email { font-weight: 800; overflow-wrap: break-word; user-select: all; }
.copy, .mini {
  flex: none; min-width: 5.6em; min-height: 36px; padding: 5px 12px 6px; border-radius: 12px;
  border: 3px solid var(--cream-edge); background: var(--cream-light); color: var(--ink);
  box-shadow: 0 4px 0 var(--cream-edge), inset 0 2px 0 var(--white);
  font: 16px/1 var(--display); cursor: pointer;
}
.copy:active, .mini:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cream-edge); }
.copy.done { background: var(--green); border-color: var(--green-edge); color: var(--white); box-shadow: 0 4px 0 var(--green-edge); }
.mini:disabled { cursor: not-allowed; opacity: 0.55; transform: none; box-shadow: 0 4px 0 var(--cream-edge), inset 0 2px 0 var(--white); }
.mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* a mail address opens the mail app; the small icon next to it copies it */
a.email { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--underline); }
a.email:hover { text-decoration-color: currentColor; }
.copy.copy-icon {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; min-width: 0; min-height: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; box-shadow: none;
}
.copy.copy-icon.done { background: none; box-shadow: none; }
.copy.copy-icon:active { transform: translateY(2px); box-shadow: none; }
.copy-icon .pin { grid-area: 1 / 1; width: 46px; height: 46px; filter: drop-shadow(0 2px 0 rgba(46, 32, 22, 0.3)); }
.copy-icon .pin-ok, .copy-icon.done .pin-c { display: none; }
.copy-icon.done .pin-ok { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .copy-icon .pin { transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .copy-icon:hover .pin { transform: rotate(-12deg) scale(1.08); }
}
.pc-contact .copy-icon, .callcard .copy-icon, .fs-rows .copy-icon, .doc .copy-icon { padding: 0; }
.copy-icon::after {
  position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 9px); padding: 5px 9px 6px; border-radius: 9px;
  background: var(--soil-deep); color: var(--gold); font: 14px/1 var(--display); white-space: nowrap; box-shadow: 0 3px 0 var(--pill-edge);
  opacity: 0; transform: translate(-50%, 4px); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none;
}
.copy-icon::after { content: "Copy"; }
.copy-icon:focus-visible::after, .copy-icon.done::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) {
  .copy-icon:hover::after { opacity: 1; transform: translate(-50%, 0); }
}
.copy-icon.done::after { content: "Copied!"; }
@media (prefers-reduced-motion: reduce) {
  .copy-icon::after { transition: none; }
}

/* ---------- depth gauge (fixed, home only) ---------- */
.gauge { position: fixed; z-index: 60; top: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; --lc: var(--lc-sky); }
.g-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px 5px 8px; background: var(--soil-deep); border: 3px solid var(--pill-edge); border-radius: 999px; box-shadow: 3px 4px 0 var(--shadow-soft); color: var(--cream-light); font: 19px/1.15 var(--display); letter-spacing: 0.02em; white-space: nowrap; }
.g-pill svg { width: 18px; height: 18px; flex: none; }
.g-pill b { display: inline-block; min-width: 4.3ch; text-align: right; font-weight: 400; color: var(--gold); }
.g-layer { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font: 13px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-light); -webkit-text-stroke: 3.5px var(--soil-deep); paint-order: stroke fill; text-shadow: 0 2px 0 var(--shadow-soft); white-space: nowrap; }
.g-layer::before { content: ""; width: 8px; height: 8px; border: 2px solid var(--soil-deep); border-radius: 2px; background: var(--lc); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .g-layer.bump { animation: bump 0.38s cubic-bezier(0.25, 1.7, 0.5, 1) both; }
}
@keyframes bump { from { transform: scale(0.7); } to { transform: scale(1); } }
@media (max-width: 1399px) {
  .gauge { top: auto; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); gap: 2px; opacity: 0.94; }
  .g-pill { font-size: 15px; padding: 2px 9px 3px 5px; border-width: 2px; gap: 4px; }
  .g-pill svg { width: 14px; height: 14px; }
  .g-layer { font-size: 10px; -webkit-text-stroke-width: 3px; margin-right: 4px; }
  .g-layer::before { width: 6px; height: 6px; }
}

/* ---------- surface: sky, header, hero ---------- */
.sky {
  position: relative; overflow: hidden; padding-top: 12px;
  background: radial-gradient(circle at 6% -8%, var(--sun), var(--sun-0) 34%), linear-gradient(var(--sky-1), var(--sky-2) 58%, var(--sky-3));
}
.cloud { position: absolute; z-index: 0; width: 150px; height: 46px; background: var(--cloud); border-radius: 999px; box-shadow: inset 0 -7px 0 var(--cloud-shade); opacity: 0.92; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: var(--cloud); border-radius: 50%; }
.cloud::before { width: 64px; height: 64px; left: 22px; top: -30px; }
.cloud::after { width: 46px; height: 46px; left: 74px; top: -20px; }
.c1 { top: 118px; left: 38%; transform: scale(0.8); }
.c2 { top: 64px; left: 68%; transform: scale(1.1); }
.c3 { top: 300px; left: -40px; transform: scale(0.65); }
.c4 { top: 210px; left: 86%; transform: scale(0.5); opacity: 0.7; }
/* clouds, birds and the sunburst drift at their own depth when the page scrolls (site.js sets --sy) */
.cloud, .birds { translate: 0 calc(var(--sy, 0) * 0.35px); }
.c3, .c4 { translate: 0 calc(var(--sy, 0) * 0.2px); }
.birds { position: absolute; z-index: 0; top: 92px; left: 54%; width: 120px; height: 40px; }
@media (prefers-reduced-motion: no-preference) {
  .birds { animation: birds-glide 18s ease-in-out infinite alternate; }
}
@keyframes birds-glide { from { transform: translate(0, 0); } to { transform: translate(-60px, 12px); } }
@media (prefers-reduced-motion: no-preference) {
  .c1 { animation: drift 26s ease-in-out infinite alternate; }
  .c2 { animation: drift 34s ease-in-out infinite alternate-reverse; }
  .c3 { animation: drift 30s ease-in-out infinite alternate; }
}
@keyframes drift { from { translate: 0 0; } to { translate: 46px 0; } }

.topbar { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-block: 6px; }
.brand { flex: none; border-radius: 12px; }
.brand img { width: 210px; filter: drop-shadow(2px 4px 0 rgba(46, 32, 22, 0.25)); }
.nav { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.nav a { display: inline-block; padding: 7px 12px 8px; border: 3px solid var(--soil-deep); border-radius: 12px; background: var(--cream-light); color: var(--ink); box-shadow: 0 4px 0 var(--soil-deep); font: 17px/1 var(--display); letter-spacing: 0.01em; text-decoration: none; }
.nav a:hover { background: var(--gold-light); }
.nav a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--soil-deep); }
.topbar .btn { min-height: 44px; font-size: 18px; padding: 8px 16px 9px; }

.hero { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 20px 32px; align-items: end; padding-top: clamp(28px, 5vh, 52px); }
.hero-copy { position: relative; z-index: 1; min-width: 0; padding-bottom: 22px; }
/* a soft light haze behind the words, so they lift off the sky */
.hero-copy::before { content: ""; position: absolute; z-index: -1; left: -14%; right: -10%; top: -12%; bottom: 4%; background: radial-gradient(ellipse 58% 56% at 44% 46%, var(--haze), rgba(255, 250, 236, 0) 72%); pointer-events: none; }
.hero h1, .show-copy h1, .page-head h1 {
  margin: 18px 0 18px; font: clamp(44px, 6.1vw, 80px)/0.98 var(--display); letter-spacing: 0.01em; color: var(--cream-light);
  -webkit-text-stroke: 11px var(--soil-deep); paint-order: stroke fill; text-shadow: 0 7px 0 var(--soil-deep);
}
.hero h1 span, .show-copy h1 span { display: block; color: var(--gold); }
/* the hero fits a laptop screen: the headline and Rusty also follow the window height, so the ground shows */
.hero h1 { margin: 12px 0 14px; font-size: clamp(44px, min(7vw, 11vh), 100px); }
.lede-hero { max-width: 34em; font: 800 clamp(17px, 1.5vw, 19px)/1.55 var(--body); color: var(--soil-deep); }
.cta { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 24px; }
.hero-rusty { position: relative; min-width: 0; padding-top: 64px; }
/* a slow sunburst behind Rusty, like a reward screen in the game */
.sunburst {
  position: absolute; z-index: 0; left: 50%; top: 58%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, var(--ray) 0 9deg, rgba(255, 255, 255, 0) 9deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 64%); mask-image: radial-gradient(circle, #000 18%, transparent 64%);
  translate: 0 calc(var(--sy, 0) * 0.15px); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .sunburst { animation: sunburst-turn 60s linear infinite; }
}
@keyframes sunburst-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero-rusty .bubble { position: absolute; top: 0; left: 4%; z-index: 3; font-size: 22px; max-width: 300px; }
.hero-rusty .bubble::after { left: 62%; }
.rusty-hero { position: relative; z-index: 1; width: 100%; max-width: min(440px, 52vh); margin-inline: auto; filter: drop-shadow(6px 9px 0 rgba(46, 32, 22, 0.28)); }
@media (prefers-reduced-motion: no-preference) {
  .rusty-hero { animation: bob 3.4s ease-in-out infinite; transform-origin: 40% 80%; }
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-1.5deg); } }

/* the surface base panorama (cropped where the light ends) */
.base { --bw: min(200vw, 2600px); position: relative; z-index: 2; height: calc(var(--bw) * 0.1079); overflow: hidden; -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); pointer-events: none; }
.base img { position: absolute; z-index: 1; left: 50%; top: 0; width: var(--bw); max-width: none; margin-top: calc(var(--bw) * -0.1184); transform: translateX(-50%); }
.hills { position: absolute; z-index: 0; left: 0; bottom: 26%; width: 100%; height: 62%; translate: 0 calc(var(--sy, 0) * -0.08px); }
.hill-far { fill: var(--hill-far); }
.hill-mid { fill: var(--hill-mid); }
.hill-near { fill: var(--hill-near); }

/* ---------- subpage head (privacy, press kit) ---------- */
.page-head { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 10px 32px; align-items: end; padding-block: 26px 8px; }
.page-head-copy { min-width: 0; padding-bottom: 18px; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.page-head h1 { margin: 0; font-size: clamp(46px, 6vw, 76px); }
.draft { display: inline-block; padding: 7px 13px 6px; background: var(--gold); color: var(--soil-deep); border: 3px solid var(--soil-deep); border-radius: 999px; box-shadow: 0 4px 0 var(--soil-deep), inset 0 2px 0 var(--hi); font: 900 13px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-4deg); }
.page-head .lede-hero { margin-top: 14px; }
.head-rusty { width: 100%; max-width: 300px; justify-self: end; filter: drop-shadow(5px 8px 0 rgba(46, 32, 22, 0.28)); }
@media (prefers-reduced-motion: no-preference) {
  .head-rusty { animation: bob 3.4s ease-in-out infinite; transform-origin: 40% 80%; }
}
.grass { position: relative; z-index: 2; height: 46px; margin-top: 4px; background: linear-gradient(var(--green) 0 13px, var(--green-edge) 13px 19px, var(--soil) 19px); border-top: 4px solid var(--soil-deep); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28); }

/* ---------- strata ---------- */
.layer { position: relative; }
.tex { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.jag {
  margin-top: -34px; padding-top: 34px;
  clip-path: polygon(0 26px, 5% 12px, 11% 22px, 17% 6px, 24% 20px, 31% 10px, 38% 28px, 46% 8px, 54% 24px, 61% 4px, 69% 20px, 77% 10px, 85% 26px, 92% 8px, 100% 18px, 100% 100%, 0 100%);
}
.jag-b { clip-path: polygon(0 10px, 6% 24px, 13% 8px, 20% 28px, 28% 14px, 35% 4px, 43% 22px, 50% 12px, 58% 30px, 66% 10px, 73% 24px, 81% 6px, 88% 20px, 94% 12px, 100% 26px, 100% 100%, 0 100%); }
.seam { position: absolute; top: 0; left: 0; width: 100%; height: 34px; z-index: 2; overflow: visible; pointer-events: none; }
.seam polyline { fill: none; stroke: var(--soil-deep); stroke-width: 8; stroke-linejoin: round; }

.l-top { z-index: 1; margin-top: -64px; padding-top: 64px; background: var(--top-bg) url("img/world-t1-topsoil.webp") right top / auto max(395vw, 2600px) repeat-y; }
.l-top::after { content: ""; position: absolute; inset: auto 0 0 0; height: 260px; background: linear-gradient(rgba(46, 32, 22, 0), rgba(46, 32, 22, 0.55)); z-index: 0; pointer-events: none; }
.l-deep { z-index: 2; background: var(--deep-bg); }
.l-bed { z-index: 3; background: linear-gradient(var(--bed-tint-1), var(--bed-tint-2)), var(--bed-bg) url("img/world-t2-bedrock.webp") right top / auto max(481vw, 3000px) repeat-y; }
.l-rock { z-index: 4; background: var(--rock-bg); }
.l-rock::after { content: ""; position: absolute; inset: auto 0 0 0; height: 420px; background: linear-gradient(rgba(15, 10, 6, 0), var(--rock-fade)); z-index: 0; pointer-events: none; }

/* stratum marker: layer name pill, dashed depth line, burrow in the rock wall */
.stratum { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; padding-left: max(var(--gut), calc((100% - var(--maxw)) / 2)); padding-top: 26px; }
.st-tag { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 7px 11px; background: var(--soil-deep); border: 3px solid var(--pill-edge); border-radius: 999px; box-shadow: 3px 4px 0 var(--shadow-soft); white-space: nowrap; }
.st-name { display: inline-flex; align-items: center; gap: 8px; font: 17px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-light); }
.st-name::before { content: ""; width: 9px; height: 9px; border: 2px solid var(--pill-edge); border-radius: 2px; background: var(--lc, var(--soil)); transform: rotate(45deg); box-shadow: inset 0 2px 0 var(--hi); }
.st-depth { font: 17px/1 var(--display); color: var(--gold); }
.st-line { flex: 1; min-width: 20px; border-top: 3px dashed var(--line); }
.l-top .stratum { --lc: var(--lc-top); }
.l-deep .stratum { --lc: var(--lc-deep); }
.l-bed .stratum { --lc: var(--lc-bed); }
.l-rock .stratum { --lc: var(--lc-rock); }

/* a dug corridor that comes in from the page edge: dark, flat-ended, crumbly rims, like the game's tunnels */
.stratum { --tunnel-w: clamp(170px, 20vw, 290px); padding-right: calc(var(--tunnel-w) + 14px); }
.burrow { position: absolute; right: 0; top: calc(50% + 13px); width: var(--tunnel-w); height: 52px; transform: translateY(-50%); --tun-1: #1b110a; --tun-2: #2c1d12; --tun-glow: rgba(255, 196, 120, 0.12); --tun-lip: rgba(255, 214, 160, 0.12); --tun-rim: rgba(30, 18, 10, 0.35); --crumb-solid: #7a5a3c; --crumb-edge: #3a2717; }
.l-bed .burrow { --tun-1: #10131c; --tun-2: #1e2330; --tun-glow: rgba(170, 200, 255, 0.1); --tun-lip: rgba(190, 205, 230, 0.12); --crumb-solid: #5f6b7a; --crumb-edge: #262c36; }
.l-rock .burrow { --tun-1: #120d0a; --tun-2: #241b16; --tun-lip: rgba(220, 200, 180, 0.1); --crumb-solid: #6b5a55; --crumb-edge: #2b2220; }
/* a dug tunnel as in the game: a round mouth where the creature peeks out, walls in shadow and
   darker towards the page edge, and a few loose pebbles spilled at the mouth */
.burrow::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 26px 4px 4px 26px / 50% 4px 4px 50%;
  background:
    radial-gradient(ellipse 42px 70% at 18px 54%, var(--tun-glow), rgba(0, 0, 0, 0) 80%),
    linear-gradient(90deg, var(--tun-2), var(--tun-1) 55%);
  box-shadow: inset 0 8px 10px -4px rgba(0, 0, 0, 0.75), inset 0 -4px 6px -2px var(--tun-lip), 0 0 0 2px var(--tun-rim);
  clip-path: polygon(30px 0, 40% 2px, 62% 0, 84% 3px, 100% 1px, 100% calc(100% - 2px), 80% 100%, 58% calc(100% - 3px), 36% 100%, 30px calc(100% - 1px),
    18px calc(100% - 3px), 8px 82%, 2px 66%, 0 50%, 2px 34%, 8px 18%, 18px 3px);
}
.burrow::after { content: none; }
.burrow .pb { position: absolute; z-index: 2; display: block; background: var(--crumb-solid); border: 2px solid var(--crumb-edge); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18); }
.burrow .pb1 { left: -12px; bottom: -6px; width: 13px; height: 10px; border-radius: 45% 55% 40% 50%; transform: rotate(-12deg); }
.burrow .pb2 { left: -24px; bottom: -3px; width: 8px; height: 7px; border-radius: 50% 40% 55% 45%; }
.burrow .pb3 { left: 10px; top: -7px; width: 9px; height: 8px; border-radius: 40% 55% 45% 50%; transform: rotate(20deg); }
.burrow img { position: absolute; z-index: 1; left: 8px; bottom: 5px; width: auto; height: 42px; transform: scaleX(-1); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.4)); }
.burrow-worm img { height: 32px; left: 6px; bottom: 10px; }
.burrow-bat img { height: 44px; left: 6px; bottom: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .burrow img { animation: peek 4.5s ease-in-out infinite; }
}
@keyframes peek { 0%, 55%, 100% { translate: 0 0; } 70%, 85% { translate: -7px -2px; } }

/* buried treasure: pockets of the game's ores in every layer, a chest in the topsoil.
   Decoration only (aria-hidden), under the content panels; the panels simply cover them. */
.buried { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pocket {
  position: absolute; display: flex; align-items: flex-end; justify-content: center; padding: 18px 24px 14px;
  border-radius: 52% 46% 50% 44% / 58% 54% 46% 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 56%, rgba(14, 8, 4, 0.82), rgba(14, 8, 4, 0.6) 58%, rgba(14, 8, 4, 0) 73%);
  box-shadow: inset 0 -3px 0 rgba(255, 220, 170, 0.08);
}
.pocket .ore { width: 48px; height: 48px; margin: 0 -7px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35)); }
.pocket .ore.sm { width: 32px; height: 32px; }
.pocket .ore:nth-child(odd) { transform: rotate(-14deg); }
.pocket .ore:nth-child(even) { transform: rotate(18deg) translateY(-6px); }
.chest { flex: none; width: 104px; height: auto; transform: rotate(-6deg); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.3)); }
.bt-chest { padding: 20px 30px 14px; }
.bt-chest .coin { position: absolute; right: 12px; bottom: 10px; width: 30px; height: 30px; transform: rotate(10deg); }
.spark { position: absolute; top: 4px; right: 18px; width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .spark { animation: twinkle 2.8s ease-in-out infinite; }
}
@keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
/* where they sit: the empty soil next to the content */
.bt-chest { left: 6%; bottom: 112px; }
.bt-1 { left: 33%; bottom: 150px; }
.bt-2 { left: 1%; top: 46%; }
.bt-3 { right: 1.5%; top: 30%; }
.bd-1 { right: 9%; top: 300px; }
.bd-2 { left: 1%; top: 58%; }
.bd-3 { right: 1%; top: 82%; }
.bb-1 { right: 12%; top: 55%; }
.bb-2 { left: 1%; top: 18%; }
.bb-3 { right: 1.5%; top: 76%; }
.br-1 { right: 1.5%; top: 520px; }
.br-2 { left: 1%; top: 46%; }
@media (max-width: 1240px) {
  .pocket.wide { display: none; }
}

/* ---------- 2. dig site ---------- */
.dig-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; margin-top: 30px; }
.dig-copy { min-width: 0; padding-top: 52px; text-align: center; }
.dig-copy .lede, .dig-copy .body { margin-inline: auto; }
/* "Our Game": a ribbon across the top edge of the panel, like a title banner in the game */
.ribbon { position: absolute; left: 50%; top: -30px; z-index: 2; width: 320px; max-width: calc(100% + 24px); height: 70px; transform: translateX(-50%); filter: drop-shadow(0 5px 0 var(--shadow)); }
.ribbon-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ribbon-text {
  position: absolute; left: 0; right: 0; top: 7px; height: 44px; display: grid; place-items: center;
  font: 27px/1 var(--display); letter-spacing: 0.03em; color: var(--cream-light); white-space: nowrap;
  -webkit-text-stroke: 6px var(--soil-deep); paint-order: stroke fill; text-shadow: 0 3px 0 var(--soil-deep);
}
@media (prefers-reduced-motion: no-preference) {
  .ribbon { animation: ribbon-in 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
}
@keyframes ribbon-in { from { transform: translateX(-50%) scale(0.92) rotate(-2deg); } to { transform: translateX(-50%) scale(1) rotate(0); } }
.dig-copy .dp-logo { display: flex; justify-content: center; margin-top: 8px; }
.dp-logo { margin: 14px 0 8px; }
.dp-logo img { width: min(100%, 360px); }
.lede { font: 900 21px/1.4 var(--body); color: var(--soil-deep); max-width: 32em; }
.dig-copy p + p { margin-top: 12px; }
.dig-copy .body { max-width: 62ch; }
/* Play first, and the vision (the game's The World page) as the quieter second step */
.dig-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; }
.btn-vision { gap: 10px; }
.btn-vision svg { flex: none; width: 22px; height: 18px; color: var(--teal); }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 26px; }
.facts .pill { font-size: 16px; }
.facts .pill::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }

.screens { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.shot { overflow: hidden; border: 5px solid var(--frame-dark); border-radius: 22px; background: var(--frame-fill); box-shadow: 5px 9px 0 var(--shadow); }
.shot img, .shot video { display: block; width: 100%; height: auto; }
.shot-main { grid-column: 1 / -1; }
.shot-a { transform: rotate(-1.6deg); }
.shot-b { transform: rotate(1.4deg); }

/* mission board with pinned notes */
.board {
  position: relative; z-index: 2; margin-top: 70px; padding: 54px clamp(16px, 3vw, 34px) 36px;
  background: radial-gradient(circle, var(--cork-dot) 0 1.5px, transparent 2px) 0 0 / 17px 19px, radial-gradient(circle, var(--cork-dot) 0 1px, transparent 1.6px) 8px 9px / 23px 21px, var(--cork);
  border: 12px solid var(--teal); border-radius: 30px;
  box-shadow: 0 0 0 4px var(--soil-deep), inset 0 0 0 4px var(--teal-edge), 6px 12px 0 4px var(--shadow);
}
.board-sign { position: absolute; left: 50%; top: -46px; width: 74px; height: 74px; transform: translateX(-50%); border-radius: 50%; background: var(--cream-light); border: 6px solid var(--teal); box-shadow: 0 0 0 4px var(--soil-deep), 0 5px 0 4px var(--shadow); display: grid; place-items: center; }
.board-sign svg { width: 34px; height: 34px; }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
.note {
  position: relative; min-width: 0; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: start;
  background: var(--cream-light); color: var(--ink); border: 3px solid var(--soil-deep); border-radius: 10px 12px 18px 14px;
  padding: 22px 20px 20px; box-shadow: 4px 7px 0 rgba(46, 32, 22, 0.38);
}
.note:nth-child(odd) { transform: rotate(-0.9deg); }
.note:nth-child(even) { transform: rotate(0.8deg); }
.note::before { content: ""; position: absolute; top: -11px; left: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--soil-deep); background: radial-gradient(circle at 35% 35%, var(--hi) 0 3px, transparent 4px), var(--pin, var(--heart)); }
.note:nth-child(2) { --pin: var(--green); }
.note:nth-child(3) { --pin: var(--blue); }
.note:nth-child(4) { --pin: var(--gold); }
.note h3 { font: 23px/1.1 var(--display); letter-spacing: 0.01em; color: var(--soil-deep); margin-bottom: 6px; }
.note p { font: 700 16px/1.5 var(--body); }
.slot { position: relative; width: 78px; height: 78px; border: 4px solid var(--soil-deep); border-radius: 16px; background: var(--cream); box-shadow: 0 4px 0 var(--soil-deep), inset 0 3px 0 var(--white); display: grid; place-items: center; }
.slot svg { width: 52px; height: 52px; }
.slot-duo img { position: absolute; width: 46px; border-radius: 10px; }
.slot-duo img:first-child { left: 4px; top: 6px; }
.slot-duo img:last-child { right: 4px; bottom: 6px; transform: scaleX(-1); }
.slot-mine img { width: 66px; }
.slot-boss { background: radial-gradient(circle at 60% 50%, var(--tunnel) 0 40%, var(--tunnel-2)); overflow: visible; }
/* the king leans out of his hole to the left; the wider gap keeps the heading clear */
.note-boss { column-gap: 42px; }
.slot-boss img { position: absolute; width: 156px; max-width: none; left: -52px; top: -66px; filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.35)); }
@media (prefers-reduced-motion: no-preference) {
  .slot-boss img { animation: lunge 3.2s ease-in-out infinite; }
}
@keyframes lunge { 0%, 60%, 100% { translate: 0 0; } 72% { translate: 5px -3px; } 84% { translate: 2px 0; } }

/* Rusty dives into the next layer */
.dive { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 54px; }
.dive .bubble { flex: 0 1 auto; }
.dive-rusty { position: relative; flex: none; width: 210px; height: 200px; }
.dive-tunnel { position: absolute; left: 50%; bottom: 42%; width: 96px; height: 300px; transform: translateX(-50%); border-radius: 0 0 48px 48px; background: linear-gradient(rgba(15, 10, 6, 0), rgba(15, 10, 6, 0.86) 45%); }
.dive-rusty img { position: absolute; left: 0; top: 18px; width: 210px; transform: rotate(68deg); filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.35)); }

/* ---------- photo flip: an official and a fun photo in one toggle button ---------- */
.flip { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.flip-frame { position: relative; display: block; overflow: hidden; }
.flip-frame > .photo-official, .flip-frame > .photo-fun { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* cross-fade: the fun layer fades in on top, the official one steps out once it is covered */
.photo-official { opacity: 1; transition: opacity 0s; }
.photo-fun { opacity: 0; transition: opacity 0.28s ease; }
.flip[aria-pressed="true"] .photo-fun, .flip.peek .photo-fun { opacity: 1; }
.flip[aria-pressed="true"] .photo-official, .flip.peek .photo-official { opacity: 0; transition: opacity 0s 0.28s; }
@media (hover: hover) {
  :root:not(.js) .flip:hover .photo-fun { opacity: 1; }
  :root:not(.js) .flip:hover .photo-official { opacity: 0; transition: opacity 0s 0.28s; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-official, .photo-fun, .flip[aria-pressed="true"] .photo-official, .flip.peek .photo-official { transition: none; }
}
.flip-chip {
  position: absolute; top: -14px; right: -16px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 5px 7px; background: var(--soil-deep); color: var(--cream-light); border: 3px solid var(--pill-edge); border-radius: 999px;
  box-shadow: 2px 3px 0 var(--shadow-soft); font: 14px/1.1 var(--display); letter-spacing: 0.02em; white-space: nowrap; transform: rotate(3deg);
  pointer-events: none;
}
.flip-chip svg { flex: none; width: 16px; height: 16px; }
.chip-hover { display: none; }
@media (hover: hover) {
  .chip-hover { display: inline; }
  .chip-tap { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .flip-chip svg { transition: transform 0.4s ease; }
  .flip:hover .flip-chip svg, .flip[aria-pressed="true"] .flip-chip svg { transform: rotate(180deg); }
}

/* photo placeholders (Pentti, Joni): a real <img class="photo-official"> or <img class="photo-fun"> drops in later */
.ph { overflow: hidden; }
.ph-official { background: linear-gradient(var(--sky-1), var(--sky-2) 52%, var(--sky-3) 72%, var(--green) 72% 77%, var(--soil) 77%); }
.ph-fun { background: radial-gradient(circle at 50% 38%, var(--gold-light) 0 11%, transparent 11.5%), repeating-conic-gradient(from 4deg at 50% 38%, var(--gold) 0 12deg, var(--orange) 12deg 24deg); }
.ph-sil { position: absolute; left: 50%; top: 22%; width: 26%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: rgba(46, 32, 22, 0.32); }
.ph-sil::before { content: ""; position: absolute; left: -18%; right: -18%; top: -22%; height: 52%; background: var(--gold); border: 3px solid var(--soil-deep); border-radius: 60% 60% 10% 10% / 100% 100% 14% 14%; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--gold-edge); }
.ph-sil::after { content: ""; position: absolute; left: 50%; top: 104%; width: 240%; height: 130%; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: rgba(46, 32, 22, 0.32); }
.ph-fun .ph-sil { top: 17%; background: rgba(46, 32, 22, 0.55); transform: translateX(-50%) rotate(-13deg); }
.ph-fun .ph-sil::before { background: var(--cream-light); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 3px 0 var(--cream-edge); transform: rotate(-18deg) translate(-12%, -18%); }
.ph-fun .ph-sil::after { background: rgba(46, 32, 22, 0.55); }
.ph-eyes { position: absolute; left: 6%; right: 6%; top: 34%; display: flex; align-items: center; justify-content: space-between; }
.ph-eyes::before, .ph-eyes::after { content: ""; width: 47%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--soil-deep); background: radial-gradient(circle at 30% 68%, var(--soil-deep) 0 30%, var(--white) 32%); }
.ph-eyes::after { width: 38%; background: radial-gradient(circle at 70% 30%, var(--soil-deep) 0 30%, var(--white) 32%); }
.ph-note { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1; background: var(--cream-light); color: var(--ink); border: 3px solid var(--soil-deep); border-radius: 12px; padding: 5px 8px 6px; font: 800 13px/1.3 var(--body); text-align: center; }
.ph-art { background: radial-gradient(circle at 18% 12%, var(--sun), var(--sun-0) 40%), linear-gradient(var(--sky-1), var(--sky-2) 60%, var(--sky-3)); }
.flip-frame.ph-art > img { inset: 6% 4%; width: 92%; height: 88%; object-fit: contain; }

/* ---------- 3. crew ---------- */
.company {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 24px; margin-top: 30px;
  background: var(--company); border: 4px solid var(--soil-deep); border-radius: 26px; padding: 16px 22px 18px 22px;
  box-shadow: 5px 8px 0 var(--shadow), inset 0 0 0 3px var(--company-trim), inset 0 3px 0 5px rgba(255, 255, 255, 0.14), inset 0 -6px 0 3px var(--company-edge);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.06) 0 14px, transparent 14px 28px);
}
/* rivets in the corners, like the game's panels */
.company::before, .company::after { content: ""; position: absolute; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--iron); border: 2px solid var(--soil-deep); box-shadow: inset 0 2px 0 var(--white); }
.company::before { left: 12px; }
.company::after { right: 12px; }
.co-main { min-width: 0; display: grid; gap: 4px; }
.co-kicker { font: 900 12px/1.2 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); opacity: 0.85; }
.co-sub { font: 800 15px/1.3 var(--body); color: var(--cream-light); opacity: 0.85; }
.co-tiles { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.co-tile { display: grid; align-content: center; gap: 4px; min-height: 84px; padding: 10px 16px 12px; background: var(--soil-deep); border: 3px solid var(--pill-edge); border-radius: 18px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4), 0 3px 0 var(--company-edge); }
.co-tile dt { font: 900 11px/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); }
.co-tile dd { margin: 0; }
.co-crew { display: flex; align-items: center; gap: 12px; }
.co-num { font: 38px/1 var(--display); color: var(--gold); text-shadow: 0 3px 0 var(--pill-edge); }
.co-faces { display: flex; }
.co-face { position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--soil-deep); box-shadow: 0 0 0 2px var(--gold); overflow: hidden; }
.co-face + .co-face { margin-left: -10px; }
.co-face .ph-sil { top: 22%; width: 44%; }
.co-face-rusty { z-index: 1; object-fit: cover; background: var(--sky-2); }
.co-motto { font: 22px/1.15 var(--display); letter-spacing: 0.01em; color: var(--cream-light); text-shadow: 0 2px 0 var(--pill-edge); }
.co-flag { position: relative; width: 104px; height: 128px; margin-top: -40px; background: var(--orange); border: 4px solid var(--soil-deep); border-bottom: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); display: grid; place-items: start center; padding-top: 12px; box-shadow: inset 0 4px 0 var(--hi); }
.co-flag img { width: 72px; border-radius: 16px; }
.co-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: clamp(26px, 3.4vw, 36px)/1.1 var(--display); color: var(--cream-light); -webkit-text-stroke: 7px var(--soil-deep); paint-order: stroke fill; text-shadow: 0 4px 0 var(--soil-deep); }
.co-tag { font-size: 0.66em; -webkit-text-stroke: 0; text-shadow: none; color: var(--soil-deep); background: var(--gold); border: 3px solid var(--gold-edge); border-radius: 10px; padding: 3px 10px 4px; box-shadow: 0 3px 0 var(--gold-edge); }
.crew-head { margin-top: 56px; }

/* three cards of one height; on wide screens every row (photo, name, title, role, bio, stats,
   contact) lines up across the cards through subgrid rows */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 26px; margin-top: 54px; }
.pcard {
  --frame: var(--blue); --frame-edge: var(--blue-edge); position: relative; min-width: 0; display: flex; flex-direction: column;
  background: var(--cream); border: 4px solid var(--soil-deep); border-radius: 26px;
  box-shadow: 5px 9px 0 var(--shadow), inset 0 3px 0 var(--cream-light), inset 0 -6px 0 var(--cream-dark); padding-bottom: 22px;
}
.pcard > :not(.pc-top) { margin-inline: 22px; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1101px) {
    .cards { row-gap: 0; }
    .pcard { display: grid; grid-row: span 10; grid-template-rows: subgrid; row-gap: 0; }
    /* the equipment box, the fun stats, the achievements and the quest are rows of their own,
       so each of them starts level in every card */
    .pc-stats { grid-row: span 4; grid-template-rows: subgrid; row-gap: 8px; }
    .pc-stats .pins { align-self: start; }
  }
}
.pcard-rusty { --frame: var(--legend); --frame-edge: var(--legend-edge); box-shadow: 0 0 0 5px var(--gold), 5px 9px 0 5px var(--shadow), inset 0 3px 0 var(--cream-light), inset 0 -6px 0 var(--cream-dark); }
.pcard-joni { --frame: var(--green); --frame-edge: var(--green-edge); }
.pc-top { position: relative; }
.pc-banner { position: relative; height: 104px; border-radius: 22px 22px 0 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 0 12px, transparent 12px 24px), var(--frame); border-bottom: 4px solid var(--soil-deep); box-shadow: inset 0 -6px 0 var(--frame-edge); }
.pc-tag { position: absolute; top: 10px; left: 12px; font: 15px/1 var(--display); color: var(--gold); background: var(--soil-deep); border: 2px solid var(--pill-edge); border-radius: 8px; padding: 4px 8px 5px; }
.flip-photo { width: min(calc(100% - 44px), 250px); margin: -60px auto 0; }
.flip-photo .flip-frame { aspect-ratio: 5 / 4; border: 4px solid var(--soil-deep); border-radius: 20px; box-shadow: 4px 6px 0 var(--shadow); }
.pc-name { margin-top: 22px; font: 20px/1 var(--display); color: var(--soil); letter-spacing: 0.02em; text-align: center; }
.pc-title { margin-top: 4px; font: clamp(30px, 2.8vw, 36px)/1.05 var(--display); color: var(--frame); -webkit-text-stroke: 7px var(--soil-deep); paint-order: stroke fill; text-shadow: 0 4px 0 var(--soil-deep); text-align: center; }
.pc-role { margin-top: 8px; font: 800 15px/1.4 var(--body); color: var(--soil); text-align: center; }
.pc-bio { margin-top: 16px; font: 600 16px/1.6 var(--body); }
/* crew card stats: the equipment as the game's own item slots, the fun stats as enamel pins */
.pc-stats { margin-top: 18px; display: grid; align-content: start; gap: 8px; }
.loadout { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 14px 10px 10px; background: var(--cream-light); border: 3px solid var(--cream-dark); border-radius: 18px; box-shadow: inset 0 2px 0 var(--white); }
.lo-slots { display: flex; gap: 10px; }
.slot-box {
  --tier: var(--blue); position: relative; display: grid; place-items: center; width: 60px; height: 60px; flex: none;
  border-radius: 14px; border: 3px solid var(--tier); background: radial-gradient(circle at 50% 36%, var(--slot-glow), var(--soil-deep) 74%);
  box-shadow: 0 0 0 2px var(--soil-deep), inset 0 3px 8px rgba(0, 0, 0, 0.5), 0 4px 0 2px var(--soil-deep);
}
.slot-box img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); }
.tier-3 { --tier: var(--blue); }
.tier-4 { --tier: var(--tier4); }
.tier-item { --tier: var(--gold); }
.slot-count { position: absolute; right: -12px; top: -12px; display: grid; place-items: center; min-width: 32px; height: 24px; padding: 0 5px; background: var(--green); color: var(--white); border: 2px solid var(--soil-deep); border-radius: 999px; box-shadow: 0 2px 0 var(--soil-deep); font: 17px/1 var(--display); text-align: center; text-shadow: 0 1px 0 var(--green-edge); }
.slot-count svg { display: block; width: 21px; height: 11px; filter: drop-shadow(0 1px 0 var(--green-edge)); }
.lo-text { min-width: 0; display: grid; gap: 3px; }
.loadout { position: relative; }
.tip { position: static; display: inline-block; }
.tip-btn { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 16px; -webkit-tap-highlight-color: transparent; }
.tip-btn .slot-box { transition: transform 0.15s ease; }
.tip-btn:hover .slot-box, .tip.open .slot-box { transform: translateY(-3px); }
.tip-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; display: grid; gap: 8px; padding: 14px 16px 15px;
  background: var(--cream-light); color: var(--ink); border: 3px solid var(--soil-deep); border-radius: 16px; box-shadow: 4px 6px 0 var(--shadow);
  text-align: left; font: 600 14.5px/1.45 var(--body);
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s;
}
.tip.open .tip-pop, .tip-btn:focus-visible + .tip-pop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s; }
@media (hover: hover) {
  .tip:hover .tip-pop { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .tip-pop, .tip.open .tip-pop, .tip-btn .slot-box { transition: none; transform: none; }
}
.tp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 19px/1.15 var(--display); letter-spacing: 0.01em; color: var(--soil-deep); }
.tp-mk { padding: 3px 8px 4px; border: 2px solid var(--soil-deep); border-radius: 999px; font: 13px/1 var(--display); color: var(--white); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.tp-mk.mk3 { background: var(--blue); }
.tp-mk.mk4 { background: var(--tier4); }
.tp-row { display: block; }
.tp-h { display: block; margin-bottom: 2px; font: 900 11px/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soil); }
.lo-h { font: 900 11px/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--soil); }
.lo-name { font: 19px/1.15 var(--display); letter-spacing: 0.01em; color: var(--soil-deep); }
.lo-sub { font: 800 13px/1.3 var(--body); color: var(--soil); }
.pins > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; padding: 8px 2px; border-bottom: 2px dashed var(--cream-dark); }
.pins-ach { padding-top: 4px; border-top: 2px dashed var(--cream-dark); }
.pins > .ach { grid-template-columns: minmax(0, 1fr); }
.pins > .ach dt { gap: 12px; font: 21px/1.1 var(--display); letter-spacing: 0.01em; color: var(--soil-deep); }
.pins > .ach .pin { width: 42px; height: 42px; }
.pins > .quest {
  grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 10px; padding: 12px 14px 14px;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 10px, transparent 10px 20px), var(--teal);
  border: 3px solid var(--soil-deep); border-radius: 16px; box-shadow: 0 4px 0 var(--teal-edge), inset 0 3px 0 rgba(255, 255, 255, 0.22);
}
.pins > .quest:last-child { border-bottom: 3px solid var(--soil-deep); }
.quest dt { color: var(--cream-light); font: 900 11.5px/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; }
.quest dt > span { display: inline-flex; align-items: center; gap: 8px; }
.quest-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 210, 74, 0.35); }
@media (prefers-reduced-motion: no-preference) {
  .quest-dot { animation: quest-pulse 1.6s ease-in-out infinite; }
}
@keyframes quest-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 210, 74, 0.5); } 50% { box-shadow: 0 0 0 7px rgba(255, 210, 74, 0); } }
.pins .quest dd { padding-left: 46px; text-align: left; font: 22px/1.1 var(--display); letter-spacing: 0.01em; color: var(--white); text-shadow: 0 2px 0 var(--teal-edge); text-wrap: balance; }
.quest dd a { color: inherit; text-decoration: none; }
.quest dd a::after { content: " \2192"; color: var(--gold); }
.quest dd a:hover { color: var(--gold-light); }
.pins > div:last-child { border-bottom: 0; }
.pins dt { display: flex; align-items: center; gap: 10px; min-width: 0; font: 800 15px/1.3 var(--body); color: var(--soil-dark); }
.pins dd { min-width: 0; font: 20px/1.2 var(--display); letter-spacing: 0.01em; color: var(--soil-deep); text-align: right; text-wrap: balance; }
/* Joni's achievements: two medal tiles, each opens its own card */
.pins .ach dd.medals { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 4px 0 2px; text-align: center; }
.medals .tip { display: block; }
.medal {
  width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 8px 11px;
  background: var(--gold-light); color: var(--ink); border: 3px solid var(--gold-edge); border-radius: 16px; box-shadow: 0 3px 0 var(--gold-edge);
}
.medal:hover { background: var(--gold-hover); }
.medal-ring {
  display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 4px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 40% 34%, var(--gold-light), var(--gold) 72%); border: 3px solid var(--gold-edge);
  box-shadow: 0 0 0 2px var(--soil-deep), inset 0 -4px 0 rgba(176, 122, 18, 0.45);
}
.medal-ring img { width: 46px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(46, 32, 22, 0.3)); }
.medal-name { font: 17px/1.1 var(--display); color: var(--soil-deep); }
.medal-sub { font: 800 12px/1.25 var(--body); color: var(--soil); }
.pin { flex: none; width: 36px; height: 36px; filter: drop-shadow(0 2px 0 rgba(46, 32, 22, 0.25)); }
@media (prefers-reduced-motion: no-preference) {
  .pin { transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .pins > div:hover .pin, .fs-rows > div:hover .pin { transform: rotate(-12deg) scale(1.08); }
}
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 6px 6px; background: var(--gold-light); border: 3px solid var(--gold-edge); border-radius: 12px; box-shadow: 0 3px 0 var(--gold-edge); color: var(--ink); font: 16px/1.15 var(--display); }
.badge img { width: 34px; flex: none; }
.badge small { display: block; font: 800 12px/1.2 var(--body); color: var(--soil); }
.pc-contact { margin-top: 14px; padding-top: 14px; border-top: 3px solid var(--cream-dark); font-size: 15px; }
.pc-contact .copy, .fs-rows .copy { min-width: 0; padding-inline: 14px; }
.pc-social { display: inline-block; padding-block: 7px; font-weight: 900; color: var(--orange-edge); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pc-social:hover { color: var(--soil-deep); }
.crew-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 30px; margin-top: 48px; }
.crew-close .plate { margin-top: 0; font-size: 19px; }

/* ---------- 4. meet rusty ---------- */
.rusty-top {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 0 44px; margin-top: 30px;
  grid-template-areas: "stage head" "stage talk" "stage facts"; grid-template-rows: auto auto 1fr;
}
.rusty-head { grid-area: head; }
.rusty-talk { grid-area: talk; min-width: 0; }
.rusty-stage { grid-area: stage; position: relative; min-width: 0; align-self: center; padding-bottom: 74px; }
.rusty-facts { grid-area: facts; align-self: start; margin-top: 30px; }
.flip-stage { position: relative; z-index: 1; width: 100%; max-width: 460px; margin-inline: auto; }
.flip-stage .flip-frame { aspect-ratio: 532 / 388; overflow: visible; filter: drop-shadow(6px 9px 0 rgba(0, 0, 0, 0.35)); }
.flip-stage .flip-chip { top: auto; right: auto; left: 50%; bottom: -32px; transform: translateX(-50%) rotate(-2deg); }
.rusty-stage::before { content: ""; position: absolute; left: -6%; right: -6%; top: -8%; bottom: 14%; z-index: 0; background: radial-gradient(ellipse 50% 50% at 50% 56%, var(--spot), rgba(255, 214, 140, 0) 72%); pointer-events: none; }
.plinth {
  position: absolute; left: 7%; right: 11%; bottom: -6px; z-index: 0; height: 96px; display: grid; place-items: center; padding-top: 14px;
  border: 4px solid var(--soil-deep); border-radius: 14px 14px 18px 18px; overflow: hidden;
  background: linear-gradient(180deg, var(--steel-1) 0, var(--steel-2) 26%, var(--steel-3) 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.22), inset 0 -6px 0 rgba(0, 0, 0, 0.28), 5px 8px 0 var(--shadow);
}
/* hazard band on the top edge, rivets in the corners */
.plinth::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 13px; background: repeating-linear-gradient(-45deg, var(--gold) 0 10px, var(--soil-deep) 10px 20px); border-bottom: 3px solid var(--soil-deep); }
.plinth::after {
  content: ""; position: absolute; inset: 22px 10px 10px;
  background:
    radial-gradient(circle at 0 0, var(--steel-1) 0 3px, var(--soil-deep) 3.5px 5.5px, transparent 6px) 0 0 / 50% 50% no-repeat,
    radial-gradient(circle at 100% 0, var(--steel-1) 0 3px, var(--soil-deep) 3.5px 5.5px, transparent 6px) 100% 0 / 50% 50% no-repeat,
    radial-gradient(circle at 0 100%, var(--steel-1) 0 3px, var(--soil-deep) 3.5px 5.5px, transparent 6px) 0 100% / 50% 50% no-repeat,
    radial-gradient(circle at 100% 100%, var(--steel-1) 0 3px, var(--soil-deep) 3.5px 5.5px, transparent 6px) 100% 100% / 50% 50% no-repeat;
}
.plinth-plate { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; padding: 6px 20px 7px; background: linear-gradient(var(--brass-1), var(--brass-2) 58%, var(--brass-3)); border: 3px solid var(--soil-deep); border-radius: 10px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 3px 0 rgba(0, 0, 0, 0.3); }
.plinth-name { font: 22px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soil-deep); }
.plinth-sub { font: 900 10.5px/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-text); }
.bubble-big { margin-top: 24px; padding: 20px 24px 22px; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.25; }


/* fact sheet: an in-game item card, labels and values in two aligned columns */
.fact-sheet { padding: 0; overflow: hidden; background: var(--soil-deep); border-color: var(--pill-edge); color: var(--on-dark); box-shadow: 5px 8px 0 var(--shadow), inset 0 3px 0 rgba(255, 255, 255, 0.08); }
.fs-title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 13px 22px 15px;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 0 12px, transparent 12px 24px), var(--legend);
  border-bottom: 4px solid var(--pill-edge); box-shadow: inset 0 -5px 0 var(--legend-edge), inset 0 3px 0 var(--hi);
  font: 27px/1.1 var(--display); letter-spacing: 0.01em; color: var(--cream-light);
  -webkit-text-stroke: 6px var(--soil-deep); paint-order: stroke fill; text-shadow: 0 3px 0 var(--soil-deep);
}
.fs-title .fs-sep { color: var(--gold); }
.fs-title .fs-sub { font-size: 20px; color: var(--gold); }
.fs-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 22px; padding: 4px 22px 8px; }
.fs-rows > div { display: grid; grid-column: 1 / -1; grid-template-columns: 15em minmax(0, 1fr); column-gap: 22px; align-items: center; padding: 10px 0; border-bottom: 2px dashed var(--dash-dark); }
@supports (grid-template-columns: subgrid) {
  .fs-rows > div { grid-template-columns: subgrid; }
}
.fs-rows > div:last-child { border-bottom: 0; }
.fs-rows dt { display: flex; align-items: center; gap: 12px; font: 800 14px/1.4 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-soft); }
.fs-rows .pin { width: 34px; height: 34px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)); }
.fs-rows dd { min-width: 0; font: 19px/1.35 var(--display); letter-spacing: 0.01em; color: var(--gold); text-align: right; text-wrap: balance; }
.fs-rows dd a { color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fs-rows dd a:hover { color: var(--gold-light); }
.fs-rows .mailrow + .mailrow { margin-top: 10px; }
.fs-rows .email { font: 800 16px/1.3 var(--body); color: var(--on-dark); }

/* ---------- 5. crew rules: two-sided signs that turn over like a metal plate ---------- */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px; margin-top: 34px; }
.rule { position: relative; min-width: 0; perspective: 1400px; cursor: pointer; }
.rule-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.3, 1.25, 0.45, 1); }
.rule.open .rule-inner, .rule.peek .rule-inner { transform: rotateY(180deg); }
.rule-side { grid-area: 1 / 1; min-width: 0; display: grid; align-content: start; padding: 30px 28px 72px; border-radius: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* every side has its own rivets, so nothing floats over the sign while it turns */
.rule-side::before, .rule-side::after { content: ""; position: absolute; z-index: 3; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--iron); border: 2px solid var(--soil-deep); box-shadow: inset 0 2px 0 var(--white); }
.rule-side::before { left: 12px; }
.rule-side::after { right: 12px; }
.rule-front-body { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; }
.rule-front-body svg { width: 64px; height: 64px; }
/* both sides: the same heading and body type */
.rule-side h3 { font: 26px/1.1 var(--display); letter-spacing: 0.01em; color: var(--soil-deep); margin-bottom: 6px; }
.rule-side p:not(.rule-eyebrow) { font: 600 16px/1.6 var(--body); max-width: 52ch; }
/* the back is the League's plum velvet (the game's pin board recipe) */
.rule-back { transform: rotateY(180deg); background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px), radial-gradient(120% 80% at 50% 0%, var(--velvet-1) 0%, var(--velvet-2) 52%, var(--velvet-3) 100%); background-size: 7px 7px, auto; border-color: var(--velvet-edge); color: var(--cream-light); box-shadow: 5px 8px 0 var(--shadow), inset 0 0 0 3px var(--velvet-edge), inset 0 10px 16px rgba(0, 0, 0, 0.45); }
.rule-eyebrow { font: 900 12px/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.rule-back h3 { color: var(--cream-light); }
.rule-back p:not(.rule-eyebrow) { color: var(--cream-light); }
.rule-btn {
  position: absolute; right: 18px; bottom: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 14px 5px 10px;
  background: var(--soil-deep); color: var(--cream-light); border: 3px solid var(--pill-edge); border-radius: 999px;
  box-shadow: 2px 4px 0 var(--shadow-soft); font: 16px/1 var(--display); letter-spacing: 0.02em; cursor: pointer;
}
.rule-back .rule-btn { background: var(--gold); color: var(--soil-deep); }
.rule-back .rule-btn svg path { stroke: var(--soil-deep); }
.rule-btn svg { width: 16px; height: 16px; flex: none; }
.rule:hover .rule-front .rule-btn { background: var(--soil-dark); }
.rule:has(.rule-btn:focus-visible) { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 20px; }
@media (prefers-reduced-motion: reduce) {
  .rule-inner { transition: none; }
  .rule.open .rule-inner, .rule.peek .rule-inner { transform: none; }
  .rule-back { transform: none; visibility: hidden; }
  .rule.open .rule-back, .rule.peek .rule-back { visibility: visible; }
  .rule.open .rule-front, .rule.peek .rule-front { visibility: hidden; }
}

/* ---------- 6. partners ---------- */
.partners { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 34px; align-items: stretch; }
.poster { background: var(--cream-light); transform: rotate(-0.5deg); padding: clamp(24px, 3.4vw, 40px); }
.poster::before, .poster::after { content: ""; position: absolute; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--white) 0 2px, var(--iron) 3px); border: 3px solid var(--soil-deep); }
.poster::before { left: 16px; }
.poster::after { right: 16px; }
.poster h2 { margin-top: 16px; font: clamp(32px, 4vw, 48px)/1.05 var(--display); color: var(--soil-deep); }
.poster h2 span { display: block; color: var(--orange); -webkit-text-stroke: 6px var(--soil-deep); paint-order: stroke fill; text-shadow: 0 4px 0 var(--soil-deep); margin-top: 4px; }
.poster p { margin-top: 16px; max-width: 60ch; }
/* the header row: the eyebrow and a big red ink WANTED stamp */
.poster-head .eyebrow::after { content: none; }
.poster-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.stamp-wanted {
  margin: -4px -4px 0 auto; padding: 5px 18px 8px;
  font: clamp(36px, 4.4vw, 58px)/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--boss-red);
  border: 6px solid var(--boss-red); border-radius: 14px; box-shadow: inset 0 0 0 3px var(--cream-light), inset 0 0 0 7px var(--boss-red);
  transform: rotate(7deg); opacity: 0.9; mix-blend-mode: multiply; pointer-events: none;
}
/* the parking bay: Rusty, a plus, and an empty spot for the partner's drill */
.bay {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px 14px;
  margin-top: 24px; padding: 16px 18px 28px; border: 3px solid var(--cream-dark); border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 214, 140, 0.35), transparent 70%), var(--cream);
  box-shadow: inset 0 3px 0 var(--white);
}
.bay::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(-45deg, var(--gold) 0 12px, var(--soil-deep) 12px 24px); border-top: 3px solid var(--soil-deep); }
.bay-rusty { width: 100%; max-width: 180px; justify-self: end; filter: drop-shadow(4px 6px 0 rgba(46, 32, 22, 0.25)); }
.bay-plus { align-self: center; font: 58px/1 var(--display); color: var(--orange); -webkit-text-stroke: 7px var(--soil-deep); paint-order: stroke fill; text-shadow: 0 5px 0 var(--soil-deep); }
.bay-spot { position: relative; display: grid; place-items: center; width: 100%; max-width: 180px; aspect-ratio: 532 / 388; justify-self: start; border: 4px dashed var(--soil); border-radius: 18px; background: rgba(255, 255, 255, 0.35); }
.bay-ghost { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; filter: brightness(0); opacity: 0.16; transform: scaleX(-1); }
.bay-q { position: relative; z-index: 1; font: 70px/1 var(--display); color: var(--gold); -webkit-text-stroke: 8px var(--soil-deep); paint-order: stroke fill; text-shadow: 0 5px 0 var(--soil-deep); }
.bay-label { position: absolute; left: 50%; bottom: -16px; z-index: 2; transform: translateX(-50%); padding: 5px 12px 6px; background: var(--soil-deep); color: var(--gold); border: 2px solid var(--pill-edge); border-radius: 999px; font: 15px/1 var(--display); letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
@media (prefers-reduced-motion: no-preference) {
  .bay-q { animation: q-bob 2.4s ease-in-out infinite; }
  .bay-rusty { animation: bob 3.4s ease-in-out infinite; transform-origin: 40% 80%; }
}
@keyframes q-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
.ores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ores .pill::before { content: ""; width: 14px; height: 12px; border: 2px solid var(--pill-edge); border-radius: 4px 6px 5px 3px; background: var(--ore, var(--copper)); box-shadow: inset 0 2px 0 var(--hi); }
.ores li:nth-child(2) { --ore: var(--iron); }
.ores li:nth-child(3) { --ore: var(--gold); }
.ores li:nth-child(4) { --ore: var(--gem); }
.ores li:nth-child(5) { --ore: var(--blue); }
.callside { min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.callcard { flex: 1; display: flex; flex-direction: column; padding: 0 0 22px; overflow: hidden; }
.callcard .cc-band { height: 22px; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 10px, transparent 10px 20px), var(--green); border-bottom: 4px solid var(--soil-deep); }
.callcard .cc-in { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 14px; padding: 20px 22px 0; }
.cc-who { display: flex; align-items: center; gap: 14px; }
.cc-photo { position: relative; display: block; flex: none; width: 78px; height: 78px; border-radius: 50%; border: 4px solid var(--soil-deep); box-shadow: 3px 4px 0 var(--shadow-soft); }
.cc-photo .ph-sil { top: 24%; width: 42%; }
.cc-id { min-width: 0; display: grid; gap: 2px; }
.cc-kicker { font: 900 11px/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-edge); }
.cc-role { font: 800 14px/1.35 var(--body); color: var(--soil); }
.cc-line { font: 700 16px/1.5 var(--body); }
.cc-mail { display: grid; gap: 14px; padding: 14px 14px 16px; background: var(--cream-light); border: 3px solid var(--cream-dark); border-radius: 18px; box-shadow: inset 0 2px 0 var(--white); }
.cc-mail-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cc-mail-row .pin { width: 40px; height: 40px; }
.cc-mail-text { display: grid; gap: 2px; min-width: 0; }
.cc-mail-h { font: 900 11px/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--soil); }
.cc-mail .email { font: 16.5px/1.2 var(--display); letter-spacing: 0.01em; color: var(--soil-deep); overflow-wrap: normal; }
.cc-mail-note { font: 800 14px/1.35 var(--body); color: var(--soil-dark); }
@media (max-width: 900px) {
  .callcard .cc-mail .email { font-size: 18px; }
}
.cc-mail-row { justify-content: space-between; }
.cc-mail-row .cc-mail-text { flex: 1; }
.cc-email-btn { width: 100%; gap: 10px; min-height: 50px; font-size: 20px; }
.btn-green.cc-email-btn { text-decoration: none; }
.cc-email-btn svg { flex: none; width: 22px; height: 18px; filter: drop-shadow(0 2px 0 var(--orange-edge)); }
.btn-green.cc-email-btn svg { filter: drop-shadow(0 2px 0 var(--green-edge)); }
/* crew cards: the contact box sits under a plain divider */
.pcard .pc-contact { border-top: 0; padding-top: 0; margin-top: 16px; }
.pcard .cc-mail { height: 100%; align-content: space-between; }
/* Email Pentti, Follow Rusty and Email Joni and their enamel pins sit on one line across the cards */
.pcard .cc-mail-row { align-items: flex-start; }
.pcard .cc-mail .email { font-size: 15.5px; }
.cc-say { padding: 20px 18px 0; }
.callside .cc-say { align-items: center; gap: 14px; }
.cc-say .say-mark { width: 104px; }
.cc-say .bubble { font-size: 18px; }
.cc-name { font: 28px/1.1 var(--display); color: var(--soil-deep); }
.callcard .email { display: block; font-size: 17px; }
.callcard .copy { min-width: 0; padding-inline: 16px; }
.callside .say { align-items: flex-start; }

/* ---------- 7. dispatch (rendered from the game's patch notes) ---------- */
.log { position: relative; margin-top: 36px; padding-left: 70px; max-width: 820px; }
.log::before { content: ""; position: absolute; left: 20px; top: -18px; bottom: -6px; width: 30px; border-radius: 15px; background: linear-gradient(90deg, var(--tunnel), var(--tunnel-2) 55%, var(--tunnel)); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25); }
.entry { position: relative; }
.entry + .entry { margin-top: 30px; }
.ver { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 12px -70px; }
.ver .pill { font-size: 18px; }
.ver time { font: 900 15px/1.2 var(--body); color: var(--on-dark); letter-spacing: 0.04em; text-transform: uppercase; }
.entry .panel { padding: 20px 24px 22px; }
.entry h3 { font: 25px/1.15 var(--display); color: var(--soil-deep); margin-bottom: 6px; }
.entry p { font-size: 16px; max-width: 62ch; }
.notes-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 40px; padding: 6px 14px 7px; border: 3px solid var(--cream-edge); border-radius: 12px; background: var(--cream-light); color: var(--ink); box-shadow: 0 4px 0 var(--cream-edge), inset 0 2px 0 var(--white); font: 17px/1 var(--display); cursor: pointer; }
.notes-btn:hover { background: var(--gold-light); }
.notes-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cream-edge); }
.notes-btn svg { width: 14px; height: 14px; flex: none; transition: transform 0.2s ease; }
.notes-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.full-notes { margin-top: 18px; padding-top: 16px; border-top: 3px dashed var(--cream-dark); }
.full-notes h4 { margin: 18px 0 8px; font: 20px/1.2 var(--display); letter-spacing: 0.01em; color: var(--soil-deep); }
.full-notes h4:first-child { margin-top: 0; }
.full-notes ul { display: grid; gap: 6px; max-width: 64ch; }
.full-notes li { position: relative; padding-left: 20px; font: 600 15.5px/1.5 var(--body); }
.full-notes li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); border: 1.5px solid var(--orange-edge); transform: rotate(45deg); }
.full-notes p + p, .full-notes ul + p { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .notes-btn svg { transition: none; }
}
.log-end { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; max-width: 820px; margin-top: 18px; padding-left: 70px; }
.log-end-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.log-note { font: 800 15px/1.4 var(--body); color: var(--on-dark-soft); }
.matriarch { width: 210px; margin-right: -12px; filter: drop-shadow(5px 8px 0 rgba(0, 0, 0, 0.45)); }

/* ---------- 8. community ---------- */
.camp { position: relative; margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 36px; align-items: center; padding-top: 34px; }
.camp h2 { font: clamp(34px, 4vw, 48px)/1.05 var(--display); color: var(--soil-deep); }
.camp p { margin-top: 10px; max-width: 54ch; }
.chans { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding-top: 22px; border-top: 3px dashed var(--cream-dark); }
.chans li { flex: 1 1 0; min-width: 0; max-width: 150px; }
.soc {
  display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; padding: 14px 6px 11px;
  background: var(--cream-light); color: var(--ink); border: 3px solid var(--soil-deep); border-radius: 18px;
  box-shadow: 0 5px 0 var(--soil-deep), inset 0 3px 0 var(--white); font: 17px/1.1 var(--display); letter-spacing: 0.01em;
  text-decoration: none; text-align: center; transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.soc svg { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 3px 0 rgba(46, 32, 22, 0.3)); }
.soc:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 7px 0 var(--soil-deep), inset 0 3px 0 var(--white); }
.soc:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--soil-deep), inset 0 3px 0 var(--white); }
.beetle { position: absolute; right: 34px; top: -58px; width: 92px; filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.4)); }

/* ---------- footer: deep down, lamp light (the lamp is a light switch) ---------- */
.l-core { z-index: 5; background: var(--core-bg); color: var(--on-dark); transition: background-color 0.35s ease; }
.l-core::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 760px 520px at 50% 0, var(--lamp), var(--lamp-2) 48%, var(--lamp-0) 75%); transition: opacity 0.35s ease; }
.lamp { position: absolute; left: 50%; top: 0; z-index: 3; width: 70px; height: 150px; margin-left: -35px; padding: 0; border: 0; border-radius: 0 0 36px 36px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lamp svg { display: block; width: 100%; height: 100%; transform-origin: 50% 0; }
.lamp-halo, .lamp-glass, .lamp-core, .lamp-shine { transition: fill 0.2s ease, opacity 0.2s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lamp:hover svg { animation: swing 1.4s ease-in-out; }
}
@keyframes swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(5deg); } 60% { transform: rotate(-3.5deg); } 85% { transform: rotate(1.5deg); } }
.lamp-hint { position: absolute; z-index: 3; top: 100px; left: calc(50% + 46px); max-width: 130px; font: 800 13px/1.3 var(--body); color: var(--on-dark-soft); transform: rotate(-5deg); pointer-events: none; }
.lamp-hint::before { content: ""; position: absolute; left: -16px; top: 9px; width: 10px; height: 2px; background: currentColor; }
.foot { position: relative; z-index: 2; padding-block: 150px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 34px 44px; align-items: center; }
.foot-rusty { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.foot-art { position: relative; width: min(100%, 300px); aspect-ratio: 532 / 388; filter: drop-shadow(5px 8px 0 rgba(0, 0, 0, 0.5)); transform-origin: 30% 85%; }
.foot-art img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.25s ease; }
.fa-nervous, .fa-eyes { opacity: 0; }
.fa-nervous { filter: brightness(0.25); }
@media (prefers-reduced-motion: no-preference) {
  .foot-art { animation: wave 2.6s ease-in-out infinite; }
}
@keyframes wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } }
.foot-contact { min-width: 0; }
.foot-contact .eyebrow { color: var(--gold); }
.foot-contact .eyebrow::after { content: none; }
.foot-h { margin: 14px 0 6px; font: clamp(30px, 3.4vw, 42px)/1.05 var(--display); letter-spacing: 0.01em; color: var(--cream-light); text-shadow: 0 4px 0 var(--pill-edge); transition: color 0.35s ease; }
.foot-lede { max-width: 42ch; margin-bottom: 6px; font: 700 16px/1.5 var(--body); color: var(--on-dark-soft); transition: color 0.35s ease; }
.foot-lede a { color: var(--on-dark); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.foot-lede a:hover { color: var(--gold); }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 20px; padding: 18px 0 20px; border-block: 2px dashed rgba(243, 234, 208, 0.2); }
.fn-h { margin-bottom: 10px; font: 20px/1.2 var(--display); letter-spacing: 0.01em; color: var(--gold); transition: color 0.35s ease; }
.foot-nav .foot-links { flex-direction: column; gap: 8px; }
.foot-contact .legal { margin-top: 16px; }
.fs-rows a.email { --underline: rgba(243, 234, 208, 0.4); }
.fs-rows a.email:hover { color: var(--gold); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-links a { color: var(--on-dark); font-weight: 800; transition: color 0.35s ease; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.foot-links a:hover, .foot-links a[aria-current="page"] { color: var(--gold); }
.legal { font: 700 14px/1.5 var(--body); color: var(--on-dark-soft); }

/* lights off: the glow goes out and only Rusty's nervous eyes shine */
.l-core.lights-off { background-color: var(--dark-bg); }
.l-core.lights-off::before { opacity: 0; }
.lights-off .lamp-glass { fill: var(--bulb-off); }
.lights-off .lamp-core { fill: var(--bulb-off-core); }
.lights-off .lamp-halo { opacity: 0; }
.lights-off .lamp-shine { opacity: 0.3; }
.lights-off .fa-normal { opacity: 0; }
.lights-off .fa-nervous, .lights-off .fa-eyes { opacity: 1; }
.lights-off .fn-h { color: var(--gold-dim); }
.lights-off .foot-links a, .lights-off .foot-lede a { color: var(--on-dark-dim); }
.lights-off .foot-links a:hover, .lights-off .foot-links a[aria-current="page"] { color: var(--gold-dim); }
.lights-off .legal, .lights-off .lamp-hint, .lights-off .foot-lede { color: var(--legal-dim); }
.lights-off .foot-h { color: var(--on-dark-dim); }
.lights-off .foot-contact .eyebrow { filter: brightness(0.7); }
.lights-off .copy { filter: brightness(0.78); }
.lights-off .foot-say { filter: brightness(0.86); }
@media (prefers-reduced-motion: no-preference) {
  .l-core.lights-off::before { animation: flicker 0.6s linear both; }
  .lights-off .foot-art { animation: shiver 0.22s linear infinite; }
}
@keyframes flicker { 0% { opacity: 1; } 15% { opacity: 0.15; } 28% { opacity: 0.85; } 42% { opacity: 0.1; } 60% { opacity: 0.55; } 75%, 100% { opacity: 0; } }
@keyframes shiver { 0%, 100% { translate: 0 0; } 25% { translate: -1.5px 0; } 75% { translate: 1.5px 0; } }

/* ---------- subpages: the document on cream panels deep in Rockfall ---------- */
.doc-sec { padding-block: 30px 84px; }
.doc { max-width: 840px; padding: clamp(24px, 3.6vw, 44px); }
.doc > section + section { margin-top: 26px; padding-top: 24px; border-top: 3px dashed var(--cream-dark); }
.doc h2, .press-sec h2 { margin-bottom: 8px; font: clamp(25px, 2.6vw, 31px)/1.15 var(--display); letter-spacing: 0.01em; color: var(--soil-deep); }
.doc p, .press-sec p { max-width: 66ch; }
.doc p + p, .press-sec p + p { margin-top: 10px; }
.doc a, .press-sec a { color: var(--orange-edge); font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc a:hover, .press-sec a:hover { color: var(--soil-deep); }
.doc .mailrow { margin-top: 10px; }

.press { display: grid; gap: 34px; }
.press-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.press-sec { min-width: 0; }
.about + .about { margin-top: 24px; padding-top: 20px; border-top: 3px dashed var(--cream-dark); }
.press-sec p.tag { display: block; width: fit-content; margin: 14px 0 6px; padding: 3px 10px 4px; background: var(--soil-deep); color: var(--cream-light); border: 2px solid var(--pill-edge); border-radius: 999px; font: 13px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 14px; }
.tile { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tile-art { position: relative; display: block; aspect-ratio: 4 / 3; border: 4px solid var(--soil-deep); border-radius: 20px; box-shadow: 4px 6px 0 var(--shadow); overflow: hidden; }
.tile-art img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 18px; object-fit: contain; }
.art-sky { background: radial-gradient(circle at 18% 12%, var(--sun), var(--sun-0) 40%), linear-gradient(var(--sky-1), var(--sky-2) 60%, var(--sky-3)); }
.art-cream { background: radial-gradient(circle, var(--cream-dark) 0 1.5px, transparent 2px) 0 0 / 18px 18px, var(--cream-light); }
.art-dark { background: radial-gradient(ellipse at 50% 0, var(--lamp), var(--lamp-0) 70%), var(--soil-deep); }
.tile figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.fname { font: 800 15px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--soil-dark); overflow-wrap: anywhere; }
.dl-note { margin-top: 18px; font: 800 15px/1.4 var(--body); color: var(--soil); }

.moods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.mood { min-width: 0; text-align: center; }
.mood .tile-art { aspect-ratio: 532 / 420; }
.mood .tile-art img { padding: 8px; }
.mood figcaption { margin-top: 10px; font: 20px/1.1 var(--display); color: var(--soil-deep); }
.usage { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 22px; padding: 16px 18px; background: var(--cream-light); border: 3px solid var(--soil-deep); border-radius: 16px; box-shadow: 3px 5px 0 var(--shadow-soft); }
.usage svg { width: 52px; height: 52px; }
.usage p { font-size: 16px; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 18px; margin-top: 14px; }
.shots figure { min-width: 0; }
.shots .shot { border-width: 4px; border-radius: 16px; box-shadow: 4px 6px 0 var(--shadow); }
.shots figcaption { margin-top: 10px; font: 700 15px/1.45 var(--body); }
.shots figcaption b { display: block; font: 18px/1.2 var(--display); color: var(--soil-deep); }

.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 14px; }
.team figure { min-width: 0; }
.team-photo { position: relative; display: block; aspect-ratio: 5 / 4; border: 4px solid var(--soil-deep); border-radius: 20px; box-shadow: 4px 6px 0 var(--shadow); overflow: hidden; }
.team-photo > .ph, .team-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.team-photo.ph-art > img { inset: 6% 4%; width: 92%; height: 88%; object-fit: contain; }
.team figcaption { margin-top: 10px; font: 800 15px/1.4 var(--body); color: var(--soil); }
.team figcaption b { display: block; font: 20px/1.15 var(--display); color: var(--soil-deep); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .company { grid-template-columns: auto minmax(0, 1fr); }
  .co-tiles { grid-column: 1 / -1; }
  .cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; gap: 40px; }
  .press-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1399px) {
  .foot { padding-bottom: 78px; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .brand img { width: 176px; }
  .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .hero { padding-top: clamp(22px, 4.5vh, 36px); }
  .hero h1 { margin: 10px 0 12px; font-size: clamp(44px, min(6.8vw, 10.5vh), 96px); }
  .lede-hero { max-width: 40em; font-size: 17px; }
  .cta { margin-top: 18px; }
  .hero-copy { padding-bottom: 14px; }
  .hero-rusty { padding-top: 56px; }
  .base { --bw: min(150vw, 2100px); }
}
@media (max-width: 900px) {
  .hero, .dig-intro, .partners, .foot { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-bottom: 0; }
  .hero-rusty { max-width: 460px; justify-self: center; width: 100%; }
  .rusty-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "talk" "stage" "facts"; grid-template-rows: none; }
  .rusty-stage { width: 100%; max-width: 420px; justify-self: center; margin-top: 34px; }
  .rusty-talk .bubble-big.tail-left::after { left: 46px; top: auto; bottom: -14px; transform: rotate(45deg); }
  .rusty-facts { margin-top: 40px; }
  .callside { padding-top: 0; }
  .foot { padding-top: 140px; }
  .tiles, .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
}
@media (max-width: 720px) {
  .page { font-size: 16px; }
  .sec { padding-block: 22px 60px; }
  .brand img { width: 150px; }
  .nav { order: 3; width: 100%; margin-left: 0; gap: 6px; }
  .nav a { font-size: 15px; padding: 6px 9px 7px; }
  .topbar .btn { margin-left: auto; font-size: 16px; min-height: 42px; padding: 7px 12px 8px; }
  .hero { padding-top: 22px; }
  .hero h1, .show-copy h1, .page-head h1 { -webkit-text-stroke-width: 9px; text-shadow: 0 5px 0 var(--soil-deep); }
  .hero-rusty { padding-top: 76px; }
  .hero-rusty .bubble { font-size: 19px; left: 0; }
  .base { aspect-ratio: auto; height: 223px; margin-top: -30px; }
  .base img { width: auto; height: 600px; margin-top: -146px; }
  .hills { bottom: 24%; height: 50%; }
  .birds { top: 70px; left: 62%; width: 84px; }
  .cloud { display: none; }
  .stratum { gap: 8px; padding-top: 20px; }
  .st-tag { padding: 5px 11px 6px 9px; gap: 7px; }
  .st-name, .st-depth { font-size: 14px; }
  .pocket { padding: 12px 16px 10px; }
  .pocket .ore { width: 36px; height: 36px; }
  .pocket .ore.sm { width: 26px; height: 26px; }
  .chest { width: 78px; }
  .bt-chest { left: 4%; bottom: 40px; }
  .bt-1 { left: auto; right: 6%; bottom: auto; top: 46%; }
  .bd-1 { right: 4%; top: 240px; }
  .stratum { --tunnel-w: 128px; }
  .burrow { height: 42px; top: calc(50% + 10px); }
  .burrow img { height: 34px; left: 8px; bottom: 3px; }
  .burrow-worm img { height: 22px; left: 4px; bottom: 8px; }
  .burrow-bat img { height: 32px; left: 6px; bottom: 4px; }
  .lede { font-size: 19px; }
  .screens { gap: 12px; }
  .shot { border-width: 4px; border-radius: 16px; }
  .board { padding: 50px 14px 26px; border-width: 9px; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .note { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 20px 16px 18px; }
  .slot { width: 64px; height: 64px; }
  .slot svg { width: 44px; height: 44px; }
  .slot-duo img { width: 38px; }
  .slot-mine img { width: 54px; }
  .note-boss { column-gap: 32px; }
  .slot-boss img { width: 124px; left: -40px; top: -48px; }
  .note h3 { font-size: 21px; }
  .dive { margin-top: 40px; }
  .dive .bubble { font-size: 18px; }
  .dive-rusty { width: 150px; height: 150px; }
  .dive-rusty img { width: 150px; top: 14px; }
  .dive-tunnel { width: 70px; }
  .company { grid-template-columns: minmax(0, 1fr); padding: 0 18px 18px; gap: 10px; }
  .co-tiles { grid-column: auto; }
  .co-tile { flex: 1 1 140px; min-height: 0; }
  .co-motto { font-size: 20px; }
  .co-flag { width: 86px; height: 104px; margin-top: -4px; }
  .co-flag img { width: 58px; }
  .pcard > :not(.pc-top) { margin-inline: 18px; }
  .flip-photo { width: min(calc(100% - 52px), 250px); }
  .fs-title { font-size: 24px; padding-inline: 18px; }
  .fs-title .fs-sub { font-size: 18px; }
  .fs-rows { grid-template-columns: minmax(0, 1fr); padding-inline: 18px; }
  .fs-rows > div { grid-template-columns: 12em minmax(0, 1fr); column-gap: 12px; }
  .fs-rows dt { gap: 9px; }
  .fs-rows .pin, .pin { width: 30px; height: 30px; }
  .pins .ach dd { padding-left: 40px; }
  .fs-stack > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .fs-rows dt { font-size: 13px; letter-spacing: 0.04em; }
  .fs-rows dd { font-size: 18px; }
  .rules { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rule-side { padding: 28px 20px 66px; }
  .rule-front-body { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
  .rule-front-body svg { width: 52px; height: 52px; }
  .rule-side h3 { font-size: 23px; }
  .rule-btn { right: 14px; bottom: 14px; }
  .say { gap: 18px; }
  .say-mark { width: 60px; }
  .bubble { font-size: 18px; }
  .log { padding-left: 44px; }
  .log::before { left: 10px; width: 22px; }
  .ver { margin-left: -44px; }
  .entry .panel { padding: 18px 18px 20px; }
  .log-end { padding-left: 0; }
  .matriarch { width: 150px; margin-right: 0; }
  .camp { grid-template-columns: minmax(0, 1fr); padding-top: 30px; }
  .camp .btn-discord { justify-self: start; }
  .chans { gap: 12px 10px; }
  .stamp-wanted { margin: 0 0 0 auto; font-size: 34px; padding: 6px 16px 9px; border-width: 6px; transform: rotate(-4deg); }
  .bay { padding: 16px 12px 28px; gap: 6px 8px; }
  .bay-plus { font-size: 40px; -webkit-text-stroke-width: 5px; }
  .bay-q { font-size: 48px; -webkit-text-stroke-width: 6px; }
  .bay-label { font-size: 12.5px; padding: 4px 9px 5px; }
  .chans li { flex: 0 0 calc((100% - 30px) / 4); max-width: none; }
  .soc { gap: 6px; padding: 10px 2px 8px; border-radius: 14px; font-size: 13px; }
  .soc svg { width: 46px; height: 46px; }
  .beetle { width: 70px; right: 18px; top: -46px; }
  .foot { padding-top: 130px; }
  .foot-nav { gap: 16px 18px; }
  .fn-h { font-size: 18px; }
  .lamp-hint { left: calc(50% + 42px); max-width: 112px; font-size: 12px; }
  .page-head { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  .page-head-copy { padding-bottom: 0; }
  .head-rusty { max-width: 190px; margin-top: -6px; }
  .grass { height: 40px; }
  .tiles, .team, .shots { grid-template-columns: minmax(0, 1fr); }
  .usage { grid-template-columns: minmax(0, 1fr); }
  .usage svg { width: 44px; height: 44px; }
}
@media (max-width: 380px) {
  .st-depth { display: none; }
}

/* ---------- hero slideshow (home): pictures slide in sideways, as on deepestpoint.online ---------- */
/* the Garage from the game and two concept art pieces from the game's The World page; site.js
   moves the states: is-active = shown, is-parked = loaded behind the right edge, is-entering and
   is-leaving = sliding (.is-back turns the direction) */
.hero-show {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  /* the whole screen: the topsoil's jagged edge (64 px) starts right at the fold */
  min-height: max(560px, calc(100vh + 64px)); background: var(--show-bg); color: var(--cream-light);
  /* the large viewport: iOS Safari's floating toolbar lies over the page, so the small viewport
     (svh) would end the hero above the bottom edge and show the next layer */
  min-height: max(560px, calc(100lvh + 64px));
}
.show, .show-shade { position: absolute; inset: 0; z-index: -1; }
.show { overflow: hidden; background: var(--show-bg); }
.show-slide { position: absolute; inset: 0; display: none; background: var(--show-bg) center / cover no-repeat; }
.show-slide.is-active, .show-slide.is-parked, .show-slide.is-leaving { display: block; }
.show-slide.is-active { z-index: 1; }
.show-slide.is-parked { transform: translateX(100%); }
.show-slide.is-entering { animation: show-in 1.1s cubic-bezier(0.7, 0, 0.2, 1) both; }
.show-slide.is-leaving { animation: show-out 1.1s cubic-bezier(0.7, 0, 0.2, 1) both; }
.show.is-back .show-slide.is-entering { animation-name: show-in-back; }
.show.is-back .show-slide.is-leaving { animation-name: show-out-back; }
@keyframes show-in { from { transform: translateX(100%); } }
@keyframes show-out { to { transform: translateX(-100%); } }
@keyframes show-in-back { from { transform: translateX(-100%); } }
@keyframes show-out-back { to { transform: translateX(100%); } }
/* in the Garage picture the ship is parked by the workbench, clear of the headline */
.show-garage { background-image: url("img/show-garage.webp"); background-position: 85% 100%; }
.show-tow { background-image: url("img/show-tow.webp"); background-position: 50% 30%; }
.show-rescue { background-image: url("img/show-rescue.webp"); background-position: 70% 50%; }
/* dark on the left and at the bottom, so the words read on every picture */
.show-shade {
  background:
    linear-gradient(90deg, rgba(22, 14, 8, 0.74) 0, rgba(22, 14, 8, 0.3) 44%, rgba(22, 14, 8, 0) 62%),
    linear-gradient(0deg, rgba(20, 12, 7, 0.9) 0, rgba(20, 12, 7, 0.3) 30%, rgba(20, 12, 7, 0) 50%),
    linear-gradient(180deg, rgba(14, 10, 6, 0.5), rgba(14, 10, 6, 0) 20%);
}
.show-wrap { flex: 1; display: flex; flex-direction: column; padding-top: 12px; }
.show-body { margin-top: auto; padding-top: 40px; }
.show-copy { max-width: 700px; padding-bottom: 0; }
.show-copy::before { content: none; }
.hero-show .hero-tag { color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); }
.show-copy h1 { margin: 12px 0 14px; font-size: clamp(44px, min(7vw, 11vh), 100px); }
.hero-show .lede-hero { color: var(--show-text); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75); }
.hero-show .cta { margin-top: 22px; }
/* the caption and the dots stand above the topsoil's jagged edge */
.show-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 22px 0 86px; }
.show-note { font: 900 12px/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--show-note); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.show-dots { display: flex; }
.show-dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.show-dot::before { content: ""; width: 14px; height: 14px; box-sizing: border-box; border: 3px solid var(--soil-deep); border-radius: 999px; background: var(--cream-light); opacity: 0.85; transition: width 0.3s ease, background-color 0.3s ease, opacity 0.3s ease; }
.show-dot:hover::before { opacity: 1; }
.show-dot[aria-current="true"]::before { width: 32px; background: var(--gold); opacity: 1; }
.show-dot:focus-visible { outline: none; }
.show-dot:focus-visible::before { outline: 4px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .show-slide.is-entering, .show-slide.is-leaving { animation: none; }
  .show-dot::before { transition: none; }
}
/* a phone: as on desktop, the picture fills the whole hero and the words stand on it, bottom left */
@media (max-width: 720px) {
  .hero-show { min-height: max(600px, calc(100vh + 64px)); min-height: max(600px, calc(100lvh + 64px)); }
  /* the Garage a little closer, so the flag hangs above the words */
  .show-garage { background-size: auto 125%; background-position: 84% 100%; }
  .show-tow { background-position: 40% 30%; }
  .show-rescue { background-position: 72% 50%; }
  .show-body { margin-top: auto; padding-top: 24px; }
  .show-copy h1 { margin: 8px 0 10px; font-size: clamp(38px, 11vw, 54px); }
  .hero-show .lede-hero { font-size: 16px; line-height: 1.45; }
  .hero-show .cta { gap: 10px 12px; margin-top: 16px; }
  .hero-show .cta .btn-big { min-height: 50px; padding: 9px 20px 10px; font-size: 19px; }
  .show-foot { padding: 14px 0 80px; }
}

/* ---------- The Deepest Dispatch: Rusty zooms in with the paper on his drill ---------- */
.dispatch-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 30px; }
.dispatch-head > div:first-child { min-width: 0; }
.newsboy { position: relative; flex: none; width: 270px; aspect-ratio: 532 / 388; margin: 70px 84px 0 auto; }
.nb-rusty { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; transform: rotate(-4deg); filter: drop-shadow(5px 8px 0 rgba(46, 32, 22, 0.35)); }
/* the paper hangs on the drill: it sits behind Rusty, so the drill tip pokes through it */
.nb-paper {
  position: absolute; z-index: 0; right: -27%; top: 4%; width: 48%; aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; gap: 5%;
  padding: 6% 7% 7%; background: linear-gradient(90deg, var(--paper) 0 49%, var(--paper-fold) 50%, var(--paper) 51%);
  border: 3px solid var(--soil-deep); border-radius: 4px 6px 5px 3px; box-shadow: 4px 6px 0 rgba(46, 32, 22, 0.35);
  transform: rotate(9deg); transform-origin: 0 50%;
}
.nbp-mast { display: block; padding: 3px 0 4px; background: var(--soil-deep); border-radius: 2px; text-align: center; font: 400 clamp(11px, 1.05vw, 15px)/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.nbp-head { display: block; height: 7%; border-radius: 2px; background: var(--paper-ink); }
.nbp-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8%; }
.nbp-col { display: grid; align-content: start; gap: 18%; }
.nbp-col i { display: block; height: 4px; border-radius: 2px; background: var(--paper-line); }
.nbp-col i:nth-child(even) { width: 78%; }
.nbp-pic { display: grid; place-items: center; border: 2px solid var(--soil-deep); border-radius: 3px; background: var(--gold-light); overflow: hidden; }
.nbp-pic img { width: 92%; height: auto; }
.nb-say { position: absolute; z-index: 2; left: -8%; bottom: 96%; white-space: nowrap; font-size: 19px; padding: 9px 15px 10px; }
.nb-say::after { left: 60%; }
/* speed lines behind him */
.nb-lines { position: absolute; left: -30%; top: 30%; width: 32%; display: grid; gap: 11px; }
.nb-lines i { display: block; height: 5px; border-radius: 3px; background: linear-gradient(90deg, rgba(243, 234, 208, 0), var(--cream-light)); }
.nb-lines i:nth-child(2) { width: 70%; margin-left: 30%; }
.nb-lines i:nth-child(3) { width: 85%; margin-left: 10%; }
@media (prefers-reduced-motion: no-preference) {
  .nb-rusty { animation: nb-bob 1.6s ease-in-out infinite; }
  .nb-paper { animation: nb-flutter 1.6s ease-in-out infinite; }
  .nb-lines { animation: nb-zoom 0.8s ease-in-out infinite alternate; }
}
@keyframes nb-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes nb-flutter { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
@keyframes nb-zoom { from { translate: 6px 0; opacity: 0.7; } to { translate: -6px 0; opacity: 1; } }
@media (max-width: 720px) {
  .newsboy { width: 168px; margin: 56px auto 0 34%; }
  .nb-say { font-size: 16px; }
}

/* ---------- crew cards: the email right under the name and role ---------- */
.pc-mail { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 4px 6px 4px 10px; background: var(--cream-light); border: 3px solid var(--cream-dark); border-radius: 16px; box-shadow: inset 0 2px 0 var(--white); }
.pcard .pc-mail { margin-top: 12px; }
.pcm-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; color: var(--ink); text-decoration: none; }
.pcm-link .pin { flex: none; width: 34px; height: 34px; }
.pcm-link .email { font: 800 15px/1.25 var(--body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--underline); }
.pcm-link:hover .email, .pcm-link:hover > span { text-decoration-color: currentColor; }
.pc-mail .copy.copy-icon, .pc-mail .copy-icon .pin { width: 38px; height: 38px; }

/* ---------- Our Game: the same game on a computer, a laptop, a tablet and a phone ---------- */
.dig-intro { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.devices { position: relative; min-width: 0; aspect-ratio: 1.08; margin-top: 18px; }
.dev { position: absolute; margin: 0; }
.dev-screen {
  position: relative; overflow: hidden; background: var(--show-bg);
  border: var(--bz, 8px) solid var(--dev-body); border-radius: var(--dr, 14px);
  box-shadow: 0 0 0 3px var(--soil-deep), 6px 9px 0 3px var(--shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.dev-screen video, .dev-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dev-monitor { z-index: 1; left: 9%; top: 0; width: 74%; --bz: 11px; }
.dev-monitor .dev-screen { aspect-ratio: 16 / 9; }
.dev-stand { position: relative; display: block; width: 26%; height: 34px; margin: 0 auto; }
.dev-stand::before { content: ""; position: absolute; left: 38%; right: 38%; top: 3px; height: 24px; background: var(--dev-steel); border: 3px solid var(--soil-deep); border-top: 0; }
.dev-stand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11px; border-radius: 8px 8px 4px 4px; background: var(--dev-steel); border: 3px solid var(--soil-deep); box-shadow: 4px 5px 0 var(--shadow); }
.dev-laptop { z-index: 2; left: 0; top: 45%; width: 52%; --bz: 7px; --dr: 12px 12px 4px 4px; }
.dev-laptop .dev-screen { aspect-ratio: 16 / 10; }
.dev-deck { display: block; position: relative; height: 16px; margin: -2px -9% 0; border-radius: 3px 3px 12px 12px; background: linear-gradient(var(--dev-steel-hi), var(--dev-steel)); border: 3px solid var(--soil-deep); box-shadow: 5px 7px 0 var(--shadow); }
.dev-deck::after { content: ""; position: absolute; left: 41%; right: 41%; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: var(--soil-deep); opacity: 0.45; }
.dev-tablet { z-index: 2; right: 0; top: 40%; width: 45%; --bz: 9px; --dr: 18px; }
.dev-tablet .dev-screen { aspect-ratio: 1180 / 820; }
.dev-phone { z-index: 3; left: 39%; top: 49%; width: 15.5%; --bz: 6px; --dr: 18px; }
.dev-phone .dev-screen { aspect-ratio: 520 / 1125; }
.dev-phone .dev-screen::before { content: ""; position: absolute; z-index: 1; left: 36%; right: 36%; top: 5px; height: 7px; border-radius: 4px; background: var(--dev-body); }
.dev-cap {
  position: absolute; right: 0; top: calc(100% + 14px); max-width: 100%; padding: 6px 12px 7px; border-radius: 12px;
  background: rgba(30, 20, 12, 0.85); color: var(--on-dark); font: 800 13px/1.35 var(--body);
}
.dev-cap::before { content: ""; position: absolute; right: 26px; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: rgba(30, 20, 12, 0.85); }
@media (max-width: 900px) {
  .dig-intro { grid-template-columns: minmax(0, 1fr); }
  .devices { margin-top: 6px; margin-bottom: 40px; }
}
@media (max-width: 720px) {
  .dev-monitor { --bz: 7px; }
  .dev-laptop, .dev-tablet { --bz: 5px; }
  .dev-phone { --bz: 4px; --dr: 12px; }
  .dev-stand { height: 22px; }
  .dev-stand::before { height: 14px; }
  .dev-stand::after { height: 8px; }
  .dev-deck { height: 10px; }
  .dev-cap { font-size: 11.5px; padding: 5px 9px 6px; top: calc(100% + 10px); }
}

/* ---------- Dispatch: Rusty on the left, driving towards the heading ---------- */
.dispatch-head { justify-content: flex-start; align-items: center; }
.dispatch-head .newsboy { order: -1; margin: 64px 120px 0 78px; }
@media (max-width: 720px) {
  .dispatch-head .newsboy { margin: 50px 0 0 64px; }
}

/* ---------- Work with us: a bigger photo of Joni, and the email right beside the name ---------- */
.callcard .cc-who { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.callcard .cc-id { justify-items: center; }
.callcard .cc-photo { width: 148px; height: 148px; border-width: 5px; }
.cc-reach { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin-top: 12px; }
.cc-reach .cc-email-btn { width: auto; min-height: 46px; padding: 8px 16px 9px; font-size: 18px; }
.callcard .cc-addr { display: inline-block; margin-top: 6px; font: 800 14px/1.3 var(--body); color: var(--soil); }
@media (max-width: 720px) {
  .callcard .cc-photo { width: 124px; height: 124px; border-width: 4px; }
  .cc-reach .cc-email-btn { font-size: 16px; padding: 7px 12px 8px; }
}
/* the devices sit in the middle of the text card's height */
.dig-intro .devices { align-self: center; }

/* ---------- Edit HUD, live: a big tablet where the pieces really move ---------- */
.hud-try { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px 40px; align-items: center; margin-top: 64px; }
.hud-try-copy { padding: 22px 22px 24px; border-radius: 18px; background: rgba(30, 20, 12, 0.82); color: var(--on-dark); }
.hud-try-copy .eyebrow { color: var(--gold); }
.hud-try-h { margin: 10px 0 8px; font: clamp(28px, 2.6vw, 36px)/1.05 var(--display); letter-spacing: 0.01em; color: var(--cream-light); }
.hud-try-copy p { font: 700 16px/1.5 var(--body); }
.hud-try-note { margin-top: 10px; font-size: 14px !important; color: var(--on-dark-soft); }
.hud-tablet { position: relative; padding: 16px; border-radius: 30px; background: var(--dev-body); box-shadow: 0 0 0 4px var(--soil-deep), 8px 12px 0 4px var(--shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.08); }
.hud-tablet::before { content: ""; position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: #4a4542; }
.hud-stage {
  position: relative; aspect-ratio: 1180 / 820; overflow: hidden; border-radius: 14px; container-type: inline-size;
  background: var(--show-bg) url("img/hud-bg.webp") center / cover no-repeat; touch-action: pan-y;
}
/* edit mode: the scene dims under a fine grid, as in the game */
.hud-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 3.4% 4.9%, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 3.4% 4.9%, rgba(10, 6, 3, 0.38);
  transition: opacity 0.25s ease;
}
.hud-stage.is-locked::before { opacity: 0; }
.hud-piece {
  position: absolute; z-index: 1; display: block; padding: 0; border: 0; background: none; cursor: grab; touch-action: none;
  border-radius: 10px; outline: 2px dashed rgba(243, 234, 208, 0.85); outline-offset: 2px; -webkit-user-select: none; user-select: none;
}
.hud-piece.is-round { border-radius: 50%; }
.hud-piece img { display: block; width: 100%; height: auto; pointer-events: none; }
.hud-piece:focus-visible { outline: 3px solid var(--gold); }
.hud-piece.is-sel { z-index: 3; outline: 3px solid var(--orange); }
.hud-piece.is-sel::after {
  content: attr(data-name); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap;
  font: 900 clamp(9px, 1.1cqi, 12px)/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-light); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.hud-piece.is-drag { z-index: 4; cursor: grabbing; }
.hud-stage.is-locked .hud-piece { outline: none; cursor: default; }
.hud-stage.is-locked .hud-piece::after { content: none; }
.hud-stage.is-easing .hud-piece { transition: left 0.45s cubic-bezier(0.3, 1.3, 0.5, 1), top 0.45s cubic-bezier(0.3, 1.3, 0.5, 1); }
.hud-guide { position: absolute; z-index: 2; display: none; pointer-events: none; background: var(--gold); opacity: 0.9; }
.hud-guide-x { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; }
.hud-guide-y { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; }
.hud-guide.on { display: block; }
/* the edit plate: cream, at the bottom middle; it fades while a piece is dragged */
.hud-plate {
  position: absolute; z-index: 2; left: 50%; bottom: 3.5%; width: min(38%, 300px); transform: translateX(-50%); padding: 1.6cqi 1.8cqi 1.8cqi; text-align: center;
  background: var(--cream-light); border: 3px solid var(--cream-edge); border-radius: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); transition: opacity 0.2s ease;
}
.hud-stage.is-dragging .hud-plate { opacity: 0.35; }
.hud-plate-h { font: clamp(12px, 1.9cqi, 20px)/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soil-deep); }
.hud-plate-t { margin-top: 0.6cqi; font: 800 clamp(9px, 1.25cqi, 13px)/1.3 var(--body); color: var(--soil); }
.hud-plate-row { display: flex; justify-content: center; gap: 1cqi; margin-top: 1.2cqi; }
.hud-btn {
  min-height: 34px; padding: 0.5cqi 1.8cqi 0.7cqi; border-radius: 10px; border: 3px solid var(--cream-edge); background: var(--cream); color: var(--ink);
  font: clamp(11px, 1.45cqi, 15px)/1.1 var(--display); box-shadow: 0 3px 0 var(--cream-edge); cursor: pointer;
}
.hud-btn-lock { background: var(--green); border-color: var(--green-edge); color: var(--white); box-shadow: 0 3px 0 var(--green-edge); text-shadow: 0 1px 0 var(--green-edge); }
.hud-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cream-edge); }
.hud-stage.is-locked .hud-plate { width: auto; padding: 0.8cqi; }
.hud-stage.is-locked .hud-plate-h, .hud-stage.is-locked .hud-plate-t, .hud-stage.is-locked [data-hud="reset"] { display: none; }
.hud-stage.is-locked .hud-plate-row { margin-top: 0; }
/* the demo finger */
.hud-finger { position: absolute; z-index: 5; width: 5.4%; aspect-ratio: 1; margin: -2.7% 0 0 -2.7%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 30%, rgba(255, 255, 255, 0.25) 31% 60%, rgba(255, 255, 255, 0) 61%); transition: opacity 0.25s ease; }
.hud-finger.on { opacity: 1; }
.hud-stage.is-demo .hud-finger, .hud-stage.is-demo .hp-stick-l { transition: left 1s cubic-bezier(0.45, 0, 0.3, 1), top 1s cubic-bezier(0.45, 0, 0.3, 1), opacity 0.25s ease; }
@media (max-width: 900px) {
  .hud-try { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .hud-tablet { padding: 9px; border-radius: 20px; }
  .hud-stage { border-radius: 10px; }
  .hud-plate { width: 52%; border-width: 2px; border-radius: 10px; }
  .hud-btn { min-height: 30px; border-width: 2px; }
}
.hp-fuel { left: 0.51%; top: 1.46%; width: 10.34%; }
.hp-hull { left: 10.51%; top: 1.46%; width: 18.9%; }
.hp-weight { left: 28.64%; top: 1.46%; width: 18.56%; }
.hp-gold { left: 10.51%; top: 6.71%; width: 7.03%; }
.hp-cargo { left: 16.69%; top: 6.71%; width: 11.02%; }
.hp-record { left: 86.23%; top: 0.0%; width: 13.6%; }
.hp-menu { left: 95.08%; top: 20.61%; width: 4.66%; }
.hp-horn { left: 0.51%; top: 16.46%; width: 4.41%; }
.hp-stick-l { left: 0.51%; top: 77.07%; width: 14.24%; }
.hp-stick-r { left: 84.58%; top: 77.07%; width: 14.92%; }
.hp-supplies { left: 80.51%; top: 77.38%; width: 5.93%; }

/* ---------- Work with us: the button alone, the address and its copy pin under it ---------- */
.callcard .cc-photo { width: 176px; height: 176px; }
.cc-addr-row { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; }
.callcard .cc-addr-row .cc-addr { margin-top: 0; }
.cc-addr-row .copy.copy-icon, .cc-addr-row .copy-icon .pin { width: 32px; height: 32px; }
@media (max-width: 720px) {
  .callcard .cc-photo { width: 140px; height: 140px; }
}

/* the contact rows share one shape: the pin on the left, a small label over the address, the copy pin on the right */
.pc-mail { justify-content: space-between; padding: 6px 6px 6px 10px; }
.pc-mail .pcm-link { flex: 1; justify-content: flex-start; gap: 9px; }
.pcm-text { display: grid; gap: 1px; min-width: 0; text-align: left; }
.pcm-h { font: 900 10.5px/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soil); }
.pc-mail .pcm-link .email, .pc-mail .pcm-v { font: 800 13.5px/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-mail .pcm-v { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--underline); }
.pcm-link:hover .pcm-v { text-decoration-color: currentColor; }

/* a gold button where a cream one would vanish (the Dispatch link on dark rock) */
.btn-gold { background: var(--gold); border-color: var(--gold-edge); color: var(--soil-deep); box-shadow: 0 5px 0 var(--gold-edge), inset 0 3px 0 rgba(255, 255, 255, 0.55); }
.btn-gold:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-edge), inset 0 3px 0 rgba(255, 255, 255, 0.55); }
/* the live tablet takes the whole width, so the HUD is close to its real size */
.hud-try { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.hud-try-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 28px; align-items: center; max-width: 900px; margin-inline: auto; }
.hud-try-copy .eyebrow { grid-column: 1; }
.hud-try-h { grid-column: 1; margin: 0; }
.hud-try-copy p:not(.eyebrow) { grid-column: 2; grid-row: 1 / span 2; }
.hud-try-copy p.hud-try-note { grid-row: 3; grid-column: 2; margin-top: 0; }
.hud-tablet { width: 100%; max-width: 1100px; margin-inline: auto; }
@media (max-width: 720px) {
  .hud-try-copy { grid-template-columns: minmax(0, 1fr); }
  .hud-try-copy p:not(.eyebrow), .hud-try-copy p.hud-try-note { grid-column: 1; grid-row: auto; }
}

/* ---------- Our Game: the phone held sideways ---------- */
.dev-phone-land { z-index: 3; right: 4%; top: 76%; width: 31%; --bz: 6px; --dr: 16px; }
.dev-phone-land .dev-screen { aspect-ratio: 1100 / 508; }
.dev-phone-land .dev-screen::before { content: ""; position: absolute; z-index: 1; left: 5px; top: 36%; bottom: 36%; width: 7px; border-radius: 4px; background: var(--dev-body); }
@media (max-width: 720px) {
  .dev-phone-land { --bz: 4px; --dr: 10px; }
}

/* ---------- Features: the notice board with its own heading, the live HUD and the ship looks ---------- */
.features-head { margin-top: 70px; }
.features-head + .board { margin-top: 70px; }
.notes .note a { color: var(--orange-edge); font-weight: 900; white-space: nowrap; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.notes .note a:hover { color: var(--soil-deep); }
.slot-hud img { width: 58px; height: auto; }
.slot-look { overflow: visible; }
.slot-look img { position: absolute; width: 104px; max-width: none; height: auto; left: -14px; top: -12px; filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.3)); }
.board .hud-try { margin-top: 46px; }
.board .hud-try-copy, .looks-copy { background: var(--soil-deep); }
.looks { margin-top: 46px; }
.looks-copy { display: grid; gap: 6px; max-width: 900px; margin: 0 auto 8px; padding: 20px 22px 22px; border-radius: 18px; color: var(--on-dark); text-align: center; justify-items: center; }
.looks-copy .eyebrow { color: var(--gold); }
.looks-copy .hud-try-h { margin: 4px 0 2px; }
.looks-copy p:not(.eyebrow) { font: 700 16px/1.5 var(--body); }
/* the looks stand on the Garage floor */
.looks-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 4px; margin-top: 18px; padding: 16px 12px 22px;
  border-radius: 20px; background: linear-gradient(transparent 72%, rgba(46, 32, 22, 0.16) 72%), var(--cream-light); border: 4px solid var(--soil-deep); box-shadow: 5px 8px 0 var(--shadow);
}
.look { display: grid; justify-items: center; gap: 2px; width: 128px; }
.look img { width: 100%; max-width: 140px; height: auto; filter: drop-shadow(3px 5px 0 rgba(46, 32, 22, 0.25)); }
.look span { font: 15px/1.1 var(--display); letter-spacing: 0.01em; color: var(--soil-deep); }
@media (prefers-reduced-motion: no-preference) {
  .look img { transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .look:hover img { transform: translateY(-6px) rotate(-3deg); }
}
@media (max-width: 720px) {
  .looks-row { padding: 12px 6px 16px; }
  .look { width: calc((100% - 8px) / 3); }
  .look span { font-size: 13px; }
  .slot-look img { width: 84px; left: -12px; top: -10px; }
  .slot-hud img { width: 48px; }
}

/* the crew contact rows: the same inset on both sides, and room for the whole address on one line */
.pc-mail { gap: 4px; padding: 6px 8px; }
.pc-mail .pcm-link { gap: 7px; }
.pcm-link .pin { width: 30px; height: 30px; }
.pc-mail .copy.copy-icon, .pc-mail .copy-icon .pin { width: 32px; height: 32px; }

/* ---------- Our Game: the Features heading stands on the right, under the devices ---------- */
.dig-side { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; align-self: stretch; }
.dig-side .devices { align-self: auto; }
.dig-side .features-head { margin-top: 0; text-align: right; }
.features-head + .board, .dig-intro + .board { margin-top: 70px; }
@media (max-width: 900px) {
  .dig-side .features-head { text-align: left; margin-top: 10px; }
}

/* ---------- folds: Edit HUD and the Garage open big or fold away ---------- */
.fold-head .eyebrow::after, .hud-try-copy .eyebrow::after { content: none; }
.fold-head { grid-template-columns: auto minmax(0, 1fr) auto !important; max-width: 1000px !important; }
.fold-btn {
  grid-column: 3; grid-row: 1 / span 3; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 9px 18px 10px;
  border: 3px solid var(--gold-edge); border-radius: 14px; background: var(--gold); color: var(--soil-deep); font: 18px/1.1 var(--display);
  box-shadow: 0 4px 0 var(--gold-edge); cursor: pointer; white-space: nowrap;
}
.fold-btn::after { content: ""; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease; }
.fold.is-open .fold-btn { background: var(--cream-light); border-color: var(--cream-edge); box-shadow: 0 4px 0 var(--cream-edge); }
.fold.is-open .fold-btn::after { transform: translateY(2px) rotate(-135deg); }
.fold-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-edge); }
.fold-body { margin-top: 18px; }
.fold-body[hidden] { display: none; }
.garage-try { margin-top: 46px; }
@media (max-width: 720px) {
  .fold-head { grid-template-columns: minmax(0, 1fr) !important; }
  .fold-btn { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---------- the Garage: the game's own ship, dressed up live ---------- */
.gx { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 22px; align-items: stretch; }
.gx-stage {
  position: relative; display: grid; place-items: center; min-height: 380px; overflow: hidden; border: 4px solid var(--soil-deep); border-radius: 22px;
  background:
    radial-gradient(ellipse 46% 40% at 50% 18%, rgba(255, 236, 190, 0.5), rgba(255, 236, 190, 0) 70%),
    linear-gradient(rgba(0, 0, 0, 0) 72%, var(--gx-floor-line) 72% 73%, var(--gx-floor) 73%),
    repeating-linear-gradient(180deg, var(--gx-wood) 0 46px, var(--gx-wood-dark) 46px 49px);
  box-shadow: 5px 8px 0 var(--shadow), inset 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.gx-ship { width: min(100%, 470px); height: auto; aspect-ratio: 1; margin-top: -4%; filter: drop-shadow(4px 8px 0 rgba(46, 32, 22, 0.25)); }
.gx-ship.pop { animation: gx-pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes gx-pop { from { transform: scale(0.94) translateY(6px); } }
.gx-name { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: 92%; padding: 6px 14px 7px; border-radius: 12px; background: var(--soil-deep); color: var(--gold); font: 16px/1.15 var(--display); letter-spacing: 0.01em; text-align: center; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.gx-panel { display: grid; align-content: start; gap: 14px; padding: 18px 18px 20px; border: 4px solid var(--soil-deep); border-radius: 22px; background: var(--cream-light); box-shadow: 5px 8px 0 var(--shadow); }
.gx-h { font: 900 11px/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--soil); }
.gx-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.gx-opt { min-height: 34px; padding: 5px 10px 6px; border: 3px solid var(--cream-edge); border-radius: 10px; background: var(--cream); color: var(--ink); font: 14px/1.1 var(--display); box-shadow: 0 3px 0 var(--cream-edge); cursor: pointer; }
.gx-opt:hover { background: var(--gold-light); }
.gx-opt[aria-pressed="true"] { background: var(--gold); border-color: var(--gold-edge); box-shadow: 0 3px 0 var(--gold-edge); }
.gx-sw { width: 36px; height: 36px; padding: 0; border: 3px solid var(--soil-deep); border-radius: 50%; cursor: pointer; box-shadow: 0 3px 0 rgba(46, 32, 22, 0.35); }
.gx-sw.sm { width: 28px; height: 28px; border-width: 2px; }
.gx-sw[aria-pressed="true"] { outline: 3px solid var(--orange); outline-offset: 2px; }
.gx-mix { display: grid; gap: 6px; margin-top: 7px; }
.gx-mix-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 8px; }
.gx-mix-row > span { font: 800 13px/1.2 var(--body); color: var(--soil-dark); }
.gx-mix-row .gx-opts { margin-top: 0; gap: 5px; }
.gx-actions { display: flex; justify-content: flex-start; }
.gx-quick { margin-top: 22px; text-align: center; font: 900 12px/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--soil-deep); }
.garage-try .looks-row { margin-top: 10px; }
.look { display: grid; justify-items: center; gap: 2px; width: 128px; padding: 4px 0 6px; border: 0; border-radius: 14px; background: none; cursor: pointer; }
.look:hover, .look:focus-visible { background: rgba(255, 210, 74, 0.35); }
@media (max-width: 900px) {
  .gx { grid-template-columns: minmax(0, 1fr); }
  .gx-stage { min-height: 300px; }
}
@media (max-width: 720px) {
  .look { width: calc((100% - 8px) / 3); }
  .gx-panel { padding: 14px; }
}

/* ---------- 4b. meet rusty is alive: his eyes follow you, a poke makes him giggle and the fact
   sheet rows try each fact on him. The rig is the hard-hat Rusty of art/brand in parts
   (rusty_rig.py); site.js only sets data-eyes, data-mouth and state classes, every look lives
   here. Without the script he is the same picture as the logo. ---------- */
.rusty-top { position: relative; }
.rusty-poke {
  position: relative; z-index: 1; display: block; width: 100%; max-width: 460px; margin-inline: auto; padding: 0;
  border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.rr { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(6px 9px 0 rgba(0, 0, 0, 0.35)); }
.rr .rr-p { transform-box: fill-box; transform-origin: center; pointer-events: none; }
.rr .rr-fx, .rr .rr-hearts, .rr .rr-sweat, .rr .rr-zzz { pointer-events: none; }

/* faces: one mouth and one pair of eyes at a time */
.rr .rr-m, .rr .rr-heart, .rr .rr-arc, .rr .rr-blush, .rr .rr-pale, .rr .rr-hearts, .rr .rr-sweat, .rr .rr-zzz { display: none; }
.rr:not([data-mouth]) .rr-m-happy, .rr[data-mouth="happy"] .rr-m-happy, .rr[data-mouth="open"] .rr-m-open,
.rr[data-mouth="laugh"] .rr-m-laugh, .rr[data-mouth="oh"] .rr-m-oh, .rr[data-mouth="chomp"] .rr-m-chomp,
.rr[data-mouth="nervous"] .rr-m-nervous { display: inline; }
.rr[data-eyes="love"] .rr-pupil { display: none; }
.rr[data-eyes="love"] .rr-heart, .rr[data-eyes="love"] .rr-hearts { display: inline; }
.rr[data-eyes="joy"] .rr-arc, .rr[data-eyes="wink"] .rr-eye-1 .rr-arc { display: inline; }
.rr[data-eyes="love"] .rr-blush, .rr[data-eyes="joy"] .rr-blush { display: inline; }
.rr[data-eyes="love"] .rr-cheek, .rr[data-eyes="joy"] .rr-cheek, .rr[data-eyes="nervous"] .rr-cheek { display: none; }
.rr[data-eyes="nervous"] .rr-sweat, .rr[data-eyes="nervous"] .rr-pale { display: inline; }
.rr[data-eyes="nervous"] .rr-pupil { transform: scale(0.58); }
.rr[data-eyes="sleepy"] .rr-zzz { display: inline; }

/* eyelids wait above the eye: a blink drops them all the way, sleepy halfway */
.rr .rr-eye-0 { --shut: 42px; --half: 23px; }
.rr .rr-eye-1 { --shut: 48px; --half: 26px; }
.rr .rr-lid { transition: transform 0.07s ease-in; }
.rr.rr-blink .rr-lid { transform: translateY(var(--shut)); }
.rr[data-eyes="sleepy"] .rr-lid { transform: translateY(var(--half)); transition-duration: 0.7s; }

/* the hard hat lifts off for a greeting; its shadow goes with it */
.rr.rr-tip .rr-hat { transform: translate(-3px, -15px) rotate(-17deg); }
.rr .rr-hat-shadow { transition: opacity 0.2s; }
.rr.rr-tip .rr-hat-shadow { opacity: 0; }
.rr .rr-band-in { pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .rr .rr-body { animation: rr-breathe 3.4s ease-in-out infinite; }
  .rr[data-eyes="sleepy"] .rr-body { animation-duration: 5s; }
  .rr.rr-giggle .rr-body { animation: rr-giggle 0.52s ease-in-out; }
  .rr.rr-hop .rr-body { animation: rr-hop 0.76s ease-out; }
  .rr.rr-startle .rr-body { animation: rr-startle 0.6s ease-out; }
  .rr.rr-shiver .rr-body { animation: rr-shiver 0.11s linear infinite; }
  .rr .rr-hat { transition: transform 0.38s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .rr .rr-pupil { transition: transform 0.18s ease-out; }
  .rr.rr-drilling .rr-grooves, .rr.rr-buzz .rr-grooves { animation: rr-grooves 0.22s linear infinite; }
  .rr.rr-drilling .rr-drill, .rr.rr-buzz .rr-drill { animation: rr-jitter 0.09s linear infinite; }
  .rr.rr-drilling .rr-spin, .rr.rr-buzz .rr-spin { animation: rr-whirl 0.16s linear infinite; }
  .rr.rr-rolling .rr-wheel { animation: rr-wheel 0.5s linear infinite; }
  .rr.rr-rolling .rr-track { animation: rr-track 0.3s linear infinite; }
  .rr[data-eyes="love"] .rr-heart { animation: rr-beat 0.55s ease-in-out infinite; }
  .rr .rr-float { animation: rr-float 1.7s ease-out infinite both; }
  .rr .rr-float-1 { animation-delay: 0.45s; }
  .rr .rr-float-2 { animation-delay: 0.9s; }
  .rr .rr-drop { animation: rr-drip 0.9s ease-in infinite both; }
  .rr .rr-drop-1 { animation-delay: 0.3s; }
  .rr .rr-drop-2 { animation-delay: 0.6s; }
  .rr .rr-glow { animation: rr-glow 2.2s ease-in-out infinite; }
  .rr .rr-star { animation: rr-twinkle 2.8s ease-in-out infinite; }
  .rr .rr-star-1 { animation-delay: -1.3s; }
  .rr .rr-puff-0 { animation: rr-sway 2.6s ease-in-out infinite; }
  .rr .rr-puff-1 { animation: rr-sway 3.1s ease-in-out -0.8s infinite; }
  .rr .rr-puff-2 { animation: rr-sway 3.6s ease-in-out -1.6s infinite; }
  .rr .rr-band-in { animation: rr-slap 0.34s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
  .rusty-say.rr-pop { animation: rr-pop 0.34s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .rr-psst:not([hidden]) { animation: rr-psst-in 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both, rr-psst-wob 2.4s ease-in-out 0.6s infinite; }
  .rr-gauge { transition: opacity 0.2s, transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .rr-needle { transition: transform 1.3s cubic-bezier(0.5, 0, 0.6, 1); }
}
@keyframes rr-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5px) scale(1.006, 0.994); } }
@keyframes rr-giggle {
  0%, 100% { transform: none; } 14% { transform: rotate(-4deg); } 30% { transform: rotate(3.5deg); }
  46% { transform: rotate(-3deg); } 62% { transform: rotate(2.2deg); } 80% { transform: rotate(-1deg); }
}
@keyframes rr-hop {
  0% { transform: none; } 16% { transform: scale(1.07, 0.88); } 46% { transform: translateY(-30px) rotate(-5deg) scale(0.96, 1.05); }
  72% { transform: scale(1.06, 0.92); } 86% { transform: translateY(-4px); } 100% { transform: none; }
}
@keyframes rr-startle { 0% { transform: none; } 30% { transform: translateY(-14px) scale(0.97, 1.05); } 62% { transform: scale(1.04, 0.95); } 100% { transform: none; } }
@keyframes rr-shiver { 0%, 100% { transform: none; } 25% { transform: translateX(-1.3px); } 75% { transform: translateX(1.3px); } }
@keyframes rr-grooves { to { transform: translateX(13px); } }
@keyframes rr-jitter { 0%, 100% { transform: none; } 33% { transform: translate(0.9px, -0.6px); } 66% { transform: translate(-0.6px, 0.9px); } }
@keyframes rr-whirl { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes rr-wheel { to { transform: rotate(360deg); } }
@keyframes rr-track { to { stroke-dashoffset: -28; } }
@keyframes rr-beat { 0%, 100% { transform: none; } 50% { transform: scale(1.16); } }
@keyframes rr-float { 0% { transform: translateY(4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-18px); opacity: 0; } }
@keyframes rr-drip { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
@keyframes rr-glow { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.6; } }
@keyframes rr-twinkle { 0%, 100% { transform: none; } 50% { transform: scale(0.72) rotate(22deg); } }
@keyframes rr-sway { 0%, 100% { transform: none; } 50% { transform: translate(-2px, -3px); } }
@keyframes rr-slap { 0% { transform: scale(2); opacity: 0; } 55% { transform: scale(0.9); opacity: 1; } 100% { transform: none; } }
@keyframes rr-pop { 0% { transform: scale(0.95); } 100% { transform: none; } }
@keyframes rr-psst-in { 0% { opacity: 0; transform: translateY(10px) scale(0.6) rotate(4deg); } 100% { opacity: 1; transform: rotate(4deg); } }
@keyframes rr-psst-wob { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(1deg) translateY(-3px); } }

/* Rusty's line: the bubble keeps the height of his greeting, so the page never jumps */
.rusty-say { display: flex; align-items: center; width: 100%; }
.rusty-say.rr-shout p { font-size: 1.7em; letter-spacing: 0.02em; }

/* "Psst. Poke me." until the first poke */
.rr-psst { position: absolute; z-index: 2; right: 0; top: -2%; padding: 8px 14px 9px; font-size: 19px; transform: rotate(4deg); pointer-events: none; }
.rr-psst::after { left: 26px; }

/* fuel gauge for the biggest fear */
.rr-gauge {
  position: absolute; z-index: 2; right: 2%; top: -3%; width: 124px; opacity: 0; transform: scale(0.5) rotate(-10deg);
  pointer-events: none; filter: drop-shadow(4px 6px 0 var(--shadow));
}
.rr-gauge.is-on { opacity: 1; transform: rotate(-4deg); }
.rr-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.rr-gauge text { font: 17px var(--display); fill: var(--soil-deep); text-anchor: middle; }
.rr-gauge .rr-gauge-label { font: 900 9px var(--body); letter-spacing: 0.16em; fill: var(--gold); }
.rr-needle { transform: rotate(62deg); }
.rr-gauge.is-empty .rr-needle { transform: rotate(-62deg); }

/* ore, fuel and friends flying in from the fact sheet */
.rr-fly { position: absolute; left: 0; top: 0; z-index: 5; width: 46px; height: 46px; pointer-events: none; filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.35)); }
.rr-fly.rr-can { width: 58px; height: 58px; }

/* fact sheet rows are buttons: press one and Rusty shows it */
.fs-play > div { position: relative; }
.fs-try {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; -webkit-tap-highlight-color: transparent;
}
.fs-try::after { content: ""; position: absolute; inset: 3px -12px; border-radius: 12px; transition: background-color 0.15s; }
.fs-try:hover::after { background: rgba(255, 210, 74, 0.09); }
.fs-try:active::after { background: rgba(255, 210, 74, 0.16); }
.fs-try:focus-visible { outline: 0; }
.fs-try:focus-visible::after { outline: 3px solid var(--gold); outline-offset: 0; }
.fs-try .pin { transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }
.fs-try:hover .pin, .fs-try:focus-visible .pin { transform: rotate(-12deg) scale(1.1); }
.fs-try:active .pin { transform: scale(0.88); }
.fs-plus { position: absolute; right: 0; top: -2px; font: 22px var(--display); color: var(--gold); -webkit-text-stroke: 5px var(--soil-deep); paint-order: stroke fill; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .fs-plus { animation: fs-plus 0.9s ease-out forwards; }
}
@keyframes fs-plus { 0% { opacity: 0; transform: translateY(8px) scale(0.6); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-22px); } }
@media (max-width: 560px) {
  .rr-psst { font-size: 16px; top: -6%; }
  .rr-gauge { width: 100px; top: -6%; }
  .fs-try { gap: 9px; }
}

/* ---------- 4c. Dig with Rusty: he dives into the ground and brings up a find for his shelf ---------- */
.rusty-top { grid-template-areas: "stage head" "stage talk" "stage facts" "finds finds"; grid-template-rows: auto auto 1fr auto; }
.rusty-stage { padding-bottom: 0; }
.rr-scene { position: relative; width: 100%; max-width: 460px; margin-inline: auto; margin-bottom: 19%; --ground-line: 89.5%; }
.rr.rr-under { clip-path: polygon(-60% -160%, 160% -160%, 160% var(--ground-line), -60% var(--ground-line)); }
.rd-ground { position: absolute; z-index: 2; left: -7%; right: -7%; top: 82.4%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rd-ground .dg { display: block; width: 100%; height: auto; overflow: visible; }
.dg .dg-p { transform-box: fill-box; transform-origin: center; }
.dg .dg-hole { display: none; }
.rd-ground.is-open .dg-hole { display: inline; }
.rd-btn { position: absolute; z-index: 1; top: 47%; left: 0; right: 0; width: max-content; margin-inline: auto; min-height: 46px; padding: 8px 26px 9px; font-size: 22px; }
.rd-btn[aria-disabled="true"] { cursor: default; filter: saturate(0.4) brightness(0.9); }
.rd-depth {
  position: absolute; z-index: 1; left: 7%; top: 44%; display: grid; justify-items: start; gap: 1px; padding: 5px 12px 6px;
  background: var(--soil-deep); border: 3px solid var(--pill-edge); border-radius: 12px; box-shadow: 3px 4px 0 var(--shadow-soft);
  font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; transform: translateY(6px);
}
.rd-depth b { font: 19px/1 var(--display); font-weight: 400; color: var(--gold); white-space: nowrap; }
.rd-layer { font: 900 10px/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-soft); }
.is-digging .rd-depth { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .rd-depth { transition: opacity 0.2s, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .rd-ground.is-rumble .dg { animation: dg-rumble 0.12s linear infinite; }
  .rd-ground.is-open .dg-hole { animation: dg-hole 0.3s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  .dg .dg-glint { animation: rr-twinkle 2.6s ease-in-out infinite; }
  .dg .dg-glint-1 { animation-delay: -0.9s; }
  .dg .dg-glint-2 { animation-delay: -1.7s; }
  .rd-btn:not([aria-disabled="true"]) { animation: rd-nudge 3.2s ease-in-out 2s infinite; }
}
@keyframes dg-rumble { 0%, 100% { transform: none; } 25% { transform: translate(-1.5px, 1px); } 75% { transform: translate(1.5px, -1px); } }
@keyframes dg-hole { from { transform: scale(0.2, 0); } to { transform: none; } }
@keyframes rd-nudge { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: -4deg; } 94% { rotate: 4deg; } 97% { rotate: -2deg; } }

/* the find rises out of the hole with its name, then flies to the shelf */
.rd-find { position: absolute; left: 0; top: 0; z-index: 6; width: 150px; display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.rd-find::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46px; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%;
  background: radial-gradient(circle, var(--rar) 0, rgba(255, 255, 255, 0) 64%); opacity: 0.55;
}
.rd-find img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.4)); }
.rd-tag {
  display: grid; justify-items: center; padding: 4px 12px 6px; background: var(--soil-deep); border: 3px solid var(--pill-edge);
  border-radius: 12px; box-shadow: 3px 4px 0 var(--shadow-soft); white-space: nowrap;
}
.rd-tag b { font: 18px/1.15 var(--display); font-weight: 400; color: var(--cream-light); }
.rd-tag span { font: 900 10.5px/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rar); }
.rar-common { --rar: var(--cream-dark); }
.rar-uncommon { --rar: var(--green); }
.rar-rare { --rar: var(--gem); }
.rar-legendary { --rar: var(--legend); }

/* Rusty's finds: the game's equipment slots, the edge in the find's rarity colour */
.finds { grid-area: finds; margin-top: 44px; }
.finds-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.finds-title h3 { font: inherit; }
.finds-count { font-size: 20px; color: var(--gold); }
.finds-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; padding: 22px 22px 8px; }
.find-slot {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin: 0; padding: 7%;
  border: 4px solid var(--soil-deep); border-radius: 16px; background: var(--cream-dark);
  box-shadow: 0 4px 0 var(--pill-edge), inset 0 4px 0 rgba(0, 0, 0, 0.18); cursor: default;
}
.find-slot:disabled { opacity: 1; }
.find-q { font: clamp(20px, 2.4vw, 28px)/1 var(--display); color: var(--cream-edge); }
.find-slot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(1px 3px 0 rgba(0, 0, 0, 0.3)); }
.find-slot.is-found { cursor: pointer; background: var(--cream); border-color: var(--rar); box-shadow: 0 4px 0 var(--pill-edge), inset 0 3px 0 var(--white), 0 0 0 2px var(--soil-deep); }
.find-slot.is-found:hover, .find-slot.is-found:focus-visible { background: var(--cream-light); }
.find-slot.is-new::after {
  content: "New!"; position: absolute; top: -12px; right: -10px; padding: 1px 7px 2px; background: var(--gold); color: var(--soil-deep);
  border: 2px solid var(--soil-deep); border-radius: 8px; font: 13px/1.2 var(--display); transform: rotate(8deg);
}
.finds-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 22px 18px; font: 700 15px/1.45 var(--body); color: var(--on-dark-soft); }
.finds-foot b { font-weight: 900; color: var(--cream-light); }
.finds-reset { margin: 0; padding: 0; border: 0; background: none; font: 800 15px/1.4 var(--body); color: var(--gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.finds.is-complete .finds-count { color: var(--gold-light); }
@media (prefers-reduced-motion: no-preference) {
  .find-slot { transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.15s; }
  .find-slot.is-found:hover { transform: translateY(-3px) rotate(-3deg); }
  .find-slot.is-landed { animation: slot-land 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
}
@keyframes slot-land { 0% { transform: scale(1.25); } 100% { transform: none; } }
@media (max-width: 900px) {
  .rusty-top { grid-template-areas: "head" "talk" "stage" "finds" "facts"; grid-template-rows: none; }
  .finds { margin-top: 34px; }
  .finds-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rd-ground { left: -3%; right: -3%; }
  .rd-btn { font-size: 19px; min-height: 42px; padding: 6px 20px 7px; }
  .rd-depth { left: 3%; padding: 4px 9px 5px; }
  .rd-depth b { font-size: 16px; }
  .finds-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px 16px 6px; }
  .finds-foot { padding-inline: 16px; font-size: 14px; }
}

/* the colour rows fit on one line */
.gx-mix .gx-sw.sm { width: 24px; height: 24px; }
.gx-mix-row .gx-opts { flex-wrap: nowrap; gap: 4px; }
@media (max-width: 720px) {
  .gx-mix .gx-sw.sm { width: 20px; height: 20px; }
  .gx-mix-row { grid-template-columns: 48px minmax(0, 1fr); }
  .gx-mix-row .gx-opts { gap: 3px; }
}

/* the ship stands on the Garage floor; on a phone the name sits under it */
.gx-ship { margin-top: 7%; }
@media (max-width: 720px) {
  .gx-stage { padding-bottom: 52px; }
}

/* crew cards: the contact is one plain line under the role, no box: pin, address, copy */
.pcard .pc-mail { justify-content: center; gap: 6px; margin-top: 10px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.pc-mail .pcm-link { flex: 0 1 auto; gap: 7px; min-height: 40px; }
.pc-mail .pcm-link .pin { width: 28px; height: 28px; }
.pc-mail .pcm-link .email, .pc-mail .pcm-v { font: 800 14px/1.25 var(--body); white-space: nowrap; text-overflow: clip; overflow: visible; }
.pc-mail .copy.copy-icon, .pc-mail .copy-icon .pin { width: 28px; height: 28px; }

/* ---------- the devices, closer to the real thing ---------- */
.devices { --bezel: #141517; --bezel-hi: #2b2e33; --alu-1: #e3e7eb; --alu-2: #b9c0c7; --alu-3: #8e959d; }
.dev-screen {
  overflow: hidden; background: #000; border-color: var(--bezel);
  box-shadow: 0 0 0 1.5px var(--bezel-hi), 0 0 0 3px #0b0c0d, 0 26px 36px -16px rgba(0, 0, 0, 0.65), 0 8px 14px rgba(0, 0, 0, 0.35);
}
/* the glass: a soft reflection across the screen and a faint edge */
.dev-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 4px;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.05) 28%, rgba(255, 255, 255, 0) 45%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 0 22px rgba(0, 0, 0, 0.35);
}
.dev-screen video, .dev-screen img { border-radius: 3px; }
/* the monitor: thin bezel, a chin with a status light, and an aluminium stand */
.dev-monitor { --bz: 9px; --dr: 12px; }
.dev-monitor .dev-screen { border-bottom-width: 20px; }
.dev-monitor .dev-screen::before { content: ""; position: absolute; z-index: 1; left: 50%; bottom: -12px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #5fae4a; box-shadow: 0 0 6px rgba(95, 174, 74, 0.8); }
.dev-stand { width: 30%; height: 40px; }
.dev-stand::before { left: 40%; right: 40%; top: 0; height: 30px; border: 0; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--alu-3), var(--alu-1) 45%, var(--alu-2) 70%, var(--alu-3)); box-shadow: inset 0 6px 6px -4px rgba(0, 0, 0, 0.45); }
.dev-stand::after { height: 10px; border: 0; border-radius: 50% 50% 6px 6px / 70% 70% 6px 6px; background: linear-gradient(var(--alu-1), var(--alu-2) 60%, var(--alu-3)); box-shadow: 0 10px 16px -6px rgba(0, 0, 0, 0.6); }
/* the laptop: a black glass lid with a camera, and the aluminium base under it */
.dev-laptop { --bz: 8px; --dr: 12px 12px 3px 3px; }
.dev-laptop .dev-screen::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #2f3338; }
.dev-deck {
  height: 13px; margin: 0 -9% 0; border: 0; border-radius: 2px 2px 16px 16px / 2px 2px 10px 10px;
  background: linear-gradient(var(--alu-1), var(--alu-2) 55%, var(--alu-3)); box-shadow: 0 16px 24px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.dev-deck::after { left: 42%; right: 42%; top: 0; height: 4px; border-radius: 0 0 5px 5px; background: var(--alu-3); opacity: 0.8; }
/* the tablet: an even black bezel, a thin metal rim and the camera on the side */
.dev-tablet { --bz: 10px; --dr: 20px; }
.dev-tablet .dev-screen { box-shadow: 0 0 0 2px #6f767e, 0 0 0 3.5px #0b0c0d, 0 26px 36px -16px rgba(0, 0, 0, 0.65), 0 8px 14px rgba(0, 0, 0, 0.35); }
.dev-tablet .dev-screen::before { content: ""; position: absolute; z-index: 1; left: -7px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #2f3338; }
/* the phones: rounded glass, the camera pill and the side buttons */
.dev-phone, .dev-phone-land { --dr: 20px; }
.dev-phone { --bz: 5px; }
.dev-phone-land { --bz: 5px; }
.dev-phone .dev-screen, .dev-phone-land .dev-screen { box-shadow: 0 0 0 2px #5d646b, 0 0 0 3.5px #0b0c0d, 0 20px 28px -12px rgba(0, 0, 0, 0.65), 0 6px 10px rgba(0, 0, 0, 0.35); }
.dev-phone .dev-screen::after, .dev-phone-land .dev-screen::after { border-radius: 15px; }
.dev-phone .dev-screen img, .dev-phone-land .dev-screen img { border-radius: 15px; }
.dev-phone .dev-screen::before { left: 36%; right: 36%; top: 5px; height: 9px; border-radius: 5px; background: #050506; }
.dev-phone-land .dev-screen::before { left: 5px; top: 36%; bottom: 36%; width: 9px; border-radius: 5px; background: #050506; }
.dev-phone::before, .dev-phone::after, .dev-phone-land::before, .dev-phone-land::after { content: ""; position: absolute; z-index: -1; border-radius: 2px; background: #3b3f44; }
.dev-phone::before { right: -4px; top: 24%; width: 4px; height: 12%; }
.dev-phone::after { left: -4px; top: 18%; width: 4px; height: 16%; }
.dev-phone-land::before { top: -4px; left: 24%; height: 4px; width: 12%; }
.dev-phone-land::after { bottom: -4px; left: 18%; height: 4px; width: 16%; }
@media (max-width: 720px) {
  .dev-monitor { --bz: 6px; }
  .dev-monitor .dev-screen { border-bottom-width: 12px; }
  .dev-monitor .dev-screen::before { bottom: -8px; width: 4px; height: 4px; margin-left: -2px; }
  .dev-laptop, .dev-tablet { --bz: 5px; }
  .dev-phone, .dev-phone-land { --bz: 3px; --dr: 12px; }
  .dev-phone .dev-screen::after, .dev-phone-land .dev-screen::after, .dev-phone .dev-screen img, .dev-phone-land .dev-screen img { border-radius: 9px; }
  .dev-phone .dev-screen::before { height: 6px; top: 3px; }
  .dev-phone-land .dev-screen::before { width: 6px; left: 3px; }
  .dev-stand { height: 26px; }
  .dev-stand::before { height: 18px; }
  .dev-stand::after { height: 7px; }
  .dev-deck { height: 8px; }
}

/* ---------- Features: three notes on a row, then the two editors side by side ---------- */
.notes.notes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tryouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 28px; align-items: start; margin-top: 40px; }
.tryout { min-width: 0; }
.tryout-note { position: relative; }
.tryout-ship .tryout-note { transform: rotate(-0.6deg); --pin: var(--orange); }
.tryout-hud .tryout-note { transform: rotate(0.6deg); --pin: var(--teal); }
.tryout-cta { margin-top: 12px; min-height: 44px; padding: 8px 18px 9px; font-size: 18px; }
.tryout .gx { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.tryout .gx-stage { min-height: 300px; }
.tryout .gx-ship { width: min(100%, 360px); }
.tryout .hud-tablet { margin-top: 18px; max-width: none; padding: 10px; border-radius: 22px; }
.tryout .hud-stage { border-radius: 12px; }
.tryout .hud-plate { width: 46%; padding: 1.4cqi 1.6cqi 1.6cqi; border-width: 2px; border-radius: 10px; }
.tryout .hud-btn { min-height: 28px; border-width: 2px; }
.tryout-foot { margin-top: 12px; text-align: center; font: 800 13px/1.4 var(--body); color: var(--soil-dark); }
@media (max-width: 1100px) {
  .notes.notes-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .tryouts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the Garage, compact like in the game: arrows on the stage, paints in one row ---------- */
.tryout .gx-stage { min-height: 330px; }
.tryout .gx-name { top: 12px; bottom: auto; }
.gx-cyclers { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; gap: 8px; }
.gx-cycle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; min-width: 0; width: 49%; padding: 4px; border-radius: 14px; background: rgba(46, 32, 22, 0.88); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
.gx-cycle-mid { display: grid; justify-items: center; min-width: 0; text-align: center; }
.gx-cycle-h { font: 900 9.5px/1.2 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); }
.gx-cycle-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 15px/1.15 var(--display); color: var(--gold); }
.gx-arrow { display: grid; place-items: center; width: 34px; height: 34px; padding: 0 0 3px; border: 3px solid var(--gold-edge); border-radius: 10px; background: var(--gold); color: var(--soil-deep); font: 24px/1 var(--display); box-shadow: 0 3px 0 var(--gold-edge); cursor: pointer; }
.gx-arrow:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-edge); }
.tryout .gx-panel { gap: 10px; padding: 14px 14px 16px; }
.tryout .gx-swatches { flex-wrap: nowrap; gap: 4px; }
.tryout .gx-swatches .gx-sw { width: 26px; height: 26px; border-width: 2px; flex: none; }
@media (max-width: 1240px) {
  .tryout .gx-swatches { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .gx-arrow { width: 30px; height: 30px; font-size: 21px; }
  .gx-cycle-name { font-size: 13px; }
}

/* the Equipped boxes: the slots stand in one fixed column, so "Equipped" and the name start at the
   same place and in the same size in every card (Joni's two parts fan out inside the column) */
.pcard .loadout { grid-template-columns: 86px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 96px; padding: 12px 14px 12px 10px; }
/* the slots fan out with margins, not positioning: a tip stays static, so its card opens
   across the whole Equipped box as before */
.pcard .lo-slots { display: flex; align-items: flex-start; width: 86px; height: 72px; align-self: center; }
.pcard .lo-slots > .tip:only-child { margin: 6px 0 0 13px; }
.pcard .lo-slots > .tip:nth-child(2) { margin: 12px 0 0 -36px; z-index: 1; }
.pcard .lo-text { align-self: start; padding-top: 6px; }
.pcard .lo-name { font-size: 18px; line-height: 1.15; }

/* the way back up from the footer */
.foot-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 16px; }
.foot-contact .foot-end .legal { margin-top: 0; }
.to-top { min-height: 44px; padding: 8px 16px 9px; font-size: 17px; }
.to-top svg { flex: none; width: 18px; height: 16px; }
.lights-off .to-top { filter: brightness(0.75); }

/* Rusty's card: two links under the role, one under the other */
.pcard .pc-mail-2 { flex-direction: column; gap: 0; }
.pcard .pc-mail-2 .pcm-link { min-height: 36px; }

/* ---------- Rusty's finds: a collector's display case, the fact sheet's light partner ---------- */
.finds.fact-sheet { background: var(--cream-light); border-color: var(--soil-deep); color: var(--ink); box-shadow: 5px 8px 0 var(--shadow), inset 0 3px 0 var(--white); }
.finds .fs-title {
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 0 12px, transparent 12px 24px), var(--teal);
  border-bottom-color: var(--soil-deep); box-shadow: inset 0 -5px 0 var(--teal-edge), inset 0 3px 0 var(--hi);
}
.finds-count { color: var(--gold-light); }
.finds-grid { margin: 18px 18px 6px; padding: 14px; border-radius: 16px; background: var(--cream); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.08), inset 0 0 0 3px var(--cream-dark); }
.find-slot { background: var(--soil-deep); border-color: var(--soil-deep); box-shadow: 0 3px 0 var(--cream-edge), inset 0 5px 8px rgba(0, 0, 0, 0.55); }
.find-q { color: rgba(243, 234, 208, 0.35); }
.find-slot.is-found { background: var(--white); box-shadow: 0 3px 0 var(--cream-edge), inset 0 3px 0 var(--cream-light), 0 0 0 2px var(--soil-deep); }
.find-slot.is-found:hover, .find-slot.is-found:focus-visible { background: var(--gold-light); }
.finds-foot { color: var(--soil-dark); }
.finds-foot b { color: var(--soil-deep); }
.finds-reset { color: var(--orange-edge); }
.finds.is-complete .finds-count { color: var(--white); }
@media (max-width: 560px) {
  .finds-grid { margin: 14px 12px 4px; padding: 10px; }
}

/* ---------- the signs: the hidden side is switched off half way through the turn, so iOS never
   shows the other side mirrored through (backface-visibility alone leaks there) ---------- */
.rule-front, .rule-back { transition: visibility 0s 0.09s; }
.rule-back { visibility: hidden; }
.rule.open .rule-back, .rule.peek .rule-back { visibility: visible; }
.rule.open .rule-front, .rule.peek .rule-front { visibility: hidden; }

/* the gold nugget lies beside the chest, not on it */
.bt-chest .coin { right: -16px; bottom: 2px; }

@media (max-width: 720px) {
  /* ---------- Meet Rusty on a phone: Rusty, his facts and his finds on one screen ---------- */
  .rusty-top { grid-template-areas: "head" "talk" "stage" "facts" "finds"; }
  .rusty-stage { margin-top: 18px; }
  .rr-scene { max-width: 290px; margin-bottom: 21%; }
  .rusty-facts { margin-top: 0; }
  .rusty-facts .fs-title { padding: 8px 14px 10px; font-size: 20px; }
  .rusty-facts .fs-title .fs-sub { font-size: 15px; }
  .rusty-facts .fs-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 4px 8px 6px; }
  .rusty-facts .fs-rows > div { display: grid; grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 6px; border-bottom: 0; }
  .rusty-facts .fs-rows > div:nth-child(-n+2) { border-bottom: 2px dashed var(--dash-dark); }
  .rusty-facts .fs-rows > div:nth-child(odd) { border-right: 2px dashed var(--dash-dark); padding-right: 10px; }
  .rusty-facts .fs-rows > div:nth-child(even) { padding-left: 10px; }
  .rusty-facts .fs-rows dt, .rusty-facts .fs-try { font-size: 11px; letter-spacing: 0.06em; gap: 7px; }
  .rusty-facts .fs-rows .pin { width: 24px; height: 24px; }
  .rusty-facts .fs-rows dd { padding-left: 31px; text-align: left; font-size: 15px; line-height: 1.2; }
  .finds { margin-top: 18px; }
  .finds .fs-title { padding: 8px 14px 10px; font-size: 20px; }
  .finds-count { font-size: 16px; }
  .finds-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 10px 10px 2px; padding: 8px; border-radius: 12px; }
  .find-slot { border-width: 3px; border-radius: 10px; padding: 4%; }
  .find-q { font-size: 16px; }
  .find-slot.is-new::after { top: -9px; right: -7px; padding: 0 5px 1px; font-size: 10px; }
  .finds-foot { padding: 6px 14px 12px; font-size: 13px; }

  /* ---------- the mining company card: the flag beside the name, two small tiles ---------- */
  .company { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 0 14px 14px; }
  .co-flag { width: 64px; height: 84px; margin-top: -4px; align-self: start; }
  .co-flag img { width: 46px; border-radius: 11px; }
  .co-kicker { font-size: 10.5px; letter-spacing: 0.14em; }
  .co-name { font-size: 24px; gap: 4px 8px; -webkit-text-stroke-width: 5px; }
  .co-tag { font-size: 0.62em; padding: 2px 7px 3px; border-width: 2px; }
  .co-sub { font-size: 13px; }
  .co-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .co-tile { min-height: 0; padding: 8px 12px 9px; gap: 2px; border-radius: 14px; }
  .co-num { font-size: 28px; }
  .co-crew { gap: 8px; }
  .co-face { width: 30px; height: 30px; border-width: 2px; }
  .co-face + .co-face { margin-left: -8px; }
  .co-motto { font-size: 16px; }
}

@media (max-width: 720px) {
  .rr-scene { max-width: 258px; }
  .rusty-facts .fs-rows > div { padding-top: 6px; padding-bottom: 6px; }
  .finds-grid { gap: 5px; margin-top: 8px; }
  .finds-foot { padding-top: 4px; padding-bottom: 10px; }
}

/* small screens: WANTED stays in the header row like on desktop, tilted down to the right */
@media (max-width: 900px) {
  .poster-head { flex-wrap: nowrap; align-items: center; }
  .poster-head .eyebrow { min-width: 0; white-space: nowrap; letter-spacing: 0.12em; }
  .stamp-wanted { flex: none; margin: -4px -8px 0 auto; padding: 4px 11px 6px; font-size: 26px; border-width: 4px; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--cream-light), inset 0 0 0 5px var(--boss-red); transform: rotate(7deg); }
}
@media (max-width: 380px) {
  .stamp-wanted { font-size: 21px; padding: 3px 8px 5px; }
}

@media (max-width: 720px) {
  /* Meet Rusty on a phone: a smaller bubble, a smaller find card, and the depth badge and the
     button side by side while he digs */
  .rusty-talk .bubble-big { margin-top: 14px; padding: 13px 16px 14px; font-size: 18px; line-height: 1.3; }
  .rd-find { width: 112px; }
  .rd-find img { width: 60px; height: 60px; }
  .rd-tag { padding: 4px 9px 5px; }
  .rd-tag b { font-size: 14px; }
  .rd-tag span { font-size: 9px; }
  .rd-depth { left: 4%; padding: 3px 8px 4px; border-width: 2px; }
  .rd-depth b { font-size: 15px; }
  .rd-layer { font-size: 8.5px; }
  .is-digging .rd-btn { left: auto; right: 4%; margin: 0; font-size: 16px; padding: 6px 14px 7px; min-height: 38px; }
}

@media (max-width: 720px) {
  /* the logo and the menu stand on a dark band at the top of the picture */
  .show-shade {
    background:
      linear-gradient(0deg, rgba(20, 12, 7, 0.94) 0, rgba(20, 12, 7, 0.82) 30%, rgba(20, 12, 7, 0.35) 50%, rgba(20, 12, 7, 0) 62%),
      linear-gradient(180deg, rgba(14, 10, 6, 0.85) 0, rgba(14, 10, 6, 0.6) 12%, rgba(14, 10, 6, 0) 22%);
  }
  .brand img { filter: drop-shadow(0 0 10px rgba(14, 10, 6, 0.9)) drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.5)); }
}

/* the hero words never move when the picture changes: the caption always keeps room for two lines */
.show-foot { align-items: flex-start; }
.show-note { flex: 1 1 0; min-width: 0; min-height: 2.6em; }
@media (max-width: 720px) {
  /* the caption gets the whole width (two lines at most), the dots sit under it */
  .show-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .show-note { flex: none; width: 100%; }
  /* the depth gauge waits below the surface, so it never covers the hero buttons */
  .gauge.is-ready { transition: opacity 0.25s ease, visibility 0s; }
  .gauge.at-surface { opacity: 0; visibility: hidden; }
  .gauge.is-ready.at-surface { transition: opacity 0.25s ease, visibility 0s 0.25s; }
}

/* a phone held upright: its own Garage picture, with more floor below, so the ship and the flag
   stand in the upper half and the words sit on the floor */
@media (max-width: 720px) and (orientation: portrait) {
  .show-garage { background-image: url("img/show-garage-portrait.webp"); background-size: cover; background-position: 58% 100%; }
  /* a compact block of words: the tag on one line, the two buttons side by side */
  .hero-show .hero-tag { font-size: 13px; letter-spacing: 0.08em; white-space: nowrap; }
  .hero-show .cta { flex-wrap: nowrap; gap: 8px; }
  .hero-show .cta .btn-big { flex: 0 1 auto; min-height: 46px; padding: 8px 14px 9px; font-size: 16px; white-space: nowrap; }
}