@font-face {
      font-family: 'IBM Plex Sans';
      src: url('IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype');
      font-weight: 100 700;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'mom';
      src: url('mom.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

        @font-face {
      font-family: 'zapped';
      src: url('zapped.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    
    :root{
      --bg:#0a0a0a;
      --glow:#ffd84a; 
      --glow-soft: rgba(255,216,74,.2);
      --lamp-size: 240px;       
      --lamp-x: 52vw;           
      --lamp-top: 8vh;         
      --chain-length: 180;      
      --pull-threshold: 15px;   
      
  --chain-seg-length: 4;    
  --chain-segments: 45;     
      --chain-gravity: 0.2;     
      --chain-damping: 0.995;   
      --chain-iterations: 18;   
      --chain-drag-slack: 40px; 
      --link-height: 5;         
      --link-width: 2;          
      --link-stroke: 0.5;       
      --chain-stem-stroke: 0.3; 
      --lamp-scale: 0.35;       
    }
    html,body{height:100%;overflow:hidden;width:100%;margin:0;padding:0;}
    body{margin:0;background:radial-gradient(ellipse at center, rgba(10,10,10,0) 0%, rgba(10,10,10,0.7) 25%, rgba(10,10,10,0.95) 50%, #0a0a0a 70%), url('bgLatest.png') center/cover no-repeat fixed var(--bg);font-family:system-ui,Segoe UI,Roboto,Inter,Arial;background-blend-mode: soft-light;overflow:hidden}

    .stage{position:relative;width:100vw;height:100vh;background:transparent;overflow:hidden;}

#conePath{
display:none;
}

    
  .room{position:absolute;inset:0;z-index:0}
    .room img{
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%), linear-gradient(to top, transparent 0%, black 20%, black 100%);
    -webkit-mask-composite: source-in;
    margin-bottom: 30%;
    filter: saturate(1.4);
    }

    
  .blackout{position:absolute;inset:0;background:#000;opacity:.92;transition:opacity .9s ease;pointer-events:none;z-index:1}
    .blackout.on{opacity:.3}

    
  .ui{position:absolute;inset:0;z-index:2}

    
    .neon{
      filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 18px var(--glow));
      -webkit-filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 18px var(--glow));
      opacity:0
    }
    .neon.on{
      animation: flicker var(--blink,2.2s) steps(30,end) .1s both;
      -webkit-animation: flicker var(--blink,2.2s) steps(30,end) .1s both;
    }

    @keyframes flicker{
      0%{opacity:.05;filter:brightness(.6) drop-shadow(0 0 2px var(--glow));}
      8%{opacity:.8}
      12%{opacity:.2}
      18%{opacity:.95}
      22%{opacity:.3}
      28%{opacity:.9}
      36%{opacity:.4}
      48%{opacity:1}
      60%{opacity:.7}
      72%{opacity:1}
      84%{opacity:.85}
      100%{opacity:1}
    }
    
    @-webkit-keyframes flicker{
      0%{opacity:.05;-webkit-filter:brightness(.6) drop-shadow(0 0 2px var(--glow));}
      8%{opacity:.8}
      12%{opacity:.2}
      18%{opacity:.95}
      22%{opacity:.3}
      28%{opacity:.9}
      36%{opacity:.4}
      48%{opacity:1}
      60%{opacity:.7}
      72%{opacity:1}
      84%{opacity:.85}
      100%{opacity:1}
    }
    
    
    @keyframes flickerIOS{
      0%{opacity:.05}
      8%{opacity:.8}
      12%{opacity:.2}
      18%{opacity:.95}
      22%{opacity:.3}
      28%{opacity:.9}
      36%{opacity:.4}
      48%{opacity:1}
      60%{opacity:.7}
      72%{opacity:1}
      84%{opacity:.85}
      100%{opacity:1}
    }
    
    @-webkit-keyframes flickerIOS{
      0%{opacity:.05}
      8%{opacity:.8}
      12%{opacity:.2}
      18%{opacity:.95}
      22%{opacity:.3}
      28%{opacity:.9}
      36%{opacity:.4}
      48%{opacity:1}
      60%{opacity:.7}
      72%{opacity:1}
      84%{opacity:.85}
      100%{opacity:1}
    }
    
    @keyframes flickerRed{
      0%{opacity:.05;filter:brightness(.6) drop-shadow(0 0 2px rgb(244, 67, 54));}
      8%{opacity:.8}
      12%{opacity:.2}
      18%{opacity:.95}
      22%{opacity:.3}
      28%{opacity:.9}
      36%{opacity:.4}
      48%{opacity:1}
      60%{opacity:.7}
      72%{opacity:1}
      84%{opacity:.85}
      100%{opacity:1}
    }
    
    @-webkit-keyframes flickerRed{
      0%{opacity:.05;-webkit-filter:brightness(.6) drop-shadow(0 0 2px rgb(244, 67, 54));}
      8%{opacity:.8}
      12%{opacity:.2}
      18%{opacity:.95}
      22%{opacity:.3}
      28%{opacity:.9}
      36%{opacity:.4}
      48%{opacity:1}
      60%{opacity:.7}
      72%{opacity:1}
      84%{opacity:.85}
      100%{opacity:1}
    }

    
    .neon-letter{transition:opacity 0.15s ease}
    .neon-letter.shot-out{opacity:0 !important}
    .neon-letter.restarting{animation: flicker 2.2s steps(30,end) both}
    
    
    .neon-red{
      filter: drop-shadow(0 0 2px rgb(244, 67, 54)) drop-shadow(0 0 8px rgb(239, 83, 80)) drop-shadow(0 0 18px rgb(239, 83, 80));
      -webkit-filter: drop-shadow(0 0 2px rgb(244, 67, 54)) drop-shadow(0 0 8px rgb(239, 83, 80)) drop-shadow(0 0 18px rgb(239, 83, 80));
      opacity:0;
      isolation: isolate; 
    }
    .neon-red.on{
      animation: flickerRed var(--blink,2.2s) steps(30,end) .1s both;
      -webkit-animation: flickerRed var(--blink,2.2s) steps(30,end) .1s both;
    }
    
    
    .neon-letter[data-letter="C"],
    .neon-letter[data-letter="Z"]{
      fill: rgb(239, 83, 80) !important;
      stroke: rgb(244, 67, 54) !important;
    }
    .neon-letter-off[data-letter="C"],
    .neon-letter-off[data-letter="Z"]{
      fill: rgb(100, 40, 40) !important;
      stroke: rgb(80, 30, 30) !important;
    }
    
    
    .neon-letter-off{transition:opacity 0.15s ease;opacity:1 !important} 
    #neonTextOff{opacity:0.3;transition:opacity 0.5s ease} 
    #neonTextOffRed{opacity:0.3;transition:opacity 0.5s ease} 
    
    .stage.light-on #neonTextOff,
    .stage.light-on #neonTextOffRed{opacity:1}
    
    
    .contract-letter{transition:opacity 0.15s ease}
    .contract-letter.shot-out{opacity:0 !important}
    .contract-letter.restarting{animation: flicker 2.2s steps(30,end) both}
    
    
    .contract-letter-off{transition:opacity 0.15s ease}
    #contractTextOff{opacity:1 !important}
    
    
    @keyframes fadeInOut {
      0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
      15% { opacity: 1; transform: translateX(-50%) translateY(0); }
      85% { opacity: 1; transform: translateX(-50%) translateY(0); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    }
    
    
    .neon-button-rect{transition:fill 0.3s ease, stroke-width 0.3s ease}
    .neon-button-text{transition:fill 0.3s ease}
    
    .stage.light-on:not(.holding-tommy) #pancakeButtonSVG:hover .neon-button-rect{fill:rgba(255,234,120,0.1);stroke-width:3}
    .stage.light-on:not(.holding-tommy) #pancakeButtonSVG:hover .neon-button-text{fill:rgb(255,247,170)}
  
  #pancakeButtonSVG{pointer-events:none}
  #pancakeButtonSVG .neon-button-rect,
  #pancakeButtonSVG .neon-button-text{cursor:default;pointer-events:none}
  .stage.light-on:not(.holding-tommy) #pancakeButtonSVG .neon-button-rect,
  .stage.light-on:not(.holding-tommy) #pancakeButtonSVG .neon-button-text{cursor:pointer;pointer-events:visiblePainted}
  
  #pancakeLink{pointer-events:none; cursor:default}
  
  .stage.light-on:not(.holding-tommy) #pancakeLink:active{transform:translateX(-50%) scale(0.97) !important}
  
  
  .mobile-action-btn svg{pointer-events:none}
  .mobile-action-btn .neon-ring,
  .mobile-action-btn .neon-label,
  .mobile-action-btn .neon-hover-fill{cursor:default;pointer-events:none}
  .stage.light-on:not(.holding-tommy) .mobile-action-btn .neon-ring,
  .stage.light-on:not(.holding-tommy) .mobile-action-btn .neon-label,
  .stage.light-on:not(.holding-tommy) .mobile-action-btn .neon-hover-fill{cursor:pointer;pointer-events:visiblePainted;font-weight: 400;}
  .stage.light-on:not(.holding-tommy) .mobile-action-btn:hover .neon-ring{stroke-width:4}
  .stage.light-on:not(.holding-tommy) .mobile-action-btn:hover .neon-label{fill:rgb(255,247,170)}
  
  .mobile-action-btn .neon-hover-fill{opacity:0;transition:opacity 0.25s ease}
  .stage.light-on:not(.holding-tommy) .mobile-action-btn:hover .neon-hover-fill{opacity:1}
  
  .stage.holding-tommy .mobile-action-btn:active{transform:none !important}
  .stage.holding-tommy #pancakeLink:active{transform:translateX(-50%) !important}
  
  .stage.holding-tommy #pancakeButtonSVG{pointer-events:none}
  .stage.holding-tommy #pancakeButtonSVG:hover .neon-button-rect{fill:none !important;stroke-width:2 !important}
  .stage.holding-tommy #pancakeButtonSVG:hover .neon-button-text{fill:rgb(255,234,120) !important}
  .stage.holding-tommy .mobile-action-btn{pointer-events:none !important}
  .stage.holding-tommy .mobile-action-btn:hover .neon-ring{stroke-width:3 !important}
  .stage.holding-tommy .mobile-action-btn:hover .neon-label{fill:rgb(255,234,120) !important}
  .stage.holding-tommy .mobile-action-btn:hover .neon-hover-fill{opacity:0 !important}

    
    @media (min-width: 1025px) {
      #pancakeLink{
        position:fixed !important;
        bottom:40px !important;
        left:50% !important;
        transform:translateX(-50%) !important;
        z-index:11;
      }
      #pancakeButtonSVG{
        width:320px;
        height:100px;
      }
    }

    #pancakeButtonSVG{
      overflow: visible;
    }

    
    .tommy-g{position:absolute;top:5vh;right:5vw;width:200px;height:auto;opacity:0;transition:opacity 1s ease;cursor:pointer;z-index:501;pointer-events:none}
    .tommy-g.show{opacity:1;transition-delay:1s;pointer-events:auto}
    .tommy-g.picked-up{opacity:0;pointer-events:none}
    .tommy-g.dropping{animation:drop 0.8s ease-in forwards;pointer-events:none}
    
    
    .poster-container{position:absolute;opacity:0;transition:opacity 1.5s ease;z-index:2;overflow:visible}
    .poster-container.show{opacity:1}
    .poster{width:150px;height:auto;display:block;filter:sepia(0.3) brightness(0.7);position:relative}
    .poster.can-tear{cursor:grab}
    .poster.can-tear:active{cursor:grabbing}
    
    
    .poster-top{position:absolute;top:0;left:0;width:min(150px, 12vw);overflow:hidden;pointer-events:none;z-index:2;display:none;clip-path:polygon(
      0% 0%, 100% 0%, 100% 100%, 98% 92%, 95% 100%, 93% 88%, 90% 96%, 87% 90%, 85% 100%, 82% 94%,
      80% 100%, 77% 88%, 75% 96%, 72% 92%, 70% 100%, 67% 90%, 65% 94%, 62% 86%, 60% 100%, 57% 92%,
      55% 96%, 52% 90%, 50% 100%, 47% 94%, 45% 88%, 42% 96%, 40% 100%, 37% 92%, 35% 86%, 32% 94%,
      30% 100%, 27% 90%, 25% 96%, 22% 92%, 20% 100%, 17% 88%, 15% 94%, 12% 92%, 10% 100%, 7% 90%, 5% 96%, 2% 92%, 0% 100%
    )}
    .poster-top img{width:min(150px, 12vw);height:auto;position:absolute;top:0;left:0;filter:sepia(0.3) brightness(0.7);display:block}
    .poster-bottom{width:min(150px, 12vw);position:absolute;top:0;left:0;transition:none;z-index:1}
    .poster-bottom.tearing{position:fixed !important;z-index:10000 !important;pointer-events:auto}
    .poster-bottom.torn{transition:transform 0.8s ease-out, opacity 0.6s ease-out;transform:translate(0, 100vh) rotate(15deg);opacity:0}
    
    
    .poster-content{position:relative;width:min(150px, 12vw);display:block;background:#6b5d4f;opacity:0.8;overflow:visible}
    
    
    .coming-soon-label{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%) rotate(-15deg);
      background:rgba(0,0,0,0.9);
      color:#ffd84a;
      font-family:'IBM Plex Sans', 'Segoe UI', Roboto, Inter, Arial, Helvetica, sans-serif;
      font-size:16px;
      font-weight:700;
      letter-spacing:1.5px;
      padding:8px 14px;
      border:2.5px solid #ffd84a;
      border-radius:4px;
      text-shadow:0 0 8px rgba(255,216,74,0.8), 0 0 15px rgba(255,216,74,0.5);
      box-shadow:0 0 15px rgba(255,216,74,0.3), inset 0 0 8px rgba(255,216,74,0.2);
      z-index:5;
      pointer-events:none;
      user-select:none;
      white-space:nowrap;
      max-width:calc(100% - 20px);
    }
    
    
    .poster-frame{position:relative;display:inline-block;padding:min(20px, 1.5vw);background:#1a1a1a;border:3px solid #333;overflow:visible}
    .lightbulb{position:absolute;width:min(12px, 1vw);height:min(12px, 1vw);border-radius:50%;background:radial-gradient(circle, #fff 0%, #ffeb80 40%, #ff9800 100%);opacity:0;transition:opacity 0.3s ease;transform:translate(-50%, -50%)}
    .lightbulb.on{opacity:1;box-shadow:0 0 15px 3px rgba(255,235,128,0.8), 0 0 25px 5px rgba(255,152,0,0.4);animation:bulbFlicker 3s ease-in-out infinite}
    
    @keyframes bulbFlicker {
      0%, 100% { opacity: 1; filter: brightness(1); }
      50% { opacity: 0.92; filter: brightness(0.95); }
      75% { opacity: 0.98; filter: brightness(0.98); }
    }
    
    
    .poster-carousel{
      display:none;
      position:fixed;
      bottom:80px;
      left:0;
      right:0;
      height:220px;
      overflow-x:visible;
      overflow-y:hidden;
      white-space:nowrap;
      padding:20px;
      z-index:10;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:thin;
      scrollbar-color:rgba(255,216,74,0.3) transparent;
      cursor:grab;
      touch-action: pan-x;
    }
    .poster-carousel::-webkit-scrollbar{height:8px}
    .poster-carousel::-webkit-scrollbar-track{background:transparent}
    .poster-carousel::-webkit-scrollbar-thumb{background:rgba(255,216,74,0.3);border-radius:4px}
    
    .poster-carousel .poster-container{
      display:inline-block !important;
      position:relative !important;
      margin:0 24px;
      vertical-align:top;
      left:auto !important;
      right:auto !important;
      top:auto !important;
    }

@media (max-width: 1024px) and (max-height: 750px) {
    #bgDiv {
      width: min(87%, 600px) !important;
    }
        .room img {
        margin-bottom: 42%;
    }
    }
    
    
    .carousel-hint{
      display:none;
      position:fixed;
      bottom:8px;
      left:50%;
      transform:translateX(-50%);
      color:#bbb;
      font-family:'IBM Plex Sans', 'Segoe UI', Roboto, Inter, Arial, Helvetica, sans-serif;
      font-size:13px;
      letter-spacing:0.4px;
      opacity:0;
      user-select:none;
      pointer-events:none;
      z-index:11;
      text-align:center;
      transition:opacity 0.3s ease;
    }
    .carousel-hint.show{
      opacity:0.7;
    }
    .carousel-hint.hide{
      opacity:0;
    }
    
    
    
    @media (max-width: 1024px), (orientation: portrait) and (max-width: 1366px) {
      .poster-carousel{display:block; height: 220px;}
      .poster-container:not(.in-carousel){display:none !important}
      .carousel-hint{display:block;}

      
      #neonTextHTML,
      #neonTextHTMLOff{
        top:-30px !important;
      }
      
      
      #neonTextHTML .letter-C,
      #neonTextHTML .letter-Z {
        color: rgb(255, 124, 124) !important;
        text-shadow: 0px 0px 0px rgb(244, 67, 54), 1px 0px 4px rgb(239, 83, 80), 0 0 18px rgb(239, 83, 80) !important;
      }

      
      .poster-carousel{
        scrollbar-width:none;
        bottom:45px; 
      }
      .poster-carousel::-webkit-scrollbar{display:none}
      
      
      #contractContainer{
        display:none !important;
      }
      
      
      .mobile-action-buttons{
        display:flex !important;
        justify-content:space-between;
        position:fixed;
        left:20px;
        right:20px;
        z-index:11;
        opacity:0;
        transition:opacity 1s ease;
        pointer-events:none;
      }
      
      
      .mobile-action-btn{
        width:70px !important;
        height:70px !important;
        font-size:16px !important;
      }
      
      .mobile-action-buttons.show{
        opacity:1;
        pointer-events:auto;
      }
      
      
      #pancakeLink{
        position:fixed !important;
        bottom: 40vh !important;
        left:50% !important;
        transform:translateX(-50%) !important;
        z-index:11;
      }
      #pancakeButtonSVG{
        width:200px;
        height:60px;
      }
      
      
      
      #bgDiv{
        width: min(95%, 600px) !important;
        top: 18vh !important;
      }
      
      
      :root{
        --lamp-scale: 0.8 !important;
        --lamp-top: 18vh !important;
      }
      #lampShade, #lampChain, #lampBulb{
        transform-origin: center top;
      }
      .pull-area{
        width: 150px !important;
        height: 150px !important;
      }
    #hint {
        font-size: 22px !important;
        right: auto !important;
        left: 5vw !important;
        top: calc(-10vh + 200px) !important;
        transform: none !important;
        text-align: right !important;
        width: 150px !important;
    }
      
      
      #neonText, #neonTextOff, #neonTextRed, #neonTextOffRed{
        font-size: 140px !important;
        letter-spacing: 5px !important;
      }
    }
    
    
    @media (max-width: 1024px) and (pointer: coarse),
           (orientation: portrait) and (max-width: 1366px) and (pointer: coarse) {
      .tommy-g{display:none !important}
      .tommy-corner{display:none !important}
    }
    
    @media (max-width: 1024px), (orientation: portrait) and (max-width: 1366px) {
      
      
      .in-carousel .poster{
        cursor:pointer !important;
        width:120px !important;
        height:auto;
        user-select:none;
        pointer-events:auto !important;
      }
      .in-carousel .poster.can-tear{
        cursor:pointer !important;
        pointer-events:auto !important;
      }
      
      .in-carousel .poster-container{
        pointer-events:auto !important;
      }
      
      
      .in-carousel .poster-top{width:120px !important}
      .in-carousel .poster-top img{width:120px !important}
      .in-carousel .poster-bottom{width:120px !important}
      .in-carousel .poster-content{width:120px !important;display:block}
      .in-carousel .poster-frame{
        padding:15px !important;
        display:inline-block;
        position:relative;
        background:#1a1a1a;
        border:3px solid #333;
      }
      .in-carousel .lightbulb{
        width:10px !important;
        height:10px !important;
        position:absolute;
        transform: translate(-95%, -96%);
      }
      
      
      .in-carousel .coming-soon-label{
        font-size:10px !important;
        letter-spacing:0.5px !important;
        padding:4px 8px !important;
        border-width:2px !important;
        max-width:90px !important;
      }
    }
    
    
    @media (max-width: 1024px) {
      .in-carousel .poster-container{
        transform: scale(0.7) !important;
        transform-origin: center center;
      }
      .poster-carousel {
        bottom: 20px;
      }
      .room img {
        margin-bottom: 38%;
      }
      #pancakeLink {
        
      }
      
      
      .poster {
        filter: sepia(0.15) brightness(0.85) !important;
      }
      .poster-top img {
        filter: sepia(0.15) brightness(0.85) !important;
      }
      
      .lightbulb.on {
        opacity: 1 !important;
        box-shadow: 0 0 15px 3px rgba(255,235,128,0.75), 0 0 24px 5px rgba(255,152,0,0.4) !important;
      }
    }
    
    
    @media (max-width: 375px), (max-height: 675px) {
      
      .in-carousel .poster{
        width:70px !important;
      }
      .in-carousel .poster-top{width:70px !important}
      .in-carousel .poster-top img{width:70px !important}
      .in-carousel .poster-bottom{width:70px !important}
      .in-carousel .poster-content{width:70px !important}
      .in-carousel .poster-frame{
        padding:8px !important;
      }
      .in-carousel .lightbulb{
        width:5px !important;
        height:5px !important;
        animation: none !important;
      }
      .in-carousel .coming-soon-label{
        font-size:7px !important;
        padding:2px 4px !important;
        max-width:60px !important;
        letter-spacing:0.3px !important;
      }
      .poster-carousel .poster-container{
        margin:0 12px !important;
      }
      .poster-carousel{
        height: 155px !important;
        bottom: 25px !important;
      }
      .room img {
        margin-bottom: 45% !important;
      }
      #pancakeLink {
        transform: translateX(-50%) scale(0.8) !important;
        
      }
 
    }
    
    
    @media (min-width: 376px) and (max-width: 400px) and (min-height: 676px) and (max-height: 800px) {
      
      .in-carousel .poster{
        width:95px !important;
      }
      .in-carousel .poster-top{width:95px !important}
      .in-carousel .poster-top img{width:95px !important}
      .in-carousel .poster-bottom{width:95px !important}
      .in-carousel .poster-content{width:95px !important}
      .in-carousel .poster-frame{
        padding:11px !important;
      }
      .in-carousel .lightbulb{
        width:7px !important;
        height:7px !important;
      }
      .in-carousel .coming-soon-label{
        font-size:8.5px !important;
        padding:3px 6px !important;
        max-width:75px !important;
        letter-spacing:0.4px !important;
      }
      .poster-carousel .poster-container{
        margin:0 14px !important;
      }
      .poster-carousel{
        height: 187px !important;
        bottom: 32px !important;
      }
      .room img {
        margin-bottom: 40% !important;
      }
      #pancakeLink {
        transform: translateX(-50%) scale(0.9) !important;
        
      }
    }
    
    @media (max-width: 375px) and (max-height: 675px) {
         #neonTextHTML,
         #neonTextHTMLOff{
      padding: 15px!important;
      }
    }
    
    
    body.is-small-ios #neonTextHTML,
    body.is-small-ios #neonTextHTMLOff {
      top: 0px !important;
    }

        @media (max-width: 1024px) and (min-height: 901px) {
.room img {
  margin-bottom: 35%;
}
    #pancakeLink {
    bottom: 40vh;
    }

        }
    
    
    .tommy-corner{position:absolute;top:5vh;right:5vw;width:200px;height:200px;border:3px dashed rgba(255,216,74,.4);border-radius:8px;opacity:0;pointer-events:none;z-index:3;transition:opacity 0.3s ease}
    .tommy-corner.show{opacity:1;pointer-events:auto;cursor:pointer}
    
    
    .stage.holding-tommy,
    .stage.holding-tommy *{cursor:none !important}
    
    
    .tommy-follower{position:fixed;width:200px;height:auto;pointer-events:none;z-index:9999;display:none;transform:translate(-50%, -50%) rotate(45deg);transform-origin:center center}
    .tommy-follower.active{display:block}
    
    
    .tommy-crosshair{position:fixed;width:30px;height:30px;pointer-events:none;z-index:9998;display:none;transform:translate(-50%, -50%)}
    .tommy-crosshair.active{display:block}
    .tommy-crosshair::before,
    .tommy-crosshair::after{content:'';position:absolute;background:rgba(255,0,0,.7)}
    .tommy-crosshair::before{width:2px;height:100%;left:50%;transform:translateX(-50%)}
    .tommy-crosshair::after{height:2px;width:100%;top:50%;transform:translateY(-50%)}
    
    
    .bullet{position:fixed;width:20px;height:auto;pointer-events:none;z-index:399;transform:rotate(225deg);transition:left 0.15s linear, top 0.15s linear}
    
    @keyframes fire{
      0%{opacity:1}
      100%{opacity:1}
    }
    
    
    .bullet-hole{position:fixed;width:50px;height:50px;pointer-events:none;z-index:400;transform:translate(-50%, -50%);opacity:1;transition:opacity 1s ease}
    .bullet-hole.fade{opacity:0}
    
    @keyframes drop{
      0%{transform:translate(0, 0) rotate(45deg);opacity:1}
      100%{transform:translate(0, 150vh) rotate(0deg);opacity:0}
    }
    
    @keyframes paperFall{
      0%{transform:translateY(0) translateX(0) rotateZ(0deg) rotateX(0deg);opacity:1}
      10%{transform:translateY(10vh) translateX(-20px) rotateZ(-8deg) rotateX(15deg);opacity:1}
      20%{transform:translateY(20vh) translateX(-30px) rotateZ(5deg) rotateX(-10deg);opacity:1}
      30%{transform:translateY(35vh) translateX(-15px) rotateZ(-12deg) rotateX(20deg);opacity:1}
      40%{transform:translateY(50vh) translateX(10px) rotateZ(8deg) rotateX(-15deg);opacity:0.95}
      50%{transform:translateY(65vh) translateX(25px) rotateZ(-6deg) rotateX(10deg);opacity:0.9}
      60%{transform:translateY(78vh) translateX(15px) rotateZ(10deg) rotateX(-8deg);opacity:0.85}
      70%{transform:translateY(88vh) translateX(-5px) rotateZ(-15deg) rotateX(12deg);opacity:0.75}
      80%{transform:translateY(95vh) translateX(-20px) rotateZ(20deg) rotateX(-5deg);opacity:0.6}
      90%{transform:translateY(100vh) translateX(-10px) rotateZ(-10deg) rotateX(8deg);opacity:0.4}
      100%{transform:translateY(110vh) translateX(5px) rotateZ(25deg) rotateX(0deg);opacity:0}
    }

    
  .vignette{position:absolute;inset:-10vmax; pointer-events:none; background:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 80%);z-index:15}

  
  .letter-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(0px);opacity:0;visibility:hidden;transition:background 0.5s ease, backdrop-filter 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s}
  .letter-overlay.show{background:rgba(0,0,0,0.85);backdrop-filter:blur(3px);opacity:1;visibility:visible;transition:background 0.5s ease, backdrop-filter 0.5s ease, opacity 0.5s ease, visibility 0s linear}
  .letter-container{position:relative;width:min(85vw, 450px);height:min(85vh, 600px);background:url('letter.jpg') center/cover;box-shadow:0 20px 60px rgba(0,0,0,0.9);padding:50px 60px;overflow-y:auto;opacity:0;transform:translateY(-50px) scale(0.9) rotateX(10deg);transition:opacity 0.6s ease 0.1s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, box-shadow 0.6s ease 0.1s}
  .letter-overlay.show .letter-container{opacity:1;transform:translateY(0) scale(1) rotateX(0deg);box-shadow:0 20px 60px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.1)}
  .letter-close{position:absolute;top:15px;right:15px;width:35px;height:35px;background:rgba(0,0,0,0.3);border:none;border-radius:50%;cursor:pointer;font-size:24px;color:#fff;display:flex;align-items:center;justify-content:center;transition:background 0.2s ease;z-index:1}
  .letter-close:hover{background:rgba(0,0,0,0.6)}
  .letter-text{font-family:'mom', 'Courier New', Courier, monospace;font-size:clamp(13px, 2vw, 16px);line-height:1.8;color:#1a1a1a;text-align:left;letter-spacing:0.5px;white-space:pre-wrap}
  @media (max-width: 768px){
    .letter-container{padding:35px 25px;width:90vw;height:auto;max-height:85vh}
    .letter-text{font-size:13px;line-height:1.6}
  }

    
    .mobile-action-buttons{
      display:flex;
      gap:15px;
      position:fixed;
      left:5vw; 
      top:5vh; 
      z-index:11;
      opacity:0;
      transition:opacity 1s ease;
      pointer-events:none;
    }
    
    
    .stage.holding-tommy .mobile-action-buttons{
      pointer-events:none;
    }
    
    .mobile-action-buttons.show{
      opacity:1;
    }
    
    .mobile-action-btn{
      width:100px;
      height:100px;
      border-radius:50%;
      background:transparent; 
      border:0; 
      padding:0;
      color:#ffd84a;
      font-family:'IBM Plex Sans', 'Segoe UI', Roboto, Inter, Arial, Helvetica, sans-serif;
      font-size:20px;
      font-weight:700;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:none; 
      transition:all 0.2s ease;
      user-select:none;
      -webkit-tap-highlight-color:transparent;
  pointer-events:none; 
      overflow:visible; 
      
      clip-path: circle(50% at 50% 50%);
      -webkit-clip-path: circle(50% at 50% 50%);
    }
    
    .mobile-action-btn:active{ transform:scale(0.97); }
    
    
    .stage.light-on:not(.holding-tommy) .mobile-action-btn{ pointer-events:auto; }
    .stage.light-on:not(.holding-tommy) #pancakeLink{ pointer-events:auto !important; }

    
    .stage.holding-tommy .mobile-action-btn{
      pointer-events:none;
    }
    
    .stage.holding-tommy #pancakeLink{
      pointer-events:none !important;
    }
    
    
    #contractContainer{
      display:none !important;
    }
    
    
    #bgDiv{
      position:absolute;
      top:0;
      left:50%;
      transform:translateX(-50%);
      width:min(35%, 600px);
      height:min(70vh, 700px);
      
      filter:saturate(.95) contrast(1.05) brightness(1.05);
      mask-image:linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%), linear-gradient(to top, transparent 0%, black 20%, black 100%);
      -webkit-mask-image:linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%), linear-gradient(to top, transparent 0%, black 20%, black 100%);
      mask-composite:intersect;
      -webkit-mask-composite:source-in;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
    }
    
    #bgDiv img{
      width:100%;
      height:auto;
      object-fit:contain;
      object-position:center 55%;
      display:block;
    }
    
    .room img{
      margin-bottom:0%;
    }

    
    @media (min-width: 1025px) {
      :root{
        
        --poster-w: clamp(95px, 7.6vw, 195px);
      }
      .poster { width: var(--poster-w) !important; }
      .poster-top,
      .poster-top img,
      .poster-bottom,
      .poster-content { width: var(--poster-w) !important; }
      
      .coming-soon-label{
        font-size: clamp(9px, calc(var(--poster-w) * 0.085), 16px) !important;
        letter-spacing: clamp(0.6px, calc(var(--poster-w) * 0.012), 1.6px) !important;
        padding: calc(var(--poster-w) * 0.045) calc(var(--poster-w) * 0.08) !important;
        border-width: clamp(1.2px, calc(var(--poster-w) * 0.013), 2.6px) !important;
        
        max-width: calc(100% - clamp(10px, calc(var(--poster-w) * 0.12), 20px)) !important;
      }
    }

    
    @media (max-width: 1024px) and (max-height: 750px) {
      .room img { margin-bottom: 42% !important; }
    }
    @media (max-width: 1024px) and (max-height: 800px) {
      .room img { margin-bottom: 38% !important; }
    }
    @media (max-width: 1024px) and (min-height: 800px) {
      .room img { margin-bottom: 35% !important; }
    }

    
  .hint{position:absolute;left:min(calc(var(--lamp-x) + 120px), 88vw); top:calc(var(--lamp-top) + 110px); color:#bbb;font-size:14px;letter-spacing:.4px;opacity:.7;user-select:none;pointer-events:none;z-index:4}
    .hint.k{display:none}

    
    .side-hint, .gun-hint{position:absolute;color:#ffffff;font-family:'IBM Plex Sans', 'Segoe UI', Roboto, Inter, Arial, Helvetica, sans-serif;letter-spacing:.4px;opacity:0;transition:opacity .3s ease;user-select:none;pointer-events:none;z-index:12;}
    .side-hint.show, .gun-hint.show{
      opacity:0.5;
    }
    @media (min-width: 1025px){
      .side-hint, .gun-hint{font-size:clamp(10px,0.95vw,13px)}
    }
    @media (max-width: 1024px){
      .side-hint, .gun-hint{display:none !important}
    }
    
    
    @media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
      .room img {
        margin-bottom: -7% !important;
      }
      
      
      .mobile-action-btn {
        width: 150px !important;
        height: 150px !important;
      }
      .mobile-action-btn svg {
        width: 100% !important;
        height: 100% !important;
      }
      .mobile-action-btn .neon-label {
        font-size: 30px !important;
      }
    }
    
    
    @media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
      
      .in-carousel .poster{
        width:180px !important;
      }
      .in-carousel .poster-top{width:180px !important}
      .in-carousel .poster-top img{width:180px !important}
      .in-carousel .poster-bottom{width:180px !important}
      .in-carousel .poster-content{width:180px !important}
      .in-carousel .poster-frame{
        padding:20px !important;
      }
      .in-carousel .lightbulb{
        width:12px !important;
        height:12px !important;
      }
      
      .in-carousel .poster-frame[data-lightbulb-spacing] {
        --lightbulb-spacing: 16px !important;
      }
      .in-carousel .coming-soon-label{
        font-size:12px !important;
        padding:5px 10px !important;
        max-width:140px !important;
      }
      .poster-carousel{
        height: 300px !important;
      }
      
      
      #pancakeLink {
        transform: translateX(-50%) scale(2) !important;
        bottom: 35vh !important;
      }
      
      
      :root {
        --lamp-scale: 0.7 !important;
        --lamp-top: 10vh !important;
      }
      
      
      #bgDiv {
        width: 78% !important;
        max-width: 780px !important;
      }
      
      
      .mobile-action-btn {
        width: 115px !important;
        height: 115px !important;
      }
      .mobile-action-btn svg {
        width: 115px !important;
        height: 115px !important;
      }
      .mobile-action-btn .neon-label {
        font-size: 16px !important;
      }
      .mobile-action-buttons {
        justify-content: space-between !important;
        left: 10vw !important;
        right: 10vw !important;
        
      }
    }
    
    
    @media (min-width: 768px) and (max-width: 1030px) and (orientation: portrait) {
      #neonTextHTML,
      #neonTextHTMLOff {
        font-size: 85px !important;
        padding: 30px !important;
        top: -10px !important;
      }
    }
    
    
    @media (min-width: 1031px) and (max-width: 1366px) and (orientation: portrait) {
      #neonTextHTML,
      #neonTextHTMLOff {
        font-size: 100px !important;
        padding: 30px !important;
        top: -1px !important;
      }
    }
    
    
    @media (max-width: 1199px) and (orientation: landscape) and (pointer: coarse) {
      
      .tommy-g {
        display: none !important;
      }
      .tommy-corner {
        display: none !important;
      }
    }
    
    
    @media (min-width: 768px) and (max-width: 1440px) and (orientation: landscape) and (pointer: coarse) {
      
      .tommy-g {
        display: none !important;
      }
      .tommy-corner {
        display: none !important;
      }
      #tommyHint {
        display: none !important;
      }
      
      
      .side-hint {
        display: block !important;
        font-size: 14px !important;
      }
      .side-hint.show {
        opacity: 1 !important;
        color: #fff !important;
      }
      
      
      .in-carousel .lightbulb {
        width: 8px !important;
        height: 8px !important;
      }
      
      
      #bgDiv {
        width: 65% !important;
        max-width: 650px !important;
      }
    }
    
    
    @media (min-width: 768px) and (max-width: 1300px) and (orientation: landscape) {
      #neonTextHTML,
      #neonTextHTMLOff {
        font-size: 90px !important;
        padding: 20px !important;
        top: 5px !important;
      }
    }
    
    
    @media (min-width: 1301px) and (max-width: 1440px) and (orientation: landscape) {
      #neonTextHTML,
      #neonTextHTMLOff {
        font-size: 130px !important;
        padding: 30px !important;
        top: 5px !important;
      }
    }

    posterCarousel{

      overflow: visible;
    }

    
  .pull-area{position:absolute;z-index:15;width:60px;height:60px;transform:translate(-50%,-50%);left:var(--lamp-x);top:calc(var(--lamp-top) + 14px);background:transparent;border:0;outline:none;pointer-events:auto;cursor:grab;touch-action:none}
  

    
  svg .grabbable{cursor:grab;touch-action:none;pointer-events:all}
  svg{user-select:none}
  svg text{user-select:none;cursor:default}
  .stage{user-select:none}
  
  
  .landscape-warning{position:fixed;inset:0;background:#0a0a0a;z-index:10000;display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}
  .landscape-warning-icon{font-size:80px;margin-bottom:30px;animation:rotatePhone 2s ease-in-out infinite}
  .landscape-warning-text{color:#ffd84a;font-family:'IBM Plex Sans', 'Segoe UI', Roboto, Inter, Arial, Helvetica, sans-serif;font-size:24px;font-weight:600;line-height:1.6;max-width:500px;text-shadow:0 0 10px rgba(255,216,74,0.5)}
  @keyframes rotatePhone{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}
  
  @media (max-height: 600px) and (min-width: 700px){
    .landscape-warning{display:flex}
  }
  
  @media (min-width: 1024px) and (max-width: 1100px) and (max-height: 700px) and (orientation: landscape){
    .landscape-warning{display:flex}
  }
  
  @media (min-width: 768px) and (max-width: 1440px) and (max-height: 699px) and (orientation: landscape){
    .landscape-warning{display:flex}
  }
  
  
  .p-canvas-webgl {
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 0.3;
    transition: opacity 0.6s ease;
    
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  }
  
  
  .stage.light-on ~ .p-canvas-webgl,
  body:has(.stage.light-on) .p-canvas-webgl,
  body.light-on .p-canvas-webgl {
    opacity: 1;
  }

  
  .is-safari #bgDiv img,
  .is-ios #bgDiv img,
  .is-safari #bg,
  .is-ios #bg{
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
  }
  
  .is-ios-15-4-or-later #bgDiv {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-composite: initial !important;
    mask-composite: initial !important;
  }
  
  .is-safari .room img,
  .is-ios .room img{
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
  }
  
  
  @media (max-width: 1024px), (orientation: portrait) and (max-width: 1366px) {
    #bgDiv{ 
      height:auto !important; 
      display:block !important;
      flex-direction:initial !important;
      justify-content:initial !important;
      align-items:initial !important;
      position:relative !important;
    }
    
    #bgDiv::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: 
        linear-gradient(to right, rgba(10,10,10,1) 0%, transparent 25%, transparent 75%, rgba(10,10,10,1) 100%),
        linear-gradient(to top, rgba(10,10,10,1) 0%, transparent 30%);
      z-index: 1;
    }
    #bgDiv img{ 
      width:100% !important; 
      height:auto !important; 
      display:block !important;
      object-fit:contain !important;
      position: relative;
      z-index: 0;
    }
    .room img{
      width:100% !important;
      height:auto !important;
      display:block !important;
      object-fit:contain !important;
      margin-bottom:0 !important;
    }
  }
  
  .is-ios #bgDiv{
    height: auto !important;
    display: block !important;
    flex-direction: initial !important;
    justify-content: initial !important;
    align-items: initial !important;
  }
  .is-ios #bgDiv img,
  .is-ios .room img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-height: none !important;
    margin-bottom: 0 !important;
  }
  
  @media (min-width: 768px) and (pointer: coarse) {
    body:not(.is-ios) .tommy-g,
    body:not(.is-ios) .tommy-corner,
    body:not(.is-ios) #tommyHint {
      display: none !important;
    }
  }
  
  @media (min-width: 768px) and (max-height: 1080px) {
    body:not(.is-ios) #bgDiv {
      justify-content: center !important;
    }
  }

  .is-ios .mobile-action-buttons.show{
    opacity:1 !important;
    display:flex !important;
    visibility:visible !important;
    z-index:11 !important;
    pointer-events:auto !important;
  }

#tearHintRight{
  margin-right: 5px;
}
#tearHintLeft{
  margin-left: 5px;
}

  
  .is-ios #neonText{
    filter: drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 12px var(--glow)) drop-shadow(0 0 24px var(--glow)) !important;
    -webkit-filter: drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 12px var(--glow)) drop-shadow(0 0 24px var(--glow)) !important;
  }
  
  .is-ios #neonWrap{
    display: none !important;
  }
  
  .is-ios #neonTextHTMLOff{
    display: block !important;
  }
  
  .stage.light-on #neonTextHTMLOff{
    opacity: 1 !important;
  }
  
  .is-ios #neonTextHTML{
    display: block !important;
  }
  .is-ios #neonTextHTML.on{
    animation: flickerIOS var(--blink,2.2s) steps(30,end) .1s both;
    -webkit-animation: flickerIOS var(--blink,2.2s) steps(30,end) .1s both;
  }
  
  .is-ios #neonTextHTML .neon-yellow-html {
    filter: drop-shadow(0 0 2px rgb(255,216,74)) drop-shadow(0 0 6px rgb(255,216,74)) !important;
    -webkit-filter: drop-shadow(0 0 2px rgb(255,216,74)) drop-shadow(0 0 6px rgb(255,216,74)) !important;
  }
  
  .is-ios #neonTextHTML .neon-red-html {
    filter: drop-shadow(0 0 2px rgb(244,67,54)) drop-shadow(0 0 6px rgb(239,83,80)) !important;
    -webkit-filter: drop-shadow(0 0 2px rgb(244,67,54)) drop-shadow(0 0 6px rgb(239,83,80)) !important;
    isolation: isolate;
  }
  
  .is-ios .neon-ring,
  .is-ios .neon-button-rect,
  .is-ios .neon-button-text{
    filter:none !important;
  }
  
  .is-ios .neon-label{
    filter: drop-shadow(0 0 3px rgba(255,216,74,0.8)) drop-shadow(0 0 8px rgba(255,216,74,0.6)) !important;
  }
  .is-ios .mobile-action-btn{
    box-shadow: 0 0 10px rgba(255,216,74,0.6), 0 0 20px rgba(255,216,74,0.4), inset 0 0 10px rgba(255,216,74,0.2) !important;
  }
  .is-ios #pancakeButtonSVG{
    filter: drop-shadow(0 0 4px rgba(255,216,74,0.8)) drop-shadow(0 0 12px rgba(255,216,74,0.5)) !important;
  }
  .is-ios #pancakeLink{
    z-index:11 !important;
  }
  .is-ios #aboutBtn svg{
    filter: drop-shadow(0 0 4px rgba(255,235,128,0.8)) drop-shadow(0 0 12px rgba(255,235,128,0.5)) !important;
  }
  .is-ios #caBtn svg{
    filter: drop-shadow(0 0 4px rgba(255,235,128,0.8)) drop-shadow(0 0 12px rgba(255,235,128,0.5)) !important;
  }
  

  
  .letter-overlay{ backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  .letter-overlay.show{ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  
  
  .is-ios-15 #bgDiv {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: fixed !important;
    z-index: 5 !important; 
  }
  .is-ios-15 #bgDiv img,
  .is-ios-15 #bg {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .is-ios-15 .room {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important; 
  }
  
  .is-ios-15 #bgDiv,
  .is-ios-15 #bg {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
  }
  
  .is-ios-15 #chairFadeOverlay {
    display: none !important;
    opacity: 0 !important;
  }
  
  
  .is-ios-14-or-lower .p-canvas-webgl {
    display: none !important; 
  }
  .is-ios-14-or-lower #bgDiv,
  .is-ios-15 #bgDiv {
    transition: none !important; 
  }
  .is-ios-14-or-lower .stage:not(.light-on) #bgDiv,
  .is-ios-15 .stage:not(.light-on) #bgDiv {
    opacity: 0.3 !important; 
  }
  .is-ios-14-or-lower .stage.light-on #bgDiv,
  .is-ios-15 .stage.light-on #bgDiv {
    opacity: 1 !important; 
  }