:root {
    --st-red: #e50914;
    --st-bg-dark: #050509;
    --st-text: #f5f5f5;
    --st-cyan: #00fff0;
    --st-purple: #3b1c52;
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    width: 100%;
    height: 100%;
  }
  
  body {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    /* font-family: "Press Start 2P", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif; */
    background: #000;
    color: var(--st-text);
    display: flex;
    flex-direction: column;
    text-shadow: -5px 3px 1px #0000ffbd, -5px 3px 1px #ff000080;
  }
  
  /* ===== HERO FULLSCREEN ===== */
  .hero {
    position: relative;
    width: 100%;
    height: 100vh;          /* full viewport height */
    max-height: 100vh;
    overflow: hidden;
    isolation: isolate;
  }
  
  /* Layered art */
  .hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  
  /* Hawkins / Vecna background */
/* VHS EFFECT — ALWAYS ACTIVE */
/* Hawkins / Vecna background – VHS drift base */
.hero-layer-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
  
    animation: vhsDrift 30s linear infinite;
    will-change: transform, filter;
  }
  
  /* slow breathing / sliding like a warped tape */
  @keyframes vhsDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1.02); }
    50%  { transform: translate3d(-1%, -0.5%, 0) scale(1.03); }
    100% { transform: translate3d(0, 0, 0) scale(1.02); }
  }
  
  /* UPSIDE DOWN ONLY — ADD jitter */
  body .hero-layer-bg {
    animation:
      vhsDrift 30s linear infinite,
      vhsJitter 5.22s infinite steps(12);
  }

  @keyframes vhsJitter {
    0%   { transform: translate3d(0, 0, 0) scale(1.02); }
    50%  { transform: translate3d(12px, -1px, 0) scale(1.02); -webkit-transform: translate3d(12px, -1px, 0) scale(1.02); -moz-transform: translate3d(12px, -1px, 0) scale(1.02); -ms-transform: translate3d(12px, -1px, 0) scale(1.02); -o-transform: translate3d(12px, -1px, 0) scale(1.02); }
    100% { transform: translate3d(-1px, 1px, 0) scale(1.02); }
  }  

  
  /* Optional Vecna emphasis */
  .hero-layer-vecna {
    z-index: 2;
    mix-blend-mode: screen;
    opacity: 0.5;
  }
  
  /* Grass strip */
  .hero-layer-grass {
    z-index: 1;
    animation: grass-sway 6s ease-in-out infinite;
    -webkit-animation: grass-sway 6s ease-in-out infinite;
}
  
  @keyframes grass-sway {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }
  
  /* Eleven center bust */
  .hero-layer-eleven {
    z-index: 54;
    width: auto;
    height: 38%;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    pointer-events: auto;
    cursor: pointer;
    animation: eleven-bob 5s ease-in-out infinite;
  }
  
  @keyframes eleven-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -6px); }
  }
  
  /* Kids sprites buttons */
  .kid-sprite {
    position: absolute;
    bottom: 20%;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    transform-origin: center bottom;
    animation: kid-bob 4.5s ease-in-out infinite;
  }
  
  .kid-sprite img {
    display: block;
    height: 220px;
    width: auto;
  }
  
  /* positions – tweak if needed to match comp */
  .kid-will   { left: 32%; animation-delay: -0.2s; }
  .kid-mike   { left: 42%; animation-delay: -1.1s; }
  .kid-eleven { left: 46%; animation-delay: -0.6s; }
  .kid-lucas  { left: 50%; animation-delay: -1.5s; }
  .kid-dustin { left: 57%; animation-delay: -0.9s; }
  
  @keyframes kid-bob {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.01); }
  }
  
  /* Vecna hotspot */
  .vecna-hotspot {
    position: absolute;
    top: 8%;
    left: 39%;
    width: 24%;
    height: 40%;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 116;
    background: radial-gradient(circle, rgba(255, 0, 0, 0), transparent 70%);
    mix-blend-mode: screen;
    transition: transform 0.1s 
ease, box-shadow 0.1s 
ease, background 0.1s 
ease;
    -webkit-transition: transform 0.1s;
    -moz-transition: transform 0.1s;
    -ms-transition: transform 0.1s;
    -o-transition: transform 0.1s;
}
  
  .vecna-hotspot:hover {
    transform: scale(1.05);
    box-shadow: 0 -219px 336px rgba(229, 9, 20, 0.9)
  }
  
  .vecna-hotspot:focus-visible {
    outline: 2px solid var(--st-cyan);
    outline-offset: 2px;
  }

@media (max-width: 425px) {
  .vecna-hotspot {
    top: 0 !important;
    left: 0 !important;
    width: 100svw !important;
    height: 35% !important;
  }
  .vecna-tooltip{
    bottom: 65% !important;
    left: 32% !important;
    scale: 0.3;
  }
}

  /* ===== UI overlay ===== */
  .hero-content {
    position: relative;
    z-index: 7;
    padding: 1.5rem 1.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  
  .hero-top {
    text-align: center;
    text-shadow: 0 0 10px rgb(255 0 0 / 90%), 0px 1px 11px red, 1px 1px 30px red;
    margin-bottom: 1rem;
  }
  
  .hero-logo {
    font-size: clamp(0.9rem, 1.5vw, 1.3rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--st-red);
    text-shadow:
      0 0 8px rgba(229, 9, 20, 0.9),
      0 0 22px rgba(229, 9, 20, 0.7);
  }
  
  .st-logo {
    width: 25%;
    filter: drop-shadow(0px 2px 1px white) drop-shadow(0px 0px 5px red) drop-shadow(0px 0px 25px darkred) drop-shadow(0px 19px 46px black) contrast(2.5);
    height: auto;
    padding-bottom: 1%;
}
  .hero-tagline {
    font-family: "Press Start 2P";
    margin-top: 0;
    font-size: 1rem;
    opacity: 0.9;
  }
  
  .hero-tagline-note {
    font-family: monospace;
    font-size: 0.8rem;
    opacity: 0.75;
  }
  
  .hero-middle {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: auto;
    margin-bottom: 0.75rem;
  }
  
  .hero-middle-note {
    display: inline-block;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
    text-transform: math-auto;
    font-size: 1rem;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    -ms-border-radius: 999px;
    -o-border-radius: 999px;
}
  
  .hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.45rem;
    padding: 0.4rem 0.5rem 0.8rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  }
  
  .hero-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  
  .hero-bottom-right {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-end;
    align-content: flex-end;
  }
  
  .badge {
    display: inline-block;
    padding: 0;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
    text-transform: math-auto;
    font-size: 1rem;
    font-family: monospace;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    -ms-border-radius: 999px;
    -o-border-radius: 999px;
}
  
  .netflix-logo {
    width: 9svw;
    filter: drop-shadow(0px 0px 26px rgba(255, 0, 0, 0.306));
    -webkit-filter: drop-shadow(0px 0px 26px rgba(255, 0, 0, 0.306));
}
  
  .release-text {
    font-size: 1rem;
    margin-top: 0.7rem;
  }
  .footer{
  display: flex;
  justify-content: center;
  }
  .hero-foot-note {
    font-size: 0.7rem;
    font-family: 'Merriweather';
    padding: 0px 29svw;
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 1rem;
    letter-spacing: 1px;
    opacity: 0.7;
    text-shadow: none;
  }
  /* iPad / medium screens */
  @media (max-width: 1024px) {
    .hero-content {
      padding-inline: 1rem;
    }
    .kid-sprite img {
      height: 100px;
    }

    .st-logo {
    width: 55%;
    filter: drop-shadow(0px 2px 0.5px white) drop-shadow(0px 0px 5px red) drop-shadow(0px 0px 25px darkred) drop-shadow(0px 19px 6px black) contrast(1.5);
    height: auto;
    padding-bottom: 3%;
    }
  }
  
  /* Phone sizes – still usable */
  @media (max-width: 768px) {
    .hero-content {
      padding-inline: 0.8rem;
    }
    .hero-layer-eleven {
      height: 32%;
      top: 32%;
    }
    .kid-sprite img {
      height: 80px;
    }
    .kid-will   { left: 16%; }
    .kid-mike   { left: 30%; }
    .kid-eleven { left: 46%; }
    .kid-lucas  { left: 58%; }
    .kid-dustin { left: 72%; }
    .hero-bottom {
      flex-direction: initial;
      align-items: end;
      gap: 0.4rem;
    }
    .netflix-logo {
      width: 23svw;
    }
    .release-text {
      font-size: 0.7rem;
      margin-top: 0.3rem;
    }
    .badge{
      font-size: 0.85rem !important;
    }
    .hero-middle {
      margin-bottom: 3.35rem !important;
    }
    .hero-bottom-right {
      text-align: left;
    }
    .hero-bottom-left {
      display: flex;
      flex-direction: column;
      gap: 0em;
      align-items: flex-start;
      justify-content: flex-end;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    .st-logo {
      width: 75%;
      filter: drop-shadow(0px 2px 0.5px white) drop-shadow(0px 0px 5px red) drop-shadow(0px 0px 25px darkred) drop-shadow(0px 19px 6px black) contrast(1.5);
      height: auto;
      padding-bottom: 4%;
    }
    .hero-foot-note {
      font-size: .6rem;
      font-family: monospace;
      padding: 0px 10svw;
    }
  }

@media (max-width: 425px) {
    .kid-sprite{
      bottom:22%;
    }
    .kid-sprite img {
      height: 130px;
    }
    .kid-will   { left: -4%; }
    .kid-mike   { left: 19%; }
    .kid-eleven { left: 38%; }
    .kid-lucas  { left: 47%; }
    .kid-dustin { left: 64%; }
    .hero-middle-note{
      font-size: 0.5rem !important;
      line-height: 1.5;
    }
    .hero-middle{
      margin-bottom: 0.3rem !important;
    }
    .hero-bottom-right {
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .netflix-logo {
      width: 27svw;
    }
    .hero-bottom {
        gap: 0rem;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row-reverse;
        justify-content: space-evenly;
        text-align: end;
        padding: 8px 23px 10px 23px;
        align-items: flex-start;
    }
    .hero-bottom-left {
      display: flex;
      flex-direction: column;
      gap: 0em;
      align-content: flex-start;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      padding: 0px 10px;
    }
    .release-text {
      font-size: 0.4rem;
      margin-top: 0.3rem;
    }
    .badge{
      display: none;
      font-size: 0.5rem !important;
    }
    .footer{
      display: flex;
    }
    .hero-foot-note {
      font-size: 0.4rem;
      padding: 0px 3svw;
      margin-bottom: 1rem;
      margin-top: 0rem;
    }
    .made{
      font-size: 1rem !important;
    }
    .music-toggle{
      font-size: 13px !important;
      bottom: 117px !important;
      right: 20px !important;
      padding: 10px 10px !important;
      z-index: 9 !important;
    }
}
  
  /* ===== MODAL ===== */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7); 
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
  }
  
  .modal-backdrop.active {
    display: flex;
  }
  
  .modal {
    background: radial-gradient(circle at top, #050509 0%, #050509 55%, #6d090e73 100%);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 255, 240, 0.4);
    max-width: 900px;
    width: 100%;
    padding: 4rem;
    color: var(--st-text);
    position: relative;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.7rem;
  }
  
  .modal-title {
    font-size: 4.1rem;
    letter-spacing: 0em;
    text-transform: uppercase;
  }
  
  .modal-subtitle {
    font-size: 1.2rem;
    opacity: 0.75;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-family: monospace;
    color: cyan;
    text-shadow: 0 5px 3px red;
    border-left: solid 7px red;
    padding-left: 10px;
  }
  
  .modal-close {
    border: none;
    background: transparent;
    color: var(--st-text);
    font-size: 4rem;
    cursor: pointer;
    padding: 0.2rem;
  }
  
  .modal-body {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0.8rem;
  }
  
  .modal-video {
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
  }
  
  .modal-video video {
    width: 100%;
    display: block;
  }
  
  .vote-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 1.55rem;
  }
  
  .vote-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  
  .btn {
    border-radius: 8px;
    padding: 1.45rem 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: radial-gradient(circle at 0 0, rgba(0, 255, 240, 0.2), rgba(0, 0, 0, 0.9));
    color: var(--st-text);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    -webkit-transition: transform 0.1s ;
    -moz-transition: transform 0.1s ;
    -ms-transition: transform 0.1s ;
    -o-transition: transform 0.1s ;
}
  
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(0, 255, 240, 0.8);
    background: radial-gradient(circle at 100% 0, rgba(229, 9, 20, 0.7), rgba(0, 0, 0, 0.9));
  }
  
  .btn-outline {
    background: transparent;
    border-style: outset;
    opacity: 0.9;
  }
  
  .poll-results {
    margin-top: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .poll-row {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }
  
  .poll-label {
    display: flex;
    justify-content: space-between;
    font-size: 1.78rem;
    opacity: 0.85;
  }
  
  .poll-bar {
    position: relative;
    width: 100%;
    height: 50px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
  
  .poll-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--st-cyan), var(--st-red));
    box-shadow: 0 0 10px rgba(0, 255, 240, 0.7);
    transition: width 0.25s ease-out;
  }
  
  .poll-fill.die {
    background: linear-gradient(90deg, var(--st-red), #ff8800);
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.7);
  }
  
  .vote-note {
    font-size: 0.85rem;
    line-height: 19px;
    font-family: monospace;
    opacity: 0.7;
    margin-top: 20px;
  }
  
  .vote-status {
    font-size: 1.18rem;
    color: cyan;
    margin-top: 0.2rem;
    opacity: 0.85;
  }
  
  .total-votes {
    margin-top: 3rem;
    font-size: 3rem;
    opacity: 0.85;
  }

  .made{
    font-size: 1.3rem;
  }

  /* ================================
    SHARE MODAL
  ================================ */

  .share-btn-main {
    margin-top: 18px;
    width: 100%;
    font-family: 'Press Start 2P';
    background: #b30000;
    border: 2px solid #ff5252;
    color: white;
    cursor: pointer;
    padding: 10px 0;
    box-shadow: 0 0 12px red;
    transition: 0.2s;
  }
  .share-btn-main:hover {
    background: #ff0000;
    box-shadow: 0 0 20px red;
  }

  .share-modal {
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.75);
    z-index: 9999999;
    animation: shareFadeIn 0.4s ease-out;
  }

  @keyframes shareFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .share-modal-content {
    position: relative;
    width: fit-content;
    background: #0a0a0a;
    border: 3px solid red;
    padding: 5%;
    box-shadow: 0 0 20px red;
    animation: shareSlideIn 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

  @keyframes shareSlideIn {
    from {
      opacity: 0;
      transform: translateY(-25px) scale(0.9);
      filter: contrast(70%) brightness(0.7);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: contrast(100%) brightness(1);
    }
  }

  .share-title {
    font-family: 'Merriweather';
    color: white;
    text-align: center;
    margin-bottom: 18px;
    font-size: 2rem;
  }

  .share-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .share-btn {
    padding: 20px 10px;
    background: black;
    border: 2px solid red;
    color: red;
    font-family: 'Press Start 2P';
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
    height: fit-content;
  }
  .share-btn:hover {
    background: #ff0000;
    box-shadow: 0px 1px 40px red;
    color: white;
}

  .share-close {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 26px;
    color: red;
    background: black;
    border: 2px solid red;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
  }
  .share-close:hover {
    background: #4e0000;
  }

  .share-preview {
    display: flex;
    margin-top: 16px;
    text-align: center;
    justify-content: space-evenly;
    align-items: center;
  }

  #shareCanvas {
    width: 210px;   /* display size (scaled) */
    height: 310px;  /* keep story aspect ratio */
    border: 2px solid red;
    box-shadow: 0 0 10px red;
    background: black;
  }





@media (max-width: 720px) {
  .modal {
    width: 90vw !important;
    padding: 2rem !important;
    }
  .modal-backdrop.active {
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 40% 0px;
  }
  .modal-body{
    gap: 1.8rem;
  }
}
@media (max-width: 425px) {
  .modal-backdrop {
    background-color: #000 !important;
  }
  .modal-backdrop.active {
    padding: 20% 0px 10% 0px !important;
  }
  .modal-tentacles{
    height: calc(100% + 120px) !important;
  }
  .modal-tentacles.growing{
    animation: none !important;
    -webkit-animation: none !important;
  }
  .alphabet-lights{
    inset: -60px 0 auto 0 !important;
    font-size: 1.22rem;
    line-height: 1.3;
    letter-spacing: 0.15em;
    padding: 0px 7%;
  }
  .modal {
    background: radial-gradient(circle at top, #050509 0%, #050509 55%, #6d090e 100%) !important;
      width: 95vw !important;
      padding: 1.5rem !important;
    }
  .modal-header{
      align-items: flex-start !important;
  }
  .modal-title {
    letter-spacing: 0;
    font-weight: 900;
    font-size: 2.5rem !important;
    line-height: 1.4;
    filter: drop-shadow(1px 2px 1px red);
    -webkit-filter: drop-shadow(1px 2px 1px red);
  }
  .modal-subtitle {
    font-size: 1rem;
    opacity: 1;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-shadow: 1px 2px 1px red;
    text-transform: uppercase;
  }
  .modal-close{
    position: relative !important;
    bottom: 1rem;
  }
  .modal-body {
    gap: 0.2rem !important;
    grid-template-columns: none;
  }
  .modal-video {
    height: fit-content;
    display: flex;
    justify-content: center;
  }
  .modal-video video {
    width: 40vw !important;
  }
  .vote-section {
    font-size: 1.3rem !important;
    line-height: 2;
    text-transform: uppercase;
    padding-top: 20px;
  }
  .vote-buttons {
    display: flex;
    gap: 0.1rem !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  .btn {
    padding: 1.3rem 1.7rem !important;
    font-size: .7rem !important;
  }
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(0, 255, 240, 0.8);
    background: radial-gradient(circle at 100% 0, rgba(229, 9, 20, 0.7), rgba(0, 0, 0, 0.9));
  }
  .btn-outline {
    background: red;
    border-style: outset;
    opacity: 0.9;
    font-weight: 900;
  }
  .vote-status {
    font-size: 0.9rem;
    text-transform: capitalize;
    margin-top: 0.2rem;
    opacity: 0.85;
    color: cyan;
  }
  .poll-results {
    gap: 1rem !important;
  }
  .poll-label {
    font-family: 'Press Start 2P';
    font-size: 0.97rem;
    opacity: 0.85;
  }
  .total-votes {
    margin-top: 1.5rem;
    font-size: 1.7rem;
    opacity: 1;
    font-family: 'Merriweather';
    text-transform: math-auto;
  }
  .vote-note {
    font-size: 0.9rem;
    line-height: 18px;
    font-family: monospace;
    opacity: 0.7;
    margin-top: 5px;
    padding-bottom: 30px;
    text-transform: math-auto;
  }
  .share-modal {
    background: #000;
    overflow: scroll;
    padding:10px;
  }
  .share-modal-content{
    padding: 20 20px;
  }
  .share-title{
    font-size: 1.32rem !important;
    line-height: 1;
  }
  .share-btn {
    padding: 10px 0px;
  }
}
  
  
  /* CRT overlay */
/* ================================
   VHS / CRT OVERLAY
   ================================ */

   .crt-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4; /* above bg + fx, under kids and modal */
    opacity: 0.2;
    mix-blend-mode: screen;
  
    /* horizontal scanlines */
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.06) 0px,
        rgba(255, 255, 255, 0.02) 2px,
        transparent 3px,
        transparent 4px
      );
  
    animation: crtFlicker 2.4s infinite steps(2);
  }
  
  /* noise + glow */
  .crt-overlay::before {
    content: "";
    position: absolute;
    inset: -10%;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0, transparent 50%),
      radial-gradient(circle at 80% 40%, rgba(255,255,255,0.08) 0, transparent 55%),
      radial-gradient(circle at 50% 80%, rgba(255,255,255,0.06) 0, transparent 55%);
    mix-blend-mode: soft-light;
    opacity: 0.55;
    animation: crtNoiseShift 5s linear infinite;
  }
  
  /* vignette + dark corners + tracking band base */
  .crt-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      /* vignette */
      radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%),
      /* subtle vertical sides */
      linear-gradient(to right,
        rgba(0,0,0,0.55),
        transparent 20%,
        transparent 80%,
        rgba(0,0,0,0.55)
      );
    opacity: 0.8;
  }
  
  /* subtle brightness / flicker */
  @keyframes crtFlicker {
    0%   { opacity: 0.17; filter: brightness(1.0) contrast(1.0); }
    20%  { opacity: 0.24; filter: brightness(1.06) contrast(1.04); }
    50%  { opacity: 0.19; filter: brightness(0.98) contrast(1.0); }
    75%  { opacity: 0.26; filter: brightness(1.1) contrast(1.08); }
    100% { opacity: 0.18; filter: brightness(1.0) contrast(1.0); }
  }
  
  /* noise drifting */
  @keyframes crtNoiseShift {
    0%   { transform: translate(0, 0) scale(1.02); }
    50%  { transform: translate(-2%, -1%) scale(1.04); }
    100% { transform: translate(1%, 1%) scale(1.02); }
  }
  
  /* Stronger distorted CRT when Upside Down */
  body.upside-down .crt-overlay {
    opacity: 0.3;
    filter:
      hue-rotate(190deg)
      saturate(1.2)
      contrast(1.1);
  }
  
  body.upside-down .crt-overlay::before {
    opacity: 0.9;
  }
   

  
  /* ===== Upside Down mode ===== */
  
  body.upside-down {
    background: #000
}
  
  body.upside-down .hero-layer-bg {
    content: url("img/Mindscape.webp");
    filter: contrast(1.2) saturate(1.3) brightness(0.9);
    transform: scale(1.05);
    z-index: 100;
  }
  
  body.upside-down .hero-logo {
    color: var(--st-cyan);
    text-shadow:
      0 0 10px rgba(0, 255, 240, 0.9),
      0 0 26px rgba(0, 255, 240, 0.7);
  }
  
  body.upside-down .hero-tagline {
    color: #ffdddd;
    text-shadow: 0 0 10px #00ffff, 0px 1px 11px #0026ff, 1px 1px 30px rgb(0 184 255 / 80%);
  }
  
  body.upside-down .vecna-hotspot {
    background: transparent;
  }
  
  body.upside-down .modal {
    background: radial-gradient(circle at top, #3b0118 0%, #050509 55%, #000 100%);
  }
   body.upside-down .hero-content {
    z-index: 100;
    position: relative;
  }
  body.upside-down .st-logo {
    filter: drop-shadow(0px 2px 1px white) drop-shadow(0px 0px 5px cyan) drop-shadow(0px 0px 25px blue) drop-shadow(0px 19px 46px black) contrast(2.5);
    rotate: 180deg;
    padding: 20px 0px 0px 0px;
  }
@media (max-width: 425px) {
  .hero-tagline {
    margin-top: 0.6rem;
    font-size: 0.79rem !important;
    opacity: 0.9;
    padding: 0px 14svw !important;
    text-align: center;
    line-height: 1.4;
    text-transform: uppercase;
  }
  .hero-tagline-note {
    font-family: monospace;
    font-size: 0.5rem;
    letter-spacing: 1px !important;
  }
}
  
  /* === FX LAYERS === */
.fx-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3; /* under kids, above background */
    pointer-events: none;
    overflow: hidden;
  }
  
  .fx-lightning {
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: screen;
    transition: opacity 0.15s ease-out;
    -webkit-transition: opacity 0.15s ease-out;
    -moz-transition: opacity 0.15s ease-out;
    -ms-transition: opacity 0.15s ease-out;
    -o-transition: opacity 0.15s ease-out;
    overflow: hidden;
}

.fog{
    overflow: hidden;
}
  
  .fx-fog {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    left: -10%;
    top: -10%;
    opacity: 0.05;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
    animation: fog-move 28s linear infinite;
    -webkit-animation: fog-move 28s linear infinite;
    overflow: hidden;
}
  
  @keyframes fog-move {
    0%   { transform: translateX(-5%) translateY(0); }
    50%  { transform: translateX(5%) translateY(-3%); }
    100% { transform: translateX(-5%) translateY(0); }
  }
  
  /* Upside Down dark fog */
  body.upside-down .fx-fog {
    opacity: 0.08;
    filter: hue-rotate(180deg) saturate(1.5) drop-shadow(10px 19px 230px blue) drop-shadow(10px 29px 80px cyan);
    -webkit-filter: hue-rotate(180deg) saturate(1.5) drop-shadow(10px 19px 230px blue) drop-shadow(10px 29px 80px cyan);
}
  
@media (max-width: 720px) {
  body.upside-down .fx-fog {
   display: none;
  }
}
@media (max-width: 425px) {
  .fx-fog{
    width: 90svw !important;
    height: 90% !important;
    left: 0 !important;
    top: 10% !important;
  }
  body.upside-down .fx-fog {
  }
} 

  /* ================================
   MODAL BORDER – NEON + LIGHTNING
   ================================ */

.modal-border-anim {
    position: relative;
    display: inline-block;
    padding: 3px;                 /* this creates the "border thickness" */
    border-radius: 18px;          /* a bit larger than modal */
    background: linear-gradient(
      90deg,
      #ff0000 0%,
      #3b0000 20%,
      #ff0000 40%,
      #3b0000 60%,
      #ff0000 80%,
      #3b0000 100%
    );
    background-size: 250% 100%;
    animation:
      modalBorderMarquee 3.5s linear infinite,
      modalBorderLightning 6s ease-in-out infinite;
    box-shadow:
      0 0 10px rgba(255, 0, 0, 0.7),
      0 0 20px rgba(255, 0, 0, 0.4);
  }
  
  /* Make sure the actual modal sits nicely inside */
  .modal-border-anim .modal {
    position: relative;
    z-index: 1;
    border-radius: 14px;      /* slightly smaller than wrapper */
  }
  
  /* MARQUEE: Netflix-style moving red bars */
  @keyframes modalBorderMarquee {
    0% {
      background-position: 0% 0%;
    }
    100% {
      background-position: 200% 0%;
    }
  }
  
  /* LIGHTNING: occasional strong glow pulses */
  @keyframes modalBorderLightning {
    0%, 85% {
      box-shadow:
        0 0 8px rgba(255, 0, 0, 0.6),
        0 0 16px rgba(255, 0, 0, 0.4);
    }
    88% {
      box-shadow:
        0 0 16px rgba(255, 255, 255, 0.9),
        0 0 30px rgba(255, 0, 0, 0.9);
    }
    92% {
      box-shadow:
        0 0 10px rgba(255, 0, 0, 0.6),
        0 0 18px rgba(255, 0, 0, 0.5);
    }
    100% {
      box-shadow:
        0 0 8px rgba(255, 0, 0, 0.6),
        0 0 16px rgba(255, 0, 0, 0.4);
    }
  }
  
  /* UPSIDE-DOWN MODE VARIANT (cyan veins instead of red) */
  body.upside-down .modal-border-anim {
    background: linear-gradient(
      90deg,
      #00ffff 0%,
      #004040 20%,
      #00ffff 40%,
      #004040 60%,
      #00ffff 80%,
      #004040 100%
    );
    box-shadow:
      0 0 10px rgba(0, 255, 255, 0.8),
      0 0 24px rgba(0, 255, 255, 0.5);
  }
  
  /* Optional: slight wobble to feel "organic" */
  body.upside-down .modal-border-anim .modal {
    animation: modalVeinWobble 10s ease-in-out infinite;
  }
  
  @keyframes modalVeinWobble {
    0%, 100% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(1px, -1px);
    }
  }

  

/* SPORE PARTICLES CANVAS AROUND MODAL */
.modal-spores {
    position: absolute;
    inset: 0;
    border-radius: 118px;
    pointer-events: none;
    z-index: 0;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
}

/* STRANGER THINGS ALPHABET FLICKER AROUND BORDER */
.alphabet-lights {
    position: absolute;
    inset: -36px 0 auto 0;   /* above modal */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1px;
    font-family: "Press Start 2P", system-ui;
    font-size: 1rem;
    letter-spacing: 0.15em;
    color: rgba(244, 81, 81, 0.875);
    pointer-events: none;
    z-index: 3;
  }
  
/* base flicker */
  .alphabet-lights span {
    opacity: 0.2;
    text-shadow: 0 10px 14px rgb(255, 0, 0);
    animation: alphabetFlicker 10.4s infinite steps(2, end);
    -webkit-animation: alphabetFlicker 10.4s infinite steps(2, end);
}
  
  /* staggered flicker delays */
  .alphabet-lights span:nth-child(3n)   { animation-delay: 0.0s; }
  .alphabet-lights span:nth-child(3n+1) { animation-delay: 0.3s; }
  .alphabet-lights span:nth-child(3n+2) { animation-delay: 0.6s; }
  
  @keyframes alphabetFlicker {
    0%, 20%, 40%, 70%, 100% { opacity: 0.15; }
    10%, 35%, 50%, 80%      { opacity: 1; }
  }
  
  /* Upside Down variant */
  body.upside-down .alphabet-lights span {
    color: rgba(0, 255, 255, 0.7);
    text-shadow:
      0 0 6px rgba(0, 255, 255, 0.9),
      0 0 12px rgba(0, 150, 150, 0.7);
  }

/* ELECTRIC ARC LINES ON THE BORDER */
.modal-border-anim::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 2px solid rgba(255, 0, 0, 0.18);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
    animation: modalArcs 1.8s linear infinite;
  }
  
  /* arc motion + jitter */
  @keyframes modalArcs {
    0% {
      border-color: rgba(255, 255, 255, 0.05);
      transform: translate(0, 0);
    }
    25% {
      border-color: rgba(255, 80, 80, 0.8);
      transform: translate(0.5px, -0.5px);
    }
    50% {
      border-color: rgba(255, 255, 255, 0.4);
      transform: translate(-0.5px, 0.5px);
    }
    75% {
      border-color: rgba(255, 0, 0, 0.9);
      transform: translate(0.3px, -0.3px);
    }
    100% {
      border-color: rgba(255, 255, 255, 0.05);
      transform: translate(0, 0);
    }
  }
  
  /* Upside-down arcs in cyan */
  body.upside-down .modal-border-anim::before {
    border-color: rgba(0, 255, 255, 0.6);
  }

/* ================================
   TENTACLES BEHIND MODAL
   ================================ */
/* ============================================================
   FINAL FORM TENTACLES — ALIVE, REACTIVE, PROCEDURAL MOTION
   ============================================================ */

   .modal-tentacles {
    position: absolute;
    inset: -180px;
    width: calc(140% + 120px);
    height: calc(140% + 120px);
    object-fit: cover;
    z-index: 0;
    opacity: 0.62;
    pointer-events: none;
  
    /* Glow + organic feeling */
    filter:
      drop-shadow(0 0 25px rgba(255,0,0,0.7))
      brightness(1.2)
      saturate(1.3);
  
    /* BASE BREATHING animation */
    animation:
      tentacleBreath 10s ease-in-out infinite,
      tentacleDrift 40s linear infinite;
  }
  
  /* Breathing pulse */
  @keyframes tentacleBreath {
    0%, 100% { transform: scale(1); }
    50%     { transform: scale(1.05); }
  }
  
  /* Slow drift (big motion) */
  @keyframes tentacleDrift {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(4deg); }
    100% { transform: rotate(0deg); }
  }
  
  /* Lightning-triggered surge */
  .tentacle-pulse {
    filter:
      drop-shadow(0 0 40px rgba(255,255,255,0.9))
      drop-shadow(0 0 60px rgba(255,0,0,0.9))
      brightness(1.8)
      saturate(1.6) !important;
    transition: filter 0.25s ease-out;
  }
  
  /* Upside Down evolution */
  body.upside-down .modal-tentacles {
    opacity: 0.78;
    filter:
      drop-shadow(0 0 40px rgba(0, 255, 255, 0))
      hue-rotate(200deg)
      brightness(1.4)
      saturate(1.5);
    animation:
      tentacleBreathUD 8s ease-in-out infinite,
      tentacleDrift 36s linear infinite,
      tentacleTwitch 1.8s infinite steps(2);
  }
  
  /* Bigger breathing */
  @keyframes tentacleBreathUD {
    0%, 100% { transform: scale(1); }
    50%     { transform: scale(1.08); }
  }
  
  /* Small twitch/glitch movement */
  @keyframes tentacleTwitch {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(1px, -1px); }
    100% { transform: translate(0, 0); }
  }

/* ================================================
   TENTACLE GROWTH MODE — gradual expansion + pulses
   ================================================ */

   .modal-tentacles.growing {
    animation:
      tentacleBreath 10s ease-in-out infinite,
      tentacleDrift 40s linear infinite,
      tentacleGrow 22s ease-in-out infinite,
      tentaclePulseRandom 9s infinite steps(3);
  }
  
  /* Slow enlargement over time */
  @keyframes tentacleGrow {
    0%   { transform: scale(1) rotate(0deg); }
    50%  { transform: scale(1.12) rotate(1.5deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  
  /* Randomized twitch spikes */
  @keyframes tentaclePulseRandom {
    0%, 30%, 75%, 100% { filter: brightness(1.2) drop-shadow(0 0 25px red); }
    5%, 32%, 78%       { filter: brightness(1.6) drop-shadow(0 0 40px red); }
  }
  
  
  /* UPSIDE DOWN = growth intensifies */
  body.upside-down .modal-tentacles.growing {
    animation:
      tentacleBreathUD 8s ease-in-out infinite,
      tentacleDrift 36s linear infinite,
      tentacleGrowUD 16s ease-in-out infinite,
      tentaclePulseRandomUD 5s infinite steps(2);
  }
  
  @keyframes tentacleGrowUD {
    0%   { transform: scale(1) rotate(0deg); }
    50%  { transform: scale(1.16) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  
  @keyframes tentaclePulseRandomUD {
    0%, 25%, 60%, 100% { filter: brightness(1.3) drop-shadow(0 0 30px cyan); }
    6%, 27%, 69%       { filter: brightness(1.9) drop-shadow(0 0 60px cyan); }
  }
  

  /* ================================
   CRACKS ON HERO BACKGROUND
   ================================ */

.hero-cracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    opacity: 0.10;
    pointer-events: none;
    z-index: 1;
  
    animation: crackShift 22s linear infinite,
               crackGlow 6s ease-in-out infinite;
  }
  
  @keyframes crackShift {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-2%, -1%) scale(1.03); }
    100% { transform: translate(0,0) scale(1); }
  }
  
  @keyframes crackGlow {
    0%, 100% { opacity: 0.06; filter: drop-shadow(0 0 2px red); }
    50%      { opacity: 0.18; filter: drop-shadow(0 0 10px red); }
  }
  
  /* UPSIDE DOWN version */
  body.upside-down .hero-cracks {
    opacity: 0.12 !important;
    filter: hue-rotate(200deg) brightness(1.5) drop-shadow(0 0 10px cyan) drop-shadow(30px 0 20px cyan) !important;
    z-index: 100;
    backdrop-filter: blur(951px) saturate(13.5) hue-rotate(195deg);
    mix-blend-mode: difference;
  }

@media (max-width: 720px) {
  body.upside-down .hero-cracks {
    display: none !important;
}    
  }
  
  

  /* ================================================
   MODAL GLITCH EFFECT (OPEN / CLOSE)
   ================================================ */

.modal-glitch {
    .modal-glitch {
        position: absolute;
        inset: 0;
        border-radius: 18px;
        z-index: 20;
        pointer-events: none;
        opacity: 0;      
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.15) 0px,
        rgba(255,255,255,0.05) 2px,
        transparent 4px
      );
    mix-blend-mode: overlay;
    transition: opacity 0.15s ease-out;
  }
  
  /* Distortion stripes */
  .modal-glitch.active {
    animation:
      glitchFlash 0.35s ease,
      glitchSlice 0.3s steps(2) forwards;
  }
  
  @keyframes glitchFlash {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
  }
  
  /* Pixel slice distortion */
  @keyframes glitchSlice {
    0% {
      clip-path: inset(0 0 0 0);
      transform: translate(0, 0);
    }
    40% {
      clip-path: inset(15% 0 30% 0);
      transform: translate(-3px, -2px) skew(-1deg);
    }
    70% {
      clip-path: inset(50% 0 10% 0);
      transform: translate(3px, 1px) skew(2deg);
    }
    100% {
      clip-path: inset(0 0 0 0);
      transform: translate(0, 0);
    }
  }
  
  /* UPSIDE DOWN variant (cyan glitch) */
  body.upside-down .modal-glitch {
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(0,255,255,0.25) 0px,
        rgba(0,255,255,0.1) 2px,
        transparent 4px
      );
  }
}


/* ============================================
   GLOBAL GLITCH RIPPLE
============================================ */
.global-glitch {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    mix-blend-mode: screen;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.04) 0,
        rgba(255, 255, 255, 0.02) 2px,
        transparent 4px
      );
    transition: opacity 0.2s ease-out;
  }
  
  .global-glitch.active {
    opacity: 1;
    animation:
      globalGlitchFlash 0.35s ease-out,
      rgbShift 0.35s steps(2) forwards;
  }
  
  @keyframes globalGlitchFlash {
    0% { opacity: 0; filter: none; }
    20% { opacity: 1; filter: contrast(140%) brightness(1.5); }
    100% { opacity: 0; filter: none; }
  }
  
  @keyframes rgbShift {
    0% { filter: none; transform: translate(0,0); }
    40% { filter: hue-rotate(40deg) saturate(200%); transform: translate(-3px,1px); }
    70% { filter: hue-rotate(-40deg) saturate(200%); transform: translate(3px,-1px); }
    100% { filter: none; transform: translate(0,0); }
  }
  
  /* ============================================
     CRACK EXPANSION
  ============================================ */
  .hero-cracks {
    transition: transform 0.3s ease-out, opacity 0.3s;
  }
  
  .hero-cracks.expand {
    transform: scale(1.3) rotate(2deg);
    opacity: 1;
  }
  
  /* ============================================
     TENTACLE GRAB (during glitch)
  ============================================ */
  .modal-tentacles.grab {
    transform: scale(1.12) rotate(3deg);
    filter: drop-shadow(0 0 30px red) brightness(1.6);
  }
  

  /* ================================
   PSYCHIC BLAST (ELEVEN)
   ================================ */

.psychic-blast {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
  }
  
  .psychic-blast::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40vmin;
    height: 40vmin;
    border-radius: 50%;
    background:
      radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(0, 255, 255, 0.8) 25%,
        rgba(255, 0, 0, 0.7) 45%,
        transparent 70%);
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  
  .psychic-blast.active {
    opacity: 1;
    animation: psychicFade 0.5s ease-out forwards;
  }
  
  .psychic-blast.active::before {
    animation: psychicWave 0.5s ease-out forwards;
  }
  
  @keyframes psychicWave {
    0% {
      transform: translate(-50%, -50%) scale(0.2);
      opacity: 1;
    }
    70% {
      transform: translate(-50%, -50%) scale(1.3);
      opacity: 0.9;
    }
    100% {
      transform: translate(-50%, -50%) scale(1.8);
      opacity: 0;
    }
  }
  
  @keyframes psychicFade {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    100% { opacity: 0; }
  }
  
  /* Screen shake for the whole world */
  body.psychic-shake {
    animation: psychicShake 0.45s ease-out;
  }
  
  @keyframes psychicShake {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(3px, -2px); }
    40%  { transform: translate(-3px, 3px); }
    60%  { transform: translate(2px, -3px); }
    80%  { transform: translate(-2px, 2px); }
    100% { transform: translate(0, 0); }
  }

  
  /* ================================
   BLOOP DROP (when voting "won't survive")
   ================================ */

.bloop-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    overflow: hidden;
  }
  
  /* the droplet itself */
  .bloop-overlay::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -40px;
    width: 46px;
    height: 92px;
    border-radius: 50% 50% 60% 60%;
    background: radial-gradient(circle at 30% 20%, #ffcccc 0%, #ff0000 40%, #550000 100%);
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
  }
  
  /* active animation */
  .bloop-overlay.active::before {
    animation: bloopDrop 0.6s ease-in forwards;
  }
  
  @keyframes bloopDrop {
    0% {
      top: -40px;
      opacity: 0;
      transform: translateX(-50%) scale(0.8);
    }
    40% {
      top: 35%;
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }
    70% {
      top: 50%;
      opacity: 0.9;
      transform: translateX(-50%) scale(0.9);
    }
    100% {
      top: 60%;
      opacity: 0;
      transform: translateX(-50%) scale(0.7);
    }
  }

  /* ================================
   VHS / CRT OVERLAY
   ================================ */

.crt-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4; /* above background, below modals & UI */
    opacity: 0.18;
    mix-blend-mode: screen;
  
    /* horizontal scanlines */
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.06) 0px,
        rgba(255, 255, 255, 0.02) 2px,
        rgba(0, 0, 0, 0.0) 4px
      );
  
    animation: crtFlicker 2.6s infinite steps(2);
  }
  
  /* Static / noise layer */
  .crt-overlay::before {
    content: "";
    position: absolute;
    inset: -10%;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08) 0, transparent 55%),
      radial-gradient(circle at 80% 40%, rgba(255,255,255,0.05) 0, transparent 55%),
      radial-gradient(circle at 50% 80%, rgba(255,255,255,0.04) 0, transparent 55%);
    mix-blend-mode: soft-light;
    opacity: 0.5;
    animation: crtNoiseShift 4s linear infinite;
  }
  
  /* Vignette / edge darkening */
  .crt-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 0%, rgba(0,0,0,0.4) 0, transparent 40%),
      radial-gradient(circle at 0% 100%, rgba(0,0,0,0.5) 0, transparent 45%),
      radial-gradient(circle at 100% 100%, rgba(0,0,0,0.5) 0, transparent 45%),
      radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%);
    opacity: 0.7;
  }
  
  /* Subtle CRT brightness / flicker */
  @keyframes crtFlicker {
    0%   { opacity: 0.16; filter: brightness(1.0) contrast(1.0); }
    20%  { opacity: 0.22; filter: brightness(1.1) contrast(1.05); }
    50%  { opacity: 0.18; filter: brightness(0.98) contrast(1.0); }
    70%  { opacity: 0.23; filter: brightness(1.12) contrast(1.08); }
    100% { opacity: 0.17; filter: brightness(1.0) contrast(1.0); }
  }
  
  /* Noise drifting over time */
  @keyframes crtNoiseShift {
    0%   { transform: translate(0, 0) scale(1.02); }
    50%  { transform: translate(-2%, -1%) scale(1.04); }
    100% { transform: translate(1%, 1%) scale(1.02); }
  }
  
  /* Stronger, weirder CRT when in the Upside Down */
  body.upside-down .crt-overlay {
    opacity: 0.28;
    filter:
      hue-rotate(190deg)
      saturate(1.3)
      contrast(1.1);
  }
  
  body.upside-down .crt-overlay::before {
    opacity: 0.8;
  }

  
  @keyframes vhsDrift {
    0%   { transform: translate3d(0,0,0) scale(1.02); }
    50%  { transform: translate3d(-1%, -0.5%,0) scale(1.03); }
    100% { transform: translate3d(0,0,0) scale(1.02); }
  }
  
  /* Extra jitter ONLY in Upside Down */
  body.upside-down .hero-layer-bg {
    animation:
      vhsDrift 30s linear infinite,
      vhsJitter 0.22s infinite steps(2);
  }
  
  @keyframes vhsJitter {
    0%   { transform: translate3d(0, 0, 0) scale(1.02); }
    50%  { transform: translate3d(2px, -1px, 0) scale(1.02); }
    100% { transform: translate3d(-1px, 1px, 0) scale(1.02); }
  }
  

  /* ================================
   VHS TRACKING ERROR BAND
   ================================ */

body.upside-down .crt-overlay::after {
    background:
      /* base vignette again */
      radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%),
      linear-gradient(to right,
        rgba(0,0,0,0.55),
        transparent 20%,
        transparent 80%,
        rgba(0,0,0,0.55)
      ),
      /* horizontal tracking band */
      linear-gradient(
        to bottom,
        transparent 0,
        rgba(255,255,255,0.13) 1px,
        rgba(255,0,0,0.18) 3px,
        rgba(0,255,255,0.18) 5px,
        transparent 7px
      );
    background-repeat: no-repeat;
    background-size:
      100% 100%,
      100% 100%,
      100% 12%;
    background-position:
      center center,
      center center,
      0 -20%;
    animation: vhsTracking 4.5s linear infinite;
  }
  
  @keyframes vhsTracking {
    0%   { background-position: center center, center center, 0 -20%; }
    50%  { background-position: center center, center center, 0 110%; }
    100% { background-position: center center, center center, 0 120%; }
  }
  

  .music-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 22px;
    background: rgba(0,0,0,0.5);
    border: 2px solid red;
    padding: 10px 14px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 99999;
    color: white;
    filter: drop-shadow(1px 1px 9px red) drop-shadow(1px 1px 59px red) drop-shadow(1px 1px 17px rgba(255, 0, 0, 0.3));
    -webkit-filter: drop-shadow(1px 1px 9px red) drop-shadow(1px 1px 59px red) drop-shadow(1px 1px 17px rgba(255, 0, 0, 0.3));
  }

  .share-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-size: 22px;
    background: rgba(0,0,0,0.5);
    border: 2px solid red;
    padding: 10px 14px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 99999;
    color: white;
    filter: drop-shadow(1px 1px 9px red) drop-shadow(1px 1px 59px red) drop-shadow(1px 1px 17px rgba(255, 0, 0, 0.3));
    -webkit-filter: drop-shadow(1px 1px 9px red) drop-shadow(1px 1px 59px red) drop-shadow(1px 1px 17px rgba(255, 0, 0, 0.3));
  }

  
  /* ============================================================
   UPSIDE DOWN — BIKE SPRITES COLOR SHIFT
   ============================================================ */

body.upside-down .kid-sprite img {
    filter:      hue-rotate(190deg)      saturate(0.8)      brightness(1.1)      drop-shadow(0 0 15px rgba(0, 255, 255, 0.124))      drop-shadow(0 0 35px rgba(0, 166, 255, 0.423));
    transition: filter 0.35s ease, transform 0.35s ease;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
  
  body:not(.upside-down) .kid-sprite img {
    filter: none;
    transform: none;
    transition: filter 0.35s ease, transform 0.35s ease;
  }

  /* ============================================================
   8-BIT CHARACTER TOOLTIP
   ============================================================ */


  /* Tooltip base */
  .kid-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
  
    background: #000;
    padding: 6px 10px;
    border: 2px solid #ff0000;
    border-radius: 4px;
  
    font-family: "Press Start 2P", monospace;
    font-size: 10px;
    color: #fff;
    white-space: nowrap;
  
    text-shadow: 1px 1px #ff0000;
    z-index: 9999;
  
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  
  /* 8-bit pixel edges */
  .kid-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #000;
    border-left: 2px solid #ff0000;
    border-bottom: 2px solid #ff0000;
    transform: translateX(-50%) rotate(45deg);
  }
  
  /* Desktop hover shows tooltip */
  .kid-sprite:hover .kid-tooltip {
    opacity: 1;
  }
  
  /* Mobile: always show tooltips */
  @media (max-width: 900px) {
    .kid-tooltip {
      opacity: 1 !important;
      transform: translateX(-50%) translateY(-12px);
    }
  }
  
  /* ============================================================
   VECNA TOOLTIP — 8-BIT STYLE
   ============================================================ */

/* ============================================================
   VECNA TOOLTIP — CURSED GLITCH MODE
   ============================================================ */

   .vecna-tooltip {
    position: absolute;
    bottom: 75%;
    left: 51%;
    transform: translateX(-50%) translateY(-8px);
    background: rgba(0, 0, 0, 0.85);
    padding: 6px 12px;
    border: 2px solid #ff0000;
    border-radius: 4px;
    font-family: "Press Start 2P", monospace;
    font-size: 2rem;
    letter-spacing: 1px;
    color: #ff3b3b;
    white-space: nowrap;
    text-shadow: 0 0 8px #ff0000;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s 
ease;
}
  
  /* Hover shows it */
  .vecna-hotspot:hover + .vecna-tooltip {
    opacity: 1;
  }
  
  /* Pixel arrow */
  .vecna-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #000;
    border-left: 2px solid #ff0000;
    border-bottom: 2px solid #ff0000;
    transform: translateX(-50%) rotate(45deg);
  }
  
  /* ======== CURSED GLITCH ANIMATION ======== */
  
  .vecna-tooltip {
    animation: vecnaGlitch 2.4s infinite steps(2), vecnaPulse 3.5s infinite;
  }
  
  @keyframes vecnaGlitch {
    0%   { clip-path: inset(0 0 0 0); }
    10%  { clip-path: inset(10% 0 20% 0); transform: translateX(-50%) skewX(8deg); }
    14%  { clip-path: inset(0 0 0 0); transform: translateX(-50%) skewX(0deg); }
    15%  { clip-path: inset(40% 0 30% 0); transform: translateX(-50%) scale(1.05); }
    20%  { clip-path: inset(0 0 0 0); transform: translateX(-50%) scale(1); }
    22%  { transform: translateX(-50%) translateY(-2px); }
    23%  { transform: translateX(-50%) translateY(0); }
    100% { clip-path: inset(0 0 0 0); }
  }
  
  @keyframes vecnaPulse {
    0%   { filter: drop-shadow(0 0 4px red); }
    50%  { filter: drop-shadow(0 0 10px red); }
    100% { filter: drop-shadow(0 0 4px red); }
  }
  
  /* ======== UPSIDE DOWN MODE AMPLIFIED CURSE ======== */
  
  body.upside-down .vecna-tooltip {
    color: cyan;
    border-color: cyan;
    text-shadow: 0 0 10px cyan;
    animation: vecnaGlitchUD 1.2s infinite steps(2), vecnaPulseUD 2s infinite;
  }
  
  @keyframes vecnaGlitchUD {
    0%   { clip-path: inset(0 0 0 0); }
    15%  { clip-path: inset(50% 0 40% 0); transform: translateX(-50%) skewX(10deg); }
    30%  { clip-path: inset(0 0 0 0); transform: translateX(-50%) skewX(-6deg); }
    45%  { clip-path: inset(20% 0 60% 0); }
    60%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
  }
  
  @keyframes vecnaPulseUD {
    0%   { filter: drop-shadow(0 0 4px cyan); }
    50%  { filter: drop-shadow(0 0 14px cyan); }
    100% { filter: drop-shadow(0 0 4px cyan); }
  }
  
  /* ======== MOBILE: ALWAYS VISIBLE ======== */
  @media (max-width: 900px) {
    .vecna-tooltip {
      opacity: 1 !important;
      transform: translateX(-50%) translateY(-14px);
    }
  }

  @media (max-width: 768px) {
   .vecna-tooltip {
      bottom: 67%;
      left: 46%;
    }
  }