/* ============================================================
   KCLMS VOLCANIX - FTC TEAM
   Poster / sticker design system: dark full-bleed page, skewed
   parallelogram nav buttons, hard offset "stamp" shadows, heavy
   italic display type with glow, zigzag dividers, sponsor
   marquee, scroll-reveal entrances, die-cut mascot stickers.
   Palette from the Volcanix colour sheet:
   cream / yellow / amber / orange / red / black.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap');

@font-face {
  font-family: 'Spline Sans Mono';
  src: url('SplineSansMono.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Bahnschrift';
  src: url('Bahnschrift.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}

/* === TOKENS === */
:root {
  --black: #000000;
  --coal: #0e0403;
  --panel: #160604;
  --line: rgba(255, 242, 220, 0.14);

  --cream: #fff2dc;
  --yellow: #facc57;
  --amber: #f7b35b;
  --orange: #e57c41;
  --red: #d93e36;
  --red-deep: #8f2016;
  --maroon: #2b0c0b;

  --display: 'Spline Sans Mono', 'Arial Black', 'Open Sans', sans-serif;
  --body: 'Bahnschrift', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;

  --t: 0.22s;
  /* the one hard "stamp" shadow everything shares */
  --stamp: 8px 8px 0 rgba(143, 32, 22, 0.85);
}

/* === RESET === */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--cream);
  background: var(--black);
  overflow-x: hidden;
}
img { border: 0; vertical-align: middle; max-width: 100%; height: auto; }
a { text-decoration: none; color: var(--amber); transition: color var(--t), background-color var(--t), transform var(--t); }
a:hover { color: var(--yellow); }
ul { list-style: none; }
::selection { background: var(--orange); color: var(--cream); }

.content { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* === TYPOGRAPHY === */
h1, h2, h3 {
  font-family: var(--display);
  font-style: italic;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--cream);
}
h1 { font-size: clamp(44px, 8vw, 104px); }
h2 { font-size: clamp(26px, 4vw, 44px); }
h3 { font-size: clamp(19px, 2.4vw, 26px); color: var(--yellow); }
h4 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--cream); }
p { font-size: 15px; color: #f2e4cb; }
.meta { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 242, 220, 0.65); }
strong { font-weight: 700; color: var(--cream); }

/* Big glowing poster headline (hero).
   No -webkit-text-stroke here: Chrome's stroke renderer leaves
   stray outline fragments on synthetic-italic glyphs, so the
   outline is faked with layered shadows instead. */
.mega {
  color: var(--cream);
  text-shadow:
    5px 5px 0 var(--red-deep),
    0 0 34px rgba(229, 124, 65, 0.55);
}

/* Serif accent tagline sitting under display headlines */
.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 2vw, 21px);
  color: var(--cream);
}

/* === ZIGZAG DIVIDERS ===
   Sawtooth teeth in the page background colour, laid over the
   bottom (or top) of an image band. */
.zz {
  height: 26px;
  background-image:
    linear-gradient(-45deg, var(--black) 13px, transparent 0),
    linear-gradient(45deg, var(--black) 13px, transparent 0);
  background-size: 26px 26px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.zz.flip { transform: scaleY(-1); }
.zz.abs { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; }

/* === FIXED NAVIGATION === */
/* One connected red slab riding above the scroll: wordmark and
   nav buttons live in the same angled bar, nothing floats loose
   on the far side. */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0 34px;
  pointer-events: none; /* only the bar catches clicks */
}
.nav-bar {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 26px;
  background: var(--orange);
  padding: 8px 74px 8px 26px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 42px) 100%, 0 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

/* VOLCANIX wordmark, Leviathan-style: red display letters with a
   black outline sitting straight on the red slab */
.wordmark { display: block; text-align: center; }
.wm-main {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 33px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--red);
  /* stroke faked with four shadows; real text-stroke glitches on
     synthetic italics in Chrome */
  text-shadow:
    -1.5px 0 0 var(--black), 1.5px 0 0 var(--black),
    0 -1.5px 0 var(--black), 0 1.5px 0 var(--black),
    3px 3px 0 rgba(0, 0, 0, 0.55);
}
.wm-sub {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.55em;
  padding-left: 0.55em; /* optically recentre the tracked text */
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.9);
  margin-top: 2px;
}
.wordmark:hover .wm-main { color: var(--yellow); }

/* Nav buttons: black parallelograms cut into the red slab */
.nav-links { display: flex; gap: 14px; }
.nav-links a {
  display: block;
  transform: skewX(-14deg);
  background: var(--black);
  padding: 10px 24px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  transition: background-color var(--t), box-shadow var(--t), transform var(--t);
}
.nav-links a span {
  display: block;
  transform: skewX(14deg);
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--yellow);
  transition: color var(--t);
}
.nav-links a:hover,
.nav-links a.active {
  background: var(--cream);
  transform: skewX(-14deg) translateY(-2px);
  box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.55);
}
.nav-links a:hover span,
.nav-links a.active span { color: var(--red-deep); }

/* === BUTTONS === */
/* Same skewed sticker language as the nav. Square corners, hard
   offset shadow, snap hover inversion. */
.btn {
  display: inline-block;
  transform: skewX(-12deg);
  padding: 11px 30px;
  margin: 4px 8px 4px 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2px solid var(--orange);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
  transition: background-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.btn > span { display: inline-block; transform: skewX(12deg); }
.btn.solid { background: var(--orange); color: var(--black); }
.btn.solid:hover { background: var(--yellow); border-color: var(--yellow); color: var(--black); transform: skewX(-12deg) translate(-2px, -3px); box-shadow: 9px 10px 0 rgba(0, 0, 0, 0.55); }
.btn.ghost { background: transparent; color: var(--cream); }
.btn.ghost:hover { background: var(--orange); color: var(--black); transform: skewX(-12deg) translate(-2px, -3px); box-shadow: 9px 10px 0 rgba(0, 0, 0, 0.55); }

/* === HERO === */
.hero {
  position: relative;
  height: 82vh;
  min-height: 540px;
  overflow: hidden;
  background: var(--coal);
}
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(1.05);
}
.hero-copy {
  position: absolute;
  left: 0; right: 0; bottom: 72px;
  z-index: 4;
  text-align: center;
  padding: 0 6vw;
}
.hero-copy .tagline { margin: 10px 0 26px; }

/* Interior page banner: same treatment, shorter */
.page-banner { height: 46vh; min-height: 340px; }
.page-banner .hero-copy { bottom: 56px; }

.hero-social {
  position: absolute;
  top: 96px; right: 22px;
  z-index: 5;
  display: flex;
  gap: 10px;
}
.hero-social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  transform: skewX(-12deg);
  border: 2px solid var(--orange);
  background: rgba(0, 0, 0, 0.65);
  color: var(--cream);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.hero-social a:hover { background: var(--orange); color: var(--black); transform: skewX(-12deg) translateY(-2px); }
.hero-social svg { width: 18px; height: 18px; transform: skewX(12deg); }

/* === SHOUT BAND (the "RELEASE THE KRAKEN" strip) === */
.shout {
  background: var(--orange);
  text-align: center;
  padding: 16px 20px;
}
.shout p {
  font-family: var(--display);
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(20px, 3.4vw, 34px);
  color: var(--black);
  letter-spacing: 0.04em;
}

/* === SECTION BANNERS === */
.section-banner {
  background: var(--amber);
  text-align: center;
  padding: 14px 20px;
  margin-top: 26px;
}
.section-banner h2 { color: var(--black); text-shadow: none; }
.section-banner .meta { color: rgba(0, 0, 0, 0.75); margin-top: 2px; }

/* === CONTENT BLOCKS === */
.block {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 48px 24px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.block.flip { flex-direction: row-reverse; }
.block-media { flex: 0 0 42%; }
.block-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 2px solid var(--orange);
  box-shadow: var(--stamp);
  transform: rotate(-1.2deg);
  transition: transform var(--t);
}
.block.flip .block-media img { transform: rotate(1.2deg); }
.block-media img:hover { transform: rotate(0deg) scale(1.02); }
.block-body { flex: 1; }
.block-body h3 { margin-bottom: 10px; }
.block-body p { margin-bottom: 18px; }

/* === STATS BAND === */
.stats {
  display: flex;
  background: var(--panel);
  border-top: 2px solid var(--red-deep);
  border-bottom: 2px solid var(--red-deep);
  position: relative;
  overflow: hidden;
}
.stat { flex: 1; text-align: center; padding: 38px 10px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat-number {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(34px, 5vw, 56px);
  color: var(--yellow);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
  line-height: 1;
}
.stat-label { display: block; margin-top: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 242, 220, 0.6); }

/* === GENERIC SECTIONS === */
.section { padding: 44px 24px; max-width: 1100px; margin: 0 auto; position: relative; }
.section.wide { max-width: none; padding-left: 0; padding-right: 0; }
.center { text-align: center; }
.cols { display: flex; gap: 40px; }
.cols > div { flex: 1; }

/* === LIST ROWS === */
.rows { border-top: 1px solid var(--line); }
.row-item { display: flex; gap: 30px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.row-label {
  flex: 0 0 130px;
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
}
.row-item h3 { flex: 0 0 250px; font-size: 18px; }
.row-item p { flex: 1; }

/* === SPEC LIST === */
.spec-list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec-list li span:first-child { color: var(--amber); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.spec-list li span:last-child { color: var(--cream); text-align: right; }

/* === TEAM CARDS === */
.team-grid { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; padding: 8px 0; }
.team-card {
  width: 300px;
  background: var(--panel);
  border: 2px solid var(--orange);
  box-shadow: var(--stamp);
  transform: rotate(-1deg);
  transition: transform var(--t), box-shadow var(--t);
}
.team-grid .team-card:nth-child(even) { transform: rotate(1deg); }
.team-card:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 11px 12px 0 rgba(143, 32, 22, 0.85); }
.team-card img { width: 100%; height: 250px; object-fit: cover; object-position: 50% 22%; border-bottom: 2px solid var(--orange); }
.team-card .team-info { padding: 14px 16px 18px; }
.team-name { font-family: var(--display); font-style: italic; font-size: 20px; color: var(--cream); }
.team-role { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--orange); margin: 3px 0 8px; }
.team-bio { font-size: 13px; color: rgba(255, 242, 220, 0.75); }

/* === GALLERY === */
.gallery { display: flex; gap: 22px; }
.gallery figure { flex: 1; }
.gallery img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border: 2px solid var(--orange);
  box-shadow: 6px 6px 0 rgba(143, 32, 22, 0.85);
  transform: rotate(-1deg);
  transition: transform var(--t);
}
.gallery figure:nth-child(even) img { transform: rotate(1deg); }
.gallery img:hover { transform: rotate(0deg) scale(1.03); }
.gallery figcaption { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 242, 220, 0.55); text-align: center; padding-top: 10px; }

/* === SPONSOR TIERS === */
.tiers { display: flex; gap: 22px; align-items: stretch; }
.tier {
  flex: 1;
  background: var(--panel);
  border: 2px solid var(--tier, var(--orange));
  border-top-width: 8px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  transition: transform var(--t);
}
/* every tier feels special under the cursor: lift plus a glow in
   its own metal colour */
.tier:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 26px var(--tier, var(--orange)), 6px 6px 0 rgba(0, 0, 0, 0.55);
}
.tier.bronze { --tier: #c87f3a; }
.tier.silver { --tier: #9aa3b2; }
.tier.gold { --tier: var(--yellow); }
.tier.platinum { --tier: #d8dce6; }

/* Tensor idles with a slowly spinning rainbow border; hovering it
   spins the rainbow up */
@property --tier-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.tier.platinum {
  border-color: transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(from var(--tier-angle),
      #d93e36, #f7b35b, #facc57, #63c581, #4f8fd9, #9b6bd4, #d93e36) border-box;
  animation: tier-rainbow 6s linear infinite;
}
.tier.platinum:hover { animation-duration: 1.5s; }
@keyframes tier-rainbow { to { --tier-angle: 360deg; } }
.tier-name { font-family: var(--display); font-style: italic; font-size: 22px; color: var(--tier, var(--orange)); }
.tier-metal { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 242, 220, 0.55); }
.tier-price { font-size: 15px; font-weight: 800; color: var(--cream); margin: 4px 0 12px; }
.tier ul { flex: 1; margin-bottom: 16px; }
.tier li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: rgba(255, 242, 220, 0.8); }
.tier li:last-child { border-bottom: none; }
.tier .btn { display: block; text-align: center; margin-right: 0; }

/* === SPONSOR WALL === */
.sponsor-tier-label { text-align: center; font-family: var(--display); font-style: italic; font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 242, 220, 0.6); margin: 26px 0 14px; }
.sponsor-logos { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.sponsor-logos li {
  flex: 0 1 300px;
  display: flex; align-items: center; justify-content: center;
  min-height: 120px;
  background: var(--cream);
  border: 2px solid var(--orange);
  box-shadow: 6px 6px 0 rgba(143, 32, 22, 0.85);
  padding: 20px;
  transform: rotate(-0.8deg);
  transition: transform var(--t);
}
.sponsor-logos li:nth-child(even) { transform: rotate(0.8deg); }
.sponsor-logos li:hover { transform: rotate(0deg) translateY(-4px); }
.sponsor-logos a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sponsor-logos img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.sponsor-logos img.mono { filter: grayscale(1) brightness(0); transition: filter var(--t); }

/* Matrix tier (Apian): black by default, gold on hover */
.sponsor-logos li.tier-matrix:hover { box-shadow: 6px 6px 0 rgba(143, 32, 22, 0.85), 0 0 26px rgba(212, 175, 55, 0.75); }
.sponsor-logos li.tier-matrix:hover img.mono {
  filter: brightness(0) saturate(100%) invert(78%) sepia(56%) saturate(560%) hue-rotate(358deg) brightness(96%) contrast(92%);
}

/* Tensor tier (KCL, Record): rainbow shimmer on hover */
.sponsor-logos li.tier-tensor { position: relative; }
.sponsor-logos li.tier-tensor::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit;
  background: linear-gradient(120deg, #ff004c, #ff8a00, #ffe600, #00e676, #00b0ff, #d500f9, #ff004c);
  background-size: 300% 300%;
  opacity: 0; transition: opacity var(--t);
}
/* KCL: red-focused rainbow (their brand red) */
.sponsor-logos li.tier-tensor-kcl::before {
  background: linear-gradient(120deg, #e1051d, #ff2d55, #ff5e3a, #ff8a00, #ffb400, #ff2d7a, #e1051d);
}
/* Record: deep-blue-focused rainbow (their brand navy) */
.sponsor-logos li.tier-tensor-record::before {
  background: linear-gradient(120deg, #001b6e, #0033cc, #0077ff, #00b0ff, #3a6bff, #5e17eb, #001b6e);
}
.sponsor-logos li.tier-tensor-kcl::before,
.sponsor-logos li.tier-tensor-record::before { background-size: 300% 300%; }

.sponsor-logos li.tier-tensor:hover::before { opacity: 1; animation: tensor-rainbow 3s linear infinite; }
.sponsor-logos li.tier-tensor:hover img { animation: tensor-hue 3s linear infinite; }
@keyframes tensor-rainbow { to { background-position: 300% 0; } }
@keyframes tensor-hue { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sponsor-logos li.tier-tensor:hover::before { animation: none; }
  .sponsor-logos li.tier-tensor:hover img { animation: none; }
}

/* === FINANCE CARD === */
.finance {
  display: flex;
  gap: 36px;
  background: var(--panel);
  border: 2px solid var(--orange);
  box-shadow: var(--stamp);
  padding: 28px;
}
.finance-main { flex: 1.5; }
.finance-aside { flex: 1; border-left: 1px solid var(--line); padding-left: 28px; }
.finance-stats { display: flex; gap: 16px; margin: 18px 0 20px; }
.finance-stat { flex: 1; background: var(--coal); padding: 14px; border-top: 4px solid var(--orange); }
.finance-stat-value { display: block; font-family: var(--display); font-style: italic; font-size: 26px; color: var(--yellow); }
.finance-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 242, 220, 0.55); }
.finance-feed-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255, 242, 220, 0.55); margin-bottom: 10px; }
.finance-feed-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.finance-feed-list li:last-child { border-bottom: none; }
.finance-feed-name { display: block; font-size: 13px; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.finance-feed-date { font-size: 12px; color: rgba(255, 242, 220, 0.5); }
.finance-feed-amount { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--cream); }
.finance-feed-amount.is-in { color: #63c581; }
.finance-feed-empty { font-size: 13px; color: rgba(255, 242, 220, 0.5); padding: 8px 0; }
.finance-host img { max-width: 130px; margin-top: 18px; background: var(--cream); padding: 10px 14px; border: 2px solid var(--orange); }

/* === PDF VIEWER === */
.pdf-frame { width: 100%; height: 900px; border: 2px solid var(--orange); box-shadow: var(--stamp); overflow: hidden; background: var(--panel); }
.pdf-frame object { width: 100%; height: 100%; }
.pdf-fallback { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 30px; text-align: center; }
.pdf-fallback img { max-width: 360px; border: 2px solid var(--orange); }

/* === CTA BAND === */
.cta-band { position: relative; overflow: hidden; text-align: center; padding: 84px 6vw; background: var(--coal); margin-top: 40px; }
.cta-band .cta-bg { position: absolute; inset: 0; }
.cta-band .cta-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.35) saturate(1.1); }
.cta-band .cta-inner { position: relative; z-index: 2; }
.cta-band h2 { margin-bottom: 10px; text-shadow: 4px 4px 0 var(--red-deep), 0 0 26px rgba(229, 124, 65, 0.5); }
.cta-band p { margin-bottom: 24px; }

/* === MASCOT STICKERS ===
   The hidden-sticker minigame: exactly one of each mascot exists
   across the whole site, tucked somewhere unexpected, always
   fully visible (never clipped). They twitch when found. */
.sticker {
  position: absolute;
  z-index: 6;
  filter:
    drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff)
    drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff)
    drop-shadow(7px 9px 0 rgba(0, 0, 0, 0.45));
  transition: transform 0.25s ease;
  cursor: grab;
}
.sticker:hover { transform: rotate(7deg) scale(1.12) !important; }
.sticker.s1 { transform: rotate(-10deg); }
.sticker.s2 { transform: rotate(8deg); }
.sticker.s3 { transform: rotate(-6deg); }
.clip { overflow: hidden; }

/* === LONDON SKYLINE BAND === */
/* Sits directly above the footer: our city, in silhouette. */
.skyline {
  position: relative;
  background: var(--black);
  padding-top: 60px;
  line-height: 0;
}
.skyline svg, .skyline img { width: 100%; height: auto; display: block; }
/* Landmark span (Big Ben to Tower Bridge) cropped from the full
   silhouette and tiled edge to edge, so every screen width shows
   London proper instead of the generic filler buildings. */
.skyline-strip {
  height: clamp(70px, 14.6vw, 240px);
  background: url('media/skyline-loop.png') left bottom repeat-x;
  background-size: auto 100%;
}
.skyline-label {
  position: absolute;
  top: 26px; left: 0; right: 0;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(229, 124, 65, 0.85);
  line-height: 1;
}

/* === FOOTER === */
.footer {
  position: relative;
  background: var(--maroon);
  border-top: 4px solid var(--orange);
  padding: 46px 24px 24px;
  overflow: hidden;
}
/* Giant watermark mascot behind the footer content */
.footer-watermark {
  position: absolute;
  right: -60px; bottom: -80px;
  width: 460px;
  opacity: 0.07;
  transform: rotate(-12deg);
  pointer-events: none;
  filter: invert(1) sepia(1) saturate(8) hue-rotate(-25deg);
}
.footer-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
.footer-cols { display: flex; gap: 40px; margin-bottom: 30px; }
.footer-cols > div { flex: 1; }
.footer-cols > div:first-child { flex: 1.4; }
.footer h4 { margin-bottom: 12px; color: var(--yellow); }
.footer p, .footer li, .footer a { color: rgba(255, 242, 220, 0.72); font-size: 13px; }
.footer li { margin-bottom: 6px; }
.footer a:hover { color: var(--cream); }
.footer-brand { font-family: var(--display); font-style: italic; font-size: 24px; color: var(--cream); display: inline-block; margin-bottom: 8px; text-shadow: 3px 3px 0 var(--red-deep); }

/* The footer's own sticker mascot - nudges when poked */
.footer-mascot {
  width: 150px;
  margin-bottom: 14px;
  display: block;
  transform: rotate(-8deg);
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(8px 10px 0 rgba(0, 0, 0, 0.5));
  transition: transform 0.25s ease;
}
.footer-mascot:hover { transform: rotate(4deg) scale(1.08) translateY(-4px); }

.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  transform: skewX(-12deg);
  border: 2px solid var(--orange);
  color: var(--cream);
  transition: background-color var(--t), color var(--t), transform var(--t);
}
.footer-social a:hover { background: var(--orange); color: var(--black); transform: skewX(-12deg) translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; transform: skewX(12deg); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; gap: 16px; position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
.footer-bottom p { font-size: 12px; color: rgba(255, 242, 220, 0.45); }

/* === SCROLL REVEAL === */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.from-left { transform: translateX(-46px); }
.reveal.from-right { transform: translateX(46px); }
.reveal.zoom { transform: scale(0.92); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
}

/* === UTILITIES === */
.mt { margin-top: 16px; }
.mt-lg { margin-top: 30px; }
.mb { margin-bottom: 16px; }

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .topnav { padding: 10px 0 26px; }
  .nav-bar { gap: 14px; padding: 7px 48px 7px 16px; clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); }
  .wm-main { font-size: 22px; }
  .wm-sub { font-size: 7px; }
  .nav-links { gap: 8px; }
  .nav-links a { padding: 7px 13px; }
  .nav-links a span { font-size: 13px; }
  .block, .block.flip { flex-direction: column; gap: 26px; padding: 36px 24px; }
  .block-media { flex: none; width: 100%; }
  .cols { flex-direction: column; gap: 26px; }
  .tiers { flex-wrap: wrap; }
  .tier { flex: 1 1 46%; }
  .gallery { flex-direction: column; }
  .gallery img { height: 240px; }
  .stats { flex-wrap: wrap; }
  .stat { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
  .finance { flex-direction: column; }
  .finance-aside { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
  .footer-cols { flex-wrap: wrap; }
  .footer-cols > div { flex: 1 1 42%; }
  .row-item { flex-wrap: wrap; gap: 8px 22px; }
  .row-item h3 { flex: 1 1 auto; }
  .row-item p { flex: 1 1 100%; }
  .hero-social { top: 84px; right: 12px; }
  /* stickers stay visible on small screens so the hunt still works */
  .sticker { max-width: 72px; }
  /* safety net: nothing may widen the page sideways on small screens */
  html { overflow-x: clip; }
  /* side slide-ins push full-width blocks past the viewport edge
     and create horizontal scroll; on small screens reveal
     everything with the vertical rise instead */
  .reveal.from-left:not(.in),
  .reveal.from-right:not(.in) { transform: translateY(30px); }
}
@media (max-width: 560px) {
  .hero { height: 72vh; min-height: 480px; }
  .tier { flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .pdf-frame { height: 520px; }
  /* nav: the fixed-content slab is 492px wide and clips on phones.
     Let it span the viewport and wrap onto two rows
     (wordmark on top, links underneath); the angled clip tail
     goes - there is no room for it. */
  .topnav { padding: 0 0 14px; }
  .nav-bar {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 12px;
    padding: 8px 8px 9px;
    clip-path: none;
  }
  .nav-links { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .nav-links a { padding: 8px 11px; }
  .nav-links a span { font-size: 12px; }
  .wm-main { font-size: 20px; }
  /* finance card: stats row and feed rows overflow at 320px */
  .finance { padding: 20px 14px; }
  .finance-stats { flex-wrap: wrap; gap: 10px; }
  .finance-stat { flex: 1 1 130px; }
  .finance-stat-value { font-size: 21px; }
  .finance-feed-memo { display: block; flex: 1; min-width: 0; }
  .finance-feed-name { max-width: none; }
}

/* ============================================================
   STICKER HUNT MINIGAME
   Find and click every mascot sticker hidden across the site.
   Progress lives in localStorage; the tracker sits bottom-right
   on every page. Full set unlocks the volcano, which erupts and
   pays out a cookie (an SVG one, and a real browser cookie).
   ============================================================ */

/* --- tracker widget --- */
.hunt { position: fixed; right: 18px; bottom: 18px; z-index: 200; font-size: 14px; }
.hunt-tab {
  display: block;
  margin-left: auto;
  transform: skewX(-12deg);
  background: var(--orange);
  color: var(--black);
  border: 2px solid var(--black);
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 20px;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  transition: background-color var(--t), transform var(--t);
}
.hunt-tab:hover { background: var(--yellow); transform: skewX(-12deg) translateY(-2px); }
.hunt-tab span { display: inline-block; transform: skewX(12deg); }
.hunt-tab.all-found { animation: hunt-throb 1.4s ease-in-out infinite; }
@keyframes hunt-throb {
  0%, 100% { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55), 0 0 0 rgba(229, 124, 65, 0); }
  50% { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55), 0 0 22px rgba(229, 124, 65, 0.9); }
}

.hunt-panel {
  display: none;
  width: 264px;
  margin-top: 10px;
  background: var(--panel);
  border: 2px solid var(--orange);
  box-shadow: var(--stamp);
  padding: 16px;
}
.hunt.open .hunt-panel { display: block; }
.hunt-panel h5 {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 4px;
}
.hunt-panel .hunt-hint { font-size: 12px; color: rgba(255, 242, 220, 0.65); margin-bottom: 12px; }
.hunt-slots { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 12px; }
.hunt-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  background: var(--coal);
  border: 1px dashed rgba(255, 242, 220, 0.25);
  padding: 7px 4px 5px;
}
.hunt-slot img { max-width: 100%; max-height: 38px; filter: brightness(0) opacity(0.35); }
.hunt-slot-name {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 242, 220, 0.4);
}
.hunt-slot.found .hunt-slot-name { color: var(--yellow); }
.hunt-slot.found { border: 1px solid var(--orange); }
.hunt-slot.found img { filter: none; animation: hunt-slot-in 0.35s ease; }
@keyframes hunt-slot-in { from { transform: scale(0.4) rotate(-30deg); } to { transform: none; } }

.hunt-status { font-size: 12px; color: rgba(255, 242, 220, 0.75); }
.hunt-erupt {
  display: block;
  width: 100%;
  border: 2px solid var(--orange);
  background: var(--orange);
  color: var(--black);
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  transition: background-color var(--t), transform var(--t);
}
.hunt-erupt:hover { background: var(--yellow); border-color: var(--yellow); transform: translateY(-2px); }
.hunt-reset {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: rgba(255, 242, 220, 0.4);
  margin-top: 10px; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.hunt-reset:hover { color: var(--cream); }

/* found-sticker pop */
.hunt-found-pop { animation: hunt-pop 0.5s ease; }
@keyframes hunt-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(10deg); }
  100% { transform: scale(1); }
}

/* --- eruption overlay --- */
.eruption {
  position: fixed; inset: 0; z-index: 300;
  background: radial-gradient(ellipse at 50% 100%, #41120d 0%, #000000 70%);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  animation: eruption-in 0.4s ease;
}
@keyframes eruption-in { from { opacity: 0; } }
.eruption.rumble { animation: rumble 0.14s linear infinite; }
@keyframes rumble {
  0% { transform: translate(0, 0); }
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-3px, 2px); }
  75% { transform: translate(2px, 3px); }
  100% { transform: translate(-2px, -3px); }
}

.volcano-img {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  height: min(52vh, 470px);
  width: auto;
  filter: drop-shadow(0 0 46px rgba(229, 124, 65, 0.55));
}
.crater-glow {
  position: absolute;
  left: 50%; bottom: min(44vh, 396px);
  width: 170px; height: 85px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(250, 204, 87, 0.95), rgba(229, 124, 65, 0.6) 45%, transparent 75%);
  filter: blur(4px);
}
.lava-bit {
  position: absolute;
  left: 50%; bottom: min(44vh, 396px);
  width: 12px; height: 12px;
  background: var(--yellow);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.eruption-reward {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.eruption-reward.show { opacity: 1; }
.eruption-reward h3 {
  font-size: clamp(26px, 5vw, 52px);
  color: var(--cream);
  text-shadow: 4px 4px 0 var(--red-deep), 0 0 30px rgba(229, 124, 65, 0.8);
}
.eruption-reward p { color: rgba(255, 242, 220, 0.85); max-width: 420px; }
.eruption-reward .cookie-img { width: 150px; height: 150px; border-radius: 50%; animation: cookie-drop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1); filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.5)); }
@keyframes cookie-drop { from { transform: translateY(-60vh) rotate(-260deg); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .eruption.rumble { animation: none; }
  .hunt-tab.all-found { animation: none; }
}

/* --- the cookie terms and conditions gate --- */
.tnc {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
}
.tnc-panel {
  width: min(580px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: #1b0805;
  border: 2px solid var(--orange);
  box-shadow: var(--stamp);
  padding: 18px 20px;
}
.tnc-panel h4 {
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  text-transform: uppercase;
  color: #000;
}
.tnc-sub { font-size: 11px; color: #7c6a52; margin-top: 2px; }
.tnc-box {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #fffaf0;
  border: 1px solid #cdbb9a;
  padding: 14px 16px;
  margin: 12px 0;
  font-size: 11px;
  line-height: 1.55;
  text-align: justify;
  color: #2b1a12;
}
.tnc-box h6 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin: 12px 0 3px; color: #000; }
.tnc-box h6:first-child { margin-top: 0; }
.tnc-box p { font-size: 11px; color: #2b1a12; }
.tnc-end { text-align: center; font-weight: 800; margin-top: 14px; }
.tnc-actions { display: flex; gap: 12px; align-items: center; }
.tnc-actions .btn { margin: 0; font-size: 14px; padding: 9px 22px; }
.tnc-actions .btn.ghost { color: var(--red-deep); border-color: var(--red-deep); }
.tnc-actions .btn.solid[disabled] { opacity: 0.4; cursor: not-allowed; }
.tnc-actions .btn.solid[disabled]:hover { background: var(--orange); border-color: var(--orange); color: var(--cream); transform: skewX(-12deg); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55); }
.tnc-note { font-size: 10px; color: #7c6a52; margin-top: 8px; }

/* === CLICKY PRESS STATES ===
   Every button physically presses into its hard shadow on click:
   nudge toward the shadow offset, shadow shrinks to match. */
.btn:active,
.btn.solid:active,
.btn.ghost:active {
  transform: skewX(-12deg) translate(4px, 4px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  transition-duration: 0.06s;
}
.nav-links a:active,
.nav-links a.active:active {
  transform: skewX(-14deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
  transition-duration: 0.06s;
}
.hero-social a:active,
.footer-social a:active {
  transform: skewX(-12deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  transition-duration: 0.06s;
}
.hunt-tab:active {
  transform: skewX(-12deg) translate(3px, 3px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
  transition-duration: 0.06s;
}
.hunt-erupt:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
  transition-duration: 0.06s;
}
.brand:active { transform: skewX(-14deg) translate(2px, 2px); }
.wordmark:active .wm-main { text-shadow:
  -1.5px 0 0 var(--black), 1.5px 0 0 var(--black),
  0 -1.5px 0 var(--black), 0 1.5px 0 var(--black),
  1px 1px 0 rgba(0, 0, 0, 0.55); }
.team-card:active { transform: rotate(0deg) translate(4px, 5px); box-shadow: 3px 3px 0 rgba(143, 32, 22, 0.85); }
.sticker:active { transform: scale(0.94) !important; transition-duration: 0.06s; }

/* === WONK TOGGLE ===
   Every tilted "sticker" element straightens up when clicked and
   goes wonky again on the next click. Hunt stickers and the footer
   mascot are exempt - their clicks belong to the minigame. */
.block-media img, .team-card, .gallery img { cursor: pointer; }
.block-media img.straightened,
.block.flip .block-media img.straightened,
.team-card.straightened,
.team-grid .team-card:nth-child(even).straightened,
.gallery img.straightened,
.gallery figure:nth-child(even) img.straightened,
.sponsor-logos li.straightened,
.sponsor-logos li:nth-child(even).straightened { transform: rotate(0deg); }
/* keep the hover lift/zoom alive while straightened */
.block-media img.straightened:hover { transform: rotate(0deg) scale(1.02); }
.team-card.straightened:hover { transform: rotate(0deg) translateY(-5px); }
.gallery img.straightened:hover { transform: rotate(0deg) scale(1.03); }
.sponsor-logos li.straightened:hover { transform: rotate(0deg) translateY(-4px); }
/* and the clicky press-in */
.team-card.straightened:active { transform: rotate(0deg) translate(4px, 5px); }

/* === EASTER-EGG: WORLD ALIGNMENT + POST-COOKIE MINIGAMES ===
   Everything below is reachable only through the sticker-hunt egg.
   Nothing here changes the site for a visitor who never plays. */

/* Smooth the site-wide snap-to-true when the calibration is won. */
body.world-aligned .block-media img,
body.world-aligned .team-card,
body.world-aligned .gallery img,
body.world-aligned .sponsor-logos li { transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1); }

/* --- humorous toast --- */
.vx-toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translate(-50%, 30px);
  z-index: 400;
  max-width: min(460px, 92vw);
  background: #1b0805; color: var(--cream);
  border: 2px solid var(--orange);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
  padding: 12px 18px; font-size: 13px; line-height: 1.4;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.vx-toast.show { opacity: 1; transform: translate(-50%, 0); }
.vx-toast b { color: var(--yellow); }

.hunt-done-line { font-size: 12px; color: rgba(255, 242, 220, 0.85); margin-bottom: 6px; }

/* --- Provision 11: rock-paper-scissors --- */
.rps-panel { text-align: center; }
.rps-score {
  display: flex; justify-content: center; gap: 26px;
  font-family: var(--display); font-style: italic; text-transform: uppercase;
  font-size: 15px; margin: 12px 0 6px;
}
.rps-score .rps-you { color: var(--red-deep); }
.rps-score .rps-bot { color: #1b0805; }
.rps-stage {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 10px 0 4px;
}
.rps-hand { font-size: 46px; line-height: 1; }
.rps-hand-you { transform: scaleX(-1); }
.rps-vs { font-family: var(--display); font-style: italic; color: #7c6a52; font-size: 14px; }
.rps-hand.shake { animation: rps-shake 0.4s ease; }
@keyframes rps-shake {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-6px); }
}
.rps-call { font-size: 12px; color: #2b1a12; min-height: 2.6em; margin: 6px 0 10px; }
.rps-moves { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rps-moves .btn { margin: 0; font-size: 13px; padding: 8px 16px; }
.rps-move { color: var(--red-deep); border-color: var(--red-deep); }

/* --- The Calibration: freeze the level bar --- */
.calib-panel { text-align: center; }
.calib-gauge {
  position: relative;
  width: min(320px, 80vw); height: 150px;
  margin: 16px auto 8px;
  display: flex; align-items: flex-end; justify-content: center;
}
/* the level target zone, a faint wedge around true vertical */
.calib-zone {
  position: absolute; left: 50%; bottom: 8px;
  width: 2px; height: 118px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to top, rgba(143, 32, 22, 0.25) 0 6px, transparent 6px 12px);
}
.calib-zone::before {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: calc(var(--tol, 6) * 4px); height: 118px;
  transform: translateX(-50%);
  background: rgba(250, 204, 87, 0.16);
  border-left: 1px dashed rgba(143, 32, 22, 0.35);
  border-right: 1px dashed rgba(143, 32, 22, 0.35);
}
.calib-bar {
  position: absolute; bottom: 8px;
  width: 12px; height: 118px;
  transform-origin: bottom center;
  background: var(--red); border: 2px solid #1b0805;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}
.calib-bar::after {
  content: ''; position: absolute; top: -9px; left: 50%;
  width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg);
  background: var(--yellow); border: 2px solid #1b0805;
}
.calib-bar.level { background: var(--yellow); }
.calib-bar.level::after { background: var(--red); }
.calib-readout {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-style: italic; font-size: 18px; color: #7c6a52;
}
.calib-readout.good { color: #1a7a3a; }
.calib-readout.bad { color: var(--red); }
.calib-progress { font-size: 12px; color: #2b1a12; margin: 6px 0 12px; min-height: 1.4em; }
.calib-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.calib-actions .btn { margin: 0; font-size: 13px; padding: 9px 20px; }

/* Readability guard: these egg panels are always light. Opt out of any
   forced-dark inversion and never inherit the site's cream body text. */
.tnc-panel, .codex-panel, .arcade-panel,
.simon-panel, .whack-panel {
  color-scheme: light;
  background-color: var(--cream);
  color: #1b0805;
}

/* --- The Volcanix Codex: an illuminated, chaptered field manual --- */
.codex-panel {
  width: min(760px, 96vw);
  height: min(620px, 92vh);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(229, 124, 65, 0.10), transparent 60%),
    var(--cream);
}
.codex-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 2px solid var(--orange);
}
.codex-head h4 { margin: 0; }
.codex-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.codex-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 8px; border: 1px solid #cdbb9a; color: #7c6a52;
  background: #fffaf0;
}
.codex-badge.on { color: var(--cream); background: var(--red-deep); border-color: var(--red-deep); }
.codex-close {
  flex: none; width: 34px; height: 34px; line-height: 1;
  font-size: 24px; color: var(--red-deep);
  background: transparent; border: 2px solid transparent; cursor: pointer;
}
.codex-close:hover { border-color: var(--red-deep); }

.codex-body { display: flex; min-height: 0; flex: 1; }
.codex-nav {
  flex: none; width: 168px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 8px; overflow-y: auto;
  background: rgba(143, 32, 22, 0.05);
  border-right: 1px solid #cdbb9a;
}
.codex-chap {
  text-align: left; font-size: 12px; font-weight: 700;
  padding: 9px 10px; cursor: pointer;
  color: #5a4634; background: transparent; border: none;
  border-left: 3px solid transparent;
}
.codex-chap:hover { color: var(--red-deep); background: rgba(229, 124, 65, 0.10); }
.codex-chap.active { color: var(--red-deep); background: rgba(229, 124, 65, 0.16); border-left-color: var(--orange); }

.codex-page {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px 24px;
  font-size: 13px; line-height: 1.65; color: #2b1a12; text-align: left;
}
.codex-page.turn { animation: codex-turn 0.4s ease; }
@keyframes codex-turn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.codex-page b { color: var(--red-deep); }
.codex-page code {
  font-family: var(--mono, monospace); font-size: 11px;
  background: rgba(143, 32, 22, 0.08); padding: 1px 5px;
}
.codex-page-title {
  font-family: var(--display); font-style: italic; text-transform: uppercase;
  font-size: 22px; color: #000; margin: 0 0 12px;
}
.codex-page p { margin: 0 0 11px; }
.codex-drop {
  float: left; font-family: var(--display); font-style: italic;
  font-size: 52px; line-height: 0.82; color: var(--red);
  margin: 4px 10px 0 0;
}
.codex-aside {
  font-size: 11.5px; color: #7c6a52; font-style: italic;
  border-left: 2px solid var(--orange); padding-left: 12px;
}
.codex-quote {
  margin: 0 0 14px; padding: 14px 16px;
  background: rgba(143, 32, 22, 0.06); border-left: 4px solid var(--red);
  font-family: var(--display); font-style: italic; font-size: 16px; line-height: 1.5; color: #1b0805;
}
.codex-quote cite { display: block; margin-top: 8px; font-size: 12px; font-style: normal; color: #7c6a52; }
.codex-quote cite span { color: var(--red-deep); font-weight: 700; letter-spacing: 0.04em; }
.codex-creed, .codex-sign {
  font-family: var(--display); font-style: italic; color: var(--red-deep);
  text-align: center; font-size: 15px; line-height: 1.7; margin: 14px 0;
}
.codex-sign { color: #7c6a52; text-align: right; font-size: 14px; }

.codex-bestiary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }
.codex-beast {
  display: flex; gap: 10px; margin: 0; padding: 10px;
  background: #fffaf0; border: 1px solid #cdbb9a;
}
.codex-beast img {
  width: 46px; height: 46px; object-fit: contain; flex: none;
  filter: grayscale(1) opacity(0.4);
}
.codex-beast.got img { filter: none; }
.codex-beast figcaption { display: flex; flex-direction: column; gap: 1px; }
.codex-beast-name { font-weight: 800; color: #000; font-size: 13px; }
.codex-beast-epi { font-family: var(--display); font-style: italic; color: var(--red); font-size: 12px; }
.codex-beast-dom { font-size: 10.5px; color: #7c6a52; }
.codex-beast-creed { font-size: 11px; font-style: italic; color: #2b1a12; margin-top: 2px; }

.codex-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid #cdbb9a;
}
/* ghost buttons on the cream egg panels need dark text, not cream */
.codex-foot .btn.ghost,
.calib-actions .btn.ghost,
.rps-moves .btn.ghost { color: var(--red-deep); border-color: var(--red-deep); }
.codex-foot .btn { margin: 0; font-size: 13px; padding: 8px 18px; }
.codex-foot .btn:disabled { opacity: 0.35; cursor: not-allowed; }
.codex-count { font-size: 12px; color: #7c6a52; font-style: italic; }

@media (max-width: 560px) {
  .codex-body { flex-direction: column; }
  .codex-nav {
    width: auto; flex-direction: row; overflow-x: auto;
    border-right: none; border-bottom: 1px solid #cdbb9a; padding: 8px;
  }
  .codex-chap { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .codex-chap.active { border-left: none; border-bottom-color: var(--orange); }
  .codex-bestiary { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .codex-page.turn { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vx-toast { transition: opacity 0.35s ease; transform: translate(-50%, 0); }
  .rps-hand.shake { animation: none; }
  body.world-aligned .block-media img,
  body.world-aligned .team-card,
  body.world-aligned .gallery img,
  body.world-aligned .sponsor-logos li { transition: none; }
}

/* === THE VOLCANO ARCADE + ITS GAMES ================================= */
.hunt-tab.grand { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow), 6px 6px 0 rgba(0,0,0,0.55); }

.arcade-panel { width: min(720px, 96vw); padding: 0; overflow: hidden; }
.arcade-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 2px solid var(--orange);
}
.arcade-head h4 { margin: 0; }
.arcade-sub { font-size: 12px; color: #7c6a52; margin-top: 4px; }
.arcade-sub b { color: var(--red-deep); }
.arcade-panel.is-grand { background: radial-gradient(120% 90% at 50% 0%, rgba(250,204,87,0.22), var(--cream) 62%); }

.arcade-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 16px 18px;
}
.arcade-tile {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 14px; cursor: pointer;
  background: #fffaf0; border: 2px solid #cdbb9a; color: #1b0805;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.arcade-tile:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: 5px 6px 0 rgba(0,0,0,0.3); }
.arcade-tile.cleared { border-color: var(--red); background: #fff6ea; }
.arcade-ico { font-size: 30px; line-height: 1; }
.arcade-name { font-family: var(--display); font-style: italic; text-transform: uppercase; font-size: 16px; color: #000; }
.arcade-blurb { font-size: 11.5px; color: #5a4634; line-height: 1.4; }
.arcade-status {
  margin-top: 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--red-deep);
}
.arcade-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid #cdbb9a;
}
.arcade-foot .btn { margin: 0; font-size: 13px; padding: 8px 18px; }
.arcade-foot .btn.ghost { color: var(--red-deep); border-color: var(--red-deep); }

/* --- Stabiliser Sequence (Simon) --- */
.simon-panel { text-align: center; }
.simon-status { font-size: 12px; color: #2b1a12; min-height: 1.5em; margin: 8px 0 12px; }
.simon-status b { color: var(--red-deep); }
.simon-pads {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  width: min(280px, 78vw); margin: 0 auto 16px;
}
.simon-pad {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  padding: 12px; cursor: pointer;
  background: #fffaf0; border: 2px solid #cdbb9a;
  transition: transform 0.08s ease, filter 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.simon-pad:nth-child(1) { border-color: var(--red); }
.simon-pad:nth-child(2) { border-color: var(--yellow); }
.simon-pad:nth-child(3) { border-color: var(--orange); }
.simon-pad:nth-child(4) { border-color: var(--red-deep); }
.simon-pad img { max-width: 76%; max-height: 76%; filter: grayscale(1) opacity(0.55); }
.simon-pad:disabled { cursor: default; }
.simon-pad.lit { background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow), 0 0 22px rgba(250,204,87,0.8); transform: scale(1.05); }
.simon-pad.lit img { filter: none; }
.simon-pad:not(:disabled):hover { box-shadow: 4px 4px 0 rgba(0,0,0,0.25); }

/* --- Wonk Patrol (whack-a-mole) --- */
.whack-panel { text-align: center; }
.whack-hud {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--display); font-style: italic; text-transform: uppercase;
  font-size: 14px; color: var(--red-deep); margin: 10px 4px 12px;
}
.whack-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: min(320px, 82vw); margin: 0 auto 16px;
}
.whack-cell {
  aspect-ratio: 1 / 1; cursor: pointer; overflow: hidden;
  background: #f1e2c8; border: 2px solid #cdbb9a; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.whack-cell img { max-width: 84%; max-height: 84%; opacity: 0; transform: scale(0.4); transition: transform 0.12s ease, opacity 0.12s ease; }
.whack-cell.up { background: #fff6ea; border-color: var(--orange); }
.whack-cell.up img { opacity: 1; transform: scale(1); }
.whack-cell.hit { background: var(--yellow); }

@media (max-width: 520px) {
  .arcade-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-tile, .simon-pad, .whack-cell img { transition: none; }
}