/* ═══════════════════════════════════════════════════════════════════
   BLOCK BY BLOCK · Public frontend
   Hero/pixel theme. Iframe and tile grid styles below are LOCKED.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Bagel+Fat+One&family=Press+Start+2P&family=Inter:wght@400;600;700;800&display=swap');

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

html, body {
  margin: 0; padding: 0;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  color: #fff;
  min-height: 100vh;
}

body {
  background:
    linear-gradient(180deg,
      #4a73b8 0%,
      #6a93cc 30%,
      #a4c7e8 55%,
      #5fa838 70%,
      #4a8a2c 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

/* ─── Floating LEGO bricks scattered through the document ─── */
.bg-brick {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 56px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1.5px solid var(--brick-edge);
  background: linear-gradient(180deg,
    var(--brick-light) 0%,
    var(--brick-mid) 45%,
    var(--brick-dark) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.32),
    inset 0 -4px 0 rgba(0,0,0,0.28),
    0 6px 0 var(--brick-shadow),
    0 14px 24px rgba(0,0,0,0.35);
}
.bg-brick .stud {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--brick-edge);
  background:
    radial-gradient(circle at 32% 28%,
      var(--brick-light) 0%,
      var(--brick-mid) 55%,
      var(--brick-dark) 100%);
  box-shadow:
    inset 0 2.5px 1.5px rgba(255,255,255,0.55),
    inset 0 -2px 1.5px rgba(0,0,0,0.3),
    0 2px 0 rgba(0,0,0,0.3);
  position: relative;
}
.bg-brick .stud::after {
  content: '';
  position: absolute;
  top: 3px; left: 5px;
  width: 6px; height: 4px;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  filter: blur(0.5px);
}

/* ── Stud-count / size variants ── */
.bg-brick.size-1x1 { width: 50px;  padding: 0 8px;  }
.bg-brick.size-1x2 { width: 86px;  padding: 0 10px; }
.bg-brick.size-1x3 { width: 124px; padding: 0 12px; }
.bg-brick.size-1x4 { width: 162px; padding: 0 12px; }
.bg-brick.size-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 76px;
  height: 76px;
  padding: 9px;
  gap: 7px;
  place-items: center;
}

/* ── Color variants (CSS variables only — no positioning) ── */
.bg-brick.red {
  --brick-light: #FF6B7E; --brick-mid: #E40C20; --brick-dark: #9C0010;
  --brick-edge: rgba(50,0,5,0.65); --brick-shadow: rgba(80,0,5,0.5);
}
.bg-brick.yellow {
  --brick-light: #FFF59D; --brick-mid: #FFC107; --brick-dark: #B8860B;
  --brick-edge: rgba(70,40,0,0.65); --brick-shadow: rgba(100,60,0,0.5);
}
.bg-brick.blue {
  --brick-light: #67D0FF; --brick-mid: #00B0FF; --brick-dark: #0277BD;
  --brick-edge: rgba(0,30,60,0.65); --brick-shadow: rgba(0,40,80,0.5);
}
.bg-brick.green {
  --brick-light: #80E27E; --brick-mid: #00C853; --brick-dark: #1B7A2F;
  --brick-edge: rgba(0,40,10,0.65); --brick-shadow: rgba(0,60,15,0.5);
}
.bg-brick.orange {
  --brick-light: #FFCC80; --brick-mid: #FF6F00; --brick-dark: #BF360C;
  --brick-edge: rgba(70,20,0,0.7);  --brick-shadow: rgba(100,30,0,0.5);
}
.bg-brick.purple {
  --brick-light: #CE93D8; --brick-mid: #9C27B0; --brick-dark: #4A148C;
  --brick-edge: rgba(40,5,60,0.7);  --brick-shadow: rgba(60,10,80,0.5);
}
.bg-brick.pink {
  --brick-light: #F8BBD0; --brick-mid: #EC407A; --brick-dark: #880E4F;
  --brick-edge: rgba(60,5,30,0.7);  --brick-shadow: rgba(80,10,40,0.5);
}
.bg-brick.cyan {
  --brick-light: #80DEEA; --brick-mid: #00BCD4; --brick-dark: #006064;
  --brick-edge: rgba(0,40,50,0.7);  --brick-shadow: rgba(0,50,60,0.5);
}
.bg-brick.lime {
  --brick-light: #F0F4C3; --brick-mid: #C0CA33; --brick-dark: #827717;
  --brick-edge: rgba(40,40,0,0.7);  --brick-shadow: rgba(60,60,0,0.5);
}
.bg-brick.white {
  --brick-light: #FFFFFF; --brick-mid: #ECEFF1; --brick-dark: #B0BEC5;
  --brick-edge: rgba(70,80,90,0.55); --brick-shadow: rgba(90,100,110,0.4);
}

@media (max-width: 1024px) {
  .bg-brick { display: none; }
}

#bbb-app {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* ─── HERO HEADER ─── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: 28px;
  text-align: center;
}
.hero-brand {
  width: 100%;
  max-width: clamp(280px, 75vw, 1000px);
  margin: 0 auto;
}
.hero-supporting {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-brand {
  position: relative;
}
/* hero title CSS replaced with .hero-art image rule below */


.hero-supporting {
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.35);
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.hero-supporting strong { color: #FFD500; }

/* ─── SPONSOR CREDIT ─── */
.sponsor-credit-row {
  display: flex;
  justify-content: center;
  margin: 0 0 26px;
}
.sponsor-credit {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: #f5f5f2;
  padding: 0px 29px;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.10);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.80),
    inset 0 -2px 0 rgba(0,0,0,0.06),
    0 4px 0 rgba(0,0,0,0.12),
    0 8px 18px rgba(0,0,0,0.15);
  max-width: 100%;
}
.sponsor-credit-label {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #3d3d3d;
  text-transform: uppercase;
  white-space: nowrap;
}
.sponsor-credit-logo {
  height: 106px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .sponsor-credit { padding: 11px 20px; gap: 14px; flex-wrap: wrap; justify-content: center; }
  .sponsor-credit-label { font-size: 14px; letter-spacing: 0.12em; }
  .sponsor-credit-logo { height: 108px; }
}

/* ─── HERO ARTWORK (user-provided hero image) ─── */
.hero-art {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.45));
  border-radius: 12px;
}

/* ─── STATS ROW (3 cards) ─── */
.stats-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}

.card {
  background: linear-gradient(180deg, #2a3245, #1a1f30);
  border-radius: 14px;
  padding: 20px 24px;
  position: relative;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 -4px 0 rgba(0,0,0,0.45),
    0 6px 0 rgba(0,0,0,0.35),
    0 12px 24px rgba(0,0,0,0.3);
  border: 2px solid rgba(0,0,0,0.5);
}
.card-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Funds card */
.funds-card .amount {
  font-family: 'Press Start 2P', monospace;
  font-size: 44px;
  color: #FFD500;
  text-shadow:
    0 2px 0 #B8970A,
    0 4px 0 #7E6700,
    0 6px 12px rgba(0,0,0,0.5);
  line-height: 1.05;
  margin: 6px 0 14px;
  letter-spacing: -0.02em;
}
.funds-card .progress-wrap {
  margin: 8px 0;
  position: relative;
}
.progress {
  height: 18px;
  background: #0d0f18;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid #000;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
  position: relative;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #5BC04A 0%, #88D058 50%, #FFD500 100%);
  transition: width 0.8s ease;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -3px 0 rgba(0,0,0,0.3);
}
.pct {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  z-index: 2;
}
.funds-card .goal {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin-top: 10px;
}

/* Countdown card */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.cd-unit {
  background: #0d0f18;
  border-radius: 6px;
  padding: 10px 4px 7px;
  text-align: center;
  border: 1.5px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}
.cd-num {
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  color: #FFD500;
  line-height: 1;
  text-shadow: 0 2px 0 #7E6700;
}
.cd-lbl {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  margin-top: 6px;
}

/* Next unlock card */
.next-card {
  background: linear-gradient(180deg, #2a3245, #1a1f30);
  position: relative;
}
.next-card .next-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: #5BC04A;
  text-shadow: 0 2px 0 #2c5f1a;
  margin: 8px 0 6px;
  line-height: 1.3;
  word-break: break-word;
}
.next-card .next-at {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.next-card .next-at span {
  color: #FFD500;
  font-size: 14px;
}
.donate-btn {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, #5BC04A, #2c8f1a);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 12px 16px;
  border: 2px solid #1f5e0a;
  border-radius: 8px;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.3),
    inset 0 -3px 0 rgba(0,0,0,0.3),
    0 4px 0 #1a4f08,
    0 6px 16px rgba(0,0,0,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
  text-transform: uppercase;
  text-align: center;
}
.donate-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.3),
    inset 0 -3px 0 rgba(0,0,0,0.3),
    0 6px 0 #1a4f08,
    0 10px 20px rgba(0,0,0,0.45);
}
.donate-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.3),
    inset 0 -3px 0 rgba(0,0,0,0.3),
    0 2px 0 #1a4f08;
}

/* ─── PLAYFIELD ─── */
.playfield-wrap {
  background: linear-gradient(180deg, #1a1f30, #0d0f18);
  border-radius: 16px;
  padding: 6px;
  margin: 0 auto 22px;
  max-width: 984px;            /* desktop cap — 20% wider than the original 820px */
  width: 100%;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.08),
    inset 0 -5px 0 rgba(0,0,0,0.5),
    0 8px 0 rgba(0,0,0,0.35),
    0 16px 32px rgba(0,0,0,0.4);
  border: 2px solid rgba(0,0,0,0.6);
  position: relative;
}
/* Playfield window: fixed 16:9 frame. Iframe fills it exactly so the
   Three.js scene renders into the same aspect the user sees — centering
   is then whatever the scene's own camera does (consistent at every
   viewport size). Banner hidden via runtime CSS injection in shell.js. */
.playfield-window {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #BCD9F0 0%, #DCEAD0 65%, #C8B98E 100%);
}
.playfield-wrap iframe {
  position: absolute;
  inset: 0;          /* top:0 right:0 bottom:0 left:0 — exact fill */
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: linear-gradient(180deg, #BCD9F0 0%, #DCEAD0 65%, #C8B98E 100%);
}

/* ─── UNLOCKS SECTION ─── */
.unlocks-section {
  background: linear-gradient(180deg, rgba(20,28,42,0.92), rgba(15,20,30,0.95));
  border-radius: 16px;
  padding: 22px 22px 26px;
  margin-bottom: 22px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.08),
    inset 0 -5px 0 rgba(0,0,0,0.5),
    0 8px 0 rgba(0,0,0,0.35),
    0 16px 32px rgba(0,0,0,0.4);
  border: 2px solid rgba(0,0,0,0.6);
}
.unlocks-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.unlocks-header h2 {
  font-family: 'Bagel Fat One', cursive;
  font-size: 32px;
  color: #FFD500;
  text-shadow:
    2px 2px 0 #7E6700,
    4px 5px 12px rgba(0,0,0,0.4);
  margin: 0;
  letter-spacing: 0.02em;
}
.unlocks-header .hint {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.unlocks-header .hint strong { color: #5BC04A; }

/* ─── UNLOCKS WINDOW (bounded area below the heading; no scroll) ─── */
.unlocks-window {
  margin-top: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
  padding: 6px;
  border: 2px solid rgba(0,0,0,0.4);
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.3);
}
/* Override the locked grid's white background since it sits inside the dark window */
.unlocks-window .bbb-grid {
  background: transparent;
  border-radius: 8px;
  margin-top: 0;
}

/* ─── BOTTOM NAV ─── */
.bottom-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.nav-btn {
  background: linear-gradient(180deg, #2a3245, #1a1f30);
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 16px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.08),
    inset 0 -3px 0 rgba(0,0,0,0.4),
    0 4px 0 rgba(0,0,0,0.35),
    0 8px 16px rgba(0,0,0,0.3);
  border: 2px solid rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.1s;
}
.nav-btn:hover { transform: translateY(-2px); }
.nav-btn.active {
  background: linear-gradient(180deg, #5BC04A, #2c8f1a);
  border-color: #1f5e0a;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -3px 0 rgba(0,0,0,0.3),
    0 4px 0 #1a4f08,
    0 8px 16px rgba(0,0,0,0.4);
}

/* ─── FOOTER ─── */
.site-footer {
  text-align: center;
  padding: 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.site-footer .build-id {
  opacity: 0.5;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
}

/* ─── ADMIN OVERLAY (hidden in production, shown via ?admin=1) ─── */
#bbb-admin {
  display: none;
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  background: rgba(0,0,0,0.92); color: #fff; padding: 14px 18px;
  border-radius: 10px; font: 13px system-ui; max-width: 340px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
#bbb-admin.show { display: block; }
#bbb-admin input { width: 100px; padding: 6px 8px; border: 0; border-radius: 4px; font-size: 14px; }
#bbb-admin button { padding: 6px 14px; margin-left: 8px; border: 0; background: #F39200; color: #fff;
                    border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 11px; }
#bbb-admin .bbb-quick { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
#bbb-admin .bbb-quick button { padding: 3px 8px; font-size: 11px; background: rgba(255,255,255,0.15); margin: 0; }
#bbb-admin .bbb-seq-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); }
#bbb-admin .bbb-seq-section button { width: 100%; padding: 8px 14px; margin: 4px 0; background: #2D9D2D; font-size: 12px; }
#bbb-admin .bbb-seq-section button.stop { background: #B83030; }
#bbb-admin .bbb-seq-section select { width: 100%; padding: 4px; border-radius: 4px; font-size: 11px; }
#bbb-admin .bbb-build-id { font-size: 10px; opacity: 0.6; margin-top: 6px; }

.bbb-status { display: none; }
.bbb-status.show { display: block; background: #FFF3B0; border: 2px solid #F39200; color: #5A4500;
                   padding: 8px 14px; margin: 12px 0; border-radius: 8px; font-size: 13px; font-weight: 600; }

.bbb-debug { display: none; }
.bbb-debug.show {
  display: block; background: #000; color: #4FE; font: 11px/1.4 ui-monospace, monospace;
  padding: 12px 16px; margin-top: 16px; border-radius: 8px; max-height: 240px; overflow-y: auto;
}
.bbb-debug .src-parent { color: #FF8; }
.bbb-debug .src-iframe { color: #4FE; }
.bbb-debug .src-seq    { color: #F8F; font-weight: 700; }

/* ─── MOBILE ─── */
@media (max-width: 900px) {
  #bbb-app { padding: 16px 12px 32px; }
  .hero { grid-template-columns: 1fr; }
  .hero-title { font-size: 56px; }
  .stats-row { grid-template-columns: 1fr; }
  .bottom-nav { grid-template-columns: repeat(2, 1fr); }
  .funds-card .amount { font-size: 32px; }
  .cd-num { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   LOCKED — LEGO tile grid (5×8). DO NOT MODIFY these rules.
   ══════════════════════════════════════════════════════════════════ */

.bbb-grid { margin-top: 16px; background: #fff; border-radius: 14px; padding: 18px 18px;
              display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .bbb-tile {
    aspect-ratio: 1 / 1; position: relative; border-radius: 6px;
    background: var(--brick, #888); cursor: pointer;
    transition: transform 0.25s, filter 0.25s, box-shadow 0.25s;
    overflow: visible;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,0.20), inset 0 3px 0 rgba(255,255,255,0.22), 0 2px 4px rgba(0,0,0,0.3);
  }
  .bbb-stud-row {
    position: absolute; top: 3px; left: 0; right: 0;
    display: flex; justify-content: space-around; padding: 0 20%;
    pointer-events: none; z-index: 1;
  }
  .bbb-stud-row span {
    display: inline-block; width: 13px; height: 13px; border-radius: 50%;
    background: var(--brick, #888);
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.45), inset 0 -2px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.25);
  }
  .bbb-tile.locked:not(.group-locked) { filter: brightness(0.5) saturate(0.8); }
  .bbb-tile.current {
    outline: 2px solid #FFD500; outline-offset: 2px;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,0.20), inset 0 3px 0 rgba(255,255,255,0.22), 0 0 16px rgba(255,213,0,0.75), 0 2px 4px rgba(0,0,0,0.3);
    animation: bbbPulse 1.4s infinite ease-in-out;
    z-index: 3;
  }
  .bbb-tile.playing {
    outline: 3px solid #FE8A18; outline-offset: 2px;
    transform: scale(1.08); z-index: 10;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,0.20), inset 0 3px 0 rgba(255,255,255,0.22), 0 0 20px rgba(254,138,24,0.9), 0 2px 6px rgba(0,0,0,0.4);
  }
  @keyframes bbbPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
  .bbb-tile-n {
    position: absolute; top: 16px; left: 0; right: 0;
    text-align: center;
    font-size: 14px; font-weight: 800; line-height: 1; z-index: 2;
    letter-spacing: 0.10em;
    color: rgba(255,255,255,0.98); text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  }
  .bbb-tile.light .bbb-tile-n { color: rgba(0,0,0,0.85); text-shadow: 0 1px 0 rgba(255,255,255,0.55); }
  .bbb-tile-lock {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    background: rgba(8,10,14,0.95);
    border-radius: 6px;
    z-index: 5;
    opacity: 0; pointer-events: none;
    transition: opacity 0.55s ease;
  }
  .bbb-tile.group-locked .bbb-tile-lock { opacity: 1; }
  .bbb-tile-lock svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); width: 80px; height: 80px; }
  .bbb-tile-lock span { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 0.20em; }

/* ═══════════════════════════════════════════════════════════════════
   COMPACT TILE LAYOUT — overrides the locked rules above so 40 tiles
   fit inside .unlocks-window without aggressive scrolling.
   Layout: 10 columns × 4 rows · tiles ~125px each.
   ══════════════════════════════════════════════════════════════════ */
.unlocks-window .bbb-grid {
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  padding: 12px;
  background: transparent;
  border-radius: 8px;
  margin-top: 0;
}
.unlocks-window .bbb-stud-row {
  top: 2px;
  padding: 0 22%;
}
.unlocks-window .bbb-stud-row span {
  width: 7px;
  height: 7px;
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,0.45),
    inset 0 -1px 1.5px rgba(0,0,0,0.3),
    0 1px 1px rgba(0,0,0,0.25);
}
.unlocks-window .bbb-tile-n {
  top: 8px;
  font-size: 8px;
  letter-spacing: 0.06em;
}
.unlocks-window .bbb-tile-icon {
  /* Centered horizontally and clear of the UNLOCK label at the top.
     `top` is a FIXED pixel value so it stays clear of the label regardless of
     tile size — using a percentage broke this on mobile (22% of 60px = 13px,
     which lands right inside the UNLOCK label area). */
  position: absolute;
  top: 22px;
  left: 50%;
  width: 52%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.unlocks-window .bbb-tile-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.35));
}
.unlocks-window .bbb-tile-l {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  font-size: 8px;
  padding: 2px 3px;
  line-height: 1.18;
  border-radius: 3px;
  text-align: center;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 2;
}
.unlocks-window .bbb-tile-lock svg {
  width: 40px;
  height: 40px;
}
.unlocks-window .bbb-tile-lock span {
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* Mobile: drop to 5 columns so tiles are usable on a phone */
@media (max-width: 900px) {
  .unlocks-window .bbb-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .unlocks-window .bbb-tile-n  { font-size: 9px;  top: 9px;  }
  .unlocks-window .bbb-tile-l  { font-size: 9px; }
  .unlocks-window .bbb-tile-icon { top: 22px; width: 48%; }
  .unlocks-window .bbb-tile-lock svg { width: 42px; height: 42px; }
  .unlocks-window .bbb-tile-lock span { font-size: 10px; letter-spacing: 0.12em; }
}


/* ═══════════════════════════════════════════════════════════════════
   ADMIN CONSOLE  STYLES
   ═══════════════════════════════════════════════════════════════════ */

/* Footer login link */
.admin-footer-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  transition: all 0.15s;
}
.admin-footer-link:hover {
  color: #fff;
  background: rgba(91,192,74,0.25);
  border-color: rgba(91,192,74,0.5);
}

/* Modal scaffolding (shared by login + panel) */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: #2c3e50;
}
.admin-modal[hidden] { display: none; }
.admin-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,25,40,0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.admin-modal-shell,
.admin-panel-shell {
  position: relative;
  background: #f4f6f9;
  border-radius: 14px;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.7),
    inset 0 -4px 0 rgba(0,0,0,0.18),
    0 12px 0 rgba(0,0,0,0.25),
    0 24px 48px rgba(0,0,0,0.45);
  border: 2px solid rgba(0,0,0,0.4);
}
.admin-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.15);
  color: #2c3e50;
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.admin-modal-close:hover {
  background: #DC2626;
  color: #fff;
  border-color: #991B1B;
}

/* ── LOGIN MODAL ────────────────────────────── */
.admin-login-shell {
  width: min(440px, 92vw);
  padding: 32px 28px 24px;
}
.admin-modal-header { margin-bottom: 22px; text-align: center; }
.admin-modal-header h3 {
  margin: 0 0 4px;
  font-family: 'Lilita One', sans-serif;
  font-size: 26px;
  color: #003366;
  letter-spacing: 0.02em;
}
.admin-modal-sub {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── ADMIN PANEL ────────────────────────────── */
.admin-panel-shell {
  width: min(1120px, 95vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: linear-gradient(180deg, #1e3a5f 0%, #0f2440 100%);
  border-radius: 12px 12px 0 0;
  border-bottom: 3px solid #5BC04A;
  color: #fff;
}
.admin-panel-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-panel-icon { font-size: 26px; }
.admin-panel-title h2 {
  margin: 0;
  font-family: 'Lilita One', sans-serif;
  font-size: 24px;
  letter-spacing: 0.02em;
}
.admin-panel-build {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #5BC04A;
  background: rgba(91,192,74,0.15);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(91,192,74,0.4);
}
.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-header-user {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(91,192,74,0.2);
  border: 1px solid rgba(91,192,74,0.5);
  border-radius: 4px;
}
.admin-panel-header .admin-modal-close {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  position: static;
}
.admin-panel-body {
  overflow-y: auto;
  padding: 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.admin-panel-body::-webkit-scrollbar { width: 12px; }
.admin-panel-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 6px; }
.admin-panel-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5BC04A, #2c8f1a);
  border-radius: 6px;
  border: 2px solid rgba(0,0,0,0.1);
}

body.admin-open { overflow: hidden; }

/* ── SECTION ────────────────────────────────── */
.admin-section {
  background: #fff;
  border: 2px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}
.admin-section h3 {
  margin: 0 0 14px;
  font-family: 'Lilita One', sans-serif;
  font-size: 20px;
  color: #0f2440;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.01em;
  border-bottom: 2px solid rgba(0,0,0,0.08);
  padding-bottom: 10px;
}
.admin-h-icon { font-size: 22px; }
.admin-help {
  margin: 0 0 12px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}
.admin-help code {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 2px 6px;
  border-radius: 3px;
  color: #92400e;
}

/* ── FORM FIELDS ────────────────────────────── */
.admin-field { margin-bottom: 14px; }
.admin-field label,
.admin-field-row label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
  margin-bottom: 6px;
}
.admin-field input,
.admin-field-row input {
  width: 100%;
  padding: 10px 12px;
  font: 14px 'Inter', sans-serif;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.18);
  border-radius: 6px;
  color: #111827;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-field input:focus,
.admin-field-row input:focus {
  outline: none;
  border-color: #5BC04A;
  box-shadow: 0 0 0 3px rgba(91,192,74,0.2);
}
.admin-field input[readonly] {
  background: #f3f4f6;
  color: #6b7280;
}

.admin-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.admin-field-row label {
  margin-bottom: 0;
  min-width: 140px;
  flex-shrink: 0;
}
.admin-field-row input { flex: 1; min-width: 120px; }
.admin-field-row input[type="number"] { max-width: 140px; }
.admin-field-row input[type="datetime-local"] { max-width: 240px; flex: 0 1 auto; }
.admin-prefix {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #2c8f1a;
  font-weight: 800;
}

/* ── BUTTONS ────────────────────────────────── */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font: 700 13px 'Inter', sans-serif;
  letter-spacing: 0.04em;
  border-radius: 6px;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.admin-btn-primary {
  background: linear-gradient(180deg, #6BD058 0%, #5BC04A 50%, #2c8f1a 100%);
  border-color: #1B5E0F;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.35),
    inset 0 -2.5px 0 rgba(0,0,0,0.25),
    0 3px 0 rgba(0,0,0,0.25);
}
.admin-btn-primary:hover {
  background: linear-gradient(180deg, #80E060 0%, #6BD058 50%, #2c8f1a 100%);
  transform: translateY(-1px);
}
.admin-btn-primary:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.2),
    inset 0 -2.5px 0 rgba(0,0,0,0.2),
    0 1px 0 rgba(0,0,0,0.2);
}
.admin-btn-block { width: 100%; padding: 12px 16px; font-size: 14px; }
.admin-btn-ghost {
  background: transparent;
  border-color: rgba(0,0,0,0.25);
  color: #4b5563;
}
.admin-btn-ghost:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.4);
  color: #111827;
}
.admin-panel-header .admin-btn-ghost {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.admin-panel-header .admin-btn-ghost:hover {
  background: rgba(255,255,255,0.2);
}
.admin-btn-danger {
  background: linear-gradient(180deg, #F87171, #DC2626);
  border: 2px solid #7F1D1D;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  padding: 9px 16px;
  font: 700 12px 'Inter', sans-serif;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.3), 0 2px 0 rgba(0,0,0,0.25);
  transition: all 0.12s;
}
.admin-btn-danger:hover {
  background: linear-gradient(180deg, #FB8484, #B91C1C);
  transform: translateY(-1px);
}
.admin-btn-quick {
  background: linear-gradient(180deg, #FFF4C9, #FFD740);
  border: 2px solid #B58B00;
  color: #4D3D00;
  padding: 8px 14px;
  font: 700 12px 'Inter', sans-serif;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.5), 0 2px 0 rgba(0,0,0,0.18);
  transition: all 0.12s;
}
.admin-btn-quick:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.6), 0 3px 0 rgba(0,0,0,0.2);
}
.admin-btn-quick:active { transform: translateY(1px); }

/* ── FUNDS DISPLAY ──────────────────────────── */
.admin-current-display {
  display: flex;
  gap: 24px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #0f2440 0%, #1e3a5f 100%);
  border-radius: 8px;
  margin-bottom: 14px;
  border: 2px solid rgba(0,0,0,0.4);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.1), inset 0 -2px 0 rgba(0,0,0,0.3);
}
.admin-current-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-current-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5BC04A;
  font-weight: 700;
}
.admin-current-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  color: #FFD740;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.admin-current-of { font-size: 12px; color: rgba(255,255,255,0.6); }

.admin-quick-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.admin-row-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
  font-weight: 700;
  margin-right: 4px;
}
.admin-milestone-block { margin-top: 10px; }
.admin-milestone-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 4px;
  margin-top: 6px;
}
.admin-ms-btn {
  aspect-ratio: 1/1;
  background: #e5e7eb;
  border: 1px solid #9ca3af;
  border-radius: 4px;
  font: 700 11px 'Inter', sans-serif;
  color: #374151;
  cursor: pointer;
  transition: all 0.1s;
  padding: 0;
}
.admin-ms-btn:hover {
  background: #5BC04A;
  border-color: #2c8f1a;
  color: #fff;
  transform: scale(1.1);
  z-index: 2;
  position: relative;
}
.admin-ms-btn:nth-child(10n) {
  background: #E91E63;
  border-color: #880E4F;
  color: #fff;
}

/* ── SCHEDULE STATUS PILL ───────────────────── */
.admin-status {
  display: inline-block;
  padding: 5px 12px;
  font: 700 11px 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 2px solid;
}
.admin-status.idle  { background: #f3f4f6; border-color: #9ca3af; color: #4b5563; }
.admin-status.pre   { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.admin-status.live  { background: #d1fae5; border-color: #10b981; color: #065f46; }
.admin-status.ended { background: #fee2e2; border-color: #ef4444; color: #991b1b; }

/* ── TILE PREVIEW MINI-GRID ─────────────────── */
.admin-tile-preview {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  background: linear-gradient(180deg, #0f2440, #1e3a5f);
  border-radius: 8px;
  padding: 10px;
  border: 2px solid rgba(0,0,0,0.4);
  margin-bottom: 10px;
}
.admin-prev-tile {
  position: relative;
  aspect-ratio: 1.6 / 1;
  background: var(--c, #888);
  border: 1.5px solid rgba(0,0,0,0.5);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  filter: brightness(0.5) saturate(0.7);
  transition: filter 0.2s;
}
.admin-prev-tile.unlocked { filter: none; }
.admin-prev-tile.current {
  filter: none;
  box-shadow:
    0 0 0 2px #FFEE00,
    0 0 12px rgba(255,238,0,0.7);
  z-index: 2;
}
.admin-prev-tile.group-locked {
  filter: brightness(0.3) saturate(0.4);
  background: #334155;
}
.admin-prev-tile.group-locked .admin-prev-n,
.admin-prev-tile.group-locked .admin-prev-l { opacity: 0.4; }
.admin-prev-n {
  font: 800 11px 'Inter', sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
  line-height: 1;
}
.admin-prev-l {
  font: 700 8px 'Inter', sans-serif;
  color: #fff;
  text-align: center;
  padding: 0 2px;
  margin-top: 2px;
  line-height: 1.1;
  max-height: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.5);
  border-radius: 2px;
  padding: 1px 3px;
}
.admin-tile-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #4b5563;
}
.admin-tile-legend span { display: flex; align-items: center; gap: 6px; }
.leg-box {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: 2px;
  vertical-align: middle;
}
.leg-unlocked { background: #FF1744; }
.leg-current  { background: #FF1744; box-shadow: 0 0 0 1.5px #FFEE00; }
.leg-locked   { background: #FF1744; filter: brightness(0.5); }
.leg-group    { background: #334155; }

/* ── LOG TABLE ──────────────────────────────── */
.admin-log-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.admin-log-count {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
  font-weight: 700;
}
.admin-log-wrap {
  max-height: 280px;
  overflow-y: auto;
  border: 2px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  background: #f9fafb;
}
.admin-log-wrap::-webkit-scrollbar { width: 10px; }
.admin-log-wrap::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
.admin-log-wrap::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 5px; }
.admin-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.admin-log-table thead { background: #e5e7eb; position: sticky; top: 0; z-index: 1; }
.admin-log-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4b5563;
  border-bottom: 2px solid #d1d5db;
}
.admin-log-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #e5e7eb;
  color: #1f2937;
  vertical-align: top;
}
.admin-log-table tbody tr:hover { background: rgba(91,192,74,0.06); }
.admin-log-table code {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  background: #1e3a5f;
  color: #5BC04A;
  padding: 2px 6px;
  border-radius: 3px;
}
.admin-log-empty {
  text-align: center;
  color: #9ca3af;
  padding: 20px !important;
  font-style: italic;
}

/* ── INLINE MESSAGES ────────────────────────── */
.admin-msg {
  margin-top: 10px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 4px;
  display: none;
}
.admin-msg.error {
  display: block;
  background: #fee2e2;
  border: 1px solid #ef4444;
  color: #991b1b;
}
.admin-msg.success {
  display: block;
  background: #d1fae5;
  border: 1px solid #10b981;
  color: #065f46;
}

/* ── MOBILE ─────────────────────────────────── */
@media (max-width: 700px) {
  .admin-panel-shell { width: 98vw; max-height: 96vh; }
  .admin-panel-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .admin-panel-title h2 { font-size: 18px; }
  .admin-panel-body { padding: 12px; }
  .admin-section { padding: 12px; }
  .admin-section h3 { font-size: 16px; }
  .admin-current-display { flex-direction: column; gap: 12px; }
  .admin-current-value { font-size: 18px; }
  .admin-field-row { flex-direction: column; align-items: stretch; }
  .admin-field-row label { min-width: 0; }
  .admin-milestone-grid { grid-template-columns: repeat(10, 1fr); }
  .admin-tile-preview { grid-template-columns: repeat(5, 1fr); }
  .admin-log-table th, .admin-log-table td { padding: 6px 6px; font-size: 11px; }
  .admin-log-table th:nth-child(3), .admin-log-table td:nth-child(3),
  .admin-log-table th:nth-child(4), .admin-log-table td:nth-child(4) { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE OVERHAUL  —  DESKTOP / TABLET / MOBILE
   Appended last; later source-order wins specificity ties.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── FLUID TYPE/SPACING (applies everywhere) ─── */
#bbb-app {
  max-width: 1400px;
  padding-top:    clamp(14px, 2.4vw, 32px);
  padding-right:  clamp(10px, 2vw,   24px);
  padding-bottom: clamp(28px, 4vw,   64px);
  padding-left:   clamp(10px, 2vw,   24px);
}

/* Hero image: scale by container width (which is itself clamped) */
.hero-art {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* Countdown digits: fluid */
.cd-digits .cd-digit,
.cd-num {
  font-size: clamp(18px, 2.8vw, 30px);
}

/* Stat-card headings: fluid */
.stat-card h3 {
  font-size: clamp(13px, 1.4vw, 16px);
}

/* Funds amount: fluid */
.funds-card .amount {
  font-size: clamp(22px, 3.2vw, 36px);
}


/* ─── TABLET / iPad  (601 – 1024 px)  ─────────────────────────── */
@media (min-width: 601px) and (max-width: 1024px) {

  /* Hero already flex-column; just tighten gaps + cap image at tablet */
  .hero { gap: 16px !important; margin-bottom: 20px; }
  .hero-brand { max-width: min(560px, 80%); }
  .hero-supporting { font-size: 14px; padding: 14px 16px; max-width: 560px; }

  /* Sponsor credit pill — keep horizontal */
  .sponsor-credit { padding: 12px 25px; }
  .sponsor-credit-logo { height: 127px; }

  /* Stats row: stay 3-column but tighter */
  .stats-row {
    grid-template-columns: 1.3fr 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 18px;
  }
  .stat-card { padding: 14px 14px !important; }

  /* Playfield slightly less tall */
  .playfield-window { max-height: 64vh; }

  /* Tiles: 8 columns × 5 rows */
  .unlocks-window .bbb-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 7px !important;
    padding: 10px !important;
  }
  .unlocks-window .bbb-tile-n  { font-size: 9px;  top: 9px;  }
  .unlocks-window .bbb-tile-l  { font-size: 9px; padding: 2px 4px; }
  .unlocks-window .bbb-tile-icon { top: 22px; width: 50%; }
  .unlocks-window .bbb-tile-lock svg { width: 44px; height: 44px; }
  .unlocks-window .bbb-tile-lock span { font-size: 10px; letter-spacing: 0.12em; }
  .unlocks-window .bbb-stud-row span { width: 8px; height: 8px; }

  /* Section headings on the unlocks panel */
  .unlocks-section { padding: 18px 16px 20px; }
  .unlocks-header h2 { font-size: 22px; }

  /* Floating decorative bricks: out of the way on tablet */
  .bg-brick { display: none; }

  /* Bottom nav: two columns, narrower */
  .bottom-nav { max-width: 480px; }
}


/* ─── MOBILE  (≤ 600 px)  ─────────────────────────────────────── */
@media (max-width: 600px) {

  /* Hero stack tight on mobile */
  .hero { gap: 12px !important; margin-bottom: 16px !important; }
  .hero-brand { max-width: 95%; }
  .hero-supporting {
    font-size: 13px;
    padding: 12px 14px;
    line-height: 1.45;
    max-width: 95%;
  }

  /* Sponsor credit pill */
  .sponsor-credit-row { margin-bottom: 18px; }
  .sponsor-credit {
    padding: 10px 16px;
    gap: 11px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .sponsor-credit-label { font-size: 14px; letter-spacing: 0.10em; }
  .sponsor-credit-logo  { height: 94px; }

  /* Stats: full stack */
  .stats-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .stat-card { padding: 14px !important; }
  .cd-digits .cd-digit,
  .cd-num { font-size: 22px; }
  .funds-card .amount { font-size: 28px; }
  .donate-btn { width: 100%; padding: 14px; font-size: 14px; }

  /* Playfield: shorter cap, less padding */
  .playfield-wrap { padding: 4px; margin-bottom: 16px; }
  .playfield-window { aspect-ratio: unset; height: 48vw; max-height: 55vh; }

  /* Unlocks: 4 columns × 10 rows on phones (was 5×8 — 5 was too cramped) */
  .unlocks-section { padding: 14px 12px 16px; margin-bottom: 16px; }
  .unlocks-header h2 { font-size: 18px; }
  .unlocks-header .hint { font-size: 11px; }
  .unlocks-window { padding: 4px; }
  .unlocks-window .bbb-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .unlocks-window .bbb-tile-n  { font-size: 10px; top: 9px;  }
  .unlocks-window .bbb-tile-l  { font-size: 9px;  padding: 2px 3px; }
  .unlocks-window .bbb-tile-icon { top: 22px; width: 50%; }
  .unlocks-window .bbb-tile-lock svg { width: 42px; height: 42px; }
  .unlocks-window .bbb-tile-lock span { font-size: 10px; letter-spacing: 0.10em; }
  .unlocks-window .bbb-stud-row span { width: 9px; height: 9px; }

  /* Bottom nav: single column */
  .bottom-nav {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-width: 380px !important;
  }
  .nav-btn { padding: 14px; font-size: 14px; }

  /* Footer */
  .site-footer { padding: 12px; font-size: 10px; }
  .admin-footer-link { margin-top: 8px; font-size: 10px; padding: 4px 10px; }

  /* Decorative bricks: hidden */
  .bg-brick { display: none; }
}


/* ─── EXTRA SMALL  (≤ 380 px, older phones)  ──────────────────── */
@media (max-width: 380px) {
  #bbb-app { padding: 10px 8px 24px; }
  .hero-art { max-height: 160px; }
  .hero-supporting { font-size: 12px; padding: 10px 12px; }
  .stat-card { padding: 12px !important; }
  .cd-digits .cd-digit,
  .cd-num { font-size: 18px; }
  .funds-card .amount { font-size: 24px; }
  .unlocks-window .bbb-grid { gap: 5px !important; padding: 6px !important; }
  .unlocks-window .bbb-tile-n  { font-size: 9px; top: 7px; }
  .unlocks-window .bbb-tile-l  { font-size: 8px; padding: 1px 3px; }
  .unlocks-window .bbb-tile-icon { top: 19px; width: 54%; }
  .unlocks-window .bbb-tile-lock svg { width: 36px; height: 36px; }
  .unlocks-window .bbb-tile-lock span { font-size: 9px; }
  .unlocks-window .bbb-stud-row span { width: 7px; height: 7px; }
}


/* ═══════════════════════════════════════════════════════════════════
   BACKGROUND MUSIC TOGGLE  —  LEGO-brick styled floating button
   ═══════════════════════════════════════════════════════════════════ */
.music-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  background: linear-gradient(180deg, #FF7AB6 0%, #E91E63 45%, #880E4F 100%);
  border: 2px solid rgba(50,5,30,0.75);
  border-radius: 9px;
  color: #fff;
  font: 800 11px 'Inter', system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -3px 0 rgba(0,0,0,0.28),
    0 4px 0 rgba(80,0,40,0.55),
    0 10px 18px rgba(0,0,0,0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
.music-toggle:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -3px 0 rgba(0,0,0,0.28),
    0 5px 0 rgba(80,0,40,0.55),
    0 12px 22px rgba(0,0,0,0.4);
}
.music-toggle:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.3),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    0 2px 0 rgba(80,0,40,0.5),
    0 4px 8px rgba(0,0,0,0.3);
}
.music-toggle.playing {
  animation: musicPulse 1.8s ease-in-out infinite;
}
@keyframes musicPulse {
  0%, 100% {
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.35),
      inset 0 -3px 0 rgba(0,0,0,0.28),
      0 4px 0 rgba(80,0,40,0.55),
      0 10px 18px rgba(0,0,0,0.35),
      0 0 0 0 rgba(255,122,182,0);
  }
  50% {
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.45),
      inset 0 -3px 0 rgba(0,0,0,0.28),
      0 4px 0 rgba(80,0,40,0.55),
      0 10px 18px rgba(0,0,0,0.35),
      0 0 0 14px rgba(255,122,182,0);
    background: linear-gradient(180deg, #FFA0CC 0%, #FF1276 45%, #880E4F 100%);
  }
}
.music-toggle .music-stud {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFB8D6 0%, #E91E63 60%, #6F0042 100%);
  border: 1.4px solid rgba(50,5,30,0.7);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.45),
    inset 0 -1px 1px rgba(0,0,0,0.3),
    0 1px 0 rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.music-toggle .music-icon {
  flex-shrink: 0;
}
.music-toggle .music-label {
  white-space: nowrap;
}

@media (min-width: 601px) and (max-width: 1024px) {
  /* Tablet: compact (icon-only) so it can't overlap the centered hero */
  .music-toggle {
    padding: 9px 11px 9px 10px;
    gap: 6px;
  }
  .music-toggle .music-label { display: none; }
}
@media (max-width: 600px) {
  /* Mobile: small chip in bottom-right */
  .music-toggle {
    top: auto;
    bottom: 14px;
    right: 14px;
    padding: 8px 10px 8px 9px;
    gap: 6px;
    font-size: 10px;
  }
  .music-toggle .music-label { display: none; }
  .music-toggle .music-stud { width: 10px; height: 10px; }
}

/* Landscape mobile — give the playfield maximum height */
@media (max-height: 500px) {
  .playfield-window {
    max-height: 100vh !important;
    aspect-ratio: unset !important;
    height: 100vh !important;
  }
  .playfield-wrap {
    padding: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
  }
}

/* Portrait mobile rotation prompt */
.rotate-prompt {
  display: none;
}
@media (max-width: 600px) and (orientation: portrait) {
  .rotate-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.04em;
  }
}