:root {
  /* sky / ocean / sand */
  --sky-1: #6EC5FF;
  --sky-2: #B3E0FF;
  --ocean-1: #2BB4D8;
  --ocean-2: #0D7A99;
  --foam: #FFFFFF;
  --sand-1: #F8DA92;
  --sand-2: #ECC476;
  /* cream / wood card chrome */
  --cream: #FFF6DC;
  --cream-2: #FBE8B5;
  --wood: #6A3F1E;
  --wood-2: #8B5A2B;
  --wood-3: rgba(106, 63, 30, 0.4);
  /* ink on cream */
  --ink: #2A1810;
  --ink-dim: #6A3F1E;
  --ink-dimmer: #8C6F45;
  /* accents */
  --hot: #FF3D7A;
  --hot-2: #C42460;
  --coral: #FF7757;
  --sun: #FFE57F;
  --sun-glow: rgba(255, 229, 127, 0.55);
  --danger: #C13442;
  --warn: #C76A1F;

  --pixel: "VT323", ui-monospace, "Courier New", monospace;
  --display: "Press Start 2P", "VT323", monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 19px;
  line-height: 1.3;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background:
    linear-gradient(
      to bottom,
      var(--sky-1) 0%,
      var(--sky-2) 50%,
      var(--ocean-1) 50%,
      var(--ocean-2) 78%,
      var(--sand-1) 78%,
      var(--sand-2) 100%
    );
  background-attachment: fixed;
}
a { color: var(--hot-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--hot); }
code {
  font-family: var(--pixel);
  font-size: 1em;
  background: rgba(106, 63, 30, 0.12);
  padding: 0 0.35rem;
  color: var(--wood);
  border: 1px solid rgba(106, 63, 30, 0.25);
  border-radius: 0;
}

/* ============ BEACH BACKDROP ============ */
.beach-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Pixel sun, upper right. Inline SVG keeps the edges crisp at any size. */
.beach-sun {
  position: absolute;
  top: 6vh;
  right: 8vw;
  width: 96px;
  height: 96px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><g fill='%23FFE57F'><rect x='4' y='1' width='8' height='14'/><rect x='2' y='2' width='12' height='12'/><rect x='1' y='4' width='14' height='8'/></g></svg>");
  background-size: 100% 100%;
  filter: drop-shadow(0 0 28px var(--sun-glow));
  animation: sunBob 5s ease-in-out infinite;
}
.beach-sun::before {
  content: "";
  position: absolute;
  inset: -36px;
  background: radial-gradient(circle, var(--sun-glow) 0%, transparent 70%);
  z-index: -1;
}
@keyframes sunBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Drifting pixel clouds */
.cloud {
  position: absolute;
  width: 84px;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6' shape-rendering='crispEdges'><g fill='%23FFFFFF'><rect x='2' y='3' width='16' height='3'/><rect x='4' y='2' width='12' height='1'/><rect x='5' y='1' width='4' height='1'/><rect x='11' y='1' width='5' height='1'/><rect x='6' y='0' width='2' height='1'/><rect x='12' y='0' width='3' height='1'/></g><g fill='%23E8F4FF'><rect x='3' y='5' width='14' height='1'/></g></svg>");
  background-size: 100% 100%;
  animation: cloudDrift linear infinite;
  opacity: 0.95;
}
.cloud.c1 { top: 9%;  animation-duration: 95s;  animation-delay: -10s; }
.cloud.c2 { top: 16%; transform: scale(0.8); animation-duration: 75s; animation-delay: -55s; }
.cloud.c3 { top: 24%; transform: scale(1.3); animation-duration: 130s; animation-delay: -85s; }
@keyframes cloudDrift {
  from { left: -15%; }
  to   { left: 115%; }
}

/* A single pixel server floating inside a bright lifebuoy — mini-rack chassis 
   nested inside a circular orange-and-white marine rescue ring. */
/* A pixel server nestled crookedly on top of a floating lifebuoy ring */
/* Pixel server nestled inside a lifebuoy — the front ring covers the bottom edge of the server chassis */
.server {
  position: absolute;
  bottom: 30vh;
  left: 8vw;
  width: 120px;
  height: 120px;
  /* Multi-layered SVG: Background Buoy -> Server Chassis -> Foreground Buoy Rim */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><g fill='%231a3344' fill-opacity='0.25'><rect x='3' y='21' width='18' height='1'/><rect x='5' y='22' width='14' height='1'/></g><g fill='%23d35400'><rect x='7' y='14' width='10' height='2'/><rect x='5' y='15' width='2' height='1'/><rect x='17' y='15' width='2' height='1'/></g><g fill='%23e67e22'><rect x='8' y='15' width='8' height='1'/></g><g fill='%23ffffff'><rect x='10' y='14' width='4' height='2'/></g><g fill='%232a2a30'><rect x='6' y='3' width='12' height='13'/><rect x='5' y='4' width='1' height='11'/><rect x='7' y='2' width='10' height='1'/></g><g fill='%23151518'><rect x='7' y='4' width='10' height='3'/><rect x='7' y='8' width='10' height='3'/><rect x='7' y='12' width='10' height='3'/></g><g fill='%234ade80'><rect x='8' y='5' width='1' height='1'/><rect x='8' y='9' width='1' height='1'/></g><g fill='%23ff3d7a'><rect x='10' y='5' width='1' height='1'/></g><g fill='%23393940'><rect x='12' y='5' width='4' height='1'/><rect x='11' y='9' width='5' height='1'/></g><g fill='%23d35400'><rect x='5' y='16' width='14' height='5'/><rect x='4' y='17' width='16' height='3'/></g><g fill='%23e67e22'><rect x='6' y='17' width='12' height='3'/><rect x='5' y='18' width='14' height='1'/></g><g fill='%23ffffff'><rect x='10' y='20' width='4' height='1'/><rect x='3' y='18' width='2' height='1'/><rect x='19' y='18' width='2' height='1'/></g><g fill='%23bdc3c7'><rect x='10' y='17' width='4' height='1'/></g></svg>");
  background-size: 100% 100%;
  filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.15));
  animation: serverFloat 3.5s ease-in-out infinite;
  z-index: 1;
}

/* Bob and rock like a buoy adrift in the swell. */
@keyframes serverFloat {
  0%, 100% { transform: translateY(0)    rotate(-3deg); }
  50%      { transform: translateY(-10px) rotate(4deg);  }
}

/* Blinking red alert LED. Positioned cleanly over the red pixel at (10,5) */
.server .beacon {
  position: absolute;
  left: 41.6%;
  top: 20.8%;
  width: 5px;
  height: 5px;
  background: #FF3D7A;
  box-shadow: 0 0 6px #FF3D7A, 0 0 12px rgba(255, 61, 122, 0.8);
  animation: beaconBlink 1s steps(1) infinite;
}

@keyframes beaconBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}
/* Sparkles on the water */
.sparkle {
  position: absolute;
  left: 0; right: 0;
  bottom: 28vh;
  height: 18vh;
  background-image:
    radial-gradient(circle at 12% 30%, white 1px, transparent 2px),
    radial-gradient(circle at 28% 60%, white 1px, transparent 2px),
    radial-gradient(circle at 55% 20%, white 1px, transparent 2px),
    radial-gradient(circle at 73% 75%, white 1px, transparent 2px),
    radial-gradient(circle at 88% 40%, white 1px, transparent 2px),
    radial-gradient(circle at 38% 85%, white 1px, transparent 2px),
    radial-gradient(circle at 62% 50%, white 1px, transparent 2px);
  opacity: 0.7;
  animation: sparkle 3s steps(2) infinite;
}
@keyframes sparkle { 0%,100% { opacity: 0.35; } 50% { opacity: 0.85; } }

/* One single foam band at the shoreline — stretched to full viewport width
   (no horizontal tiling). The SVG itself is wide (256x6 viewBox) with the
   foam crest variation baked across its entire length, so when stretched
   it reads as one cohesive wave rather than a repeating tile. Drifts
   slightly forward and fades out in a loop. */
.splash {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20vh;
  height: 36px;
  /* Upgraded Heavy Foam Pixel-Art Wave */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 12' preserveAspectRatio='none' shape-rendering='crispEdges'><g fill='%232BB4D8' fill-opacity='0.85'><rect x='0' y='6' width='128' height='6'/><rect x='0' y='5' width='128' height='1'/></g><g fill='%2378D2E8' fill-opacity='0.9'><rect x='0' y='4' width='128' height='2'/><rect x='2' y='3' width='12' height='1'/><rect x='16' y='3' width='18' height='1'/><rect x='50' y='3' width='20' height='1'/><rect x='72' y='3' width='16' height='1'/><rect x='116' y='3' width='8' height='1'/></g><g fill='%23FFFFFF'><rect x='0' y='3' width='128' height='2'/><rect x='3' y='2' width='14' height='2'/><rect x='22' y='2' width='16' height='2'/><rect x='42' y='1' width='12' height='3'/><rect x='45' y='0' width='6' height='1'/><rect x='58' y='2' width='22' height='2'/><rect x='84' y='1' width='14' height='3'/><rect x='87' y='0' width='8' height='1'/><rect x='102' y='2' width='18' height='2'/></g><g fill='%230D7A99' fill-opacity='0.7'><rect x='0' y='11' width='128' height='1'/></g></svg>");
  background-repeat: repeat-x;
  background-size: auto 100%;
  animation: splash 4s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

@keyframes splash {
  0%, 100% { transform: translateY(-6px) scaleY(-1); }
  50%      { transform: translateY(14px) scaleY(-1); }
}

/* Wet-sand patch under the wave's forward position. Static — sits at a
   constant darkness so the shoreline reads as permanently damp. The
   gradient softens the bottom edge so wet sand fades into dry sand
   instead of leaving a hard horizontal line. */
.wetsand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16.6vh;
  height: 56px;
  background: linear-gradient(
    to bottom,
    rgba(140, 88, 36, 0.7) 0%,
    rgba(140, 88, 36, 0.5) 50%,
    rgba(140, 88, 36, 0) 100%
  );
  pointer-events: none;
}

/* Small island in the ocean — sand mound + single palm tree (SpongeBob
   style). Static; the world around it animates. */
.island {
  position: absolute;
  bottom: calc(49vh);
  right: 7vw;
  width: 120px;
  height: 120px;
  /* Optimized Palm Tree Pixel Island */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'><g fill='%235bc0be'><rect x='2' y='29' width='28' height='2'/></g><g fill='%23f1c40f'><rect x='4' y='26' width='24' height='3'/><rect x='8' y='24' width='16' height='2'/></g><g fill='%23e67e22'><rect x='6' y='27' width='20' height='2'/></g><g fill='%23795548'><rect x='15' y='22' width='3' height='2'/><rect x='14' y='19' width='3' height='3'/><rect x='13' y='15' width='3' height='4'/><rect x='14' y='12' width='2' height='3'/></g><g fill='%235d4037'><rect x='15' y='22' width='1' height='2'/><rect x='14' y='19' width='1' height='3'/><rect x='13' y='15' width='1' height='4'/><rect x='14' y='12' width='1' height='3'/></g><g fill='%23d35400'><rect x='13' y='11' width='2' height='2'/><rect x='16' y='12' width='1' height='1'/></g><g fill='%2327ae60'><rect x='10' y='10' width='11' height='2'/><rect x='7' y='11' width='4' height='2'/><rect x='5' y='13' width='3' height='2'/><rect x='4' y='15' width='2' height='2'/><rect x='20' y='11' width='4' height='2'/><rect x='23' y='13' width='3' height='2'/><rect x='25' y='15' width='2' height='2'/><rect x='13' y='7' width='5' height='3'/><rect x='11' y='5' width='3' height='3'/><rect x='9' y='4' width='3' height='2'/><rect x='16' y='5' width='3' height='3'/><rect x='19' y='4' width='3' height='2'/></g><g fill='%232ecc71'><rect x='11' y='10' width='8' height='1'/><rect x='8' y='11' width='3' height='1'/><rect x='6' y='13' width='2' height='1'/><rect x='20' y='11' width='3' height='1'/><rect x='23' y='13' width='2' height='1'/><rect x='13' y='8' width='4' height='1'/><rect x='12' y='6' width='2' height='1'/><rect x='16' y='6' width='2' height='1'/></g></svg>");
  background-size: 100% 100%;
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.15));
  z-index: 1;
}

/* Pixel crabs chilling on the sand with a subtle idle breathing effect */
/* Base crab setup */
.crab {
  position: absolute;
  width: 48px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' shape-rendering='crispEdges'><g fill='%235c3a21' fill-opacity='0.25'><rect x='5' y='14' width='14' height='1'/><rect x='7' y='13' width='10' height='1'/></g><g fill='%23b83227'><rect x='3' y='11' width='2' height='3'/><rect x='7' y='12' width='1' height='2'/><rect x='11' y='12' width='1' height='2'/><rect x='16' y='12' width='1' height='2'/><rect x='19' y='11' width='2' height='3'/></g><g fill='%23ff4d4d'><rect x='6' y='7' width='12' height='5'/><rect x='7' y='6' width='10' height='1'/><rect x='5' y='8' width='14' height='3'/></g><g fill='%23ff4d4d'><rect x='2' y='5' width='3' height='3'/><rect x='1' y='4' width='2' height='2'/><rect x='3' y='3' width='2' height='2'/><rect x='19' y='5' width='3' height='3'/><rect x='21' y='4' width='2' height='2'/><rect x='19' y='3' width='2' height='2'/></g><g fill='%23ff4d4d'><rect x='8' y='4' width='1' height='2'/><rect x='15' y='4' width='1' height='2'/></g><g fill='%23ffffff'><rect x='7' y='2' width='3' height='2'/><rect x='14' y='2' width='3' height='2'/></g><g fill='%23000000'><rect x='8' y='3' width='1' height='1'/><rect x='15' y='3' width='1' height='1'/></g></svg>");
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none;
}

/* The crawl animation handles moving left-to-right. 
   The bounce animation adds a fast little side-to-side shuffle while they move!
*/
.crab1 {
  bottom: 8vh;
  animation: crawl-group 30s linear infinite, crab-shuffle 0.2s ease-in-out infinite;
  animation-delay: 0s;
}

.crab2 {
  bottom: 5vh;
  /* Crab 2 starts slightly delayed so it tails behind the leader */
  animation: crawl-group 30s linear infinite, crab-shuffle 0.25s ease-in-out infinite;
  animation-delay: -1.5s; 
}

.crab3 {
  bottom: 11vh;
  /* Crab 3 starts further back to break up the uniform line */
  animation: crawl-group 30s linear infinite, crab-shuffle 0.18s ease-in-out infinite;
  animation-delay: -3s; 
}

/* Moves the crabs completely off-screen left (-10vw) 
   all the way to completely off-screen right (110vw)
*/
@keyframes crawl-group {
  0% {
    left: -10vw;
  }
  100% {
    left: 110vw;
  }
}

/* This creates a rapid skittering / sideways waddle effect 
   by tilting and scaling them slightly as they travel.
*/
@keyframes crab-shuffle {
  0%, 100% { 
    transform: rotate(0deg) scaleY(1); 
  }
  50% { 
    transform: rotate(4deg) scaleY(0.95); 
  }
}


/* ============ CONTENT LAYER ============ */
.content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* NAV */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.logo {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--cream);
  cursor: pointer;
  user-select: none;
  text-shadow: 2px 2px 0 var(--wood), -1px -1px 0 var(--wood), 1px -1px 0 var(--wood), -1px 1px 0 var(--wood);
}
.logo .caret { color: var(--sun); }
.logo .sub {
  font-family: var(--pixel);
  font-size: 19px;
  font-weight: 400;
  color: var(--cream);
  margin-left: 12px;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 var(--wood);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pixel);
  font-size: 18px;
  flex-wrap: wrap;
}
.nav-link {
  color: var(--cream);
  padding: 5px 14px;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 var(--wood);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.nav-link:hover { color: white; text-decoration: none; }
.nav-link.active {
  color: var(--ink);
  background: var(--cream);
  border-color: var(--wood);
  box-shadow: 3px 3px 0 var(--wood);
  text-shadow: none;
}
.nav-link.active:hover { color: var(--ink); }
.nav-link.cta {
  background: var(--hot);
  color: white;
  border-color: var(--wood);
  box-shadow: 3px 3px 0 var(--wood);
  text-shadow: 1px 1px 0 var(--hot-2);
  padding: 5px 16px;
}
.nav-link.cta:hover {
  background: var(--hot-2);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--wood);
  color: white;
}

main { padding: 1.5rem 1.5rem 4rem; }
.page { max-width: 1100px; margin: 0 auto; }

/* HERO + NUMBERS */
.hero {
  max-width: 900px;
  margin: 40px auto 0;
  text-align: center;
  padding: 0 16px;
}
h1.hero-title {
  font-family: var(--display);
  font-size: clamp(1.1rem, 3.2vw, 1.9rem);
  line-height: 1.35;
  margin: 0 0 24px;
  color: var(--cream);
  text-shadow: 3px 3px 0 var(--wood);
  letter-spacing: 0.02em;
}
.hero-sub {
  font-family: var(--pixel);
  font-size: 19px;
  color: var(--ink);
  line-height: 1.45;
  max-width: 620px;
  margin: 0 auto 40px;
  background: rgba(255, 246, 220, 0.92);
  border: 3px solid var(--wood);
  box-shadow: 4px 4px 0 var(--wood-3);
  padding: 14px 18px;
}
.combined-label {
  font-family: var(--display);
  font-size: 10px;
  color: var(--cream);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-shadow: 2px 2px 0 var(--wood);
}
.hero-number {
  font-family: var(--display);
  font-size: clamp(1.8rem, 7vw, 4.8rem);
  line-height: 1.1;
  color: var(--hot);
  text-shadow:
    4px 4px 0 var(--wood),
    8px 8px 0 var(--wood-3);
  margin-bottom: 32px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.hero-number.sm {
  font-size: clamp(1.5rem, 5.5vw, 3.6rem);
  text-shadow:
    3px 3px 0 var(--wood),
    6px 6px 0 var(--wood-3);
}

.stat-row {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.stat {
  background: var(--cream);
  border: 3px solid var(--wood);
  box-shadow: 4px 4px 0 var(--wood-3);
  padding: 10px 18px;
  min-width: 140px;
  text-align: center;
}
.stat .n {
  font-family: var(--display);
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat .l {
  font-family: var(--pixel);
  font-size: 15px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.4rem;
}
.status-line {
  font-family: var(--pixel);
  font-size: 15px;
  color: var(--cream);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 24px;
  text-shadow: 1px 1px 0 var(--wood);
}

/* Per-model breakdown under the home hero number */
.model-breakdown {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: -4px auto 32px;
}
.model-stat {
  text-align: center;
  background: var(--cream-2);
  border: 3px solid var(--wood);
  box-shadow: 4px 4px 0 var(--wood-3);
  padding: 10px 18px;
  min-width: 130px;
}
.model-stat .m-label {
  font-family: var(--display);
  font-size: 10px;
  color: var(--ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.model-stat .m-cost {
  font-family: var(--display);
  font-size: 13px;
  color: var(--hot-2);
  font-variant-numeric: tabular-nums;
  text-shadow: 2px 2px 0 var(--wood-3);
}

/* Leaderboard model-family filter tabs */
.model-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 1.25rem auto 0;
  padding: 0 16px;
  font-family: var(--pixel);
  font-size: 18px;
}
.model-tab {
  color: var(--ink);
  padding: 6px 18px;
  cursor: pointer;
  background: var(--cream);
  border: 3px solid var(--wood);
  box-shadow: 3px 3px 0 var(--wood-3);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0.06em;
  transition: transform 80ms ease, box-shadow 80ms ease, background 80ms;
}
.model-tab:hover {
  background: var(--cream-2);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--wood-3);
}
.model-tab.active {
  color: white;
  background: var(--hot);
  text-shadow: 1px 1px 0 var(--hot-2);
  box-shadow: 3px 3px 0 var(--wood);
}

/* CTAs */
.cta-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.btn {
  font-family: var(--pixel);
  font-size: 18px;
  letter-spacing: 0.04em;
  padding: 9px 20px;
  cursor: pointer;
  border: 3px solid var(--wood);
  box-shadow: 4px 4px 0 var(--wood);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  background: var(--cream);
  transition: transform 80ms ease, box-shadow 80ms ease, background 80ms;
}
.btn:hover {
  text-decoration: none;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--wood);
  background: var(--cream-2);
}
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--wood);
}
.btn-primary {
  background: var(--hot);
  color: white;
  text-shadow: 1px 1px 0 var(--hot-2);
}
.btn-primary:hover { background: var(--hot-2); }
.btn-ghost {
  background: var(--cream);
  color: var(--ink);
}
.btn-danger {
  background: var(--danger);
  color: white;
  text-shadow: 1px 1px 0 #7a1c25;
}
.btn-danger:hover { background: #a82934; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: 4px 4px 0 var(--wood); }
.btn.sm { padding: 5px 12px; font-size: 16px; box-shadow: 3px 3px 0 var(--wood); }
.btn.sm:hover { box-shadow: 1px 1px 0 var(--wood); }

/* STEPS */
.steps {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.step {
  padding: 22px 22px 24px;
  background: var(--cream);
  border: 3px solid var(--wood);
  box-shadow: 5px 5px 0 var(--wood-3);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.step:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--wood-3); }
.step-title { font-family: var(--display); font-size: 12px; margin: 0 0 12px; color: var(--ink); }
.step-title .num { color: var(--hot); margin-right: 6px; }
.step-desc { font-family: var(--pixel); font-size: 17px; color: var(--ink-dim); line-height: 1.4; margin: 0; }

/* CARD (forms, generic containers) */
.card {
  background: var(--cream);
  border: 4px solid var(--wood);
  box-shadow: 6px 6px 0 var(--wood-3);
  padding: 1.75rem;
  max-width: 480px;
  margin: 2rem auto;
  display: grid;
  gap: 1rem;
}
.card.wide { max-width: 720px; }
/* Grid items default to min-width: auto. A long unbroken line in a child
   <pre> would otherwise force the card past max-width. min-width: 0 lets
   the child overflow (with its own scroll) instead. */
.card > * { min-width: 0; }
.card h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.card .sub {
  margin: -0.25rem 0 0.5rem;
  color: var(--ink-dim);
  font-family: var(--pixel);
  font-size: 17px;
  line-height: 1.4;
}
.card .row { display: grid; gap: 0.3rem; }
.card .row label {
  font-family: var(--pixel);
  font-size: 14px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card input {
  padding: 0.55rem 0.85rem;
  border: 3px solid var(--wood);
  background: #FFFEF7;
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 18px;
  width: 100%;
  box-shadow: inset 2px 2px 0 rgba(106, 63, 30, 0.12);
  transition: border-color 100ms ease, box-shadow 100ms ease;
  border-radius: 0;
}
.card input:focus {
  outline: none;
  border-color: var(--hot);
  box-shadow:
    inset 2px 2px 0 rgba(106, 63, 30, 0.12),
    0 0 0 3px rgba(255, 61, 122, 0.3);
}
.card .err { color: var(--danger); font-family: var(--pixel); font-size: 16px; min-height: 1.2em; }
.card .foot { font-family: var(--pixel); font-size: 16px; color: var(--ink-dim); text-align: center; }

.token-display {
  font-family: var(--pixel);
  font-size: 16px;
  background: #FFFEF7;
  border: 3px solid var(--wood);
  padding: 0.7rem 0.9rem;
  word-break: break-all;
  user-select: all;
  color: var(--ink);
  line-height: 1.45;
  overflow-x: auto;
  max-width: 100%;
  box-shadow: inset 2px 2px 0 rgba(106, 63, 30, 0.1);
  border-radius: 0;
}
.warn-banner {
  border: 3px solid var(--warn);
  background: rgba(255, 199, 102, 0.28);
  padding: 0.7rem 0.9rem;
  font-family: var(--pixel);
  font-size: 16px;
  color: var(--wood);
  line-height: 1.45;
  box-shadow: 3px 3px 0 var(--wood-3);
}

/* Section labels */
.label {
  font-family: var(--display);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* LEADERBOARD */
.board-wrap {
  max-width: 1000px;
  margin: 2rem auto;
  background: var(--cream);
  border: 4px solid var(--wood);
  box-shadow: 6px 6px 0 var(--wood-3);
  overflow: hidden;
}
.board { width: 100%; border-collapse: collapse; }
.board th, .board td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 2px solid rgba(106, 63, 30, 0.18);
  font-variant-numeric: tabular-nums;
  font-family: var(--pixel);
  font-size: 18px;
  color: var(--ink);
}
.board tr:last-child td { border-bottom: none; }
.board th {
  font-family: var(--display);
  font-size: 10px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--cream-2);
  border-bottom: 3px solid var(--wood);
}
.board td.num, .board th.num { text-align: right; }
.board tr.top td.rank { color: var(--hot); font-family: var(--display); font-size: 13px; }
.board tr.me td { background: rgba(255, 229, 127, 0.45); }
.board td.rank { width: 3rem; color: var(--ink-dim); font-family: var(--display); font-size: 12px; }
.board td.handle { color: var(--ink); }
.empty {
  text-align: center;
  color: var(--ink-dim);
  padding: 3rem 1rem;
  font-family: var(--pixel);
  font-size: 18px;
}

/* Dashboard header row */
.me-hdr {
  max-width: 900px;
  margin: 1.5rem auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 16px;
}
.me-hdr .who {
  font-family: var(--pixel);
  font-size: 19px;
  color: var(--cream);
  text-shadow: 1px 1px 0 var(--wood);
}
.me-hdr .who .h { color: var(--sun); font-family: var(--display); font-size: 12px; text-shadow: 2px 2px 0 var(--wood); margin-left: 4px; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form input {
  width: 180px;
  padding: 5px 10px;
  font-size: 17px;
  border: 3px solid var(--wood);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--pixel);
  border-radius: 0;
}
.inline-form input:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 3px rgba(255, 61, 122, 0.3); }

.tokens-section {
  max-width: 720px;
  margin: 3rem auto 0;
  padding: 1.75rem;
  background: var(--cream);
  border: 4px solid var(--wood);
  box-shadow: 6px 6px 0 var(--wood-3);
}
.tokens-section h3 { margin: 0 0 0.5rem; font-family: var(--display); font-size: 13px; color: var(--ink); }
.tokens-section p { margin: 0 0 1rem; font-family: var(--pixel); font-size: 17px; color: var(--ink-dim); line-height: 1.45; }

.disclaimer {
  font-family: var(--pixel);
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.4;
  max-width: 540px;
  margin: 28px auto 0;
  padding: 10px 16px;
  border: 2px dashed var(--wood);
  background: rgba(255, 246, 220, 0.88);
  text-align: center;
}

.hidden { display: none !important; }

@media (max-width: 640px) {
  .nav { padding: 14px 18px; }
  main { padding: 1rem 0.75rem 3rem; }
  .server { width: 96px; height: 56px; bottom: 28vh; right: 22vw; }
  .server .beacon { width: 4px; height: 4px; }
  .island { width: 70px; height: 88px; bottom: 28vh; right: 5vw; }
  .beach-sun { width: 64px; height: 64px; top: 4vh; right: 5vw; }
  html, body { font-size: 17px; }
  .stat { min-width: 110px; padding: 8px 14px; }
  .model-stat { min-width: 100px; padding: 8px 14px; }
}