/* =========================================
       1. PRELOADER OVERLAY
    ========================================= */
    #preloader {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      background: radial-gradient(circle at center, #1b1035 0%, #04020a 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 999999;
      overflow: hidden;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    #preloader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* =========================================
       2. BOMB & STAGE
    ========================================= */
    .bomb-stage {
      position: relative;
      width: 300px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .bomb {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #555 0%, #1a1a1a 50%, #000 100%);
      box-shadow: inset -5px -5px 20px rgba(0,0,0,0.9), 0 15px 25px rgba(0,0,0,0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
      transition: transform 0.1s ease-in;
    }

    .bomb-logo-badge {
      width: 88px;
      height: 88px;
      background: #ffffff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 6px;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.8);
    }

    .preloader-logo {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .bomb-cap {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 20px;
      background: linear-gradient(90deg, #222, #555, #222);
      border-radius: 4px 4px 0 0;
      border-bottom: 3px solid #000;
    }

    /* =========================================
       3. MATHEMATICAL SVG FUSE (WITH ASHES)
    ========================================= */
    .fuse-svg {
      position: absolute;
      bottom: 174px;
      right: 50%;
      width: 100px;
      height: 100px;
      overflow: visible; /* Prevents stroke clipping */
      z-index: 1;
    }

    .ash-fuse {
      stroke: #78716c !important;
      stroke-width: 3.5px !important;
      stroke-dasharray: 3, 3 !important;
      stroke-linecap: round !important;
      opacity: 0.95;
    }

    .unburned-fuse {
      stroke: #ffffff !important;
      stroke-width: 4px !important;
      stroke-linecap: round !important;
      stroke-dasharray: 158 350;
      stroke-dashoffset: 0;
      transition: none;
    }

    /* =========================================
       4. CENTERED SPARK ROTATION
    ========================================= */
    .spark-wrapper {
      position: absolute;
      bottom: 174px;
      right: 50%;
      width: 100px;
      height: 100px;
      transform-origin: 0 100px; /* Pivots exactly at the bottom-left point */
      z-index: 3;
    }

    .burning-tip {
      position: absolute;
      top: -10px;  /* Locks perfectly onto the 0,0 mathematical point */
      left: -10px;
      width: 20px;
      height: 20px;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 0 25px #ffffff, 0 0 45px #ffea00, 0 0 65px #ff4500;
      animation: pulseSpark 0.08s infinite alternate;
    }

    /* 20 High-Velocity Sparks */
    .spark {
      position: absolute;
      top: 50%; left: 50%;
      width: var(--size); height: var(--size);
      /* Centers the particle exactly in the middle of the fire */
      margin-top: calc(var(--size) / -2);
      margin-left: calc(var(--size) / -2);
      background: var(--color); border-radius: 50%;
      box-shadow: 0 0 10px var(--color);
      animation: flySpark var(--dur) cubic-bezier(0.25, 1, 0.5, 1) infinite;
    }
    
    .spark:nth-child(1)  { --size: 5px; --color: #ffea00; --x: -45px; --y: -55px; --dur: 0.35s; animation-delay: 0.1s; }
    .spark:nth-child(2)  { --size: 6px; --color: #ffffff; --x: 55px;  --y: -35px; --dur: 0.4s;  animation-delay: 0.2s; }
    .spark:nth-child(3)  { --size: 4px; --color: #ff7700; --x: 20px;  --y: -75px; --dur: 0.3s;  animation-delay: 0.0s; }
    .spark:nth-child(4)  { --size: 5px; --color: #ffea00; --x: -55px; --y: 20px;  --dur: 0.45s; animation-delay: 0.15s; }
    .spark:nth-child(5)  { --size: 7px; --color: #ffffff; --x: 35px;  --y: 50px;  --dur: 0.55s; animation-delay: 0.05s; }
    .spark:nth-child(6)  { --size: 4px; --color: #ff7700; --x: -65px; --y: -25px; --dur: 0.6s;  animation-delay: 0.3s; }
    .spark:nth-child(7)  { --size: 5px; --color: #ffea00; --x: 40px;  --y: -65px; --dur: 0.35s; animation-delay: 0.25s; }
    .spark:nth-child(8)  { --size: 8px; --color: #ffffff; --x: -15px; --y: -85px; --dur: 0.5s;  animation-delay: 0.1s; }
    .spark:nth-child(9)  { --size: 4px; --color: #ff7700; --x: 70px;  --y: 15px;  --dur: 0.45s; animation-delay: 0.4s; }
    .spark:nth-child(10) { --size: 5px; --color: #ffea00; --x: -40px; --y: 60px;  --dur: 0.4s;  animation-delay: 0.05s; }
    .spark:nth-child(11) { --size: 7px; --color: #ffffff; --x: -80px; --y: -50px; --dur: 0.65s; animation-delay: 0.15s; }
    .spark:nth-child(12) { --size: 4px; --color: #ff7700; --x: 80px;  --y: -45px; --dur: 0.35s; animation-delay: 0.35s; }
    .spark:nth-child(13) { --size: 5px; --color: #ffea00; --x: 0px;   --y: -95px; --dur: 0.55s; animation-delay: 0.2s; }
    .spark:nth-child(14) { --size: 6px; --color: #ffffff; --x: -60px; --y: 45px;  --dur: 0.4s;  animation-delay: 0.0s; }
    .spark:nth-child(15) { --size: 5px; --color: #ff7700; --x: 50px;  --y: 70px;  --dur: 0.6s;  animation-delay: 0.1s; }
    .spark:nth-child(16) { --size: 3px; --color: #ffea00; --x: -75px; --y: 10px;  --dur: 0.3s;  animation-delay: 0.2s; }
    .spark:nth-child(17) { --size: 4px; --color: #ff7700; --x: 30px;  --y: -90px; --dur: 0.5s;  animation-delay: 0.3s; }
    .spark:nth-child(18) { --size: 6px; --color: #ffffff; --x: 65px;  --y: 45px;  --dur: 0.45s; animation-delay: 0.1s; }
    .spark:nth-child(19) { --size: 5px; --color: #ffea00; --x: -25px; --y: 80px;  --dur: 0.55s; animation-delay: 0.25s; }
    .spark:nth-child(20) { --size: 3px; --color: #ff4500; --x: 85px;  --y: -20px; --dur: 0.4s;  animation-delay: 0.05s; }

    /* =========================================
       5. FIREBALL EXPLOSION EFFECTS
    ========================================= */
    .fireball {
      position: absolute;
      top: 50%; left: 50%;
      width: 50px; height: 50px;
      margin-top: -25px; margin-left: -25px;
      border-radius: 50%;
      background: radial-gradient(circle, #ffffff 0%, #ffea00 30%, #ff4500 70%, transparent 100%);
      opacity: 0;
      transform: scale(0.1);
      z-index: 10;
      pointer-events: none;
    }

    .debris-part {
      position: absolute;
      top: 50%; left: 50%;
      width: 8px; height: 8px;
      background: #ffaa00;
      border-radius: 50%;
      box-shadow: 0 0 10px #ff4500;
      opacity: 0;
      z-index: 11;
    }

    /* Actions when Explosion is Triggered */
    #preloader.boom .bomb {
      transform: scale(1.5);
      opacity: 0;
      transition: transform 0.1s ease-in, opacity 0.1s ease-in;
    }

    #preloader.boom .fuse-svg,
    #preloader.boom .spark-wrapper,
    #preloader.boom .loading-title {
      display: none;
    }

    #preloader.boom .fireball {
      animation: explodeFireball 0.5s ease-out forwards;
    }

    #preloader.boom .debris-part {
      animation: shootDebris 0.5s ease-out forwards;
    }

    /* White Flash Screen */
    #preloader::before {
      content: '';
      position: absolute; inset: 0;
      background: #ffffff;
      opacity: 0;
      z-index: 20;
      pointer-events: none;
    }
    #preloader.boom::before {
      animation: whiteFlash 0.6s ease-out forwards;
    }

    /* =========================================
       6. LOADING TEXT
    ========================================= */
    .loading-title {
      position: absolute;
      bottom: 20px;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #ffffff;
      text-shadow: 0 0 15px #ffffff;
      animation: pulseText 1.5s infinite alternate;
    }

    /* =========================================
       7. KEYFRAMES
    ========================================= */
    
    @keyframes burnFuse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(90deg); } 
    }
    
    /* FIX 1: Negative offset forces the gap to travel from Tip to Bomb */
    @keyframes burnFuseLine {
      0% { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -158; } 
    }

    /* FIX 2: Only scale is used now, preventing the spark from translating off center */
    @keyframes pulseSpark {
      0% { transform: scale(0.9); }
      100% { transform: scale(1.4); }
    }

    @keyframes flySpark {
      0% { transform: translate(0, 0) scale(1); opacity: 1; }
      100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
    }

    @keyframes pulseText {
      0% { opacity: 0.5; }
      100% { opacity: 1; text-shadow: 0 0 25px rgba(255, 69, 0, 0.9); }
    }
    
    /* Explosion Keyframes */
    @keyframes explodeFireball {
      0% { opacity: 1; transform: scale(0.5); }
      30% { opacity: 1; transform: scale(4); }
      100% { opacity: 0; transform: scale(8); }
    }
    @keyframes shootDebris {
      0% { opacity: 1; transform: translate(0,0) scale(1.5); }
      100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
    }
    @keyframes whiteFlash {
      0% { opacity: 0; }
      20% { opacity: 1; }
      100% { opacity: 0; }
    }

    /* =========================================
       8. RESPONSIVENESS
    ========================================= */
    @media (max-width: 480px) {
      .bomb-stage {
        transform: scale(0.75);
      }
      .loading-title {
        font-size: 0.9rem;
      }
    }