/* Dumpster Dive King animation patch v24
   Uses the correct-looking sprite converted into a normal animated GIF.
   This avoids any CSS background-position/sprite animation issues.
*/
:root {
  --ddk-black: #000;
  --ddk-red: #e1132c;
  --ddk-red-dark: #980817;
  --ddk-yellow: #ffd447;
}

html,
body,
main {
  background: #000 !important;
}

.kicker,
.section-tag,
.eyebrow {
  display: none !important;
}

.topbar {
  background: rgba(0, 0, 0, 0.97) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.nav {
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.brand-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.header-socials {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.header-socials a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
}

.header-socials svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

.menu {
  display: none !important;
}

.nav-actions .btn-small {
  display: none !important;
}

.mobile-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  min-width: 92px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ff304a 0%, var(--ddk-red) 72%, var(--ddk-red-dark) 100%) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
}

.nav.open .menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
  width: min(270px, calc(100vw - 30px)) !important;
  display: grid !important;
  gap: 6px !important;
  padding: 14px !important;
  background: #08080a !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
}

.nav.open .menu a {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
}

.nav.open .menu a:hover,
.nav.open .menu a.active {
  background: rgba(225,19,44,.16) !important;
  color: var(--ddk-yellow) !important;
}

.hero-home,
.ddk-hero,
.ddk-hero-v11,
.ddk-hero-v12,
.ddk-hero-v13,
.ddk-hero-v14,
.ddk-hero-v15,
.ddk-hero-v16 {
  display: none !important;
}

.hero-animation-final {
  display: block !important;
  background: #000 !important;
  padding: clamp(28px, 5vw, 66px) 0 clamp(44px, 6vw, 74px) !important;
  overflow: hidden !important;
}

.hero-animation-grid {
  display: grid !important;
  grid-template-columns: minmax(300px, 620px) minmax(0, 560px) !important;
  gap: clamp(28px, 5vw, 74px) !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.dumpster-scene-final {
  position: relative !important;
  width: 100% !important;
  max-width: 620px !important;
  overflow: visible !important;
}

.dumpster-pop-animation-final {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 30px 32px rgba(0,0,0,.65)) !important;
}

.hero-copy-final {
  position: relative !important;
  z-index: 3 !important;
  max-width: 560px !important;
}

.hero-title-final {
  position: relative !important;
  margin: 0 0 18px !important;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif !important;
  text-transform: uppercase !important;
  line-height: .86 !important;
  letter-spacing: .01em !important;
  font-size: clamp(4.2rem, 8.2vw, 7.2rem) !important;
  color: #fff !important;
}

.hero-title-final span:not(.title-crown-final) {
  color: var(--ddk-red) !important;
}

.title-crown-final {
  position: absolute !important;
  left: -0.055em !important;
  top: -0.285em !important;
  width: .34em !important;
  height: auto !important;
  transform: rotate(-18deg) !important;
  animation: titleCrownPopFinal .75s cubic-bezier(.18,.82,.14,1) .7s both !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.title-crown-final svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

.crown-shadow {
  fill: rgba(0,0,0,.42);
  transform: translate(4px, 6px);
}

.crown-body {
  fill: #ffd447;
  stroke: #7a4b00;
  stroke-width: 6;
  stroke-linejoin: round;
}

.crown-band {
  fill: #d89600;
  stroke: #7a4b00;
  stroke-width: 6;
  stroke-linejoin: round;
}

.crown-jewel {
  fill: #fff0a1;
  stroke: #7a4b00;
  stroke-width: 4;
}

.crown-red { fill: #e1132c; }
.crown-blue { fill: #49d3ff; }

@keyframes titleCrownPopFinal {
  0% { opacity: 0; transform: translateY(-18px) rotate(-28deg) scale(.8); }
  70% { opacity: 1; transform: translateY(2px) rotate(-12deg) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) rotate(-18deg) scale(1); }
}

.hero-sub-final {
  max-width: 600px !important;
  margin: 0 !important;
  color: #e8e8ee !important;
  line-height: 1.7 !important;
  font-size: 1.12rem !important;
}

.hero-actions-final {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 28px 0 22px !important;
}

.hero-features-final {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}

.hero-features-final strong {
  display: block !important;
  margin-bottom: 7px !important;
  color: var(--ddk-yellow) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: .82rem !important;
}

.hero-features-final p {
  margin: 0 !important;
  color: #c9c9d1 !important;
  line-height: 1.55 !important;
  font-size: .94rem !important;
}

.prize-visual,
.prize-mini-photo {
  background-image: url("../assets/mysterybox.png?v=43") !important;
  background-size: cover !important;
  background-position: center !important;
}

@media (max-width: 1050px) {
  .hero-animation-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .dumpster-scene-final {
    max-width: min(100%, 620px) !important;
    margin: 0 auto !important;
  }

  .hero-copy-final {
    max-width: 720px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 700px) {
  .nav { min-height: 72px !important; }
  .brand-left { gap: 8px !important; }
  .logo-mark { width: 48px !important; height: 48px !important; border-radius: 14px !important; }
  .logo-text .top { font-size: 1.18rem !important; }
  .logo-text .bottom { font-size: .98rem !important; }
  .header-socials { gap: 4px !important; }
  .header-socials a { width: 29px !important; height: 29px !important; }
  .header-socials svg { width: 14px !important; height: 14px !important; }
  .mobile-toggle { min-width: 76px !important; min-height: 42px !important; padding: 0 13px !important; }
  .hero-title-final { font-size: clamp(3.2rem, 16vw, 5.2rem) !important; }
  .hero-sub-final { font-size: 1rem !important; }
  .hero-actions-final .btn { width: 100% !important; }
  .hero-features-final { grid-template-columns: 1fr !important; gap: 14px !important; }
}

@media (max-width: 430px) {
  .header-socials { display: none !important; }
}


/* V25 tune-up:
   - rebuilt the GIF so shirt bottom tucks behind the front lip
   - added opaque backing behind the dumpster sticker/sign so shirt cannot show through transparent holes
*/
.title-crown-final {
  left: -0.05em !important;
  top: -0.295em !important;
  width: .33em !important;
}


/* V26 tuning:
   V25 made the guy too large. This version uses a smaller composited figure
   with more top clearance and the shirt tucked just behind the front lip.
*/
.dumpster-scene-final {
  max-width: 590px !important;
}

.title-crown-final {
  left: -0.052em !important;
  top: -0.292em !important;
  width: .33em !important;
}


/* V27 tune-up:
   - moved the guy up about 10px from V26
   - rebuilt the GIF on an opaque black canvas to remove shirt/transparency artifacts
   - added a full red backing behind the front wall/sticker so shirt cannot show through transparent spots
*/
.title-crown-final {
  left: -0.052em !important;
  top: -0.292em !important;
  width: .33em !important;
}


/* V28 tune-up:
   - hero animation is rebuilt with the uploaded front-dumpster image as the top overlay
   - no fake red paint block over the sticker
   - black opaque GIF canvas to clean up edge/transparency artifacts
   - shirt is raised slightly so the bottom sits closer to the front lip line
*/
.dumpster-scene-final {
  max-width: 590px !important;
}

.dumpster-pop-animation-final {
  image-rendering: auto !important;
  background: #000 !important;
}

.title-crown-final {
  left: -0.052em !important;
  top: -0.292em !important;
  width: .33em !important;
}

/* Social icon polish. These rules keep the existing links, but make image logos look clean when used. */
.header-socials a {
  overflow: hidden !important;
}

.header-socials a img,
.social-links a img,
.footer-socials a img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  display: block !important;
}

.header-socials .instagram-gradient {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  background: radial-gradient(circle at 30% 110%, #feda75 0 22%, #fa7e1e 32%, #d62976 52%, #962fbf 72%, #4f5bd5 100%) !important;
  position: relative !important;
  display: block !important;
}

.header-socials .instagram-gradient::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border: 2px solid #fff !important;
  border-radius: 4px !important;
}

.header-socials .instagram-gradient::after {
  content: "" !important;
  position: absolute !important;
  width: 4px !important;
  height: 4px !important;
  right: 4px !important;
  top: 4px !important;
  border-radius: 50% !important;
  background: #fff !important;
}


/* Instagram logo asset support */
.header-socials a img[src*="instagram-logo"],
.social-links a img[src*="instagram-logo"],
.footer-socials a img[src*="instagram-logo"] {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  display: block !important;
}


/* V29 final overlay/social fix:
   Uses the exact uploaded front-dumpster panel as the real overlay in front of the guy.
   Social links are plain logo images with no circle/frame background. */
.dumpster-scene-final { max-width: 590px !important; }
.dumpster-pop-animation-final { background: #000 !important; image-rendering: auto !important; }
.header-socials { gap: 12px !important; }
.header-socials a,
.header-socials a:hover,
.header-socials a:focus {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.header-socials svg { display: none !important; }
.header-socials img,
.icon-socials img,
.socials.icon-socials img {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  object-fit: contain !important;
}
.socials.icon-socials { display: flex !important; gap: 12px !important; align-items: center !important; }
.socials.icon-socials a { border: 0 !important; background: transparent !important; padding: 0 !important; }
.title-crown-final { left: -0.052em !important; top: -0.292em !important; width: .33em !important; }
@media (max-width:700px){
  .header-socials { gap: 8px !important; }
  .header-socials a, .header-socials img { width: 22px !important; height: 22px !important; min-width:22px !important; min-height:22px !important; }
}


/* V30 final fix:
   - Rebuilt the hero GIF using the original dumpster's real front panel, not the accidental page screenshot.
   - Filled internal transparency holes in the front panel so the shirt cannot show through the sticker/sign.
   - Social icons are plain image icons with no circle, frame, or background.
*/
.dumpster-scene-final {
  max-width: 590px !important;
}

.dumpster-pop-animation-final {
  background: #000 !important;
  image-rendering: auto !important;
}

.header-socials {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-left: 8px !important;
}

.header-socials a,
.header-socials a:hover,
.header-socials a:focus {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.header-socials svg {
  display: none !important;
}

.header-socials img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  display: block !important;
}

.title-crown-final {
  left: -0.052em !important;
  top: -0.292em !important;
  width: .33em !important;
}

@media (max-width: 700px) {
  .header-socials {
    gap: 10px !important;
  }
  .header-socials img {
    width: 21px !important;
    height: 21px !important;
  }
}

@media (max-width: 430px) {
  .header-socials {
    display: flex !important;
  }
  .header-socials img {
    width: 18px !important;
    height: 18px !important;
  }
}


/* V31 final tune:
   - Uses the uploaded front-dumpster image as a FULL overlay, including the top lip.
   - Shirt bottom is set behind the lip.
   - Header/footer social icons are larger plain image icons with no frame.
   - Crown is slightly larger and overlaps the top-left corner of the D.
*/
.dumpster-scene-final {
  max-width: 590px !important;
}

.dumpster-pop-animation-final {
  background: #000 !important;
  image-rendering: auto !important;
}

.title-crown-final {
  left: -0.062em !important;
  top: -0.305em !important;
  width: .39em !important;
  z-index: 2 !important;
}

/* Plain, bigger social icons */
.header-socials {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin-left: 12px !important;
}

.header-socials a,
.header-socials a:hover,
.header-socials a:focus,
.social-links a,
.social-links a:hover,
.social-links a:focus,
.footer-socials a,
.footer-socials a:hover,
.footer-socials a:focus {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.header-socials svg,
.social-links svg,
.footer-socials svg {
  display: none !important;
}

.header-socials img,
.social-links img,
.footer-socials img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 700px) {
  .header-socials {
    gap: 12px !important;
  }
  .header-socials img {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 430px) {
  .header-socials {
    display: flex !important;
  }
  .header-socials img {
    width: 28px !important;
    height: 28px !important;
  }
}


/* V33 correction:
   This returns to the good V31 overlay asset and only moves that lip overlay up slightly.
   No screenshot/current browser image is used anywhere in this animation.
*/
.dumpster-scene-final {
  max-width: 590px !important;
}

.dumpster-pop-animation-final {
  background: #000 !important;
  image-rendering: auto !important;
}

/* Crown: a little bigger, touching the top-left D corner */
.title-crown-final {
  left: -0.064em !important;
  top: -0.308em !important;
  width: .41em !important;
  z-index: 2 !important;
}

/* Bigger plain social icons */
.header-socials {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-left: 14px !important;
}

.header-socials a,
.header-socials a:hover,
.header-socials a:focus,
.social-links a,
.social-links a:hover,
.social-links a:focus,
.footer-socials a,
.footer-socials a:hover,
.footer-socials a:focus {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.header-socials svg,
.social-links svg,
.footer-socials svg {
  display: none !important;
}

.header-socials img,
.social-links img,
.footer-socials img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 700px) {
  .header-socials {
    gap: 12px !important;
  }

  .header-socials img {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 430px) {
  .header-socials {
    display: flex !important;
  }

  .header-socials img {
    width: 32px !important;
    height: 32px !important;
  }
}


/* V34 clean front overlay + final UI tuning
   Uses /public/assets/dumpster-front-clean-upload-v34.png as the real front layer.
   No screenshot overlay is used.
*/
.dumpster-scene-final {
  max-width: 590px !important;
}

.dumpster-pop-animation-final {
  background: #000 !important;
  image-rendering: auto !important;
}

/* Crown: center of crown sits on the top-left corner of the D, barely overlapping */
.hero-title-final .title-crown-final {
  left: -0.015em !important;
  top: -0.315em !important;
  width: .44em !important;
  transform: translateX(-50%) rotate(-18deg) !important;
  z-index: 5 !important;
}

/* Force social icons bigger everywhere, with no circle/frame/background */
html body .header-socials,
html body header .header-socials,
html body .site-footer .footer-socials,
html body footer .footer-socials,
html body .social-links {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

html body .header-socials a,
html body .header-socials a:hover,
html body .header-socials a:focus,
html body .site-footer .footer-socials a,
html body footer .footer-socials a,
html body .footer-socials a,
html body .social-links a {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .header-socials svg,
html body .footer-socials svg,
html body .social-links svg {
  display: none !important;
}

html body .header-socials img,
html body .site-footer .footer-socials img,
html body footer .footer-socials img,
html body .footer-socials img,
html body .social-links img {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 700px) {
  html body .header-socials img,
  html body .footer-socials img,
  html body .social-links img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}

@media (max-width: 430px) {
  html body .header-socials img,
  html body .footer-socials img,
  html body .social-links img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}


/* V35 tweak:
   Clean front/lip overlay moved up 17px from V34.
*/


/* V36 tweak: clean front/lip overlay moved up 6px from V35. */


/* V37 tweak: moved clean front/lip overlay up 4px from V36. */


/* V38 tweak: moved clean front/lip overlay up 3px from V37. */


/* V39 final tuning:
   - clean front/lip overlay moved up 3px from V38
   - crown centered over the top-left corner of the D
   - hero buttons split into red giveaway, white busted, gray hauls
   - wheel labels are longer horizontal chips with avatar + username that scale with entries
   - wider letter spacing for headings
*/
.hero-title-final .title-crown-final {
  left: 0.012em !important;
  top: -0.33em !important;
  width: .48em !important;
  transform: translateX(-50%) rotate(-18deg) !important;
  transform-origin: center center !important;
  z-index: 6 !important;
}

.hero-actions-final {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.btn.btn-red,
.hero-actions-final .btn-red {
  background: linear-gradient(180deg, #ff304a 0%, #e1132c 72%, #980817 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.btn.btn-white {
  background: #fff !important;
  color: #050505 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 16px 34px rgba(255,255,255,.10) !important;
}

.btn.btn-gray {
  background: #333842 !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.16) !important;
}

h1, h2, h3,
.hero-title-final,
.page-hero h1,
.section-head h2,
.card h3,
.panel h2,
.giveaway-board h2 {
  letter-spacing: .025em !important;
  line-height: 1.03 !important;
}

p,
.page-copy,
.entry-caption,
.card p,
.hero-sub-final {
  letter-spacing: .005em !important;
}

.wheel-label {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  min-height: 28px !important;
  padding: 3px 7px 3px 4px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(0,0,0,.68) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
  transform-origin: center center !important;
  pointer-events: none !important;
}

.wheel-label span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

.wheel-avatar {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.8) !important;
  object-fit: cover !important;
}

.giveaway-wheel[data-entries="0"] .wheel-label,
.giveaway-wheel[data-entries="1"] .wheel-label,
.giveaway-wheel[data-entries="2"] .wheel-label,
.giveaway-wheel[data-entries="3"] .wheel-label {
  min-height: 34px !important;
}

@media (max-width: 700px) {
  h1, h2, h3,
  .hero-title-final,
  .page-hero h1 {
    letter-spacing: .015em !important;
  }

  .hero-actions-final .btn {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }

  .wheel-label {
    min-height: 24px !important;
    padding: 2px 5px 2px 3px !important;
    gap: 4px !important;
  }

  .wheel-avatar {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }
}


/* V40: video pages + wheel polish. Hero animation remains unchanged from V39. */
.video-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.5vw, 28px) !important;
  align-items: stretch !important;
}

.video-card-pro {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.34) !important;
}

.video-frame-pro {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  max-height: 520px !important;
  background: #111 !important;
  overflow: hidden !important;
}

.video-frame-pro iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

.video-card-copy {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px !important;
}

.video-card-copy h3 {
  margin: 8px 0 10px !important;
  color: #fff !important;
}

.video-card-copy p {
  margin: 0 0 18px !important;
  color: #d4d4dd !important;
  line-height: 1.6 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.video-card-button {
  margin-top: auto !important;
  width: 100% !important;
  justify-content: center !important;
}

/* Pointer fix: tip points into/selects the wheel, not the flat side. */
.wheel-pointer {
  position: absolute !important;
  top: 50% !important;
  right: -4px !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 18px solid transparent !important;
  border-bottom: 18px solid transparent !important;
  border-right: 34px solid #ffd447 !important;
  border-left: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.55)) !important;
  z-index: 7 !important;
}

/* Slightly larger wheel profile/name chips. */
.wheel-label {
  min-height: 34px !important;
  padding: 4px 10px 4px 5px !important;
  gap: 7px !important;
  font-size: clamp(10px, 1.5vw, 15px) !important;
}

.wheel-avatar {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

@media (max-width: 1000px) {
  .video-card-grid {
    grid-template-columns: 1fr !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 700px) {
  .video-card-copy {
    padding: 18px !important;
  }

  .wheel-pointer {
    right: -2px !important;
    border-top-width: 14px !important;
    border-bottom-width: 14px !important;
    border-right-width: 26px !important;
  }

  .wheel-label {
    min-height: 28px !important;
    padding: 3px 7px 3px 4px !important;
    gap: 5px !important;
  }

  .wheel-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }
}


/* V42 global header/footer consistency across all pages */
html body .topbar {
  background: rgba(0, 0, 0, 0.97) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

html body .nav {
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

html body .brand-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

html body .menu {
  display: none !important;
}

html body .nav-actions .btn-small {
  display: none !important;
}

html body .mobile-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  min-width: 92px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ff304a 0%, #e1132c 72%, #980817 100%) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
}

html body .nav.open .menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
  width: min(290px, calc(100vw - 30px)) !important;
  display: grid !important;
  gap: 6px !important;
  padding: 14px !important;
  background: #08080a !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
}

html body .nav.open .menu a {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  color: #fff !important;
  text-decoration: none !important;
}

html body .nav.open .menu a:hover,
html body .nav.open .menu a.active {
  background: rgba(225,19,44,.16) !important;
  color: #ffd447 !important;
}

html body .header-socials,
html body .icon-socials,
html body .footer .socials {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

html body .header-socials a,
html body .icon-socials a,
html body .footer .socials a {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .header-socials img,
html body .icon-socials img,
html body .footer .socials img {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  display: block !important;
}

html body .footer {
  background: #050507 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

html body .footer-grid {
  align-items: start !important;
}

@media (max-width: 700px) {
  html body .header-socials,
  html body .icon-socials,
  html body .footer .socials {
    gap: 10px !important;
  }

  html body .header-socials img,
  html body .icon-socials img,
  html body .footer .socials img {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  html body .mobile-toggle {
    min-width: 76px !important;
    min-height: 42px !important;
    padding: 0 13px !important;
  }
}

@media (max-width: 430px) {
  html body .header-socials {
    display: flex !important;
  }

  html body .header-socials img {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }
}


/* V43 homepage order + wheel pointer/label cleanup.
   Hero animation is untouched.
*/
.front-video-section {
  position: relative !important;
}

.front-video-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2.3vw, 24px) !important;
  align-items: stretch !important;
}

.front-video-card {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 22px 62px rgba(0,0,0,.34) !important;
}

.front-video-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  max-height: 430px !important;
  background: #111 !important;
  overflow: hidden !important;
}

.front-video-frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

.front-video-copy {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px !important;
}

.front-video-copy h3 {
  margin: 8px 0 8px !important;
  color: #fff !important;
  font-size: 1.12rem !important;
}

.front-video-copy p {
  margin: 0 0 16px !important;
  color: #d8d8df !important;
  line-height: 1.55 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.front-video-button {
  margin-top: auto !important;
  width: 100% !important;
  justify-content: center !important;
}

.section-cta {
  display: flex !important;
  justify-content: center !important;
  margin-top: 26px !important;
}

.busted-front-section {
  background: radial-gradient(circle at 10% 0%, rgba(225,19,44,.18), transparent 34%), #000 !important;
}

/* Wheel pointer: place it at the top and point it DOWN into the wheel. */
.wheel-stage {
  position: relative !important;
  overflow: visible !important;
  padding-top: 26px !important;
}

.wheel-pointer {
  position: absolute !important;
  top: -1px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 18px solid transparent !important;
  border-right: 18px solid transparent !important;
  border-top: 34px solid #ffd447 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.55)) !important;
  z-index: 20 !important;
}

/* Wheel labels stay inside the wheel and grow slightly without spilling outside. */
.giveaway-wheel {
  overflow: hidden !important;
}

.wheel-label {
  min-height: 30px !important;
  padding: 3px 7px 3px 4px !important;
  gap: 5px !important;
  font-size: clamp(9px, 1.2vw, 13px) !important;
  max-width: 118px !important;
  background: rgba(0,0,0,.72) !important;
}

.wheel-avatar {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

.wheel-label span {
  max-width: 78px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1000px) {
  .front-video-grid {
    grid-template-columns: 1fr !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 700px) {
  .front-video-copy {
    padding: 16px !important;
  }

  .wheel-stage {
    padding-top: 20px !important;
  }

  .wheel-pointer {
    border-left-width: 14px !important;
    border-right-width: 14px !important;
    border-top-width: 26px !important;
  }

  .wheel-label {
    min-height: 24px !important;
    padding: 2px 5px 2px 3px !important;
    gap: 4px !important;
    max-width: 88px !important;
  }

  .wheel-avatar {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
  }

  .wheel-label span {
    max-width: 55px !important;
  }
}