/* ==============================================================
   CHAOTIC DYSTOPIAN  |  styles.css
   Layout: one centered column, sections separated by a pink
   scalloped "lace" edge, game sits in a two column split.

   THEMES: dark (pink + black) is the default.
   Light mode kicks in when the visitor's device is set to light,
   or when they press the theme button in the header.
   All colors are tokens below, so each theme is one block.
   ============================================================== */

/* ---------- 1. DESIGN TOKENS (edit colors and fonts here) ---------- */

/* DARK THEME (default) */
:root {
  /* Colors */
  --ink: #0c080b;        /* page background, almost black with a pink tint */
  --crypt: #1b1118;      /* raised surfaces like cards */
  --crypt-2: #26161f;    /* alternate section background */
  --rose: #ffb8d6;       /* pink for headings, links, borders */
  --blush: #ffe4f0;      /* secondary text */
  --bone: #fff5f9;       /* main text color */
  --muted: #d9bccb;      /* quieter text */
  --line: #553447;       /* borders */
  --fill: #ffb8d6;       /* baby pink used as a background (buttons, tags) */
  --fill-hover: #ffd6e8; /* lighter pink for hovered buttons */
  --on-fill: #1f0b16;    /* text that sits on top of --fill */
  --header-bg: rgb(12 8 11 / 0.92);
  --web: rgb(255 184 214 / 0.34);  /* spider web lines */
  --stone: #33252e;      /* tombstone */
  --stone-hi: #4d3a46;   /* tombstone highlight */
  --stone-ink: #170e14;  /* carved lines on the tombstone */

  /* Spider web shape, used as a mask so it takes the --web color */
  --web-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 204 204'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' d='M0 0L200.0 0.0M0 0L193.2 51.8M0 0L173.2 100.0M0 0L141.4 141.4M0 0L100.0 173.2M0 0L51.8 193.2M0 0L0.0 200.0M31.2 0.0Q26.6 3.5 30.2 8.1Q24.8 10.3 27.1 15.6Q21.3 16.4 22.1 22.1Q16.4 21.3 15.6 27.1Q10.3 24.8 8.1 30.2Q3.5 26.6 0.0 31.2M62.5 0.0Q53.3 7.0 60.4 16.2Q49.7 20.6 54.1 31.2Q42.6 32.7 44.2 44.2Q32.7 42.6 31.3 54.1Q20.6 49.7 16.2 60.4Q7.0 53.3 0.0 62.5M93.8 0.0Q79.9 10.5 90.6 24.3Q74.5 30.9 81.2 46.9Q64.0 49.1 66.3 66.3Q49.1 64.0 46.9 81.2Q30.9 74.5 24.3 90.6Q10.5 79.9 0.0 93.8M125.0 0.0Q106.6 14.0 120.7 32.4Q99.3 41.1 108.3 62.5Q85.3 65.4 88.4 88.4Q65.4 85.3 62.5 108.3Q41.1 99.3 32.4 120.7Q14.0 106.6 0.0 125.0M156.2 0.0Q133.2 17.5 150.9 40.4Q124.1 51.4 135.3 78.1Q106.6 81.8 110.5 110.5Q81.8 106.6 78.1 135.3Q51.4 124.1 40.4 150.9Q17.5 133.2 0.0 156.2M187.5 0.0Q159.9 21.0 181.1 48.5Q149.0 61.7 162.4 93.7Q127.9 98.2 132.6 132.6Q98.2 127.9 93.8 162.4Q61.7 149.0 48.5 181.1Q21.0 159.9 0.0 187.5'/%3E%3C/svg%3E");

  /* Fonts */
  --font-display: "Pirata One", "Old English Text MT", Georgia, serif;
  --font-body: "Quicksand", "Trebuchet MS", system-ui, sans-serif;
  --font-arcade: "Press Start 2P", "Courier New", monospace;

  /* Type scale */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: clamp(1.9rem, 4vw, 2.6rem);
  --step-3: clamp(3.6rem, 13vw, 8.5rem);

  /* Spacing and shape */
  --radius: 14px;
  --section-pad: clamp(3.5rem, 8vw, 6rem);

  color-scheme: dark;
}

/* LIGHT THEME
   Same token names, light values. It appears twice on purpose:
   once for devices set to light mode, once for the toggle button. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #fff6fa;
    --crypt: #ffffff;
    --crypt-2: #ffe8f2;
    --rose: #b8326c;     /* deeper pink so text stays readable on white */
    --blush: #7e3a59;
    --bone: #2a1220;
    --muted: #6d4a5c;
    --line: #f2c2d7;
    --fill: #ffb8d6;
    --fill-hover: #ffcfe3;
    --on-fill: #2a0f1d;
    --header-bg: rgb(255 246 250 / 0.92);
    --web: rgb(184 50 108 / 0.26);
  --stone: #e8d9e0;
  --stone-hi: #fbf5f8;
  --stone-ink: #b99aa9;
    --stone: #e8d9e0;
    --stone-hi: #fbf5f8;
    --stone-ink: #b99aa9;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ink: #fff6fa;
  --crypt: #ffffff;
  --crypt-2: #ffe8f2;
  --rose: #b8326c;
  --blush: #7e3a59;
  --bone: #2a1220;
  --muted: #6d4a5c;
  --line: #f2c2d7;
  --fill: #ffb8d6;
  --fill-hover: #ffcfe3;
  --on-fill: #2a0f1d;
  --header-bg: rgb(255 246 250 / 0.92);
  --web: rgb(184 50 108 / 0.26);
  color-scheme: light;
}

/* ---------- 2. BASE ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
}

/* Paints the phone notch area behind the sticky header */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--ink);
}

/* Makes the hidden attribute always win over display rules.
   This is what fixes the pause screen not going away. */
[hidden] { display: none !important; }

h1, h2, h3 { line-height: 1.1; text-wrap: balance; margin: 0; }
p { margin: 0; }

a { color: var(--rose); }
a:hover { color: var(--blush); }

/* Visible focus ring for keyboard users everywhere */
:focus-visible {
  outline: 3px solid var(--blush);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Hidden visually, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--fill);
  color: var(--on-fill);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 700;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* Content width wrapper. The side gutter lives here. */
.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.center { text-align: center; }

/* ---------- 3. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;              /* comfortable touch target */
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 2px solid var(--rose);
  background: transparent;
  color: var(--bone);
  font: 700 var(--step-0) / 1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.btn:hover { background: var(--fill); color: var(--on-fill); }
.btn:active { transform: translateY(1px); }

.btn-primary { border-color: var(--fill); background: var(--fill); color: var(--on-fill); }
.btn-primary:hover { background: var(--fill-hover); border-color: var(--fill-hover); color: var(--on-fill); }

.btn-ghost { color: var(--blush); }

.btn-lg { padding: 0.95rem 2rem; font-size: var(--step-1); }
.btn-small { padding: 0.5rem 1.1rem; font-size: var(--step--1); min-height: 40px; }

/* ---------- 4. HEADER ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
}
.header-inner nav { margin-left: auto; }
.brand {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--rose);
  text-decoration: none;
  line-height: 1;
}
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  color: var(--bone);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  display: inline-block;
}
.nav-list a:hover { color: var(--rose); }

/* Menu button and drawer parts are hidden on bigger screens */
.menu-btn,
.drawer-top,
.menu-backdrop { display: none; }

.menu-btn {
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 2px solid var(--rose);
  background: var(--fill);
  color: var(--on-fill);
  font: 700 var(--step--1) / 1 var(--font-body);
  cursor: pointer;
}
/* Three bars drawn with one element and its shadows */
.menu-bars {
  width: 16px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 2px solid var(--rose);
  background: transparent;
  color: var(--bone);
  font: 700 var(--step--1) / 1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle:hover { background: var(--fill); color: var(--on-fill); }
/* Icon shows the mode you will switch to: sun for light, moon for dark */
.theme-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: none;
}
.theme-toggle[data-current="light"] .theme-icon {
  background: transparent;
  box-shadow: inset -5px -2px 0 0 currentColor;
}

/* ---------- 5. HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(4rem, 10vw, 7rem);
  /* moonlit glow plus a faint pink grid like a stage floor */
  background:
    radial-gradient(circle at 80% 20%, rgb(255 184 214 / 0.28), transparent 40%),
    radial-gradient(circle at 10% 90%, rgb(255 184 214 / 0.12), transparent 45%),
    var(--ink);
}
/* Spider webs in both top corners of the hero */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  width: clamp(140px, 26vw, 280px);
  aspect-ratio: 1;
  background: var(--web);
  -webkit-mask: var(--web-img) no-repeat 0 0 / 100% 100%;
  mask: var(--web-img) no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}
.hero::before { left: 0; }
.hero::after { right: 0; transform: scaleX(-1); }

/* Little spider hanging from the right web on a thread */
.spider {
  position: absolute;
  top: 0;
  right: clamp(60px, 12vw, 130px);
  width: 2px;
  height: clamp(90px, 16vw, 170px);
  background: var(--web);
  transform-origin: top center;
  animation: dangle 4s ease-in-out infinite;
  pointer-events: none;
}
.spider::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 18px;
  height: 14px;
  translate: -50% 0;
  border-radius: 50% 50% 45% 45%;
  background: #000;
  border: 2px solid var(--rose);
  /* legs */
  box-shadow:
    -9px -2px 0 -5px var(--rose), 9px -2px 0 -5px var(--rose),
    -10px 5px 0 -5px var(--rose), 10px 5px 0 -5px var(--rose);
}
@keyframes dangle {
  0%, 100% { transform: rotate(-3deg) scaleY(1); }
  50% { transform: rotate(3deg) scaleY(1.08); }
}

/* Two columns on wide screens: words on the left, next stream
   card on the right. Stacks on tablets and phones. */
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.hero-copy {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  min-width: 0;
}

/* Next stream card, shaped like a gothic arched window */
.next-stream {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 340px;
  justify-self: end;
  padding: 3.6rem 1.6rem 1.8rem;
  text-align: center;
  border: 2px solid var(--rose);
  border-radius: 50% 50% var(--radius) var(--radius) / 110px 110px var(--radius) var(--radius);
  background:
    radial-gradient(circle at 50% 0, rgb(255 184 214 / 0.22), transparent 65%),
    var(--crypt);
  box-shadow:
    0 0 0 6px var(--ink),
    0 0 0 7px var(--line),
    0 20px 60px rgb(0 0 0 / 0.35);
}
.next-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blush);
}
.next-day {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--rose);
  margin-top: 0.4rem;
}
.next-time {
  font: 1.05rem/1.4 var(--font-arcade);
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.next-time abbr { text-decoration: none; font-size: 0.7em; color: var(--muted); }
.next-when { font-weight: 700; color: var(--blush); }
.next-week {
  list-style: none;
  margin: 1rem 0 0.4rem;
  padding: 0.9rem 0 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  border-top: 1px dashed var(--line);
}
.next-week li {
  display: grid;
  gap: 0.1rem;
  flex: 1;
  padding: 0.45rem 0.3rem;
  border-radius: 10px;
  background: var(--crypt-2);
  font-size: 0.8rem;
  color: var(--muted);
}
.next-week b { color: var(--bone); font-size: 0.9rem; }
.next-week li.is-next { background: var(--fill); color: var(--on-fill); }
.next-week li.is-next b { color: var(--on-fill); }
.next-link { font-size: var(--step--1); font-weight: 700; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--blush);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 0.9;
  color: var(--bone);
  text-shadow: 0 0 28px rgb(255 184 214 / 0.45);
}
.hero-title span { display: block; color: var(--rose); }
.hero-tag {
  max-width: 34rem;
  font-size: var(--step-1);
  color: var(--blush);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.schedule {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--fill);
  box-shadow: 0 0 0 0 rgb(255 184 214 / 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgb(255 184 214 / 0.6); }
  70% { box-shadow: 0 0 0 10px rgb(255 184 214 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(255 184 214 / 0); }
}

/* ---------- 6. SECTIONS ---------- */
.section {
  position: relative;
  padding-block: var(--section-pad);
}
.section-alt { background: var(--crypt-2); }

/* Scalloped lace edge along the top of a section.
   --lace-prev is the background color of the section above it. */
.lace-top::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 14px;
  background:
    radial-gradient(circle at 50% 0, var(--lace-prev, var(--crypt-2)) 9px, var(--rose) 10px, var(--rose) 11px, transparent 12px)
    0 0 / 24px 14px repeat-x;
}
.after-ink { --lace-prev: var(--ink); }

/* Spider web tucked into the top right corner of a section */
.web-corner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(110px, 18vw, 200px);
  aspect-ratio: 1;
  background: var(--web);
  -webkit-mask: var(--web-img) no-repeat 0 0 / 100% 100%;
  mask: var(--web-img) no-repeat 0 0 / 100% 100%;
  transform: scaleX(-1);
  pointer-events: none;
}
.web-corner.web-left::after { right: auto; left: 0; transform: none; }
.section > .wrap { position: relative; z-index: 1; }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  color: var(--rose);
  margin-bottom: 1rem;
}
.section-lead {
  max-width: 40rem;
  color: var(--blush);
  margin-bottom: 2rem;
}

/* ---------- 7. ABOUT ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}
/* Tombstone: rounded headstone with an engraved border, a crack,
   a stone base, and a little pink grass. */
.tombstone {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 3 / 4;
  justify-self: center;
  margin-bottom: 34px;                 /* room for the base slab */
  border: 3px solid var(--rose);
  border-radius: 50% 50% 6px 6px / 34% 34% 6px 6px;   /* domed top */
  background:
    radial-gradient(ellipse at 30% 20%, var(--stone-hi), transparent 60%),
    linear-gradient(180deg, var(--stone-hi), var(--stone) 70%);
  box-shadow: 0 0 34px rgb(255 184 214 / 0.18);
  transform: rotate(-3deg);            /* a little crooked, like an old grave */
}
/* Crack running down from the top right */
.tombstone::before {
  content: "";
  position: absolute;
  top: 8%;
  right: 22%;
  width: 18px;
  height: 30%;
  background: var(--stone-ink);
  opacity: 0.55;
  clip-path: polygon(40% 0, 55% 0, 35% 30%, 70% 48%, 30% 75%, 50% 100%, 38% 100%, 15% 75%, 52% 50%, 18% 32%);
}
/* Base slab with a strip of grass */
.tombstone::after {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -34px;
  height: 30px;
  border: 3px solid var(--rose);
  border-radius: 6px;
  background:
    linear-gradient(var(--stone-ink), var(--stone-ink)) 0 0 / 100% 2px no-repeat,
    var(--stone);
}
/* Engraved panel inside the stone */
.tomb-face {
  position: absolute;
  inset: 12% 12% 9%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
  border: 2px solid var(--stone-ink);
  border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px;
  color: var(--rose);
  text-shadow: 0 1px 0 var(--stone-hi), 0 -1px 0 var(--stone-ink);   /* carved look */
}
/* Small carved cross above R.I.P. */
.tomb-cross {
  width: 18px;
  height: 26px;
  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 4px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 50% 30% / 100% 4px no-repeat;
}
/* Tufts of grass along the bottom of the stone */
.tomb-grass {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6px;
  height: 18px;
  background: var(--rose);
  opacity: 0.85;
  clip-path: polygon(0 100%, 3% 30%, 6% 100%, 9% 10%, 12% 100%, 16% 40%, 19% 100%, 23% 0, 26% 100%,
    74% 100%, 77% 20%, 80% 100%, 84% 0, 87% 100%, 90% 35%, 93% 100%, 97% 15%, 100% 100%);
}
.tomb-rip {
  font: 700 0.85rem/1 var(--font-body);
  letter-spacing: 0.3em;
  padding-left: 0.3em;                 /* balances the letter spacing */
}
.tomb-initials {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 4.5rem);
  line-height: 0.9;
}
.tomb-epitaph {
  max-width: 9rem;
  font: 700 0.8rem/1.3 var(--font-body);
  color: var(--bone);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.about-copy { display: grid; gap: 1rem; min-width: 0; max-width: 38rem; }
.facts {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.5rem;
}
.facts li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px dashed var(--line);
}
.fact-label {
  min-width: 7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--rose);
}

/* ---------- 7b. SCHEDULE ---------- */
.schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 0.8rem;
}
.day {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--crypt);
  border: 1px solid var(--line);
  min-width: 0;
}
.day-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--rose);
}
.day-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.day-show { font-size: var(--step--1); color: var(--muted); }

/* Days with no stream look quieter */
.day.is-off { background: transparent; border-style: dashed; }
.day.is-off .day-name { color: var(--muted); }
.day.is-off .day-time { color: var(--muted); font-weight: 500; }

/* Today gets highlighted by script.js */
.day.is-today { border: 2px solid var(--rose); box-shadow: 0 0 22px rgb(255 184 214 / 0.25); }
.today-tag {
  order: -1;              /* sits above the day name */
  justify-self: start;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.schedule-note { margin-top: 1.4rem; font-size: var(--step--1); color: var(--muted); }

/* ---------- 8. SOCIALS ---------- */
/* Twitch gets a big featured tile, the rest sit in a 2 x 2 grid
   beside it. Drops to two columns, then one, on smaller screens. */
.socials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.socials > li:first-child { grid-row: span 2; }
.social {
  display: grid;
  gap: 0.15rem;
  height: 100%;
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--crypt);
  color: var(--bone);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.social:hover { border-color: var(--rose); color: var(--bone); transform: translateY(-3px); }
.social-main {
  align-content: end;
  gap: 0.4rem;
  padding: 1.8rem;
  border-color: var(--rose);
  box-shadow: 0 0 24px rgb(255 184 214 / 0.18);
  background:
    radial-gradient(circle at 85% 15%, rgb(255 184 214 / 0.2), transparent 55%),
    var(--crypt);
}
.social-main .social-name { font-size: clamp(2.4rem, 4vw, 3.2rem); }
.social-main .social-handle { font-size: var(--step-1); }
.social-main::after {
  content: "Go to channel";
  justify-self: start;
  margin-top: 0.8rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  font-weight: 700;
  font-size: var(--step--1);
}
.social-name { font-family: var(--font-display); font-size: 1.7rem; color: var(--rose); line-height: 1.1; }
.social-handle {
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow-wrap: normal;     /* never split a handle mid word */
  word-break: keep-all;
}
.social-note { font-size: var(--step--1); color: var(--muted); }

/* ---------- 9. SUPPORT ---------- */
.support-inner { display: grid; justify-items: center; text-align: center; }
.support-inner .section-lead { margin-inline: auto; }
.support-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.fine-print { margin-top: 1.4rem; font-size: var(--step--1); color: var(--muted); }

/* ---------- 10. MERCH ---------- */
.merch-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1.2rem;
}
.merch-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.7rem;
  padding: 1.2rem;
  border-radius: var(--radius);
  background: var(--crypt);
  border: 1px solid var(--line);
}
.merch-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; color: var(--bone); }
.merch-card p { color: var(--muted); font-size: var(--step--1); }
.merch-card .btn { justify-self: start; }

/* Simple CSS drawn product placeholders. Swap for real photos:
   <img src="hoodie.jpg" alt="Black hoodie with pink logo"> */
.merch-art {
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 184 214 / 0.25), transparent 65%),
    var(--ink);
  position: relative;
}
.merch-art::after {
  content: "";
  position: absolute;
  inset: 22% 30%;
  background: var(--fill);
}
.merch-hoodie::after {
  clip-path: polygon(30% 0, 70% 0, 100% 25%, 88% 45%, 80% 38%, 80% 100%, 20% 100%, 20% 38%, 12% 45%, 0 25%);
}
.merch-shirt::after {
  clip-path: polygon(32% 0, 68% 0, 100% 18%, 88% 38%, 78% 32%, 78% 100%, 22% 100%, 22% 32%, 12% 38%, 0 18%);
}
.merch-sticker::after {
  inset: 22% 34%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, var(--ink) 9%, transparent 10%),
    radial-gradient(circle at 65% 40%, var(--ink) 9%, transparent 10%),
    var(--rose);
}

/* ---------- 10b. MERCH COMING SOON ----------
   Pink and black caution tape. The tape keeps the same colors in
   light and dark mode, like real tape would. To remove it when the
   store opens, see the steps in the MERCH comment in index.html. */
.merch-section { overflow: hidden; }   /* clips the tilted tape at the screen edges */

.caution-tape {
  position: relative;
  z-index: 2;
  width: 110%;
  margin: 0.5rem 0 2.75rem -5%;
  padding-block: 0.7rem;
  transform: rotate(-2deg);
  background: var(--fill);
  color: var(--on-fill);
  /* striped edges along the top and bottom */
  border-block: 10px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #0c080b 0 14px, var(--fill) 14px 28px) 10;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
  overflow: hidden;
}
/* The words slowly slide along the tape. Two identical halves
   make the loop seamless. */
.tape-track {
  display: flex;
  width: max-content;
  animation: tape-slide 40s linear infinite;
}
.tape-track span {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  font: 0.85rem/1 var(--font-arcade);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
/* small black diamond between phrases */
.tape-track span::after {
  content: "";
  width: 9px;
  height: 9px;
  background: #0c080b;
  transform: rotate(45deg);
}
@keyframes tape-slide {
  to { transform: translateX(-50%); }
}

/* Small strip of tape across each product picture */
.merch-art { overflow: hidden; }
.is-soon .merch-art::after { opacity: 0.4; }
.mini-tape {
  position: absolute;
  left: -15%;
  right: -15%;
  top: 40%;
  z-index: 1;
  padding-block: 0.4rem;
  transform: rotate(-12deg);
  text-align: center;
  background: var(--fill);
  color: var(--on-fill);
  font: 0.7rem/1 var(--font-arcade);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-block: 5px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #0c080b 0 8px, var(--fill) 8px 16px) 5;
}

/* "Coming soon" label where the shop button will go */
.merch-card .merch-soon {
  justify-self: start;
  padding: 0.45rem 1rem;
  border: 2px dashed var(--rose);
  border-radius: 999px;
  color: var(--rose);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.merch-notify {
  text-align: center;
  color: var(--blush);
  font-weight: 500;
}
.merch-notify a { font-weight: 700; }

/* ---------- 11. GAME ---------- */
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: start;
}
.game-info { display: grid; gap: 1rem; min-width: 0; }
.goal {
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--rose);
  background: var(--crypt);
  border-radius: 0 10px 10px 0;
}
.how-title { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.12em; color: var(--blush); }
.how-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
kbd {
  display: inline-block;
  min-width: 1.8em;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 6px;
  background: var(--crypt);
  font: 700 0.8rem/1.5 var(--font-body);
  text-align: center;
  color: var(--bone);
}
.best { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Reward panel */
.reward {
  padding: 1.2rem;
  border: 2px dashed var(--rose);
  border-radius: var(--radius);
  background: rgb(255 184 214 / 0.08);
  display: grid;
  gap: 0.6rem;
}
.reward-title { font-family: var(--font-display); font-size: 1.9rem; color: var(--rose); line-height: 1.1; }
.code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.code-row code {
  font: 1rem/1 var(--font-arcade);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: var(--ink);
  color: var(--blush);
  letter-spacing: 0.08em;
  user-select: all;
}
.copy-status { font-size: var(--step--1); color: var(--blush); min-height: 1.4em; }

/* Game stage */
.game-stage { display: grid; gap: 0.7rem; width: 100%; }
.hud {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font: 0.7rem/1.6 var(--font-arcade);
  color: var(--blush);
  font-variant-numeric: tabular-nums;
}
.hud b { color: var(--rose); font-weight: 400; }

.canvas-box {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  border: 3px solid var(--rose);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 40px rgb(255 184 214 / 0.2);
  /* The graveyard is always at night, so the game area keeps
     dark colors in both themes */
  --rose: #ffb8d6;
  --bone: #fff5f9;
  --blush: #ffe4f0;
  color-scheme: dark;
  background: #0c080b;
}
#game-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  background: rgb(12 8 11 / 0.82);
}
.overlay-title { font: 1.4rem/1.3 var(--font-arcade); color: var(--rose); }
.overlay-text { max-width: 22rem; color: var(--bone); }

.controls {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr 0.7fr;
  gap: 0.6rem;
}
.ctrl {
  min-height: 56px;
  border-radius: 12px;
  border: 2px solid var(--rose);
  background: var(--crypt);
  color: var(--bone);
  font: 1.4rem/1 var(--font-body);
  font-weight: 700;
  cursor: pointer;
  touch-action: none;           /* stops double tap zoom while playing */
  user-select: none;
  -webkit-user-select: none;
}
.ctrl:active, .ctrl.is-held { background: var(--fill); color: var(--on-fill); }
.ctrl-fire { font: 0.8rem/1 var(--font-arcade); background: var(--fill); color: var(--on-fill); }
.ctrl-fire:active, .ctrl-fire.is-held { background: var(--fill-hover); }
/* Pause icon: two bars drawn in CSS */
.pause-icon {
  display: inline-block;
  width: 14px;
  height: 16px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
  vertical-align: middle;
}

/* ---------- 12. FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
  background: var(--ink);
  color: var(--muted);
  font-size: var(--step--1);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 2rem;
}
.footer-brand { font-family: var(--font-display); font-size: 1.6rem; color: var(--rose); }

/* ---------- 13. RESPONSIVE ---------- */
/* Tablet and below */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .next-stream { justify-self: start; max-width: 420px; }
  .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .socials > li:first-child { grid-row: auto; grid-column: 1 / -1; }
  .game-layout { grid-template-columns: minmax(0, 1fr); }
  .game-stage { max-width: 480px; margin-inline: auto; }
}

/* Phones */
@media (max-width: 640px) {
  .next-stream { max-width: none; justify-self: stretch; }
  .socials { grid-template-columns: minmax(0, 1fr); }
  .spider { display: none; }      /* keeps the eyebrow text clear on phones */
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .tombstone { max-width: 190px; }
  .hud { font-size: 0.6rem; }
}

/* ---------- 13a. LARGE SCREENS ----------
   On big monitors the opening section spreads wider and scales up,
   so it fills the screen. Everything else keeps its normal width. */
@media (min-width: 1600px) {
  .hero .wrap,
  .site-header .wrap { max-width: 1320px; }   /* header lines up with the title */
  .hero { padding-block: 8.5rem 8rem; }
  .hero-title { font-size: clamp(8.5rem, 7.2vw, 10.5rem); }
  .hero-tag { max-width: 38rem; font-size: 1.45rem; }
  .eyebrow { font-size: 0.95rem; }
  .next-stream {
    max-width: 420px;
    padding: 4.4rem 2rem 2.2rem;
    border-radius: 50% 50% var(--radius) var(--radius) / 140px 140px var(--radius) var(--radius);
  }
  .next-day { font-size: 4.2rem; }
  .next-time { font-size: 1.25rem; }
  .next-when { font-size: 1.15rem; }
  .next-week li { font-size: 0.9rem; padding: 0.6rem 0.3rem; }
  .next-week b { font-size: 1.05rem; }
}

/* ---------- 13b. PHONE SIDE MENU ---------- */
@media (max-width: 760px) {
  /* Solid header on phones. A blur here would trap the fixed menu
     inside the header bar instead of the whole screen. */
  .site-header { backdrop-filter: none; background: var(--ink); }
  .header-inner { gap: 0.6rem; }
  .menu-btn { display: inline-flex; }

  /* Theme toggle shrinks to just its icon */
  .theme-toggle { margin-left: auto; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .theme-toggle .theme-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* The nav turns into a panel that slides in from the right */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: min(320px, 86vw);
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 0.8rem) max(1.4rem, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 1.5rem) 1.4rem;
    background: var(--crypt);
    border-left: 2px solid var(--rose);
    box-shadow: -20px 0 60px rgb(0 0 0 / 0.45);
    overflow-y: auto;
    transform: translateX(105%);
    visibility: hidden;            /* hidden from taps, Tab and screen readers when closed */
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  /* Spider web in the bottom corner of the menu */
  .site-nav::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 170px;
    aspect-ratio: 1;
    background: var(--web);
    -webkit-mask: var(--web-img) no-repeat 0 0 / 100% 100%;
    mask: var(--web-img) no-repeat 0 0 / 100% 100%;
    transform: scaleY(-1);
    pointer-events: none;
  }
  .menu-open .site-nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease;
  }

  .drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px dashed var(--line);
  }
  .drawer-title {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--blush);
  }
  .drawer-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--rose);
    background: transparent;
    color: var(--bone);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
  }

  .nav-list { flex-direction: column; gap: 0; position: relative; z-index: 1; }
  .nav-list a {
    display: block;
    padding: 0.7rem 0.2rem;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rose);
    border-bottom: 1px solid var(--line);
  }
  .nav-list a:hover { color: var(--bone); }

  .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 15;                   /* under the header (20), over the page */
    background: rgb(12 8 11 / 0.6);
    backdrop-filter: blur(2px);
  }
  .menu-backdrop[hidden] { display: none; }
}

/* ---------- 14. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}