/* ============================================
   RETRO 8-BIT THEME — VARIABLES & RESET
   All pixel art is original and drawn in code (SVG).
   ============================================ */
:root {
  --ink: #0b0b1a;
  --paper: #f4f1e8;
  --muted: #a6a6c0;
  --red: #e63946;
  --gold: #ffd23f;
  --green: #2f9e44;
  --blue: #3a86ff;
  --font-px: 'Press Start 2P', monospace;
  --font-body: 'Pixelify Sans', 'Trebuchet MS', sans-serif;
  --hud-h: 64px;
}

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

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

body {
  background: #000;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--gold); color: #000; }
:focus-visible { outline: 3px dashed var(--gold); outline-offset: 4px; }

/* Shared NES-style text box */
.box, .section-desc, .skill-card, .demo-card, .sound-card, .timeline-item, .contact-tagline {
  background: var(--ink);
  color: var(--paper);
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px #000, 10px 10px 0 4px rgba(0,0,0,0.35);
}

/* ============================================
   HUD (NAVIGATION)
   ============================================ */
.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  min-height: var(--hud-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 1.25rem;
  background: #000;
  border-bottom: 4px solid #fff;
  font-family: var(--font-px);
  font-size: 10px;
  text-transform: uppercase;
}

.hud-name, .hud-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.hud-name span, .hud-small { font-size: 8px; color: var(--muted); }
.hud-name span { color: var(--gold); }

.hud-coins { display: flex; align-items: center; gap: 6px; }
.hud-coin {
  width: 10px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14' width='10' height='14' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='4' height='1' fill='%235a3500'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%235a3500'/%3E%3Crect x='3' y='1' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%235a3500'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%23fff6c2'/%3E%3Crect x='5' y='2' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%235a3500'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='3' width='3' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='4' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='4' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='5' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='5' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='6' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='6' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='7' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='7' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='8' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='8' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='9' width='7' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%235a3500'/%3E%3Crect x='2' y='10' width='5' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%235a3500'/%3E%3Crect x='2' y='11' width='5' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%235a3500'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%235a3500'/%3E%3Crect x='3' y='12' width='4' height='1' fill='%23d68a10'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%235a3500'/%3E%3Crect x='3' y='13' width='4' height='1' fill='%235a3500'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: coinSpin 0.9s steps(1) infinite;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.1rem;
  margin-left: auto;
}
.nav-links a {
  position: relative;
  display: block;
  padding: 6px 0;
  color: #fff;
  text-decoration: none;
}
.nav-links a::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  margin-top: -4px;
  border-left: 7px solid var(--gold);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0;
}
.nav-links a:hover, .nav-links a.current { color: var(--gold); }
.nav-links a:hover::before, .nav-links a.current::before { opacity: 1; }

.hud-audio { display: flex; gap: 8px; }
.hud-btn {
  position: relative;
  width: 38px; height: 34px;
  background: #000 center / 18px no-repeat;
  border: 3px solid #fff;
  cursor: pointer;
}
#musicToggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='1' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='6' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='7' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='8' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='8' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='9' width='2' height='1' fill='%23ffffff'/%3E%3C/svg%3E"); }
#sfxToggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='2' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='3' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='7' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='8' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E"); }
.hud-btn[aria-pressed="false"] { opacity: 0.6; }
.hud-btn[aria-pressed="false"]::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; top: 50%;
  height: 3px;
  margin-top: -1px;
  background: var(--red);
  transform: rotate(-35deg);
}
.hud-btn[aria-pressed="true"] { border-color: var(--gold); background-color: #2a2200; }

.nav-toggle {
  display: none;
  font-family: var(--font-px);
  font-size: 10px;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  border: 3px solid #fff;
  padding: 9px 10px;
  cursor: pointer;
}

/* ============================================
   WORLDS (SECTIONS)
   ============================================ */
.world {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 7rem 2rem 10rem;
}
.world > :not(.deco) {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.world::before, .world::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 0;
}
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* Title screen — dusk sky */
.w-title {
  min-height: 100vh;
  padding-top: calc(var(--hud-h) + 4rem);
  background: linear-gradient(to bottom,
    #120a2a 0 20%, #1f1048 20% 36%, #3b1a66 36% 50%, #6a2477 50% 62%,
    #a8386f 62% 72%, #e0604f 72% 81%, #f79a4a 81% 89%, #ffc85a 89%);
}
.w-title::before { top: 0; height: 55%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' shape-rendering='crispEdges'%3E%3Crect x='49' y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='12' y='4' width='1' height='1' fill='%23ffd8a8'/%3E%3Crect x='60' y='8' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='30' y='16' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='56' y='17' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='20' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='19' y='29' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='27' y='33' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='60' y='33' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='38' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='60' y='50' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='49' y='54' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='24' y='60' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='34' y='60' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E") repeat 0 0 / 256px 256px; animation: twinkle 3s steps(1) infinite; }
.w-title::after {
  bottom: 0; height: 176px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='1' fill='%233b8a48'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%2325602f'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%233b8a48'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%2325602f'/%3E%3Crect x='7' y='1' width='4' height='1' fill='%233b8a48'/%3E%3Crect x='11' y='1' width='1' height='1' fill='%2325602f'/%3E%3Crect x='12' y='1' width='4' height='1' fill='%233b8a48'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%2325602f'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%2325602f'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='7' y='2' width='2' height='1' fill='%2325602f'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='10' y='2' width='2' height='1' fill='%2325602f'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='13' y='2' width='2' height='1' fill='%2325602f'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='0' y='3' width='16' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='4' width='6' height='1' fill='%234a2f22'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%2333201a'/%3E%3Crect x='7' y='4' width='6' height='1' fill='%234a2f22'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%236b4630'/%3E%3Crect x='14' y='4' width='2' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%234a2f22'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%2333201a'/%3E%3Crect x='2' y='5' width='5' height='1' fill='%234a2f22'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%2333201a'/%3E%3Crect x='8' y='5' width='5' height='1' fill='%234a2f22'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%2333201a'/%3E%3Crect x='14' y='5' width='2' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='6' width='10' height='1' fill='%234a2f22'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%2333201a'/%3E%3Crect x='11' y='6' width='5' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='8' width='16' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='9' width='3' height='1' fill='%234a2f22'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%2333201a'/%3E%3Crect x='4' y='9' width='12' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='10' width='2' height='1' fill='%234a2f22'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%2333201a'/%3E%3Crect x='3' y='10' width='13' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='11' width='16' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%234a2f22'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%236b4630'/%3E%3Crect x='2' y='12' width='14' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='13' width='16' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='14' width='12' height='1' fill='%234a2f22'/%3E%3Crect x='12' y='14' width='1' height='1' fill='%2333201a'/%3E%3Crect x='13' y='14' width='3' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%234a2f22'/%3E%3C/svg%3E") repeat-x left bottom / 48px 48px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' width='64' height='32' shape-rendering='crispEdges'%3E%3Crect x='30' y='2' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='30' y='3' width='1' height='1' fill='%2324123f'/%3E%3Crect x='29' y='4' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='30' y='4' width='1' height='1' fill='%2324123f'/%3E%3Crect x='31' y='4' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='29' y='5' width='3' height='1' fill='%2324123f'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='27' y='6' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='29' y='6' width='3' height='1' fill='%2324123f'/%3E%3Crect x='32' y='6' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='10' y='7' width='1' height='1' fill='%2324123f'/%3E%3Crect x='27' y='7' width='7' height='1' fill='%2324123f'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%2324123f'/%3E%3Crect x='11' y='8' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='25' y='8' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='27' y='8' width='7' height='1' fill='%2324123f'/%3E%3Crect x='34' y='8' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='9' y='9' width='3' height='1' fill='%2324123f'/%3E%3Crect x='25' y='9' width='11' height='1' fill='%2324123f'/%3E%3Crect x='7' y='10' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='9' y='10' width='3' height='1' fill='%2324123f'/%3E%3Crect x='12' y='10' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='23' y='10' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='25' y='10' width='11' height='1' fill='%2324123f'/%3E%3Crect x='36' y='10' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='50' y='10' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='7' y='11' width='7' height='1' fill='%2324123f'/%3E%3Crect x='23' y='11' width='15' height='1' fill='%2324123f'/%3E%3Crect x='50' y='11' width='1' height='1' fill='%2324123f'/%3E%3Crect x='5' y='12' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='7' y='12' width='7' height='1' fill='%2324123f'/%3E%3Crect x='14' y='12' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='21' y='12' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='23' y='12' width='15' height='1' fill='%2324123f'/%3E%3Crect x='38' y='12' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='48' y='12' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='50' y='12' width='1' height='1' fill='%2324123f'/%3E%3Crect x='51' y='12' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='5' y='13' width='11' height='1' fill='%2324123f'/%3E%3Crect x='21' y='13' width='19' height='1' fill='%2324123f'/%3E%3Crect x='48' y='13' width='5' height='1' fill='%2324123f'/%3E%3Crect x='3' y='14' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='5' y='14' width='11' height='1' fill='%2324123f'/%3E%3Crect x='16' y='14' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='20' y='14' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='21' y='14' width='19' height='1' fill='%2324123f'/%3E%3Crect x='40' y='14' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='46' y='14' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='48' y='14' width='5' height='1' fill='%2324123f'/%3E%3Crect x='53' y='14' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='3' y='15' width='15' height='1' fill='%2324123f'/%3E%3Crect x='20' y='15' width='21' height='1' fill='%2324123f'/%3E%3Crect x='46' y='15' width='9' height='1' fill='%2324123f'/%3E%3Crect x='1' y='16' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='3' y='16' width='15' height='1' fill='%2324123f'/%3E%3Crect x='18' y='16' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='20' y='16' width='21' height='1' fill='%2324123f'/%3E%3Crect x='41' y='16' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='44' y='16' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='46' y='16' width='9' height='1' fill='%2324123f'/%3E%3Crect x='55' y='16' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='1' y='17' width='42' height='1' fill='%2324123f'/%3E%3Crect x='44' y='17' width='13' height='1' fill='%2324123f'/%3E%3Crect x='0' y='18' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='1' y='18' width='42' height='1' fill='%2324123f'/%3E%3Crect x='43' y='18' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='44' y='18' width='13' height='1' fill='%2324123f'/%3E%3Crect x='57' y='18' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='0' y='19' width='59' height='1' fill='%2324123f'/%3E%3Crect x='0' y='20' width='59' height='1' fill='%2324123f'/%3E%3Crect x='59' y='20' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='62' y='20' width='2' height='1' fill='%233a1f5e'/%3E%3Crect x='0' y='21' width='61' height='1' fill='%2324123f'/%3E%3Crect x='62' y='21' width='2' height='1' fill='%2324123f'/%3E%3Crect x='0' y='22' width='61' height='1' fill='%2324123f'/%3E%3Crect x='61' y='22' width='1' height='1' fill='%233a1f5e'/%3E%3Crect x='62' y='22' width='2' height='1' fill='%2324123f'/%3E%3Crect x='0' y='23' width='64' height='1' fill='%2324123f'/%3E%3Crect x='0' y='24' width='64' height='1' fill='%2324123f'/%3E%3Crect x='0' y='25' width='64' height='1' fill='%2324123f'/%3E%3Crect x='0' y='26' width='64' height='1' fill='%2324123f'/%3E%3Crect x='0' y='27' width='64' height='1' fill='%2324123f'/%3E%3Crect x='0' y='28' width='64' height='1' fill='%2324123f'/%3E%3Crect x='0' y='29' width='64' height='1' fill='%2324123f'/%3E%3Crect x='0' y='30' width='64' height='1' fill='%2324123f'/%3E%3Crect x='0' y='31' width='64' height='1' fill='%2324123f'/%3E%3C/svg%3E") repeat-x left 0 bottom 44px / 256px 128px;
}

/* 1-1 Overworld */
.w-over { background: #7ec8f0; }
.w-over::before {
  top: 4.5rem; height: 240px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' width='24' height='8' shape-rendering='crispEdges'%3E%3Crect x='9' y='0' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='1' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='2' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='18' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='22' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='2' y='6' width='20' height='1' fill='%23ffffff'/%3E%3Crect x='22' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='23' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='22' height='1' fill='%23cfe6ff'/%3E%3C/svg%3E") no-repeat 6% 30px / 168px 56px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' width='24' height='8' shape-rendering='crispEdges'%3E%3Crect x='9' y='0' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='1' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='2' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='18' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='22' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='2' y='6' width='20' height='1' fill='%23ffffff'/%3E%3Crect x='22' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='23' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='22' height='1' fill='%23cfe6ff'/%3E%3C/svg%3E") no-repeat 58% 120px / 216px 72px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' width='24' height='8' shape-rendering='crispEdges'%3E%3Crect x='9' y='0' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='1' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='2' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='18' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='22' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='2' y='6' width='20' height='1' fill='%23ffffff'/%3E%3Crect x='22' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='23' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='22' height='1' fill='%23cfe6ff'/%3E%3C/svg%3E") no-repeat 94% 0 / 144px 48px;
}
.w-over::after {
  bottom: 0; height: 160px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='1' fill='%236fd13f'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233f9a2a'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%236fd13f'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%233f9a2a'/%3E%3Crect x='7' y='1' width='4' height='1' fill='%236fd13f'/%3E%3Crect x='11' y='1' width='1' height='1' fill='%233f9a2a'/%3E%3Crect x='12' y='1' width='4' height='1' fill='%236fd13f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%233f9a2a'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%233f9a2a'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='7' y='2' width='2' height='1' fill='%233f9a2a'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='10' y='2' width='2' height='1' fill='%233f9a2a'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='13' y='2' width='2' height='1' fill='%233f9a2a'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='0' y='3' width='16' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='4' width='6' height='1' fill='%23b8743a'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%238a5226'/%3E%3Crect x='7' y='4' width='6' height='1' fill='%23b8743a'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%23d9a066'/%3E%3Crect x='14' y='4' width='2' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23b8743a'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%238a5226'/%3E%3Crect x='2' y='5' width='5' height='1' fill='%23b8743a'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%238a5226'/%3E%3Crect x='8' y='5' width='5' height='1' fill='%23b8743a'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%238a5226'/%3E%3Crect x='14' y='5' width='2' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='6' width='10' height='1' fill='%23b8743a'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%238a5226'/%3E%3Crect x='11' y='6' width='5' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='8' width='16' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='9' width='3' height='1' fill='%23b8743a'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%238a5226'/%3E%3Crect x='4' y='9' width='12' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='10' width='2' height='1' fill='%23b8743a'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%238a5226'/%3E%3Crect x='3' y='10' width='13' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='11' width='16' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%23b8743a'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%23d9a066'/%3E%3Crect x='2' y='12' width='14' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='13' width='16' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='14' width='12' height='1' fill='%23b8743a'/%3E%3Crect x='12' y='14' width='1' height='1' fill='%238a5226'/%3E%3Crect x='13' y='14' width='3' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%23b8743a'/%3E%3C/svg%3E") repeat-x left bottom / 48px 48px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40' height='20' shape-rendering='crispEdges'%3E%3Crect x='14' y='0' width='12' height='1' fill='%238be35a'/%3E%3Crect x='14' y='1' width='12' height='1' fill='%238be35a'/%3E%3Crect x='9' y='2' width='5' height='1' fill='%238be35a'/%3E%3Crect x='14' y='2' width='11' height='1' fill='%2343b047'/%3E%3Crect x='25' y='2' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='26' y='2' width='5' height='1' fill='%238be35a'/%3E%3Crect x='9' y='3' width='5' height='1' fill='%238be35a'/%3E%3Crect x='14' y='3' width='12' height='1' fill='%2343b047'/%3E%3Crect x='26' y='3' width='5' height='1' fill='%238be35a'/%3E%3Crect x='7' y='4' width='2' height='1' fill='%238be35a'/%3E%3Crect x='9' y='4' width='7' height='1' fill='%2343b047'/%3E%3Crect x='16' y='4' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='17' y='4' width='14' height='1' fill='%2343b047'/%3E%3Crect x='31' y='4' width='2' height='1' fill='%238be35a'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%238be35a'/%3E%3Crect x='9' y='5' width='11' height='1' fill='%2343b047'/%3E%3Crect x='20' y='5' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='21' y='5' width='10' height='1' fill='%2343b047'/%3E%3Crect x='31' y='5' width='2' height='1' fill='%238be35a'/%3E%3Crect x='5' y='6' width='2' height='1' fill='%238be35a'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='8' y='6' width='16' height='1' fill='%2343b047'/%3E%3Crect x='24' y='6' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='25' y='6' width='8' height='1' fill='%2343b047'/%3E%3Crect x='33' y='6' width='2' height='1' fill='%238be35a'/%3E%3Crect x='5' y='7' width='2' height='1' fill='%238be35a'/%3E%3Crect x='7' y='7' width='4' height='1' fill='%2343b047'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='12' y='7' width='16' height='1' fill='%2343b047'/%3E%3Crect x='28' y='7' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='29' y='7' width='4' height='1' fill='%2343b047'/%3E%3Crect x='33' y='7' width='2' height='1' fill='%238be35a'/%3E%3Crect x='3' y='8' width='2' height='1' fill='%238be35a'/%3E%3Crect x='5' y='8' width='10' height='1' fill='%2343b047'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='16' y='8' width='16' height='1' fill='%2343b047'/%3E%3Crect x='32' y='8' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='33' y='8' width='2' height='1' fill='%2343b047'/%3E%3Crect x='35' y='8' width='2' height='1' fill='%238be35a'/%3E%3Crect x='3' y='9' width='2' height='1' fill='%238be35a'/%3E%3Crect x='5' y='9' width='14' height='1' fill='%2343b047'/%3E%3Crect x='19' y='9' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='20' y='9' width='15' height='1' fill='%2343b047'/%3E%3Crect x='35' y='9' width='2' height='1' fill='%238be35a'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%238be35a'/%3E%3Crect x='3' y='10' width='3' height='1' fill='%2343b047'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='7' y='10' width='16' height='1' fill='%2343b047'/%3E%3Crect x='23' y='10' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='24' y='10' width='13' height='1' fill='%2343b047'/%3E%3Crect x='37' y='10' width='1' height='1' fill='%238be35a'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%238be35a'/%3E%3Crect x='3' y='11' width='7' height='1' fill='%2343b047'/%3E%3Crect x='10' y='11' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='11' y='11' width='16' height='1' fill='%2343b047'/%3E%3Crect x='27' y='11' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='28' y='11' width='9' height='1' fill='%2343b047'/%3E%3Crect x='37' y='11' width='1' height='1' fill='%238be35a'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%238be35a'/%3E%3Crect x='2' y='12' width='12' height='1' fill='%2343b047'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='15' y='12' width='16' height='1' fill='%2343b047'/%3E%3Crect x='31' y='12' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='32' y='12' width='6' height='1' fill='%2343b047'/%3E%3Crect x='38' y='12' width='1' height='1' fill='%238be35a'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%238be35a'/%3E%3Crect x='2' y='13' width='16' height='1' fill='%2343b047'/%3E%3Crect x='18' y='13' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='19' y='13' width='16' height='1' fill='%2343b047'/%3E%3Crect x='35' y='13' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='36' y='13' width='2' height='1' fill='%2343b047'/%3E%3Crect x='38' y='13' width='1' height='1' fill='%238be35a'/%3E%3Crect x='1' y='14' width='4' height='1' fill='%2343b047'/%3E%3Crect x='5' y='14' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='6' y='14' width='16' height='1' fill='%2343b047'/%3E%3Crect x='22' y='14' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='23' y='14' width='16' height='1' fill='%2343b047'/%3E%3Crect x='1' y='15' width='8' height='1' fill='%2343b047'/%3E%3Crect x='9' y='15' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='10' y='15' width='16' height='1' fill='%2343b047'/%3E%3Crect x='26' y='15' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='27' y='15' width='12' height='1' fill='%2343b047'/%3E%3Crect x='0' y='16' width='1' height='1' fill='%238be35a'/%3E%3Crect x='1' y='16' width='12' height='1' fill='%2343b047'/%3E%3Crect x='13' y='16' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='14' y='16' width='16' height='1' fill='%2343b047'/%3E%3Crect x='30' y='16' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='31' y='16' width='8' height='1' fill='%2343b047'/%3E%3Crect x='39' y='16' width='1' height='1' fill='%238be35a'/%3E%3Crect x='0' y='17' width='1' height='1' fill='%238be35a'/%3E%3Crect x='1' y='17' width='16' height='1' fill='%2343b047'/%3E%3Crect x='17' y='17' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='18' y='17' width='16' height='1' fill='%2343b047'/%3E%3Crect x='34' y='17' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='35' y='17' width='4' height='1' fill='%2343b047'/%3E%3Crect x='39' y='17' width='1' height='1' fill='%238be35a'/%3E%3Crect x='0' y='18' width='4' height='1' fill='%2343b047'/%3E%3Crect x='4' y='18' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='5' y='18' width='16' height='1' fill='%2343b047'/%3E%3Crect x='21' y='18' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='22' y='18' width='16' height='1' fill='%2343b047'/%3E%3Crect x='38' y='18' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='39' y='18' width='1' height='1' fill='%2343b047'/%3E%3Crect x='0' y='19' width='8' height='1' fill='%2343b047'/%3E%3Crect x='8' y='19' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='9' y='19' width='16' height='1' fill='%2343b047'/%3E%3Crect x='25' y='19' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='26' y='19' width='14' height='1' fill='%2343b047'/%3E%3C/svg%3E") no-repeat left 4% bottom 48px / 240px 120px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' width='40' height='20' shape-rendering='crispEdges'%3E%3Crect x='14' y='0' width='12' height='1' fill='%238be35a'/%3E%3Crect x='14' y='1' width='12' height='1' fill='%238be35a'/%3E%3Crect x='9' y='2' width='5' height='1' fill='%238be35a'/%3E%3Crect x='14' y='2' width='11' height='1' fill='%2343b047'/%3E%3Crect x='25' y='2' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='26' y='2' width='5' height='1' fill='%238be35a'/%3E%3Crect x='9' y='3' width='5' height='1' fill='%238be35a'/%3E%3Crect x='14' y='3' width='12' height='1' fill='%2343b047'/%3E%3Crect x='26' y='3' width='5' height='1' fill='%238be35a'/%3E%3Crect x='7' y='4' width='2' height='1' fill='%238be35a'/%3E%3Crect x='9' y='4' width='7' height='1' fill='%2343b047'/%3E%3Crect x='16' y='4' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='17' y='4' width='14' height='1' fill='%2343b047'/%3E%3Crect x='31' y='4' width='2' height='1' fill='%238be35a'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%238be35a'/%3E%3Crect x='9' y='5' width='11' height='1' fill='%2343b047'/%3E%3Crect x='20' y='5' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='21' y='5' width='10' height='1' fill='%2343b047'/%3E%3Crect x='31' y='5' width='2' height='1' fill='%238be35a'/%3E%3Crect x='5' y='6' width='2' height='1' fill='%238be35a'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='8' y='6' width='16' height='1' fill='%2343b047'/%3E%3Crect x='24' y='6' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='25' y='6' width='8' height='1' fill='%2343b047'/%3E%3Crect x='33' y='6' width='2' height='1' fill='%238be35a'/%3E%3Crect x='5' y='7' width='2' height='1' fill='%238be35a'/%3E%3Crect x='7' y='7' width='4' height='1' fill='%2343b047'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='12' y='7' width='16' height='1' fill='%2343b047'/%3E%3Crect x='28' y='7' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='29' y='7' width='4' height='1' fill='%2343b047'/%3E%3Crect x='33' y='7' width='2' height='1' fill='%238be35a'/%3E%3Crect x='3' y='8' width='2' height='1' fill='%238be35a'/%3E%3Crect x='5' y='8' width='10' height='1' fill='%2343b047'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='16' y='8' width='16' height='1' fill='%2343b047'/%3E%3Crect x='32' y='8' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='33' y='8' width='2' height='1' fill='%2343b047'/%3E%3Crect x='35' y='8' width='2' height='1' fill='%238be35a'/%3E%3Crect x='3' y='9' width='2' height='1' fill='%238be35a'/%3E%3Crect x='5' y='9' width='14' height='1' fill='%2343b047'/%3E%3Crect x='19' y='9' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='20' y='9' width='15' height='1' fill='%2343b047'/%3E%3Crect x='35' y='9' width='2' height='1' fill='%238be35a'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%238be35a'/%3E%3Crect x='3' y='10' width='3' height='1' fill='%2343b047'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='7' y='10' width='16' height='1' fill='%2343b047'/%3E%3Crect x='23' y='10' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='24' y='10' width='13' height='1' fill='%2343b047'/%3E%3Crect x='37' y='10' width='1' height='1' fill='%238be35a'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%238be35a'/%3E%3Crect x='3' y='11' width='7' height='1' fill='%2343b047'/%3E%3Crect x='10' y='11' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='11' y='11' width='16' height='1' fill='%2343b047'/%3E%3Crect x='27' y='11' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='28' y='11' width='9' height='1' fill='%2343b047'/%3E%3Crect x='37' y='11' width='1' height='1' fill='%238be35a'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%238be35a'/%3E%3Crect x='2' y='12' width='12' height='1' fill='%2343b047'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='15' y='12' width='16' height='1' fill='%2343b047'/%3E%3Crect x='31' y='12' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='32' y='12' width='6' height='1' fill='%2343b047'/%3E%3Crect x='38' y='12' width='1' height='1' fill='%238be35a'/%3E%3Crect x='1' y='13' width='1' height='1' fill='%238be35a'/%3E%3Crect x='2' y='13' width='16' height='1' fill='%2343b047'/%3E%3Crect x='18' y='13' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='19' y='13' width='16' height='1' fill='%2343b047'/%3E%3Crect x='35' y='13' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='36' y='13' width='2' height='1' fill='%2343b047'/%3E%3Crect x='38' y='13' width='1' height='1' fill='%238be35a'/%3E%3Crect x='1' y='14' width='4' height='1' fill='%2343b047'/%3E%3Crect x='5' y='14' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='6' y='14' width='16' height='1' fill='%2343b047'/%3E%3Crect x='22' y='14' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='23' y='14' width='16' height='1' fill='%2343b047'/%3E%3Crect x='1' y='15' width='8' height='1' fill='%2343b047'/%3E%3Crect x='9' y='15' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='10' y='15' width='16' height='1' fill='%2343b047'/%3E%3Crect x='26' y='15' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='27' y='15' width='12' height='1' fill='%2343b047'/%3E%3Crect x='0' y='16' width='1' height='1' fill='%238be35a'/%3E%3Crect x='1' y='16' width='12' height='1' fill='%2343b047'/%3E%3Crect x='13' y='16' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='14' y='16' width='16' height='1' fill='%2343b047'/%3E%3Crect x='30' y='16' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='31' y='16' width='8' height='1' fill='%2343b047'/%3E%3Crect x='39' y='16' width='1' height='1' fill='%238be35a'/%3E%3Crect x='0' y='17' width='1' height='1' fill='%238be35a'/%3E%3Crect x='1' y='17' width='16' height='1' fill='%2343b047'/%3E%3Crect x='17' y='17' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='18' y='17' width='16' height='1' fill='%2343b047'/%3E%3Crect x='34' y='17' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='35' y='17' width='4' height='1' fill='%2343b047'/%3E%3Crect x='39' y='17' width='1' height='1' fill='%238be35a'/%3E%3Crect x='0' y='18' width='4' height='1' fill='%2343b047'/%3E%3Crect x='4' y='18' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='5' y='18' width='16' height='1' fill='%2343b047'/%3E%3Crect x='21' y='18' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='22' y='18' width='16' height='1' fill='%2343b047'/%3E%3Crect x='38' y='18' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='39' y='18' width='1' height='1' fill='%2343b047'/%3E%3Crect x='0' y='19' width='8' height='1' fill='%2343b047'/%3E%3Crect x='8' y='19' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='9' y='19' width='16' height='1' fill='%2343b047'/%3E%3Crect x='25' y='19' width='1' height='1' fill='%232e7d32'/%3E%3Crect x='26' y='19' width='14' height='1' fill='%2343b047'/%3E%3C/svg%3E") no-repeat left 80% bottom 48px / 160px 80px;
}

/* 1-2 Underground cave */
.w-cave { background: #140f24; }
.w-cave::before { top: 0; height: 48px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='15' height='1' fill='%235a4a8a'/%3E%3Crect x='15' y='0' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='1' width='14' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='2' width='4' height='1' fill='%233b2f5c'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%233ee6c8'/%3E%3Crect x='6' y='2' width='9' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%233b2f5c'/%3E%3Crect x='4' y='3' width='2' height='1' fill='%233ee6c8'/%3E%3Crect x='6' y='3' width='9' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='4' width='14' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='5' width='14' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='6' width='14' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='6' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%231d1630'/%3E%3Crect x='0' y='8' width='7' height='1' fill='%235a4a8a'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='8' width='8' height='1' fill='%235a4a8a'/%3E%3Crect x='0' y='9' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='9' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='10' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='10' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='11' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='11' width='3' height='1' fill='%233b2f5c'/%3E%3Crect x='12' y='11' width='1' height='1' fill='%233ee6c8'/%3E%3Crect x='13' y='11' width='3' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='12' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='12' width='2' height='1' fill='%233b2f5c'/%3E%3Crect x='11' y='12' width='1' height='1' fill='%233ee6c8'/%3E%3Crect x='12' y='12' width='4' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='13' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='13' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='13' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='13' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='14' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='14' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='14' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='14' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%231d1630'/%3E%3C/svg%3E") repeat-x 0 0 / 48px 48px; }
.w-cave::after { bottom: 0; height: 48px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='15' height='1' fill='%235a4a8a'/%3E%3Crect x='15' y='0' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='1' width='14' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='2' width='4' height='1' fill='%233b2f5c'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%233ee6c8'/%3E%3Crect x='6' y='2' width='9' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%233b2f5c'/%3E%3Crect x='4' y='3' width='2' height='1' fill='%233ee6c8'/%3E%3Crect x='6' y='3' width='9' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='4' width='14' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='5' width='14' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='1' y='6' width='14' height='1' fill='%233b2f5c'/%3E%3Crect x='15' y='6' width='1' height='1' fill='%231d1630'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%231d1630'/%3E%3Crect x='0' y='8' width='7' height='1' fill='%235a4a8a'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='8' width='8' height='1' fill='%235a4a8a'/%3E%3Crect x='0' y='9' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='9' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='10' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='10' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='11' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='11' width='3' height='1' fill='%233b2f5c'/%3E%3Crect x='12' y='11' width='1' height='1' fill='%233ee6c8'/%3E%3Crect x='13' y='11' width='3' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='12' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='12' width='2' height='1' fill='%233b2f5c'/%3E%3Crect x='11' y='12' width='1' height='1' fill='%233ee6c8'/%3E%3Crect x='12' y='12' width='4' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='13' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='13' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='13' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='13' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='14' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='7' y='14' width='1' height='1' fill='%231d1630'/%3E%3Crect x='8' y='14' width='1' height='1' fill='%235a4a8a'/%3E%3Crect x='9' y='14' width='7' height='1' fill='%233b2f5c'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%231d1630'/%3E%3C/svg%3E") repeat-x 0 0 / 48px 48px; }

/* 1-3 Sky level */
.w-sky { background: linear-gradient(#5fb0ff 0 30%, #7cc2ff 30% 62%, #a3d7ff 62%); }
.w-sky::before {
  top: 5rem; bottom: 6rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' width='24' height='8' shape-rendering='crispEdges'%3E%3Crect x='9' y='0' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='1' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='2' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='18' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='22' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='2' y='6' width='20' height='1' fill='%23ffffff'/%3E%3Crect x='22' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='23' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='22' height='1' fill='%23cfe6ff'/%3E%3C/svg%3E") no-repeat 3% 2% / 216px 72px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' width='24' height='8' shape-rendering='crispEdges'%3E%3Crect x='9' y='0' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='1' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='2' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='18' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='22' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='2' y='6' width='20' height='1' fill='%23ffffff'/%3E%3Crect x='22' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='23' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='22' height='1' fill='%23cfe6ff'/%3E%3C/svg%3E") no-repeat 97% 18% / 168px 56px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' width='24' height='8' shape-rendering='crispEdges'%3E%3Crect x='9' y='0' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='1' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='2' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='18' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='22' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='2' y='6' width='20' height='1' fill='%23ffffff'/%3E%3Crect x='22' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='23' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='22' height='1' fill='%23cfe6ff'/%3E%3C/svg%3E") no-repeat 2% 52% / 144px 48px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' width='24' height='8' shape-rendering='crispEdges'%3E%3Crect x='9' y='0' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='1' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='2' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='18' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='22' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='2' y='6' width='20' height='1' fill='%23ffffff'/%3E%3Crect x='22' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='23' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='22' height='1' fill='%23cfe6ff'/%3E%3C/svg%3E") no-repeat 98% 74% / 216px 72px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' width='24' height='8' shape-rendering='crispEdges'%3E%3Crect x='9' y='0' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='1' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='2' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='18' y='2' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='3' width='22' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='24' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='2' y='6' width='20' height='1' fill='%23ffffff'/%3E%3Crect x='22' y='6' width='1' height='1' fill='%23cfe6ff'/%3E%3Crect x='23' y='6' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='7' width='22' height='1' fill='%23cfe6ff'/%3E%3C/svg%3E") no-repeat 4% 96% / 168px 56px;
}
.w-sky::after {
  bottom: 0; height: 96px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' width='16' height='8' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='1' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='1' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='2' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='3' width='16' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='4' width='16' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='5' width='16' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='6' width='16' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x left top / 96px 48px,
    linear-gradient(#fff, #fff) no-repeat left bottom / 100% 50%;
}

/* 1-4 Underwater */
.w-water { background: linear-gradient(#2f8fd8 0 18%, #2675c0 18% 45%, #1c5aa0 45% 72%, #154280 72%); }
.w-water::before { top: 0; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' width='16' height='8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='1' width='16' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='2' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='2' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='3' width='5' height='1' fill='%238fd6ff'/%3E%3Crect x='6' y='3' width='7' height='1' fill='%238fd6ff'/%3E%3Crect x='14' y='3' width='2' height='1' fill='%238fd6ff'/%3E%3Crect x='0' y='4' width='3' height='1' fill='%238fd6ff'/%3E%3Crect x='8' y='4' width='3' height='1' fill='%238fd6ff'/%3E%3C/svg%3E") repeat-x 0 0 / 64px 32px; animation: waveDrift 2.4s steps(4) infinite; }
.w-water::after {
  bottom: 0; height: 156px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23e2c06c'/%3E%3Crect x='1' y='0' width='3' height='1' fill='%23f6e0a0'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%23e2c06c'/%3E%3Crect x='5' y='0' width='3' height='1' fill='%23f6e0a0'/%3E%3Crect x='8' y='0' width='1' height='1' fill='%23e2c06c'/%3E%3Crect x='9' y='0' width='3' height='1' fill='%23f6e0a0'/%3E%3Crect x='12' y='0' width='1' height='1' fill='%23e2c06c'/%3E%3Crect x='13' y='0' width='3' height='1' fill='%23f6e0a0'/%3E%3Crect x='0' y='1' width='2' height='1' fill='%23e2c06c'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='3' y='1' width='12' height='1' fill='%23e2c06c'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='0' y='2' width='4' height='1' fill='%23e2c06c'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='5' y='2' width='11' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='3' width='6' height='1' fill='%23e2c06c'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='7' y='3' width='9' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='4' width='8' height='1' fill='%23e2c06c'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='9' y='4' width='7' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='5' width='10' height='1' fill='%23e2c06c'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='11' y='5' width='5' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='6' width='12' height='1' fill='%23e2c06c'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='13' y='6' width='3' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%23e2c06c'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='2' y='7' width='12' height='1' fill='%23e2c06c'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='15' y='7' width='1' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='8' width='3' height='1' fill='%23e2c06c'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='4' y='8' width='12' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='9' width='5' height='1' fill='%23e2c06c'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='6' y='9' width='10' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='10' width='7' height='1' fill='%23e2c06c'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='8' y='10' width='8' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='11' width='9' height='1' fill='%23e2c06c'/%3E%3Crect x='9' y='11' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='10' y='11' width='6' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='12' width='11' height='1' fill='%23e2c06c'/%3E%3Crect x='11' y='12' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='12' y='12' width='4' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='13' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='1' y='13' width='12' height='1' fill='%23e2c06c'/%3E%3Crect x='13' y='13' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='14' y='13' width='2' height='1' fill='%23e2c06c'/%3E%3Crect x='0' y='14' width='2' height='1' fill='%23e2c06c'/%3E%3Crect x='2' y='14' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='3' y='14' width='12' height='1' fill='%23e2c06c'/%3E%3Crect x='15' y='14' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='0' y='15' width='4' height='1' fill='%23e2c06c'/%3E%3Crect x='4' y='15' width='1' height='1' fill='%23b8913f'/%3E%3Crect x='5' y='15' width='11' height='1' fill='%23e2c06c'/%3E%3C/svg%3E") repeat-x left bottom / 48px 48px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 26' width='7' height='26' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='4' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='8' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='10' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='11' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='12' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='13' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='14' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='14' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='15' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='16' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='0' y='17' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='17' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='18' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='19' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='20' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='20' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='21' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='22' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='23' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='23' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='24' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='25' width='2' height='1' fill='%232fa34a'/%3E%3C/svg%3E") no-repeat left 6% bottom 48px / 28px 104px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 26' width='7' height='26' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='4' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='8' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='10' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='11' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='12' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='13' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='14' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='14' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='15' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='16' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='0' y='17' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='17' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='18' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='19' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='20' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='20' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='21' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='22' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='23' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='23' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='24' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='25' width='2' height='1' fill='%232fa34a'/%3E%3C/svg%3E") no-repeat left 9% bottom 48px / 21px 78px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 26' width='7' height='26' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='4' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='8' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='10' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='11' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='12' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='13' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='14' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='14' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='15' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='16' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='0' y='17' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='17' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='18' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='19' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='20' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='20' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='21' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='22' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='23' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='23' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='24' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='25' width='2' height='1' fill='%232fa34a'/%3E%3C/svg%3E") no-repeat left 88% bottom 48px / 28px 104px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 26' width='7' height='26' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='4' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='6' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='7' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='8' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='10' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='11' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='12' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='13' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='14' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='14' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='15' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='1' y='16' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='0' y='17' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='1' y='17' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='18' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='19' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='20' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='5' y='20' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='21' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='22' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='2' y='23' width='1' height='1' fill='%235fd36a'/%3E%3Crect x='3' y='23' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='24' width='2' height='1' fill='%232fa34a'/%3E%3Crect x='3' y='25' width='2' height='1' fill='%232fa34a'/%3E%3C/svg%3E") no-repeat left 93% bottom 48px / 21px 78px;
}
.bubbles span {
  position: absolute;
  bottom: 60px;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='4' height='1' fill='%23bfe9ff'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23bfe9ff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23bfe9ff'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23bfe9ff'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%23bfe9ff'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23bfe9ff'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23bfe9ff'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23bfe9ff'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23bfe9ff'/%3E%3Crect x='2' y='5' width='2' height='1' fill='%23bfe9ff'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: rise 11s linear infinite;
  opacity: 0;
}

/* 1-5 Bonus room */
.w-bonus { background: #0b0906 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' shape-rendering='crispEdges'%3E%3Crect x='20' y='1' width='1' height='1' fill='%234a3a12'/%3E%3Crect x='30' y='3' width='1' height='1' fill='%234a3a12'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%232e240b'/%3E%3Crect x='38' y='18' width='1' height='1' fill='%232e240b'/%3E%3Crect x='24' y='23' width='1' height='1' fill='%234a3a12'/%3E%3Crect x='60' y='23' width='1' height='1' fill='%232e240b'/%3E%3Crect x='25' y='29' width='1' height='1' fill='%234a3a12'/%3E%3Crect x='5' y='50' width='1' height='1' fill='%234a3a12'/%3E%3Crect x='41' y='56' width='1' height='1' fill='%234a3a12'/%3E%3Crect x='57' y='59' width='1' height='1' fill='%234a3a12'/%3E%3C/svg%3E") repeat 0 0 / 192px 192px; }
.w-bonus::after { bottom: 0; height: 48px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='15' height='1' fill='%23ffe58a'/%3E%3Crect x='15' y='0' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='1' y='1' width='14' height='1' fill='%23f2b72a'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='1' y='2' width='14' height='1' fill='%23f2b72a'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='1' y='3' width='14' height='1' fill='%23f2b72a'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='1' y='4' width='14' height='1' fill='%23f2b72a'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='1' y='5' width='14' height='1' fill='%23f2b72a'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='1' y='6' width='14' height='1' fill='%23f2b72a'/%3E%3Crect x='15' y='6' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%239a5f00'/%3E%3Crect x='0' y='8' width='7' height='1' fill='%23ffe58a'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='8' y='8' width='8' height='1' fill='%23ffe58a'/%3E%3Crect x='0' y='9' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='9' y='9' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='0' y='10' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='9' y='10' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='0' y='11' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='9' y='11' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='0' y='12' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='9' y='12' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='0' y='13' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='7' y='13' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='8' y='13' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='9' y='13' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='0' y='14' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='7' y='14' width='1' height='1' fill='%239a5f00'/%3E%3Crect x='8' y='14' width='1' height='1' fill='%23ffe58a'/%3E%3Crect x='9' y='14' width='7' height='1' fill='%23f2b72a'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%239a5f00'/%3E%3C/svg%3E") repeat-x 0 0 / 48px 48px; }
.coin-row { display: flex; justify-content: center; gap: 22px; margin: -1rem auto 2.5rem; }
.coin-row span {
  width: 20px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14' width='10' height='14' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='4' height='1' fill='%235a3500'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%235a3500'/%3E%3Crect x='3' y='1' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%235a3500'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%23fff6c2'/%3E%3Crect x='5' y='2' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%235a3500'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='3' width='3' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='4' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='4' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='5' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='5' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='6' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='6' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='7' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='7' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='8' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='8' width='4' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%235a3500'/%3E%3Crect x='0' y='9' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='9' width='7' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%235a3500'/%3E%3Crect x='2' y='10' width='5' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%235a3500'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%235a3500'/%3E%3Crect x='2' y='11' width='5' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%235a3500'/%3E%3Crect x='2' y='12' width='1' height='1' fill='%235a3500'/%3E%3Crect x='3' y='12' width='4' height='1' fill='%23d68a10'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%235a3500'/%3E%3Crect x='3' y='13' width='4' height='1' fill='%235a3500'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: coinSpin 0.9s steps(1) infinite;
}
.coin-row span:nth-child(2n) { animation-delay: -0.45s; }
.coin-row span:nth-child(3n) { animation-delay: -0.2s; }

/* 1-6 Castle */
.w-castle { background: #1b1a24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='15' height='1' fill='%232d2b38'/%3E%3Crect x='15' y='0' width='1' height='1' fill='%2317161e'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='1' y='1' width='14' height='1' fill='%2324222d'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%2317161e'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='1' y='2' width='14' height='1' fill='%2324222d'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%2317161e'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='1' y='3' width='14' height='1' fill='%2324222d'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%2317161e'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='1' y='4' width='14' height='1' fill='%2324222d'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%2317161e'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='1' y='5' width='14' height='1' fill='%2324222d'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%2317161e'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='1' y='6' width='14' height='1' fill='%2324222d'/%3E%3Crect x='15' y='6' width='1' height='1' fill='%2317161e'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%2317161e'/%3E%3Crect x='0' y='8' width='7' height='1' fill='%232d2b38'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%2317161e'/%3E%3Crect x='8' y='8' width='8' height='1' fill='%232d2b38'/%3E%3Crect x='0' y='9' width='7' height='1' fill='%2324222d'/%3E%3Crect x='7' y='9' width='1' height='1' fill='%2317161e'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='9' y='9' width='7' height='1' fill='%2324222d'/%3E%3Crect x='0' y='10' width='7' height='1' fill='%2324222d'/%3E%3Crect x='7' y='10' width='1' height='1' fill='%2317161e'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='9' y='10' width='7' height='1' fill='%2324222d'/%3E%3Crect x='0' y='11' width='7' height='1' fill='%2324222d'/%3E%3Crect x='7' y='11' width='1' height='1' fill='%2317161e'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='9' y='11' width='7' height='1' fill='%2324222d'/%3E%3Crect x='0' y='12' width='7' height='1' fill='%2324222d'/%3E%3Crect x='7' y='12' width='1' height='1' fill='%2317161e'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='9' y='12' width='7' height='1' fill='%2324222d'/%3E%3Crect x='0' y='13' width='7' height='1' fill='%2324222d'/%3E%3Crect x='7' y='13' width='1' height='1' fill='%2317161e'/%3E%3Crect x='8' y='13' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='9' y='13' width='7' height='1' fill='%2324222d'/%3E%3Crect x='0' y='14' width='7' height='1' fill='%2324222d'/%3E%3Crect x='7' y='14' width='1' height='1' fill='%2317161e'/%3E%3Crect x='8' y='14' width='1' height='1' fill='%232d2b38'/%3E%3Crect x='9' y='14' width='7' height='1' fill='%2324222d'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%2317161e'/%3E%3C/svg%3E") repeat 0 0 / 64px 64px; }
.w-castle::before {
  top: 7rem; height: 84px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 14' width='6' height='14' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23ff9b2f'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%23ff9b2f'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23ff9b2f'/%3E%3Crect x='2' y='3' width='2' height='1' fill='%23e63946'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23ff9b2f'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23ff9b2f'/%3E%3Crect x='2' y='4' width='2' height='1' fill='%23e63946'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23ff9b2f'/%3E%3Crect x='2' y='5' width='2' height='1' fill='%23e63946'/%3E%3Crect x='1' y='6' width='4' height='1' fill='%236b6b7a'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='10' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='11' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='12' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='13' width='2' height='1' fill='%237a4a1a'/%3E%3C/svg%3E") no-repeat 3% 0 / 36px 84px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 14' width='6' height='14' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23ff9b2f'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%23ff9b2f'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23ff9b2f'/%3E%3Crect x='2' y='3' width='2' height='1' fill='%23e63946'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23ff9b2f'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23ff9b2f'/%3E%3Crect x='2' y='4' width='2' height='1' fill='%23e63946'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23ff9b2f'/%3E%3Crect x='2' y='5' width='2' height='1' fill='%23e63946'/%3E%3Crect x='1' y='6' width='4' height='1' fill='%236b6b7a'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='10' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='11' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='12' width='2' height='1' fill='%237a4a1a'/%3E%3Crect x='2' y='13' width='2' height='1' fill='%237a4a1a'/%3E%3C/svg%3E") no-repeat 97% 0 / 36px 84px;
  animation: flicker 0.5s steps(1) infinite;
}
.w-castle::after {
  bottom: 0; height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' width='16' height='8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23ff7b1f'/%3E%3Crect x='1' y='0' width='3' height='1' fill='%23ffe14d'/%3E%3Crect x='4' y='0' width='5' height='1' fill='%23ff7b1f'/%3E%3Crect x='9' y='0' width='3' height='1' fill='%23ffe14d'/%3E%3Crect x='12' y='0' width='4' height='1' fill='%23ff7b1f'/%3E%3Crect x='0' y='1' width='16' height='1' fill='%23ff7b1f'/%3E%3Crect x='0' y='2' width='7' height='1' fill='%23ff7b1f'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='8' y='2' width='8' height='1' fill='%23ff7b1f'/%3E%3Crect x='0' y='3' width='5' height='1' fill='%23ff7b1f'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='6' y='3' width='10' height='1' fill='%23ff7b1f'/%3E%3Crect x='0' y='4' width='3' height='1' fill='%23ff7b1f'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='4' y='4' width='10' height='1' fill='%23ff7b1f'/%3E%3Crect x='14' y='4' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%23ff7b1f'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23d6331f'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='2' y='5' width='10' height='1' fill='%23d6331f'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='13' y='5' width='3' height='1' fill='%23d6331f'/%3E%3Crect x='0' y='6' width='10' height='1' fill='%23d6331f'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='11' y='6' width='5' height='1' fill='%23d6331f'/%3E%3Crect x='0' y='7' width='8' height='1' fill='%23d6331f'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23ffe14d'/%3E%3Crect x='9' y='7' width='7' height='1' fill='%23d6331f'/%3E%3C/svg%3E") repeat-x 0 0 / 96px 48px;
  border-top: 12px solid #34343f;
  animation: lavaFlow 1.6s steps(8) infinite;
}

/* Ending */
.w-end { background: #0d0b26 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' shape-rendering='crispEdges'%3E%3Crect x='49' y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='12' y='4' width='1' height='1' fill='%23ffd8a8'/%3E%3Crect x='60' y='8' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='30' y='16' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='56' y='17' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='20' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='19' y='29' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='27' y='33' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='60' y='33' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='38' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='60' y='50' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='49' y='54' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='24' y='60' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='34' y='60' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E") repeat 0 0 / 256px 256px; }
.w-end::after { bottom: 0; height: 48px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='1' fill='%233b8a48'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%2325602f'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%233b8a48'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%2325602f'/%3E%3Crect x='7' y='1' width='4' height='1' fill='%233b8a48'/%3E%3Crect x='11' y='1' width='1' height='1' fill='%2325602f'/%3E%3Crect x='12' y='1' width='4' height='1' fill='%233b8a48'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%2325602f'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%2325602f'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='7' y='2' width='2' height='1' fill='%2325602f'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='10' y='2' width='2' height='1' fill='%2325602f'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='13' y='2' width='2' height='1' fill='%2325602f'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%233b8a48'/%3E%3Crect x='0' y='3' width='16' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='4' width='6' height='1' fill='%234a2f22'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%2333201a'/%3E%3Crect x='7' y='4' width='6' height='1' fill='%234a2f22'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%236b4630'/%3E%3Crect x='14' y='4' width='2' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%234a2f22'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%2333201a'/%3E%3Crect x='2' y='5' width='5' height='1' fill='%234a2f22'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%2333201a'/%3E%3Crect x='8' y='5' width='5' height='1' fill='%234a2f22'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%2333201a'/%3E%3Crect x='14' y='5' width='2' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='6' width='10' height='1' fill='%234a2f22'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%2333201a'/%3E%3Crect x='11' y='6' width='5' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='8' width='16' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='9' width='3' height='1' fill='%234a2f22'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%2333201a'/%3E%3Crect x='4' y='9' width='12' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='10' width='2' height='1' fill='%234a2f22'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%2333201a'/%3E%3Crect x='3' y='10' width='13' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='11' width='16' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%234a2f22'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%236b4630'/%3E%3Crect x='2' y='12' width='14' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='13' width='16' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='14' width='12' height='1' fill='%234a2f22'/%3E%3Crect x='12' y='14' width='1' height='1' fill='%2333201a'/%3E%3Crect x='13' y='14' width='3' height='1' fill='%234a2f22'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%234a2f22'/%3E%3C/svg%3E") repeat-x 0 0 / 48px 48px; }
.sparkles span {
  position: absolute;
  width: 28px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='0' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='3' width='3' height='1' fill='%23ffd23f'/%3E%3Crect x='5' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: sparkle 2.4s steps(3) infinite;
  transform: scale(0);
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header { text-align: center; margin-bottom: 3rem; }
.section-tag {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 9px 12px;
  font-family: var(--font-px);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: #000;
  border: 3px solid #fff;
}
.section-title {
  font-family: var(--font-px);
  font-weight: 400;
  font-size: clamp(1.15rem, 3.2vw, 2.2rem);
  line-height: 1.35;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 3px 0 #000;
}
.section-title .accent { color: var(--gold); }
.section-line {
  width: 168px; height: 8px;
  margin: 1.25rem auto 0;
  background: repeating-linear-gradient(90deg, #fff 0 8px, transparent 8px 16px);
  filter: drop-shadow(2px 2px 0 #000);
}
.section-desc { max-width: 760px; margin: 1.75rem auto 0; padding: 1rem 1.4rem; }

/* ============================================
   TITLE SCREEN (HERO)
   ============================================ */
.title-screen { text-align: center; margin-bottom: 5rem; text-transform: uppercase; }
.title-tag {
  font-family: var(--font-px);
  font-size: clamp(9px, 1.3vw, 12px);
  letter-spacing: 0.25em;
  color: #ffd8a8;
  margin-bottom: 1.75rem;
}
.title-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 1.75rem;
  font-family: var(--font-px);
  font-weight: 400;
  line-height: 1.1;
}
.title-logo .first, .title-logo .last { font-size: clamp(1.7rem, 7vw, 4.6rem); }
.title-logo .first { color: #fff; text-shadow: 4px 4px 0 var(--red), 8px 8px 0 #000; }
.title-logo .last { color: var(--gold); text-shadow: 4px 4px 0 var(--red), 8px 8px 0 #000; }
.hero-roles {
  font-family: var(--font-px);
  font-size: clamp(8px, 1.15vw, 11px);
  line-height: 2;
  color: #fff;
  margin-bottom: 2.75rem;
  text-shadow: 2px 2px 0 #000;
}
.start-menu {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 2rem 1.4rem 3rem;
  background: rgba(0,0,0,0.6);
  border: 4px solid #fff;
}
.start-option {
  position: relative;
  padding: 4px 0;
  font-family: var(--font-px);
  font-size: clamp(10px, 1.4vw, 13px);
  text-transform: uppercase;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}
.start-option::before {
  content: '';
  position: absolute;
  left: -24px; top: 50%;
  margin-top: -7px;
  border-left: 11px solid var(--gold);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  opacity: 0;
}
.start-option:hover, .start-option:focus-visible { color: var(--gold); }
.start-option:hover::before, .start-option:focus-visible::before, .start-option.is-default::before { opacity: 1; }
.start-menu:hover .start-option.is-default:not(:hover)::before,
.start-menu:focus-within .start-option.is-default:not(:focus-visible)::before { opacity: 0; }
.title-hint {
  margin-top: 1.75rem;
  font-family: var(--font-px);
  font-size: 9px;
  color: #ffd8a8;
  text-shadow: 2px 2px 0 #000;
  animation: blink 1.1s steps(1) infinite;
}

.hero-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.75rem;
  align-items: start;
}
.hero-about { padding: 1.75rem; }
.box-label {
  margin-bottom: 1rem;
  font-family: var(--font-px);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-desc { margin-bottom: 1.75rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.hero-image-frame {
  margin-bottom: 2rem;
  background: #000;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px #000, 10px 10px 0 4px rgba(0,0,0,0.35);
}
.hero-image-frame img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hero-stats { padding: 1.1rem 1.4rem; }
.stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 2px dashed #3a3a5a;
}
.stat:last-child { border-bottom: 0; }
.stat-num { order: 2; font-family: var(--font-px); font-size: 13px; color: var(--gold); }
.stat-label { order: 1; font-family: var(--font-px); font-size: 9px; text-transform: uppercase; line-height: 1.5; }

/* ============================================
   BUTTONS & TAGS
   ============================================ */
.btn, .demo-link {
  display: inline-block;
  padding: 13px 16px;
  font-family: var(--font-px);
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  border: 3px solid #000;
  box-shadow: 0 0 0 3px #fff, inset -4px -4px 0 rgba(0,0,0,0.3);
  transition: transform 0.1s steps(2);
}
.btn-primary { background: var(--red); color: #fff; }
.btn-outline { background: var(--gold); color: #000; }
.demo-link { background: var(--green); color: #fff; margin: 6px 8px 0 3px; }
.btn:hover, .demo-link:hover { transform: translate(-2px, -2px); }
.btn:active, .demo-link:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 3px #fff, inset 4px 4px 0 rgba(0,0,0,0.3);
}

.tool-tag, .demo-tech-tag, .badge {
  display: inline-block;
  margin: 0 6px 8px 0;
  padding: 6px 8px;
  font-family: var(--font-px);
  font-size: 8px;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
  background: #2a2a48;
  border: 2px solid #fff;
}
.badge { background: var(--gold); color: #000; border-color: #000; box-shadow: 0 0 0 2px #fff; margin-right: 10px; }

/* ============================================
   SKILLS
   ============================================ */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.25rem; }
.skill-card { padding: 1.6rem; transition: transform 0.2s steps(2); }
.skill-card:hover { transform: translateY(-6px); }
.skill-icon {
  display: block;
  width: 56px; height: 48px;
  margin-bottom: 1.1rem;
  background: center / contain no-repeat;
  font-size: 0;
}
.skill-card:nth-child(1) .skill-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' width='14' height='8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='10' height='1' fill='%23000000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='1' width='10' height='1' fill='%239aa0b8'/%3E%3Crect x='12' y='1' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%239aa0b8'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23222222'/%3E%3Crect x='4' y='2' width='6' height='1' fill='%239aa0b8'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='11' y='2' width='2' height='1' fill='%239aa0b8'/%3E%3Crect x='13' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%239aa0b8'/%3E%3Crect x='2' y='3' width='3' height='1' fill='%23222222'/%3E%3Crect x='5' y='3' width='4' height='1' fill='%239aa0b8'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%23e63946'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%239aa0b8'/%3E%3Crect x='11' y='3' width='1' height='1' fill='%23e63946'/%3E%3Crect x='12' y='3' width='1' height='1' fill='%239aa0b8'/%3E%3Crect x='13' y='3' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='4' width='2' height='1' fill='%239aa0b8'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23222222'/%3E%3Crect x='4' y='4' width='6' height='1' fill='%239aa0b8'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%23e63946'/%3E%3Crect x='11' y='4' width='2' height='1' fill='%239aa0b8'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='5' width='4' height='1' fill='%239aa0b8'/%3E%3Crect x='5' y='5' width='4' height='1' fill='%23000000'/%3E%3Crect x='9' y='5' width='4' height='1' fill='%239aa0b8'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='6' width='2' height='1' fill='%239aa0b8'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='10' y='6' width='2' height='1' fill='%239aa0b8'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%23000000'/%3E%3Crect x='10' y='7' width='2' height='1' fill='%23000000'/%3E%3C/svg%3E"); }
.skill-card:nth-child(2) .skill-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' width='14' height='11' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='6' height='1' fill='%23000000'/%3E%3Crect x='2' y='1' width='2' height='1' fill='%23000000'/%3E%3Crect x='4' y='1' width='6' height='1' fill='%23e8c48a'/%3E%3Crect x='10' y='1' width='2' height='1' fill='%23000000'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='2' width='2' height='1' fill='%23e8c48a'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23e63946'/%3E%3Crect x='5' y='2' width='4' height='1' fill='%23e8c48a'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%233a86ff'/%3E%3Crect x='10' y='2' width='2' height='1' fill='%23e8c48a'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='3' width='12' height='1' fill='%23e8c48a'/%3E%3Crect x='13' y='3' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23e8c48a'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='4' width='4' height='1' fill='%23e8c48a'/%3E%3Crect x='7' y='4' width='2' height='1' fill='%23000000'/%3E%3Crect x='9' y='4' width='4' height='1' fill='%23e8c48a'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%23e8c48a'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='10' y='5' width='2' height='1' fill='%23e8c48a'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%2343b047'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='6' width='5' height='1' fill='%23e8c48a'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='10' y='6' width='3' height='1' fill='%23e8c48a'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='7' width='6' height='1' fill='%23e8c48a'/%3E%3Crect x='7' y='7' width='2' height='1' fill='%23000000'/%3E%3Crect x='9' y='7' width='4' height='1' fill='%23e8c48a'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%23e8c48a'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%239b5de5'/%3E%3Crect x='5' y='8' width='7' height='1' fill='%23e8c48a'/%3E%3Crect x='12' y='8' width='1' height='1' fill='%23000000'/%3E%3Crect x='2' y='9' width='2' height='1' fill='%23000000'/%3E%3Crect x='4' y='9' width='6' height='1' fill='%23e8c48a'/%3E%3Crect x='10' y='9' width='2' height='1' fill='%23000000'/%3E%3Crect x='4' y='10' width='6' height='1' fill='%23000000'/%3E%3C/svg%3E"); }
.skill-card:nth-child(3) .skill-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' width='14' height='10' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='2' height='1' fill='%23000000'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23000000'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%23d8d8e0'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%23000000'/%3E%3Crect x='10' y='1' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%23d8d8e0'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='0' y='3' width='3' height='1' fill='%23000000'/%3E%3Crect x='3' y='3' width='3' height='1' fill='%23d8d8e0'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23000000'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='12' y='3' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23d8d8e0'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23000000'/%3E%3Crect x='10' y='4' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='12' y='4' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%23d8d8e0'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='0' y='6' width='3' height='1' fill='%23000000'/%3E%3Crect x='3' y='6' width='3' height='1' fill='%23d8d8e0'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%23000000'/%3E%3Crect x='4' y='7' width='2' height='1' fill='%23d8d8e0'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23000000'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%23000000'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%23d8d8e0'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%23000000'/%3E%3Crect x='10' y='8' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='5' y='9' width='2' height='1' fill='%23000000'/%3E%3C/svg%3E"); }
.skill-card:nth-child(4) .skill-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' width='14' height='10' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='14' height='1' fill='%23000000'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%23e8e8f0'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%23000000'/%3E%3Crect x='5' y='1' width='2' height='1' fill='%23e8e8f0'/%3E%3Crect x='7' y='1' width='2' height='1' fill='%23000000'/%3E%3Crect x='9' y='1' width='2' height='1' fill='%23e8e8f0'/%3E%3Crect x='11' y='1' width='3' height='1' fill='%23000000'/%3E%3Crect x='0' y='2' width='14' height='1' fill='%23000000'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='3' width='12' height='1' fill='%233a3a46'/%3E%3Crect x='13' y='3' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%233a3a46'/%3E%3Crect x='2' y='4' width='10' height='1' fill='%23e8e8f0'/%3E%3Crect x='12' y='4' width='1' height='1' fill='%233a3a46'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='5' width='12' height='1' fill='%233a3a46'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%233a3a46'/%3E%3Crect x='2' y='6' width='5' height='1' fill='%23e8e8f0'/%3E%3Crect x='7' y='6' width='6' height='1' fill='%233a3a46'/%3E%3Crect x='13' y='6' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='7' width='12' height='1' fill='%233a3a46'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='8' width='12' height='1' fill='%233a3a46'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%23000000'/%3E%3Crect x='0' y='9' width='14' height='1' fill='%23000000'/%3E%3C/svg%3E"); }
.skill-name {
  margin-bottom: 0.9rem;
  font-family: var(--font-px);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold);
}
.skill-desc { margin-bottom: 1.1rem; font-size: 17px; }

/* ============================================
   GALLERY
   ============================================ */
.gallery-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-bottom: 2.75rem; }
.gallery-tab {
  padding: 11px 14px;
  font-family: var(--font-px);
  font-size: 10px;
  text-transform: uppercase;
  color: #fff;
  background: #000;
  border: 3px solid #fff;
  cursor: pointer;
}
.gallery-tab:hover { color: var(--gold); }
.gallery-tab.active { background: var(--gold); color: #000; border-color: #000; box-shadow: 0 0 0 3px #fff; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-flow: dense;
  gap: 1.6rem;
}
.gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px #000;
}
.gallery-item.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s steps(3); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.6rem 0.8rem;
  background: #000;
  border-top: 3px solid #fff;
  transform: translateY(100%);
  transition: transform 0.25s steps(4);
}
.gallery-item:hover .gallery-overlay, .gallery-item:focus-visible .gallery-overlay { transform: none; }
.gallery-label { margin-bottom: 5px; font-family: var(--font-px); font-size: 8px; text-transform: uppercase; color: var(--gold); }
.gallery-title { font-size: 16px; line-height: 1.3; }
@media (hover: none) { .gallery-overlay { transform: none; } }

/* ============================================
   DEMOS
   ============================================ */
.demo-card { margin-bottom: 3.25rem; }
.demo-card-inner { display: grid; grid-template-columns: 1.2fr 1fr; }
.demo-card.alt .demo-card-inner { direction: rtl; }
.demo-card.alt .demo-card-inner > * { direction: ltr; }
.demo-video { position: relative; background: #000; border-right: 4px solid #fff; }
.demo-card.alt .demo-video { border-right: 0; border-left: 4px solid #fff; }
.video-wrapper { position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; }
.video-wrapper iframe, .sound-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo-info { padding: 1.75rem; }
.demo-number { margin-bottom: 0.6rem; font-family: var(--font-px); font-size: 10px; color: var(--muted); }
.demo-number::before { content: 'STAGE '; }
.demo-title {
  margin-bottom: 1rem;
  font-family: var(--font-px);
  font-size: clamp(0.9rem, 1.5vw, 1.15rem);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold);
}
.demo-desc { margin-bottom: 1rem; }
.demo-tech { margin-bottom: 1.1rem; }

.app-icon-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem; }
.app-icon-panel img { width: 180px; height: 180px; border-radius: 22%; box-shadow: 0 0 0 4px #000, 0 0 0 8px var(--gold); }

/* ============================================
   SOUND
   ============================================ */
.sound-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 2.25rem; }
.sound-video { position: relative; height: 0; padding-bottom: 56.25%; background: #000; border-bottom: 4px solid #fff; }
.sound-info { padding: 1.3rem; }
.sound-title {
  margin-bottom: 0.8rem;
  font-family: var(--font-px);
  font-size: 11px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================
   EXPERIENCE
   ============================================ */
.timeline { display: grid; gap: 2.25rem; max-width: 880px; }
.timeline-item { padding: 1.6rem 1.8rem; }
.timeline-date { margin-bottom: 0.8rem; font-family: var(--font-px); font-size: 9px; line-height: 1.6; text-transform: uppercase; color: var(--muted); }
.timeline-title {
  margin-bottom: 0.5rem;
  font-family: var(--font-px);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold);
}
.timeline-subtitle { margin-bottom: 0.8rem; color: #c8d6ff; }
.timeline-desc { margin-bottom: 1.1rem; }

/* ============================================
   ENDING (CONTACT)
   ============================================ */
.contact-section { text-align: center; }
.end-title, .continue-link { text-transform: uppercase; }
.end-title {
  margin: 0.5rem auto 2.25rem;
  font-family: var(--font-px);
  font-size: clamp(1.05rem, 3.6vw, 2.4rem);
  line-height: 1.45;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--red), 7px 7px 0 #000;
}
.contact-section .section-title { margin-bottom: 1.75rem; }
.contact-tagline { max-width: 660px; margin: 0 auto 2.75rem; padding: 1rem 1.4rem; }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-bottom: 3rem; }
.contact-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 11px 16px 11px 11px;
  font-family: var(--font-px);
  font-size: 10px;
  color: #fff;
  text-decoration: none;
  background: var(--ink);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px #000;
}
.contact-link:hover { background: var(--red); }
.contact-icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  font-size: 9px;
  color: #000;
  background: var(--gold);
  border: 2px solid #000;
}
.continue-link {
  display: inline-block;
  padding: 10px;
  font-family: var(--font-px);
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  text-shadow: 2px 2px 0 #000;
}
.continue-link .yes { color: var(--gold); }
.continue-link:hover .yes { animation: blink 0.6s steps(1) infinite; }

.footer {
  padding: 1.75rem 1rem 4rem;
  font-family: var(--font-px);
  font-size: 9px;
  line-height: 2;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
  background: #000;
  border-top: 4px solid #fff;
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0,0,0,0.92);
}
.lightbox.active { display: flex; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 74vh; background: #000; border: 4px solid #fff; box-shadow: 0 0 0 4px #000; }
.lightbox-caption {
  max-width: 90vw;
  margin-top: 1.25rem;
  padding: 10px 14px;
  font-family: var(--font-px);
  font-size: 10px;
  line-height: 1.7;
  text-align: center;
  text-transform: uppercase;
  background: #000;
  border: 3px solid #fff;
}
.lightbox-close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 48px; height: 48px;
  font-family: var(--font-px);
  font-size: 16px;
  color: #fff;
  background: var(--red);
  border: 3px solid #fff;
  cursor: pointer;
}

/* ============================================
   WORLD CARD, RUN TRACK & PIXEL GARRETT
   ============================================ */
.world-card {
  position: fixed;
  bottom: 110px;
  left: 50%;
  z-index: 150;
  padding: 1rem 1.75rem;
  text-align: center;
  font-family: var(--font-px);
  text-transform: uppercase;
  background: #000;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px #000;
  transform: translateX(-50%);
  pointer-events: none;
  visibility: hidden;
}
.world-card.show { animation: cardShow 1.7s steps(1) forwards; }
.wc-world { margin-bottom: 0.7rem; font-size: 14px; color: #fff; }
.wc-name { font-size: 10px; color: var(--gold); }

.run-track {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='16' height='1' fill='%236fd13f'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233f9a2a'/%3E%3Crect x='2' y='1' width='4' height='1' fill='%236fd13f'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%233f9a2a'/%3E%3Crect x='7' y='1' width='4' height='1' fill='%236fd13f'/%3E%3Crect x='11' y='1' width='1' height='1' fill='%233f9a2a'/%3E%3Crect x='12' y='1' width='4' height='1' fill='%236fd13f'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='1' y='2' width='2' height='1' fill='%233f9a2a'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%233f9a2a'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='7' y='2' width='2' height='1' fill='%233f9a2a'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='10' y='2' width='2' height='1' fill='%233f9a2a'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='13' y='2' width='2' height='1' fill='%233f9a2a'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%236fd13f'/%3E%3Crect x='0' y='3' width='16' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='4' width='6' height='1' fill='%23b8743a'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%238a5226'/%3E%3Crect x='7' y='4' width='6' height='1' fill='%23b8743a'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%23d9a066'/%3E%3Crect x='14' y='4' width='2' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23b8743a'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%238a5226'/%3E%3Crect x='2' y='5' width='5' height='1' fill='%23b8743a'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%238a5226'/%3E%3Crect x='8' y='5' width='5' height='1' fill='%23b8743a'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%238a5226'/%3E%3Crect x='14' y='5' width='2' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='6' width='10' height='1' fill='%23b8743a'/%3E%3Crect x='10' y='6' width='1' height='1' fill='%238a5226'/%3E%3Crect x='11' y='6' width='5' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='7' width='16' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='8' width='16' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='9' width='3' height='1' fill='%23b8743a'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%238a5226'/%3E%3Crect x='4' y='9' width='12' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='10' width='2' height='1' fill='%23b8743a'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%238a5226'/%3E%3Crect x='3' y='10' width='13' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='11' width='16' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%23b8743a'/%3E%3Crect x='1' y='12' width='1' height='1' fill='%23d9a066'/%3E%3Crect x='2' y='12' width='14' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='13' width='16' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='14' width='12' height='1' fill='%23b8743a'/%3E%3Crect x='12' y='14' width='1' height='1' fill='%238a5226'/%3E%3Crect x='13' y='14' width='3' height='1' fill='%23b8743a'/%3E%3Crect x='0' y='15' width='16' height='1' fill='%23b8743a'/%3E%3C/svg%3E") repeat-x 0 0 / 14px 14px;
  border-top: 2px solid #000;
  pointer-events: none;
}
.run-goal {
  position: absolute;
  right: 12px; bottom: 14px;
  width: 30px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11' width='12' height='11' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='12' height='1' fill='%233a2400'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%233a2400'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%23ffd23f'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='4' y='1' width='6' height='1' fill='%23ffd23f'/%3E%3Crect x='10' y='1' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='11' y='1' width='1' height='1' fill='%233a2400'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233a2400'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23fff6c2'/%3E%3Crect x='3' y='2' width='7' height='1' fill='%23ffd23f'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%233a2400'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%233a2400'/%3E%3Crect x='2' y='3' width='7' height='1' fill='%23ffd23f'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%233a2400'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%233a2400'/%3E%3Crect x='3' y='4' width='5' height='1' fill='%23ffd23f'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%233a2400'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%233a2400'/%3E%3Crect x='4' y='5' width='3' height='1' fill='%23ffd23f'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%233a2400'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%233a2400'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%233a2400'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%233a2400'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23d68a10'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%233a2400'/%3E%3Crect x='2' y='8' width='8' height='1' fill='%233a2400'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%233a2400'/%3E%3Crect x='3' y='9' width='6' height='1' fill='%237a4a1a'/%3E%3Crect x='9' y='9' width='1' height='1' fill='%233a2400'/%3E%3Crect x='2' y='10' width='8' height='1' fill='%233a2400'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
#player { position: absolute; left: 12px; bottom: 14px; width: 48px; height: 72px; will-change: transform; }
.sprite-dir { width: 100%; height: 100%; }
.sprite-dir.flip { transform: scaleX(-1); }
.sprite {
  width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='5' height='1' fill='%233b2416'/%3E%3Crect x='2' y='1' width='8' height='1' fill='%233b2416'/%3E%3Crect x='1' y='2' width='9' height='1' fill='%233b2416'/%3E%3Crect x='1' y='3' width='2' height='1' fill='%233b2416'/%3E%3Crect x='3' y='3' width='6' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%233b2416'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%233b2416'/%3E%3Crect x='2' y='4' width='8' height='1' fill='%23f2c48d'/%3E%3Crect x='2' y='5' width='8' height='1' fill='%23101010'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23101010'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%236f93bd'/%3E%3Crect x='5' y='6' width='2' height='1' fill='%23101010'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%236f93bd'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23101010'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='2' y='7' width='7' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%23f2c48d'/%3E%3Crect x='4' y='8' width='4' height='1' fill='%23a2513a'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='3' y='9' width='5' height='1' fill='%23f2c48d'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='2' y='10' width='8' height='1' fill='%23262626'/%3E%3Crect x='1' y='11' width='2' height='1' fill='%23262626'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='4' y='11' width='4' height='1' fill='%23262626'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='9' y='11' width='2' height='1' fill='%23262626'/%3E%3Crect x='1' y='12' width='2' height='1' fill='%23262626'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='4' y='12' width='4' height='1' fill='%23262626'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='9' y='12' width='2' height='1' fill='%23262626'/%3E%3Crect x='1' y='13' width='2' height='1' fill='%23f2c48d'/%3E%3Crect x='4' y='13' width='4' height='1' fill='%23262626'/%3E%3Crect x='9' y='13' width='2' height='1' fill='%23f2c48d'/%3E%3Crect x='3' y='14' width='6' height='1' fill='%2334508a'/%3E%3Crect x='3' y='15' width='2' height='1' fill='%2334508a'/%3E%3Crect x='5' y='15' width='2' height='1' fill='%23253a66'/%3E%3Crect x='7' y='15' width='2' height='1' fill='%2334508a'/%3E%3Crect x='3' y='16' width='2' height='1' fill='%2334508a'/%3E%3Crect x='7' y='16' width='2' height='1' fill='%2334508a'/%3E%3Crect x='2' y='17' width='3' height='1' fill='%234a2c18'/%3E%3Crect x='7' y='17' width='3' height='1' fill='%234a2c18'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff);
}
.sprite[data-f="run1"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='5' height='1' fill='%233b2416'/%3E%3Crect x='2' y='1' width='8' height='1' fill='%233b2416'/%3E%3Crect x='1' y='2' width='9' height='1' fill='%233b2416'/%3E%3Crect x='1' y='3' width='2' height='1' fill='%233b2416'/%3E%3Crect x='3' y='3' width='6' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%233b2416'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%233b2416'/%3E%3Crect x='2' y='4' width='8' height='1' fill='%23f2c48d'/%3E%3Crect x='2' y='5' width='8' height='1' fill='%23101010'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23101010'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%236f93bd'/%3E%3Crect x='5' y='6' width='2' height='1' fill='%23101010'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%236f93bd'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23101010'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='2' y='7' width='7' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%23f2c48d'/%3E%3Crect x='4' y='8' width='4' height='1' fill='%23a2513a'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='3' y='9' width='5' height='1' fill='%23f2c48d'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='2' y='10' width='8' height='1' fill='%23262626'/%3E%3Crect x='1' y='11' width='2' height='1' fill='%23262626'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='4' y='11' width='4' height='1' fill='%23262626'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='9' y='11' width='2' height='1' fill='%23262626'/%3E%3Crect x='1' y='12' width='2' height='1' fill='%23262626'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='4' y='12' width='4' height='1' fill='%23262626'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='9' y='12' width='2' height='1' fill='%23262626'/%3E%3Crect x='0' y='13' width='2' height='1' fill='%23f2c48d'/%3E%3Crect x='4' y='13' width='4' height='1' fill='%23262626'/%3E%3Crect x='10' y='13' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='3' y='14' width='6' height='1' fill='%2334508a'/%3E%3Crect x='2' y='15' width='2' height='1' fill='%2334508a'/%3E%3Crect x='4' y='15' width='1' height='1' fill='%23253a66'/%3E%3Crect x='7' y='15' width='3' height='1' fill='%2334508a'/%3E%3Crect x='1' y='16' width='2' height='1' fill='%2334508a'/%3E%3Crect x='8' y='16' width='2' height='1' fill='%2334508a'/%3E%3Crect x='0' y='17' width='3' height='1' fill='%234a2c18'/%3E%3Crect x='8' y='17' width='3' height='1' fill='%234a2c18'/%3E%3C/svg%3E"); }
.sprite[data-f="run2"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='5' height='1' fill='%233b2416'/%3E%3Crect x='2' y='1' width='8' height='1' fill='%233b2416'/%3E%3Crect x='1' y='2' width='9' height='1' fill='%233b2416'/%3E%3Crect x='1' y='3' width='2' height='1' fill='%233b2416'/%3E%3Crect x='3' y='3' width='6' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%233b2416'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%233b2416'/%3E%3Crect x='2' y='4' width='8' height='1' fill='%23f2c48d'/%3E%3Crect x='2' y='5' width='8' height='1' fill='%23101010'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23101010'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%236f93bd'/%3E%3Crect x='5' y='6' width='2' height='1' fill='%23101010'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%236f93bd'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23101010'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='2' y='7' width='7' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%23f2c48d'/%3E%3Crect x='4' y='8' width='4' height='1' fill='%23a2513a'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='3' y='9' width='5' height='1' fill='%23f2c48d'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='2' y='10' width='8' height='1' fill='%23262626'/%3E%3Crect x='1' y='11' width='2' height='1' fill='%23262626'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='4' y='11' width='4' height='1' fill='%23262626'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='9' y='11' width='2' height='1' fill='%23262626'/%3E%3Crect x='1' y='12' width='2' height='1' fill='%23262626'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='4' y='12' width='4' height='1' fill='%23262626'/%3E%3Crect x='8' y='12' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='9' y='12' width='2' height='1' fill='%23262626'/%3E%3Crect x='1' y='13' width='2' height='1' fill='%23f2c48d'/%3E%3Crect x='4' y='13' width='4' height='1' fill='%23262626'/%3E%3Crect x='9' y='13' width='2' height='1' fill='%23f2c48d'/%3E%3Crect x='3' y='14' width='6' height='1' fill='%2334508a'/%3E%3Crect x='4' y='15' width='4' height='1' fill='%2334508a'/%3E%3Crect x='4' y='16' width='1' height='1' fill='%2334508a'/%3E%3Crect x='5' y='16' width='1' height='1' fill='%23253a66'/%3E%3Crect x='6' y='16' width='2' height='1' fill='%2334508a'/%3E%3Crect x='4' y='17' width='4' height='1' fill='%234a2c18'/%3E%3C/svg%3E"); }
.sprite.jumping { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='5' height='1' fill='%233b2416'/%3E%3Crect x='2' y='1' width='8' height='1' fill='%233b2416'/%3E%3Crect x='1' y='2' width='9' height='1' fill='%233b2416'/%3E%3Crect x='1' y='3' width='2' height='1' fill='%233b2416'/%3E%3Crect x='3' y='3' width='6' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%233b2416'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%233b2416'/%3E%3Crect x='2' y='4' width='8' height='1' fill='%23f2c48d'/%3E%3Crect x='2' y='5' width='8' height='1' fill='%23101010'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23101010'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%236f93bd'/%3E%3Crect x='5' y='6' width='2' height='1' fill='%23101010'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%236f93bd'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23101010'/%3E%3Crect x='9' y='6' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='2' y='7' width='7' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='7' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%23f2c48d'/%3E%3Crect x='4' y='8' width='4' height='1' fill='%23a2513a'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='9' y='8' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='3' y='9' width='5' height='1' fill='%23f2c48d'/%3E%3Crect x='8' y='9' width='1' height='1' fill='%23d49a63'/%3E%3Crect x='0' y='10' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='1' y='10' width='10' height='1' fill='%23262626'/%3E%3Crect x='11' y='10' width='1' height='1' fill='%23f2c48d'/%3E%3Crect x='1' y='11' width='2' height='1' fill='%23262626'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='4' y='11' width='4' height='1' fill='%23262626'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%234a4a4a'/%3E%3Crect x='9' y='11' width='2' height='1' fill='%23262626'/%3E%3Crect x='2' y='12' width='8' height='1' fill='%23262626'/%3E%3Crect x='3' y='13' width='6' height='1' fill='%23262626'/%3E%3Crect x='3' y='14' width='6' height='1' fill='%2334508a'/%3E%3Crect x='2' y='15' width='3' height='1' fill='%2334508a'/%3E%3Crect x='7' y='15' width='3' height='1' fill='%2334508a'/%3E%3Crect x='1' y='16' width='2' height='1' fill='%2334508a'/%3E%3Crect x='8' y='16' width='2' height='1' fill='%2334508a'/%3E%3Crect x='1' y='17' width='2' height='1' fill='%234a2c18'/%3E%3Crect x='8' y='17' width='2' height='1' fill='%234a2c18'/%3E%3C/svg%3E"); animation: hop 0.45s steps(6); }

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.45s steps(4), transform 0.45s steps(4); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.2s; }
.reveal-delay-4 { transition-delay: 0.28s; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes coinSpin { 0%, 100% { transform: scaleX(1); } 25% { transform: scaleX(0.55); } 50% { transform: scaleX(0.15); } 75% { transform: scaleX(0.55); } }
@keyframes blink { 50% { visibility: hidden; } }
@keyframes twinkle { 50% { opacity: 0.6; } }
@keyframes flicker { 0%, 100% { filter: brightness(1); } 33% { filter: brightness(1.25); } 66% { filter: brightness(0.85); } }
@keyframes lavaFlow { to { background-position: 96px 0; } }
@keyframes waveDrift { to { background-position: 64px 0; } }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(-1200px); opacity: 0; } }
@keyframes sparkle { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } }
@keyframes hop { 50% { transform: translateY(-36px); } }
@keyframes cardShow { 0%, 92% { visibility: visible; } 100% { visibility: hidden; } }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
  .nav-toggle { display: block; }
  .hud-audio { margin-left: auto; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; right: 1rem;
    flex-direction: column;
    gap: 0;
    min-width: 260px;
    margin: 0;
    padding: 0.8rem 1.25rem 0.8rem 2rem;
    background: #000;
    border: 4px solid #fff;
    border-top: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 0; display: flex; justify-content: space-between; gap: 1rem; }
  .nav-links a::after { content: attr(data-w); color: var(--muted); }
}
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-side { width: 100%; max-width: 440px; margin: 0 auto; }
  .demo-card-inner { grid-template-columns: 1fr; }
  .demo-card.alt .demo-card-inner { direction: ltr; }
  .demo-video, .demo-card.alt .demo-video { border: 0; border-bottom: 4px solid #fff; }
}
@media (max-width: 600px) {
  :root { --hud-h: 58px; }
  body { font-size: 17px; }
  .hud { gap: 0.7rem; padding: 0.5rem 0.6rem; font-size: 9px; }
  .hud-name span, .hud-small { display: none; }
  .hud-audio { gap: 5px; }
  .hud-btn { width: 32px; height: 30px; background-size: 15px; }
  .nav-toggle { padding: 8px 7px; font-size: 9px; }
  .world { padding: 5.5rem 1rem 9rem; }
  .w-title { padding-top: calc(var(--hud-h) + 3rem); }
  .gallery-item.wide { grid-column: span 1; aspect-ratio: 1; }
  .start-menu { padding: 1.2rem 1.25rem 1.2rem 2.5rem; }
  #player { width: 36px; height: 54px; }
  .w-over::before, .w-sky::before { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}