/* ══════════════════════════════════════════════
   MARIO PRESENTATION — style.css
   Acts: 1=sunny, 2=storm, 3=sunny return, 4=epilogue sunset
   ══════════════════════════════════════════════ */

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PressStart2P-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PressStart2P-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: 'Press Start 2P', 'Courier New', monospace;
}

/* ── WORLD ─────────────────────────────────── */

#world {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ── SKY ────────────────────────────────────── */

#sky {
  position: absolute;
  inset: 0;
  transition: background 2s ease;
  background: linear-gradient(180deg, #5C94FC 0%, #9ABBFF 55%, #BCCFFF 100%);
}

/* Per-slide sky: morning arc (slides 1–2 only; slide 3 = noon default; slides 4+ keep act rules) */
body[data-slide="0"] #sky {
  /* Early morning: deep blue top, warm peach horizon */
  background: linear-gradient(180deg, #2A5CB8 0%, #5A8AE8 40%, #9ABCF0 72%, #FFD4A0 92%, #FFE8C0 100%);
}
body[data-slide="1"] #sky {
  /* Late morning: brightening blue, faint warm glow at horizon */
  background: linear-gradient(180deg, #3A70DC 0%, #6898F4 44%, #A4C4FF 80%, #D8EAFF 100%);
}
/* Slide 2 (noon, peak) uses the act 1 default below */

[data-act="2"] #sky {
  background: linear-gradient(180deg, #434749 0%, #585D62 50%, #6B7075 100%);
}
/* Act 3: breaking overcast — lighter sky, clouds thinning, rain has stopped */
[data-act="3"] #sky {
  background: linear-gradient(180deg, #8A9DB0 0%, #AABCCC 50%, #C8D6E0 100%);
}
[data-act="3"] #cloud-wrap     { opacity: 0; pointer-events: none; }
[data-act="3"] #storm-wrap     { opacity: 0.55; }
[data-act="3"] .hill.big,
[data-act="3"] .hill.small     { background: #7A8C72; }
[data-act="3"] .bush            { background: #667860; }
[data-act="3"] #ground         { background: #A89878; border-color: #C0B090; }
/* Act 4: rainbow — blue sky stays, rainbow element fades in */
/* Act 5: golden hour / dawn */
[data-act="5"] #sky {
  background: linear-gradient(180deg, #1A4A9E 0%, #4A7FCC 25%, #F0A030 60%, #FFD060 82%, #FFF4A0 100%);
}
/* Act 6: epilogue sunset */
[data-act="6"] #sky {
  background: linear-gradient(180deg, #C84B00 0%, #E07820 30%, #F5A835 60%, #FFD566 85%, #FFE89A 100%);
}

/* ── SUN ────────────────────────────────────── */
/* Based on https://github.com/GordxRohit/Sun-Animation-CSS */

#sun {
  --sz: 6vw;                     /* one var drives all proportions */
  position: absolute;
  top: 18%; right: 22%;          /* slide 0 default; JS sets per-slide arc position */
  width: var(--sz); height: var(--sz);
  transition: opacity 2s ease, top 2s ease, right 2s ease;
  will-change: transform;
}

/* Spinning rays — three squares rotated behind the circle */
.sun-rays {
  position: absolute;
  inset: 0;
  animation: sun-spin 20s linear infinite;
  filter: drop-shadow(0 0 calc(var(--sz) * 0.06) rgba(252,201,82,0.7));
  transition: filter 2s ease;
}
.sun-rays span {
  position: absolute;
  inset: 0;
  background: #f8a037;
  z-index: 1;
}
.sun-rays span:nth-child(1) { transform: rotate(30deg); }
.sun-rays span:nth-child(2) { transform: rotate(60deg); }
.sun-rays span:nth-child(3) { transform: rotate(90deg); }

/* Circle body — sits on top of rays */
.sun-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #fcc952 0%, #fcc952 61%, #f8a037 100%);
  box-shadow:
     6px  6px 18px 0 rgba(204,123, 35,0.35),
    -6px -6px 18px 0 rgba(205,157, 35,0.50);
  z-index: 2;
  transition: background 2s ease, box-shadow 2s ease;
}

/* Face */
.sun-face {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.eyes-block {
  width: calc(var(--sz) * 0.47);
  display: flex;
  justify-content: space-between;
}
.eyes {
  width:  calc(var(--sz) * 0.12);
  height: calc(var(--sz) * 0.12);
  background: #2e261a;
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  transition: height 1.5s ease;
  overflow: hidden;
}
.eyes::before {
  content: '';
  width:  calc(var(--sz) * 0.036);
  height: calc(var(--sz) * 0.036);
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: calc(var(--sz) * 0.018);
  animation: sun-eye 4s ease-in-out alternate infinite;
  transition: top 0.5s ease, right 0.5s ease;
}
.mouth {
  width:  calc(var(--sz) * 0.11);
  height: calc(var(--sz) * 0.11);
  background: #2f261a;
  border-radius: 0 0 50% 50%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transition: border-radius 1.2s ease, width 1.2s ease, height 1.2s ease;
  top: calc(var(--sz) * 0.02);
  animation: sun-mouth 2s linear infinite;
}
.tongue {
  width: 100%;
  height: calc(var(--sz) * 0.09);
  background: #f54b2e;
  border-radius: 50%;
  position: absolute;
  bottom: calc(var(--sz) * -0.035);
  animation: sun-tongue 2s linear infinite;
}

@keyframes sun-spin  { to { transform: rotate(360deg); } }
@keyframes sun-eye   {
  0%,  35% { right: calc(var(--sz) * 0.018); }
  65%, 100% { right: calc(var(--sz) * 0.06);  }
}
@keyframes sun-mouth  {
  0%   { height: calc(var(--sz) * 0.11); }
  100% { height: calc(var(--sz) * 0.14); }
}
@keyframes sun-tongue {
  0%   { height: calc(var(--sz) * 0.09); }
  100% { height: calc(var(--sz) * 0.12); }
}

/* Act 2: ghostly sun through thick clouds + sad face — no rays, pale white body */
[data-act="2"] #sun           { opacity: 0.18; }
[data-act="2"] .sun-body      {
  background: #FFE84A;
  box-shadow: 0 0 calc(var(--sz) * 0.7) calc(var(--sz) * 0.2) rgba(255, 245, 180, 1.0),
              0 0 calc(var(--sz) * 1.6) calc(var(--sz) * 0.2) rgba(255, 235, 130, 0.7),
              0 0 calc(var(--sz) * 3.0) calc(var(--sz) * 0.1) rgba(255, 220,  80, 0.3);
}
[data-act="2"] .sun-rays      { opacity: 0; }
[data-act="2"] .sun-rays span { background: #C8CCD0; }
[data-act="2"] .mouth         { border-radius: 50% 50% 0 0; animation: none; }
[data-act="2"] .tongue        { display: none; }

/* Act 5: warm golden sun — position set by JS arc, only appearance changes here */
[data-act="5"] #sun          { }
[data-act="5"] .sun-body     {
  background: linear-gradient(145deg, #FFB800 0%, #FFB800 61%, #FF8A00 100%);
  box-shadow: 6px 6px 18px rgba(204,100,0,0.35), -6px -6px 18px rgba(205,130,0,0.50);
}
[data-act="5"] .sun-rays span { background: #FF8A00; }
[data-act="5"] .sun-rays     { filter: drop-shadow(0 0 calc(var(--sz) * 0.08) rgba(255,160,0,0.7)); }

/* Act 6: deep setting sun — position set by JS arc, only appearance changes here */
[data-act="6"] #sun          { }
[data-act="6"] .sun-body     {
  background: linear-gradient(145deg, #FF8A00 0%, #FF8A00 61%, #CC4400 100%);
  box-shadow: 6px 6px 18px rgba(180,60,0,0.40), -6px -6px 18px rgba(180,100,0,0.50);
}
[data-act="6"] .sun-rays span { background: #CC4400; }
[data-act="6"] .sun-rays     { filter: drop-shadow(0 0 calc(var(--sz) * 0.08) rgba(255,100,0,0.7)); }

/* Act 3: cautiously happy — small closed smile, no tongue */
[data-act="3"] .mouth        {
  width:  calc(var(--sz) * 0.09);
  height: calc(var(--sz) * 0.03);
  animation: none;
}
[data-act="3"] .tongue       { display: none; }

/* Act 5: tired sun — half-closed eyes, small yawn, one drifting z */
[data-act="5"] .eyes         { height: calc(var(--sz) * 0.065); }
[data-act="5"] .eyes::before { opacity: 0.35; }
[data-act="5"] .mouth        {
  border-radius: 50%;
  width:  calc(var(--sz) * 0.09);
  height: calc(var(--sz) * 0.07);
  animation: none;
}
[data-act="5"] .tongue       { display: none; }
[data-act="5"] .sun-body::after {
  content: 'z';
  position: absolute;
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--sz) * 0.2);
  left: 90%; top: -10%;
  color: rgba(255,255,255,0.75);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  pointer-events: none;
  animation: zzz-float 3.5s ease-in-out infinite;
}

/* Act 6: sleeping sun — eyes shut, Zzz drifting up */
[data-act="6"] .eyes         { height: calc(var(--sz) * 0.03); }
[data-act="6"] .eyes::before { display: none; }
[data-act="6"] .mouth        {
  border-radius: 50%;
  width:  calc(var(--sz) * 0.08);
  height: calc(var(--sz) * 0.04);
  animation: none;
}
[data-act="6"] .tongue       { display: none; }
[data-act="6"] .sun-body::after {
  content: 'Zzz';
  position: absolute;
  font-family: 'Press Start 2P', monospace;
  font-size: calc(var(--sz) * 0.18);
  left: 90%; top: -15%;
  color: rgba(255,255,255,0.9);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  white-space: nowrap;
  pointer-events: none;
  animation: zzz-float 2.8s ease-in-out infinite;
}

/* Slide 1: full golden sphere, no face — sun is not looking at us yet */
body[data-slide="0"] .sun-face { opacity: 0; }

/* Slide 2: sphere rotates toward viewer — face slides in from right edge to centre */
body[data-slide="1"] .sun-face {
  animation: sun-face-turn 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes sun-face-turn {
  from {
    /* start near the right edge of the sphere (radius ≈ --sz * 0.44 offset) */
    transform: translate(calc(-50% + var(--sz) * 0.44), -50%);
    opacity: 0;
  }
  20% { opacity: 1; }
  to  { transform: translate(-50%, -50%); opacity: 1; }
}

/* Slide 5 (act 2 storm): closed mouth instead of sad frown */
body[data-slide="4"] .mouth {
  border-radius: 0;
  width:  calc(var(--sz) * 0.09);
  height: calc(var(--sz) * 0.03);
  animation: none;
}

/* Slide 5 (act 2 storm): teardrop below the right eye */
body[data-slide="4"] .eyes-block {
  position: relative;
}
body[data-slide="4"] .eyes-block::after {
  content: '';
  position: absolute;
  /* centred under the right eye (eye width = 0.12sz, block width = 0.47sz) */
  top: calc(var(--sz) * 0.12);
  right: calc(var(--sz) * 0.04);
  width:  calc(var(--sz) * 0.038);
  height: calc(var(--sz) * 0.06);
  background: #7BB8FF;
  border-radius: 50% 50% 40% 40% / 30% 30% 60% 60%;
  animation: tear-fall 2.2s ease-in infinite;
  pointer-events: none;
}

@keyframes tear-fall {
  0%   { transform: translateY(0);                        opacity: 0;   }
  8%   {                                                  opacity: 1;   }
  80%  {                                                  opacity: 0.7; }
  100% { transform: translateY(calc(var(--sz) * 0.35));   opacity: 0;   }
}

/* Slide 2: eyes look bottom-left */
body[data-slide="1"] .eyes::before {
  animation: none;
  top:   calc(var(--sz) * 0.062);
  right: calc(var(--sz) * 0.062);
}


@keyframes zzz-float {
  0%   { opacity: 0; transform: translateY(0)                      scale(0.8); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--sz) * -0.7)) scale(1.1); }
}

/* ── WHITE CLOUDS ───────────────────────────── */

#cloud-wrap {
  position: absolute;
  width: 300vw;
  height: 100%;
  transition: opacity 2s ease, transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

[data-act="2"] #cloud-wrap { opacity: 0; pointer-events: none; }

.cloud {
  --s: 1;
  position: absolute;
  width: calc(110px * var(--s));
  height: calc(38px * var(--s));
  background: #fff;
  border-radius: 999px;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before {
  width: calc(52px * var(--s));
  height: calc(52px * var(--s));
  top: calc(-28px * var(--s));
  left: calc(14px * var(--s));
}
.cloud::after {
  width: calc(38px * var(--s));
  height: calc(38px * var(--s));
  top: calc(-20px * var(--s));
  left: calc(54px * var(--s));
}

/* ── STORM CLOUDS ───────────────────────────── */

#storm-wrap {
  position: absolute;
  width: 300vw;
  height: 70%;
  opacity: 0;
  transition: opacity 2s ease, transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  will-change: transform;
}

[data-act="2"] #storm-wrap { opacity: 1; }

.storm {
  --sw: 380px; --sh: 120px;
  position: absolute;
  width: var(--sw);
  height: var(--sh);
  background: #35393D;
  border-radius: 999px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}
.storm::before {
  content: '';
  position: absolute;
  width: calc(var(--sw) * 0.48);
  height: calc(var(--sh) * 1.5);
  background: #35393D;
  border-radius: 50%;
  top: calc(var(--sh) * -0.75);
  left: calc(var(--sw) * 0.14);
}
.storm::after {
  content: '';
  position: absolute;
  width: calc(var(--sw) * 0.40);
  height: calc(var(--sh) * 1.35);
  background: #35393D;
  border-radius: 50%;
  top: calc(var(--sh) * -0.65);
  left: calc(var(--sw) * 0.46);
}

/* ── RAINBOW ────────────────────────────────── */

#rainbow {
  position: absolute;
  /* smaller circle, center well below ground — just the low arch peeks out */
  width: 70vw; height: 70vw;
  border-radius: 50%;
  bottom: -46vw;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  /* thick, soft, muted bands — red → orange → yellow → green → blue → violet */
  box-shadow:
    0 0 0  12px rgba(220,  20,  20, 0.28),
    0 0 0  28px rgba(255, 110,   0, 0.26),
    0 0 0  44px rgba(255, 230,   0, 0.24),
    0 0 0  60px rgba(  0, 185,  50, 0.24),
    0 0 0  76px rgba( 30,  80, 255, 0.24),
    0 0 0  94px rgba(145,   0, 210, 0.22);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
  /* no z-index — hills/ground come later in the DOM and paint on top naturally */
}

[data-act="4"] #rainbow { opacity: 1; }

/* ── HILLS ──────────────────────────────────── */

#hills-wrap {
  position: absolute;
  bottom: 84px;
  width: 300vw;
  height: 220px;
  transition: transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hill {
  position: absolute;
  bottom: 0;
  border-radius: 50% 50% 0 0;
  transition: background 2s ease;
}

.hill.big  { width: 210px; height: 150px; background: #00A800; }
.hill.small{ width: 140px; height: 100px; background: #00A800; }

.hill.big::after {
  content: '';
  position: absolute;
  top: 28px; left: 56px;
  width: 44px; height: 20px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
}

.bush {
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 60px;
  background: #007C00;
  border-radius: 50% 50% 0 0;
  transition: background 2s ease;
}

.bush::after {
  content: '';
  position: absolute;
  top: 14px; left: 22px;
  width: 28px; height: 12px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
}

[data-act="2"] .hill.big,
[data-act="2"] .hill.small { background: #5A6058; }
[data-act="2"] .bush        { background: #4A4E48; }

/* Act 5: lush green hills in golden light */
[data-act="5"] .hill.big,
[data-act="5"] .hill.small { background: #007800; }
[data-act="5"] .bush        { background: #005E00; }
/* Act 6: epilogue */
[data-act="6"] .hill.big,
[data-act="6"] .hill.small { background: #007000; }
[data-act="6"] .bush        { background: #005600; }

/* ── RAIN ───────────────────────────────────── */

#rain {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
}

[data-act="2"] #rain { opacity: 1; }

/* ── PIPES ──────────────────────────────────── */

#pipes-wrap {
  position: absolute;
  bottom: 84px;
  width: 400vw;
  transition: transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.pipe {
  position: absolute;
  bottom: 0;
  width: 78px; /* 1.5× original */
  background: linear-gradient(90deg,
    #888 0%, #BBB 12%, #DDD 28%, #F5F5F5 44%,
    #FFF 50%,
    #F0F0F0 56%, #D0D0D0 72%, #AAA 88%, #808080 100%
  );
  border-left: 3px solid #555;
  border-right: 3px solid #555;
  border-top: 3px solid #666;
  transition: background 2s ease, border-color 2s ease;
}

/* Cap — 10 px overhang each side. left = −13px corrects for cap's own 3px left border */
.pipe::before {
  content: '';
  position: absolute;
  top: -14px; left: -13px;
  width: 98px; height: 29px;
  background: linear-gradient(90deg,
    #777 0%, #AAA 12%, #CCC 28%, #E8E8E8 44%,
    #F5F5F5 50%,
    #E0E0E0 56%, #C0C0C0 72%, #999 88%, #707070 100%
  );
  border: 3px solid #555;
  border-bottom: 3px solid #888;
  z-index: 6;
  transition: background 2s ease, border-color 2s ease;
}

[data-act="2"] .pipe {
  background: linear-gradient(90deg,
    #4A4E52 0%, #606468 15%, #787C80 30%, #888C90 44%,
    #8E9295 50%, #848890 56%, #707478 72%, #585C60 88%, #444850 100%
  );
  border-color: #383C40;
}
[data-act="2"] .pipe::before {
  background: linear-gradient(90deg,
    #404448 0%, #585C60 15%, #70747A 30%, #808488 44%,
    #86898C 50%, #7C8084 56%, #686C70 72%, #505458 88%, #3C4044 100%
  );
  border-color: #303438;
  border-bottom-color: #585C60;
}

/* ── PIRANHA PLANT ──────────────────────────── */

.piranha {
  position: absolute;
  /* Head top sits 100 px above pipe body top.
     Stalk = 46 px so its bottom is always within the cap zone (−14..+8 px),
     which has z-index 6 and therefore paints over the stalk. */
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 66px;
  height: 56px;
  z-index: 3; /* below cap z-index:6 → cap covers the stalk */
  pointer-events: none;
  /* Head: red oval */
  background: radial-gradient(ellipse at 40% 35%, #FF5555 30%, #CC0000 80%, #990000 100%);
  border-radius: 50%;
  border: 3px solid #770000;
  animation: piranha-bob 2s ease-in-out infinite;
}

/* Stalk — extends from head bottom down into the cap zone.
   46 px ensures the bottom is always within cap coverage at every bob frame. */
.piranha::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 46px;
  background: linear-gradient(90deg, #004400 0%, #00AA00 40%, #009900 70%, #005500 100%);
  border: 2px solid #002200;
}

/* Eyes — same style as the sun face */
.p-eyes {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 10px;
}
.p-eye {
  width: 13px; height: 13px;
  background: #2e261a;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.p-eye::before {
  content: '';
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px; right: 1px;
  animation: p-eye-anim 4s ease-in-out alternate infinite;
}
@keyframes p-eye-anim {
  0%,  35% { right: 1px; }
  65%, 100% { right: 5px; }
}

@keyframes piranha-bob {
  0%, 100% { transform: translateX(-50%) translateY(0);   }
  50%       { transform: translateX(-50%) translateY(-8px); }
}

/* Stagger each plant so they don't all bob in sync */
.pipe:nth-child(2) .piranha { animation-delay: -0.5s;  animation-duration: 2.3s; }
.pipe:nth-child(3) .piranha { animation-delay: -1.1s; }
.pipe:nth-child(4) .piranha { animation-delay: -0.3s;  animation-duration: 1.8s; }
.pipe:nth-child(5) .piranha { animation-delay: -0.9s; }
.pipe:nth-child(6) .piranha { animation-delay: -1.4s;  animation-duration: 2.2s; }
.pipe:nth-child(7) .piranha { animation-delay: -0.6s; }
.pipe:nth-child(8) .piranha { animation-delay: -1.7s;  animation-duration: 2.4s; }

/* Act 2: desaturated purple plant */
[data-act="2"] .piranha {
  background: radial-gradient(ellipse at 40% 35%, #9B6EA5 30%, #6B3E75 80%, #4A2858 100%);
  border-color: #3A1E48;
}
[data-act="2"] .piranha::before {
  background: linear-gradient(90deg, #1E1030 0%, #442858 40%, #382048 70%, #1E1030 100%);
  border-color: #160C24;
}

/* ── GROUND ─────────────────────────────────── */

#ground {
  position: absolute;
  bottom: 0;
  width: 500vw;
  height: 84px; /* 3 × 28 px tiles */
  background: #C84800;
  border-top: 6px solid #E87820;
  transition: background 2s ease, border-color 2s ease, transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

#ground::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 29px, rgba(0,0,0,0.18) 29px, rgba(0,0,0,0.18) 32px),
    repeating-linear-gradient(180deg, transparent, transparent 25px, rgba(0,0,0,0.14) 25px, rgba(0,0,0,0.14) 28px);
}

[data-act="2"] #ground { background: #706860; border-color: #888078; }
[data-act="5"] #ground { background: #9E6400; border-color: #BF8020; }
[data-act="6"] #ground { background: #8B5A00; border-color: #A87020; }

/* ── MARTY (Hoverboard Rider) ───────────────── */

@keyframes float-infinity {
  0%    { transform: translate(  0px,    0px); }
  12.5% { transform: translate(  6px,  3.5px); }
  25%   { transform: translate(  9px,    0px); }
  37.5% { transform: translate(  6px, -3.5px); }
  50%   { transform: translate(  0px,    0px); }
  62.5% { transform: translate( -6px,  3.5px); }
  75%   { transform: translate( -9px,    0px); }
  87.5% { transform: translate( -6px, -3.5px); }
  100%  { transform: translate(  0px,    0px); }
}

#marty {
  position: fixed;
  bottom: 90px; /* floats ~6px above ground (84px) */
  left: 8vw;
  z-index: 60;
  transition: left 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: float-infinity 6s linear infinite;
}

@keyframes arm-bob {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(-7deg); }
}

#marty .arm-l {
  transform-box: fill-box;
  transform-origin: top right;
  animation: arm-bob 3.5s ease-in-out infinite;
}

#marty .arm-r {
  transform-box: fill-box;
  transform-origin: top left;
  animation: arm-bob 3.5s ease-in-out infinite reverse;
}

/* ── SLIDES ─────────────────────────────────── */

#slides {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Slide content boxes — no upper cap so they always scale with the viewport */
.box {
  background: rgba(0, 0, 80, 0.85);
  border: 4px solid #FFE000;
  border-radius: 2px;
  padding: 2.5vw 3.5vw;
  width: 58vw;
  color: #fff;
  box-shadow: 0 0 0 2px #000, 6px 6px 0 rgba(0,0,0,0.5);
}

.box.dark {
  background: rgba(5, 5, 30, 0.92);
  border-color: #664422;
}

.box.epilogue {
  background: rgba(70, 30, 0, 0.88);
  border-color: #FFAA00;
  text-align: center;
}

.act-label {
  font-size: 0.7vw;
  color: #FFE000;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.box.dark    .act-label { color: #AA7733; }
.box.epilogue .act-label { color: #FFAA00; }

h1 {
  font-size: 2.2vw;
  line-height: 1.7;
  color: #FFE000;
  margin-bottom: 18px;
}

h2 {
  font-size: 1.8vw;
  color: #FFE000;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255,224,0,0.25);
}

.box.dark h2    { color: #BB9944; border-color: rgba(170,119,51,0.3); }
.box.epilogue h2 { color: #FFAA00; }

.sub {
  font-size: 0.7vw;
  color: rgba(255,255,255,0.65);
  line-height: 2.2;
  margin-top: 6px;
}

ul { list-style: none; padding: 0; }

ul li {
  font-size: 1.1vw;
  line-height: 2.4;
  color: #eee;
  padding-left: 18px;
  position: relative;
}

ul li::before {
  content: '▶';
  position: absolute;
  left: 0;
  color: #FFE000;
  font-size: 0.6vw;
  top: 0.4vw;
}
.box.dark ul li::before { color: #AA7733; }

blockquote {
  font-size: 1.1vw;
  color: #CCC;
  border-left: 3px solid #664422;
  padding-left: 14px;
  margin: 14px 0;
  line-height: 2.2;
}

p {
  font-size: 1.1vw;
  line-height: 2.4;
  color: #eee;
  margin-top: 10px;
}

.dim  { color: rgba(255,255,255,0.45); }
.big  { font-size: 1.5vw; color: #FFE000; margin-top: 20px; line-height: 2; }
.credit { font-size: 0.7vw; color: rgba(255,255,255,0.45); margin-top: 14px; }

/* ── NAV UI ─────────────────────────────────── */

/* ── HUD (full-width Mario-style) ──────────── */

#hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 90;
  pointer-events: none;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

.hud-col {
  padding-top: 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  white-space: nowrap;
}

#hud-slide  { cursor: pointer; position: relative; }

.hud-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65vw;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 4px;
  text-shadow:
    2px  2px 0 #000,
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000;
}

.hud-val {
  font-family: 'Press Start 2P', monospace;
  font-size: 1vw;
  color: #fff;
  letter-spacing: 1px;
  text-shadow:
    2px  2px 0 #000,
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000;
}

#hud-slide:hover .hud-label,
#hud-slide:hover .hud-val { color: #FFE000; }

/* ── SLIDE JUMP MENU ────────────────────────── */

#slide-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 40, 0.96);
  border: 3px solid #FFE000;
  box-shadow: 0 0 0 2px #000, 5px 5px 0 rgba(0,0,0,0.6);
  z-index: 100;
  min-width: 300px;
}

#slide-menu-list {
  list-style: none;
  padding: 6px 0;
  margin: 0;
}

#slide-menu-list li {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #ccc;
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.1s, color 0.1s;
  text-shadow: 1px 1px 0 #000;
}
#slide-menu-list li:hover {
  background: rgba(255,224,0,0.12);
  color: #fff;
}
#slide-menu-list li.active {
  color: #FFE000;
}
#slide-menu-list li.active::before {
  content: '▶';
  font-size: 7px;
  flex-shrink: 0;
}
#slide-menu-list li:not(.active)::before {
  content: '';
  display: inline-block;
  width: 9px;
  flex-shrink: 0;
}

.menu-num {
  color: rgba(255,255,255,0.4);
  min-width: 14px;
}
li.active .menu-num { color: #FFE000; }

/* ── START BUTTON ───────────────────────────── */

.start-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9vw;
  letter-spacing: 2px;
  color: #FFE000;
  background: rgba(0, 0, 80, 0.85);
  border: 4px solid #FFE000;
  box-shadow: 0 0 0 2px #000, 6px 6px 0 #000;
  padding: 0.7vw 1.8vw;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 2px 2px 0 #000;
}

.start-btn:hover {
  color: #fff;
  border-color: #fff;
}

.start-btn.pressed {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 2px #000;
}

/* Restart button on epilogue slide — matches the warm orange box theme */
.box.epilogue .start-btn {
  color: #FFAA00;
  background: rgba(70, 30, 0, 0.88);
  border-color: #FFAA00;
}
.box.epilogue .start-btn:hover {
  color: #FFE000;
  border-color: #FFE000;
}

/* Timer expired — blink red */
.timer-expired {
  color: #FF3333 !important;
  animation: timer-blink 0.6s step-start infinite;
}
@keyframes timer-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}