@layer base{
  html,body,button,input,select,textarea{font-family:'Rubik',sans-serif;}
  html,body{margin:0;padding:0;height:100%;overscroll-behavior:none !important;overscroll-behavior-y:none !important;-webkit-overscroll-behavior:none !important;}
  main>:first-child{margin-top:0!important;}
  main>:last-child{margin-bottom:0!important;}
}
::-webkit-scrollbar{display:none;}

/* Shimmer Animation */
@keyframes shimmer-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.animate-shimmer {
  position: relative;
  overflow: hidden;
}
.animate-shimmer::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 218, 176, 0.28) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer-sweep 3.5s infinite ease-in-out;
  pointer-events: none;
}

/* Ambient Center Breathing Spotlight */
@keyframes felt-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.06); }
}
.ambient-felt-glow {
  animation: felt-pulse 6s infinite ease-in-out;
}

/* Radar Ripple for Live Dots */
@keyframes radar-wave {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(2.8); opacity: 0; }
}
.live-radar {
  position: relative;
}
.live-radar::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 9999px;
  background-color: inherit;
  animation: radar-wave 1.8s infinite cubic-bezier(0, 0, 0.2, 1);
  pointer-events: none;
}

/* Floating Selected Card Bobbing */
@keyframes card-float {
  0%, 100% { transform: translateY(-16px) scale(1.05); }
  50% { transform: translateY(-22px) scale(1.05); }
}
.card-selected-anim {
  animation: card-float 2.2s infinite ease-in-out !important;
  box-shadow: 0 0 25px rgba(255, 186, 70, 0.75), 0 16px 26px rgba(0,0,0,0.85) !important;
  border-color: #ffba46 !important;
}

/* Gold Pulse for Timer */
@keyframes timer-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(202, 138, 4, 0); }
  50% { box-shadow: 0 0 16px rgba(255, 186, 70, 0.45); }
}
.timer-pulse-active {
  animation: timer-glow 2s infinite ease-in-out;
}

/* Dynamic Flight Overlay for Played Card */
.flying-play-card {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 24px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 186, 70, 0.5);
  border-radius: 0.75rem;
  transition: transform 0.65s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.65s cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: center center;
}

/* Pickup Flying Cards (flying to hand) */
.flying-pickup-card {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.85), 0 0 20px rgba(239, 68, 68, 0.6);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease-out;
}

/* Sound Wave Flash Ripple */
@keyframes audio-pulse-ring {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
.sound-indicator-wave {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 186, 70, 0.8);
  animation: audio-pulse-ring 0.65s ease-out forwards;
  z-index: 90;
}

/* Reset Golden Sparkles */
@keyframes gold-sparkle-drift {
  0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
  40% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(90deg); }
  100% { transform: translate(calc(var(--dx) * 1.5), calc(var(--dy) * 1.5)) scale(0) rotate(180deg); opacity: 0; }
}
.gold-sparkle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #fde047 0%, #ca8a04 80%, transparent 100%);
  animation: gold-sparkle-drift 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 85;
}

/* Card Shake on Illegal Click */
@keyframes card-error-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px) rotate(-3deg); }
  40%, 80% { transform: translateX(8px) rotate(3deg); }
}
.animate-shake {
  animation: card-error-shake 0.35s ease-in-out !important;
}

/* Burn Violent Quake */
@keyframes violent-quake {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  15% { transform: translate(-6px, 4px) rotate(-6deg) scale(1.08); }
  30% { transform: translate(7px, -5px) rotate(7deg) scale(1.12); }
  45% { transform: translate(-8px, -4px) rotate(-8deg) scale(1.16); }
  60% { transform: translate(8px, 5px) rotate(8deg) scale(1.2); }
  75% { transform: translate(-5px, 6px) rotate(-5deg) scale(1.22); }
  90% { transform: translate(4px, -3px) rotate(3deg) scale(1.24); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1.25); }
}
.burn-violent-shake {
  animation: violent-quake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite !important;
}

@keyframes flame-surge {
  0% { transform: scale(0.6) translateY(20px); opacity: 0; filter: blur(4px); }
  30% { transform: scale(1.2) translateY(-10px); opacity: 1; filter: blur(0px); }
  70% { transform: scale(1.35) translateY(-25px); opacity: 0.9; }
  100% { transform: scale(1.6) translateY(-45px); opacity: 0; filter: blur(8px); }
}
.flame-burst-aura {
  position: absolute;
  inset: -35px;
  background: radial-gradient(circle at 50% 60%, rgba(254, 240, 138, 0.95) 0%, rgba(249, 115, 22, 0.85) 40%, rgba(220, 38, 38, 0.7) 70%, transparent 95%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 55;
  animation: flame-surge 0.85s ease-out forwards;
}

/* Ember Fire Sparks */
.ember-spark {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 70;
  animation: ember-float var(--dur, 0.8s) cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
}
@keyframes ember-float {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  50% { opacity: 0.9; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.1); opacity: 0; }
}

/* Graveyard Box Pulse */
@keyframes graveyard-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(220, 38, 38, 0.2); }
  50% { box-shadow: 0 0 30px rgba(249, 115, 22, 0.7), inset 0 0 15px rgba(234, 88, 12, 0.5); border-color: #f97316; }
}
.graveyard-active-burn {
  animation: graveyard-glow 1.2s ease-in-out infinite;
}

/* Dramatic Burn Announcement Banner */
@keyframes burn-banner-pop {
  0% { transform: translate(-50%, -60%) scale(0.65); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(0.98); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.burn-banner-anim {
  animation: burn-banner-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@media (prefers-reduced-motion: reduce) {
  *, ::after, ::before {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


    :root {
      /* Default Desktop (Height >= 760px) - Enlarged Cards & Luxe Theme */
      --card-w: 78px;
      --card-h: 112px;
      --card-radius: 9px;
      --card-rank-size: 15.5px;
      --card-suit-corner: 13px;
      --card-suit-center: 28px;

      --card-sm-w: 62px;
      --card-sm-h: 88px;
      --card-sm-radius: 8px;
      --card-sm-rank-size: 14px;
      --card-sm-suit-corner: 12px;
      --card-sm-suit-center: 24px;

      --opp-video-w: 114px;
      --opp-video-h: 114px;
      --local-video-w: 114px;
      --local-video-h: 114px;

      --center-card-w: 82px;
      --center-card-h: 118px;
      --pile-box-min-w: 145px;
      --pile-box-min-h: 122px;
      --graveyard-w: 62px;
      --graveyard-h: 82px;

      --hand-container-min-h: 108px;
      --hand-container-max-h: 132px;
      --action-btn-py: 0.6rem;
      --action-btn-text: 0.95rem;

      --header-h: 2.75rem; /* 44px */
      --hud-py: 0.25rem; /* 4px */
      --baize-pad: 0.5rem; /* 8px */
    }

    /* Standard Laptops & Tablets Landscape (Height <= 760px) - Enlarged Cards */
    @media (max-height: 760px) {
      :root {
        --card-w: 64px;
        --card-h: 92px;
        --card-radius: 8px;
        --card-rank-size: 13.5px;
        --card-suit-corner: 11.5px;
        --card-suit-center: 22px;

        --card-sm-w: 52px;
        --card-sm-h: 74px;
        --card-sm-radius: 7px;
        --card-sm-rank-size: 12.5px;
        --card-sm-suit-corner: 11px;
        --card-sm-suit-center: 19px;

        --opp-video-w: 98px;
        --opp-video-h: 98px;
        --local-video-w: 98px;
        --local-video-h: 98px;

        --center-card-w: 68px;
        --center-card-h: 98px;
        --pile-box-min-w: 122px;
        --pile-box-min-h: 102px;
        --graveyard-w: 48px;
        --graveyard-h: 64px;

        --hand-container-min-h: 88px;
        --hand-container-max-h: 110px;
        --action-btn-py: 0.45rem;
        --action-btn-text: 0.85rem;

        --header-h: 2.25rem; /* 36px */
        --hud-py: 0.125rem; /* 2px */
        --baize-pad: 0.375rem; /* 6px */
      }

      header {
        height: var(--header-h) !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
      }
      main {
        padding: 2px 4px !important;
      }
      #felt-table-baize {
        padding: var(--baize-pad) !important;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 6px)) !important;
        border-radius: 20px !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
      }
      #table-center-stage {
        padding: 2px 12px !important;
        gap: 16px !important;
      }
      .player-card-single:hover {
        transform: translateY(-5px) scale(1.03) !important;
      }
    }

    /* Small Laptops / High DPI Scaling (Height <= 620px) - Enlarged Cards */
    @media (max-height: 620px) {
      :root {
        --card-w: 52px;
        --card-h: 74px;
        --card-radius: 6px;
        --card-rank-size: 11px;
        --card-suit-corner: 9.5px;
        --card-suit-center: 18px;

        --card-sm-w: 44px;
        --card-sm-h: 62px;
        --card-sm-radius: 6px;
        --card-sm-rank-size: 10.5px;
        --card-sm-suit-corner: 9.5px;
        --card-sm-suit-center: 16px;

        --opp-video-w: 84px;
        --opp-video-h: 84px;
        --local-video-w: 84px;
        --local-video-h: 84px;

        --center-card-w: 56px;
        --center-card-h: 80px;
        --pile-box-min-w: 102px;
        --pile-box-min-h: 84px;
        --graveyard-w: 40px;
        --graveyard-h: 54px;

        --hand-container-min-h: 70px;
        --hand-container-max-h: 88px;
        --action-btn-py: 0.35rem;
        --action-btn-text: 0.75rem;

        --header-h: 2rem; /* 32px */
      }

      #felt-table-baize {
        padding: 3px 6px !important;
        padding-bottom: max(4px, env(safe-area-inset-bottom, 4px)) !important;
        border-radius: 14px !important;
      }
      #table-center-stage {
        padding: 1px 8px !important;
        gap: 10px !important;
      }
    }

    /* Ultra Short Screens / Split Screen (Height <= 500px) - Enlarged Cards */
    @media (max-height: 500px) {
      :root {
        --card-w: 42px;
        --card-h: 60px;
        --card-radius: 5px;
        --card-rank-size: 9.5px;
        --card-suit-corner: 8px;
        --card-suit-center: 14px;

        --card-sm-w: 36px;
        --card-sm-h: 52px;
        --card-sm-radius: 5px;
        --card-sm-rank-size: 9px;
        --card-sm-suit-corner: 8px;
        --card-sm-suit-center: 13px;

        --opp-video-w: 70px;
        --opp-video-h: 70px;
        --local-video-w: 70px;
        --local-video-h: 70px;

        --center-card-w: 46px;
        --center-card-h: 64px;
        --pile-box-min-w: 84px;
        --pile-box-min-h: 68px;
        --graveyard-w: 34px;
        --graveyard-h: 46px;

        --hand-container-min-h: 56px;
        --hand-container-max-h: 70px;
        --action-btn-py: 0.25rem;
        --action-btn-text: 0.7rem;

        --header-h: 1.85rem; /* ~30px */
      }
    }

    /* Mobile Responsive Viewport Overhaul (Width <= 640px & Phones) */
    /* Mobile Responsive Viewport Overhaul (Width <= 640px & Phones) */
    @media (max-width: 640px) {
      :root {
        --card-w: 78px;
        --card-h: 114px;
        --card-radius: 9px;
        --card-rank-size: 15px;
        --card-suit-corner: 12px;
        --card-suit-center: 24px;

        --card-sm-w: 56px;
        --card-sm-h: 82px;
        --card-sm-radius: 7px;
        --card-sm-rank-size: 13.5px;
        --card-sm-suit-corner: 11.5px;
        --card-sm-suit-center: 21px;

        --opp-video-w: 80px;
        --opp-video-h: 80px;
        --local-video-w: 104px;
        --local-video-h: 104px;

        --center-card-w: 74px;
        --center-card-h: 106px;
        --pile-box-min-w: 120px;
        --pile-box-min-h: 110px;
        --graveyard-w: 46px;
        --graveyard-h: 64px;

        --hand-container-min-h: 118px;
        --hand-container-max-h: 130px;
        --action-btn-py: 0.5rem;
        --action-btn-text: 0.88rem;

        --header-h: 2.25rem;
        --hud-py: 0.15rem;
        --baize-pad: 0.25rem;
      }

      header {
        height: calc(42px + max(env(safe-area-inset-top, 0px), 18px)) !important;
        padding-top: max(env(safe-area-inset-top, 0px), 18px) !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-bottom: 4px !important;
        box-sizing: border-box !important;
      }

      #top-teasing-btn,
      #top-theme-btn,
      #top-end-game-btn,
      #btn-nav-profile,
      #btn-nav-leaderboard,
      #btn-nav-tournaments,
      #btn-nav-guide {
        display: none !important;
      }

      main {
        padding: 2px 4px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
      }

      #felt-table-baize {
        padding: 4px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
        min-height: 0 !important;
        flex: 1 !important;
      }

      #top-opponent-area {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        padding: 2px 4px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        flex-shrink: 0 !important;
      }
      #top-opponent-area::-webkit-scrollbar {
        display: none !important;
      }

      #felt-table-baize {
        padding: 3px 2px !important;
        overflow: hidden !important;
      }

      #table-mid-section {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 2px !important;
        padding: 1px 1px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
      }

      #left-opponent-station,
      #right-opponent-station {
        width: 76px !important;
        max-width: 76px !important;
        flex-shrink: 0 !important;
      }

      #table-center-stage {
        padding: 2px 4px !important;
        gap: 6px !important;
        margin: 1px auto !important;
        border-radius: 14px !important;
        flex-shrink: 0 !important;
      }

      #player-zone-area {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        padding: 0 4px !important;
        gap: 2px !important;
        position: relative !important;
      }

      #player-top-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 440px !important;
        padding: 0 4px !important;
      }

      #player-cards-subzone {
        width: 100% !important;
        display: flex;
        flex-direction: column !important;
        align-items: center !important;
      }

      #local-video-wrapper {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        z-index: 20 !important;
        margin: 0 !important;
      }

      #local-video-tile {
        width: var(--local-video-w, 104px) !important;
        height: var(--local-video-h, 104px) !important;
        border-radius: 14px !important;
        padding: 2px !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.85) !important;
        border: 1.5px solid rgba(255, 186, 70, 0.45) !important;
      }

      #player-hand-container {
        min-height: 118px !important;
        max-height: 132px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
        gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

      #pregame-action-bar {
        width: 100% !important;
        max-width: 440px !important;
        padding: 4px 6px !important;
        gap: 8px !important;
        margin-top: 3px !important;
        margin-bottom: 3px !important;
        z-index: 40 !important;
      }

      #playing-action-bar {
        width: 100% !important;
        max-width: 440px !important;
        padding: 3px 6px !important;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
        gap: 8px !important;
        margin-top: 2px !important;
        z-index: 40 !important;
      }

      .action-btn-responsive {
        padding: 9px 12px !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        border-radius: 12px !important;
      }
    }

    @media (max-width: 400px) {
      :root {
        --card-w: 76px;
        --card-h: 110px;
        --card-sm-w: 54px;
        --card-sm-h: 78px;
        --opp-video-w: 76px;
        --opp-video-h: 76px;
        --local-video-w: 100px;
        --local-video-h: 100px;
        --center-card-w: 80px;
        --center-card-h: 114px;
        --pile-box-min-w: 112px;
        --pile-box-min-h: 118px;
        --hand-container-min-h: 114px;
        --hand-container-max-h: 125px;
      }
      #local-video-wrapper {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
      }
      #local-video-tile {
        width: var(--local-video-w, 100px) !important;
        height: var(--local-video-h, 100px) !important;
        border-radius: 14px !important;
      }
      #player-hand-container {
        padding-right: 30px !important;
        padding-left: 30px !important;
      }
      #left-opponent-station,
      #right-opponent-station {
        width: 74px !important;
        max-width: 76px !important;
      }
    }

    @keyframes confetti-fall {
      0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
      100% { transform: translateY(105vh) rotate(720deg) scale(0.7); opacity: 0.2; }
    }

    @keyframes poop-drop {
      0% { transform: translateY(0) rotate(-15deg) scale(0.6); opacity: 0; }
      10% { opacity: 1; }
      85% { opacity: 1; }
      100% { transform: translateY(105vh) rotate(35deg) scale(1.2); opacity: 0; }
    }

    /* Responsive Card Styling */
    .card-element-regular,
    .card-element-small {
      font-family: 'Heebo', sans-serif !important;
    }
    .card-corner-rank {
      font-family: 'Heebo', sans-serif !important;
      font-weight: 800 !important;
    }
    .card-element-regular {
      width: var(--card-w) !important;
      height: var(--card-h) !important;
      border-radius: var(--card-radius) !important;
    }
    .card-element-small {
      width: var(--card-sm-w) !important;
      height: var(--card-sm-h) !important;
      border-radius: var(--card-sm-radius) !important;
    }
    .card-element-regular .card-corner-rank {
      font-size: var(--card-rank-size) !important;
    }
    .card-element-regular .card-corner-suit {
      font-size: var(--card-suit-corner) !important;
    }
    .card-element-regular .card-center-suit {
      font-size: var(--card-suit-center) !important;
    }

    .card-element-small .card-corner-rank {
      font-size: var(--card-sm-rank-size) !important;
    }
    .card-element-small .card-corner-suit {
      font-size: var(--card-sm-suit-corner) !important;
    }
    .card-element-small .card-center-suit {
      font-size: var(--card-sm-suit-center) !important;
    }

    .opp-video-screen {
      width: var(--opp-video-w) !important;
      height: var(--opp-video-h) !important;
      transition: width 0.2s ease, height 0.2s ease;
    }
    .opp-station-wrapper.dual-mode,
    .opp-station-wrapper.duel-mode,
    .opp-station-wrapper.north-mode,
    .opp-station-wrapper.flank-mode {
      overflow: visible !important;
    }
    .opp-station-wrapper.dual-mode [class*="opp-box"],
    .opp-station-wrapper.north-mode [class*="opp-box"] {
      padding: 4px 6px !important;
      gap: 2px !important;
      overflow: visible !important;
    }
    .opp-station-wrapper.duel-mode [class*="opp-box"] {
      padding: 6px 10px !important;
      gap: 4px !important;
      overflow: visible !important;
    }
    .opp-station-wrapper.flank-mode [class*="opp-box"] {
      padding: 3px 2px !important;
      gap: 2px !important;
      overflow: visible !important;
    }

    /* Video Sizing according to Video-First Social Casino Invariant */
    .opp-station-wrapper.duel-mode .opp-video-screen {
      width: 96px !important;
      height: 96px !important;
      border-radius: 16px !important;
    }
    .opp-station-wrapper.dual-mode .opp-video-screen,
    .opp-station-wrapper.north-mode .opp-video-screen {
      width: 80px !important;
      height: 80px !important;
      border-radius: 14px !important;
    }
    .opp-station-wrapper.flank-mode .opp-video-screen,
    #left-opponent-station .opp-video-screen,
    #right-opponent-station .opp-video-screen {
      width: 72px !important;
      height: 72px !important;
      border-radius: 12px !important;
    }

    .opp-station-wrapper [id^="opp-faceup-"] {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      overflow: visible !important;
    }
    .table-card-slot {
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      overflow: visible !important;
      flex-shrink: 0 !important;
    }
    .table-card-slot > * {
      flex-shrink: 0 !important;
    }

    /* 1v1 Duel Mode Card Slots */
    .opp-station-wrapper.duel-mode [id^="opp-faceup-"] {
      gap: 6px !important;
    }
    .opp-station-wrapper.duel-mode [id^="opp-faceup-"] .table-card-slot {
      width: 38px !important;
      height: 55px !important;
    }
    .opp-station-wrapper.duel-mode [id^="opp-faceup-"] .card-element-small {
      width: 38px !important;
      height: 55px !important;
      flex-shrink: 0 !important;
      margin: 0 !important;
    }

    /* Dual & North Mode Card Slots */
    .opp-station-wrapper.dual-mode [id^="opp-faceup-"],
    .opp-station-wrapper.north-mode [id^="opp-faceup-"] {
      gap: 4px !important;
    }
    .opp-station-wrapper.dual-mode [id^="opp-faceup-"] .table-card-slot,
    .opp-station-wrapper.north-mode [id^="opp-faceup-"] .table-card-slot {
      width: 30px !important;
      height: 44px !important;
    }
    .opp-station-wrapper.dual-mode [id^="opp-faceup-"] .card-element-small,
    .opp-station-wrapper.north-mode [id^="opp-faceup-"] .card-element-small {
      width: 30px !important;
      height: 44px !important;
      flex-shrink: 0 !important;
      margin: 0 !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
    }

    /* Flank Mode Card Slots */
    .opp-station-wrapper.flank-mode [id^="opp-faceup-"],
    #left-opponent-station [id^="opp-faceup-"],
    #right-opponent-station [id^="opp-faceup-"] {
      gap: 1.5px !important;
    }
    .opp-station-wrapper.flank-mode [id^="opp-faceup-"] .table-card-slot,
    #left-opponent-station [id^="opp-faceup-"] .table-card-slot,
    #right-opponent-station [id^="opp-faceup-"] .table-card-slot {
      width: 22px !important;
      height: 33px !important;
    }
    .opp-station-wrapper.flank-mode [id^="opp-faceup-"] .card-element-micro,
    #left-opponent-station [id^="opp-faceup-"] .card-element-micro,
    #right-opponent-station [id^="opp-faceup-"] .card-element-micro {
      width: 22px !important;
      height: 33px !important;
      flex-shrink: 0 !important;
      margin: 0 !important;
    }
    #local-video-tile {
      width: var(--local-video-w) !important;
      height: var(--local-video-h) !important;
      transition: width 0.2s ease, height 0.2s ease;
    }
    #draw-deck-card {
      width: 48px !important;
      height: 68px !important;
      border-radius: 6px !important;
    }
    #draw-deck-container .card-element-regular,
    #draw-deck-container .card-element-small {
      width: 48px !important;
      height: 68px !important;
      border-radius: 6px !important;
    }
    #play-pile-box {
      min-width: var(--pile-box-min-w, 110px) !important;
      min-height: var(--pile-box-min-h, 118px) !important;
    }
    .play-pile-stack-wrapper {
      width: var(--pile-box-min-w, 110px) !important;
      height: var(--pile-box-min-h, 118px) !important;
    }
    #graveyard-box-inner {
      width: 48px !important;
      height: 28px !important;
      border-radius: 6px !important;
    }
    #player-hand-container {
      min-height: var(--hand-container-min-h) !important;
      max-height: var(--hand-container-max-h) !important;
    }
    
    /* Centered Table Center Stage */
    #table-center-stage {
      margin-left: auto !important;
      margin-right: auto !important;
      transition: all 0.3s ease;
    }

    /* 3D Casino Royale Buttons */
    .btn-casino-gold-3d {
      background: linear-gradient(180deg, #ffd768 0%, #e5a712 50%, #b87a04 100%) !important;
      border: 1px solid #ffe58f !important;
      border-bottom: 2px solid #784a00 !important;
      color: #2a1800 !important;
      font-weight: 800 !important;
      box-shadow: 0 4px 0 #784a00, 0 6px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
      transition: all 0.12s ease-in-out !important;
      cursor: pointer;
    }
    .btn-casino-gold-3d:hover:not(:disabled) {
      filter: brightness(1.08);
      transform: translateY(-1px);
      box-shadow: 0 5px 0 #784a00, 0 8px 20px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    }
    .btn-casino-gold-3d:active:not(:disabled) {
      transform: translateY(3px) !important;
      box-shadow: 0 1px 0 #784a00, 0 2px 6px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(0, 0, 0, 0.35) !important;
    }
    .btn-casino-gold-3d:disabled {
      opacity: 0.45 !important;
      cursor: not-allowed !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .btn-casino-red-3d {
      background: linear-gradient(180deg, #f87171 0%, #dc2626 45%, #991b1b 100%) !important;
      border: 1px solid #fca5a5 !important;
      border-bottom: 2px solid #450a0a !important;
      color: #ffffff !important;
      font-weight: 800 !important;
      box-shadow: 0 4px 0 #580c10, 0 6px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
      transition: all 0.12s ease-in-out !important;
      cursor: pointer;
    }
    .btn-casino-red-3d:hover:not(:disabled) {
      filter: brightness(1.1);
      transform: translateY(-1px);
      box-shadow: 0 5px 0 #580c10, 0 8px 20px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    }
    .btn-casino-red-3d:active:not(:disabled) {
      transform: translateY(3px) !important;
      box-shadow: 0 1px 0 #580c10, 0 2px 6px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(0, 0, 0, 0.45) !important;
    }
    .btn-casino-red-3d:disabled {
      opacity: 0.4 !important;
      cursor: not-allowed !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .btn-casino-emerald-3d {
      background: linear-gradient(180deg, #34d399 0%, #059669 50%, #065f46 100%) !important;
      border: 1px solid #6ee7b7 !important;
      border-bottom: 2px solid #022c22 !important;
      color: #ffffff !important;
      font-weight: 800 !important;
      box-shadow: 0 4px 0 #022c22, 0 6px 16px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
      transition: all 0.12s ease-in-out !important;
      cursor: pointer;
    }
    .btn-casino-emerald-3d:hover:not(:disabled) {
      filter: brightness(1.1);
      transform: translateY(-1px);
      box-shadow: 0 5px 0 #022c22, 0 8px 20px rgba(0, 0, 0, 0.75) !important;
    }
    .btn-casino-emerald-3d:active:not(:disabled) {
      transform: translateY(3px) !important;
      box-shadow: 0 1px 0 #022c22, 0 2px 6px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    }

    /* Casino Chip Navigation Buttons */
    .btn-casino-chip {
      background: linear-gradient(180deg, rgba(20, 59, 48, 0.85) 0%, rgba(2, 44, 34, 0.95) 100%) !important;
      border: 1px solid rgba(255, 186, 70, 0.4) !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
      transition: all 0.15s ease !important;
    }
    .btn-casino-chip:hover {
      border-color: #ffba46 !important;
      box-shadow: 0 0 14px rgba(255, 186, 70, 0.4), 0 3px 8px rgba(0, 0, 0, 0.6) !important;
      transform: translateY(-1px);
    }
    .btn-casino-chip:active {
      transform: translateY(1px);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    }

    /* VIP Dealer Avatar Aura & Thinking Animation */
    @keyframes dealer-glow-pulse {
      0%, 100% {
        box-shadow: 0 0 15px rgba(255, 186, 70, 0.4), inset 0 0 8px rgba(255, 186, 70, 0.3);
      }
      50% {
        box-shadow: 0 0 28px rgba(255, 186, 70, 0.85), inset 0 0 16px rgba(255, 186, 70, 0.6);
      }
    }
    .dealer-active-aura {
      animation: dealer-glow-pulse 2s infinite ease-in-out !important;
      border-color: #ffba46 !important;
    }

    @keyframes dealer-chip-spin {
      0% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(180deg) scale(1.15); }
      100% { transform: rotate(360deg) scale(1); }
    }
    .dealer-thinking-chip {
      display: inline-block;
      animation: dealer-chip-spin 1.8s infinite linear;
    }

    .action-btn-responsive {
      padding-top: var(--action-btn-py) !important;
      padding-bottom: var(--action-btn-py) !important;
      font-size: var(--action-btn-text) !important;
    }

    html, body {
      height: 100%;
      height: 100dvh;
      min-height: -webkit-fill-available;
      margin: 0;
      padding: 0;
      overflow: hidden;
      touch-action: manipulation;
    }

    body {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #felt-table-baize {
      min-height: 0;
      padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    }
    #player-zone-area {
      min-height: 0;
    }

    #player-hand-container::-webkit-scrollbar {
      height: 4px;
    }
    #player-hand-container::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.35);
      border-radius: 999px;
    }
    #player-hand-container::-webkit-scrollbar-thumb {
      background: rgba(255, 186, 70, 0.6);
      border-radius: 999px;
    }
    #player-hand-container::-webkit-scrollbar-thumb:hover {
      background: #ffba46;
    }

    .player-card-single {
      touch-action: pan-x !important;
      user-select: none !important;
      -webkit-user-select: none !important;
      -webkit-touch-callout: none !important;
      cursor: grab;
    }
    .player-card-single:active {
      cursor: grabbing;
    }
    #play-pile-box {
      touch-action: none !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }
    .player-card-single:hover {
      transform: translateY(-8px) scale(1.04) !important;
      box-shadow: 0 12px 24px rgba(0,0,0,0.6) !important;
      z-index: 25;
    }

    /* Table Violent Shake for Kryptonite */
    @keyframes kryptoniteShake {
      0% { transform: translate(0, 0) rotate(0deg); }
      10% { transform: translate(-8px, -6px) rotate(-1.5deg); }
      20% { transform: translate(8px, 6px) rotate(1.5deg); }
      30% { transform: translate(-10px, 4px) rotate(-1deg); }
      40% { transform: translate(10px, -4px) rotate(1.2deg); }
      50% { transform: translate(-6px, -8px) rotate(-0.8deg); }
      60% { transform: translate(6px, 8px) rotate(0.8deg); }
      70% { transform: translate(-4px, 4px) rotate(-0.5deg); }
      80% { transform: translate(4px, -4px) rotate(0.5deg); }
      90% { transform: translate(-2px, 2px) rotate(0deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }
    .kryptonite-shaking {
      animation: kryptoniteShake 0.85s cubic-bezier(.36,.07,.19,.97) both !important;
    }

    /* Kryptonite Superman Shield Overlay */
    #kryptonite-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    #kryptonite-overlay.active {
      opacity: 1;
    }
    .kryptonite-emblem-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: scale(0.2) rotate(-25deg);
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    #kryptonite-overlay.active .kryptonite-emblem-wrapper {
      transform: scale(1.15) rotate(0deg);
      opacity: 1;
    }
    .kryptonite-aura {
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(34, 197, 94, 0.85) 0%, rgba(16, 185, 129, 0.4) 45%, transparent 70%);
      filter: blur(25px);
      animation: kryptonitePulse 1.2s infinite alternate ease-in-out;
    }
    @keyframes kryptonitePulse {
      0% { transform: scale(0.9); opacity: 0.6; }
      100% { transform: scale(1.3); opacity: 1; }
    }
    .kryptonite-shield {
      position: relative;
      z-index: 2;
      width: 190px;
      filter: drop-shadow(0 0 35px #22c55e) drop-shadow(0 0 60px #10b981);
    }
    .kryptonite-text-banner {
      margin-top: 15px;
      font-size: 32px;
      font-weight: 900;
      color: #86efac;
      text-shadow: 0 0 20px #22c55e, 0 4px 10px rgba(0,0,0,0.9);
      letter-spacing: 2px;
      white-space: nowrap;
      z-index: 2;
    }

    /* Semi-Transparent Game Finish Center-Table Overlay (Kryptonite style) */
    #game-finish-overlay {
      position: fixed;
      inset: 0;
      z-index: 9500;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at center, rgba(1, 35, 25, 0.62) 0%, rgba(0, 18, 12, 0.85) 100%);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }
    #game-finish-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }
    .finish-emblem-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      max-width: 94vw;
      width: 440px;
      padding: 22px 18px;
      border-radius: 28px;
      background: rgba(3, 40, 28, 0.82);
      border: 2px solid rgba(255, 186, 70, 0.7);
      box-shadow: 0 0 50px rgba(0,0,0,0.85), 0 0 35px rgba(255,186,70,0.4);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transform: scale(0.65) rotate(-3deg);
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    #game-finish-overlay.active .finish-emblem-wrapper {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
    .finish-aura {
      position: absolute;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245, 158, 11, 0.65) 0%, rgba(217, 119, 6, 0.3) 45%, transparent 70%);
      filter: blur(35px);
      animation: finishPulse 1.8s infinite alternate ease-in-out;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes finishPulse {
      0% { transform: scale(0.85); opacity: 0.5; }
      100% { transform: scale(1.3); opacity: 0.95; }
    }
    .finish-hero-icon {
      font-size: 58px;
      line-height: 1;
      filter: drop-shadow(0 0 20px rgba(255, 186, 70, 0.85));
      animation: floatHero 2.5s infinite alternate ease-in-out;
      z-index: 2;
    }
    @keyframes floatHero {
      0% { transform: translateY(0) scale(1); }
      100% { transform: translateY(-8px) scale(1.08); }
    }
    .finish-title-banner {
      font-family: 'Rubik', sans-serif;
      font-weight: 900;
      font-size: 26px;
      color: #ffba46;
      text-shadow: 0 0 20px rgba(245, 158, 11, 0.8), 0 3px 8px rgba(0,0,0,0.8);
      margin-top: 6px;
      margin-bottom: 14px;
      text-align: center;
      letter-spacing: 0.5px;
      z-index: 2;
    }
    .finish-cards-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      z-index: 2;
    }
    .finish-group-card {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 10px 14px;
      border-radius: 16px;
      text-align: right;
    }
    .finish-winners-card {
      background: rgba(16, 185, 129, 0.14);
      border: 1.5px solid rgba(52, 211, 153, 0.45);
      box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
    }
    .finish-loser-card {
      background: rgba(234, 88, 12, 0.14);
      border: 1.5px solid rgba(251, 146, 60, 0.45);
      box-shadow: 0 4px 15px rgba(234, 88, 12, 0.15);
    }
    .finish-player-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
    }
    .finish-tag-winner {
      background: rgba(254, 240, 138, 0.2);
      color: #fef08a;
      border: 1px solid rgba(250, 204, 21, 0.5);
    }
    .finish-tag-loser {
      background: rgba(254, 215, 170, 0.2);
      color: #fed7aa;
      border: 1px solid rgba(251, 146, 60, 0.5);
    }
  
/* Luxury Casino Button Halos & Shimmer (Stitch MCP) */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: translateX(150%);
  animation: shimmer-sweep 3s infinite ease-in-out;
  pointer-events: none;
}
.glow-gold {
  box-shadow: 0 4px 20px rgba(202, 138, 4, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}
.glow-gold:hover {
  box-shadow: 0 8px 30px rgba(234, 179, 8, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
.glow-emerald {
  box-shadow: 0 4px 18px rgba(4, 120, 87, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}
.glow-emerald:hover {
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
.glow-ruby {
  box-shadow: 0 4px 20px rgba(153, 27, 27, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.45);
}
.glow-ruby:hover {
  box-shadow: 0 8px 30px rgba(220, 38, 38, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
}
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.pulse-ring-gold {
  animation: pulse-ring 2s infinite ease-in-out;
}

/* ─── TABLE THEMES: LUXURY & SCRAPPY STUDENT APARTMENT ─── */
/* 1. Florentin Underground (Default) */
body.theme-florentin #felt-table-baize {
  background: radial-gradient(circle at 50% 45%, #064e3b 0%, #022c22 65%, #011812 100%) !important;
  border: 3px solid #78350f !important;
  box-shadow: inset 0 0 70px rgba(0,0,0,0.85), 0 0 0 3px #b45309, 0 10px 35px rgba(0,0,0,0.7) !important;
}
body.theme-florentin #table-center-stage {
  background: rgba(120, 53, 15, 0.22) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.6), inset 0 0 15px rgba(180, 83, 9, 0.15) !important;
}
body.theme-florentin #draw-deck-card {
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 0 0 2px #b45309 !important;
}

/* 2. Cyber Penthouse & Pizza */
body.theme-cyber-dorm #felt-table-baize {
  background: radial-gradient(circle at 50% 50%, #0b0f19 0%, #030712 65%, #000000 100%) !important;
  border: 2px solid #8b5cf6 !important;
  box-shadow: inset 0 0 80px rgba(139, 92, 246, 0.25), 0 0 25px rgba(139, 92, 246, 0.35), 0 10px 35px rgba(0,0,0,0.9) !important;
}
body.theme-cyber-dorm #table-center-stage {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(6, 182, 212, 0.6) !important;
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.25), 0 8px 25px rgba(0,0,0,0.8) !important;
}
body.theme-cyber-dorm #draw-deck-card {
  background: #1e1b4b !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4) !important;
}
body.theme-cyber-dorm #graveyard-box-inner {
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.3) !important;
}

/* 3. The Garage Speakeasy & Vinyl */
body.theme-speakeasy #felt-table-baize {
  background: radial-gradient(circle at 50% 45%, #451a03 0%, #290f02 65%, #180800 100%) !important;
  border: 3px solid #78350f !important;
  box-shadow: inset 0 0 70px rgba(0,0,0,0.9), 0 0 0 4px #92400e, 0 10px 35px rgba(0,0,0,0.8) !important;
}
body.theme-speakeasy #table-center-stage {
  background: rgba(69, 26, 3, 0.55) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.7), inset 0 0 20px rgba(146, 64, 14, 0.25) !important;
}
body.theme-speakeasy #draw-deck-card {
  background: #27272a !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35) !important;
}

/* 4. Royal Emerald Classic */
body.theme-classic #felt-table-baize {
  background: linear-gradient(to bottom, #022c22, rgba(16, 185, 129, 0.2), #022c22) !important;
  border: 2px solid rgba(255, 186, 70, 0.45) !important;
  box-shadow: inset 0 0 70px rgba(0,0,0,0.85), 0 10px 35px rgba(0,0,0,0.7) !important;
}
body.theme-classic #table-center-stage {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

@keyframes card-flip-reveal { 0% { transform: scale(0.2) rotateY(180deg) translateY(200px); opacity: 0; } 20% { transform: scale(1.1) rotateY(0deg) translateY(0); opacity: 1; } 75% { transform: scale(1.1) rotateY(0deg) translateY(0); opacity: 1; } 100% { transform: scale(0.2) rotateY(0deg) translateY(0); opacity: 0; } } @keyframes card-flip-reveal-legal { 0% { transform: scale(0.2) rotateY(180deg) translateY(200px); opacity: 0; } 20% { transform: scale(1.1) rotateY(0deg) translateY(0); opacity: 1; } 75% { transform: scale(1.1) rotateY(0deg) translateY(0); opacity: 1; } 100% { transform: scale(0.2) rotateY(0deg) translateY(-400px); opacity: 0; } } @keyframes card-flip-reveal-illegal { 0% { transform: scale(0.2) rotateY(180deg) translateY(200px); opacity: 0; } 20% { transform: scale(1.1) rotateY(0deg) translateY(0); opacity: 1; } 75% { transform: scale(1.1) rotateY(0deg) translateY(0); opacity: 1; } 100% { transform: scale(0.2) rotateY(0deg) translateY(400px); opacity: 0; } }


/* ── Trash Talk System & Animated Speech Bubbles ────────────────────────── */
.tt-speech-bubble {
  position: absolute;
  z-index: 55;
  pointer-events: auto;
  max-width: 175px;
  min-width: 85px;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(245, 158, 11, 0.7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 12px rgba(245, 158, 11, 0.35);
  border-radius: 14px;
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  direction: rtl;
  animation: tt-bubble-pop-in 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: opacity 0.35s ease, transform 0.35s ease;
  user-select: none;
}

.tt-speech-bubble.tt-bubble-fadeout {
  opacity: 0;
  transform: scale(0.85) translateY(-6px);
  pointer-events: none;
}

@keyframes tt-bubble-pop-in {
  0% { opacity: 0; transform: scale(0.4) translateY(12px); }
  70% { transform: scale(1.08) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Bubble positioning flavors relative to video pods */
.tt-bubble-top {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.tt-bubble-bottom {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.tt-bubble-flank-left {
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
}

.tt-bubble-flank-right {
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
}