html, body {
  margin: 0;
  padding: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden !important;
  position: fixed;

  background: black;
}

/* BACKGROUND VIDEO */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


/* ===============================
   ✅ ONE DYNAMIC GAME VISUAL WORLD
   Matrix + Pixi grid + balls are locked together.
   Only #game-stage scales for screen size.
================================ */

/* ===============================
   ✅ ONE DYNAMIC GAME VISUAL WORLD
   Matrix + Pixi grid + balls are locked together.
   Only #game-stage scales for screen size.
================================ */
#game-stage {
  position: fixed;
  left: 50%;

  /* 🔥 move ALL: matrix + symbols + balls UP */
  top: 45%;

  width: 800px;
  height: 720px;

  transform:
    translate(-50%, -50%)
    scale(var(--game-scale, 1));

  transform-origin: center center;

  z-index: 3;
  pointer-events: none;
}

/* MATRIX — MORE SMALL */
#game-stage #matrix-image {
  position: absolute;
  left: 50%;
  top: 54%;

  width: 620px;
  height: 545px;

  transform: translate(-50%, -50%) scaleY(1.28);

  object-fit: fill;
  z-index: 1;
  pointer-events: none;
}

/* PIXI SYMBOL GRID — MORE SMALL */
#game-stage #bonus-container {
  position: absolute;
  left: 50%;
  top: 54%;

  width: 650px;
  height: 650px;

  transform: translate(-50%, -50%) scale(0.78);

  z-index: 2;
  pointer-events: none;
}

/* BALLS — MORE SMALL */
#game-stage #balls-container {
  position: absolute;
  left: 50%;

  /* ball height inside game-stage */
  top: 43px;

  width: 800px;
  height: 300px;

  transform: translateX(-50%) scale(0.78);
  transform-origin: top center;

  z-index: 0;
  pointer-events: none;
}

#game-stage #balls-container canvas {
  width: 800px !important;
  height: 400px !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
}

/* ===============================
   ✅ BONUS DARK MATRIX — BIGGER
================================ */
#game-stage #matrix-image.bonus-dark-matrix {
  top: 50%;

  width: 700px;
  height: 590px;

  transform: translate(-50%, -50%) scaleY(1.34);

  object-fit: fill;
}

#game-stage #bonus-container.bonus-dark-symbols {
  /* 54% = normal
     53% = little up
     52.5% = more up
  */
  top: 53%;

  width: 650px;
  height: 650px;

  transform: translate(-50%, -50%) scale(0.78);

  overflow: visible !important;
}

#game-stage #bonus-container.bonus-dark-symbols canvas {
  overflow: visible !important;
}



/* SPIN BUTTON (BONUS PAGE) */
#spin-btn {
  position: absolute;
  top: 93%;
  left: calc(57% + 355px);

  width: 180px;

  transform: translate(-50%, -50%); /* 🔥 NO scaleX */

  cursor: pointer;
  z-index: 14;

  transition: transform 0.2s ease;
}

#spin-btn:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

#spin-btn:active {
  transform: translate(-50%, -50%) scale(0.95);
}

#spin-btn:active {
  transform: translate(-50%, -50%) scaleX(1.2) scale(0.95);
}

/* ===============================
   LEFT GOLD PANEL
================================ */
.left-panel {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 5;
}
/* GOLD BOX */
.ui-box + .ui-box {
  margin-top: -70px;  
   /* pull second box upward */
}

.left-big-box {
  margin-bottom: 150px;
  margin-left: 10px;
}



/* ===============================



/* TITLE */
/* ===============================
   IMAGE UI BOX
================================ */

.ui-box {
  position: relative;
  width: 620px;   /* bigger box */
  height: 300px;  /* bigger box */
  left: -110px;   /* moves ONLY these boxes left */
}
/* frame image */
.ui-frame {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* text layer */
.ui-text {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  pointer-events: none;
}

.ui-title {
  font-family: serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: #5a3b00;
}

.ui-value {
  font-family: serif;
  font-size: 34px;
  font-weight: bold;
  color: #3a2500;
}



.bonus-buttons {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  z-index: 20;
}

.bonus-buttons button {
  padding: 14px 28px;
  font-size: 18px;
  font-family: serif;
  cursor: pointer;

  background: linear-gradient(
    180deg,
    #ffe6a3 0%,
    #e2b453 100%
  );

  border: 2px solid #9a6b1f;
  border-radius: 14px;
  color: #3a2500;

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.6),
    0 6px 14px rgba(0,0,0,0.4);

  transition: transform 0.15s ease;
}

.bonus-buttons button:hover {
  transform: scale(1.07);
}


#coins-container {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 50;
  pointer-events: none;
}


.left-big-box {
  width: 360px;          /* wider */
  height: 250px;         /* bigger */
  background: linear-gradient(
    180deg,
    #2b1c0c,
    #120b05
  );
  border: 2px solid #ffb84d;
  border-radius: 18px;

  box-shadow:
    0 0 22px rgba(255, 180, 80, 0.35),
    inset 0 0 18px rgba(255, 210, 120, 0.15);

  position: relative;
  overflow: hidden;
}

/* ===============================
   WIN FEED CONTAINER
================================ */
#win-feed {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* ===============================
   SINGLE WIN ITEM
================================ */
.win-item {
  display: flex;
  align-items: center;
  gap: 12px;

  background: linear-gradient(
    180deg,
    rgba(255, 215, 120, 0.25),
    rgba(120, 80, 20, 0.25)
  );

  border: 1px solid rgba(255, 200, 100, 0.55);
  border-radius: 12px;

  padding: 8px 12px;

  color: #ffd44d;
  font-family: serif;
  font-size: 18px;

  transform: translateY(-40px);
  opacity: 0;

  transition:
    transform 0.35s cubic-bezier(.22,.61,.36,1),
    opacity 0.25s ease;

  will-change: transform, opacity;
}

@keyframes winDrop {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* SYMBOL ICON */
.win-item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* COUNT */
.win-count {
  font-weight: bold;
  color: #fff2c0;
}



/* ===============================
   BOTTOM GAME BAR
================================ */

/* ===============================
   SLOT BOTTOM BAR
================================ */

.bottom-bar{
  position: fixed;

  left: 50%;
  transform: translateX(-50%); /* ✅ center */

  bottom: 22px;

  width: 80%;        /* ✅ smaller width */
  max-width: 1000px; /* ✅ keep it clean on big screens */
  height: 85px;

  border-radius: 55px; /* ✅ rounded like real slots */

  z-index: 2;

  /* purple style (keep yours but cleaner) */
  background: linear-gradient(
    180deg,
    #8a3fa2 0%,
    #6a2d7f 40%,
    #3a1445 100%
  );

  border: 2px solid #d4af37; /* ✅ gold border */

  box-shadow:
    0 0 20px rgba(212,175,55,0.25),
    inset 0 12px 25px rgba(0,0,0,0.65),
    inset 0 -12px 25px rgba(0,0,0,0.75);
}



.control-btn.round-btn {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}



.credit-box{
  position: absolute;

  left:370px;   /* 👉 move to RIGHT */
  top: 93%;      /* 👉 vertical center */

  transform: translateY(-50%); /* 👉 perfect alignment */
z-index: 10; /* 🔥 bring forward */
  display: flex;
  flex-direction: column;

  gap: 2px;

  padding: 0 20px;
}


.credit-box::after {
  content: "";
  position: absolute;

  left: 170px;
  top: 50%;
  transform: translateY(-50%);

  width: 2px;
  height: 40px;

  background: linear-gradient(
    to bottom,
    transparent,
    #d4af37,
    transparent
  );
}



.credit-label,
.bet-label,
.win-label {
  font-family: serif;
  font-size: 14px;
  letter-spacing: 2px;

  color: #dcb145;

  text-transform: uppercase;
  opacity: 0.85;
}



/* ===============================
   BET CONTROL
================================ */
.bet-box{
  position: absolute;
  left: 570px;
  top: 93%;
  transform: translateY(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.credit-label,
.bet-label,
.win-label,
.credit-value,
.bet-value,
.win-value {
  text-align: left !important; /* 🔥 FORCE LEFT */
}

.credit-box,
.bet-box {
  text-align: left;
}

.bet-controls{
  display: flex;
  align-items: center;
  gap: 12px;
}

.bet-box111{
  position:absolute;
  bottom:15px;
  left:400px; /* sits after credit */

  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;

  background:linear-gradient(
    180deg,
    #2b0f32,
    #140818
  );

  border:2px solid #e0b34a;
  border-radius:10px;

  box-shadow:
    inset 0 0 10px rgba(255,200,80,0.15),
    0 0 6px rgba(0,0,0,0.5);

  z-index:6;
}

/* bet number */

.bet-value2222{
  font-family:serif;
  font-size:22px;
  font-weight:bold;

  color:#e6af0b; /* your yellow */

  min-width:50px;
  text-align:center;
}

/* buttons */

.bet-btn{
  width: 30px;
  height: 30px;

  border-radius: 50%; /* 🔥 ROUND */

  border: 2px solid #d4af37;

  background: radial-gradient(
    circle at 30% 30%,
    #6a2d7f,
    #2b0f32
  );

  color: #ffd700;
  font-size: 20px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow:
    0 0 8px rgba(0,0,0,0.6),
    inset 0 0 6px rgba(255,215,0,0.2);

  transition: all 0.15s ease;
}



/* ===============================
   UNIFIED TOP TEXT
================================ */
.credit-label,
.bet-label,
.win-label {
  font-family: 'Arial Black', Impact, sans-serif; /* 🔥 THIS IS THE FIX */
  font-size: 17px;
  font-weight: 900;

  letter-spacing: 2px;
  text-transform: uppercase;

  color: #ffd700;

  text-shadow:
    0 2px 3px rgba(0,0,0,0.8);

  text-align: left;
}
.bet-label::after {
  content: "";
  position: absolute;

  left: 165px;
  top: 50%;
  transform: translateY(-50%);

  width: 2px;
  height: 40px;

  background: linear-gradient(
    to bottom,
    transparent,
    #d4af37,
    transparent
  );
}



/* ===============================
   UNIFIED MAIN NUMBERS
================================ */
.credit-value,
.bet-value,
.win-value {
  font-family: serif;
  font-size: 28px;
  font-weight: 900;

  letter-spacing: 1px;
  color: #ffd700;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.7),
    0 0 6px rgba(255,215,0,0.5);

  text-align: left;
}

.win-box {
  align-items: flex-start; /* 🔥 LEFT ALIGN */
}


.bet-btn:hover{
  transform: scale(1.1);
  box-shadow:
    0 0 10px rgba(255,215,0,0.5);
}

.bet-btn:active{
  transform: scale(0.9);
}

/* ===============================
   WIN DISPLAY
================================ */

.win-box {
  position: absolute;

  bottom: 28px;
  left: 50.5%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;

  align-items: flex-start; /* 🔥 LEFT (FINAL FIX) */
  justify-content: center;

  padding: 6px 20px;

  background: transparent;
  border: none;
  box-shadow: none;

  z-index: 10;
}

/* value */

/* ===============================
   CONTROL BUTTONS
================================ */


.control-buttons {
  position: absolute;

  bottom: 37px;   /* 🔥 move DOWN */
  right: 450px;    /* 🔥 push to right side */

  display: flex;
  gap: 12px;

  z-index: 10;
}


.control-btn {
  height: 50px;
  min-width: 90px;
  padding: 0 14px;

  border-radius: 20px; /* 🔥 more rounded like slot */

  border: 2px solid #d4af37;

  background: radial-gradient(
    circle at 30% 30%,
    #6a2d7f,
    #2b0f32
  );

  color: #ffd700;
  font-family: serif;
  font-size: 15px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow:
    0 0 8px rgba(0,0,0,0.6),
    inset 0 0 6px rgba(255,215,0,0.2);

  transition: all 0.15s ease;
}



.control-btn222{

  height:38px;
  padding:0 16px;

  font-family:serif;
  font-size:16px;
  font-weight:bold;

  color:#e6af0b;

  background:linear-gradient(
    180deg,
    #2b0f32,
    #140818
  );

  border:2px solid #e0b34a;
  border-radius:8px;

  box-shadow:
    inset 0 0 10px rgba(255,200,80,0.15),
    0 0 6px rgba(0,0,0,0.5);

  cursor:pointer;

  transition:all .15s ease;
}

.control-btn:hover{
  background:linear-gradient(
    180deg,
    #3a1842,
    #1b0820
  );
}

.control-btn:active{
  transform:scale(.95);
}

.bounce-btn-img {
  width: 75%;   /* 🔥 increase size */
  height: 130%;       /* 🔥 THIS stretches height */

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.infor-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.infor-btn img {
  width: 56px;
  height: 42px;
  object-fit: contain;
  transform: translateY(3px); /* 🔥 adjust this */
}



.sound-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sound-btn img {
  width: 66px;
  height: 72px;
  object-fit: contain;
  transform: translateY(3px); /* 🔥 adjust this */
}


.volume-popup {
  position: absolute;
  bottom: 90px;
  right: 275px;

  width: 30px;
  height: 120px;

  background: rgba(0,0,0,0.6);
  

  display: flex;
  align-items: flex-end;
  justify-content: center;

  padding: 6px;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;

  transition: 0.2s ease;

  z-index: 9999;
}

.volume-popup.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.volume-track {
  width: 8px;
  height: 100%;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  position: relative;
}

.volume-level {
  position: absolute;
  bottom: 0;
  
  width: 100%;
  height: 60%;

  background: gold;
  border-radius: 10px;
}


.bounce-btn-img {
  width: 75%;
  height: 130%;

  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%) scale(1);

  cursor: pointer;

  transition:
    transform 0.18s cubic-bezier(.22,.61,.36,1),
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

/* 🔥 HOVER (SMOOTH + PREMIUM) */
.bounce-btn-img:hover {
  transform: translate(-50%, -50%) scale(1.06);

  filter:
    brightness(1.15)
    saturate(1.1);

  
}

/* 💥 CLICK (HEAVY PRESS FEEL) */
.bounce-btn-img:active {
  transform: translate(-50%, -50%) scale(0.94);

  filter: brightness(0.9);
}



/* ===============================
   🔥 FULL MOBILE FIX (CLEAN SYSTEM)
================================ */
@media (max-width: 600px) {



 

  /* ===============================
     🔥 BOTTOM BAR
  ============================== */

  .bottom-bar {
    width: 96% !important;
    height: 70px !important;
    bottom: 10px !important;
  }

  /* CREDIT */
  .credit-box {
    left: 15px !important;
    bottom: 30px !important;
    top: auto !important;
    transform: none !important;
  }

  /* BET */
  .bet-box {
    position: fixed !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: flex;
    flex-direction: row; /* 🔥 FIX */
    align-items: center;
    gap: 6px;

    background: none !important;

    border: none !important;

    z-index: 9999;
  }
  .bet-controls {
    display: contents; /* 🔥 makes value act like direct child */
  }

  /* WIN */
  .win-box {
    position: fixed !important;
    bottom: 275px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    display: flex !important;
    flex-direction: row !important; /* 🔥 INLINE */
    align-items: center !important;
    gap: 6px !important;

    z-index: 9999 !important;
  }

  .win-label {
    font-size: 11px !important;
    opacity: 0.7 !important;
  }

  .win-label::after {
    content: ":" !important;
  }

  .win-value {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* BUTTONS */
  .control-buttons {
    right: 10px !important;
    bottom: 18px !important;
    gap: 6px !important;
  }

  .control-btn {
    min-width: 50px !important;
    height: 42px !important;
    font-size: 11px !important;
  }

  .control-btn.round-btn {
    width: 42px !important;
    height: 42px !important;
  }

  /* 🔥 SPIN BUTTON */
  #spin-btn {
    width: 110px !important;
    top: 86% !important;
    left: 52% !important;
  }

  /* TEXT SCALE */
  .credit-label,
  .bet-label,
  .win-label {
    font-size: 11px !important;
  }

  .credit-value,
  .bet-value,
  .win-value {
    font-size: 16px !important;
  }

  /* BET BUTTONS */
  .bet-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 16px !important;
  }


  

}
@media (max-width: 600px) {

  /* hide everything except logo */
  .left-panel .ui-box:nth-child(2) {
    position: fixed !important;

    bottom: -350px !important;  /* 🔥 BELOW MATRIX */
    left: 50% !important;

    transform: translateX(-30%) !important;

    width: 270px !important;
    height: 250px !important;

    z-index: 9999 !important;
  }

  /* 🔥 WIN FEED BOX */
  .left-big-box {
    position: fixed !important;

    bottom: -380px !important;   /* BELOW bounce */
    left: 90% !important;

    transform: translateX(120%) !important;

    width: 140px !important;
    height: 110px !important;

    z-index: 9999 !important;
  }

  .left-panel .ui-box:first-child {
    display: none !important;
  }

  

  
  .bottom-bar {
    display: none !important;
  }


}


@media (max-width: 600px) {

  /* ❌ remove bottom bar */
  .bottom-bar {
    display: none !important;
  }

  /* ❌ hide extra buttons */
  .control-buttons,
  .control-btn,
  .infor-btn {
    display: none !important;
  }

  /* 💰 CREDIT (keep bottom left) */
  .credit-box {
    position: fixed !important;
    bottom: 5px !important;
    left: 5px !important;

    display: flex;
    flex-direction: row; /* 🔥 KEY FIX */
    align-items: center;
    gap: 6px; /* small space between text */

    background: none !important;
    border: none !important;

    z-index: 9999;
  }

  /* TEXT SIZE (smaller for mobile) */
  .credit-label {
    font-size: 11px !important;
    opacity: 0.7;
  }

  .credit-value {
    font-size: 14px !important;
    font-weight: 600;
  }

  /* 🔥 BET — BELOW BOUNCE BUTTON */
  .bet-box {
  position: fixed !important;

  bottom: 10px !important; /* 🔥 THIS controls height (lower number = higher) */
  left: 52% !important;
  transform: translateX(-50%) !important;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: none !important;
  border: none !important;

  z-index: 9999;
}

  /* ➕ ➖ layout */
  .bet-controls {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .bet-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  /* text */
  .bet-label {
    font-size: 12px;
    opacity: 0.7;
  }

  .bet-value {
    font-size: 18px;
    font-weight: 600;
  }

}

  

  /* ✨ TEXT STYLE (important for pro look) */
  .credit-label,
  .bet-label {
    font-size: 12px;
    opacity: 0.7;
    letter-spacing: 1px;
  }

  .credit-value,
  .bet-value {
    font-size: 16px;
    font-weight: 600;
  }


  @media (max-width: 600px) {

  /* ===============================
   🔥 AAA MOBILE BET BUTTONS
================================ */

#bet-minus,
#bet-plus {
  position: fixed;
  bottom: 95px;
  z-index: 9999;

  width: 48px;
  height: 48px;

  border-radius: 50%;
  border: 2px solid #d4a017; /* gold edge */

  background: radial-gradient(circle at 30% 30%, #5a2a7a, #2d0f3f);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.6),
    inset 0 2px 4px rgba(255,255,255,0.2),
    inset 0 -3px 6px rgba(0,0,0,0.6);

  color: #ffd700;
  font-size: 22px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: all 0.15s ease;
}

/* ➖ LEFT */
#bet-minus {
  left: calc(59% - 94px);
}

/* ➕ RIGHT */
#bet-plus {
  left: calc(59% + 12px);
}

/* 🔥 PRESS EFFECT */
#bet-minus:active,
#bet-plus:active {
  transform: scale(0.9);
  box-shadow:
    0 2px 5px rgba(0,0,0,0.8),
    inset 0 3px 6px rgba(0,0,0,0.8);
}

/* ✨ SMALL GLOW (ALIVE FEEL) */
#bet-minus::after,
#bet-plus::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 70%;
  height: 40%;

  background: linear-gradient(
    rgba(255,255,255,0.5),
    rgba(255,255,255,0)
  );

  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
}

}

@media (max-width: 600px) {

  /* BET text + number only */
  .bet-box {
    position: fixed !important;
    bottom: -30px !important;
    left: 60% !important;
    transform: translateX(-50%) !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;

    background: none !important;
    border: none !important;
    z-index: 9999 !important;
  }

  .bet-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .bet-label {
    font-size: 11px !important;
    opacity: 0.7 !important;
  }

  .bet-label::after {
    content: ":" !important;
  }

  .bet-value {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* FORCE + / - AWAY FROM BET */
  #bet-minus,
  #bet-plus {
    position: fixed !important;
    bottom: 110px !important;

    width: 27px !important;
    height: 27px !important;

    border-radius: 50% !important;
    border: 2px solid #d4a017 !important;

    background: radial-gradient(circle at 30% 30%, #5a2a7a, #2d0f3f) !important;
    color: #ffd700 !important;

    font-size: 22px !important;
    font-weight: 900 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 10000 !important;
  }

  #bet-minus {
    left: calc(49% - 90px) !important;
  }

  #bet-plus {
    left: calc(49% + 2px) !important;
  }
}



#mobile-menu-btn {
  display: none;
}

@media (max-width: 600px) {

  #mobile-menu-btn {
    display: flex !important;

    position: fixed;
    bottom: 4px;
    right: 10px;

    width: 48px;
    height: 48px;

    border-radius: 50%;
    border: 2px solid #d4a017;

    background: radial-gradient(circle at 30% 30%, #5a2a7a, #2d0f3f);

    z-index: 999999 !important;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
  }

  #mobile-menu-btn span {
    width: 18px;
    height: 2px;
    background: #ffd700;
  }

}


/* ===============================
   🎰 AUTO MENU (AAA DARK METAL)
================================ */
/* ===============================
   ✅ SMART AUTO MENU
   Position is controlled by JS.
================================ */

.auto-menu {
  position: fixed;

  left: 0;
  top: 0;

  display: none;

  gap: 10px;
  padding: 12px;

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(42, 18, 53, 0.97),
      rgba(12, 4, 18, 0.97)
    );

  border: 2px solid #cfa84a;

  box-shadow:
    0 0 25px rgba(0,0,0,0.9),
    0 0 12px rgba(212,175,55,0.25),
    inset 0 2px 6px rgba(0,0,0,0.8),
    inset 0 -4px 10px rgba(0,0,0,0.9);

  z-index: 999999;

  opacity: 0;
  pointer-events: none;

  transform: translateY(8px) scale(0.96);

  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.auto-menu.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* desktop / landscape = nice horizontal pill */
.auto-menu.auto-menu-row {
  flex-direction: row;
}

/* portrait/mobile fallback = vertical */
.auto-menu.auto-menu-column {
  flex-direction: column;
}

.auto-menu button {
  width: 82px;
  height: 42px;

  border-radius: 12px;
  border: 2px solid #d4af37;

  background:
    linear-gradient(
      180deg,
      #f0c85a 0%,
      #cfa84a 42%,
      #7a5a1a 100%
    );

  color: #2b1a00;

  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 15px;
  font-weight: 900;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow:
    0 5px 10px rgba(0,0,0,0.75),
    inset 0 2px 4px rgba(255,240,180,0.4),
    inset 0 -4px 6px rgba(0,0,0,0.65);

  transition: transform 0.12s ease, filter 0.12s ease;
}

.auto-menu button:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.auto-menu button:active {
  transform: scale(0.92);
}

/* short landscape phone */
@media (orientation: landscape) and (max-height: 520px) {
  .auto-menu {
    gap: 7px;
    padding: 9px;
    border-radius: 15px;
  }

  .auto-menu button {
    width: 58px;
    height: 34px;
    font-size: 12px;
    border-radius: 10px;
  }
}

/* ===============================
   🎯 BUTTONS
================================ */
.auto-menu button {
  position: relative;

  width: 115px;
  height: 46px;

  border-radius: 12px;
  border: 2px solid #d4af37;

  background: linear-gradient(
    180deg,
    #f0c85a 0%,
    #cfa84a 35%,
    #7a5a1a 100%
  );

  color: #2b1a00;

  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 15px;
  font-weight: 900;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow:
    0 6px 14px rgba(0,0,0,0.8),
    inset 0 2px 4px rgba(255,240,180,0.4),
    inset 0 -4px 6px rgba(0,0,0,0.7);

  transition: all 0.15s ease;
}

.auto-menu button:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 14px rgba(255,215,0,0.6),
    0 6px 14px rgba(0,0,0,0.8);
}

.auto-menu button:active {
  transform: scale(0.9);

  background: linear-gradient(
    180deg,
    #b8933a 0%,
    #8a6a25 100%
  );

  box-shadow:
    0 2px 6px rgba(0,0,0,0.9),
    inset 0 3px 6px rgba(0,0,0,0.9);
}







/* ===============================
   ✅ MOBILE HAMBURGER MENU PANEL
================================ */

#mobile-menu-panel {
  display: none;
}

@media (max-width: 600px) {
  #mobile-menu-panel {
    position: fixed !important;

    left: 18px !important;
    bottom: 58px !important;

    width: 118px !important;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 10px;

    border-radius: 18px;
    border: 2px solid #d4a017;

    background:
      linear-gradient(
        180deg,
        rgba(45, 15, 63, 0.96),
        rgba(15, 4, 22, 0.96)
      );

    box-shadow:
      0 0 18px rgba(0,0,0,0.85),
      inset 0 0 10px rgba(255,215,0,0.12);

    z-index: 999998 !important;

    opacity: 0;
    pointer-events: none;

    transform: translateY(10px) scale(0.96);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease;
  }

  #mobile-menu-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  #mobile-menu-panel button {
    width: 100%;
    height: 38px;

    border-radius: 12px;
    border: 2px solid #d4af37;

    background:
      linear-gradient(
        180deg,
        #f0c85a 0%,
        #cfa84a 45%,
        #7a5a1a 100%
      );

    color: #241000;

    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
      0 4px 8px rgba(0,0,0,0.65),
      inset 0 2px 3px rgba(255,255,255,0.3),
      inset 0 -3px 5px rgba(0,0,0,0.45);
  }

  #mobile-menu-panel button:active {
    transform: scale(0.94);
  }
}



/* OVERLAY */
.info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);

  display: none;
  align-items: center;
  justify-content: center;

  z-index: 999999;
}

/* PANEL */
.info-panel {
  width: 480px;
  max-width: 92%;

  border-radius: 22px;
  padding: 18px;

  background: linear-gradient(180deg, #2a1235, #14071d);

  border: 2px solid #d4af37;

  box-shadow:
    0 0 40px rgba(0,0,0,0.9),
    0 0 20px rgba(212,175,55,0.3);

  color: #ffd700;
}

/* HEADER */
.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 20px;
  font-weight: 900;
}

/* CLOSE */
#close-info {
  background: none;
  border: none;
  color: gold;
  font-size: 20px;
  cursor: pointer;
}

/* TABS */
.info-tabs {
  display: flex;
  margin-top: 12px;
  gap: 8px;
}

.tab-btn {
  flex: 1;
  height: 38px;

  border-radius: 12px;
  border: 2px solid #d4af37;

  background: linear-gradient(180deg, #3a1842, #1b0820);
  color: #ffd700;

  font-weight: bold;
  cursor: pointer;
}

.tab-btn.active {
  background: linear-gradient(180deg, #f0c85a, #cfa84a);
  color: #2b1a00;
}

/* CONTENT */
.info-body {
  margin-top: 14px;
}

.tab-content {
  display: none;
  animation: fadeIn 0.25s ease;
}

.tab-content.active {
  display: block;
}

.tab-content h3 {
  margin-top: 10px;
  color: #fff2a0;
}

.tab-content p {
  font-size: 14px;
  color: #ddd;
}

/* FADE */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}



/* ===============================
   🔥 BONUS BUY OVERLAY
================================ */

#bonus-buy-overlay {

  position: fixed;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;

  background:
    rgba(0,0,0,0.72);

  backdrop-filter: blur(6px);

  z-index: 999999;
}

/* PANEL */

.bonus-buy-panel {

  width: 420px;
  max-width: 90vw;

  border-radius: 28px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #2c1737 0%,
      #120814 100%
    );

  border:
    3px solid #d4a63a;

  box-shadow:
    0 0 40px rgba(255,215,0,0.18),
    inset 0 0 25px rgba(255,255,255,0.05);

  animation:
    bonusPop 0.28s ease;
}

/* HEADER */

.bonus-buy-header {

  height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 24px;

  font-size: 28px;
  font-weight: 900;

  color: #ffd76a;

  letter-spacing: 2px;

  background:
    linear-gradient(
      180deg,
      rgba(255,215,0,0.15),
      rgba(255,215,0,0.03)
    );
}

#close-bonus-buy {

  border: none;
  background: none;

  color: white;

  font-size: 28px;

  cursor: pointer;
}

/* BODY */

.bonus-buy-body {

  padding: 30px;

  text-align: center;
}

.bonus-buy-symbol {

  width: 150px;

  margin-bottom: 20px;

  filter:
    drop-shadow(0 0 20px rgba(255,215,0,0.35));
}

.bonus-buy-title {

  font-size: 32px;
  font-weight: 900;

  color: #fff2b3;

  margin-bottom: 14px;
}

.bonus-buy-desc {

  font-size: 18px;

  color: #d6c6e3;

  line-height: 1.5;

  margin-bottom: 24px;
}

.bonus-buy-price {

  font-size: 26px;
  font-weight: 900;

  color: #ffd700;

  margin-bottom: 28px;

  text-shadow:
    0 0 12px rgba(255,215,0,0.45);
}

/* BUTTONS */

.bonus-buy-buttons {

  display: flex;
  gap: 16px;
}

.bonus-buy-btn {

  flex: 1;

  height: 64px;

  border-radius: 18px;

  border: none;

  font-size: 20px;
  font-weight: 900;

  cursor: pointer;

  transition:
    transform 0.15s,
    filter 0.15s;
}

.bonus-buy-btn:hover {

  transform: scale(1.04);
}

.bonus-buy-btn.confirm {

  background:
    linear-gradient(
      180deg,
      #ffd54a,
      #c68b11
    );

  color: #1a1100;
}

.bonus-buy-btn.cancel {

  background:
    linear-gradient(
      180deg,
      #4a324f,
      #241028
    );

  color: white;
}

/* POP */

@keyframes bonusPop {

  from {

    opacity: 0;
    transform:
      scale(0.82);
  }

  to {

    opacity: 1;
    transform:
      scale(1);
  }
}


/* ===============================
   🔥 BONUS BUY BET CONTROLS
================================ */

.bonus-buy-bet-box {
  margin: 0 auto 22px auto;

  padding: 14px 18px;

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,215,0,0.10),
      rgba(0,0,0,0.22)
    );

  border: 1px solid rgba(255,215,0,0.35);

  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.55),
    0 0 12px rgba(255,215,0,0.12);
}

.bonus-buy-bet-label {
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 14px;
  font-weight: 900;

  letter-spacing: 2px;
  color: #ffd700;

  margin-bottom: 10px;

  text-shadow:
    0 2px 3px rgba(0,0,0,0.8);
}

.bonus-buy-bet-controls {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;
}

#bonus-buy-bet-minus,
#bonus-buy-bet-plus {
  width: 42px;
  height: 42px;

  border-radius: 50%;

  border: 2px solid #d4a017;

  background:
    radial-gradient(
      circle at 30% 30%,
      #6a2d7f,
      #2b0f32
    );

  color: #ffd700;

  font-size: 26px;
  font-weight: 900;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.7),
    inset 0 2px 4px rgba(255,255,255,0.18),
    inset 0 -4px 8px rgba(0,0,0,0.7);

  transition:
    transform 0.14s ease,
    filter 0.14s ease;
}

#bonus-buy-bet-minus:hover,
#bonus-buy-bet-plus:hover {
  transform: scale(1.08);
  filter: brightness(1.12);
}

#bonus-buy-bet-minus:active,
#bonus-buy-bet-plus:active {
  transform: scale(0.90);
}

#bonus-buy-bet-value {
  min-width: 90px;

  font-family: serif;
  font-size: 30px;
  font-weight: 900;

  color: #fff2b3;

  text-align: center;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.85),
    0 0 10px rgba(255,215,0,0.35);
}

#bonus-buy-cost {
  color: #fff2b3;
}

.bonus-buy-btn.confirm.disabled {
  opacity: 0.45;
  filter: grayscale(0.5);
  cursor: not-allowed;

  background:
    linear-gradient(
      180deg,
      #76633a,
      #3a2b11
    );
}



.turbo-btn:active {
  transform: translateY(1px) scale(0.97);
}

.turbo-btn.active {
  color: #1b0d05;

  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.35), transparent 32%),
    linear-gradient(180deg, #fff2a6 0%, #e3a72f 45%, #8d4b08 100%);

  border-color: #fff0a4;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.35);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -4px 8px rgba(90,35,0,0.55),
    0 0 16px rgba(255, 197, 58, 0.75),
    0 0 28px rgba(255, 120, 20, 0.25);
}

.turbo-btn.active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(255, 215, 90, 0.4);
  animation: turboPulse 0.9s infinite ease-in-out;
  pointer-events: none;
}

@keyframes turboPulse {
  0% {
    opacity: 0.25;
    transform: scale(1);
  }

  50% {
    opacity: 0.85;
    transform: scale(1.06);
  }

  100% {
    opacity: 0.25;
    transform: scale(1);
  }
}

.bet-btn.bet-locked,
.bet-btn:disabled {
  display: none !important;
}


.bonus-ui-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ===============================
   🔥 PROFESSIONAL GAME INFO PAGE
================================ */

.info-overlay {
  position: fixed;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at center, rgba(88, 36, 120, 0.22), rgba(0,0,0,0.88) 62%);

  backdrop-filter: blur(5px);

  z-index: 999999;
}

.info-panel {
  width: 760px;
  max-width: 94vw;
  max-height: 86vh;

  padding: 0;

  overflow: hidden;

  border-radius: 28px;

  background:
    linear-gradient(180deg, #321340 0%, #15071d 100%);

  border: 3px solid #d4af37;

  box-shadow:
    0 0 45px rgba(0,0,0,0.95),
    0 0 28px rgba(255, 215, 90, 0.28),
    inset 0 0 28px rgba(255,255,255,0.05);

  color: #ffd700;
}

/* HEADER */
.info-header {
  height: 78px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 26px;

  background:
    linear-gradient(180deg, rgba(255,215,80,0.18), rgba(0,0,0,0.18));

  border-bottom: 1px solid rgba(255,215,90,0.35);
}

.info-title {
  display: block;

  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 28px;
  font-weight: 900;

  letter-spacing: 2px;

  color: #ffe27a;

  text-shadow:
    0 3px 5px rgba(0,0,0,0.9),
    0 0 12px rgba(255,215,0,0.35);
}

.info-subtitle {
  display: block;

  margin-top: 2px;

  font-family: serif;
  font-size: 14px;
  letter-spacing: 2px;

  color: #d7c2ea;
  opacity: 0.9;
}

#close-info {
  width: 42px;
  height: 42px;

  border-radius: 50%;

  border: 2px solid #d4af37;

  background:
    radial-gradient(circle at 30% 30%, #6a2d7f, #2b0f32);

  color: #ffd700;

  font-size: 22px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    inset 0 0 8px rgba(255,215,0,0.18),
    0 0 12px rgba(0,0,0,0.75);
}

#close-info:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
}

/* TABS */
.info-tabs {
  display: flex;

  gap: 8px;

  padding: 14px 16px 8px;

  background: rgba(0,0,0,0.18);
}

.tab-btn {
  flex: 1;

  min-width: 0;
  height: 42px;

  border-radius: 14px;

  border: 2px solid rgba(212,175,55,0.72);

  background:
    linear-gradient(180deg, #3a1842, #1b0820);

  color: #ffd700;

  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 13px;
  font-weight: 900;

  letter-spacing: 1px;

  cursor: pointer;

  box-shadow:
    inset 0 0 10px rgba(0,0,0,0.55),
    0 3px 8px rgba(0,0,0,0.45);
}

.tab-btn.active {
  background:
    linear-gradient(180deg, #fff0a4 0%, #d4af37 48%, #8a5b10 100%);

  color: #241000;

  border-color: #fff1a6;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.35);

  box-shadow:
    0 0 16px rgba(255,215,0,0.45),
    inset 0 2px 4px rgba(255,255,255,0.35),
    inset 0 -4px 8px rgba(0,0,0,0.45);
}

/* BODY */
.info-body {
  height: 560px;
  max-height: calc(86vh - 150px);

  overflow-y: auto;

  padding: 18px 22px 24px;

  scrollbar-width: thin;
  scrollbar-color: #d4af37 rgba(255,255,255,0.08);
}

.info-body::-webkit-scrollbar {
  width: 8px;
}

.info-body::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
}

.info-body::-webkit-scrollbar-thumb {
  background: #d4af37;
  border-radius: 10px;
}

.tab-content {
  display: none;
  animation: infoFade 0.22s ease;
}

.tab-content.active {
  display: block;
}

@keyframes infoFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content h3 {
  margin: 18px 0 10px;

  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 20px;
  font-weight: 900;

  letter-spacing: 1px;

  color: #fff2a0;

  text-shadow:
    0 3px 5px rgba(0,0,0,0.85),
    0 0 10px rgba(255,215,0,0.22);
}

.info-card {
  padding: 14px 16px;

  border-radius: 16px;

  background:
    linear-gradient(180deg, rgba(255,215,90,0.08), rgba(0,0,0,0.22));

  border: 1px solid rgba(255,215,90,0.28);

  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.45),
    0 4px 10px rgba(0,0,0,0.25);

  margin-bottom: 14px;
}

.info-card p {
  margin: 7px 0;

  color: #e4d9ea;

  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.48;
}

/* NUMBERED FLOW */
.info-list {
  display: grid;
  gap: 10px;

  margin-top: 10px;
}

.info-list div {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;

  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(90,42,122,0.55), rgba(20,7,29,0.8));

  border: 1px solid rgba(255,215,90,0.24);

  color: #e9d9f4;

  font-family: Arial, sans-serif;
  font-size: 14px;
}

.info-list span {
  width: 26px;
  height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background:
    linear-gradient(180deg, #fff0a4, #c99622);

  color: #271000;

  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

/* PAYTABLE */
.paytable-note {
  margin-bottom: 12px;

  color: #e6d7ef;

  font-size: 14px;
  line-height: 1.4;

  opacity: 0.95;
}

.paytable-grid {
  display: grid;
  gap: 10px;
}

.pay-row {
  display: grid;
  grid-template-columns: 62px 1fr 1fr 1fr;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;

  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(255,215,90,0.10), rgba(0,0,0,0.22));

  border: 1px solid rgba(255,215,90,0.30);

  color: #f0e5f5;

  font-family: Arial, sans-serif;
  font-size: 14px;
}

.pay-row img {
  width: 50px;
  height: 50px;

  object-fit: contain;

  filter:
    drop-shadow(0 4px 5px rgba(0,0,0,0.7));
}

.pay-row b {
  color: #ffd700;
}

.scatter-row {
  grid-template-columns: 62px 1fr;
}

.wide-pay {
  grid-column: span 3;

  color: #fff2a0;

  font-weight: 800;
}

/* MOBILE INFO PANEL */
@media (max-width: 600px) {

  .info-panel {
    width: 94vw;
    max-height: 88vh;
    border-radius: 20px;
  }

  .info-header {
    height: 64px;
    padding: 0 16px;
  }

  .info-title {
    font-size: 20px;
  }

  .info-subtitle {
    font-size: 11px;
  }

  #close-info {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .info-tabs {
    gap: 5px;
    padding: 10px 10px 6px;
  }

  .tab-btn {
    height: 34px;
    font-size: 9px;
    border-radius: 10px;
    letter-spacing: 0;
  }

  .info-body {
    height: auto;
    max-height: calc(88vh - 118px);
    padding: 12px;
  }

  .tab-content h3 {
    font-size: 16px;
    margin-top: 14px;
  }

  .info-card {
    padding: 11px 12px;
  }

  .info-card p {
    font-size: 13px;
    line-height: 1.42;
  }

  .pay-row {
    grid-template-columns: 48px 1fr;
    gap: 7px;
    font-size: 12px;
  }

  .pay-row img {
    width: 42px;
    height: 42px;
  }

  .pay-row div {
    min-width: 0;
  }

  .scatter-row {
    grid-template-columns: 48px 1fr;
  }

  .wide-pay {
    grid-column: auto;
  }
}



.bounce-btn-img.bonus-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}


/* ===============================
   🔒 COVER CREDIT DURING BONUS
================================ */
.credit-box.credit-covered .credit-value {
  color: transparent !important;
  text-shadow: none !important;
  position: relative;
}

.credit-box.credit-covered .credit-value::after {
  content: "*******";
  position: absolute;
  left: 0;
  top: 0;

  color: #ffd700;

  font-family: serif;
  font-size: inherit;
  font-weight: 900;
  letter-spacing: 2px;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.7),
    0 0 8px rgba(255,215,0,0.65);
}


/* ===============================
   ✅ DESKTOP RESPONSIVE LEFT PANEL
   Logo + Bonus Button + Win Feed scale together
==========



/* ===============================
   ✅ REAL DESKTOP RESIZE LEFT PANEL
   ONLY SMALLER WIDTH DESKTOP
   DOES NOT MOVE DOWN
================================ */

/* normal desktop: keep your original look */
@media (min-width: 1501px) {
  .left-panel {
    top: 50% !important;
    left: 50px !important;
    transform: translateY(-50%) !important;
  }

  .ui-box {
    width: 620px !important;
    height: 310px !important;
    left: -110px !important;
  }

  .ui-box + .ui-box {
    margin-top: -70px !important;
  }

  .left-big-box {
    width: 360px !important;
    height: 250px !important;
    margin-left: 10px !important;
    margin-bottom: 150px !important;
  }
}

/* smaller desktop / laptop */
@media (min-width: 1201px) and (max-width: 1500px) {
  .left-panel {
    top: 50% !important;
    left: 30px !important;
    transform: translateY(-50%) !important;
  }

  .ui-box {
    width: 520px !important;
    height: 260px !important;
    left: -90px !important;
  }

  .ui-box + .ui-box {
    margin-top: -58px !important;
  }

  .left-big-box {
    width: 305px !important;
    height: 212px !important;
    margin-left: 8px !important;
    margin-bottom: 120px !important;
  }

  .win-item {
    font-size: 15px !important;
    padding: 6px 9px !important;
  }

  .win-item img {
    width: 34px !important;
    height: 34px !important;
  }
}

/* very small desktop / narrow browser */
@media (min-width: 901px) and (max-width: 1200px) {
  .left-panel {
    top: 50% !important;
    left: 15px !important;
    transform: translateY(-50%) !important;
  }

  .ui-box {
    width: 430px !important;
    height: 215px !important;
    left: -75px !important;
  }

  .ui-box + .ui-box {
    margin-top: -48px !important;
  }

  .left-big-box {
    width: 255px !important;
    height: 178px !important;
    margin-left: 6px !important;
    margin-bottom: 95px !important;
  }

  #win-feed {
    inset: 8px !important;
    gap: 6px !important;
  }

  .win-item {
    font-size: 13px !important;
    padding: 5px 7px !important;
    gap: 7px !important;
  }

  .win-item img {
    width: 28px !important;
    height: 28px !important;
  }
}

/* tablet-ish desktop width, before your mobile 600px rules */
@media (min-width: 601px) and (max-width: 900px) {
  .left-panel {
    top: 50% !important;
    left: 5px !important;
    transform: translateY(-50%) !important;
  }

  .ui-box {
    width: 330px !important;
    height: 165px !important;
    left: -55px !important;
  }

  .ui-box + .ui-box {
    margin-top: -36px !important;
  }

  .left-big-box {
    width: 200px !important;
    height: 140px !important;
    margin-left: 4px !important;
    margin-bottom: 70px !important;
  }

  #win-feed {
    inset: 6px !important;
    gap: 5px !important;
  }

  .win-item {
    font-size: 11px !important;
    padding: 4px 6px !important;
    gap: 6px !important;
  }

  .win-item img {
    width: 24px !important;
    height: 24px !important;
  }
}



/* ===============================
   ✅ DESKTOP RESPONSIVE BOTTOM BAR
   Bar + Credit + Bet + Win + Controls + Spin
   Only affects desktop/tablet widths above mobile
================================ */

/* FULL DESKTOP */
@media (min-width: 1501px) {
  .bottom-bar {
    width: 80% !important;
    max-width: 1000px !important;
    height: 85px !important;
    bottom: 22px !important;
    border-radius: 55px !important;
  }

  .credit-box {
    left: 370px !important;
    top: 93% !important;
    transform: translateY(-50%) !important;
  }

  .bet-box {
    left: 570px !important;
    top: 93% !important;
    transform: translateY(-50%) !important;
  }

  .win-box {
    left: 50% !important;
    bottom: 28px !important;
    transform: translateX(-50%) !important;
  }

  .control-buttons {
    right: 450px !important;
    bottom: 37px !important;
    gap: 12px !important;
  }

  #spin-btn {
    width: 180px !important;
    top: 93% !important;
    left: calc(57% + 355px) !important;
  }
}

/* SMALLER DESKTOP / LAPTOP */
@media (min-width: 1201px) and (max-width: 1500px) {
  .bottom-bar {
    width: 82% !important;
    max-width: 880px !important;
    height: 76px !important;
    bottom: 18px !important;
    border-radius: 50px !important;
  }

  .credit-box {
    left: 290px !important;
    top: 93% !important;
    transform: translateY(-50%) scale(0.9) !important;
    transform-origin: left center !important;
  }

  .bet-box {
    left: 455px !important;
    top: 93% !important;
    transform: translateY(-50%) scale(0.9) !important;
    transform-origin: left center !important;
  }

  .win-box {
    left: 50.5% !important;
    bottom: 23px !important;
    transform: translateX(-50%) scale(0.9) !important;
    transform-origin: center center !important;
  }

  .control-buttons {
    right: 340px !important;
    bottom: 31px !important;
    gap: 9px !important;
    transform: scale(0.9) !important;
    transform-origin: right center !important;
  }

  .control-btn {
    height: 46px !important;
    min-width: 78px !important;
    font-size: 13px !important;
  }

  .control-btn.round-btn {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
  }

  #spin-btn {
    width: 155px !important;
    top: 93% !important;
    left: calc(57% + 285px) !important;
  }

  .credit-value,
  .bet-value,
  .win-value {
    font-size: 24px !important;
  }

  .credit-label,
  .bet-label,
  .win-label {
    font-size: 15px !important;
  }
}

/* NARROW DESKTOP */
@media (min-width: 901px) and (max-width: 1200px) {
  .bottom-bar {
    width: 84% !important;
    max-width: 720px !important;
    height: 66px !important;
    bottom: 14px !important;
    border-radius: 42px !important;
  }

  .credit-box {
    left: 205px !important;
    top: 93.5% !important;
    transform: translateY(-50%) scale(0.78) !important;
    transform-origin: left center !important;
  }

  .bet-box {
    left: 330px !important;
    top: 93.5% !important;
    transform: translateY(-50%) scale(0.78) !important;
    transform-origin: left center !important;
  }

  .win-box {
    left: 48% !important;
    bottom: 18px !important;
    transform: translateX(-50%) scale(0.78) !important;
    transform-origin: center center !important;
  }

  .control-buttons {
    right: 230px !important;
    bottom: 24px !important;
    gap: 7px !important;
    transform: scale(0.78) !important;
    transform-origin: right center !important;
  }

  .control-btn {
    height: 42px !important;
    min-width: 68px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }

  .control-btn.round-btn {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
  }

  #spin-btn {
    width: 130px !important;
    top: 93.5% !important;
    left: calc(57% + 210px) !important;
  }

  .credit-value,
  .bet-value,
  .win-value {
    font-size: 21px !important;
  }

  .credit-label,
  .bet-label,
  .win-label {
    font-size: 13px !important;
  }

  .bet-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 17px !important;
  }
}

/* TABLET / VERY SMALL DESKTOP BEFORE MOBILE */
@media (min-width: 601px) and (max-width: 900px) {
  .bottom-bar {
    width: 88% !important;
    max-width: 570px !important;
    height: 58px !important;
    bottom: 10px !important;
    border-radius: 36px !important;
  }

  .credit-box {
    left: 120px !important;
    top: 94% !important;
    transform: translateY(-50%) scale(0.65) !important;
    transform-origin: left center !important;
  }

  .bet-box {
    left: 235px !important;
    top: 94% !important;
    transform: translateY(-50%) scale(0.65) !important;
    transform-origin: left center !important;
  }

  .win-box {
    left: 48.5% !important;
    bottom: 13px !important;
    transform: translateX(-50%) scale(0.65) !important;
    transform-origin: center center !important;
  }

  .control-buttons {
    right: 120px !important;
    bottom: 18px !important;
    gap: 5px !important;
    transform: scale(0.65) !important;
    transform-origin: right center !important;
  }

  .control-btn {
    height: 38px !important;
    min-width: 58px !important;
    font-size: 10px !important;
    padding: 0 8px !important;
  }

  .control-btn.round-btn {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
  }

  #spin-btn {
    width: 105px !important;
    top: 94% !important;
    left: calc(57% + 145px) !important;
  }

  .credit-value,
  .bet-value,
  .win-value {
    font-size: 19px !important;
  }

  .credit-label,
  .bet-label,
  .win-label {
    font-size: 12px !important;
  }

  .bet-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 15px !important;
  }
}


/* ===============================
   ✅ HEIGHT ONLY FINAL FIX
   No width change.
   No scale change.
   No horizontal change.
   Only freezes vertical positions.
================================ */
/* ===============================
   ✅ HARD HEIGHT LOCK — HEIGHT ONLY
   NO WIDTH CONDITION
   NO WIDTH CHANGE
====


/* ===============================
   ✅ HEIGHT ONLY LOCK
   When browser height closes:
   matrix + symbols + balls DO NOT MOVE.
   Screen only crops.
================================ */
/* ===============================
   ✅ FINAL HEIGHT LOCK — LAST CSS ONLY
   When height closes: crop only.
   Matrix, symbols, balls do NOT move vertically.
================================ */

/* ===============================
   ✅ HARD LOCK PIXI BALL CANVAS
   Stops vertical browser resize from squeezing balls.
================================ */


@media (max-height: 770px) {

  html {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  body {
    height: 720px !important;
    min-height: 720px !important;
    max-height: 720px !important;

    position: fixed !important;
    top: 0 !important;
    overflow: visible !important;
  }



 

  .left-panel {
    top: 360px !important;
  }

  .bottom-bar {
    top: 613px !important;
    bottom: auto !important;
  }

  .credit-box,
  .bet-box,
  #spin-btn {
    top: 670px !important;
    bottom: auto !important;
  }

  .win-box {
    top: 607px !important;
    bottom: auto !important;
  }

  .control-buttons {
    top: 633px !important;
    bottom: auto !important;
  }

  .volume-popup {
    top: 510px !important;
    bottom: auto !important;
  }

  .auto-menu {
    top: 110px !important;
    bottom: auto !important;
  }
}



/* ===============================
   ✅ FINAL MOBILE LEFT GROUP
   Moves bonus button + win feed together
   MUST BE LAST
================================ */
/* ===============================
   ✅ FINAL MOBILE WIN FEED OVERRIDE
   Move win feed down/right
   MUST BE LAST IN CSS FILE
================================ */
@media (max-width: 600px) {
  .left-big-box {
    position: fixed !important;

    /* 🔥 reset old top/bottom fight */
    top: auto !important;

    /* 🔥 more negative = more DOWN */
    bottom: -270px !important;

    /* 🔥 your right position */
    left: calc(84% + 250px) !important;

    transform: translateX(-50%) !important;

    width: 145px !important;
    height: 105px !important;

    margin: 0 !important;

    z-index: 999999 !important;
  }
}



/* ===============================
   ✅ iPhone XR / Pixel 7
   Move bonus button + win feed bit RIGHT
================================ */
@media (max-width: 600px) and (min-height: 861px) and (max-height: 930px) {

  .left-panel .ui-box:nth-child(2) {
    left: calc(50% + 10px) !important;
  }

  .left-big-box {
    left: calc(84% + 270px) !important;
  }
}


@media (max-width: 600px) and (max-height: 700px) {

  .left-panel .ui-box:nth-child(2) {
    left: calc(40% - 15px) !important;
  }

  .left-big-box {
    left: calc(84% + 230px) !important;
  }
}

/* ===============================
   ✅ Galaxy S8 / S9 / narrow tall phones
   Move bonus button + win feed LEFT
   Put AFTER the iPhone SE block
================================ */
@media (max-width: 370px) and (min-height: 701px) and (max-height: 780px) {

  .left-panel .ui-box:nth-child(2) {
    left: calc(40% - 23px) !important;
  }

  .left-big-box {
    left: calc(84% + 220px) !important;
  }
}


/* ===============================
   ✅ Galaxy S9+
   ONLY wider narrow phones
   Does NOT touch S8
================================ */
@media (min-width: 371px) and (max-width: 390px) and (min-height: 701px) and (max-height: 800px) {

  .left-panel .ui-box:nth-child(2) {
    left: calc(40% - 45px) !important;
  }

  .left-big-box {
    left: calc(84% + 190px) !important;
  }
}



/* =========================================================
   ✅ DYNAMIC MOBILE BOUNCE + WIN FEED
   No device-specific media query sizes.
   JS calculates safe width so they never overlap.
   MUST BE LAST.
======/* ===============================
   ✅ MOBILE WIN FEED ITEMS ONLY
   DO NOT TOUCH WIN FEED BOX SIZE
================================ */
@media (max-width: 600px) {

  #win-feed {
    inset: 7px !important;
    gap: 3px !important;
  }

  .win-item {
    gap: 4px !important;

    padding: 3px 5px !important;
    border-radius: 7px !important;

    font-size: 10px !important;
    line-height: 1 !important;

    min-height: 24px !important;
    max-height: 28px !important;
  }

  .win-item img {
    width: 20px !important;
    height: 20px !important;
  }

  .win-count {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .win-item span,
  .win-item div {
    font-size: 10px !important;
    line-height: 1 !important;
  }
}



/* ===============================
   ✅ MOBILE WIN TEXT SIZE ONLY
   Position is controlled by JS
================================ */
@media (max-width: 600px) {

  .win-label {
    font-size: 11px !important;
    opacity: 0.75 !important;
  }

  .win-label::after {
    content: ":" !important;
  }

  .win-value {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
}



/* =========================================================
   ✅ FINAL MOBILE BOTTOM HUD LOCK
   Must be LAST in CSS file.
   Fixes bounce / spin / bet / credit / menu shifting.
========================================================= */

@media (max-width: 600px) {

  /* remove old desktop bar */
  .bottom-bar {
    display: none !important;
  }

  .control-buttons,
  .control-btn,
  .infor-btn,
  .sound-btn {
    display: none !important;
  }

  /* ===============================
     ✅ BOUNCE BUTTON — LEFT SIDE
  =============================== */
  .left-panel {
    position: fixed !important;
    inset: auto !important;
    transform: none !important;
    z-index: 9999 !important;
  }

  .left-panel .ui-box:first-child {
    display: none !important;
  }

  .left-panel .ui-box:nth-child(2) {
    position: fixed !important;

    left: 24vw !important;
    bottom: 142px !important;

    width: clamp(190px, 43vw, 245px) !important;
    height: clamp(120px, 25vw, 160px) !important;

    transform: translateX(-50%) !important;
    margin: 0 !important;

    z-index: 9999 !important;
  }

  .left-panel .ui-box:nth-child(2) .bounce-btn-img {
    width: 100% !important;
    height: 100% !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;
  }

  /* ===============================
     ✅ WIN FEED — RIGHT SIDE
  =============================== */
  .left-big-box {
    position: fixed !important;

    right: 5vw !important;
    bottom: 145px !important;

    left: auto !important;
    top: auto !important;

    width: clamp(170px, 38vw, 220px) !important;
    height: clamp(105px, 22vw, 145px) !important;

    transform: none !important;
    margin: 0 !important;

    z-index: 9999 !important;
  }

  #win-feed {
    inset: 7px !important;
    gap: 3px !important;
  }

  .win-item {
    min-height: 24px !important;
    max-height: 28px !important;
    padding: 3px 5px !important;
    gap: 4px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .win-item img {
    width: 20px !important;
    height: 20px !important;
  }

  .win-count,
  .win-item span,
  .win-item div {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  /* ===============================
     ✅ SPIN BUTTON — TRUE CENTER
  =============================== */
  #spin-btn {
    position: fixed !important;

    left: 50% !important;
    bottom: 64px !important;
    top: auto !important;

    width: clamp(92px, 21vw, 118px) !important;

    transform: translateX(-50%) !important;

    z-index: 10000 !important;
  }

  #spin-btn:hover,
  #spin-btn:active {
    transform: translateX(-50%) scale(0.96) !important;
  }

  /* ===============================
     ✅ PLUS / MINUS — LOCKED AROUND SPIN
  =============================== */
  #bet-minus,
  #bet-plus {
    position: fixed !important;

    bottom: 69px !important;

    width: 32px !important;
    height: 32px !important;

    border-radius: 50% !important;
    border: 2px solid #d4a017 !important;

    background: radial-gradient(circle at 30% 30%, #5a2a7a, #2d0f3f) !important;
    color: #ffd700 !important;

    font-size: 22px !important;
    font-weight: 900 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 10001 !important;
  }

  #bet-minus {
    left: calc(50% - 66px) !important;
  }

  #bet-plus {
    left: calc(50% + 34px) !important;
  }

  /* ===============================
     ✅ CREDIT — BOTTOM LEFT
  =============================== */
  .credit-box {
    position: fixed !important;

    left: 22px !important;
    bottom: 18px !important;

    top: auto !important;
    right: auto !important;

    transform: none !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: none !important;
    border: none !important;

    z-index: 9999 !important;
  }

  .credit-box::after {
    display: none !important;
  }

  .credit-label {
    font-size: 12px !important;
    opacity: 0.9 !important;
  }

  .credit-value {
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  /* ===============================
     ✅ BET TEXT — BOTTOM CENTER-RIGHT
  =============================== */
  .bet-box {
    position: fixed !important;

    left: 58% !important;
    bottom: 18px !important;

    top: auto !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: none !important;
    border: none !important;

    z-index: 9999 !important;
  }

  .bet-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .bet-label {
    font-size: 12px !important;
    opacity: 0.9 !important;
  }

  .bet-label::after {
    content: ":" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    transform: none !important;
  }

  .bet-value {
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  /* ===============================
     ✅ MOBILE MENU — BOTTOM RIGHT
  =============================== */
  #mobile-menu-btn {
    display: flex !important;

    position: fixed !important;

    right: 12px !important;
    bottom: 20px !important;

    width: 56px !important;
    height: 56px !important;

    z-index: 10002 !important;
  }

  #mobile-menu-panel {
    position: fixed !important;

    right: 10px !important;
    bottom: 84px !important;

    z-index: 10003 !important;
  }
}


/* =========================================================
   ✅ FINAL MOBILE HUD TUNE
   Minus/plus fixed + Bounce button stretched wider
   MUST BE LAST IN CSS
========================================================= */

@media (max-width: 600px) {

  /* ===============================
     ✅ BOUNCE BUTTON — WIDER / STRETCHED
  =============================== */
  .left-panel .ui-box:nth-child(2) {
    position: fixed !important;

    left: 24vw !important;
    bottom: 142px !important;

    /* 🔥 wider button */
    width: clamp(220px, 50vw, 285px) !important;

    /* 🔥 keep height controlled, not too tall */
    height: clamp(118px, 24vw, 155px) !important;

    transform: translateX(-50%) !important;
    margin: 0 !important;

    z-index: 9999 !important;
  }

  .left-panel .ui-box:nth-child(2) .bounce-btn-img {
    width: 112% !important;   /* 🔥 length-wise stretch */
    height: 260% !important;

    left: 50% !important;
    top: 60% !important;

    transform: translate(-50%, -50%) !important;
    object-fit: fill !important;
  }

  /* ===============================
     ✅ SPIN BUTTON CENTER
  =============================== */
  #spin-btn {
    position: fixed !important;

    left: 50% !important;
    bottom: 64px !important;
    top: auto !important;

    width: clamp(92px, 21vw, 118px) !important;

    transform: translateX(-50%) !important;

    z-index: 10000 !important;
  }

  /* ===============================
     ✅ MINUS / PLUS — BETTER SPACING
  =============================== */
  #bet-minus,
  #bet-plus {
    position: fixed !important;

    bottom: 69px !important;

    width: 32px !important;
    height: 32px !important;

    border-radius: 50% !important;
    border: 2px solid #d4a017 !important;

    background: radial-gradient(circle at 30% 30%, #5a2a7a, #2d0f3f) !important;
    color: #ffd700 !important;

    font-size: 22px !important;
    font-weight: 900 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 10001 !important;
  }

  /* 🔥 minus farther left so it is visible */
  #bet-minus {
    left: calc(40% - 91px) !important;
  }

  /* 🔥 plus closer to spin, not too far right */
  #bet-plus {
    left: calc(40% + 15px) !important;
  }
}











/* =========================================================
   ✅ FINAL MOBILE BOTTOM BASELINE LOCK
   CREDIT + BET + MENU all use SAME bottom distance
   MUST BE LAST IN CSS
========================================================= */

@media (max-width: 600px) {

  :root {
    /* 🔥 ONE VALUE CONTROLS ALL 3 */
    --mobile-hud-bottom: max(14px, env(safe-area-inset-bottom));
  }

  /* ===============================
     ✅ CREDIT — SAME BOTTOM
  =============================== */
  .credit-box {
    position: fixed !important;

    left: 22px !important;
    bottom: var(--mobile-hud-bottom) !important;

    top: auto !important;
    right: auto !important;

    transform: none !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: none !important;
    border: none !important;

    z-index: 10000 !important;
  }

  .credit-box::after {
    display: none !important;
  }

  .credit-label,
  .credit-value {
    line-height: 1 !important;
  }

  .credit-label {
    font-size: 12px !important;
    opacity: 0.9 !important;
  }

  .credit-value {
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  /* ===============================
     ✅ BET — SAME BOTTOM
  =============================== */
  .bet-box {
    position: fixed !important;

    left: 58% !important;
    bottom: var(--mobile-hud-bottom) !important;

    top: auto !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: none !important;
    border: none !important;

    z-index: 10000 !important;
  }

  .bet-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .bet-label,
  .bet-value {
    line-height: 1 !important;
  }

  .bet-label {
    font-size: 12px !important;
    opacity: 0.9 !important;
  }

  .bet-label::after {
    content: ":" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    transform: none !important;
  }

  .bet-value {
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  /* ===============================
     ✅ MENU — SAME BOTTOM
  =============================== */
  #mobile-menu-btn {
    display: flex !important;

    position: fixed !important;

    right: 12px !important;
    bottom: var(--mobile-hud-bottom) !important;

    top: auto !important;
    left: auto !important;

    width: 56px !important;
    height: 56px !important;

    border-radius: 50% !important;
    border: 2px solid #d4a017 !important;

    background: radial-gradient(circle at 30% 30%, #5a2a7a, #2d0f3f) !important;

    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;

    z-index: 10002 !important;
  }

  #mobile-menu-btn span {
    width: 20px !important;
    height: 2px !important;
    background: #ffd700 !important;
  }

  #mobile-menu-panel {
    position: fixed !important;

    right:10px !important;
    bottom: calc(var(--mobile-hud-bottom) + 64px) !important;

    z-index: 10003 !important;
  }
}































/* =========================================================
   ✅ FINAL SMALL MOBILE BOUNCE + WIN FEED FIX
   Normal mobile stays untouched.
   Only small phones get adjusted.
   MUST BE LAST.
========================================================= */

/* =========================================
   VERY SMALL PHONES: 331px - 360px
   Smaller + lower so it does NOT touch matrix
========================================= */


















@media (min-width: 331px) and (max-width: 360px) {

  .left-panel .ui-box:nth-child(2) {
    position: fixed !important;

    /* left/right */
    left: 22vw !important;

    /* 🔥 smaller bottom = moves DOWN */
    bottom: 88px !important;

    /* controlled size */
    width: 155px !important;
    height: 146px !important;

    overflow: visible !important;

    transform: translateX(-50%) !important;
    margin: 0 !important;

    z-index: 9999 !important;
  }

  .left-panel .ui-box:nth-child(2) .bounce-btn-img {
    /* width = length */
    width: 125% !important;

    /* 🔥 was 250%, too tall */
    height: 185% !important;

    left: 50% !important;
    top: 56% !important;

    transform: translate(-50%, -50%) !important;
    object-fit: fill !important;
  }

  .left-big-box {
    position: fixed !important;

    right: 3vw !important;

    /* 🔥 lower with bounce */
    bottom: 112px !important;

    width: 128px !important;
    height: 92px !important;

    left: auto !important;
    top: auto !important;

    transform: none !important;
    margin: 0 !important;

    z-index: 9999 !important;
  }
}







/* =========================================
   TINY PHONES: 300px - 330px
   HARD shrink: Bounce + Win Feed stop touching
========================================= */
@media (min-width: 300px) and (max-width: 330px) {

  .left-panel .ui-box:nth-child(2) {
    position: fixed !important;

    /* more left */
    left: 18vw !important;

    /* keep same vertical area */
    bottom: 104px !important;

    /* 🔥 MUCH SMALLER */
    width: 105px !important;
    height: 74px !important;

    overflow: visible !important;

    transform: translateX(-50%) !important;
    margin: 0 !important;

    z-index: 9999 !important;
  }

  .left-panel .ui-box:nth-child(2) .bounce-btn-img {
    /* 🔥 MUCH LESS WIDE */
    width: 105% !important;

    /* 🔥 LESS TALL */
    height: 145% !important;

    left: 50% !important;
    top: 56% !important;

    transform: translate(-50%, -50%) !important;
    object-fit: fill !important;
  }

  .left-big-box {
    position: fixed !important;

    /* more right */
    right: 1vw !important;

    bottom: 108px !important;

    /* 🔥 MUCH SMALLER */
    width: 88px !important;
    height: 70px !important;

    left: auto !important;
    top: auto !important;

    transform: none !important;
    margin: 0 !important;

    z-index: 9999 !important;
  }

  #win-feed {
    inset: 5px !important;
    gap: 2px !important;
  }

  .win-item {
    min-height: 18px !important;
    max-height: 20px !important;
    padding: 2px 3px !important;
    gap: 2px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .win-item img {
    width: 15px !important;
    height: 15px !important;
  }

  .win-count,
  .win-item span,
  .win-item div {
    font-size: 8px !important;
    line-height: 1 !important;
  }
}






/* =========================================================
   ✅ FINAL DYNAMIC MOBILE HUD STAGE
   One virtual 375x667 mobile design.
   All bottom mobile UI keeps the SAME layout on all phones.
   MUST BE LAST IN CSS.
========================================================= */

#mobile-hud-stage {
  display: none;
}

@media (max-width: 600px) {

  #mobile-hud-stage {
    display: block !important;

    position: fixed !important;

    left: 50% !important;

    top: auto !important;
    bottom: max(0px, env(safe-area-inset-bottom)) !important;

    width: 375px !important;
    height: 667px !important;

    transform:
      translateX(-50%)
      scale(var(--mobile-ui-scale, 1));

    transform-origin: bottom center !important;

    z-index: 999999 !important;
    pointer-events: none !important;
  }



  /* hide desktop bottom bar/buttons on mobile */
  .bottom-bar,
  .control-buttons,
  .control-btn,
  .infor-btn,
  .sound-btn {
    display: none !important;
  }

  .left-panel .ui-box:first-child {
    display: none !important;
  }

  /* =====================================================
     ✅ BOUNCE BUTTON — virtual 375x667 position
  ===================================================== */

  #mobile-hud-stage .mobile-bounce-box {
    position: absolute !important;

    left: 100px !important;
    top: 498px !important;

    width: 205px !important;
    height: 108px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translate(-50%, -50%) !important;

    overflow: visible !important;

    z-index: 20 !important;
    pointer-events: auto !important;
  }

  #mobile-hud-stage .mobile-bounce-box .bounce-btn-img {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 118% !important;
    height: 155% !important;

    transform: translate(-50%, -50%) !important;

    object-fit: fill !important;

    cursor: pointer !important;
    pointer-events: auto !important;
  }

  #mobile-hud-stage .mobile-bounce-box .bounce-btn-img:hover {
    transform: translate(-50%, -50%) scale(1.04) !important;
  }

  #mobile-hud-stage .mobile-bounce-box .bounce-btn-img:active {
    transform: translate(-50%, -50%) scale(0.94) !important;
  }

  /* =====================================================
     ✅ WIN FEED BOX — virtual 375x667 position
  ===================================================== */

  #mobile-hud-stage .mobile-winfeed-box {
    position: absolute !important;

    left: 282px !important;
    top: 500px !important;

    width: 155px !important;
    height: 105px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translate(-50%, -50%) !important;

    z-index: 15 !important;
    pointer-events: none !important;
  }

  #mobile-hud-stage #win-feed {
    position: absolute !important;

    inset: 6px !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 3px !important;
    overflow: hidden !important;
  }

  #mobile-hud-stage .win-item {
    min-height: 21px !important;
    max-height: 24px !important;

    padding: 3px 4px !important;
    gap: 3px !important;

    border-radius: 7px !important;

    font-size: 9px !important;
    line-height: 1 !important;
  }

  #mobile-hud-stage .win-item img {
    width: 17px !important;
    height: 17px !important;
  }

  #mobile-hud-stage .win-count,
  #mobile-hud-stage .win-item span,
  #mobile-hud-stage .win-item div {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  /* =====================================================
     ✅ SPIN BUTTON — virtual 375x667 position
  ===================================================== */

  #mobile-hud-stage #spin-btn {
    position: absolute !important;

    left: 188px !important;
    top: 586px !important;

    width: 82px !important;
    height: auto !important;

    transform: translate(-50%, -50%) !important;

    z-index: 40 !important;
    pointer-events: auto !important;
  }

  #mobile-hud-stage #spin-btn:hover {
    transform: translate(-50%, -50%) scale(1.04) !important;
  }

  #mobile-hud-stage #spin-btn:active {
    transform: translate(-50%, -50%) scale(0.94) !important;
  }

  /* =====================================================
     ✅ MINUS / PLUS — virtual 375x667 position
  ===================================================== */

  #mobile-hud-stage #bet-minus,
  #mobile-hud-stage #bet-plus {
    position: absolute !important;

    top: 586px !important;

    width: 32px !important;
    height: 32px !important;

    border-radius: 50% !important;
    border: 2px solid #d4a017 !important;

    background: radial-gradient(circle at 30% 30%, #5a2a7a, #2d0f3f) !important;
    color: #ffd700 !important;

    font-size: 22px !important;
    font-weight: 900 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: translate(-50%, -50%) !important;

    z-index: 45 !important;
    pointer-events: auto !important;
  }

  #mobile-hud-stage #bet-minus {
    left: 141px !important;
  }

  #mobile-hud-stage #bet-plus {
    left: 235px !important;
  }

  #mobile-hud-stage #bet-minus:active,
  #mobile-hud-stage #bet-plus:active {
    transform: translate(-50%, -50%) scale(0.9) !important;
  }

  /* =====================================================
     ✅ CREDIT — virtual 375x667 position
  ===================================================== */

  #mobile-hud-stage .credit-box {
    position: absolute !important;

    left: 32px !important;
    top: 647px !important;

    transform: none !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: none !important;
    border: none !important;

    z-index: 30 !important;
    pointer-events: none !important;
  }

  #mobile-hud-stage .credit-box::after {
    display: none !important;
  }

  #mobile-hud-stage .credit-label,
  #mobile-hud-stage .credit-value {
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #mobile-hud-stage .credit-label {
    font-size: 12px !important;
    opacity: 0.95 !important;
  }

  #mobile-hud-stage .credit-value {
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  /* =====================================================
     ✅ BET TEXT — virtual 375x667 position
  ===================================================== */

  #mobile-hud-stage .bet-box {
    position: absolute !important;

    left: 212px !important;
    top: 647px !important;

    transform: none !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: none !important;
    border: none !important;

    z-index: 30 !important;
    pointer-events: none !important;
  }

  #mobile-hud-stage .bet-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  #mobile-hud-stage .bet-label,
  #mobile-hud-stage .bet-value {
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #mobile-hud-stage .bet-label {
    font-size: 12px !important;
    opacity: 0.95 !important;
  }

  #mobile-hud-stage .bet-label::after {
    content: ":" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    transform: none !important;
  }

  #mobile-hud-stage .bet-value {
    font-size: 14px !important;
    font-weight: 900 !important;
  }

  /* =====================================================
     ✅ MENU BUTTON — virtual 375x667 position
  ===================================================== */

  #mobile-hud-stage #mobile-menu-btn {
    display: flex !important;

    position: absolute !important;

    left: 338px !important;
    top: 628px !important;

    width: 56px !important;
    height: 56px !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50% !important;
    border: 2px solid #d4a017 !important;

    background: radial-gradient(circle at 30% 30%, #5a2a7a, #2d0f3f) !important;

    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;

    z-index: 50 !important;
    pointer-events: auto !important;
  }

  #mobile-hud-stage #mobile-menu-btn span {
    width: 20px !important;
    height: 2px !important;
    background: #ffd700 !important;
  }

  /* =====================================================
     ✅ MOBILE MENU PANEL
  ===================================================== */

  #mobile-hud-stage #mobile-menu-panel {
    position: absolute !important;

    left: 230px !important;
    top: 455px !important;

    width: 118px !important;

    z-index: 60 !important;
  }
}


/* =========================================================
   ✅ FIX BONUS BUY POPUP ABOVE MOBILE HUD
   MUST BE LAST
========================================================= */

#bonus-buy-overlay {
  z-index: 3000000 !important;
}

#bonus-buy-overlay .bonus-buy-panel {
  position: relative !important;
  z-index: 3000001 !important;
}

/* info popup also above HUD */
#info-overlay,
.info-overlay {
  z-index: 3000000 !important;
}

#info-overlay .info-panel,
.info-overlay .info-panel {
  position: relative !important;
  z-index: 3000001 !important;
}





/* =========================================================
   ✅ FINAL CLEAN DESKTOP / TABLET STAGE
   Dynamic stage, but keeps your ORIGINAL main-game sizes.
   MUST BE LAST IN CSS.
========================================================= */

#desktop-stage {
  display: none;
}

@media (min-width: 601px) {

  #desktop-stage {
    display: block !important;

    position: fixed !important;

    left: 50% !important;
    top: 50% !important;

    width: 1600px !important;
    height: 900px !important;

    transform:
      translate(-50%, -50%)
      scale(var(--desktop-ui-scale, 1));
      
      
    transform-origin: center center !important;

    z-index: 5 !important;
    pointer-events: none !important;
  }

  /* =====================================================
     ✅ MAIN GAME VISUAL WORLD
     Keeps your original matrix / symbols / balls sizing
  ===================================================== */

  #desktop-stage #game-stage {
    position: absolute !important;

    left: 800px !important;
    top: 390px !important;

    width: 800px !important;
    height: 720px !important;

    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;

    z-index: 3 !important;
    pointer-events: none !important;
  }

  /* ✅ ORIGINAL MAIN MATRIX SIZE */
  #desktop-stage #game-stage #matrix-image {
    position: absolute !important;

    left: 50% !important;
    top: 54% !important;

    width: 630px !important;
    height: 545px !important;

    transform: translate(-50%, -50%) scaleY(1.28) !important;

    object-fit: fill !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* ✅ ORIGINAL MAIN SYMBOL GRID */
  #desktop-stage #game-stage #bonus-container {
    position: absolute !important;

    left: 50% !important;
    top: 54% !important;

    width: 650px !important;
    height: 650px !important;

    transform: translate(-50%, -50%) scale(0.78) !important;

    z-index: 2 !important;
    pointer-events: none !important;
  }

  /* ✅ ORIGINAL BALL SIZE */
  #desktop-stage #game-stage #balls-container {
    position: absolute !important;

    left: 50% !important;
    top: 43px !important;

    width: 800px !important;
    height: 300px !important;

    transform: translateX(-50%) scale(0.78) !important;
    transform-origin: top center !important;

    z-index: 0 !important;
    pointer-events: none !important;
  }

  #desktop-stage #game-stage #balls-container canvas {
    width: 800px !important;
    height: 400px !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
  }

  /* =====================================================
     ✅ BONUS DARK MATRIX
     Keeps your current bonus dark setup
  ===================================================== */

  #desktop-stage #game-stage #matrix-image.bonus-dark-matrix {
    top: 50% !important;

    width: 700px !important;
    height: 590px !important;

    transform: translate(-50%, -50%) scaleY(1.34) !important;
    object-fit: fill !important;
  }

  #desktop-stage #game-stage #bonus-container.bonus-dark-symbols {
    top: 53% !important;

    width: 650px !important;
    height: 650px !important;

    transform: translate(-50%, -50%) scale(0.78) !important;

    overflow: visible !important;
  }

  #desktop-stage #game-stage #bonus-container.bonus-dark-symbols canvas {
    overflow: visible !important;
  }

  /* =====================================================
     ✅ LEFT SECTION
     Keeps your original logo / bounce / win-feed sizes
  ===================================================== */

  #desktop-stage .left-panel {
    position: absolute !important;

    left: 50px !important;
    top: 450px !important;

    transform: translateY(-50%) !important;

    display: flex !important;
    flex-direction: column !important;

    z-index: 8 !important;
    pointer-events: auto !important;
  }

  #desktop-stage .left-panel .ui-box {
    position: relative !important;

    width: 620px !important;
    height: 310px !important;

    left: -110px !important;

    margin: 0 !important;

    pointer-events: auto !important;
  }

  #desktop-stage .left-panel .ui-box:first-child {
    display: block !important;
  }

  #desktop-stage .left-panel .ui-box + .ui-box {
    margin-top: -70px !important;
  }

  #desktop-stage .left-panel .ui-frame {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  #desktop-stage .left-panel .bounce-btn-img {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 75% !important;
    height: 130% !important;

    transform: translate(-50%, -50%) scale(1) !important;

    object-fit: fill !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  #desktop-stage .left-panel .bounce-btn-img:hover {
    transform: translate(-50%, -50%) scale(1.06) !important;
  }

  #desktop-stage .left-panel .bounce-btn-img:active {
    transform: translate(-50%, -50%) scale(0.94) !important;
  }

  #desktop-stage .left-big-box {
    position: relative !important;

    width: 360px !important;
    height: 250px !important;

    margin-left: 10px !important;
    margin-bottom: 150px !important;

    transform: none !important;

    z-index: 8 !important;
    pointer-events: none !important;
  }

  #desktop-stage #win-feed {
    inset: 12px !important;
    gap: 10px !important;
  }

  #desktop-stage .win-item {
    gap: 12px !important;
    padding: 8px 12px !important;
    font-size: 18px !important;
    min-height: auto !important;
    max-height: none !important;
  }

  #desktop-stage .win-item img {
    width: 42px !important;
    height: 42px !important;
  }

  #desktop-stage .win-count,
  #desktop-stage .win-item span,
  #desktop-stage .win-item div {
    font-size: 18px !important;
    line-height: normal !important;
  }

  /* =====================================================
     ✅ BOTTOM HUD
     Same as your desktop version, but inside 1600x900 stage
  ===================================================== */

  #desktop-stage .bottom-bar {
    position: absolute !important;

    left: 800px !important;
    top: 840px !important;

    bottom: auto !important;

    width: 1000px !important;
    max-width: none !important;
    height: 85px !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 55px !important;

    z-index: 6 !important;
    pointer-events: none !important;
  }

  #desktop-stage .credit-box {
    position: absolute !important;

    left: 370px !important;
    top: 837px !important;

    transform: translateY(-50%) !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;

    padding: 0 20px !important;
    margin: 0 !important;

    background: none !important;
    border: none !important;

    z-index: 10 !important;
    pointer-events: none !important;
  }

  #desktop-stage .credit-box::after {
    display: block !important;
  }

  #desktop-stage .bet-box {
    position: absolute !important;

    left: 570px !important;
    top: 837px !important;

    transform: translateY(-50%) !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: none !important;
    border: none !important;

    z-index: 12 !important;
    pointer-events: auto !important;
  }

  #desktop-stage .bet-controls {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #desktop-stage .bet-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 20px !important;
  }

  #desktop-stage .win-box {
    position: absolute !important;

    left: 790px !important;
    top: 837px !important;

    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: center !important;

    padding: 6px 20px !important;
    margin: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    z-index: 10 !important;
    pointer-events: none !important;
  }

  #desktop-stage .control-buttons {
    position: absolute !important;

    left: 1015px !important;
    top: 837px !important;

    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    display: flex !important;
    gap: 12px !important;

    z-index: 10 !important;
    pointer-events: auto !important;
  }

  #desktop-stage .control-btn {
    height: 50px !important;
    min-width: 90px !important;
    padding: 0 14px !important;

    border-radius: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 15px !important;
  }

  #desktop-stage .control-btn.round-btn {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  #desktop-stage #spin-btn {
    position: absolute !important;

    left: 1245px !important;
    top: 837px !important;

    width: 180px !important;

    transform: translate(-50%, -50%) !important;

    cursor: pointer !important;
    z-index: 14 !important;
    pointer-events: auto !important;
  }

  #desktop-stage #spin-btn:hover {
    transform: translate(-50%, -50%) scale(1.05) !important;
  }

  #desktop-stage #spin-btn:active {
    transform: translate(-50%, -50%) scale(0.95) !important;
  }

  /* =====================================================
     ✅ TEXT EXACT DESKTOP SIZE
  ===================================================== */

  #desktop-stage .credit-label,
  #desktop-stage .bet-label,
  #desktop-stage .win-label {
    font-family: 'Arial Black', Impact, sans-serif !important;
    font-size: 17px !important;
    font-weight: 900 !important;

    letter-spacing: 2px !important;
    text-transform: uppercase !important;

    color: #ffd700 !important;

    text-shadow:
      0 2px 3px rgba(0,0,0,0.8) !important;

    text-align: left !important;
  }

  #desktop-stage .credit-value,
  #desktop-stage .bet-value,
  #desktop-stage .win-value {
    font-family: serif !important;
    font-size: 28px !important;
    font-weight: 900 !important;

    letter-spacing: 1px !important;
    color: #ffd700 !important;

    text-shadow:
      0 2px 4px rgba(0,0,0,0.7),
      0 0 6px rgba(255,215,0,0.5) !important;

    text-align: left !important;
  }

  /* =====================================================
     ✅ POPUPS / MENUS
  ===================================================== */

  #desktop-stage #volume-panel {
    position: absolute !important;

    left: 1138px !important;
    top: 705px !important;

    right: auto !important;
    bottom: auto !important;

    width: 30px !important;
    height: 120px !important;

    z-index: 9999 !important;
  }

  #desktop-stage .auto-menu {
    position: absolute !important;

    left: 1015px !important;
    top: 660px !important;

    right: auto !important;
    bottom: auto !important;

    z-index: 99999 !important;
  }

  #desktop-stage #mobile-menu-btn,
  #desktop-stage #mobile-menu-panel {
    display: none !important;
  }
}



/* =========================================================
   ✅ DESKTOP/TABLET ONLY — MATRIX + BALLS + SYMBOLS BALANCED
   Does NOT touch HUD.
   Does NOT touch left section.
   Does NOT touch mobile.
   MUST BE LAST.
========================================================= */
/* =========================================================
   ✅ DESKTOP/TABLET ONLY — MATRIX + DARK MATRIX + SYMBOLS + BALLS
   Does NOT touch HUD.
   Does NOT touch left section.
   Does NOT touch mobile.
   MUST BE LAST.
========================================================= */

@media (min-width: 601px) {

  /* ===============================
     ✅ MAIN MATRIX — bigger
  =============================== */
  #desktop-stage #game-stage #matrix-image {
    width: 720px !important;
    height: 620px !important;

    transform: translate(-50%, -50%) scaleY(1.30) !important;
  }

  /* ===============================
     ✅ MAIN SYMBOLS — bigger to match matrix
  =============================== */
  #desktop-stage #game-stage #bonus-container {
    left: 50% !important;
    top: 55% !important;

    width: 640px !important;
    height: 650px !important;

    transform: translate(-50%, -50%) scale(0.90) !important;

    z-index: 2 !important;
    pointer-events: none !important;
  }

  /* ===============================
     ✅ DARK BONUS MATRIX — also bigger
  =============================== */
  #desktop-stage #game-stage #matrix-image.bonus-dark-matrix {
    top: 48% !important;

    width: 820px !important;
    height: 675px !important;

    transform: translate(-50%, -50%) scaleY(1.34) !important;

    object-fit: fill !important;
  }

  /* ===============================
     ✅ BONUS SYMBOLS — match dark matrix
  =============================== */
  #desktop-stage #game-stage #bonus-container.bonus-dark-symbols {
    left: 50% !important;
    top: 53% !important;

    width: 640px !important;
    height: 650px !important;

    transform: translate(-50%, -50%) scale(0.90) !important;

    overflow: visible !important;
  }

  #desktop-stage #game-stage #bonus-container.bonus-dark-symbols canvas {
    overflow: visible !important;
  }

  /* ===============================
     ✅ BALLS — bigger
  =============================== */
  #desktop-stage #game-stage #balls-container {
    top: -10px !important;

    transform: translateX(-50%) scale(0.88) !important;
    transform-origin: top center !important;
  }

  #desktop-stage #game-stage #balls-container canvas {
    width: 800px !important;
    height: 400px !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
  }
}



/* ===============================
   ✅ MOBILE LANDSCAPE — BONUS BUY POPUP FIX
   iPhone rotated / short height screens
================================ */
@media (orientation: landscape) and (max-height: 520px) {

  #bonus-buy-overlay {
    align-items: center !important;
    justify-content: center !important;

    padding: 8px !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
  }

  .bonus-buy-panel {
    width: 420px !important;
    max-width: 74vw !important;

    height: auto !important;
    max-height: 92vh !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    transform: scale(0.82) !important;
    transform-origin: center center !important;
  }

  .bonus-buy-header {
    height: 42px !important;
    padding: 0 14px !important;

    font-size: 18px !important;
    letter-spacing: 1px !important;
  }

  #close-bonus-buy {
    width: 32px !important;
    height: 32px !important;

    font-size: 20px !important;
    line-height: 32px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bonus-buy-body {
    padding: 10px 16px 14px !important;

    max-height: calc(92vh - 42px) !important;
    overflow-y: auto !important;

    box-sizing: border-box !important;
  }

  .bonus-buy-symbol {
    width: 70px !important;
    margin-bottom: 6px !important;
  }

  .bonus-buy-title {
    font-size: 24px !important;
    line-height: 1.05 !important;
    margin-bottom: 8px !important;
  }

  .bonus-buy-desc {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .bonus-buy-bet-box {
    margin-bottom: 10px !important;
    padding: 8px 12px !important;

    border-radius: 14px !important;
  }

  .bonus-buy-bet-label {
    font-size: 11px !important;
    margin-bottom: 5px !important;
  }

  .bonus-buy-bet-controls {
    gap: 12px !important;
  }

  #bonus-buy-bet-minus,
  #bonus-buy-bet-plus {
    width: 34px !important;
    height: 34px !important;

    font-size: 22px !important;
  }

  #bonus-buy-bet-value {
    min-width: 70px !important;
    font-size: 24px !important;
  }

  .bonus-buy-price {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  .bonus-buy-buttons {
    gap: 10px !important;
  }

  .bonus-buy-btn {
    height: 44px !important;

    border-radius: 14px !important;

    font-size: 15px !important;
  }
}










/* =========================================================
   ✅ FIX MOBILE FIRST BAD LAYOUT FLASH
   Hide raw mobile UI until JS moves everything into
   #mobile-hud-stage.
========================================================= */





/* =========================================================
   ✅ FIX FIRST BAD LAYOUT FLASH
   Hide raw desktop layout until JS moves everything
   into #desktop-stage.
========================================================= */

@media (min-width: 601px) {

  body:not(.desktop-stage-ready) #game-stage,
  body:not(.desktop-stage-ready) .left-panel,
  body:not(.desktop-stage-ready) .bottom-bar,
  body:not(.desktop-stage-ready) .credit-box,
  body:not(.desktop-stage-ready) .bet-box,
  body:not(.desktop-stage-ready) .win-box,
  body:not(.desktop-stage-ready) .control-buttons,
  body:not(.desktop-stage-ready) #spin-btn,
  body:not(.desktop-stage-ready) #volume-panel {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body.desktop-stage-ready #desktop-stage {
    opacity: 1 !important;
    visibility: visible !important;
  }
}


@media (max-width: 600px) {

  body:not(.mobile-hud-ready) .left-panel .ui-box:nth-child(2),
  body:not(.mobile-hud-ready) .left-big-box,
  body:not(.mobile-hud-ready) #spin-btn,
  body:not(.mobile-hud-ready) .credit-box,
  body:not(.mobile-hud-ready) .bet-box,
  body:not(.mobile-hud-ready) #bet-minus,
  body:not(.mobile-hud-ready) #bet-plus,
  body:not(.mobile-hud-ready) #mobile-menu-btn,
  body:not(.mobile-hud-ready) #mobile-menu-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mobile-hud-ready #mobile-hud-stage {
    opacity: 1 !important;
    visibility: visible !important;
  }
}


/* =========================================================
   ✅ HARD MOBILE BOOT LOCK
   Stops mobile first-frame glitch completely.
   Hides BOTH:
   1) game visual world
   2) mobile HUD
   until JS finishes layout.
========================================================= */

@media (max-width: 600px) {

  body:not(.mobile-game-ready) #game-stage,
  body:not(.mobile-game-ready) #mobile-hud-stage,
  body:not(.mobile-game-ready) .left-panel,
  body:not(.mobile-game-ready) .left-panel .ui-box:nth-child(2),
  body:not(.mobile-game-ready) .left-big-box,
  body:not(.mobile-game-ready) #spin-btn,
  body:not(.mobile-game-ready) .credit-box,
  body:not(.mobile-game-ready) .bet-box,
  body:not(.mobile-game-ready) .win-box,
  body:not(.mobile-game-ready) #bet-minus,
  body:not(.mobile-game-ready) #bet-plus,
  body:not(.mobile-game-ready) #mobile-menu-btn,
  body:not(.mobile-game-ready) #mobile-menu-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mobile-game-ready #game-stage,
  body.mobile-game-ready #mobile-hud-stage {
    opacity: 1 !important;
    visibility: visible !important;
  }
}















/* =========================================================
   ✅ BOOT OVERLAY
   Loading first, then intro image, then fade into game.
   MUST BE LAST.
========================================================= */
.boot-overlay {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;

  z-index: 2147483647;

  /* ✅ dark like your loading image */
  background:
    radial-gradient(
      circle at center,
      #11120b 0%,
      #050604 45%,
      #000000 100%
    );

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}
.boot-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-layer {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.boot-layer.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* LOADING IMAGE */
/* LOADING IMAGE — NOT ZOOMED */
.boot-loading-img {
  width: min(70vw, 520px);
  height: auto;

  object-fit: contain;
  object-position: center center;

  display: block;

  animation: bootLogoPulse 1.4s ease-in-out infinite alternate;
}

/* LOADING SCREEN CENTER STACK */
#boot-loading {
  flex-direction: column;
  gap: 28px;
}

/* GOLD LOADING BAR */
.boot-loading-bar {
  width: min(55vw, 360px);
  height: 8px;

  border-radius: 999px;
  overflow: hidden;

  background: rgba(255, 215, 0, 0.16);

  border: 1px solid rgba(255, 215, 0, 0.55);

  box-shadow:
    0 0 14px rgba(255, 215, 0, 0.25),
    inset 0 0 8px rgba(0, 0, 0, 0.7);
}

.boot-loading-bar::before {
  content: "";
  display: block;

  width: 45%;
  height: 100%;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    transparent,
    #ffd700,
    #fff2a0,
    #ffd700,
    transparent
  );

  animation: bootBarMove 1.15s ease-in-out infinite;
}

.boot-loading-text {
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 18px;
  letter-spacing: 6px;

  color: #ffd700;

  text-shadow:
    0 3px 5px #000,
    0 0 12px rgba(255, 215, 0, 0.85);

  animation: bootTextBlink 1s ease-in-out infinite alternate;
}

@keyframes bootLogoPulse {
  from {
    transform: scale(1);
    filter: brightness(0.92);
  }

  to {
    transform: scale(1.035);
    filter: brightness(1.1);
  }
}

@keyframes bootBarMove {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(230%);
  }
}

@keyframes bootTextBlink {
  from {
    opacity: 0.55;
  }

  to {
    opacity: 1;
  }
}

/* MOBILE LOADING SIZE */
@media (max-width: 600px) and (orientation: portrait) {
  .boot-loading-img {
    width: min(78vw, 360px);
  }

  .boot-loading-bar {
    width: min(68vw, 300px);
  }

  .boot-loading-text {
    font-size: 14px;
    letter-spacing: 4px;
  }
}
/* INTRO IMAGE */
/* =========================================================
   ✅ INTRO IMAGE — DESKTOP / MOBILE / LANDSCAPE SAFE
========================================================= */

#boot-intro picture {
  width: 99vw;
  height: 94vh;
  height: 96dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;
}




.boot-intro-img {
  display: block;

  width: 90vw;
  height: 90vh;
  height: 100dvh;

  object-fit: contain;
  object-position: center center;

  background: #000;
}

/* ✅ DESKTOP / LAPTOP
   Wide image fills screen cinematic */
@media (min-width: 601px) and (orientation: landscape) {
  .boot-intro-img {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    object-fit: cover !important;
  }
}

/* ✅ DESKTOP PORTRAIT / TABLET ODD SIZE
   Do not crop */
@media (min-width: 601px) and (orientation: portrait) {
  .boot-intro-img {
    width: auto !important;
    height: auto !important;

    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;

    object-fit: contain !important;
  }
}

/* ✅ MOBILE PORTRAIT
   Full mobile image visible on every phone width/height */


@media (max-width: 600px) and (orientation: portrait) {
  .boot-intro-img {
    width: 114vw !important;
    height: 105dvh !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: translateY(-4dvh) !important;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .boot-intro-img {
    width: 100vw !important;
    height: 96dvh !important;

    max-width: 100vw !important;
    max-height: 96dvh !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: translateY(-6dvh) !important;
  }
}

/* little pulse so loading screen feels alive */
.boot-loading-img {
  animation: bootLoadingPulse 1.4s ease-in-out infinite alternate;
}

@keyframes bootLoadingPulse {
  from {
    transform: scale(1);
    filter: brightness(0.92);
  }

  to {
    transform: scale(1.025);
    filter: brightness(1.08);
  }
}


/* =========================================================
   ✅ BOOT LANDSCAPE FIX
   Stops loading + intro from zooming in landscape phones
========================================================= */

@media (orientation: landscape) and (max-height: 520px) {

  /* loading logo must fit inside short landscape height */
  .boot-loading-img {
    width: auto !important;
    height: auto !important;

    max-width: 42vw !important;
    max-height: 42vh !important;

    object-fit: contain !important;
    object-position: center center !important;
  }

  /* intro must show full image, not zoom/crop */
  .boot-intro-img {
    width: 100vw !important;
    height: 100vh !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: #000 !important;
  }

  #boot-loading {
    gap: 12px !important;
  }

  .boot-loading-bar {
    width: min(36vw, 260px) !important;
    height: 6px !important;
  }

  .boot-loading-text {
    font-size: 12px !important;
    letter-spacing: 4px !important;
  }
}


/* =========================================================
   ✅ FINAL AUTO MENU PATCH — NO DELETE VERSION
   Forces clean look after old duplicate CSS.
========================================================= */

.auto-menu {
  position: fixed !important;

  display: none;

  z-index: 3000000 !important;

  padding: 8px !important;
  gap: 7px !important;

  border-radius: 18px !important;
  border: 2px solid #d4af37 !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(120, 55, 150, 0.35), transparent 45%),
    linear-gradient(180deg, rgba(37, 12, 48, 0.98), rgba(9, 3, 14, 0.98)) !important;

  box-shadow:
    0 0 24px rgba(0,0,0,0.9),
    0 0 14px rgba(255,215,0,0.24),
    inset 0 0 12px rgba(255,215,0,0.08) !important;

  opacity: 0;
  pointer-events: none;

  transform: scale(0.94) !important;

  transition:
    opacity 0.16s ease,
    transform 0.16s ease !important;
}

.auto-menu.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: scale(1) !important;
}

/* row mode */
.auto-menu.auto-menu-row {
  flex-direction: row !important;
}

/* column mode */
.auto-menu.auto-menu-column {
  flex-direction: column !important;
}

/* 🔥 FORCE NICE BUTTONS — beats old duplicate block */
.auto-menu button {
  width: 62px !important;
  height: 38px !important;

  border-radius: 13px !important;
  border: 2px solid #f0d36a !important;

  background:
    radial-gradient(circle at 35% 18%, rgba(255,255,255,0.5), transparent 32%),
    linear-gradient(180deg, #fff0a4 0%, #d4af37 48%, #8a5b10 100%) !important;

  color: #241000 !important;

  font-family: 'Arial Black', Impact, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;

  box-shadow:
    0 4px 9px rgba(0,0,0,0.72),
    inset 0 2px 3px rgba(255,255,255,0.35),
    inset 0 -4px 6px rgba(0,0,0,0.55) !important;
}

/* ✅ mobile portrait: bottom clean bar */
@media (max-width: 600px) and (orientation: portrait) {
  .auto-menu {
    left: 50% !important;
    top: auto !important;
    bottom: 72px !important;

    width: min(92vw, 355px) !important;

    display: none;
    grid-template-columns: repeat(5, 1fr) !important;

    transform: translateX(-50%) scale(0.94) !important;
  }

  .auto-menu.open {
    display: grid !important;
    transform: translateX(-50%) scale(1) !important;
  }

  .auto-menu button {
    width: auto !important;
    height: 40px !important;
    font-size: 12px !important;
  }
}

/* ✅ mobile landscape: compact row */
@media (orientation: landscape) and (max-height: 520px) {
  .auto-menu {
    padding: 6px !important;
    gap: 6px !important;
    border-radius: 14px !important;
  }

  .auto-menu button {
    width: 48px !important;
    height: 30px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }
}




/* =========================================================
   ✅ MOBILE LANDSCAPE — BIGGER MATRIX + BALLS + HUD
   MUST STAY AT THE VERY BOTTOM OF game.css
========================================================= */
@media (orientation: landscape) and (max-height: 520px) {

  /* =========================================
     GAME VISUAL WORLD
  ========================================= */

  #game-stage #matrix-image {
    width: 760px !important;
    height: 505px !important;

    top: 56% !important;

    transform:
      translate(-50%, -50%)
      scaleY(1.12) !important;
  }

  #game-stage #bonus-container {
    width: 650px !important;
    height: 650px !important;

    top: 56% !important;

    transform:
      translate(-50%, -50%)
      scale(0.94) !important;
  }

  #game-stage #balls-container {
    top: 12px !important;

    transform:
      translateX(-50%)
      scale(0.92) !important;
  }

  /* Dark bonus version */
  #game-stage #matrix-image.bonus-dark-matrix {
    width: 790px !important;
    height: 545px !important;

    top: 52% !important;

    transform:
      translate(-50%, -50%)
      scaleY(1.16) !important;
  }

  #game-stage #bonus-container.bonus-dark-symbols {
    top: 54% !important;

    transform:
      translate(-50%, -50%)
      scale(0.94) !important;
  }

  /* =========================================
     BIG LANDSCAPE HUD
     Virtual portrait HUD stays bottom-anchored,
     but the buttons become large and usable.
  ========================================= */

  #mobile-hud-stage .mobile-bounce-box {
    left: 112px !important;
    top: 525px !important;
  }

  #mobile-hud-stage .mobile-winfeed-box {
    left: 286px !important;
    top: 525px !important;
  }

  #mobile-hud-stage #spin-btn {
    left: 188px !important;
    top: 600px !important;

    width: 92px !important;
  }

  #mobile-hud-stage #bet-minus,
  #mobile-hud-stage #bet-plus {
    top: 600px !important;

    width: 38px !important;
    height: 38px !important;

    font-size: 26px !important;
  }

  #mobile-hud-stage #bet-minus {
    left: 132px !important;
  }

  #mobile-hud-stage #bet-plus {
    left: 244px !important;
  }

  #mobile-hud-stage .credit-box {
    left: 24px !important;
    top: 650px !important;
  }

  #mobile-hud-stage .bet-box {
    left: 210px !important;
    top: 650px !important;
  }

  #mobile-hud-stage #mobile-menu-btn {
    left: 340px !important;
    top: 630px !important;

    width: 58px !important;
    height: 58px !important;
  }

  #mobile-hud-stage #mobile-menu-panel {
    left: 255px !important;
    top: 440px !important;
  }
}

/* ===============================
   MOBILE PORTRAIT — BONUS BUY MODEL SIZE
================================ */
@media (max-width: 600px) and (orientation: portrait) {

  .bonus-buy-panel {
    transform: scale(0.82) !important;
    transform-origin: center center !important;
  }
}

/* ✅ MOBILE HUD:
   Bounce + win feed must stay BELOW the WIN text */
@media (max-width: 600px) and (orientation: portrait) {

  #mobile-hud-stage .mobile-bounce-box {
    top: 510px !important;
  }

  #mobile-hud-stage .mobile-winfeed-box {
    top: 515px !important;
  }
}

/* DESKTOP — move logo slightly down only */
@media (min-width: 601px) {
  .left-panel .ui-box:first-child {
    transform: translateY(18px);
  }
}

/* =========================================================
   ACTIVE WIN PATTERNS — INFO PAGE
========================================================= */

.win-patterns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

  margin-top: 12px;
}

.win-pattern-card {
  padding: 10px 8px;

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(90, 42, 122, 0.55),
      rgba(16, 6, 23, 0.88)
    );

  border: 1px solid rgba(255, 215, 90, 0.30);

  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.45),
    0 4px 10px rgba(0,0,0,0.30);
}

.win-pattern-title {
  min-height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 8px;

  color: #fff0a4;

  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;

  text-shadow:
    0 2px 3px rgba(0,0,0,0.85);
}

.win-pattern-matrix {
  width: 118px;
  height: 118px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.win-pattern-cell {
  position: relative;

  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      rgba(84, 43, 105, 0.72),
      rgba(25, 9, 35, 0.96)
    );

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.06),
    inset 0 -2px 4px rgba(0,0,0,0.55);
}

.win-pattern-cell.active {
  background:
    radial-gradient(
      circle at 35% 24%,
      #fff9c9 0%,
      #ffe36c 28%,
      #d69a1d 65%,
      #704006 100%
    );

  border-color: #fff1a6;

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.55),
    inset 0 -3px 5px rgba(78,38,0,0.72),
    0 0 7px rgba(255,215,0,0.82);
}

.win-pattern-cell.active::after {
  content: "";

  position: absolute;
  inset: 24%;

  border-radius: 50%;

  background: rgba(255,255,225,0.72);
}

@media (max-width: 600px) {
  .win-patterns-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
  }

  .win-pattern-card {
    padding: 8px 6px;
    border-radius: 12px;
  }

  .win-pattern-title {
    min-height: 24px;
    margin-bottom: 6px;
    font-size: 8px;
  }

  .win-pattern-matrix {
    width: 105px;
    height: 105px;
    gap: 2px;
  }

  .win-pattern-cell {
    border-radius: 3px;
  }
}