.youtube-canvas {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

.banner-stage {
  width: 100%;
  height: calc(100vw * 423 / 2560);
  max-height: calc(100% * 423 / 1440);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 78% 54%, rgba(255,184,43,.34), transparent 30%),
    linear-gradient(100deg, #070806 0%, #0a0b09 38%, #050505 64%, #171108 100%);
}

.banner-bg,
.banner-bg > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.banner-bg::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background:
    radial-gradient(circle at 10% 55%, rgba(255,189,46,.42), transparent 13%),
    radial-gradient(circle at 93% 52%, rgba(255,213,106,.38), transparent 18%),
    repeating-linear-gradient(112deg, transparent 0 68px, rgba(255,255,255,.035) 69px 71px);
  mix-blend-mode: screen;
  animation: hazeDrift 9s ease-in-out infinite;
}

.banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,.28) 30%, rgba(0,0,0,.04) 62%, rgba(0,0,0,.36)),
    radial-gradient(ellipse at center, transparent 32%, rgba(0,0,0,.74) 100%);
}

.grain {
  opacity: .18;
  background-image: radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.5px);
  background-size: 7px 7px;
  mix-blend-mode: overlay;
}

.stadium-light {
  width: 36%;
  height: 150%;
  top: -28%;
  filter: blur(2px);
  opacity: .82;
}

.light-left {
  left: -10%;
  background: conic-gradient(from 30deg, transparent, rgba(255,180,33,.8), transparent 40%, transparent);
}

.light-right {
  left: auto;
  right: -6%;
  background: conic-gradient(from 210deg, transparent, rgba(255,205,82,.86), transparent 40%, transparent);
}

.speed-lines {
  background: repeating-linear-gradient(112deg, transparent 0 74px, rgba(255,198,54,.22) 75px, transparent 78px);
  opacity: .42;
}

.athlete {
  opacity: .28;
  filter: contrast(1.3) saturate(.25);
  background: linear-gradient(145deg, transparent 42%, rgba(255,255,255,.5) 43% 44%, transparent 45%),
    radial-gradient(ellipse at 50% 20%, #fff 0 8%, transparent 9%),
    radial-gradient(ellipse at 50% 45%, #fff 0 18%, transparent 19%),
    linear-gradient(80deg, transparent 41%, #fff 42% 47%, transparent 48%);
}

.athlete-left {
  width: 270px;
  height: 250px;
  left: 22px;
  top: 188px;
  transform: skewX(-12deg) scaleX(1.12);
}

.athlete-center {
  width: 210px;
  height: 190px;
  left: 820px;
  top: 240px;
  transform: rotate(-8deg);
}

.athlete-right {
  width: 330px;
  height: 310px;
  right: 48px;
  top: 160px;
  transform: rotate(12deg);
  opacity: .45;
}

.safe-area {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 29% 38% 33%;
  grid-template-rows: 1fr clamp(30px, 3.5vw, 52px);
  gap: 0 0.8%;
  padding: 1.2% 0.6% 0.5%;
  overflow: hidden;
}

.safe-area::before {
  content: "";
  position: absolute;
  inset: 0;
  border-inline: 1px dashed rgba(255,255,255,.38);
  background: linear-gradient(90deg, rgba(255,255,255,.03), transparent 12%, transparent 88%, rgba(255,255,255,.03));
  opacity: var(--safe-opacity, .5);
  pointer-events: none;
}

.brand-panel {
  display: grid;
  grid-template-columns: clamp(90px, 9.5vw, 160px) minmax(0, 1fr);
  align-items: center;
  align-content: center;
  min-width: 0;
  overflow: hidden;
  padding-left: 0.5%;
}

.logo-orbit {
  width: clamp(88px, 9.2vw, 156px);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.logo-ring {
  position: absolute;
  inset: 0;
  border: clamp(4px, 0.45vw, 8px) solid var(--gold-100);
  border-radius: 50%;
  background: rgba(0,0,0,.70);
  animation: ringPulse 3.8s ease-in-out infinite;
}

.logo-ring::before,
.logo-ring::after {
  content: "";
  position: absolute;
  inset: clamp(-8px, -1vw, -14px);
  border-radius: inherit;
  border: 1.5px solid rgba(255,197,55,.30);
}

.logo-ring::after {
  inset: clamp(-12px, -1.5vw, -22px);
  border-color: rgba(255,255,255,.14);
  clip-path: polygon(0 0, 52% 0, 40% 100%, 0 100%);
}

.logo-img {
  width: clamp(68px, 7.2vw, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  object-fit: contain;
}

.brand-copy {
  min-width: 0;
  text-transform: uppercase;
  padding-left: clamp(4px, 0.4vw, 8px);
  overflow: hidden;
}

.brand-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  line-height: .88;
  letter-spacing: -0.5px;
  font-size: clamp(22px, 4.0vw, 64px);
  text-shadow: 0 8px 24px rgba(0,0,0,.9);
}

.brand-copy h1 span,
.brand-copy h1 strong {
  display: block;
  white-space: nowrap;
}

.brand-copy h1 span {
  font-weight: 800;
  color: #fff;
}

.brand-copy h1 strong {
  font-weight: 900;
  background: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-200) 40%, var(--gold-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-copy p {
  margin: clamp(4px, 0.6vw, 10px) 0 0;
  color: #fff;
  font: italic 800 clamp(9px, 1.15vw, 18px)/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-copy p::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--gold-200);
  flex-shrink: 0;
}

.brand-copy p::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--gold-200);
  flex-shrink: 0;
}

.brand-copy p em {
  font-style: italic;
  color: var(--gold-200);
}

.mission-panel {
  text-align: center;
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  justify-content: flex-start;
  gap: 0;
}

.mission-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 2px;
  color: var(--gold-100);
  font: 800 clamp(9px, 1.15vw, 18px)/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: clamp(4px, 0.6vw, 9px);
}

.mission-kicker::before,
.mission-kicker::after {
  content: "»";
  letter-spacing: 0;
  font-size: .9em;
}

.mission-kicker::before {
  content: "«";
}

.mission-panel h2 {
  margin: 0 0 0.4%;
  font: italic 900 clamp(18px, 3.2vw, 52px)/.94 var(--font-display);
  text-transform: uppercase;
  text-shadow: 0 6px 20px rgba(0,0,0,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-panel h2 span {
  background: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hud-panel {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg,
      rgba(20,16,4,.78) 0%,
      rgba(6,6,4,.90)   100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,201,74,.22),
    inset 0 0 40px rgba(255,195,50,.06),
    0 8px 32px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,201,74,.10);
  backdrop-filter: blur(10px);
}

/* ═══════════════════════════════════════════════
   Subscriber card — progress-bar-as-hero layout
   ═══════════════════════════════════════════════ */

.subscriber-card {
  position: relative;
  border-radius: clamp(8px, 1vw, 18px);
  padding: clamp(6px, 0.8vw, 14px) clamp(8px, 1.2vw, 20px) clamp(6px, 0.8vw, 14px);
  display: grid;
  grid-template-columns: 1fr clamp(80px, 9vw, 138px);
  align-items: center;
  gap: 0 clamp(6px, 0.8vw, 14px);
  overflow: hidden;
}

.subscriber-card::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -18%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: goldSweep 5.4s ease-in-out infinite;
  pointer-events: none;
}

/* ── Big progress bar that holds the subscriber count ── */
.sub-progress-wrap {
  min-width: 0;
}

.sub-progress-track {
  position: relative;
  height: clamp(44px, 6.2vw, 100px);
  border-radius: clamp(6px, 0.8vw, 14px);
  border: 1.5px solid rgba(255,201,74,.55);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.65) 100%);
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.75),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 0 20px rgba(255,195,47,.20);
}

/* the golden fill */
.sub-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.88) 0%,
    var(--gold-100)       15%,
    var(--gold-200)       42%,
    var(--gold-300)       70%,
    var(--gold-500)       100%
  );
  box-shadow:
    0 0 14px rgba(255,194,42,.85),
    0 0 36px rgba(255,194,42,.50),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.25);
  transition: width 1200ms cubic-bezier(.16,.84,.44,1);
}

.sub-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent             0,
    transparent             20px,
    rgba(255,255,255,.14)   20px,
    rgba(255,255,255,.14)   22px
  );
  animation: barSpark 2.4s linear infinite;
  border-radius: inherit;
}

/* subscriber count + label centered in the track */
.sub-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  gap: clamp(1px, 0.15vw, 3px);
  pointer-events: none;
}

.sub-progress-label strong {
  display: block;
  font: 900 clamp(26px, 4.8vw, 80px)/.88 var(--font-display);
  white-space: nowrap;
  color: #fff;
  text-shadow:
    0 2px 12px rgba(0,0,0,.90),
    0 0 28px rgba(0,0,0,.70);
  letter-spacing: -0.5px;
}

.sub-progress-label span {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.4vw, 7px);
  color: rgba(255,255,255,.92);
  font: 700 clamp(8px, 1.0vw, 15px)/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 6px rgba(0,0,0,.80);
}

.sub-progress-label span::before {
  content: "";
  display: inline-block;
  width: clamp(5px, 0.5vw, 8px);
  height: clamp(5px, 0.5vw, 8px);
  border: 2px solid var(--gold-200);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Right column: next goal ── */
.next-goal {
  border-left: 1px solid rgba(255,201,74,.28);
  padding-left: clamp(6px, 0.8vw, 12px);
  display: grid;
  align-content: center;
  gap: clamp(1px, 0.15vw, 3px);
  text-transform: uppercase;
}

.next-goal span {
  color: var(--gold-100);
  font: 700 clamp(8px, 1.0vw, 15px)/1 var(--font-display);
  letter-spacing: 1px;
}

.next-goal strong {
  font: 900 clamp(24px, 3.8vw, 62px)/.90 var(--font-display);
  background: linear-gradient(180deg, var(--gold-100), var(--gold-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.next-goal em {
  color: rgba(255,255,255,.80);
  font: italic 700 clamp(8px, 1.0vw, 15px)/1 var(--font-display);
}

/* ── Old progress-shell/track hidden (removed from HTML) ── */
.progress-shell,
.progress-track,
.progress-fill { display: none; }

.cta-strip {
  height: clamp(26px, 3.1vw, 50px);
  margin: 0.6% 0.6% 0;
  display: grid;
  grid-template-columns: clamp(28px, 2.8vw, 46px) 1fr clamp(24px, 2.4vw, 40px);
  align-items: center;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font: italic 900 clamp(11px, 1.7vw, 26px)/1 var(--font-display);
  border: 1.5px solid var(--line-bright);
  clip-path: polygon(3.5% 0, 96.5% 0, 100% 50%, 96.5% 100%, 3.5% 100%, 0 50%);
  background: linear-gradient(90deg, rgba(255,196,42,.18), rgba(5,5,4,.80), rgba(255,196,42,.18));
  animation: ctaPulse 3s ease-in-out infinite;
}

.cta-strip svg {
  width: clamp(16px, 2vw, 30px);
  height: clamp(16px, 2vw, 30px);
  margin-inline: auto;
  fill: var(--gold-200);
  filter: drop-shadow(0 0 4px rgba(255,196,42,.60));
}

.achievement-panel {
  min-width: 0;
  border-radius: clamp(8px, 1vw, 16px);
  padding: clamp(5px, 0.7vw, 11px) clamp(5px, 0.7vw, 11px);
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.achievement-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--gold-100);
  text-transform: uppercase;
  flex-shrink: 0;
}

.achievement-title h3 {
  margin: 0;
  font: italic 900 clamp(13px, 2.0vw, 32px)/1 var(--font-display);
  letter-spacing: 2px;
}

.badge-grid {
  margin-top: 0.6%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(2px, 0.35vw, 6px);
  flex-shrink: 0;
}

.badge {
  display: grid;
  justify-items: center;
  gap: clamp(2px, 0.25vw, 4px);
  opacity: .40;
  animation: badgePop .5s both;
}

.badge.is-unlocked {
  opacity: 1;
}

.badge svg {
  width: clamp(22px, 3.5vw, 56px);
  height: auto;
  filter: drop-shadow(0 0 8px rgba(255,196,42,.38));
}

.badge path {
  fill: rgba(255,255,255,.10);
  stroke: rgba(255,255,255,.42);
  stroke-width: 2;
}

.badge.is-unlocked path {
  stroke: var(--gold-100);
}

.badge .lock {
  fill: rgba(255,255,255,.70);
  stroke: none;
}

.badge.is-unlocked .lock {
  display: none;
}

.badge:not(.is-unlocked) .check {
  display: none;
}

.badge strong {
  font: 900 clamp(9px, 1.4vw, 22px)/.88 var(--font-display);
  white-space: nowrap;
  color: var(--gold-100);
}

.badge span {
  width: 100%;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  font: 600 clamp(5px, 0.62vw, 10px)/1 var(--font-display);
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

/* ── Social block (replaces manifesto text) ── */
.social-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.5vw, 10px);
  padding-top: 0.4%;
}

.social-label {
  color: var(--gold-100);
  font: italic 700 clamp(8px, 0.9vw, 14px)/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

.social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.9vw, 18px);
  flex-wrap: wrap;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 3.2vw, 52px);
  height: clamp(24px, 3.2vw, 52px);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,201,74,.35);
  transition: background 0.2s, border-color 0.2s;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(255,196,42,.18);
}

.social-icon:hover {
  background: rgba(255,196,42,.18);
  border-color: var(--gold-200);
}

.social-icon svg {
  width: clamp(12px, 1.6vw, 26px);
  height: clamp(12px, 1.6vw, 26px);
  fill: rgba(255,255,255,.85);
}

/* keep old social-row hidden if still in DOM */
.social-row { display: none; }
.manifesto  { display: none; }

.feature-strip {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: clamp(3px, 0.4vw, 8px);
  min-width: 0;
  padding: 0.2% 0;
}

.feature-strip span {
  display: grid;
  grid-template-columns: clamp(14px, 1.6vw, 24px) 1fr;
  align-items: center;
  gap: clamp(3px, 0.4vw, 7px);
  color: rgba(255,255,255,.92);
  font: 700 clamp(7px, 0.78vw, 12px)/1.1 var(--font-display);
  text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,.14);
  padding-right: clamp(3px, 0.4vw, 6px);
  overflow: hidden;
}

.feature-strip span:last-child {
  border-right: 0;
}

.feature-strip svg {
  width: clamp(13px, 1.5vw, 22px);
  height: clamp(13px, 1.5vw, 22px);
  fill: var(--gold-200);
  filter: drop-shadow(0 0 4px rgba(255,196,42,.50));
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  .safe-area {
    grid-template-columns: 30% 38% 32%;
    gap: 0 0.8%;
    padding: 1.2% 0.7% 0.8%;
  }
  .brand-panel { grid-template-columns: clamp(80px, 8.5vw, 140px) 1fr; }
  .achievement-panel { padding: 0.8% 0.6%; }
  .manifesto { display: none; }
  .social-row { display: none; }
}

@media (max-width: 900px) {
  .safe-area {
    grid-template-columns: 30% 38% 32%;
    padding: 1% 0.5% 0.6%;
    gap: 0 0.5%;
  }
  .subscriber-card { grid-template-columns: 1fr clamp(60px, 7.5vw, 110px); }
  .achievement-panel { align-self: stretch; }
  .feature-strip { grid-column: 2 / 3; }
  .manifesto, .social-row { display: none; }
}