/* Root variables for theming */
    :root {
        --primary-color: #00ffff; /* Cyber Blue */
        --secondary-color: #ff00ff; /* Neon Pink */
        --accent-color: #00ff88; /* Electric Green */
        --warning-color: #ffd700; /* Gold */
        --danger-color: #ff0000; /* Red */
        --background-dark: #0a0a0a;
        --background-medium: #1a1a2e;
        --background-light: #16213e;
        --card-back-color: #222; /* Default card back color */
        --text-color: #e0e0e0;
        --border-glow: rgba(0, 255, 255, 0.5);
    }
    /* Add this inside your <style> tags in index.html */
 /* Keep your @keyframes warningSparkle as it is defined globally */
@keyframes warningSparkle {
  0% {
    box-shadow: 0 0 10px var(--warning-color);
    text-shadow: 0 0 5px var(--warning-color);
  }
  50% {
    box-shadow: 0 0 25px var(--warning-color), 0 0 15px 5px rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 10px var(--warning-color), 0 0 8px rgba(255, 255, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 10px var(--warning-color);
    text-shadow: 0 0 5px var(--warning-color);
  }
}




/* --- Your #deck-status-message rules --- */




#deck-status-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background-color: rgba(0, 0, 0, 0.85);
    color: var(--warning-color); /* Default color for deck status is already warning */
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5em;
    text-align: center;
    border: 2px solid var(--accent-color); /* Default border color for deck status */
    border-radius: 10px;
    box-shadow: 0 0 15px var(--accent-color); /* Default shadow color for deck status */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 2000;
}




#deck-status-message.show {
    opacity: 1;
    visibility: visible;
}




/* Add the animation specifically to #deck-status-message when it's a warning */
#deck-status-message.warning {
    color: var(--warning-color); /* Ensure text is warning color */
    border-color: var(--warning-color); /* Border turns warning color */
    box-shadow: 0 0 15px var(--warning-color); /* Shadow turns warning color */
    
    /* ADD THE ANIMATION HERE */
    animation: warningSparkle 1.8s infinite alternate ease-in-out;
}
   
/* Neon Nighthawk specific message styling */
.message.special.neon-nighthawk {
    color: #fffa65; /* neon yellow */
  text-shadow: 0 0 6px #fffa65, 0 0 12px #fffa65;
  font-family: 'Orbitron', sans-serif;
  animation: glow-pulse 3s ease-in-out infinite alternate;
}




/* Keyframes for the futuristic scanline/glitch effect */
@keyframes scanline-effect {
    0% {
        transform: translateY(0);
        clip-path: inset(0 0 0% 0);
        opacity: 1;
    }
    10% {
        transform: translateY(-2px);
        clip-path: inset(0 0 95% 0);
        opacity: 0.8;
    }
    20% {
        transform: translateY(2px);
        clip-path: inset(0 0 0% 0);
        opacity: 1;
    }
    30% {
        transform: translateY(-1px);
        clip-path: inset(0 0 90% 0);
        opacity: 0.9;
    }
    40% {
        transform: translateY(1px);
        clip-path: inset(0 0 0% 0);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        clip-path: inset(0 0 0% 0);
        opacity: 1;
    }
}




/* Keyframes for a subtle pulsing glow */
@keyframes glow-pulse {
    0% { box-shadow: 0 0 8px var(--warning-color), 0 0 15px var(--warning-color) inset; }
    100% { box-shadow: 0 0 15px var(--warning-color), 0 0 25px var(--warning-color) inset; }
}

.message.show {
  opacity: 1;
  visibility: visible;
  z-index: 9999;
}




.message.hidden {
  opacity: 0;
  visibility: hidden;
}




    /* Universal box-sizing for consistent layout */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    /* Body styling for full-screen background and font */
    body {
      font-family: 'Orbitron', monospace;
      background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 50%, var(--background-light) 100%);
      color: var(--text-color);
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    /* Background grid/particle overlay for futuristic feel */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 20% 80%, rgba(0,255,255,0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(255,0,255,0.15) 0%, transparent 40%);
      pointer-events: none;
      z-index: -1;
    }




    /* Dealer Room Background */
    .dealer-room-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: background-image 0.5s ease-in-out;
        z-index: -2;
        background-image: url('https://placehold.co/1920x1080/0a0a0a/00ffff?text=CYBER+BLACKJACK+HUB'); /* Default fallback */
    }




    /* Main game container */
    .container {
      width: 95%;
      max-width: 1200px;
      margin: 20px auto;
      padding: 20px;
      background: rgba(0, 0, 0, 0.7);
      border: 2px solid var(--primary-color);
      box-shadow: 0 0 20px var(--border-glow), inset 0 0 10px rgba(0, 255, 255, 0.3);
      border-radius: 15px; /* More rounded corners */
      position: relative;
      z-index: 1;
      animation: neon-border-pulse 3s infinite alternate;
      display: flex;
      flex-direction: column;
      min-height: 80vh; /* Ensure it takes up enough vertical space */
    }




    /* Neon border pulse animation */
    @keyframes neon-border-pulse {
      from { border-color: var(--primary-color); box-shadow: 0 0 20px var(--border-glow), inset 0 0 10px rgba(0, 255, 255, 0.3); }
      to { border-color: var(--secondary-color); box-shadow: 0 0 30px rgba(255, 0, 255, 0.7), inset 0 0 15px rgba(255, 0, 255, 0.5); }
    }




    /* Headings */
    h1, h2 {
      text-align: center;
      margin-bottom: 20px;
      color: var(--accent-color);
      text-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
      letter-spacing: 2px;
      animation: text-glow 1.5s infinite alternate;
    }
    h3 {
        color: var(--primary-color);
        text-shadow: 0 0 5px var(--primary-color);
        margin-bottom: 10px;
    }




    @keyframes text-glow {
        from { text-shadow: 0 0 10px var(--accent-color); }
        to { text-shadow: 0 0 15px var(--primary-color); }
    }




    /* Hidden class for screen management */
    .hidden {
      display: none !important;
    }




    /* Header styling */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding: 10px 0;
      border-bottom: 1px dashed var(--primary-color);
    }




    .header-left, .header-right {
      display: flex;
      align-items: center;
    }




    .header-info {
      margin-left: 15px;
      font-size: 1.1rem;
      color: var(--primary-color);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    /* XP Bar styling */
    .xp-bar {
      width: 150px;
      height: 15px;
      background-color: #333;
      border: 1px solid var(--primary-color);
      border-radius: 5px;
      overflow: hidden;
      margin-left: 10px;
      position: relative;
    }




    .xp-bar-fill {
      height: 100%;
      background-color: var(--accent-color);
      width: 0%;
      transition: width 0.5s ease-out;
      border-radius: 3px;
    }




    .xp-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        color: #000;
        text-shadow: 0 0 2px var(--primary-color);
    }




    /* Weekly Pass Indicator */
    .pass-indicator {
        margin-left: 15px;
        font-size: 0.9rem;
        color: var(--warning-color);
        background: rgba(255, 215, 0, 0.1);
        padding: 5px 10px;
        border-radius: 5px;
        border: 1px solid var(--warning-color);
        animation: neon-glow-small 1.5s infinite alternate;
    }




    @keyframes neon-glow-small {
        from { box-shadow: 0 0 5px rgba(255, 215, 0, 0.7); }
        to { box-shadow: 0 0 8px rgba(255, 215, 0, 0.9); }
    }








    /* Screen Layouts */
    .screen {
        flex-grow: 1; /* Make screens take available space */
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.5s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }




    .main-menu, .campaign-section, .powerups-section, .shop-screen, .stats-screen, .pvp-lobby {
      display: flex; /* Default to flex for vertical centering */
      flex-direction: column;
      gap: 18px; /* Increased gap */
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .disabled-during-shuffle {
  pointer-events: none !important;
  opacity: 0.6 !important;
}








    /* Universal Button Styling with enhanced base glow */
.menu-button, .bet-button, .game-button, .shop-button, .back-button, .powerup-button {
  background: linear-gradient(145deg, #00aaff, #0077cc);
  color: #fff;
  border: 2px solid var(--primary-color);
  padding: 12px 28px;
  font-family: 'Orbitron', monospace;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth transition for state changes */
  text-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px var(--primary-color); /* Stronger text glow */
  /* box-shadow will be primarily controlled by the continuous animation below */
  position: relative;
  overflow: hidden; /* Crucial for containing pseudo-elements */
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  justify-content: center;
  z-index: 1; /* Ensure button is above its pseudo-elements */
}




.menu-button i, .menu-button span,
.game-button i, .game-button span,
.bet-button i, .bet-button span,
.shop-button i, .shop-button span,
.back-button i, .back-button span,
.powerup-button i, .powerup-button span {
    pointer-events: none; /* Prevent clicks on icon/span from interfering with button */
}




/* Hover effects for buttons */
.menu-button:hover, .bet-button:hover, .game-button:hover, .shop-button:hover, .back-button:hover, .powerup-button:hover {
    background: linear-gradient(145deg, #0077cc, #00aaff); /* Subtle gradient shift on hover */
    border-color: var(--accent-color); /* Electric Green border */
    box-shadow: 0 0 30px var(--primary-color), 0 0 50px rgba(0, 255, 255, 0.8), inset 0 0 15px rgba(0, 255, 255, 0.7); /* Even stronger glow */
    transform: translateY(-5px) scale(1.03); /* Lift and slightly enlarge */
    /* Continuous animations will persist on hover */
}




.menu-button:active, .bet-button:active, .game-button:active, .shop-button:active, .back-button:active, .powerup-button:active {
    transform: translateY(1px) scale(0.97); /* Press down effect */
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.6), inset 0 0 5px rgba(0, 170, 255, 0.3); /* Reduced glow when pressed */
    transition: all 0.1s ease-out; /* Quicker press feedback */
}




/* ------------------------------------------------------------------
   UPDATED: CONTINUOUS LIGHTNING GLOW & LIGHTNING SWEEP (NO THUNDERBURSTS)
   ------------------------------------------------------------------ */




/* Keyframes for the continuous, flickering neon glow (blue and purple)
   Thunderburst flashes have been removed. */
@keyframes continuousLightningGlow {
    0% {
        box-shadow: 0 0 20px rgba(0, 170, 255, 1), /* Blue glow */
                    inset 0 0 10px rgba(0, 170, 255, 0.5);
        filter: brightness(1);
    }
    25% {
        box-shadow: 0 0 25px rgba(0, 200, 255, 1.2), /* Brighter blue */
                    inset 0 0 12px rgba(0, 200, 255, 0.6);
        filter: brightness(1.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(200, 0, 255, 1), /* Purple glow */
                    inset 0 0 10px rgba(200, 0, 255, 0.5);
        filter: brightness(1);
    }
    75% {
        box-shadow: 0 0 25px rgba(255, 0, 255, 1.2), /* Brighter purple */
                    inset 0 0 12px rgba(255, 0, 255, 0.6);
        filter: brightness(1.2);
    }
    100% {
        box-shadow: 0 0 20px rgba(0, 170, 255, 1), /* Back to blue */
                    inset 0 0 10px rgba(0, 170, 255, 0.5);
        filter: brightness(1);
    }
}




/* Keyframes for a continuous lightning sweep across the button (unchanged) */
@keyframes continuousLightningSweep {
    0% {
        transform: translateX(-100%) skewX(-30deg);
        opacity: 0.1;
    }
    25% {
        opacity: 0.3; /* Subtle flash */
    }
    50% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0.1;
    }
    75% {
        opacity: 0.3; /* Subtle flash */
    }
    100% {
        transform: translateX(-100%) skewX(-30deg);
        opacity: 0.1;
    }
}




.menu-button, .bet-button, .game-button, .shop-button, .back-button, .powerup-button {
    /* Apply the continuous lightning glow (without thunderbursts) */
    animation: continuousLightningGlow 5s infinite ease-in-out;
}




/* Pseudo-element for the continuous lightning sweep effect (unchanged) */
.menu-button::before, .bet-button::before, .game-button::before, .shop-button::before, .back-button::before, .powerup-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 25%; /* Width of the sweep line */
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3), /* Subtle white light */
        rgba(0, 255, 255, 0.2), /* Cyan edge */
        transparent
    );
    transform: translateX(-100%) skewX(-30deg); /* Start off-left and skewed */
    pointer-events: none;
    z-index: 0; /* Behind button content */
    animation: continuousLightningSweep 4s infinite linear; /* Continuous sweep */
    animation-delay: calc(var(--delay-seed, 0) * -1s); /* Stagger start for variety */
}








/* ---------------------------------------------
   Dramatic Bolt Enhancement (Spark/Impact) - On Hover
   --------------------------------------------- */




/* Keyframes for the dramatic bolt/spark burst (remains unchanged) */
@keyframes dramaticBoltSpark {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1; /* Sudden bright flash */
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0; /* Expands and fades out */
    }
}




/* Pseudo-element for the dramatic bolt spark (triggers on hover) */
.menu-button::after, .bet-button::after, .game-button::after, .shop-button::after, .back-button::after, .powerup-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(0, 255, 255, 0.7) 30%,
        rgba(0, 100, 255, 0.4) 60%,
        transparent 100%
    );
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 2; /* Ensure it's above button content */
}




/* Apply the dramatic bolt spark animation on hover */
.menu-button:hover::after, .bet-button:hover::after, .game-button:hover::after, .shop-button:hover::after, .back-button:hover::after, .powerup:hover::after {
    animation: dramaticBoltSpark 0.6s ease-out forwards; /* Quick, dramatic burst on hover */
}




    .menu-button::before, .bet-button::before, .game-button::before, .shop-button::before, .back-button::before, .powerup-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
        z-index: 0;
    }




    .menu-button:hover::before, .bet-button:hover::before, .game-button:hover::before, .shop-button:hover::before, .back-button:hover::before, .powerup-button:hover::before {
        width: 200%;
        height: 200%;
        opacity: 1;
    }




    .menu-button:hover, .bet-button:hover, .game-button:hover, .shop-button:hover, .back-button:hover, .powerup-button:hover {
      background: linear-gradient(145deg, var(--primary-color), #00bbff);
      color: #000;
      border-color: var(--accent-color);
      box-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--secondary-color);
      transform: translateY(-3px) scale(1.02);
      text-shadow: 0 0 10px rgba(0,0,0,0.8);
    }
    /* Button active state for press effect */
    .menu-button:active, .bet-button:active, .game-button:active, .shop-button:active, .back-button:active, .powerup-button:active {
        transform: translateY(0px) scale(0.98);
        box-shadow: 0 0 5px var(--primary-color);
        background: linear-gradient(145deg, #0077cc, #00aaff);
        transition: all 0.1s ease-out;
    }




    .menu-button:disabled, .game-button:disabled, .powerup-button:disabled {
      background: #333;
      border-color: #555;
      color: #888;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
      filter: grayscale(80%);
      opacity: 0.7;
    }
    .menu-button:disabled:hover::before, .game-button:disabled:hover::before, .powerup-button:disabled:hover::before {
        width: 0; height: 0; opacity: 0;
    }




    /* Betting Section */
    .betting-section, .game-area {
      text-align: center;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }




    .bet-input {
      background: rgba(0, 0, 0, 0.6);
      border: 2px solid var(--primary-color);
      color: var(--accent-color);
      padding: 10px;
      font-family: 'Orbitron', monospace;
      font-size: 1.1rem;
      border-radius: 8px;
      margin-bottom: 25px;
      width: 180px;
      text-align: center;
      box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.4);
    }




    .bet-options {
      display: flex;
      justify-content: center;
      gap: 15px; /* Increased gap */
      margin-top: 15px;
      margin-bottom: 25px;
    }
    .bet-options .bet-button {
        background: linear-gradient(145deg, #4CAF50, #2E8B57); /* Greenish for positive bets */
        border-color: #00ff88;
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
        font-size: 1rem;
        padding: 10px 20px;
        min-width: unset; /* Allow smaller buttons */
    }
    .bet-options .bet-button:hover {
        background: linear-gradient(145deg, #00ff88, #4CAF50);
        box-shadow: 0 0 15px #00ff88;
        color: #000;
    }
    .bet-options .bet-button:first-child, .bet-options .bet-button:nth-child(2) {
        background: linear-gradient(145deg, #f44336, #b71c1c); /* Reddish for negative bets */
        border-color: #ff0000;
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    }
    .bet-options .bet-button:first-child:hover, .bet-options .bet-button:nth-child(2):hover {
        background: linear-gradient(145deg, #ff0000, #f44336);
        box-shadow: 0 0 15px #ff0000;
        color: #000;
    }








    /* Game Area */
    .game-board {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px; /* Increased gap */
      margin-top: 20px;
      width: 100%;
    }




    .player-section, .dealer-section {
      width: 95%; /* Wider sections */
      max-width: 900px;
      text-align: center;
      background: rgba(0, 0, 0, 0.5);
      padding: 20px; /* Increased padding */
      border-radius: 10px;
      border: 2px solid var(--primary-color);
      box-shadow: inset 0 0 8px var(--primary-color);
    }




    .hand-display {
      display: flex;
      justify-content: center;
      min-height: 140px; /* To prevent layout shift and accommodate larger cards */
      gap: 15px; /* Increased gap between cards */
      flex-wrap: wrap;
      padding: 10px;
    }




    .card {
      width: 90px; /* Slightly larger cards */
      height: 130px;
      background-color: #fff;
      border: 2px solid #00aaff;
      border-radius: 10px; /* More rounded */
      box-shadow: 0 0 10px rgba(0, 170, 255, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      font-weight: bold;
      position: relative;
      transition: transform 0.6s ease; /* Slower flip animation */
      transform-style: preserve-3d;
      perspective: 1000px;
    }
    
    .card-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s;
    }




    .card.flipped .card-inner {
      transform: rotateY(180deg);
    }




    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 8px; /* Increased padding */
      box-sizing: border-box;
      font-family: Arial, sans-serif; /* Standard font for card numbers/suits */
    }




    .card-front {
      background-color: #fff;
      color: #000;
      border: 1px solid #00aaff;
    }




    .card-front span {
      font-size: 1.4rem; /* Larger font for rank */
      line-height: 1;
    }




    .card-front span:first-child { align-self: flex-start; }
    .card-front span:last-child { align-self: flex-end; }
    .card-front span:nth-child(2) { font-size: 2.5rem; } /* Larger suit symbol */




    .card-front.red { color: #ff3333; } /* Brighter red */
    .card-front.black { color: #000000; }








    .card-back {
      background-color: var(--card-back-color); /* Dynamic color */
      transform: rotateY(180deg);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 1rem; /* Larger text */
      text-shadow: 0 0 8px rgba(255,255,255,0.7);
      border: 1px solid var(--primary-color);
      box-shadow: inset 0 0 8px rgba(0,255,255,0.8);
      font-family: 'Orbitron', monospace; /* Keep Orbitron for card back text */
    }
    
    .game-controls {
      display: flex;
      justify-content: center;
      gap: 20px; /* Increased gap */
      margin-top: 30px;
      flex-wrap: wrap; /* Responsive wrapping */
    }
    .game-controls .game-button {
        background: linear-gradient(145deg, #0088cc, #0066aa);
        border-color: #00ffff;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
        font-size: 1.1rem;
        padding: 12px 25px;
    }
    .game-controls .game-button:hover {
        background: linear-gradient(145deg, #00ffff, #0088cc);
        box-shadow: 0 0 15px #00ffff;
    }








    .message {
      margin-top: 25px; /* Increased margin */
      font-size: 1.4rem; /* Larger message */
      font-weight: bold;
      padding: 12px 20px;
      border-radius: 8px;
      animation: pulse 1s infinite alternate, fadeIn 0.5s ease-out; /* Added fadeIn */
      box-shadow: 0 0 15px rgba(255,255,255,0.3);
    }




    .message.win {
        color: var(--accent-color);
        text-shadow: 0 0 10px var(--accent-color);
        border: 2px solid var(--accent-color);
    }
    .message.lose {
        color: var(--danger-color);
        text-shadow: 0 0 10px var(--danger-color);
        border: 2px solid var(--danger-color);
    }
    .message.tie {
        color: var(--warning-color);
        text-shadow: 0 0 10px var(--warning-color);
        border: 2px solid var(--warning-color);
    }
    .message.special { /* For unique ability messages */
        color: var(--secondary-color);
        text-shadow: 0 0 10px var(--secondary-color);
        border: 2px solid var(--secondary-color);
    }








  @keyframes pulse {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.03); opacity: 0.95; }
}








#game-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  text-align: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  overflow: hidden; /* Important for containing pseudo-elements */
  position: relative; /* Needed for absolute positioning of pseudo-elements */
}




#game-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
}




/* The .hidden class is redundant if opacity: 0 and visibility: hidden are default */
/* #game-overlay.hidden {
  opacity: 0;
  visibility: hidden;
} */




/* -----------------------------------------------------------------------------------
   DRAMATIC LIGHTNING ANIMATION IMPROVEMENTS
   ----------------------------------------------------------------------------------- */




@keyframes dramaticLightningFlash {
    0%, 100% { /* Starts and ends dark/subtle */
        background-color: rgba(0, 0, 0, 0.9);
        filter: brightness(1);
    }
    5% { /* Quick, intense blue flash */
        background-color: rgba(0, 50, 255, 0.7);
        filter: brightness(3);
    }
    8% { /* Brief, very bright white flash */
        background-color: rgba(255, 255, 255, 0.9);
        filter: brightness(5);
    }
    10% { /* Recede to darker blue */
        background-color: rgba(0, 20, 100, 0.8);
        filter: brightness(1.5);
    }
    12% { /* Another sharp white flash */
        background-color: rgba(255, 255, 255, 0.8);
        filter: brightness(4);
    }
    15% { /* Dark again */
        background-color: rgba(0, 0, 0, 0.9);
        filter: brightness(1);
    }
    17% { /* Subtle blue glow */
        background-color: rgba(0, 10, 50, 0.8);
        filter: brightness(1.2);
    }
    20% { /* A softer, lingering blue flash */
        background-color: rgba(50, 150, 255, 0.6);
        filter: brightness(2.5);
    }
    22% { /* Return to subtle */
        background-color: rgba(0, 0, 0, 0.9);
        filter: brightness(1);
    }
    25% { /* Final sharp crack */
        background-color: rgba(255, 255, 255, 0.95);
        filter: brightness(6);
    }
    28% { /* Fade out to dark */
        background-color: rgba(0, 0, 0, 0.9);
        filter: brightness(1);
    }
    /* The animation will then loop or hold based on animation-fill-mode */
}




@keyframes blueParticleBurst {
    0% {
        transform: translate(0, 0) scale(0.1);
        opacity: 0;
        box-shadow: 0 0 5px rgba(0, 255, 255, 0);
    }
    5% { /* Appear quickly */
        opacity: 1;
        transform: translate(calc(var(--rand-x) * 1px), calc(var(--rand-y) * 1px)) scale(0.5);
        box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.8), 0 0 30px 10px rgba(0, 150, 255, 0.6);
    }
    100% { /* Disperse and fade out */
        opacity: 0;
        transform: translate(calc(var(--rand-x-end) * 1px), calc(var(--rand-y-end) * 1px)) scale(1);
        box-shadow: 0 0 50px 20px rgba(0, 255, 255, 0);
    }
}








#game-overlay.lightning-effect {
    animation: dramaticLightningFlash 4s ease-out forwards; /* Shorter, more impactful */
}




/* Pseudo-elements for blue particles */
#game-overlay.lightning-effect::before,
#game-overlay.lightning-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0px; /* Start small */
    height: 0px; /* Start small */
    border-radius: 50%;
    background-color: var(--primary-color); /* Cyber Blue */
    filter: blur(2px);
    z-index: 10000;
    animation: blueParticleBurst 1.5s ease-out infinite; /* Loop for continuous particles */
    animation-delay: calc(var(--delay) * -1s); /* Stagger particles */
}




/* Randomize particle positions and delays */
#game-overlay.lightning-effect::before {
    --rand-x: -100;
    --rand-y: -100;
    --rand-x-end: 200;
    --rand-y-end: 200;
    --delay: 0.2;
}




#game-overlay.lightning-effect::after {
    --rand-x: 100;
    --rand-y: 100;
    --rand-x-end: -200;
    --rand-y-end: -200;
    --delay: 0.8;
}
    /* END NEW CODE */




    .post-game-controls {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
        flex-wrap: wrap;
    }
    .post-game-controls .game-button {
        background: linear-gradient(145deg, #6200EE, #3700B3); /* Purple for risk/new round */
        border-color: #BB86FC;
        box-shadow: 0 0 10px rgba(187, 134, 252, 0.7);
    }
    .post-game-controls .game-button:hover {
        background: linear-gradient(145deg, #BB86FC, #6200EE);
        box-shadow: 0 0 15px #BB86FC;
    }








    /* Risk Game Section specific styling */
    .risk-game-section {
        margin-top: 25px;
        border-top: 2px dashed var(--primary-color);
        padding-top: 20px;
        text-align: center;
    }




    .risk-game-section .game-button {
        background-color: #ffaa00;
        border-color: #ffff00;
        color: #333;
    }
    .risk-game-section .game-button:hover {
        background-color: #ffff00;
        border-color: #ffaa00;
        color: #000;
    }




    /* Campaign Section */
    .dealers-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Larger dealer cards */
        gap: 25px; /* Increased gap */
        margin-top: 25px;
        width: 100%;
        max-width: 1000px;
    }




    .dealer-card {
        background: rgba(0, 0, 0, 0.6);
        border: 3px solid; /* Thicker border set by JS */
        border-radius: 15px; /* More rounded */
        padding: 20px; /* Increased padding */
        text-align: center;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }




    .dealer-card:hover:not(.locked) {
        transform: translateY(-8px) scale(1.03); /* More pronounced lift */
        box-shadow: 0 0 20px currentColor, inset 0 0 10px currentColor; /* Uses border color for glow */
    }




    .dealer-card.locked {
        opacity: 0.4; /* Slightly more opaque for visibility */
        cursor: not-allowed;
        filter: grayscale(90%);
        border-color: #555 !important;
        box-shadow: none !important;
        transform: none !important;
    }




    .dealer-card .locked-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--danger-color);
        font-weight: bold;
        text-shadow: 0 0 8px var(--danger-color);
        font-size: 1.3rem; /* Larger lock text */
        gap: 8px; /* Increased gap */
        border-radius: 15px;
        z-index: 10;
        text-align: center;
        padding: 10px;
    }
    .dealer-card .locked-overlay span:last-child {
        font-size: 1rem;
        color: #ff9999;
    }




    /* Dealer Avatar within campaign cards */
    .dealer-avatar {
        margin-bottom: 12px;
        border-radius: 50%;
        border: 4px solid; /* Thicker border */
        width: 90px; /* Larger avatar */
        height: 90px;
        margin: 0 auto 15px;
        overflow: hidden;
        box-shadow: 0 0 10px currentColor; /* Glow based on border color */
        transition: box-shadow 0.3s ease;
    }
    .dealer-card:hover:not(.locked) .dealer-avatar {
        box-shadow: 0 0 15px currentColor, inset 0 0 5px currentColor;
    }




    .dealer-avatar img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
    }




    .dealer-name {
        font-size: 1.6rem; /* Larger name */
        font-weight: bold;
        margin-bottom: 8px;
        color: var(--primary-color);
        text-shadow: 0 0 8px var(--primary-color);
    }




    .boss-dealer-name {
        animation: boss-neon-pulse 2s infinite alternate;
    }




    @keyframes boss-neon-pulse {
        from { color: var(--warning-color); text-shadow: 0 0 12px var(--warning-color); }
        to { color: var(--secondary-color); text-shadow: 0 0 18px var(--secondary-color); }
    }




    .dealer-type {
        font-size: 1rem;
        opacity: 0.9;
        margin-bottom: 12px;
        color: var(--text-color);
    }




    .dealer-description {
        font-size: 0.95rem;
        margin-bottom: 18px;
        color: #ccc;
        flex-grow: 1; /* Allow description to take space */
    }




    .dealer-stats {
        display: flex;
        justify-content: space-around;
        font-size: 0.9rem;
        border-top: 1px dashed rgba(0, 255, 255, 0.5);
        padding-top: 12px;
        width: 100%;
        margin-top: 10px;
    }




    .dealer-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .dealer-stat-label {
        font-weight: bold;
        color: var(--accent-color);
    }
    .dealer-stat-value {
        margin-top: 5px;
        color: var(--primary-color);
    }
    .dealer-ability-info {
        font-size: 0.8rem !important; /* Smaller for ability text within card */
        color: #88ffff;
        margin-top: 12px;
        text-align: center;
        max-height: 60px; /* Limit height to prevent overflow */
        overflow: hidden;
        text-overflow: ellipsis;
    }




    /* Current Dealer Info (in betting/game area) */
    .current-dealer-info {
        display: flex;
        align-items: center;
        gap: 20px; /* Increased gap */
        background: rgba(0, 0, 0, 0.6);
        border: 3px solid var(--primary-color);
        padding: 15px 30px; /* Increased padding */
        border-radius: 10px;
        margin-top: 15px;
        margin-bottom: 25px; /* Added bottom margin */
        box-shadow: 0 0 15px var(--border-glow);
        width: fit-content; /* Adjust width to content */
        margin-left: auto;
        margin-right: auto;
    }
    .current-dealer-info .current-dealer-avatar {
        font-size: 2.8rem; /* Larger icon/emoji for current dealer */
        border-radius: 50%;
        border: 3px solid; /* Thicker border */
        width: 70px; /* Larger avatar */
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: 0 0 10px currentColor;
    }
    .current-dealer-info .current-dealer-avatar img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
    }
    .current-dealer-info .current-dealer-name {
        font-size: 1.8rem;
        font-weight: bold;
        color: var(--accent-color);
        text-shadow: 0 0 8px var(--accent-color);
    }








    /* Shop Screen */
    .shop-section {
        display: flex;
        flex-direction: column;
        gap: 25px;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }




    .shop-category {
        margin-bottom: 25px;
    }




    .shop-category h3 {
        text-align: center;
        color: var(--secondary-color);
        text-shadow: 0 0 10px var(--secondary-color);
        margin-bottom: 20px;
        border-bottom: 2px dashed var(--secondary-color);
        padding-bottom: 8px;
        font-size: 1.6rem;
    }




    .shop-items-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 20px;
    }




    .shop-item {
        background: rgba(0, 0, 0, 0.7);
        border: 2px solid var(--primary-color);
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        font-family: 'Orbitron', monospace;
        color: var(--primary-color);
        font-size: 1.05rem;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100px;
    }




    .shop-item:hover:not(.purchased):not(.active-skin):not(.pass-active) {
        background: rgba(0, 170, 255, 0.3);
        box-shadow: 0 0 15px var(--primary-color);
        transform: translateY(-5px);
    }




    .shop-item.purchased {
        border-color: var(--accent-color);
        color: var(--accent-color);
        opacity: 0.9;
        cursor: default;
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
    }




    .shop-item.active-skin, .shop-item.pass-active {
        border-color: var(--secondary-color);
        color: var(--secondary-color);
        box-shadow: 0 0 20px var(--secondary-color), inset 0 0 10px var(--secondary-color);
        font-weight: bold;
        transform: scale(1.03);
    }




    .shop-item span {
        font-size: 0.9rem;
        color: #aaa;
        display: block;
        margin-top: 5px;
    }




    /* Power-up Controls in Game Area */
    .powerup-controls {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 25px;
        flex-wrap: wrap;
    }
    .powerup-controls .powerup-button {
        background: linear-gradient(145deg, #ff6600, #cc5500);
        border-color: #ff9900;
        color: #eee;
        box-shadow: 0 0 10px rgba(255, 153, 0, 0.7);
        font-size: 1rem;
        padding: 10px 20px;
        min-width: unset;
    }
    .powerup-controls .powerup-button:hover {
        background: linear-gradient(145deg, #ff9900, #ff6600);
        border-color: #ff6600;
        color: #000;
    }




    /* Brawl Mode HUD */
    .brawl-hud {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        width: 100%;
        max-width: 800px;
        gap: 20px;
        flex-wrap: wrap;
    }




    .hp-bar-container {
        flex: 1; /* Distribute space evenly */
        min-width: 250px;
        background: rgba(0, 0, 0, 0.6);
        border: 2px solid var(--primary-color);
        border-radius: 10px;
        padding: 12px;
        text-align: center;
        box-shadow: inset 0 0 8px var(--primary-color);
    }




    .hp-bar-label {
        font-size: 1.05rem;
        margin-bottom: 8px;
        color: var(--accent-color);
    }




    .hp-bar {
        width: 100%;
        height: 25px; /* Thicker HP bar */
        background-color: #333;
        border: 1px solid var(--accent-color);
        border-radius: 5px;
        overflow: hidden;
    }




    .hp-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #00ff00, #00aa00); /* Green gradient for player */
        width: 100%;
        transition: width 0.3s ease-out, background-color 0.3s ease-out;
    }




    .hp-bar-fill.dealer {
        background: linear-gradient(90deg, #00aaff, #0066cc); /* Blue gradient for dealer */
    }




    .hp-text-display {
        font-size: 1.2rem;
        font-weight: bold;
        margin-top: 8px;
        color: var(--primary-color);
        text-shadow: 0 0 5px var(--primary-color);
    }




    .brawl-special-controls {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 25px;
        flex-wrap: wrap;
    }




    .charge-bar-container {
        width: 180px; /* Wider charge bars */
        height: 20px; /* Thicker charge bars */
        background-color: #333;
        border: 1px solid var(--secondary-color);
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        box-shadow: inset 0 0 5px var(--secondary-color);
    }




    .charge-bar-fill {
        height: 100%;
        background-color: var(--secondary-color);
        width: 0%;
        transition: width 0.5s ease-out;
        border-radius: 3px;
    }




    .charge-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        color: #000;
        text-shadow: 0 0 2px var(--secondary-color);
    }
    
    #special-attack-btn {
        background: linear-gradient(145deg, #ff00ff, #cc00cc);
        border-color: #ff00ff;
        color: #000;
        box-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
    }
    #special-attack-btn:hover {
        background: linear-gradient(145deg, #00ffff, #ff00ff);
        border-color: #ff00ff;
        color: #000;
    }
    #ultimate-btn {
        background: linear-gradient(145deg, #ff0000, #cc0000);
        border-color: #ff5500;
        color: #fff;
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    }
    #ultimate-btn:hover {
        background: linear-gradient(145deg, #ff5500, #ff0000);
        border-color: #ff0000;
        color: #000;
    }




    /* Stats Screen */
    .stats-container {
        display: flex;
        flex-direction: column;
        gap: 18px; /* Increased gap */
        align-items: center;
        width: 100%;
    }
    .stats-item {
        font-size: 1.15rem;
        padding: 10px;
        border: 1px dashed var(--primary-color);
        border-radius: 8px;
        width: 100%;
        max-width: 450px; /* Wider items */
        text-align: center;
        background: rgba(0, 0, 0, 0.4);
        box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.3);
    }
    .stats-item span {
        color: var(--accent-color);
        font-weight: bold;
        margin-left: 10px;
    }
    .leaderboard-list {
        list-style: none;
        padding: 0;
        margin-top: 25px;
        width: 100%;
        max-width: 550px; /* Wider list */
    }
    .leaderboard-list li {
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid var(--secondary-color);
        padding: 12px;
        margin-bottom: 10px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
    }




    /* PvP Lobby */
    .pvp-lobby {
        text-align: center;
    }
    .pvp-status {
        font-size: 1.3rem;
        margin-bottom: 25px;
        color: var(--accent-color);
        text-shadow: 0 0 8px var(--accent-color);
    }




    /* Game Deck for animations */
    .game-deck {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90px; /* Match card size */
        height: 130px;
        background-color: var(--card-back-color);
        border: 2px solid var(--primary-color);
        border-radius: 10px;
        box-shadow: 0 0 15px var(--border-glow);
        z-index: 0; /* Behind other elements */
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
        opacity: 0.9;
        transition: all 0.3s ease-out; /* Smooth transition for hidden state */
    }




    .game-deck.shuffle-animation {
        animation: shuffle-deck 0.7s ease-out; /* Slower, more pronounced shuffle */
    }




    @keyframes shuffle-deck {
        0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
        25% { transform: translate(-60%, -50%) rotate(10deg) scale(1.05); }
        50% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
        75% { transform: translate(-40%, -50%) rotate(-10deg) scale(1.05); }
        100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    }




    /* Screen Shake Effect */
    body.screen-shake {
        animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
    }




    @keyframes shake {
        10%, 90% { transform: translate3d(-2px, 0, 0); } /* More intense shake */
        20%, 80% { transform: translate3d(4px, 0, 0); }
        30%, 70% { transform: translate3d(-8px, 0, 0); }
        40%, 60% { transform: translate3d(8px, 0, 0); }
        50% { transform: translate3d(-8px, 0, 0); }
    }




    /* Particle Effects (for JS generated elements) */
    .particle {
        position: fixed;
        background-color: #fff; /* Default, overridden by JS */
        border-radius: 50%;
        animation: fadeOut 2s forwards; /* Increased duration */
        pointer-events: none;
        z-index: 9999;
        box-shadow: 0 0 8px currentColor; /* Particle glow */
    }




    @keyframes fadeOut {
        from { opacity: 1; transform: scale(1); }
        to { opacity: 0; transform: scale(0); }
    }




    .rogue-mode-card {
        border-color: var(--secondary-color) !important;
        box-shadow: 0 0 20px var(--secondary-color) !important;
    }




    .rogue-mode-card .dealer-name {
        animation: boss-neon-pulse 1.5s infinite alternate;
    }




    /* Responsive adjustments */
    @media (max-width: 768px) {
        .container {
            width: 98%;
            margin: 10px auto;
            padding: 15px;
            min-height: 90vh;
        }
        .header {
            flex-direction: column;
            gap: 10px;
        }
        .header-left, .header-right {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
        .header-info {
            margin-left: 0;
            font-size: 1rem;
            width: 100%;
            justify-content: center;
        }
        .xp-bar {
            width: 100%;
            margin-left: 0;
        }
        .main-menu, .campaign-section, .shop-screen, .stats-screen, .pvp-lobby {
            gap: 12px;
            padding: 10px;
        }
        .menu-button, .bet-button, .game-button, .shop-button, .back-button, .powerup-button {
            font-size: 1rem;
            padding: 10px 20px;
            min-width: 180px;
        }
        .hand-display {
            min-height: 100px;
            gap: 8px;
        }
        .card {
            width: 70px;
            height: 100px;
            border-radius: 8px;
        }
        .card-front span {
            font-size: 1rem;
        }
        .card-front span:nth-child(2) {
            font-size: 2rem;
        }
        .message {
            font-size: 1.1rem;
            padding: 8px 15px;
        }
        .game-controls, .post-game-controls, .powerup-controls, .brawl-special-controls {
            gap: 10px;
            margin-top: 15px;
        }
        .dealer-card {
            padding: 15px;
        }
        .dealer-name {
            font-size: 1.4rem;
        }
        .dealer-avatar {
            width: 70px;
            height: 70px;
        }
        .current-dealer-info {
            flex-direction: column;
            gap: 10px;
            padding: 10px 15px;
            margin-bottom: 15px;
        }
        .current-dealer-info .current-dealer-avatar {
            width: 50px;
            height: 50px;
            font-size: 2rem;
        }
        .current-dealer-info .current-dealer-name {
            font-size: 1.4rem;
        }
        .shop-items-grid, .dealers-grid {
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px;
        }
        .hp-bar-container {
            min-width: 180px;
        }
        .charge-bar-container {
            width: 120px;
        }
        @keyframes lightningFlash {
        0%   { background-color: rgba(255,255,255,0.8); }
       20%  { background-color: rgba(255,255,255,0); }
       40%  { background-color: rgba(255,255,255,0.4); }
       60%  { background-color: rgba(255,255,255,0); }
       100% { background-color: rgba(255,255,255,0); }
       }




        #game-overlay.lightning-effect {
         animation: lightningFlash 1.5s ease-in-out;
       } 


#mock-ad-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.5s ease;
}
.ad-screen {
  background: #1a1a2e;
  border: 3px solid #ff00ff;
  box-shadow: 0 0 30px #ff00ff;
  padding: 40px;
  text-align: center;
  border-radius: 15px;
  animation: neon-pulse 1.5s infinite alternate;
}
@keyframes neon-pulse {
  from { transform: scale(1); box-shadow: 0 0 20px #ff00ff; }
  to { transform: scale(1.05); box-shadow: 0 0 40px #ff00ff; }
}
}


/* FUTURISTIC RESHUFFLE MESSAGE */
.futuristic-reshuffle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 18px 32px;
    background: rgba(0, 10, 25, 0.85);
    border: 2px solid #00eaff;
    border-radius: 12px;
    color: #00eaff;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-shadow: 0 0 8px #00eaff, 0 0 16px #0088ff;
    box-shadow: 0 0 20px #00eaff, inset 0 0 20px #004466;
    z-index: 9999;
    opacity: 0;
    animation: holoFade 2.2s ease-out forwards, holoFlicker 0.15s infinite alternate;
}

/* Slide + fade animation */
@keyframes holoFade {
    0% {
        opacity: 0;
        transform: translate(-50%, -60%) scale(0.9);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -40%) scale(1.05);
    }
}

/* Hologram flicker */
@keyframes holoFlicker {
    0% { opacity: 0.92; }
    100% { opacity: 1; }
 }

 .venom-card.fade-out {
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

.venom-card.fade-out {
    opacity: 0;
}