/* ===== RESET & BASE ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700;800&display=swap');

/* ===== iOS SAFE AREA SUPPORT ===== */
/* Note: Since the game uses a fixed 932x430px canvas that scales, we use fixed padding
   values rather than env() safe area insets. The notch padding creates consistent
   spacing for iPhone notch/Dynamic Island in landscape mode. */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    /* Fixed notch padding for left-aligned elements (works with scaled canvas) */
    --notch-padding-left: 38px;
}

/* ===== FIXED VIEWPORT ===== */
html {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /* Prevent iOS rubber-banding */
    overscroll-behavior: none;
    /* CRITICAL: Prevent iOS from auto-adjusting text sizes */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    background: #000000;
    /* Prevent text selection on iOS */
    -webkit-user-select: none;
    user-select: none;
    /* CRITICAL: Prevent iOS from auto-adjusting text sizes */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

#game-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000000;
    /* DO NOT apply safe area padding here - JS handles safe areas for precise centering */
    /* This ensures the game container fills the full viewport for letterboxing */
    box-sizing: border-box;
    /* Center any content for browsers that might not run JS */
    display: flex;
    align-items: center;
    justify-content: center;
}

:root {
    /* Balatro-authentic color palette */
    --bg-dark: #0d0d1a;
    --bg-mid: #1a1a2e;
    --bg-card: #252540;
    --bg-panel: #1e1e35;
    --bg-elevated: #2a2a4a;
    --border: #3d3d5c;
    --border-light: #4a4a6a;
    --text: #e8e8f0;
    --text-dim: #9090b0;
    --text-bright: #ffffff;
    /* Signature Balatro accent colors */
    --accent-blue: #4dc3ff;
    --accent-cyan: #00d4ff;
    --accent-green: #5dde5d;
    --accent-red: #fe5f55;
    --accent-orange: #ff8844;
    --accent-purple: #aa77ff;
    --accent-gold: #f5c842;
    --accent-pink: #ff6699;
    --chips-color: #4dc3ff;
    --mult-color: #fe5f55;
    --money-color: #f5c842;
    /* Card colors */
    --card-bg: #f4f1e8;
    --card-border: #8b8578;
    --suit-red: #c9303e;
    --suit-black: #232136;
    /* Fixed landscape sizes - sized for mobile touch targets */
    --card-width: 64px;
    --card-height: 90px;
    --card-radius: 6px;
    --joker-width: 108px;
    --joker-height: 84px;
    /* Timing */
    --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-med: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Glows - more saturated */
    --glow-blue: 0 0 12px rgba(77, 195, 255, 0.6), 0 0 24px rgba(77, 195, 255, 0.3);
    --glow-red: 0 0 12px rgba(254, 95, 85, 0.6), 0 0 24px rgba(254, 95, 85, 0.3);
    --glow-green: 0 0 12px rgba(93, 222, 93, 0.6), 0 0 24px rgba(93, 222, 93, 0.3);
    --glow-gold: 0 0 12px rgba(245, 200, 66, 0.6), 0 0 24px rgba(245, 200, 66, 0.3);
    --glow-purple: 0 0 12px rgba(170, 119, 255, 0.6), 0 0 24px rgba(170, 119, 255, 0.3);
    --glow-cyan: 0 0 12px rgba(0, 212, 255, 0.6), 0 0 24px rgba(0, 212, 255, 0.3);
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
    background: #000000;
    color: var(--text);
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    user-select: none;
}

#app {
    /* Fixed internal game resolution - NEVER change these dimensions */
    /* Everything inside scales proportionally via CSS transform */
    position: absolute;
    width: 932px;
    height: 430px;
    overflow: hidden;
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    /* Transform/position set by JS for scaling */
    /* Needed for absolute positioned overlays */
    isolation: isolate;
    /* Ensure crisp scaling on high-DPI displays */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent any flex-based stretching from parent */
    flex-shrink: 0;
    flex-grow: 0;
}

/* CRT scanline overlay - Balatro style */
/* Use absolute positioning so it scales with the #app element */
#app::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, 0.03) 1px,
        rgba(0, 0, 0, 0.03) 2px
    );
    mix-blend-mode: multiply;
}

/* Vignette with subtle color tint */
/* Use absolute positioning so it scales with the #app element */
#app::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(ellipse at center, 
        transparent 40%, 
        rgba(10, 5, 20, 0.3) 70%,
        rgba(10, 5, 20, 0.6) 100%);
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3 {
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ===== BUTTONS - Balatro Style ===== */
.btn {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    padding: 10px 18px;
    border: 3px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, #3a3a5a 0%, #2a2a45 100%);
    color: var(--text);
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 3px 0 #1a1a30,
        0 4px 8px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    pointer-events: none;
}

.btn:hover {
    background: linear-gradient(180deg, #4a4a6a 0%, #3a3a55 100%);
    border-color: var(--accent-cyan);
    box-shadow: 
        0 0 0 1px var(--accent-cyan),
        var(--glow-cyan),
        0 3px 0 #1a1a30,
        0 6px 12px rgba(0,0,0,0.4);
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(2px) scale(0.97);
    box-shadow: 
        0 1px 0 #1a1a30,
        0 2px 4px rgba(0,0,0,0.3);
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
    filter: brightness(0.95);
}

.btn.disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.5);
}

.btn-play, .btn-play-hand {
    background: linear-gradient(180deg, #2a5080 0%, #1a3560 100%);
    border-color: var(--accent-blue);
    color: var(--accent-cyan);
    font-size: 13px;
    padding: 12px 24px;
    box-shadow: 
        0 0 0 1px rgba(77, 195, 255, 0.3),
        0 4px 0 #0a2040,
        0 6px 12px rgba(0,0,0,0.4);
}

.btn-play:hover, .btn-play-hand:hover {
    background: linear-gradient(180deg, #3a6090 0%, #2a4570 100%);
    box-shadow: 
        0 0 0 2px var(--accent-cyan),
        var(--glow-cyan),
        0 4px 0 #0a2040,
        0 8px 16px rgba(0,0,0,0.5);
}

.btn-discard {
    background: linear-gradient(180deg, #6a2a2a 0%, #4a1a1a 100%);
    border-color: var(--accent-red);
    color: #ff8877;
    box-shadow: 
        0 0 0 1px rgba(254, 95, 85, 0.3),
        0 4px 0 #2a0a0a,
        0 6px 12px rgba(0,0,0,0.4);
}

.btn-discard:hover {
    background: linear-gradient(180deg, #7a3a3a 0%, #5a2a2a 100%);
    box-shadow: 
        0 0 0 2px var(--accent-red),
        var(--glow-red),
        0 4px 0 #2a0a0a,
        0 8px 16px rgba(0,0,0,0.5);
}

.btn-select {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.btn-boss {
    background: var(--accent-red);
    border-color: var(--accent-red);
}

.btn-skip {
    background: transparent;
    border-color: var(--text-dim);
    color: var(--text-dim);
    font-size: 11px;
    padding: 6px 14px;
}

.btn-skip:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.btn-sort, .btn-sort-suit {
    background: transparent;
    border-color: var(--text-dim);
    color: var(--text-dim);
    font-size: 11px;
    padding: 8px 16px;
}

.btn-sort.active, .btn-sort-suit.active {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(0, 229, 255, 0.1);
}

.btn-reroll {
    background: linear-gradient(135deg, #2a2a1a 0%, #1a1a0d 100%);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.btn-next-round {
    background: linear-gradient(135deg, #1a3a2a 0%, #0d2a1a 100%);
    border-color: var(--accent-green);
    color: var(--accent-green);
    font-size: 14px;
    padding: 12px 32px;
}

.btn-confirm-tarot {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: #fff;
}

.btn-cancel-tarot {
    background: transparent;
    border-color: var(--text-dim);
    color: var(--text-dim);
}

/* ===== TOP BAR ===== */
.top-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--bg-mid);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.info-item {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-item .val {
    color: var(--text-bright);
    font-weight: 700;
    margin-left: 2px;
}

.stake-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stake-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: 0 0 6px var(--stake-color);
}

.stake-indicator .val {
    color: var(--stake-color);
    text-shadow: 0 0 8px var(--stake-color);
}

.money-display {
    margin-left: auto;
    font-size: 13px;
    color: var(--money-color);
    font-weight: 800;
    text-shadow: var(--glow-gold);
}

.money-display .val {
    color: var(--money-color);
}

/* ===== MENU SCREEN ===== */
.menu-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 50% 30%, rgba(60, 30, 90, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 70%, rgba(30, 50, 80, 0.4) 0%, transparent 50%),
        linear-gradient(180deg, #0a0812 0%, #0d0d1a 50%, #080810 100%);
    position: relative;
    overflow: hidden;
    /* Add left padding for iPhone notch/Dynamic Island */
    padding-left: var(--notch-padding-left);
}

/* Animated background particles */
.menu-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.15), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.1), transparent),
        radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.12), transparent),
        radial-gradient(2px 2px at 80% 50%, rgba(255,255,255,0.08), transparent),
        radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.1), transparent),
        radial-gradient(2px 2px at 90% 10%, rgba(255,255,255,0.1), transparent);
    animation: starFloat 20s linear infinite;
    pointer-events: none;
}

@keyframes starFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

.menu-title {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, #00d4ff 0%, #4dc3ff 25%, #aa77ff 50%, #ff6699 75%, #00d4ff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(77, 195, 255, 0.6));
    animation: titleGradient 4s ease infinite, titlePulse 3s ease-in-out infinite;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes titlePulse {
    0%, 100% { 
        filter: drop-shadow(0 0 30px rgba(77, 195, 255, 0.5));
        transform: scale(1);
    }
    50% { 
        filter: drop-shadow(0 0 50px rgba(77, 195, 255, 0.8)) drop-shadow(0 0 80px rgba(170, 119, 255, 0.4));
        transform: scale(1.02);
    }
}

.menu-subtitle {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.25em;
    margin-bottom: 30px;
}

.menu-cards-deco {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
}

.deco-card {
    width: 42px;
    height: 60px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    animation: cardFloat 3s ease-in-out infinite;
}

.deco-1 { animation-delay: 0s; }
.deco-2 { animation-delay: 0.3s; }
.deco-3 { animation-delay: 0.6s; }
.deco-4 { animation-delay: 0.9s; }

@keyframes cardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    z-index: 10;
}

.btn-continue {
    background: linear-gradient(180deg, #2a6050 0%, #1a4535 100%);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn-continue:hover {
    background: linear-gradient(180deg, #3a7060 0%, #2a5545 100%);
    box-shadow: 
        0 0 0 2px var(--accent-green),
        var(--glow-green),
        0 4px 0 #0a2520,
        0 8px 16px rgba(0,0,0,0.5);
}

.btn-menu-options {
    background: linear-gradient(180deg, #4a4a6a 0%, #35355a 100%);
    border-color: var(--border-light);
    color: var(--text-dim);
    font-size: 12px;
    padding: 8px 24px;
    margin-top: 8px;
}

.btn-menu-options:hover {
    background: linear-gradient(180deg, #5a5a7a 0%, #45456a 100%);
    color: var(--text);
    box-shadow: 
        0 0 0 2px var(--border-light),
        0 0 10px rgba(100, 100, 150, 0.3),
        0 4px 0 #252545,
        0 8px 16px rgba(0,0,0,0.5);
}

.menu-footer {
    position: absolute;
    bottom: 30px;
    color: var(--text-dim);
    font-size: 11px;
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ===== NEW MENU SCREEN DESIGN ===== */
.menu-screen-new {
    background: linear-gradient(135deg, #0a0612 0%, #150a1f 30%, #1a0815 60%, #0d0510 100%);
}

.menu-screen-new::after {
    display: none;
}

.space-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    animation: nebulaPulse 8s ease-in-out infinite;
}

.nebula-1 {
    width: 400px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(200, 80, 50, 0.4) 0%, rgba(180, 60, 30, 0.2) 40%, transparent 70%);
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    animation-delay: 0s;
}

.nebula-2 {
    width: 350px;
    height: 250px;
    background: radial-gradient(ellipse, rgba(30, 80, 150, 0.35) 0%, rgba(20, 60, 120, 0.2) 40%, transparent 70%);
    left: -80px;
    top: 30%;
    animation-delay: 4s;
}

@keyframes nebulaPulse {
    0%, 100% { opacity: 0.4; transform: scale(1) translateY(-50%); }
    50% { opacity: 0.6; transform: scale(1.1) translateY(-50%); }
}

.nebula-2 {
    animation-name: nebulaPulse2;
}

@keyframes nebulaPulse2 {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.15); }
}

.stars-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: starTwinkle 3s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.menu-content-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.menu-screen-new .menu-title-wrap {
    margin-bottom: 16px;
}

.menu-title-new {
    display: flex;
    gap: 12px;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    animation: titleFloat 4s ease-in-out infinite;
}

@keyframes titleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.title-language {
    color: #00d4ff;
    text-shadow: 
        0 0 10px rgba(0, 212, 255, 0.8),
        0 0 20px rgba(0, 212, 255, 0.5),
        0 0 40px rgba(0, 212, 255, 0.3);
    animation: glowCyan 2s ease-in-out infinite;
}

.title-poker {
    color: #f5c842;
    text-shadow: 
        0 0 10px rgba(245, 200, 66, 0.8),
        0 0 20px rgba(245, 200, 66, 0.5),
        0 0 40px rgba(245, 200, 66, 0.3);
    animation: glowGold 2s ease-in-out infinite 0.3s;
}

.title-quest {
    color: #ff6b4a;
    text-shadow: 
        0 0 10px rgba(255, 107, 74, 0.8),
        0 0 20px rgba(255, 107, 74, 0.5),
        0 0 40px rgba(255, 107, 74, 0.3);
    animation: glowOrange 2s ease-in-out infinite 0.6s;
}

@keyframes glowCyan {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

@keyframes glowGold {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

@keyframes glowOrange {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.menu-subtitle-new {
    font-size: 10px;
    color: #8090a0;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Showcase Cards */
.menu-cards-showcase {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.showcase-card {
    width: 54px;
    height: 72px;
    background: linear-gradient(180deg, #f8f6f0 0%, #e8e4d8 100%);
    border: 2px solid #8b8578;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: cardShowcase 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.showcase-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 200, 100, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.card-1 { animation-delay: 0s; }
.card-2 { animation-delay: 0.2s; }
.card-3 { animation-delay: 0.4s; }
.card-4 { animation-delay: 0.6s; }

@keyframes cardShowcase {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    25% { transform: translateY(-5px) rotate(0.5deg); }
    50% { transform: translateY(-2px) rotate(1deg); }
    75% { transform: translateY(-6px) rotate(-0.5deg); }
}

.card-flag {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 10px;
    line-height: 1;
}

.card-rank {
    font-size: 18px;
    font-weight: 800;
    color: #232136;
    line-height: 1;
}

.card-suit {
    font-size: 14px;
    line-height: 1;
    margin: 1px 0;
}

.card-suit.suit-red {
    color: #c9303e;
}

.card-suit.suit-dark {
    color: #232136;
}

.card-word {
    font-size: 7px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 4px;
    border-radius: 2px;
    margin-top: 2px;
}

/* New Menu Buttons */
.menu-buttons-new {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    z-index: 10;
}

.btn-quest {
    min-width: 200px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 6px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.btn-quest::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.btn-quest:hover::before {
    left: 100%;
}

.btn-continue-quest {
    background: linear-gradient(180deg, #2a5a50 0%, #1a4038 100%);
    border-color: #4dc3aa;
    color: #4dc3aa;
    box-shadow: 
        0 3px 0 #0a2520,
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-continue-quest:hover {
    background: linear-gradient(180deg, #3a6a60 0%, #2a5048 100%);
    box-shadow: 
        0 0 0 2px #4dc3aa,
        0 0 20px rgba(77, 195, 170, 0.4),
        0 3px 0 #0a2520,
        0 4px 12px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.btn-new-quest {
    background: linear-gradient(180deg, #3a4a6a 0%, #2a3a55 100%);
    border-color: #6a8aaa;
    color: #a0c0e0;
    box-shadow: 
        0 3px 0 #1a2535,
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-new-quest:hover {
    background: linear-gradient(180deg, #4a5a7a 0%, #3a4a65 100%);
    color: #c0e0ff;
    box-shadow: 
        0 0 0 2px #6a8aaa,
        0 0 20px rgba(106, 138, 170, 0.4),
        0 3px 0 #1a2535,
        0 4px 12px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.btn-options-quest {
    background: linear-gradient(180deg, #4a4560 0%, #35304a 100%);
    border-color: #6a6580;
    color: #9090a8;
    font-size: 11px;
    padding: 10px 20px;
    box-shadow: 
        0 3px 0 #1a1825,
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-options-quest:hover {
    background: linear-gradient(180deg, #5a5570 0%, #45405a 100%);
    color: #b0b0c8;
    box-shadow: 
        0 0 0 2px #6a6580,
        0 0 15px rgba(106, 101, 128, 0.3),
        0 3px 0 #1a1825,
        0 4px 12px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.menu-footer-new {
    position: absolute;
    bottom: 20px;
    color: #7080a0;
    font-size: 11px;
    letter-spacing: 0.05em;
}

/* Menu Sparkles */
.menu-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: sparkle 4s ease-in-out infinite;
}

.sparkle-1 {
    right: 60px;
    bottom: 80px;
    animation-delay: 0s;
}

.sparkle-2 {
    right: 80px;
    bottom: 100px;
    animation-delay: 2s;
    width: 3px;
    height: 3px;
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

/* Update progress panel for new design */
.menu-screen-new .menu-main-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.menu-screen-new .menu-progress-panel {
    background: rgba(20, 18, 35, 0.85);
    border-color: rgba(100, 100, 140, 0.4);
    backdrop-filter: blur(8px);
}

/* Progress badge - small top right button */
.progress-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 18, 35, 0.9);
    border: 1px solid rgba(100, 100, 140, 0.5);
    border-radius: 20px;
    padding: 5px 12px 5px 8px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.progress-badge:hover {
    background: rgba(30, 28, 50, 0.95);
    border-color: var(--accent-cyan);
    transform: scale(1.02);
}

.progress-badge .badge-flag {
    font-size: 14px;
    line-height: 1;
}

.progress-badge .badge-text {
    font-size: 10px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Progress popup */
.progress-popup {
    position: absolute;
    top: 45px;
    right: 10px;
    background: rgba(20, 18, 35, 0.95);
    border: 2px solid rgba(100, 100, 140, 0.5);
    border-radius: 12px;
    padding: 0;
    min-width: 220px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.progress-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(100, 100, 140, 0.3);
    background: rgba(30, 28, 50, 0.5);
    border-radius: 10px 10px 0 0;
}

.popup-flag {
    font-size: 18px;
}

.popup-title {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-cyan);
}

.popup-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.popup-close:hover {
    color: var(--text);
}

.popup-content {
    padding: 12px;
}

.popup-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.popup-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: rgba(40, 40, 70, 0.6);
    border-radius: 6px;
    border: 1px solid rgba(60, 60, 100, 0.4);
}

.popup-stat .stat-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-gold);
    line-height: 1;
}

.popup-stat .stat-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-top: 3px;
}

.popup-mastery {
    margin-bottom: 10px;
}

.popup-mastery .mastery-bar {
    height: 8px;
    margin-bottom: 6px;
}

.mastery-legend-mini {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.mastery-legend-mini .legend-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    color: var(--text-dim);
}

.popup-streaks {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(100, 100, 140, 0.2);
}

.popup-streaks .streak-item {
    font-size: 9px;
    color: var(--text-dim);
}

.btn-view-library {
    width: 100%;
    margin-top: 10px;
    padding: 6px 12px;
    font-size: 10px;
    background: linear-gradient(145deg, var(--accent-cyan), #2a8fa3);
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-view-library:hover {
    background: linear-gradient(145deg, #4dc3ff, #3aa8e0);
    transform: scale(1.02);
}

/* ===== WORD LIBRARY MODAL ===== */
.word-library-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.word-library-modal {
    background: rgba(20, 18, 35, 0.98);
    border: 2px solid rgba(100, 100, 140, 0.5);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    height: 80%;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.word-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(30, 28, 50, 0.8);
    border-bottom: 1px solid rgba(100, 100, 140, 0.3);
}

.word-library-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.library-flag {
    font-size: 20px;
}

.library-title-text {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-cyan);
}

.word-library-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.word-library-close:hover {
    color: var(--text);
}

.word-library-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(25, 23, 45, 0.6);
    border-bottom: 1px solid rgba(100, 100, 140, 0.2);
}

.word-library-tabs {
    display: flex;
    gap: 4px;
}

.library-tab {
    padding: 6px 12px;
    background: rgba(40, 40, 70, 0.6);
    border: 1px solid rgba(60, 60, 100, 0.4);
    border-radius: 4px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.library-tab:hover {
    background: rgba(50, 50, 90, 0.8);
    color: var(--text);
}

.library-tab.active {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: white;
}

.word-library-filters {
    display: flex;
    gap: 8px;
}

.library-filter-select {
    flex: 0 0 auto;
    padding: 6px 10px;
    background: rgba(40, 40, 70, 0.8);
    border: 1px solid rgba(60, 60, 100, 0.5);
    border-radius: 4px;
    color: var(--text);
    font-size: 10px;
    cursor: pointer;
}

.library-search {
    flex: 1;
    padding: 6px 10px;
    background: rgba(40, 40, 70, 0.8);
    border: 1px solid rgba(60, 60, 100, 0.5);
    border-radius: 4px;
    color: var(--text);
    font-size: 11px;
}

.library-search::placeholder {
    color: var(--text-dim);
}

.word-library-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.word-library-list::-webkit-scrollbar {
    width: 6px;
}

.word-library-list::-webkit-scrollbar-track {
    background: rgba(30, 30, 50, 0.5);
    border-radius: 3px;
}

.word-library-list::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 140, 0.5);
    border-radius: 3px;
}

.word-library-list::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 140, 0.7);
}

.word-library-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
}

.word-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(40, 40, 70, 0.4);
    border: 1px solid rgba(60, 60, 100, 0.3);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.word-item:hover {
    background: rgba(50, 50, 90, 0.6);
    border-color: rgba(80, 80, 120, 0.5);
}

.word-item.item-hidden {
    opacity: 0.5;
    background: rgba(30, 30, 50, 0.3);
}

.word-item.item-prioritized {
    border-color: var(--accent-gold);
    background: rgba(255, 200, 100, 0.1);
}

.word-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.word-item-mastery {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.word-item-mastery.mastery-new {
    background: #666;
}

.word-item-mastery.mastery-learning {
    background: #ff6b6b;
}

.word-item-mastery.mastery-reviewing {
    background: #ffa500;
}

.word-item-mastery.mastery-familiar {
    background: #4dc3ff;
}

.word-item-mastery.mastery-mastered {
    background: #5dde5d;
}

.word-item-type {
    font-size: 12px;
    flex-shrink: 0;
}

.word-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.word-item-target {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.word-item-english {
    font-size: 10px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.word-item-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.word-item-accuracy {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-gold);
}

.word-item-reviews {
    font-size: 9px;
    color: var(--text-dim);
}

.word-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.word-item:hover .word-item-actions,
.word-item:active .word-item-actions,
.word-item.show-actions .word-item-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Also show actions when item is prioritized or hidden (so user can see/toggle state) */
.word-item.item-prioritized .word-item-actions,
.word-item.item-hidden .word-item-actions {
    opacity: 1;
    pointer-events: auto;
}

.word-item-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(50, 50, 80, 0.6);
    border: 1px solid rgba(70, 70, 110, 0.5);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s ease;
    color: var(--text-dim);
}

.word-item-btn:hover {
    background: rgba(70, 70, 110, 0.8);
    border-color: rgba(90, 90, 130, 0.7);
    color: var(--text);
}

.word-item-btn.btn-priority.active {
    background: linear-gradient(145deg, #ffc107, #ff9800);
    border-color: #ffc107;
    color: #000;
}

.word-item-btn.btn-hide.active {
    background: rgba(100, 100, 140, 0.8);
    border-color: rgba(120, 120, 160, 0.7);
    color: var(--text);
}

.word-library-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(30, 28, 50, 0.8);
    border-top: 1px solid rgba(100, 100, 140, 0.3);
}

.word-library-footer-stats {
    display: flex;
    gap: 16px;
}

.footer-stat {
    font-size: 10px;
    color: var(--text-dim);
}

.btn-close-library {
    padding: 6px 16px;
    background: linear-gradient(145deg, #4a4a6a, #3a3a5a);
    border: 1px solid rgba(80, 80, 120, 0.5);
    border-radius: 4px;
    color: var(--text);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-library:hover {
    background: linear-gradient(145deg, #5a5a7a, #4a4a6a);
}

/* ===== MENU PROGRESS PANEL ===== */
.menu-main-content {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    justify-content: center;
}

.menu-progress-panel {
    background: rgba(30, 30, 53, 0.9);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    min-width: 200px;
    max-width: 240px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.menu-progress-panel.collapsed .progress-content {
    display: none;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

.menu-progress-panel.collapsed .progress-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.progress-title {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-cyan);
}

.progress-toggle {
    font-size: 10px;
    color: var(--text-dim);
    transition: transform 0.2s ease;
    cursor: pointer;
}

.progress-toggle:hover {
    color: var(--text);
}

.progress-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.progress-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: rgba(40, 40, 70, 0.6);
    border-radius: 6px;
    border: 1px solid rgba(60, 60, 100, 0.4);
}

.progress-stat .stat-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-gold);
    line-height: 1;
}

.progress-stat .stat-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-top: 2px;
}

.progress-mastery {
    margin-bottom: 10px;
}

.mastery-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(20, 20, 40, 0.8);
    margin-bottom: 6px;
}

.mastery-segment {
    height: 100%;
    transition: width 0.5s ease;
}

.mastery-segment.mastery-learning {
    background: linear-gradient(180deg, #ff6b6b, #e05555);
}

.mastery-segment.mastery-reviewing {
    background: linear-gradient(180deg, #ffa500, #e09000);
}

.mastery-segment.mastery-familiar {
    background: linear-gradient(180deg, #4dc3ff, #3aa8e0);
}

.mastery-segment.mastery-mastered {
    background: linear-gradient(180deg, #5dde5d, #4ac44a);
}

.mastery-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 8px;
    color: var(--text-dim);
}

.legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.legend-dot.learning {
    background: #ff6b6b;
}

.legend-dot.reviewing {
    background: #ffa500;
}

.legend-dot.familiar {
    background: #4dc3ff;
}

.legend-dot.mastered {
    background: #5dde5d;
}

.progress-streaks {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.streak-item {
    font-size: 9px;
    color: var(--text);
}

/* ===== BLIND SELECT - BALATRO STYLE ===== */
.blind-select-screen-balatro {
    display: grid;
    grid-template-columns: calc(120px + var(--notch-padding-left)) 1fr 70px;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 50% 70%, rgba(20, 60, 40, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 30%, rgba(40, 80, 50, 0.3) 0%, transparent 40%),
        linear-gradient(180deg, #1a3326 0%, #0d1f15 50%, #0a1a10 100%);
    overflow: visible; /* Changed from hidden to allow consumable tooltips to show */
}

.sidebar-header-label {
    background: linear-gradient(180deg, #2a2a40 0%, #1e1e30 100%);
    border: 2px solid #3a3a55;
    border-radius: 4px;
    padding: 8px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.blind-select-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 10px;
    gap: 10px;
}

.blind-options-balatro {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    align-items: stretch;
}

.blind-card-balatro {
    width: 160px;
    padding: 10px;
    padding-top: 8px;
    background: linear-gradient(180deg, #2a3a45 0%, #1e2830 100%);
    border: 3px solid #3a4a55;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    transition: all 0.2s ease;
    min-height: 220px;
}

.blind-card-balatro.blind-current {
    border-color: #4a9eff;
    box-shadow: 0 0 15px rgba(74, 158, 255, 0.4);
}

.blind-card-balatro.blind-upcoming {
    opacity: 0.7;
    border-color: #555;
}

.blind-card-balatro.blind-completed {
    opacity: 0.5;
    border-color: #4caf50;
}

.blind-boss-card {
    border-color: #8b2942;
}

.blind-boss-card.blind-current {
    border-color: #ff4466;
    box-shadow: 0 0 15px rgba(255, 68, 102, 0.4);
}

.upcoming-label {
    background: rgba(0, 0, 0, 0.7);
    color: #aaa;
    font-size: 10px;
    font-style: italic;
    text-align: center;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.btn-select-balatro {
    background: linear-gradient(180deg, #ff9f43 0%, #e67e22 100%);
    border: 2px solid #d35400;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 3px 0 #a04000;
    transition: all 0.1s ease;
    text-transform: capitalize;
}

.btn-select-balatro:hover {
    background: linear-gradient(180deg, #ffb366 0%, #ff9f43 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #a04000;
}

.btn-select-balatro:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #a04000;
}

.btn-boss-select {
    background: linear-gradient(180deg, #ff6b6b 0%, #ee5a5a 100%);
    border-color: #c0392b;
    box-shadow: 0 3px 0 #922b21;
}

.blind-type-label {
    font-size: 11px;
    font-weight: 700;
    color: #4a9eff;
    text-transform: uppercase;
    padding: 4px 10px;
    background: rgba(74, 158, 255, 0.15);
    border-radius: 4px;
    text-align: center;
}

.blind-type-label.boss-label {
    color: #ff4466;
    background: rgba(255, 68, 102, 0.15);
    font-size: 10px;
}

.blind-chip-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
    border: 3px solid;
    flex-shrink: 0;
}

.blind-chip-small {
    background: linear-gradient(135deg, #4a9eff 0%, #2563eb 100%);
    border-color: #1d4ed8;
}

.blind-chip-small::before {
    content: 'S';
    font-size: 18px;
    font-weight: 900;
    color: #fff;
}

.blind-chip-big {
    background: linear-gradient(135deg, #c9a227 0%, #8b6914 100%);
    border-color: #5c4a0a;
}

.blind-chip-big::before {
    content: 'B';
    font-size: 18px;
    font-weight: 900;
    color: #1a1a2e;
}

.blind-chip-boss {
    background: linear-gradient(135deg, #ff4466 0%, #cc2244 100%);
    border-color: #991133;
}

.blind-chip-boss::before {
    content: '♥';
    font-size: 20px;
    color: #fff;
}

.blind-score-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.blind-score-info .score-label {
    font-size: 9px;
    color: #888;
}

.blind-score-info .score-value {
    font-size: 18px;
    font-weight: 900;
    color: #4a9eff;
}

.blind-score-info .score-value.boss-score {
    color: #ff4466;
}

.blind-score-info .reward-label {
    font-size: 9px;
    color: #f4d03f;
}

.boss-description {
    font-size: 9px;
    color: #ff9f43;
    text-align: center;
    line-height: 1.3;
    padding: 4px;
    background: rgba(255, 159, 67, 0.1);
    border-radius: 4px;
}

.blind-or-divider {
    font-size: 10px;
    color: #666;
    margin: 2px 0;
}

.btn-skip-balatro {
    background: linear-gradient(180deg, #dc3545 0%, #c82333 100%);
    border: 2px solid #a71d2a;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-skip-balatro::before {
    content: '🎲';
    font-size: 12px;
}

.btn-skip-balatro:hover {
    background: linear-gradient(180deg, #e74c5c 0%, #dc3545 100%);
}

/* Skip blind container - groups button and tag */
.skip-blind-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Skip tag reward badge - prominent display */
.skip-tag-reward-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(30, 30, 40, 0.8) 100%);
    border: 2px solid var(--tag-color, #888);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.skip-tag-reward-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px var(--tag-color, #888);
}

.skip-tag-icon {
    font-size: 14px;
}

.skip-tag-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--tag-color, #fff);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Tag tooltip - appears on hover/click */
.skip-tag-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(20, 20, 30, 0.98) 0%, rgba(10, 10, 20, 0.98) 100%);
    border: 2px solid var(--tag-color, #888);
    border-radius: 8px;
    padding: 12px 16px;
    min-width: 180px;
    max-width: 220px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px var(--tag-color, rgba(136, 136, 136, 0.3));
}

.skip-tag-reward-badge:hover .skip-tag-tooltip,
.skip-tag-reward-badge.tooltip-active .skip-tag-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(-4px);
    animation: tooltipSpringUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Spring pop-up animation for tooltips appearing above elements */
@keyframes tooltipSpringUp {
    0% { 
        opacity: 0;
        transform: translateX(-50%) translateY(5px) scale(0.7);
    }
    50% { 
        opacity: 1;
        transform: translateX(-50%) translateY(-8px) scale(1.03);
    }
    100% { 
        opacity: 1;
        transform: translateX(-50%) translateY(-4px) scale(1);
    }
}

.skip-tag-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--tag-color, #888);
}

.skip-tag-tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.skip-tag-tooltip-icon {
    font-size: 18px;
}

.skip-tag-tooltip-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--tag-color, #fff);
}

.skip-tag-tooltip-desc {
    font-size: 11px;
    color: #ccc;
    line-height: 1.5;
}

/* Legacy classes for backwards compatibility */
.skip-tag-reward {
    margin-top: 4px;
}

.skip-tag-badge-small {
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 3px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease;
}

.skip-tag-badge-small:hover {
    transform: scale(1.05);
}

.skip-tag-badge-small:hover .skip-tag-tooltip,
.skip-tag-badge-small.tooltip-active .skip-tag-tooltip {
    opacity: 1;
    pointer-events: auto;
}

.blind-status-text {
    font-size: 9px;
    color: #666;
    font-style: italic;
}

.boss-action-area {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.up-the-ante {
    font-size: 11px;
    font-weight: 700;
    color: #f4d03f;
}

.ante-desc {
    font-size: 8px;
    color: #888;
    line-height: 1.3;
}

.boss-reroll-area {
    margin-top: 8px;
    margin-bottom: 6px;
    text-align: center;
}

.btn-boss-reroll {
    background: linear-gradient(180deg, #6c5ce7 0%, #5b4cdb 100%);
    border: 2px solid #4834d4;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    box-shadow: 0 2px 0 #3d2bbd;
    transition: all 0.1s ease;
}

.btn-boss-reroll:hover:not(.disabled) {
    background: linear-gradient(180deg, #7d6ef0 0%, #6c5ce7 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #3d2bbd;
}

.btn-boss-reroll:active:not(.disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #3d2bbd;
}

.btn-boss-reroll.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #666;
    border-color: #555;
    box-shadow: none;
}

.boss-reroll-info {
    font-size: 9px;
    color: #aaa;
    margin-top: 4px;
}

.blind-select-tags-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.owned-tag-badge {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--tag-color, #ff6b6b);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--tag-color, #ff6b6b);
}

.deck-display-sidebar {
    margin-top: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    border-radius: 6px;
}

.deck-display-sidebar:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.deck-card-back {
    width: 45px;
    height: 63px;
    background: linear-gradient(135deg, #8b2942 0%, #5c1a2a 100%);
    border: 2px solid #fff;
    border-radius: 4px;
    position: relative;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.deck-card-back::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.05) 2px,
        rgba(255, 255, 255, 0.05) 4px
    );
}

.deck-count {
    font-size: 10px;
    color: #888;
    font-weight: 600;
}

.btn-abandon-balatro {
    position: absolute;
    bottom: 10px;
    right: 80px;
    background: linear-gradient(180deg, #dc3545 0%, #c82333 100%);
    border: 2px solid #a71d2a;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 100;
}

.btn-abandon-balatro:hover {
    background: linear-gradient(180deg, #e74c5c 0%, #dc3545 100%);
}

/* Legacy styles kept for backwards compatibility */
.section-title {
    text-align: center;
    font-size: 14px;
    padding: 10px;
    color: var(--accent-cyan);
    text-shadow: var(--glow-blue);
    letter-spacing: 0.1em;
    flex-shrink: 0;
}

/* ===== GAME SCREEN ===== */
.game-screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    /* Balatro-style felt table with subtle pattern */
    background: 
        radial-gradient(ellipse at 50% 100%, rgba(30, 50, 80, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 0%, rgba(40, 20, 60, 0.3) 0%, transparent 40%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.01) 2px,
            rgba(255, 255, 255, 0.01) 4px
        ),
        linear-gradient(180deg, #0f0f1e 0%, #0a0a15 50%, #0d0d1a 100%);
    overflow: visible;
}

.game-area {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: visible;
    min-height: 0;
    position: relative;
    z-index: 10;
}

.score-panel {
    width: 180px;
    padding: 8px;
    /* Add left padding for iPhone notch/Dynamic Island */
    padding-left: var(--notch-padding-left);
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    overflow-y: auto;
}

.blind-info {
    text-align: center;
}

.blind-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 4px;
}

.boss-info {
    font-size: 8px;
    color: var(--accent-orange);
    margin-bottom: 4px;
    line-height: 1.2;
}

.boss-label {
    font-weight: 700;
}

.score-requirement {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}

.score-current {
    font-size: 16px;
    font-weight: 800;
    color: var(--chips-color);
    transition: color var(--transition-fast);
}

.score-current.score-met {
    color: var(--accent-green);
    text-shadow: var(--glow-green);
}

.score-divider {
    color: var(--text-dim);
    font-size: 12px;
}

.score-target {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-red);
}

.score-bar-wrap {
    width: 100%;
    height: 6px;
    background: var(--bg-dark);
    border-radius: 3px;
    overflow: hidden;
}

.score-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 3px;
    transition: width var(--transition-med);
    box-shadow: 0 0 8px rgba(74, 158, 255, 0.4);
}

.round-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-row .label {
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.info-row .val {
    font-weight: 700;
    font-size: 14px;
}

.hands-val {
    color: var(--accent-blue);
}

.discards-val {
    color: var(--accent-red);
}

/* Hand Preview */
.hand-preview {
    text-align: center;
    padding: 6px;
    background: var(--bg-dark);
    border-radius: 6px;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all var(--transition-fast);
}

.hand-preview.empty {
    color: var(--text-dim);
    font-size: 9px;
}

.hand-type-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-cyan);
}

.hand-level {
    font-size: 8px;
    color: var(--accent-purple);
}

.hand-base-score {
    font-size: 10px;
}

.chips-val {
    color: var(--chips-color);
    font-weight: 700;
}

.mult-val {
    color: var(--mult-color);
    font-weight: 700;
}

/* Scoring Display */
.scoring-display {
    display: none;
    text-align: center;
    padding: 12px;
    background: var(--bg-dark);
    border-radius: 8px;
    border: 1px solid var(--accent-cyan);
}

.scoring-display.active {
    display: block;
    animation: scoreSlideIn 0.3s ease;
}

@keyframes scoreSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.score-anim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.score-hand-type {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-cyan);
    text-shadow: var(--glow-blue);
}

.score-calc {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
}

.score-chips {
    color: var(--chips-color);
    min-width: 40px;
    text-align: right;
}

.score-x {
    color: var(--text-dim);
}

.score-mult {
    color: var(--mult-color);
    min-width: 40px;
    text-align: left;
}

.score-eq {
    color: var(--text-dim);
}

.score-total {
    color: var(--accent-gold);
    font-size: 20px;
    min-width: 60px;
    transition: all 0.3s ease;
}

.score-total.flash {
    animation: totalFlash 0.5s ease;
    text-shadow: 0 0 20px rgba(255, 215, 64, 0.8);
}

@keyframes totalFlash {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.bump {
    animation: scoreBump 0.15s ease;
}

@keyframes scoreBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.xmult-flash {
    animation: xmultFlash 0.4s ease;
    color: var(--accent-red) !important;
    text-shadow: 0 0 15px rgba(255, 68, 102, 0.8) !important;
}

@keyframes xmultFlash {
    0% { transform: scale(1); }
    25% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Consumables - Tarot card style */
.consumables {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    justify-content: center;
}

.consumables-label {
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

/* Tarot-style consumable cards */
.consumable-card {
    width: 52px;
    height: 78px;
    padding: 4px;
    background: linear-gradient(180deg, #5a3a7a 0%, #3a2050 100%);
    border: 2px solid #9060b0;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Inner decorative frame */
.consumable-card::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    pointer-events: none;
}

/* Corner decorations */
.consumable-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 5px 5px, rgba(255, 220, 150, 0.3) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(255, 220, 150, 0.3) 0%, transparent 4px),
        radial-gradient(circle at 5px calc(100% - 5px), rgba(255, 220, 150, 0.3) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(255, 220, 150, 0.3) 0%, transparent 4px);
    pointer-events: none;
}

.consumable-card:hover {
    box-shadow: 0 6px 16px rgba(100, 50, 150, 0.5), 0 0 12px rgba(144, 96, 176, 0.4);
    transform: translateY(-4px) scale(1.05);
}

.consumable-name {
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 1.1;
    position: relative;
    z-index: 1;
}

.consumable-desc {
    font-size: 6px;
    color: var(--text-dim);
    margin-top: 2px;
    text-align: center;
    line-height: 1.1;
    position: relative;
    z-index: 1;
}

/* Spectral cards - ethereal cyan theme */
.consumable-spectral {
    background: linear-gradient(180deg, #1a5060 0%, #082838 100%);
    border-color: #40a0b0;
}

.consumable-spectral::before {
    border-color: rgba(100, 200, 220, 0.25);
}

.consumable-spectral::after {
    background: 
        radial-gradient(circle at 5px 5px, rgba(100, 220, 230, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(100, 220, 230, 0.4) 0%, transparent 4px),
        radial-gradient(circle at 5px calc(100% - 5px), rgba(100, 220, 230, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(100, 220, 230, 0.4) 0%, transparent 4px);
}

.consumable-spectral .consumable-name {
    color: #b0f0ff;
}

.consumable-spectral:hover {
    box-shadow: 0 6px 16px rgba(30, 100, 120, 0.5), 0 0 12px rgba(64, 160, 176, 0.4);
}

/* Planet cards - cosmic blue theme */
.consumable-planet {
    background: linear-gradient(180deg, #1e4a6f 0%, #0a2545 100%);
    border-color: #4080c0;
}

.consumable-planet::before {
    border-color: rgba(100, 180, 255, 0.25);
}

.consumable-planet::after {
    background: 
        radial-gradient(circle at 5px 5px, rgba(100, 180, 255, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(100, 180, 255, 0.4) 0%, transparent 4px),
        radial-gradient(circle at 5px calc(100% - 5px), rgba(100, 180, 255, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(100, 180, 255, 0.4) 0%, transparent 4px);
}

.consumable-planet .consumable-name {
    color: #a0d0ff;
}

.consumable-planet:hover {
    box-shadow: 0 6px 16px rgba(30, 80, 150, 0.5), 0 0 12px rgba(64, 128, 192, 0.4);
}

/* ===== CONSUMABLES BAR (for pack opening) - Tarot card style ===== */
.consumables-bar {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-mid);
    border-bottom: 1px solid var(--border);
    min-height: 58px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
}

.consumables-empty {
    color: var(--text-dim);
    font-size: 9px;
    width: 100%;
    text-align: center;
}

.consumables-bar-label {
    font-size: 8px;
    color: var(--text-dim);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.consumables-bar-cards {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Tarot-style consumable bar cards */
.consumable-bar-card {
    width: 48px;
    height: 72px;
    padding: 4px;
    background: linear-gradient(180deg, #5a3a7a 0%, #3a2050 100%);
    border: 2px solid #9060b0;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    box-shadow: 
        0 3px 0 #2a1040,
        0 4px 8px rgba(0,0,0,0.4);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Inner decorative frame */
.consumable-bar-card::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    pointer-events: none;
}

/* Corner decorations */
.consumable-bar-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 5px 5px, rgba(255, 220, 150, 0.3) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(255, 220, 150, 0.3) 0%, transparent 4px),
        radial-gradient(circle at 5px calc(100% - 5px), rgba(255, 220, 150, 0.3) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(255, 220, 150, 0.3) 0%, transparent 4px);
    pointer-events: none;
}

.consumable-bar-card:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 
        0 8px 0 #2a1040,
        0 12px 24px rgba(0,0,0,0.5),
        0 0 18px rgba(180, 100, 220, 0.5);
    border-color: var(--accent-purple-light);
    z-index: 100;
}

/* Planet cards - cosmic blue theme */
.consumable-bar-card.consumable-planet {
    background: linear-gradient(180deg, #1e4a6f 0%, #0a2545 100%);
    border-color: #4080c0;
    box-shadow: 
        0 3px 0 #0a1528,
        0 4px 8px rgba(0,0,0,0.4);
}

.consumable-bar-card.consumable-planet::before {
    border-color: rgba(100, 180, 255, 0.25);
}

.consumable-bar-card.consumable-planet::after {
    background: 
        radial-gradient(circle at 5px 5px, rgba(100, 180, 255, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(100, 180, 255, 0.4) 0%, transparent 4px),
        radial-gradient(circle at 5px calc(100% - 5px), rgba(100, 180, 255, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(100, 180, 255, 0.4) 0%, transparent 4px);
}

.consumable-bar-card.consumable-planet:hover {
    box-shadow: 
        0 8px 0 #0a1528,
        0 12px 24px rgba(0,0,0,0.5),
        0 0 18px rgba(100, 150, 220, 0.5);
    border-color: var(--accent-cyan);
}

/* Spectral cards - ethereal cyan/teal theme */
.consumable-bar-card.consumable-spectral {
    background: linear-gradient(180deg, #1a5060 0%, #082838 100%);
    border-color: #40a0b0;
    box-shadow: 
        0 3px 0 #052028,
        0 4px 8px rgba(0,0,0,0.4);
}

.consumable-bar-card.consumable-spectral::before {
    border-color: rgba(100, 200, 220, 0.25);
}

.consumable-bar-card.consumable-spectral::after {
    background: 
        radial-gradient(circle at 5px 5px, rgba(100, 220, 230, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(100, 220, 230, 0.4) 0%, transparent 4px),
        radial-gradient(circle at 5px calc(100% - 5px), rgba(100, 220, 230, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(100, 220, 230, 0.4) 0%, transparent 4px);
}

.consumable-bar-card.consumable-spectral:hover {
    box-shadow: 
        0 8px 0 #052028,
        0 12px 24px rgba(0,0,0,0.5),
        0 0 18px rgba(100, 200, 230, 0.5);
}

/* Tarot cards - mystical purple theme */
.consumable-bar-card.consumable-tarot {
    background: linear-gradient(180deg, #5a3a7a 0%, #3a2050 100%);
    border-color: #9060b0;
}

/* Selected consumable bar card state (two-click activation) */
.consumable-bar-card.consumable-selected {
    transform: translateY(-8px) scale(1.08);
    border-color: var(--accent-cyan) !important;
    box-shadow: 
        0 8px 0 rgba(0, 0, 0, 0.3),
        0 12px 24px rgba(0,0,0,0.5),
        0 0 20px rgba(0, 229, 255, 0.6),
        0 0 40px rgba(0, 229, 255, 0.3);
    z-index: 10;
}

.consumable-bar-card.consumable-selected::after {
    box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.4);
}

.consumable-bar-name {
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.1;
    white-space: normal;
    word-wrap: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

.consumable-bar-desc {
    display: none; /* Hide description in compact bar view */
}

.consumable-sell-btn {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-green);
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 7px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
}

.consumable-bar-card:hover .consumable-sell-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(2px);
}

.consumable-sell-btn:hover {
    background: var(--accent-green-light);
    transform: translateX(-50%) translateY(2px) scale(1.1);
}

/* Consumable spawn animation (for The Emperor, The High Priestess, etc.) */
.consumable-spawn {
    animation: consumable-spawn-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--spawn-delay, 0ms);
    opacity: 0;
    transform: scale(0) rotateY(180deg);
}

@keyframes consumable-spawn-in {
    0% {
        opacity: 0;
        transform: scale(0) rotateY(180deg);
        filter: brightness(3) blur(4px);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotateY(90deg);
        filter: brightness(2) blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
        filter: brightness(1) blur(0);
    }
}

@keyframes consumable-particle-converge {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
        left: var(--target-x);
        top: var(--target-y);
    }
}

@keyframes consumable-flash-fade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

/* ===== SPECTRAL CARD CREATION ANIMATIONS ===== */
@keyframes spectral-glow-pulse {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes spectral-particle-converge {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
        left: var(--target-x);
        top: var(--target-y);
    }
}

@keyframes created-card-appear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-10deg);
    }
    40% {
        opacity: 1;
        transform: scale(1.15) rotate(var(--final-rotation));
    }
    60% {
        transform: scale(0.95) rotate(var(--final-rotation)) translate(var(--final-x), var(--final-y));
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(var(--final-rotation)) translate(var(--final-x), var(--final-y));
    }
}

@keyframes enhancement-pulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4), inset 0 0 8px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.7), inset 0 0 15px rgba(255, 215, 0, 0.4);
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Destroyed card animations */
@keyframes destroyed-card-rise {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    30% {
        opacity: 1;
        transform: translateY(0) scale(1.05);
    }
    60% {
        transform: translateY(-40px) scale(1.1);
        box-shadow: 0 8px 30px rgba(255, 50, 50, 0.5);
    }
    100% {
        transform: translateY(-60px) scale(1.15);
        box-shadow: 0 12px 40px rgba(255, 50, 50, 0.7);
    }
}

@keyframes destroyed-card-shatter {
    0% {
        opacity: 1;
        transform: translateY(-60px) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(1.5);
        filter: blur(4px);
    }
}

@keyframes card-fragment-explode {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--target-x), var(--target-y)) rotate(var(--rotation)) scale(0.3);
    }
}

@keyframes destruction-flash {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes deck-receive-glow {
    0% {
        opacity: 1;
        box-shadow: 0 0 40px rgba(100, 200, 255, 1), inset 0 0 25px rgba(100, 200, 255, 0.6);
    }
    100% {
        opacity: 0;
        box-shadow: 0 0 60px rgba(100, 200, 255, 0), inset 0 0 35px rgba(100, 200, 255, 0);
    }
}

/* Destroyed card display styles */
.destroyed-card-display {
    font-weight: bold;
}

.destroyed-card-display.suit-red {
    color: #dc3545;
}

.destroyed-card-display.suit-dark {
    color: #1a1a2e;
}

.destroyed-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4px;
}

.destroyed-card-rank {
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
}

.destroyed-card-suit {
    font-size: 32px;
    line-height: 1;
}

/* ===== SEAL APPLICATION ANIMATIONS ===== */
@keyframes seal-descend {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, calc(-50% + var(--target-y))) scale(0.8) rotate(0deg);
        opacity: 0.8;
    }
}

@keyframes seal-particle-fade {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
}

@keyframes seal-impact-flash {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes seal-ripple {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4);
    }
}

@keyframes seal-sparkle-burst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(0);
    }
}

/* ===== EDITION APPLICATION ANIMATIONS ===== */
@keyframes edition-energy-spiral {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        left: var(--center-x);
        top: var(--center-y);
        transform: translate(-50%, -50%) scale(0);
    }
}

@keyframes edition-apply-flash {
    0% {
        opacity: 0;
        transform: scale(0.5);
        filter: brightness(2);
    }
    30% {
        opacity: 0.9;
        transform: scale(1.1);
        filter: brightness(2);
    }
    60% {
        opacity: 0.7;
        transform: scale(1);
        filter: brightness(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
        filter: brightness(1);
    }
}

@keyframes edition-shimmer {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--shimmer-x)), calc(-50% + var(--shimmer-y))) scale(0);
    }
}

/* ===== UNIVERSAL CARD DESTRUCTION ANIMATIONS ===== */
@keyframes destruction-card-rise {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    30% {
        opacity: 1;
        transform: scale(1.05) translateY(0);
    }
    60% {
        transform: scale(1.1) translateY(-50px);
        box-shadow: 0 8px 30px rgba(255, 100, 50, 0.6), 0 0 40px rgba(255, 50, 0, 0.4);
    }
    100% {
        opacity: 1;
        transform: scale(1.15) translateY(-70px);
        box-shadow: 0 12px 40px rgba(255, 100, 50, 0.8), 0 0 60px rgba(255, 50, 0, 0.6);
    }
}

@keyframes destruction-card-shatter {
    0% {
        opacity: 1;
        transform: scale(1.15) translateY(-70px);
    }
    100% {
        opacity: 0;
        transform: scale(1.5) translateY(-70px);
        filter: blur(4px) brightness(2);
    }
}

@keyframes destruction-glow {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    40% {
        opacity: 1;
        transform: scale(1) translateY(-30px);
    }
    100% {
        opacity: 0;
        transform: scale(1.3) translateY(-50px);
    }
}

@keyframes destruction-fragment {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--frag-x), var(--frag-y)) rotate(var(--frag-rotation)) scale(0.2);
    }
}

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

@keyframes destruction-flash {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.3);
    }
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

@keyframes screen-destruction-flash {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes screen-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Destruction card display styles */
.destruction-card {
    font-weight: bold;
}

.destruction-card.suit-red {
    color: #dc3545;
}

.destruction-card.suit-dark {
    color: #1a1a2e;
}

.destruction-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4px;
}

.destruction-card-rank {
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
}

.destruction-card-suit {
    font-size: 32px;
    line-height: 1;
}

/* Created playing card styles */
.created-playing-card {
    font-weight: bold;
}

.created-playing-card.suit-red {
    color: #dc3545;
}

.created-playing-card.suit-dark {
    color: #1a1a2e;
}

.created-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4px;
}

.created-card-rank {
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
}

.created-card-suit {
    font-size: 28px;
    line-height: 1;
}

/* Legacy text-only enhancement label (kept for backwards compatibility) */
.created-card-enhancement {
    position: absolute;
    bottom: 2px;
    font-size: 8px;
    color: #b8860b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.8);
}

/* Created card center suit symbol */
.created-card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    opacity: 0.15;
    z-index: 0;
}

/* Created card enhancement badge (consistent with gameplay cards) */
.created-card-enhance-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    line-height: 1;
    z-index: 5;
}

.created-card-enhance-badge .badge-icon {
    font-size: 12px;
}

.created-card-enhance-badge .badge-text {
    font-size: 7px;
    font-weight: bold;
    color: #333;
}

/* Created card seal badge */
.created-card-seal-badge {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    line-height: 1;
    z-index: 5;
}

/* Created card edition indicator */
.created-card-edition {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 10px;
    line-height: 1;
    z-index: 5;
}

/* Created card enhancement color styling (consistent with gameplay) */
.created-playing-card.enhance-bonus { border-color: #4a9eff !important; background: linear-gradient(145deg, #d0e8ff 0%, #a8d4ff 100%) !important; }
.created-playing-card.enhance-mult { border-color: #ff6666 !important; background: linear-gradient(145deg, #ffd8d8 0%, #ffb8b8 100%) !important; }
.created-playing-card.enhance-wild { border-color: #ffaa44 !important; background: linear-gradient(145deg, #ffe8c8 0%, #ffd8a8 100%) !important; }
.created-playing-card.enhance-glass { border-color: #aa88ff !important; background: linear-gradient(145deg, #e8e8ff 0%, #d0d0ff 100%) !important; }
.created-playing-card.enhance-steel { border-color: #88aacc !important; background: linear-gradient(145deg, #e0e8f0 0%, #c8d8e8 100%) !important; }
.created-playing-card.enhance-stone { border-color: #888480 !important; background: linear-gradient(145deg, #e0dcd8 0%, #c8c4c0 100%) !important; }
.created-playing-card.enhance-gold { border-color: #ffcc00 !important; background: linear-gradient(145deg, #fff0b0 0%, #ffe070 100%) !important; box-shadow: 0 0 10px rgba(255, 204, 0, 0.5) !important; }
.created-playing-card.enhance-lucky { border-color: #44dd44 !important; background: linear-gradient(145deg, #d0ffd0 0%, #a8ffa8 100%) !important; }

/* ===== BALATRO-STYLE GAME SCREEN ===== */
.game-screen-balatro {
    display: grid;
    /* First column includes notch padding area */
    grid-template-columns: calc(120px + var(--notch-padding-left)) 1fr 70px;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 50% 70%, rgba(20, 60, 40, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 30%, rgba(40, 80, 50, 0.3) 0%, transparent 40%),
        linear-gradient(180deg, #1a3326 0%, #0d1f15 50%, #0a1a10 100%);
    overflow: visible; /* Changed from hidden to allow consumable tooltips to show */
    /* Smaller cards for game screen */
    --card-width: 48px;
    --card-height: 66px;
}

/* Left Sidebar - Ultra Compact */
.game-left-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 6px;
    /* Add left padding for iPhone notch/Dynamic Island */
    padding-left: max(6px, var(--notch-padding-left));
    background: rgba(0, 0, 0, 0.3);
    border-right: 2px solid rgba(255, 255, 255, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start;
}

.blind-badge {
    background: linear-gradient(180deg, #d4a853 0%, #a07830 100%);
    border: 2px solid #8b6914;
    border-radius: 4px;
    padding: 6px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.blind-badge-name {
    font-size: 11px;
    font-weight: 900;
    color: #1a1a2e;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    margin-bottom: 2px;
}

.blind-badge-chip {
    width: 22px;
    height: 22px;
    margin: 2px auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #c9a227 0%, #8b6914 100%);
    border: 2px solid #5c4a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.blind-badge-chip::before {
    content: '⚙';
    font-size: 11px;
    color: #1a1a2e;
}

.blind-badge-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 8px;
    margin-top: 2px;
}

.blind-badge-label {
    color: #1a1a2e;
    opacity: 0.8;
    font-size: 8px;
}

.blind-badge-score {
    font-size: 14px;
    font-weight: 900;
    color: #1a1a2e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.blind-badge-reward {
    color: #1a1a2e;
    opacity: 0.7;
    font-size: 8px;
}

/* Boss blind effect description */
.boss-blind-badge {
    background: linear-gradient(180deg, #e74c3c 0%, #a03020 100%);
    border-color: #8b2020;
}

.blind-badge-effect {
    font-size: 8px;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    padding: 4px 5px;
    margin: 4px 0;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    min-height: 20px;
}

.sidebar-score-panel {
    background: linear-gradient(180deg, #2a2a40 0%, #1e1e30 100%);
    border: 2px solid #3a3a55;
    border-radius: 3px;
    padding: 6px 4px;
    text-align: center;
}

.sidebar-score-label {
    font-size: 8px;
    color: #888;
    text-transform: uppercase;
    line-height: 1.2;
}

.sidebar-score-value {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    margin-top: 2px;
}

.sidebar-score-value.score-met {
    color: var(--accent-green);
    text-shadow: 0 0 10px var(--accent-green);
}

.sidebar-hand-display {
    background: linear-gradient(180deg, #2a2a40 0%, #1e1e30 100%);
    border: 2px solid #3a3a55;
    border-radius: 3px;
    padding: 6px;
}

.hand-type-badge {
    font-size: 11px;
    font-weight: 700;
    color: #f4d03f;
    text-align: center;
    margin-bottom: 4px;
}

.hand-type-badge .hand-lvl {
    font-size: 9px;
    color: #aaa;
    font-weight: 400;
}

.chips-mult-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.chips-box {
    background: linear-gradient(180deg, #4a9eff 0%, #2563eb 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 2px;
    box-shadow: 0 2px 0 #1d4ed8;
}

.mult-x {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.mult-box {
    background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 2px;
    box-shadow: 0 2px 0 #9f1239;
}

.sidebar-stats-row {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 2px 6px;
    background: linear-gradient(180deg, #2a2a40 0%, #1e1e30 100%);
    border: 2px solid #3a3a55;
    border-radius: 3px;
    padding: 6px 8px;
    align-items: center;
    justify-content: center;
}

.sidebar-stats-row .stat-label {
    font-size: 8px;
    color: #888;
    text-transform: uppercase;
}

.sidebar-stats-row .stat-value {
    font-size: 14px;
    font-weight: 900;
    color: #4a9eff;
}

.sidebar-stats-row .stat-value.hands-val { color: #4a9eff; }
.sidebar-stats-row .stat-value.discards-val { color: #f43f5e; }

.sidebar-btn-info {
    background: linear-gradient(180deg, #3a3a55 0%, #2a2a40 100%);
    border: 2px solid #4a4a65;
    color: #fff;
    font-weight: 700;
    font-size: 9px;
    padding: 8px 4px;
    border-radius: 3px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
}

.sidebar-btn-info:hover {
    background: linear-gradient(180deg, #4a4a65 0%, #3a3a55 100%);
}

.sidebar-money {
    background: linear-gradient(180deg, #f4d03f 0%, #c9a227 100%);
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
    padding: 8px 4px;
    border-radius: 3px;
    border: 2px solid #8b6914;
    box-shadow: 0 2px 0 #5c4a0a;
}

.sidebar-btn-options {
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
    border: 2px solid #92400e;
    color: #fff;
    font-weight: 700;
    font-size: 9px;
    padding: 8px 4px;
    border-radius: 3px;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
}

.sidebar-btn-options:hover {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

.sidebar-ante-round {
    display: flex;
    gap: 4px;
    background: linear-gradient(180deg, #1e1e30 0%, #141420 100%);
    border: 2px solid #2a2a40;
    border-radius: 3px;
    padding: 6px;
}

.sidebar-ante-round .ar-item {
    flex: 1;
    text-align: center;
}

.sidebar-ante-round .ar-label {
    display: block;
    font-size: 8px;
    color: #666;
    text-transform: uppercase;
}

.sidebar-ante-round .ar-value {
    font-size: 12px;
    font-weight: 900;
    color: #fff;
}

.sidebar-ante-round .ar-max {
    font-size: 8px;
    color: #666;
}

/* Endless Mode Badges */
.endless-badge {
    background: linear-gradient(180deg, #ff6b35 0%, #cc4400 100%);
    color: #ffffff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(255, 107, 53, 0.5);
    animation: endlessPulse 2s ease-in-out infinite;
}

.endless-badge-small {
    background: linear-gradient(180deg, #ff6b35 0%, #cc4400 100%);
    color: #ffffff;
    font-size: 7px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 4px;
    text-transform: uppercase;
    box-shadow: 0 0 6px rgba(255, 107, 53, 0.4);
}

.ri-endless-badge {
    background: linear-gradient(180deg, #ff6b35 0%, #cc4400 100%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
}

@keyframes endlessPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 107, 53, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 107, 53, 0.8); }
}

/* Main Play Area */
.game-main-area {
    display: flex;
    flex-direction: column;
    padding: 4px 6px;
    gap: 2px;
    position: relative;
    min-height: 0;
    overflow: visible;
}

/* Top row container - jokers on left, consumables on right (Balatro style) */
.game-top-row {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    min-height: 90px;
    max-height: 95px;
    align-items: center;
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    z-index: 50;
}

.game-joker-section {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding: 2px;
}

.game-consumable-section {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    padding: 2px;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    padding-left: 8px;
    overflow: visible;
    position: relative;
}

/* Inline consumable cards for top bar */
.inline-consumable-card {
    width: 56px;
    height: 75px;
    background: linear-gradient(180deg, #5a3a7a 0%, #3a2050 100%);
    border: 2px solid #9060b0;
    border-radius: 5px;
    padding: 3px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, z-index 0s;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Overlapping mode for many consumables (>3) */
.game-consumable-section.overlapping .inline-consumable-card {
    margin-right: -28px;
    transition: transform 0.15s, box-shadow 0.15s, z-index 0s, margin 0.2s;
}

.game-consumable-section.overlapping .inline-consumable-card:last-of-type {
    margin-right: 0;
}

/* When holding/focusing a consumable in overlap mode, bring it to front */
.game-consumable-section.overlapping .inline-consumable-card.card-front {
    z-index: 100 !important;
    transform: translateY(-8px) scale(1.08);
    box-shadow: 0 8px 20px rgba(100, 50, 150, 0.6), 0 0 15px rgba(255, 215, 0, 0.4);
    margin-right: 0;
    margin-left: 0;
}

.game-consumable-section.overlapping .inline-consumable-card.card-front + .inline-consumable-card {
    margin-left: 0;
}

.inline-consumable-card::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    pointer-events: none;
}

.inline-consumable-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 6px 16px rgba(100, 50, 150, 0.5), 0 0 12px rgba(144, 96, 176, 0.4);
    z-index: 10;
}

.inline-consumable-card.consumable-tooltip-visible {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 6px 16px rgba(255, 200, 50, 0.4);
    border-color: #ffd700 !important;
    z-index: 15;
}

/* Selected consumable state (two-click activation) */
.inline-consumable-card.consumable-selected {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 8px 20px rgba(255, 200, 50, 0.5), 0 0 20px rgba(255, 200, 50, 0.6);
    border-color: #ffd700 !important;
    z-index: 20;
}

.inline-consumable-card.consumable-planet.consumable-selected {
    box-shadow: 0 8px 20px rgba(64, 128, 192, 0.6), 0 0 20px rgba(100, 180, 255, 0.5);
}

.inline-consumable-card.consumable-spectral.consumable-selected {
    box-shadow: 0 8px 20px rgba(64, 160, 176, 0.6), 0 0 20px rgba(100, 220, 230, 0.5);
}

.inline-consumable-card .gc-image {
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-consumable-card .gc-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.inline-consumable-card .gc-name-only {
    font-size: 7px;
    color: #fff;
    text-align: center;
    line-height: 1.1;
}

.inline-consumable-card .gc-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #2a2a40 0%, #1a1a2e 100%);
    border: 2px solid #555;
    border-radius: 6px;
    padding: 8px;
    width: 140px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 9999;
    pointer-events: none;
    margin-top: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.inline-consumable-card:hover .gc-tooltip,
.inline-consumable-card.consumable-tooltip-visible .gc-tooltip,
.inline-consumable-card.consumable-selected .gc-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Base tooltip content styles for inline consumables */
.inline-consumable-card .gc-tooltip-name {
    font-size: 10px;
    font-weight: 700;
    color: #ffc040;
    text-align: center;
    margin-bottom: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.inline-consumable-card .gc-tooltip-desc {
    font-size: 8px;
    color: #ccc;
    text-align: center;
    line-height: 1.3;
}

/* Tooltip arrow pointing up to the card */
.inline-consumable-card .gc-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #555;
}

.inline-consumable-card .gc-sell-btn {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #c75050 0%, #8a3030 100%);
    border: 1px solid #e06060;
    border-radius: 2px;
    padding: 1px 4px;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.inline-consumable-card:hover .gc-sell-btn {
    opacity: 1;
}

/* Planet cards - cosmic blue theme */
.inline-consumable-card.consumable-planet {
    background: linear-gradient(180deg, #1e4a6f 0%, #0a2545 100%);
    border-color: #4080c0;
}

/* Spectral cards - ethereal purple/white theme */
.inline-consumable-card.consumable-spectral {
    background: linear-gradient(180deg, #4a4a6a 0%, #2a2a4a 100%);
    border-color: #8080c0;
}

/* Planet card tooltip styling - cosmic blue theme */
.inline-consumable-card.consumable-planet .gc-tooltip {
    background: linear-gradient(180deg, #1e4a6f 0%, #0a2545 100%);
    border-color: #4080c0;
}

.inline-consumable-card.consumable-planet .gc-tooltip::before {
    border-bottom-color: #4080c0;
}

.inline-consumable-card.consumable-planet .gc-tooltip .gc-tooltip-name {
    color: #80d0ff;
}

/* Spectral card tooltip styling - ethereal theme */
.inline-consumable-card.consumable-spectral .gc-tooltip {
    background: linear-gradient(180deg, #1a4a4a 0%, #0a2a2a 100%);
    border-color: #40a0b0;
}

.inline-consumable-card.consumable-spectral .gc-tooltip::before {
    border-bottom-color: #40a0b0;
}

.inline-consumable-card.consumable-spectral .gc-tooltip .gc-tooltip-name {
    color: #00e5ff;
}

.inline-consumables-empty {
    color: #666;
    font-size: 9px;
    text-align: center;
    font-style: italic;
    padding: 4px 8px;
}

.inline-consumable-slot-count {
    font-size: 9px;
    color: #888;
    padding: 2px 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    flex-shrink: 0;
}

/* Compact right sidebar (just vouchers and deck) */
.game-right-sidebar-compact {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    overflow: hidden;
}

.game-joker-row {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    min-height: 88px;
    max-height: 95px;
    align-items: center;
    overflow-x: auto;
    flex-shrink: 0;
}

.game-joker-empty {
    color: #666;
    font-style: italic;
    flex: 1;
    text-align: center;
    font-size: 11px;
}

.game-joker-card {
    width: 64px;
    height: 85px;
    background: linear-gradient(180deg, #2a2a40 0%, #1e1e30 100%);
    border: 2px solid #3a3a55;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, z-index 0s;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Overlapping mode for many jokers (>6) */
.game-joker-section.overlapping .game-joker-card {
    margin-right: -32px;
    transition: transform 0.15s, box-shadow 0.15s, z-index 0s, margin 0.2s;
}

.game-joker-section.overlapping .game-joker-card:last-of-type {
    margin-right: 0;
}

/* When holding/focusing a card in overlap mode, bring it to front */
.game-joker-section.overlapping .game-joker-card.card-front {
    z-index: 100 !important;
    transform: translateY(-8px) scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.4);
    margin-right: 0;
    margin-left: 0;
}

.game-joker-section.overlapping .game-joker-card.card-front + .game-joker-card {
    margin-left: 0;
}

.game-joker-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.game-joker-card .gj-image {
    width: 100%;
    height: 65px;
    object-fit: contain;
}

.game-joker-card .gj-name {
    font-size: 7px;
    color: #fff;
    text-align: center;
    line-height: 1;
}

.game-joker-card .gj-stat {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 8px;
    font-weight: 700;
    color: #f4d03f;
    background: rgba(0, 0, 0, 0.7);
    padding: 1px 3px;
    border-radius: 2px;
}

.game-joker-card.triggered {
    animation: jokerTrigger 0.4s ease-out;
    box-shadow: 0 0 20px var(--accent-gold);
}

@keyframes jokerTrigger {
    0% { 
        transform: translateX(0) rotate(0) scale(1);
        filter: brightness(1);
    }
    15% { 
        transform: translateX(-4px) rotate(-3deg) scale(1.05);
        filter: brightness(1.3);
    }
    30% { 
        transform: translateX(4px) rotate(3deg) scale(1.05);
        filter: brightness(1.4);
    }
    45% { 
        transform: translateX(-3px) rotate(-2deg) scale(1.03);
        filter: brightness(1.3);
    }
    60% { 
        transform: translateX(3px) rotate(2deg) scale(1.02);
        filter: brightness(1.2);
    }
    75% { 
        transform: translateX(-1px) rotate(-1deg) scale(1.01);
        filter: brightness(1.1);
    }
    100% { 
        transform: translateX(0) rotate(0) scale(1);
        filter: brightness(1);
    }
}

/* Game joker edition styles */
.game-joker-card.edition-foil {
    box-shadow: 0 0 12px rgba(200, 150, 220, 0.5);
    border-color: #c8a0dc;
}

.game-joker-card.edition-holographic {
    box-shadow: 0 0 12px rgba(100, 200, 255, 0.5), 0 0 20px rgba(255, 150, 200, 0.3);
    border-color: #88ddff;
}

.game-joker-card.edition-polychrome {
    box-shadow: 0 0 12px rgba(100, 255, 200, 0.4), 0 0 20px rgba(255, 100, 255, 0.3);
    animation: polyGlow 4s linear infinite;
}

.game-joker-card.edition-negative {
    box-shadow: 0 0 20px rgba(50, 50, 80, 0.8), 0 0 40px rgba(80, 80, 120, 0.4);
    background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 100%);
    border-color: #8888bb;
}

.game-joker-card.edition-negative .gj-image {
    filter: invert(1) hue-rotate(180deg);
}

/* Sell button on game joker cards */
.game-joker-card .gj-sell-btn {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%);
    border: 1px solid #1e8449;
    border-radius: 2px;
    padding: 1px 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, transform 0.1s;
    z-index: 5;
}

.game-joker-card:hover .gj-sell-btn {
    opacity: 1;
}

.game-joker-card .gj-sell-btn:hover {
    background: linear-gradient(180deg, #58d68d 0%, #2ecc71 100%);
    transform: scale(1.1);
}

.game-joker-card .gj-sell-btn:active {
    transform: scale(0.95);
}

.joker-slot-count {
    font-size: 9px;
    color: #888;
    padding: 2px 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Center play area - Balatro style: score above cards */
.game-center-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 120px;
    gap: 8px;
    padding: 8px 0;
}

/* Scoring display - positioned ABOVE cards, not overlapping */
.scoring-display-balatro {
    display: none;
    z-index: 50;
    background: linear-gradient(180deg, rgba(20, 20, 35, 0.97) 0%, rgba(15, 15, 28, 0.99) 100%);
    padding: 14px 20px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    min-width: 220px;
    max-width: 280px;
    text-align: center;
}

.scoring-display-balatro.active {
    display: block;
    animation: scoreDisplayAppear 0.3s ease-out;
}

@keyframes scoreDisplayAppear {
    from { 
        opacity: 0; 
        transform: scale(0.9) translateY(10px);
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0);
    }
}

/* Played cards container - sits below the scoring display */
.played-cards-container-balatro {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    padding: 4px;
    position: relative;
    z-index: 200; /* High z-index to stay above jokers/consumables during scoring */
}

/* During scoring, ensure the center area is above everything */
.game-center-area.scoring-active {
    z-index: 300;
}

.played-cards-balatro {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Cards in the played area - ensure room for popups */
.played-cards-balatro .card {
    margin-top: 30px; /* Room for effect popups above */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 210; /* Above container to ensure visibility */
}

/* Scoring cards should be even higher */
.played-cards-balatro .card.scoring {
    z-index: 250;
}

.played-cards-balatro .card.scored {
    z-index: 240;
}

/* Hand area at bottom - CARD FAN EFFECT */
.game-hand-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 0;
    flex-shrink: 0;
    margin-top: auto; /* Push to fill available space */
    margin-bottom: 0; /* Reduced for tighter layout */
    transform: translateY(-40px); /* Move cards up by 40px */
}

.hand-container-balatro {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 4px 15px 0;
    min-height: 95px;
    position: relative;
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* Card fan effect - overlapping cards with rotation */
.hand-container-balatro .card {
    --total-cards: 8;
    --card-index: 0;
    --fan-angle: 2deg;
    --center-offset: calc(var(--card-index) - (var(--total-cards) - 1) / 2);
    --wobble-delay: calc(var(--card-index) * 0.15s);
    position: relative;
    margin: 0 -8px;
    transform-origin: 50% 150%;
    transform: rotate(calc(var(--center-offset) * var(--fan-angle)));
    transition: transform 0.2s ease, margin 0.2s ease, z-index 0s;
    z-index: calc(var(--card-index));
    /* iOS touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    cursor: pointer;
    /* Subtle idle float animation - makes game feel alive */
    animation: cardIdleFloat 3s ease-in-out infinite;
    animation-delay: var(--wobble-delay);
}

/* Subtle idle wobble/float for cards - Balatro signature effect */
@keyframes cardIdleFloat {
    0%, 100% { 
        transform: rotate(calc(var(--center-offset) * var(--fan-angle))) translateY(0);
    }
    50% { 
        transform: rotate(calc(var(--center-offset) * var(--fan-angle))) translateY(-2px);
    }
}

/* Expanded touch target for mobile - invisible but increases tap area */
.hand-container-balatro .card::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -8px;
    right: -8px;
    bottom: -10px;
    z-index: 1;
}

/* Only apply hover effects on devices with hover capability (not touch) */
@media (hover: hover) and (pointer: fine) {
    .hand-container-balatro .card:hover {
        transform: translateY(-20px) scale(1.08) rotate(0deg);
        z-index: 100;
        margin: 0 3px;
    }
}

.hand-container-balatro .card.selected {
    transform: translateY(-25px) scale(1.05) rotate(0deg);
    z-index: 101;
    margin: 0 3px;
    box-shadow: 0 0 0 2px var(--accent-cyan), 0 6px 15px rgba(0, 212, 255, 0.5);
}

/* Only apply selected+hover effects on devices with hover capability */
@media (hover: hover) and (pointer: fine) {
    .hand-container-balatro .card.selected:hover {
        transform: translateY(-30px) scale(1.1) rotate(0deg);
    }
}

.deck-count-badge {
    position: absolute;
    bottom: 4px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.deck-count-badge:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Action buttons - sized for mobile touch targets */
.game-action-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 6px 10px 8px;
    flex-shrink: 0;
    transform: translateY(-25px); /* Move buttons up by 25px (40px up, then 15px down) */
}

.btn-action {
    padding: 12.6px 23.1px;
    font-size: 14.7px;
    font-weight: 700;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.15s;
    min-height: 44.1px;
}

.btn-play-balatro {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    border: 2px solid #15803d;
    color: #fff;
    box-shadow: 0 2px 0 #14532d;
}

.btn-play-balatro:hover:not(.disabled) {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
    transform: translateY(-1px);
}

.btn-play-balatro.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-discard-balatro {
    background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%);
    border: 2px solid #374151;
    color: #fff;
    box-shadow: 0 2px 0 #1f2937;
}

.btn-discard-balatro:hover:not(.disabled) {
    background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%);
    transform: translateY(-1px);
}

.btn-discard-balatro.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-sort-balatro {
    background: linear-gradient(180deg, #3a3a55 0%, #2a2a40 100%);
    border: 2px solid #4a4a65;
    color: #fff;
    box-shadow: 0 2px 0 #1e1e30;
    padding: 12.6px 21px;
}

.btn-sort-balatro:hover {
    background: linear-gradient(180deg, #4a4a65 0%, #3a3a55 100%);
}

.btn-sort-balatro.active {
    background: linear-gradient(180deg, #4a9eff 0%, #2563eb 100%);
    border-color: #1d4ed8;
}

/* Right sidebar - consumables - narrow tarot card style */
.game-right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 4px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    overflow: visible; /* Allow tooltips to overflow */
    align-items: center;
}

.game-consumable-empty {
    color: #666;
    font-size: 7px;
    text-align: center;
    font-style: italic;
    padding: 3px;
}

/* Tarot-style consumable cards - taller narrower shape */
.game-consumable-card {
    width: 52px;
    height: 72px;
    background: linear-gradient(180deg, #5a3a7a 0%, #3a2050 100%);
    border: 2px solid #9060b0;
    border-radius: 5px;
    padding: 3px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    overflow: visible; /* Changed from hidden to allow tooltip to show */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Inner decorative frame */
.game-consumable-card::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    pointer-events: none;
}

/* Corner decorations */
.game-consumable-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 5px 5px, rgba(255, 220, 150, 0.3) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(255, 220, 150, 0.3) 0%, transparent 4px),
        radial-gradient(circle at 5px calc(100% - 5px), rgba(255, 220, 150, 0.3) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(255, 220, 150, 0.3) 0%, transparent 4px);
    pointer-events: none;
}

.game-consumable-card:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 6px 16px rgba(100, 50, 150, 0.5), 0 0 12px rgba(144, 96, 176, 0.4);
    z-index: 10;
}

/* Selected consumable state */
.game-consumable-card.consumable-selected {
    transform: translateY(-8px) scale(1.12);
    box-shadow: 0 8px 20px rgba(255, 200, 50, 0.5), 0 0 20px rgba(255, 200, 50, 0.6);
    border-color: #ffd700 !important;
    z-index: 15;
}

.game-consumable-card.consumable-selected::before {
    border-color: rgba(255, 215, 0, 0.5) !important;
    box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Use hint text inside tooltip */
.gc-use-hint {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 8px;
    color: #ffd700;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    font-weight: bold;
    animation: pulse-hint 1s ease-in-out infinite;
}

@keyframes pulse-hint {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Consumable sell button during gameplay */
.gc-sell-btn {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #c75050 0%, #8a3030 100%);
    border: 1px solid #e06060;
    border-radius: 2px;
    padding: 1px 4px;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.game-consumable-card:hover .gc-sell-btn,
.game-consumable-card.consumable-tooltip-visible .gc-sell-btn {
    opacity: 1;
}

.gc-sell-btn:hover {
    background: linear-gradient(180deg, #e06060 0%, #a04040 100%);
    transform: translateX(-50%) scale(1.15);
}

/* Planet cards - cosmic blue theme */
.game-consumable-card.consumable-planet {
    background: linear-gradient(180deg, #1e4a6f 0%, #0a2545 100%);
    border-color: #4080c0;
}

.game-consumable-card.consumable-planet::before {
    border-color: rgba(100, 180, 255, 0.25);
}

.game-consumable-card.consumable-planet::after {
    background: 
        radial-gradient(circle at 5px 5px, rgba(100, 180, 255, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(100, 180, 255, 0.4) 0%, transparent 4px),
        radial-gradient(circle at 5px calc(100% - 5px), rgba(100, 180, 255, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(100, 180, 255, 0.4) 0%, transparent 4px);
}

.game-consumable-card.consumable-planet:hover {
    box-shadow: 0 6px 16px rgba(30, 80, 150, 0.5), 0 0 12px rgba(64, 128, 192, 0.4);
}

/* Planet card selected state override */
.game-consumable-card.consumable-planet.consumable-selected {
    box-shadow: 0 8px 20px rgba(64, 128, 192, 0.6), 0 0 20px rgba(100, 180, 255, 0.5);
}

/* Spectral cards - ethereal cyan/teal theme */
.game-consumable-card.consumable-spectral {
    background: linear-gradient(180deg, #1a5060 0%, #082838 100%);
    border-color: #40a0b0;
}

.game-consumable-card.consumable-spectral::before {
    border-color: rgba(100, 200, 220, 0.25);
}

.game-consumable-card.consumable-spectral::after {
    background: 
        radial-gradient(circle at 5px 5px, rgba(100, 220, 230, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) 5px, rgba(100, 220, 230, 0.4) 0%, transparent 4px),
        radial-gradient(circle at 5px calc(100% - 5px), rgba(100, 220, 230, 0.4) 0%, transparent 4px),
        radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(100, 220, 230, 0.4) 0%, transparent 4px);
}

.game-consumable-card.consumable-spectral:hover {
    box-shadow: 0 6px 16px rgba(30, 100, 120, 0.5), 0 0 12px rgba(64, 160, 176, 0.4);
}

/* Spectral card selected state override */
.game-consumable-card.consumable-spectral.consumable-selected {
    box-shadow: 0 8px 20px rgba(64, 160, 176, 0.6), 0 0 20px rgba(100, 220, 230, 0.5);
}

/* Fallback name display when no image available */
.game-consumable-card .gc-name-only {
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    word-wrap: break-word;
    max-width: 100%;
    padding: 4px;
}

/* Tooltip container - hidden by default, shown on click */
.game-consumable-card .gc-tooltip {
    display: none;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #2a1a3a 0%, #1a0a2a 100%);
    border: 2px solid #9060b0;
    border-radius: 6px;
    padding: 8px 10px;
    min-width: 140px;
    max-width: 180px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 15px rgba(144, 96, 176, 0.4);
    margin-right: 8px;
    pointer-events: none;
}

/* Tooltip name styling */
.game-consumable-card .gc-tooltip-name {
    font-size: 11px;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Tooltip description styling */
.game-consumable-card .gc-tooltip-desc {
    font-size: 10px;
    color: #fff;
    text-align: center;
    line-height: 1.3;
    white-space: normal;
}

/* Tooltip arrow pointing right */
.game-consumable-card .gc-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #9060b0;
}

/* Show tooltip when clicked (tooltip visible state) or selected */
.game-consumable-card.consumable-tooltip-visible .gc-tooltip,
.game-consumable-card.consumable-selected .gc-tooltip {
    display: block;
    animation: tooltipFadeIn 0.2s ease-out;
}

/* Highlight card when tooltip is visible or selected */
.game-consumable-card.consumable-tooltip-visible,
.game-consumable-card.consumable-selected {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 6px 16px rgba(100, 50, 150, 0.5), 0 0 12px rgba(144, 96, 176, 0.4);
    z-index: 15;
    border-color: #c080e0;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(5px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* Planet card tooltip styling */
.game-consumable-card.consumable-planet .gc-tooltip {
    background: linear-gradient(180deg, #1e4a6f 0%, #0a2545 100%);
    border-color: #4080c0;
}

.game-consumable-card.consumable-planet .gc-tooltip::after {
    border-left-color: #4080c0;
}

.game-consumable-card.consumable-planet .gc-tooltip-name {
    color: #80d0ff;
}

.game-consumable-card.consumable-planet.consumable-tooltip-visible {
    border-color: #60b0e0;
}

/* Spectral card tooltip styling */
.game-consumable-card.consumable-spectral .gc-tooltip {
    background: linear-gradient(180deg, #1a4a4a 0%, #0a2a2a 100%);
    border-color: #40a0b0;
}

.game-consumable-card.consumable-spectral .gc-tooltip::after {
    border-left-color: #40a0b0;
}

.game-consumable-card.consumable-spectral .gc-tooltip-name {
    color: #00e5ff;
}

.game-consumable-card.consumable-spectral.consumable-tooltip-visible {
    border-color: #60c0d0;
}

/* Count badge for consumables sidebar */
.consumable-slot-count {
    font-size: 8px;
    color: #888;
    text-align: center;
    margin-top: auto;
    padding-top: 4px;
}

/* Owned Vouchers Display - Sidebar */
.owned-vouchers-display {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 145, 0, 0.3);
    max-width: 100%;
    overflow: hidden;
}

.ov-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px;
}

.ov-label {
    font-size: 8px;
    color: #ff9100;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ov-count {
    font-size: 9px;
    color: #ff9100;
    background: rgba(255, 145, 0, 0.2);
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: bold;
}

.ov-cards {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.owned-voucher-card {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(180deg, #4a3520 0%, #2a1a10 100%);
    border: 1px solid #ff9100;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.owned-voucher-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 145, 0, 0.4);
}

.ov-icon {
    font-size: 12px;
    flex-shrink: 0;
}

.ov-name {
    font-size: 8px;
    color: #ffcc80;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50px;
    flex: 1;
    min-width: 0;
}

/* Voucher tooltip (reuse existing tooltip system) */
.owned-voucher-card[data-tooltip-name]:hover::after {
    content: attr(data-tooltip-name) "\A" attr(data-tooltip-desc);
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #3a2a15 0%, #1a0a00 100%);
    border: 2px solid #ff9100;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 10px;
    color: #fff;
    white-space: pre-wrap;
    width: 140px;
    z-index: 1000;
    margin-right: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Score Animation Popup - Balatro Style */
.score-anim-balatro {
    text-align: center;
    animation: scorePopIn 0.3s ease-out;
}

/* Step Indicator - Shows current phase of scoring */
.score-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.score-step-indicator .step-number {
    color: #f4d03f;
    font-weight: 800;
}

.score-step-indicator .step-label {
    color: rgba(255, 255, 255, 0.85);
}

.score-step-indicator.step-change {
    animation: stepChange 0.3s ease-out;
}

@keyframes stepChange {
    0% { transform: scale(1); background: rgba(0, 0, 0, 0.4); }
    50% { transform: scale(1.05); background: rgba(244, 208, 63, 0.2); border-color: rgba(244, 208, 63, 0.5); }
    100% { transform: scale(1); background: rgba(0, 0, 0, 0.4); }
}

/* Score Preview - Shows running total as chips × mult = ? */
.score-anim-balatro .score-preview {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 600;
    margin-left: 8px;
    min-width: 80px;
    text-align: left;
    transition: all 0.2s ease;
}

.score-anim-balatro .score-preview.preview-update {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

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

.score-popup-value {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    text-shadow: 
        0 0 15px rgba(74, 158, 255, 0.8),
        0 3px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: 4px;
    animation: scorePulse 0.5s ease-out;
}

@keyframes scorePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.score-anim-balatro .score-hand-type {
    font-size: 13px;
    font-weight: 800;
    color: #f4d03f;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 15px rgba(244, 208, 63, 0.3);
}

.score-anim-balatro .hand-lvl {
    font-size: 10px;
    color: rgba(244, 208, 63, 0.7);
    font-weight: 600;
    margin-left: 4px;
}

.score-anim-balatro .score-calc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 800;
}

.score-anim-balatro .score-chips {
    color: #fff;
    background: linear-gradient(180deg, #4a9eff 0%, #2563eb 100%);
    padding: 4px 12px;
    border-radius: 4px;
    box-shadow: 
        0 2px 6px rgba(37, 99, 235, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    min-width: 36px;
    text-align: center;
}

.score-anim-balatro .score-mult {
    color: #fff;
    background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
    padding: 4px 12px;
    border-radius: 4px;
    box-shadow: 
        0 2px 6px rgba(190, 18, 60, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    min-width: 36px;
    text-align: center;
}

.score-anim-balatro .score-x,
.score-anim-balatro .score-eq {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 600;
}

.score-anim-balatro .score-total {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    padding: 6px 14px;
    border-radius: 4px;
    box-shadow: 
        0 3px 10px rgba(34, 197, 94, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.score-anim-balatro .score-chips.chip-pop {
    animation: chipNumberPop 0.25s ease-out;
}

.score-anim-balatro .score-mult.mult-pop {
    animation: multNumberPop 0.25s ease-out;
}

/* Translation bonus effect - green glow */
.score-anim-balatro .score-chips.translation-effect,
.score-anim-balatro .score-mult.translation-effect {
    animation: translationBonusNumber 0.6s ease-out;
    text-shadow: 0 0 15px rgba(16, 185, 129, 0.9), 0 0 30px rgba(16, 185, 129, 0.6);
}

/* Translation penalty effect - red flash */
.score-anim-balatro .score-chips.penalty-effect,
.score-anim-balatro .score-mult.penalty-effect {
    animation: translationPenaltyNumber 0.6s ease-out;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.9), 0 0 30px rgba(239, 68, 68, 0.6);
}

@keyframes translationBonusNumber {
    0% { filter: brightness(1); }
    25% { filter: brightness(1.5); color: #34d399; }
    50% { filter: brightness(1.3); }
    100% { filter: brightness(1); }
}

@keyframes translationPenaltyNumber {
    0% { transform: scale(1); filter: brightness(1); }
    15% { transform: scale(0.9); filter: brightness(0.8); color: #ef4444; }
    30% { transform: scale(1.2); filter: brightness(1.4); color: #f87171; }
    50% { transform: scale(1.1); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes chipNumberPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); box-shadow: 0 6px 20px rgba(74, 158, 255, 0.8), 0 0 25px rgba(74, 158, 255, 0.5); }
    100% { transform: scale(1); }
}

@keyframes multNumberPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); box-shadow: 0 6px 20px rgba(244, 63, 94, 0.8), 0 0 25px rgba(244, 63, 94, 0.5); }
    100% { transform: scale(1); }
}

.score-anim-balatro .score-mult.xmult-pop {
    animation: xmultFlashBalatro 0.5s ease-out;
    color: #fff;
    text-shadow: 0 0 25px rgba(244, 208, 63, 0.9), 0 2px 4px rgba(0, 0, 0, 0.4);
}

@keyframes xmultFlashBalatro {
    0% { 
        transform: scale(1); 
        background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
    }
    30% { 
        transform: scale(1.5); 
        background: linear-gradient(180deg, #ffe066 0%, #f4d03f 100%); 
        box-shadow: 0 6px 30px rgba(244, 208, 63, 0.9), 0 0 40px rgba(244, 208, 63, 0.6);
        filter: brightness(1.3);
    }
    60% {
        transform: scale(1.1);
        background: linear-gradient(180deg, #f4d03f 0%, #c9a227 100%);
        box-shadow: 0 4px 20px rgba(244, 208, 63, 0.7);
    }
    100% { 
        transform: scale(1); 
        background: linear-gradient(180deg, #f4d03f 0%, #c9a227 100%);
    }
}

.score-anim-balatro .score-total.score-flash {
    animation: totalFlash 0.5s ease-out;
}

@keyframes totalFlash {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); box-shadow: 0 6px 24px rgba(34, 197, 94, 0.8); }
    100% { transform: scale(1); }
}

/* Score Effect Popups */
.score-effect-popup {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

.score-total-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    animation: totalReveal 0.4s ease-out;
}

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

.score-equals {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.score-final {
    font-size: 24px;
    font-weight: 900;
    color: #22c55e;
    text-shadow: 
        0 0 15px rgba(34, 197, 94, 0.8),
        0 1px 3px rgba(0, 0, 0, 0.5);
    animation: finalPulse 0.6s ease-out;
}

@keyframes finalPulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.15); text-shadow: 0 0 30px rgba(34, 197, 94, 1), 0 2px 4px rgba(0, 0, 0, 0.5); }
    100% { transform: scale(1); }
}

/* Card Effect Popup - appears on cards during scoring (Balatro style) */
.card-effect-popup {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    animation: effectPopup 0.7s ease-out forwards;
    z-index: 200;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.card-effect-popup.effect-chips {
    background: linear-gradient(180deg, #5ab0ff 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 
        0 3px 12px rgba(37, 99, 235, 0.7),
        0 0 20px rgba(37, 99, 235, 0.4);
}

.card-effect-popup.effect-mult {
    background: linear-gradient(180deg, #ff5577 0%, #be123c 100%);
    color: #fff;
    box-shadow: 
        0 3px 12px rgba(190, 18, 60, 0.7),
        0 0 20px rgba(190, 18, 60, 0.4);
}

.card-effect-popup.effect-xmult {
    background: linear-gradient(180deg, #ffe066 0%, #c9a227 100%);
    color: #1a1a2e;
    box-shadow: 
        0 3px 12px rgba(244, 208, 63, 0.7),
        0 0 20px rgba(244, 208, 63, 0.4);
    font-size: 14px;
}

.card-effect-popup.effect-retrigger {
    background: linear-gradient(180deg, #c084fc 0%, #7c3aed 100%);
    color: #fff;
    box-shadow: 
        0 3px 12px rgba(168, 85, 247, 0.7),
        0 0 20px rgba(168, 85, 247, 0.4);
}

.card-effect-popup.effect-money {
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
    color: #1a1a2e;
    box-shadow: 
        0 3px 12px rgba(255, 215, 0, 0.7),
        0 0 20px rgba(255, 215, 0, 0.4);
}

/* Lucky Card Trigger - special styling for when lucky card hits */
.card-effect-popup.effect-mult-lucky {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
    color: #fff;
    box-shadow: 
        0 3px 15px rgba(34, 197, 94, 0.8),
        0 0 30px rgba(34, 197, 94, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: luckyPopup 1.0s ease-out forwards;
    font-size: 16px;
    padding: 6px 14px;
}

.card-effect-popup.effect-money-lucky {
    background: linear-gradient(180deg, #4ade80 0%, #ffd700 50%, #22c55e 100%);
    color: #1a1a2e;
    box-shadow: 
        0 3px 15px rgba(255, 215, 0, 0.8),
        0 0 30px rgba(34, 197, 94, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: luckyPopup 1.0s ease-out forwards;
    font-size: 16px;
    padding: 6px 14px;
}

/* Lucky card trigger state - green glow effect */
.card.lucky-trigger {
    animation: luckyCardPulse 0.6s ease-out;
    border-color: #22c55e !important;
    box-shadow:
        0 0 25px rgba(34, 197, 94, 0.9),
        0 0 50px rgba(34, 197, 94, 0.5),
        0 0 75px rgba(34, 197, 94, 0.3) !important;
}

@keyframes luckyCardPulse {
    0% {
        transform: translateY(-15px) scale(1);
        filter: brightness(1);
    }
    20% {
        transform: translateY(-18px) scale(1.08);
        filter: brightness(1.3) saturate(1.3);
    }
    50% {
        transform: translateY(-15px) scale(1.03);
        filter: brightness(1.15);
    }
    100% {
        transform: translateY(-15px) scale(1);
        filter: brightness(1);
    }
}

@keyframes luckyPopup {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) translateY(-12px) scale(1.25);
    }
    40% {
        transform: translateX(-50%) translateY(-15px) scale(1.1);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(-18px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-35px) scale(0.9);
    }
}

@keyframes effectPopup {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px) scale(0.6);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px) scale(1.15);
    }
    30% {
        transform: translateX(-50%) translateY(-12px) scale(1);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(-15px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px) scale(0.9);
    }
}

/* Joker Effect Popup - appears on jokers during scoring (Balatro style) */
.joker-effect-popup {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    animation: jokerEffectPopup 0.7s ease-out forwards;
    z-index: 200;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.joker-effect-popup.effect-chips {
    background: linear-gradient(180deg, #5ab0ff 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 
        0 3px 10px rgba(37, 99, 235, 0.7),
        0 0 15px rgba(37, 99, 235, 0.4);
}

.joker-effect-popup.effect-mult {
    background: linear-gradient(180deg, #ff5577 0%, #be123c 100%);
    color: #fff;
    box-shadow: 
        0 3px 10px rgba(190, 18, 60, 0.7),
        0 0 15px rgba(190, 18, 60, 0.4);
}

.joker-effect-popup.effect-xmult {
    background: linear-gradient(180deg, #ffe066 0%, #c9a227 100%);
    color: #1a1a2e;
    box-shadow: 
        0 3px 10px rgba(244, 208, 63, 0.7),
        0 0 15px rgba(244, 208, 63, 0.4);
    font-size: 13px;
}

.joker-effect-popup.effect-money {
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
    color: #1a1a2e;
    box-shadow: 
        0 3px 10px rgba(255, 215, 0, 0.7),
        0 0 15px rgba(255, 215, 0, 0.4);
}

@keyframes jokerEffectPopup {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px) scale(0.6);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(-6px) scale(1.15);
    }
    20% {
        transform: translateX(-50%) translateY(-10px) scale(1);
    }
    80% {
        opacity: 1;
        transform: translateX(-50%) translateY(-12px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-25px) scale(0.9);
    }
}

/* Joker triggering glow effect (when joker earns money or activates) */
.joker-triggering {
    animation: jokerTriggerGlow 0.6s ease-out;
}

@keyframes jokerTriggerGlow {
    0% {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
    30% {
        filter: brightness(1.4) drop-shadow(0 0 20px rgba(255, 215, 0, 0.9));
    }
    100% {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
}

/* Sparkle rise animation for money effects */
@keyframes sparkle-rise {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--sparkle-x, 0), var(--sparkle-y, -40px)) scale(0.3);
    }
}

/* ============================================
   SCORE BREAKDOWN LOG PANEL (Balatro-style)
   Shows step-by-step what's affecting the score
   ============================================ */
.score-breakdown-log {
    margin-top: 12px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 11px;
    text-align: left;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.score-breakdown-log::-webkit-scrollbar {
    width: 4px;
}

.score-breakdown-log::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.score-breakdown-log::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.log-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    margin: 2px 0;
    border-radius: 4px;
    animation: logEntryAppear 0.3s ease-out;
    gap: 8px;
}

@keyframes logEntryAppear {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.log-entry .log-source {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

.log-entry .log-value {
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

/* Log entry colors by type */
.log-entry.log-chips {
    background: rgba(37, 99, 235, 0.2);
    border-left: 3px solid #4a9eff;
}
.log-entry.log-chips .log-source { color: #7cb8ff; }
.log-entry.log-chips .log-value {
    background: linear-gradient(180deg, #4a9eff 0%, #2563eb 100%);
    color: #fff;
}

.log-entry.log-mult {
    background: rgba(190, 18, 60, 0.2);
    border-left: 3px solid #f43f5e;
}
.log-entry.log-mult .log-source { color: #ff7b93; }
.log-entry.log-mult .log-value {
    background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
    color: #fff;
}

.log-entry.log-xmult {
    background: rgba(244, 208, 63, 0.2);
    border-left: 3px solid #f4d03f;
}
.log-entry.log-xmult .log-source { color: #ffe066; }
.log-entry.log-xmult .log-value {
    background: linear-gradient(180deg, #ffe066 0%, #c9a227 100%);
    color: #1a1a2e;
    font-size: 12px;
}

.log-entry.log-retrigger {
    background: rgba(168, 85, 247, 0.2);
    border-left: 3px solid #a855f7;
}
.log-entry.log-retrigger .log-source { color: #c084fc; }
.log-entry.log-retrigger .log-value {
    background: linear-gradient(180deg, #c084fc 0%, #7c3aed 100%);
    color: #fff;
}

.log-entry.log-total {
    background: rgba(34, 197, 94, 0.3);
    border-left: 3px solid #22c55e;
    margin-top: 6px;
    padding: 6px 8px;
}
.log-entry.log-total .log-source { 
    color: #86efac;
    font-size: 12px;
}
.log-entry.log-total .log-value {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    font-size: 14px;
}

/* Translation Bonus - bright green with book emoji */
.log-entry.log-translation-bonus {
    background: rgba(34, 197, 94, 0.25);
    border-left: 4px solid #10b981;
    animation: translationBonusPulse 0.5s ease-out;
}
.log-entry.log-translation-bonus .log-source { 
    color: #6ee7b7;
    font-weight: 600;
}
.log-entry.log-translation-bonus .log-value {
    background: linear-gradient(180deg, #34d399 0%, #059669 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

/* Translation Penalty - red/orange warning style */
.log-entry.log-translation-penalty {
    background: rgba(239, 68, 68, 0.25);
    border-left: 4px solid #ef4444;
    animation: translationPenaltyPulse 0.5s ease-out;
}
.log-entry.log-translation-penalty .log-source { 
    color: #fca5a5;
    font-weight: 600;
}
.log-entry.log-translation-penalty .log-value {
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

@keyframes translationBonusPulse {
    0% { transform: scale(1.1); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes translationPenaltyPulse {
    0% { transform: scale(1.1); opacity: 0; background: rgba(239, 68, 68, 0.5); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; background: rgba(239, 68, 68, 0.25); }
    padding: 3px 10px;
}

/* ============================================
   IMPROVED EFFECT POPUPS WITH SOURCE LABELS
   ============================================ */
.card-effect-popup,
.joker-effect-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.card-effect-popup .effect-source,
.joker-effect-popup .effect-source {
    font-size: 8px;
    font-weight: 600;
    opacity: 0.9;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-effect-popup .effect-value,
.joker-effect-popup .effect-value {
    font-size: 14px;
    font-weight: 900;
}

/* Larger popup sizes for better visibility */
.card-effect-popup {
    top: -35px;
    padding: 5px 12px;
    font-size: 14px;
    min-width: 50px;
    text-align: center;
    animation: effectPopupSlow 1s ease-out forwards;
}

.joker-effect-popup {
    top: -32px;
    padding: 4px 10px;
    font-size: 13px;
    min-width: 45px;
    text-align: center;
    animation: jokerEffectPopupSlow 1.1s ease-out forwards;
}

/* Slower popup animations */
@keyframes effectPopupSlow {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px) scale(0.6);
    }
    8% {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px) scale(1.2);
    }
    15% {
        transform: translateX(-50%) translateY(-12px) scale(1);
    }
    75% {
        opacity: 1;
        transform: translateX(-50%) translateY(-15px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px) scale(0.9);
    }
}

@keyframes jokerEffectPopupSlow {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px) scale(0.6);
    }
    8% {
        opacity: 1;
        transform: translateX(-50%) translateY(-6px) scale(1.2);
    }
    15% {
        transform: translateX(-50%) translateY(-10px) scale(1);
    }
    75% {
        opacity: 1;
        transform: translateX(-50%) translateY(-12px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-25px) scale(0.9);
    }
}

/* xMult popup special styling - more dramatic */
.card-effect-popup.effect-xmult,
.joker-effect-popup.effect-xmult {
    animation-name: xmultPopup;
    animation-duration: 1.2s;
}

@keyframes xmultPopup {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px) scale(0.4);
    }
    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px) scale(1.4);
        filter: brightness(1.3);
    }
    20% {
        transform: translateX(-50%) translateY(-15px) scale(1);
        filter: brightness(1);
    }
    75% {
        opacity: 1;
        transform: translateX(-50%) translateY(-18px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-35px) scale(0.8);
    }
}

/* ============================================
   JOKER-TO-CARD EFFECT POPUPS
   Shows joker effects directly on the cards that triggered them (Balatro-style)
   ============================================ */
.joker-card-effect-popup {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
    animation: jokerCardEffectPopup 1.1s ease-out forwards;
    z-index: 250;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.joker-card-effect-popup .effect-joker-source {
    font-size: 9px;
    font-weight: 700;
    opacity: 0.95;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.joker-card-effect-popup .effect-value {
    font-size: 16px;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Chip bonus from joker */
.joker-card-effect-popup.effect-chips {
    background: linear-gradient(180deg, #5ab0ff 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 
        0 4px 16px rgba(37, 99, 235, 0.8),
        0 0 25px rgba(37, 99, 235, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Mult bonus from joker */
.joker-card-effect-popup.effect-mult {
    background: linear-gradient(180deg, #ff5577 0%, #be123c 100%);
    color: #fff;
    box-shadow: 
        0 4px 16px rgba(190, 18, 60, 0.8),
        0 0 25px rgba(190, 18, 60, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* xMult bonus from joker (dramatic!) */
.joker-card-effect-popup.effect-xmult {
    background: linear-gradient(180deg, #ffe066 0%, #c9a227 100%);
    color: #1a1a2e;
    box-shadow: 
        0 4px 20px rgba(244, 208, 63, 0.9),
        0 0 30px rgba(244, 208, 63, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation-name: jokerCardXMultPopup;
}

/* Money bonus from joker (Reserved Parking, etc.) */
.joker-card-effect-popup.effect-money {
    background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
    color: #fff;
    box-shadow: 
        0 4px 16px rgba(34, 197, 94, 0.8),
        0 0 25px rgba(34, 197, 94, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@keyframes jokerCardEffectPopup {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.5);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px) scale(1.1);
    }
    25% {
        transform: translateX(-50%) translateY(-5px) scale(1);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-35px) scale(0.85);
    }
}

@keyframes jokerCardXMultPopup {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.3);
        filter: brightness(2);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) translateY(-12px) scale(1.25);
        filter: brightness(1.3);
    }
    30% {
        transform: translateX(-50%) translateY(-8px) scale(1);
        filter: brightness(1);
    }
    75% {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px) scale(0.8);
    }
}

/* Card highlight when joker triggers for it */
.playing-card.joker-triggered,
.card.joker-triggered {
    animation: jokerCardTrigger 0.4s ease-out;
    box-shadow: 
        0 0 20px rgba(147, 51, 234, 0.8),
        0 0 40px rgba(147, 51, 234, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-8px) scale(1.05);
    z-index: 100;
}

@keyframes jokerCardTrigger {
    0% { filter: brightness(1); }
    30% { filter: brightness(1.4) saturate(1.2); }
    100% { filter: brightness(1.1); }
}

/* Held card highlight when joker triggers */
.playing-card.held-card-triggered,
.card.held-card-triggered {
    animation: heldCardTrigger 0.5s ease-out;
    box-shadow: 
        0 0 25px rgba(34, 197, 94, 0.9),
        0 0 50px rgba(34, 197, 94, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-10px) scale(1.08);
    z-index: 100;
}

@keyframes heldCardTrigger {
    0% { filter: brightness(1); }
    25% { filter: brightness(1.5) saturate(1.3); }
    100% { filter: brightness(1.15); }
}

/* Joker highlight when triggering for a card */
.joker-card.triggering-for-card {
    animation: jokerTriggeringForCard 0.5s ease-out;
    box-shadow: 
        0 0 20px rgba(168, 85, 247, 0.8),
        0 0 40px rgba(168, 85, 247, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.3) !important;
    transform: scale(1.08) translateY(-3px);
    z-index: 50;
}

@keyframes jokerTriggeringForCard {
    0% { 
        filter: brightness(1);
        transform: scale(1.08) translateY(-3px) rotate(0);
    }
    20% { 
        filter: brightness(1.4);
        transform: scale(1.1) translateY(-5px) rotate(-2deg);
    }
    40% { 
        filter: brightness(1.3);
        transform: scale(1.08) translateY(-3px) rotate(2deg);
    }
    60% { 
        filter: brightness(1.2);
        transform: scale(1.08) translateY(-4px) rotate(-1deg);
    }
    100% { 
        filter: brightness(1.1);
        transform: scale(1.08) translateY(-3px) rotate(0);
    }
}

/* Big score flash effect */
@keyframes bigScoreFlash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3) saturate(1.2); }
}

.big-score-flash {
    animation: bigScoreFlash 0.5s ease-out;
}

/* Improved score total display */
.score-total-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    animation: totalReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes totalReveal {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }
    60% {
        transform: scale(1.15) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.score-total-display .score-equals {
    font-size: 20px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
}

.score-total-display .score-final {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    padding: 8px 18px;
    border-radius: 6px;
    box-shadow: 
        0 4px 16px rgba(34, 197, 94, 0.6),
        0 0 30px rgba(34, 197, 94, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: totalPulse 0.8s ease-in-out infinite;
}

@keyframes totalPulse {
    0%, 100% { 
        box-shadow: 
            0 4px 16px rgba(34, 197, 94, 0.6),
            0 0 30px rgba(34, 197, 94, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% { 
        box-shadow: 
            0 4px 20px rgba(34, 197, 94, 0.8),
            0 0 40px rgba(34, 197, 94, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

/* Card scoring states */
.card.retrigger {
    animation: cardRetrigger 0.3s ease-out;
}

@keyframes cardRetrigger {
    0%, 100% { transform: translateY(-20px) scale(1.05); }
    50% { transform: translateY(-25px) scale(1.1); filter: brightness(1.3); }
}

.card.steel-trigger {
    animation: steelTrigger 0.3s ease-out;
    box-shadow: 0 0 15px rgba(148, 163, 184, 0.8);
}

@keyframes steelTrigger {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5) saturate(0.5); }
}

/* DNA Joker copy animation */
.card.dna-copy-appear {
    animation: dnaCopyAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 100;
}

@keyframes dnaCopyAppear {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-10deg);
        filter: brightness(2) saturate(1.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(5deg);
        filter: brightness(1.5) saturate(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: brightness(1) saturate(1);
    }
}

.dna-glow-overlay {
    position: absolute;
    inset: -8px;
    border-radius: 8px;
    background: transparent;
    box-shadow: 
        0 0 20px rgba(34, 197, 94, 0.8),
        0 0 40px rgba(34, 197, 94, 0.5),
        0 0 60px rgba(34, 197, 94, 0.3),
        inset 0 0 15px rgba(34, 197, 94, 0.3);
    pointer-events: none;
    animation: dnaGlowPulse 0.8s ease-out forwards;
}

@keyframes dnaGlowPulse {
    0% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* Joker edition trigger */
.game-joker-card.edition-trigger,
.joker-card.edition-trigger {
    animation: editionTrigger 0.25s ease-out;
}

@keyframes editionTrigger {
    0%, 100% { transform: translateY(-5px) scale(1); }
    50% { transform: translateY(-10px) scale(1.1); filter: brightness(1.3); }
}

/* ===== TAROT EFFECT ANIMATIONS ===== */

/* Base tarot effect state - card being modified */
.card.tarot-effect,
.pack-hand-card.tarot-effect {
    animation: tarotEffectBase 0.6s ease-out;
    z-index: 100 !important;
}

@keyframes tarotEffectBase {
    0% { 
        transform: scale(1);
        filter: brightness(1);
    }
    30% { 
        transform: scale(1.15);
        filter: brightness(1.5);
    }
    60% {
        transform: scale(1.1);
        filter: brightness(1.3);
    }
    100% { 
        transform: scale(1);
        filter: brightness(1);
    }
}

/* Enhancement effect - magical sparkle overlay */
.card.tarot-enhance,
.pack-hand-card.tarot-enhance {
    animation: tarotEnhance 0.7s ease-out;
    z-index: 100 !important;
}

@keyframes tarotEnhance {
    0% { 
        transform: scale(1);
        filter: brightness(1) saturate(1);
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    25% { 
        transform: scale(1.2) rotate(-3deg);
        filter: brightness(1.6) saturate(1.5);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: scale(1.15) rotate(3deg);
        filter: brightness(1.4) saturate(1.3);
        box-shadow: 0 0 40px rgba(147, 51, 234, 0.7), 0 0 80px rgba(147, 51, 234, 0.3);
    }
    75% {
        transform: scale(1.1) rotate(-1deg);
        filter: brightness(1.3) saturate(1.2);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
    }
    100% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1) saturate(1);
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
}

/* Suit conversion effect - color shift */
.card.tarot-suit,
.pack-hand-card.tarot-suit {
    animation: tarotSuitChange 0.8s ease-out;
    z-index: 100 !important;
}

@keyframes tarotSuitChange {
    0% { 
        transform: scale(1) rotateY(0deg);
        filter: brightness(1);
    }
    30% { 
        transform: scale(1.1) rotateY(90deg);
        filter: brightness(0.5);
    }
    50% {
        transform: scale(1.15) rotateY(180deg);
        filter: brightness(1.8);
        box-shadow: 0 0 40px rgba(74, 158, 255, 0.8);
    }
    70% {
        transform: scale(1.1) rotateY(270deg);
        filter: brightness(1.3);
    }
    100% { 
        transform: scale(1) rotateY(360deg);
        filter: brightness(1);
    }
}

/* Rank upgrade effect - power surge */
.card.tarot-rank,
.pack-hand-card.tarot-rank {
    animation: tarotRankUp 0.6s ease-out;
    z-index: 100 !important;
}

@keyframes tarotRankUp {
    0% { 
        transform: scale(1) translateY(0);
        filter: brightness(1);
    }
    25% { 
        transform: scale(1.05) translateY(-10px);
        filter: brightness(1.3);
        box-shadow: 0 10px 30px rgba(34, 197, 94, 0.6);
    }
    50% {
        transform: scale(1.2) translateY(-20px);
        filter: brightness(1.6);
        box-shadow: 0 15px 50px rgba(34, 197, 94, 0.8), 0 0 30px rgba(255, 255, 255, 0.5);
    }
    75% {
        transform: scale(1.1) translateY(-5px);
        filter: brightness(1.2);
    }
    100% { 
        transform: scale(1) translateY(0);
        filter: brightness(1);
    }
}

/* Death card copy effect - transformation */
.card.tarot-copy,
.pack-hand-card.tarot-copy {
    animation: tarotCopy 0.9s ease-out;
    z-index: 100 !important;
}

@keyframes tarotCopy {
    0% { 
        transform: scale(1);
        filter: brightness(1) hue-rotate(0deg);
        opacity: 1;
    }
    20% { 
        transform: scale(0.9);
        filter: brightness(0.5) hue-rotate(0deg);
        opacity: 0.8;
    }
    40% {
        transform: scale(0.8);
        filter: brightness(0.3) hue-rotate(180deg);
        opacity: 0.5;
        box-shadow: 0 0 40px rgba(128, 0, 128, 0.8);
    }
    60% {
        transform: scale(1.1);
        filter: brightness(1.5) hue-rotate(360deg);
        opacity: 0.9;
        box-shadow: 0 0 50px rgba(255, 255, 255, 0.6);
    }
    80% {
        transform: scale(1.15);
        filter: brightness(1.3) hue-rotate(360deg);
        opacity: 1;
    }
    100% { 
        transform: scale(1);
        filter: brightness(1) hue-rotate(0deg);
        opacity: 1;
    }
}

/* Copy transformation animations (Death tarot) */
@keyframes copyOverlayFade {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes copyBadgeAppear {
    0% { 
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }
    30% { 
        transform: translate(-50%, -50%) scale(1.2) rotate(5deg);
        opacity: 1;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    80% { 
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
        opacity: 0;
    }
}

@keyframes copySparkle {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    30% {
        transform: translate(calc(-50% + var(--sparkle-x) * 0.3), calc(-50% + var(--sparkle-y) * 0.3)) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--sparkle-x)), calc(-50% + var(--sparkle-y))) scale(0);
        opacity: 0;
    }
}

.copy-transform-badge .copy-arrow {
    font-size: 1.2em;
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.copy-transform-badge .copy-result {
    display: flex;
    align-items: center;
    gap: 2px;
    font-weight: bold;
}

.copy-transform-badge .copy-rank {
    font-size: 1.4em;
}

.copy-transform-badge .copy-suit {
    font-size: 1.2em;
}

/* Source card glow for Death tarot (the card being copied FROM) */
.card.copy-source-glow,
.pack-hand-card.copy-source-glow {
    animation: copySourcePulse 0.9s ease-out;
    z-index: 99 !important;
}

@keyframes copySourcePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(167, 139, 250, 0);
    }
    20% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(167, 139, 250, 0.8), 0 0 60px rgba(124, 58, 237, 0.4);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 40px rgba(167, 139, 250, 1), 0 0 80px rgba(124, 58, 237, 0.6);
    }
    80% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(167, 139, 250, 0.6), 0 0 60px rgba(124, 58, 237, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(167, 139, 250, 0);
    }
}

/* Source card popup style */
.tarot-effect-popup.effect-copy-source {
    background: linear-gradient(135deg, rgba(196, 181, 253, 0.95), rgba(167, 139, 250, 0.95));
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(167, 139, 250, 0.6), 0 0 30px rgba(167, 139, 250, 0.3);
    font-weight: 600;
}

/* Destroy effect (Hanged Man) - fade to red then disappear */
.card.tarot-destroy,
.pack-hand-card.tarot-destroy {
    animation: tarotDestroy 0.7s ease-out forwards;
    z-index: 100 !important;
}

@keyframes tarotDestroy {
    0% { 
        transform: scale(1);
        filter: brightness(1);
        opacity: 1;
    }
    30% { 
        transform: scale(1.1);
        filter: brightness(1.5) saturate(2) hue-rotate(-30deg);
        box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
        opacity: 1;
    }
    60% {
        transform: scale(0.9) rotate(5deg);
        filter: brightness(0.8) saturate(1.5);
        opacity: 0.7;
    }
    100% { 
        transform: scale(0.5) rotate(15deg);
        filter: brightness(0) saturate(0);
        opacity: 0;
    }
}

/* Tarot effect popup - shows on affected cards */
.tarot-effect-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    animation: tarotPopup 0.9s ease-out forwards;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.tarot-effect-popup.effect-enhance {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.6), 0 0 30px rgba(251, 191, 36, 0.3);
}

.tarot-effect-popup.effect-suit {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.3);
}

.tarot-effect-popup.effect-rank {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.6), 0 0 30px rgba(16, 185, 129, 0.3);
}

.tarot-effect-popup.effect-copy {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.6), 0 0 30px rgba(124, 58, 237, 0.3);
}

.tarot-effect-popup.effect-destroy {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.6), 0 0 30px rgba(220, 38, 38, 0.3);
}

@keyframes tarotPopup {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    40% {
        transform: translate(-50%, -50%) scale(1);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -70%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(0.8);
    }
}

/* Tarot screen flash effects */
.tarot-screen-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    animation: tarotFlash 0.4s ease-out forwards;
}

.tarot-screen-flash.flash-enhance {
    background: radial-gradient(circle at center, rgba(251, 191, 36, 0.5) 0%, rgba(217, 119, 6, 0.3) 40%, transparent 70%);
}

.tarot-screen-flash.flash-suit {
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.5) 0%, rgba(37, 99, 235, 0.3) 40%, transparent 70%);
}

.tarot-screen-flash.flash-rank {
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.5) 0%, rgba(5, 150, 105, 0.3) 40%, transparent 70%);
}

.tarot-screen-flash.flash-copy {
    background: radial-gradient(circle at center, rgba(124, 58, 237, 0.5) 0%, rgba(91, 33, 182, 0.3) 40%, transparent 70%);
}

.tarot-screen-flash.flash-destroy {
    background: radial-gradient(circle at center, rgba(220, 38, 38, 0.5) 0%, rgba(185, 28, 28, 0.3) 40%, transparent 70%);
}

@keyframes tarotFlash {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

/* ===== TAROT TRANSFORMATION BADGES ===== */
/* Shows the actual change happening on the card */

.tarot-transform-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    pointer-events: none;
    animation: transformBadgeAppear 1.2s ease-out forwards;
}

.tarot-transform-badge.enhancement-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(217, 119, 6, 0.95) 100%);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.8), 0 0 40px rgba(251, 191, 36, 0.4);
}

.tarot-transform-badge.enhancement-badge .enhance-icon {
    font-size: 24px;
    display: block;
}

.tarot-transform-badge.enhancement-badge .enhance-name {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a1a2e;
    letter-spacing: 1px;
}

.tarot-transform-badge.suit-badge {
    font-size: 48px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 10px currentColor);
}

.tarot-transform-badge.rank-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.8), 0 0 40px rgba(16, 185, 129, 0.4);
    font-weight: 700;
    color: white;
}

.tarot-transform-badge.rank-badge .old-rank {
    font-size: 18px;
    opacity: 0.7;
    text-decoration: line-through;
}

.tarot-transform-badge.rank-badge .rank-arrow {
    font-size: 16px;
    animation: arrowPulse 0.3s ease-out infinite;
}

.tarot-transform-badge.rank-badge .new-rank {
    font-size: 24px;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}

@keyframes transformBadgeAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
    35% {
        transform: translate(-50%, -50%) scale(1);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) translateY(-20px);
    }
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

/* Improved popup animation - longer display */
.tarot-effect-popup {
    animation: tarotPopupImproved 1.2s ease-out forwards;
}

@keyframes tarotPopupImproved {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
    30% {
        transform: translate(-50%, -50%) scale(1);
    }
    75% {
        opacity: 1;
        transform: translate(-50%, -60%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100%) scale(0.8);
    }
}

/* Card glow during transformation */
.pack-hand-card.tarot-enhance::after,
.pack-hand-card.tarot-suit::after,
.pack-hand-card.tarot-rank::after,
.pack-hand-card.tarot-copy::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 8px;
    pointer-events: none;
    animation: cardGlow 1s ease-out forwards;
}

.pack-hand-card.tarot-enhance::after {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.8), inset 0 0 20px rgba(251, 191, 36, 0.3);
}

.pack-hand-card.tarot-suit::after {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), inset 0 0 20px rgba(59, 130, 246, 0.3);
}

.pack-hand-card.tarot-rank::after {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8), inset 0 0 20px rgba(16, 185, 129, 0.3);
}

.pack-hand-card.tarot-copy::after {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.8), inset 0 0 20px rgba(124, 58, 237, 0.3);
}

@keyframes cardGlow {
    0% { opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* Shake effect for destroy animation */
.pack-hand-card.tarot-destroy {
    animation: tarotDestroyShake 0.7s ease-out forwards;
}

@keyframes tarotDestroyShake {
    0% { 
        transform: scale(1);
        filter: brightness(1);
        opacity: 1;
    }
    10% { transform: scale(1.05) rotate(-2deg); }
    20% { transform: scale(1.1) rotate(2deg); }
    30% { 
        transform: scale(1.1) rotate(-3deg);
        filter: brightness(1.5) saturate(2) hue-rotate(-30deg);
        box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
    }
    40% { transform: scale(1.05) rotate(3deg); }
    50% { transform: scale(1) rotate(-2deg); }
    60% {
        transform: scale(0.9) rotate(5deg);
        filter: brightness(0.8) saturate(1.5);
        opacity: 0.7;
    }
    100% { 
        transform: scale(0.3) rotate(15deg);
        filter: brightness(0) saturate(0);
        opacity: 0;
    }
}

/* ===== PLAY AREA (Legacy) ===== */
.play-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    gap: 4px;
    overflow: visible;
    justify-content: flex-end;
    min-height: 0;
    position: relative;
    z-index: 50;
}

/* Played cards during scoring */
.played-cards-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}

.played-label {
    font-size: 11px;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.played-cards-container {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.hand-container {
    display: flex;
    justify-content: center;
    gap: 3px;
    padding: 24px 0 16px;
    min-height: 80px;
    flex-wrap: nowrap;
    perspective: 600px;
    overflow-x: auto;
    overflow-y: visible;
    touch-action: pan-y;
    position: relative;
    z-index: 100;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 6px 0;
    flex-shrink: 0;
}

.btn-play-hand:not(.disabled) {
    animation: playBtnPulse 2s ease-in-out infinite;
}

@keyframes playBtnPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(74, 158, 255, 0.2); }
    50% { box-shadow: 0 0 12px rgba(74, 158, 255, 0.4); }
}

.bottom-bar {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 4px 8px;
    flex-shrink: 0;
}

.deck-info, .run-info-btn {
    font-size: 9px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-panel);
    transition: all var(--transition-fast);
    user-select: none;
}

.deck-info:hover, .run-info-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: var(--glow-blue);
}

.deck-icon {
    font-size: 14px;
    margin-right: 2px;
}

/* Run Info Panel */
.ri-section {
    margin-bottom: 16px;
}

.ri-section h3 {
    font-size: 12px;
    color: var(--accent-cyan);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ri-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.ri-stat {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.ri-stat .val {
    font-weight: 700;
    color: var(--text-bright);
}

.ri-hand-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.ri-hand-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
}

.ri-hand-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

.ri-hand-name {
    color: var(--text);
}

.ri-hand-level {
    color: var(--accent-cyan);
    font-weight: 600;
}

.ri-hand-score {
    color: var(--text-dim);
}

.ri-hand-plays {
    color: var(--text-dim);
    text-align: right;
}

/* Run Info Panel specific styles for scrolling */
.run-info-panel {
    position: relative;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.run-info-panel .dv-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: calc(80vh - 60px);
    padding-bottom: 60px;
}

.ri-scroll-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
    background: rgba(26, 32, 48, 0.95);
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid #4a5a70;
}

.ri-scroll-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
    background: linear-gradient(180deg, #3a4a60 0%, #2a3a50 100%);
    border: 2px solid var(--accent-cyan);
    color: var(--accent-cyan);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ri-scroll-btn:hover {
    background: var(--accent-cyan);
    color: #1a2030;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}

.ri-scroll-btn:active {
    transform: scale(0.95);
}

/* Old plain text voucher style (deprecated) */
.ri-voucher {
    font-size: 11px;
    color: var(--accent-orange);
    padding: 4px 8px;
    background: rgba(255, 145, 0, 0.06);
    border-radius: 4px;
    margin-bottom: 4px;
}

/* Run Info - Voucher Cards Grid */
.ri-vouchers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.ri-voucher-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: linear-gradient(180deg, #4a3520 0%, #2a1a10 100%);
    border: 2px solid #ff9100;
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}

.ri-voucher-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 145, 0, 0.4);
}

.ri-voucher-icon {
    font-size: 24px;
}

.ri-voucher-name {
    font-size: 12px;
    color: #ffcc80;
    font-weight: bold;
}

.ri-voucher-desc {
    font-size: 10px;
    color: #ccc;
    line-height: 1.3;
}

/* ===== RUN INFO BALATRO STYLE ===== */
.run-info-panel-balatro {
    background: linear-gradient(180deg, #3a4a5a 0%, #2a3a4a 100%);
    border: 4px solid #5a6a7a;
    border-radius: 12px;
    width: 480px;
    max-width: 90%;
    height: auto;
    max-height: 390px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
    animation: slideUp 0.2s ease;
}

.ri-tab-pointer {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #e74c3c;
    transform: translateX(-50%);
    transition: left 0.2s ease;
    z-index: 10;
}

.ri-tab-bar {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px 8px;
    background: linear-gradient(180deg, #4a5a6a 0%, #3a4a5a 100%);
    border-bottom: 2px solid #5a6a7a;
    flex-shrink: 0;
}

.ri-tab {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'M6x11', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid #6a7a8a;
    border-radius: 6px;
    background: linear-gradient(180deg, #5a6a7a 0%, #4a5a6a 100%);
    color: #ccc;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ri-tab:hover {
    background: linear-gradient(180deg, #6a7a8a 0%, #5a6a7a 100%);
    color: #fff;
}

.ri-tab-active {
    background: linear-gradient(180deg, #ff8c42 0%, #e67320 100%);
    border-color: #ffaa66;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 140, 66, 0.4);
}

.ri-tab-active:hover {
    background: linear-gradient(180deg, #ff9955 0%, #ff8c42 100%);
}

.ri-tab-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

/* Poker Hands Tab - Balatro Style */
.ri-hand-row-balatro {
    display: grid;
    grid-template-columns: 50px 1fr auto 40px;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    margin-bottom: 3px;
    background: linear-gradient(180deg, #4a5a6a 0%, #3a4a5a 100%);
    border: 2px solid #5a6a7a;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ri-hand-row-balatro:hover {
    background: linear-gradient(180deg, #5a6a7a 0%, #4a5a6a 100%);
    border-color: #7a8a9a;
}

.ri-hand-row-balatro:hover .ri-hand-tooltip {
    display: block;
    opacity: 1;
}

.ri-level-pill {
    display: inline-block;
    padding: 3px 8px;
    background: linear-gradient(180deg, #eee 0%, #ccc 100%);
    border: 2px solid #aaa;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    color: #333;
    text-align: center;
}

.ri-hand-name-balatro {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.ri-score-balatro {
    display: flex;
    align-items: center;
    gap: 3px;
}

.ri-chips-box {
    display: inline-block;
    padding: 3px 8px;
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    border: 2px solid #ff6b5b;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    min-width: 32px;
    text-align: center;
}

.ri-score-x {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin: 0 1px;
}

.ri-mult-box {
    display: inline-block;
    padding: 3px 8px;
    background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
    border: 2px solid #5dade2;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    min-width: 24px;
    text-align: center;
}

.ri-plays-balatro {
    font-size: 11px;
    font-weight: 600;
    color: #3498db;
    text-align: right;
}

/* Hand Tooltip */
.ri-hand-tooltip {
    display: none;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #5a4a3a 0%, #4a3a2a 100%);
    border: 2px solid #8a6a4a;
    border-radius: 8px;
    padding: 8px 12px;
    z-index: 100;
    min-width: 220px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    transition: opacity 0.15s ease;
    margin-top: 4px;
}

.ri-tooltip-desc {
    font-size: 11px;
    color: #fff;
    text-align: center;
    margin-bottom: 6px;
}

.ri-tooltip-cards {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.ri-mini-card {
    width: 32px;
    height: 44px;
    background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
    border: 1px solid #888;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ri-mini-rank {
    font-size: 12px;
}

.ri-mini-suit {
    font-size: 14px;
}

/* Blinds Tab */
.ri-blinds-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ri-ante-header {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px 8px;
    background: linear-gradient(180deg, #2a3a4a 0%, #1a2a3a 100%);
    border: 2px solid #4a5a6a;
    border-radius: 8px 8px 0 0;
    margin-bottom: -8px;
}

.ri-ante-label {
    font-size: 14px;
    font-weight: 600;
    color: #aabbcc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ri-ante-value {
    font-size: 32px;
    font-weight: 800;
    color: #f1c40f;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.ri-ante-max {
    font-size: 16px;
    font-weight: 600;
    color: #6a7a8a;
}

.ri-ante-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(180deg, #1a2a3a 0%, #0a1a2a 100%);
    border: 2px solid #4a5a6a;
    border-top: none;
    margin-bottom: 4px;
}

.ri-progress-pip {
    width: 20px;
    height: 8px;
    border-radius: 4px;
    background: #3a4a5a;
    border: 1px solid #5a6a7a;
    transition: all 0.2s ease;
}

.ri-progress-pip.filled {
    background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%);
    border-color: #2ecc71;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.4);
}

.ri-progress-pip.current {
    background: linear-gradient(180deg, #f1c40f 0%, #e67e22 100%);
    border-color: #f39c12;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.6);
    animation: pip-pulse 1.5s ease-in-out infinite;
}

@keyframes pip-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.ri-round-info {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #8899aa;
    margin-bottom: 8px;
    padding: 6px 12px;
    background: #1a2a3a;
    border: 2px solid #4a5a6a;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-bottom: 12px;
}

.ri-blind-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #4a5a6a 0%, #3a4a5a 100%);
    border: 2px solid #5a6a7a;
    border-radius: 8px;
    position: relative;
}

.ri-blind-card.current {
    border-color: #f1c40f;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.3);
}

.ri-blind-card.completed {
    opacity: 0.6;
}

.ri-blind-card.boss {
    background: linear-gradient(180deg, #5a3a4a 0%, #4a2a3a 100%);
    border-color: #8a4a6a;
}

.ri-blind-chip {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ri-blind-chip.small {
    background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
    border: 3px solid #5dade2;
}

.ri-blind-chip.big {
    background: linear-gradient(180deg, #f39c12 0%, #e67e22 100%);
    border: 3px solid #f5b041;
}

.ri-blind-chip.boss {
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.ri-blind-info {
    flex: 1;
}

.ri-blind-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.ri-blind-desc {
    font-size: 10px;
    color: #e74c3c;
    margin-bottom: 4px;
    font-style: italic;
}

.ri-blind-score {
    font-size: 11px;
    color: #f1c40f;
    margin-bottom: 1px;
}

.ri-blind-reward {
    font-size: 10px;
    color: #2ecc71;
}

.ri-blind-status {
    font-size: 18px;
    color: #2ecc71;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

.ri-blind-card.current .ri-blind-status {
    color: #f1c40f;
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Stake Tab */
.ri-stake-container {
    padding: 12px;
    background: linear-gradient(180deg, #4a5a6a 0%, #3a4a5a 100%);
    border: 2px solid #5a6a7a;
    border-radius: 8px;
}

.ri-stake-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.ri-stake-chip {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid;
}

.ri-stake-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.ri-stake-desc {
    font-size: 12px;
    color: #ccc;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #5a6a7a;
}

.ri-stake-modifiers {
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.ri-modifiers-title {
    font-size: 11px;
    color: #f1c40f;
    font-weight: 600;
    margin-bottom: 6px;
}

.ri-modifier-item {
    font-size: 10px;
    color: #e74c3c;
    margin-bottom: 3px;
    padding-left: 6px;
}

/* Empty state message */
.ri-empty-message {
    text-align: center;
    padding: 24px;
    font-size: 13px;
    color: #888;
}

/* Bottom bar with Back button */
.ri-bottom-bar {
    padding: 8px 12px;
    background: linear-gradient(180deg, #3a4a5a 0%, #2a3a4a 100%);
    border-top: 2px solid #5a6a7a;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.ri-back-btn {
    padding: 8px 40px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'M6x11', monospace;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ff8c42 0%, #e67320 100%);
    border: 2px solid #ffaa66;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ri-back-btn:hover {
    background: linear-gradient(180deg, #ff9955 0%, #ff8c42 100%);
    box-shadow: 0 2px 8px rgba(255, 140, 66, 0.4);
}

.ri-back-btn:active {
    opacity: 0.9;
}

/* ===== DECK VIEWER MODAL (Balatro Style) ===== */
.deck-viewer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
    backdrop-filter: blur(3px);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.deck-viewer {
    background: linear-gradient(180deg, #2a3040 0%, #1a2030 100%);
    border: 3px solid #4a5a70;
    border-radius: 10px;
    width: 520px;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from { transform: translateY(15px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.dv-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #3a4a60 0%, #2a3a50 100%);
    border-bottom: 2px solid #4a5a70;
    border-radius: 7px 7px 0 0;
    position: relative;
    z-index: 1; /* Lower than tooltip z-index */
}

.dv-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 8px rgba(0, 229, 255, 0.5);
}

.dv-subtitle {
    font-size: 11px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.btn-close-dv {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    background: rgba(255, 68, 102, 0.15);
    border: 2px solid var(--accent-red);
    color: var(--accent-red);
    border-radius: 5px;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.1s ease;
}

.btn-close-dv:hover {
    background: var(--accent-red);
    color: white;
}

.dv-body {
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 10; /* Higher than header so tooltips can appear above it */
}

/* Suit rows */
.dv-suit-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    min-height: 50px;
    position: relative;
    z-index: 1;
}

/* Elevate row when it contains a hovered or selected card so tooltip appears above other rows */
.dv-suit-row:has(.dv-mini-card:hover),
.dv-suit-row:has(.dv-mini-card.dv-selected) {
    z-index: 1000;
}

.dv-suit-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    gap: 2px;
    flex-shrink: 0;
    padding-top: 4px;
}

.dv-suit-symbol {
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.dv-suit-label.suit-red .dv-suit-symbol {
    color: #ff6b7a;
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 6px rgba(255, 68, 102, 0.4);
}

.dv-suit-count {
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.dv-suit-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    flex: 1;
    padding: 2px;
    align-content: flex-start;
    overflow: visible;
}

/* Custom scrollbar for suit cards */
.dv-suit-cards::-webkit-scrollbar {
    width: 6px;
}

.dv-suit-cards::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.dv-suit-cards::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.dv-suit-cards::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Mini cards */
.dv-mini-card {
    width: 28px;
    height: 38px;
    background: linear-gradient(160deg, #fffef5 0%, #f5f0e3 40%, #e8e3d6 100%);
    border: 2px solid #6b6560;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    transition: transform 0.1s ease, opacity 0.1s ease;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.dv-mini-card:hover {
    transform: scale(1.3);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dv-mini-rank {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: #2a2520;
}

.dv-mini-suit {
    font-size: 13px;
    line-height: 1;
}

/* Suit colors on mini cards */
.dv-mini-card.suit-red .dv-mini-rank,
.dv-mini-card.suit-red .dv-mini-suit {
    color: #c9303e;
}

.dv-mini-card.suit-dark .dv-mini-rank,
.dv-mini-card.suit-dark .dv-mini-suit {
    color: #2a2520;
}

/* Used cards (in hand or discarded) - greyed out */
.dv-mini-card.dv-card-used {
    opacity: 0.4;
    filter: grayscale(0.8) brightness(0.9);
    background: linear-gradient(160deg, #c8c8c8 0%, #a8a8a8 40%, #909090 100%);
    border-color: #666;
}

.dv-mini-card.dv-card-used .dv-mini-rank,
.dv-mini-card.dv-card-used .dv-mini-suit {
    color: #555 !important;
}

.dv-mini-card.dv-card-used:hover {
    opacity: 0.6;
    filter: grayscale(0.6) brightness(0.95);
}

/* Visual indicator for in-hand cards */
.dv-mini-card.dv-card-in-hand::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--accent-cyan);
    border-radius: 50%;
    box-shadow: 0 0 4px var(--accent-cyan);
}

/* Visual indicator for discarded cards */
.dv-mini-card.dv-card-discarded::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 6px;
    height: 6px;
    background: var(--accent-red);
    border-radius: 50%;
    opacity: 0.8;
}

/* Mini card enhancements - using consistent enhance-* classes (matches gameplay cards) */
.dv-mini-card.enhance-bonus, .fdv-mini-card.enhance-bonus { background: linear-gradient(160deg, #d0e8ff 0%, #a8d4ff 100%); border-color: #4a9eff; }
.dv-mini-card.enhance-mult, .fdv-mini-card.enhance-mult { background: linear-gradient(160deg, #ffd8d8 0%, #ffb8b8 100%); border-color: #ff6666; }
.dv-mini-card.enhance-wild, .fdv-mini-card.enhance-wild { background: linear-gradient(160deg, #ffe8c8 0%, #ffd8a8 100%); border-color: #ffaa44; }
.dv-mini-card.enhance-glass, .fdv-mini-card.enhance-glass { background: linear-gradient(160deg, #e8e8ff 0%, #d0d0ff 100%); border-color: #aa88ff; }
.dv-mini-card.enhance-steel, .fdv-mini-card.enhance-steel { background: linear-gradient(160deg, #e0e8f0 0%, #c8d8e8 100%); border-color: #88aacc; }
.dv-mini-card.enhance-stone, .fdv-mini-card.enhance-stone { background: linear-gradient(160deg, #e0dcd8 0%, #c8c4c0 100%); border-color: #888480; }
.dv-mini-card.enhance-gold, .fdv-mini-card.enhance-gold { background: linear-gradient(160deg, #fff0b0 0%, #ffe070 100%); border-color: #ffcc00; box-shadow: 0 0 6px rgba(255, 204, 0, 0.4); }
.dv-mini-card.enhance-lucky, .fdv-mini-card.enhance-lucky { background: linear-gradient(160deg, #d0ffd0 0%, #a8ffa8 100%); border-color: #44dd44; }

/* Legacy dv-mini-enhance-* classes for backwards compatibility */
.dv-mini-card.dv-mini-enhance-bonus { background: linear-gradient(160deg, #d0e8ff 0%, #a8d4ff 100%); border-color: #4a9eff; }
.dv-mini-card.dv-mini-enhance-mult { background: linear-gradient(160deg, #ffd8d8 0%, #ffb8b8 100%); border-color: #ff6666; }
.dv-mini-card.dv-mini-enhance-wild { background: linear-gradient(160deg, #ffe8c8 0%, #ffd8a8 100%); border-color: #ffaa44; }
.dv-mini-card.dv-mini-enhance-glass { background: linear-gradient(160deg, #e8e8ff 0%, #d0d0ff 100%); border-color: #aa88ff; }
.dv-mini-card.dv-mini-enhance-steel { background: linear-gradient(160deg, #e0e8f0 0%, #c8d8e8 100%); border-color: #88aacc; }
.dv-mini-card.dv-mini-enhance-stone { background: linear-gradient(160deg, #e0dcd8 0%, #c8c4c0 100%); border-color: #888480; }
.dv-mini-card.dv-mini-enhance-gold { background: linear-gradient(160deg, #fff0b0 0%, #ffe070 100%); border-color: #ffcc00; box-shadow: 0 0 6px rgba(255, 204, 0, 0.4); }
.dv-mini-card.dv-mini-enhance-lucky { background: linear-gradient(160deg, #d0ffd0 0%, #a8ffa8 100%); border-color: #44dd44; }

/* Mini card enhancement/seal/edition badges - consistent icon display */
.dv-enhance-badge, .fdv-enhance-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 8px;
    line-height: 1;
    z-index: 5;
}

.dv-seal-badge, .fdv-seal-badge {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    line-height: 1;
    z-index: 5;
}

.dv-edition-badge, .fdv-edition-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    font-size: 8px;
    line-height: 1;
    z-index: 5;
}

/* Mini card editions - using consistent edition-* classes */
.dv-mini-card.edition-foil, .fdv-mini-card.edition-foil { box-shadow: 0 0 6px rgba(200, 150, 220, 0.6); border-color: #c8a0dc; }
.dv-mini-card.edition-holographic, .fdv-mini-card.edition-holographic { box-shadow: 0 0 6px rgba(100, 200, 255, 0.6); border-color: #88ddff; }
.dv-mini-card.edition-polychrome, .fdv-mini-card.edition-polychrome { box-shadow: 0 0 8px rgba(100, 255, 200, 0.5); border-color: #555; background: rgba(20, 20, 30, 0.4); }

/* Legacy dv-mini-edition-* classes */
.dv-mini-card.dv-mini-edition-foil { box-shadow: 0 0 6px rgba(200, 150, 220, 0.6); border-color: #c8a0dc; }
.dv-mini-card.dv-mini-edition-holographic { box-shadow: 0 0 6px rgba(100, 200, 255, 0.6); border-color: #88ddff; }
.dv-mini-card.dv-mini-edition-polychrome { box-shadow: 0 0 8px rgba(100, 255, 200, 0.5); border-color: #555; background: rgba(20, 20, 30, 0.4); }

/* Mini card seals - using consistent seal-* classes */
.dv-mini-card.seal-red, .fdv-mini-card.seal-red { box-shadow: 0 0 4px rgba(255, 68, 102, 0.5); }
.dv-mini-card.seal-blue, .fdv-mini-card.seal-blue { box-shadow: 0 0 4px rgba(68, 136, 255, 0.5); }
.dv-mini-card.seal-purple, .fdv-mini-card.seal-purple { box-shadow: 0 0 4px rgba(170, 102, 255, 0.5); }
.dv-mini-card.seal-gold, .fdv-mini-card.seal-gold { box-shadow: 0 0 4px rgba(255, 204, 0, 0.5); }

/* Legacy dv-mini-seal-* classes */
.dv-mini-card.dv-mini-seal-red::before { content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: #ff4466; border-radius: 50%; }
.dv-mini-card.dv-mini-seal-blue::before { content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: #4488ff; border-radius: 50%; }
.dv-mini-card.dv-mini-seal-purple::before { content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: #aa66ff; border-radius: 50%; }
.dv-mini-card.dv-mini-seal-gold::before { content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: #ffcc00; border-radius: 50%; }

/* Deck viewer tooltip - using a wrapper span approach */
.dv-mini-card {
    position: relative;
}

/* Tooltip container */
.dv-mini-card .dv-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 6px); /* Position below card to avoid clipping */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #2a3040 0%, #1a2030 100%);
    border: 2px solid #4a5a70;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
    white-space: pre-line;
    line-height: 1.5;
    z-index: 9999;
    min-width: 150px;
    max-width: 220px;
    text-align: left;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* Show tooltip on hover */
.dv-mini-card:hover .dv-tooltip {
    display: block;
}

/* Selected card state - tap to select */
.dv-mini-card.dv-selected {
    transform: scale(1.4) translateY(-4px);
    z-index: 200;
    box-shadow: 
        0 0 0 3px var(--accent-cyan),
        0 0 15px rgba(0, 229, 255, 0.6),
        0 6px 20px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-cyan);
}

/* Keep selected card scaled on hover */
.dv-mini-card.dv-selected:hover {
    transform: scale(1.4) translateY(-4px);
}

/* Show tooltip when card is selected (for tap/mobile support) */
.dv-mini-card.dv-selected .dv-tooltip {
    display: block;
    top: calc(100% + 10px); /* Position below card */
    min-width: 160px;
    background: linear-gradient(180deg, #1a3050 0%, #0a1828 100%);
    border: 2px solid var(--accent-cyan);
    box-shadow: 
        0 0 10px rgba(0, 229, 255, 0.3),
        0 6px 20px rgba(0, 0, 0, 0.7);
}

/* ===== JOKER PREVIEW POPUP ===== */
.joker-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
    backdrop-filter: blur(4px);
}

.joker-preview {
    background: linear-gradient(180deg, #2a3040 0%, #1a2030 100%);
    border: 3px solid #4a5a70;
    border-radius: 12px;
    width: 280px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    animation: slideUp 0.2s ease;
    overflow: hidden;
}

.jp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(180deg, #3a4a60 0%, #2a3a50 100%);
    border-bottom: 3px solid #4a5a70;
}

.jp-name {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.jp-rarity {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.jp-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.jp-image-container {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 2px solid #3a3a55;
}

.jp-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    image-rendering: pixelated;
}

.jp-placeholder {
    font-size: 48px;
}

.jp-description {
    font-size: 11px;
    line-height: 1.5;
    color: #d0d0e0;
    text-align: center;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    width: 100%;
}

.jp-actions {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 2px solid #3a3a55;
}

.jp-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jp-btn-buy {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    border: 2px solid #15803d;
    color: white;
}

.jp-btn-buy:hover:not(.disabled) {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
}

.jp-btn-buy.disabled {
    background: linear-gradient(180deg, #4a4a5a 0%, #3a3a4a 100%);
    border-color: #555;
    color: #888;
    cursor: not-allowed;
}

.jp-btn-sell {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    border: 2px solid #b45309;
    color: white;
}

.jp-btn-sell:hover {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
}

.jp-btn-cancel {
    background: linear-gradient(180deg, #4a4a60 0%, #3a3a50 100%);
    border: 2px solid #5a5a70;
    color: #ccc;
}

.jp-btn-cancel:hover {
    background: linear-gradient(180deg, #5a5a70 0%, #4a4a60 100%);
    color: white;
}

/* ===== CARDS - Balatro Style ===== */
.card {
    width: var(--card-width);
    height: var(--card-height);
    background: linear-gradient(160deg, #fffef5 0%, #f5f0e3 40%, #e8e3d6 100%);
    border: 3px solid #6b6560;
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.15s ease,
                border-color 0.1s ease;
    position: relative;
    flex-shrink: 0;
    animation: cardDeal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: calc(var(--card-index, 0) * 0.04s);
    user-select: none;
    box-shadow: 
        0 2px 0 #4a4540,
        0 4px 8px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

.card::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.05);
    pointer-events: none;
}

@keyframes cardDeal {
    0% {
        opacity: 0;
        transform: translateY(60px) rotateX(30deg) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateY(-5px) rotateX(-5deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0) scale(1);
    }
}

/* Card discard animation - cards fly down toward discard pile */
.card.discarding {
    pointer-events: none !important;
    z-index: 300 !important;
}

@keyframes cardDiscard {
    0% {
        opacity: 1;
        transform: translateY(var(--discard-start-y, -24px)) scale(1.05) rotate(0deg);
        filter: brightness(1);
    }
    20% {
        opacity: 1;
        transform: translateY(calc(var(--discard-start-y, -24px) - 15px)) scale(1.1) rotate(var(--discard-rotate, 5deg));
        filter: brightness(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(var(--discard-end-y, 150px)) translateX(var(--discard-end-x, 100px)) scale(0.3) rotate(var(--discard-rotate, 15deg));
        filter: brightness(0.5);
    }
}

/* Subtle red glow effect on discarding cards */
.card.discarding::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 10px;
    background: radial-gradient(ellipse at center, rgba(244, 63, 94, 0.4) 0%, transparent 70%);
    pointer-events: none;
    animation: discardGlow 0.1s ease-out forwards;
}

@keyframes discardGlow {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    40% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

.card.no-anim {
    animation: none;
}

.card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 4px 0 #4a4540,
        0 12px 20px rgba(0,0,0,0.5);
    z-index: 10;
}

.card.selected {
    transform: translateY(-24px) scale(1.05);
    border-color: var(--accent-cyan);
    box-shadow: 
        0 0 0 2px var(--accent-cyan),
        0 0 20px rgba(0, 212, 255, 0.5),
        0 0 40px rgba(0, 212, 255, 0.3),
        0 15px 30px rgba(0,0,0,0.5);
    z-index: 200;
    animation: cardSelected 0.6s ease infinite, cardSnap 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease-out;
}

/* Spring-like snap animation when card is selected - with squash/stretch */
@keyframes cardSnap {
    0% { 
        transform: translateY(0) scale(1, 1);
    }
    25% { 
        transform: translateY(-10px) scale(1.06, 0.94); /* Squash horizontal */
    }
    50% { 
        transform: translateY(-28px) scale(0.96, 1.08); /* Stretch vertical */
    }
    75% { 
        transform: translateY(-26px) scale(1.06, 1.04);
    }
    100% { 
        transform: translateY(-24px) scale(1.05, 1.05);
    }
}

@keyframes cardSelected {
    0%, 100% { 
        box-shadow: 
            0 0 0 2px var(--accent-cyan),
            0 0 15px rgba(0, 212, 255, 0.4),
            0 0 30px rgba(0, 212, 255, 0.2),
            0 15px 30px rgba(0,0,0,0.5);
    }
    50% { 
        box-shadow: 
            0 0 0 3px var(--accent-cyan),
            0 0 25px rgba(0, 212, 255, 0.6),
            0 0 50px rgba(0, 212, 255, 0.3),
            0 15px 30px rgba(0,0,0,0.5);
    }
}

.card.selected:hover {
    transform: translateY(-26px) scale(1.06);
}

/* Card drag-to-reorder styles */
.card[draggable] {
    cursor: grab;
}

.card[draggable]:active {
    cursor: grabbing;
}

/* Flash animation when entering reorder mode (tap and hold) */
.card.reorder-flash,
.pack-hand-card.reorder-flash {
    animation: reorderFlash 0.4s ease-out;
}

@keyframes reorderFlash {
    0% { 
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.8);
        transform: scale(1);
    }
    25% { 
        box-shadow: 0 0 20px 8px rgba(0, 229, 255, 0.6);
        transform: scale(1.08);
    }
    50% { 
        box-shadow: 0 0 30px 12px rgba(0, 229, 255, 0.4);
        transform: scale(1.05);
    }
    100% { 
        box-shadow: 0 0 15px 4px rgba(0, 229, 255, 0.3);
        transform: scale(1.02);
    }
}

.card.dragging {
    opacity: 0.4;
    transform: scale(0.95);
    animation: cardPickup 0.15s ease-out;
}

/* Squash and stretch animation on card pickup - Balatro feel */
@keyframes cardPickup {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.08, 0.92); } /* Squash wide */
    60% { transform: scale(0.94, 1.06); } /* Stretch tall */
    100% { transform: scale(0.95, 0.95); }
}

.card.drag-over {
    border-color: var(--accent-cyan) !important;
    box-shadow: 
        0 0 0 2px var(--accent-cyan),
        -3px 0 12px rgba(0, 229, 255, 0.5);
    transform: translateY(-8px);
}

/* Pack hand card drag-to-reorder styles */
.pack-hand-card[draggable] {
    cursor: grab;
}

.pack-hand-card[draggable]:active {
    cursor: grabbing;
}

.pack-hand-card.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.pack-hand-card.drag-over {
    border-color: var(--accent-cyan) !important;
    box-shadow: 
        0 0 0 2px var(--accent-cyan),
        -3px 0 12px rgba(0, 229, 255, 0.5);
    transform: translateY(-8px);
}

/* Card scoring - Balatro style: bright glow and lift */
.card.scoring {
    animation: cardScorePulse 0.5s ease-out;
    border-color: var(--accent-gold);
    box-shadow: 
        0 0 0 3px var(--accent-gold),
        0 0 30px rgba(245, 200, 66, 0.9),
        0 0 60px rgba(245, 200, 66, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.4);
    z-index: 20;
    transform: translateY(-15px) scale(1.1);
    filter: brightness(1.15);
}

@keyframes cardScorePulse {
    0% { 
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 1px var(--accent-gold), 0 0 10px rgba(245, 200, 66, 0.3);
        filter: brightness(1);
    }
    30% { 
        transform: translateY(-18px) scale(1.15);
        box-shadow: 
            0 0 0 4px var(--accent-gold),
            0 0 40px rgba(245, 200, 66, 1),
            0 0 80px rgba(245, 200, 66, 0.6);
        filter: brightness(1.25);
    }
    100% { 
        transform: translateY(-15px) scale(1.1);
        box-shadow: 
            0 0 0 3px var(--accent-gold),
            0 0 30px rgba(245, 200, 66, 0.9),
            0 0 60px rgba(245, 200, 66, 0.5);
        filter: brightness(1.15);
    }
}

/* Card scored - after scoring, stays slightly lifted */
.card.scored {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 
        0 0 0 2px var(--accent-gold),
        0 0 15px rgba(245, 200, 66, 0.5);
    z-index: 15;
}

.card.debuffed {
    filter: grayscale(0.7) brightness(0.6) contrast(0.9);
    opacity: 0.8;
}

.card.debuffed::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 3px,
            rgba(80,0,0,0.15) 3px,
            rgba(80,0,0,0.15) 6px
        );
    border-radius: var(--card-radius);
    pointer-events: none;
}

.card.face-down {
    background: linear-gradient(135deg, #2a3a6a 0%, #1a2a4a 100%);
    border-color: #3a4a7a;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.03) 4px, rgba(255,255,255,0.03) 8px),
        repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255,255,255,0.03) 4px, rgba(255,255,255,0.03) 8px),
        linear-gradient(135deg, #2a3a6a 0%, #1a2a4a 100%);
}

.card.face-down .card-back {
    color: #4a5a8a;
    font-size: 28px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
}

.card-inner {
    padding: 3px 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-rank {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.card-suit {
    font-size: 8px;
    line-height: 1;
    margin-top: -1px;
}

.card-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.card-rank-bottom {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-align: right;
    transform: rotate(180deg);
    align-self: flex-end;
}

.suit-red {
    color: #d42050;
}

.suit-dark {
    color: #1a1a2e;
}

/* Card Enhancements - Balatro-Accurate Visual Styles */

/* Bonus Card - Blue crystal/gem theme with diamond pattern */
.enhance-bonus {
    background: linear-gradient(145deg, #c8e0f8 0%, #a0c8f0 40%, #80b0e8 100%);
    border: 3px solid #4080c0;
    box-shadow: 0 0 8px rgba(64, 128, 192, 0.4);
    position: relative;
    overflow: hidden;
}
.enhance-bonus::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(60deg, transparent 35%, rgba(255,255,255,0.3) 50%, transparent 65%),
        linear-gradient(-60deg, transparent 35%, rgba(255,255,255,0.3) 50%, transparent 65%);
    pointer-events: none;
}
.enhance-bonus::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2 L18 10 L10 18 L2 10 Z' fill='none' stroke='rgba(64,128,192,0.2)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    pointer-events: none;
    border-radius: var(--card-radius);
}

/* Mult Card - Red energy theme with radiating lines */
.enhance-mult {
    background: linear-gradient(145deg, #f8d0d0 0%, #f0a0a0 40%, #e07070 100%);
    border: 3px solid #c04040;
    box-shadow: 0 0 8px rgba(192, 64, 64, 0.4);
    position: relative;
    overflow: hidden;
}
.enhance-mult::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,80,80,0.15) 0%, transparent 60%);
    pointer-events: none;
}
.enhance-mult::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 0 L20 40 M0 20 L40 20 M5 5 L35 35 M35 5 L5 35' stroke='rgba(192,64,64,0.15)' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    background-position: center;
    pointer-events: none;
    border-radius: var(--card-radius);
}

/* Wild Card - Rainbow/multicolor swirl theme */
.enhance-wild {
    background: linear-gradient(135deg, 
        #ffe8e8 0%, 
        #e8ffe8 20%, 
        #e8e8ff 40%, 
        #ffe8ff 60%, 
        #ffffe8 80%, 
        #e8ffff 100%);
    border: 3px solid #60a060;
    box-shadow: 0 0 10px rgba(100, 160, 100, 0.3);
    position: relative;
    overflow: hidden;
}
.enhance-wild::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(255,100,100,0.1),
        rgba(100,255,100,0.1),
        rgba(100,100,255,0.1),
        rgba(255,100,255,0.1),
        rgba(255,255,100,0.1),
        rgba(100,255,255,0.1),
        rgba(255,100,100,0.1)
    );
    animation: wildSpin 8s linear infinite;
    pointer-events: none;
}
@keyframes wildSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Glass Card - White/cream with red-orange zigzag cracks (Balatro-accurate) */
.enhance-glass {
    background: linear-gradient(145deg, #faf8f2 0%, #f5f0e5 50%, #efe8d8 100%);
    border: 3px solid #c83820;
    box-shadow: 0 0 8px rgba(200, 56, 32, 0.35);
    position: relative;
    overflow: hidden;
}
.enhance-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='100' viewBox='0 0 70 100'%3E%3Cpath d='M12 0 L16 8 L10 16 L18 26 L11 36 L19 48 L12 58 L20 70 L13 80 L21 92 L15 100' stroke='%23c83820' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 26 L28 22 L38 28' stroke='%23d04028' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M19 48 L32 52 L42 46' stroke='%23d04028' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M20 70 L34 66 L46 74' stroke='%23d04028' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M52 0 L48 12 L56 24 L49 38 L57 52 L50 66 L58 80 L52 92 L58 100' stroke='%23b83018' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M49 38 L40 34' stroke='%23b83018' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50 66 L42 62' stroke='%23b83018' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    opacity: 1;
}
.enhance-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 25%, transparent 75%, rgba(255,255,255,0.25) 100%);
    pointer-events: none;
    border-radius: var(--card-radius);
}

/* Steel Card - Blue background with arrow rows (Balatro-accurate) */
.enhance-steel {
    background: linear-gradient(180deg, #88c0e8 0%, #68a8d8 30%, #5090c8 60%, #68a8d8 100%);
    border: 3px solid #3868a0;
    box-shadow: 0 0 10px rgba(56, 104, 160, 0.45);
    position: relative;
    overflow: hidden;
}
.enhance-steel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'%3E%3Cpath d='M8 8 L12 3 L16 8' stroke='%233060a0' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 3 L12 13' stroke='%233060a0' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M8 20 L12 25 L16 20' stroke='%233060a0' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 25 L12 15' stroke='%233060a0' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 28px;
    background-repeat: repeat;
    pointer-events: none;
    opacity: 1;
}
.enhance-steel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.08) 100%);
    pointer-events: none;
    border-radius: var(--card-radius);
}

/* Stone Card - Gray with diagonal stripes (Balatro-accurate) */
.enhance-stone {
    background: linear-gradient(145deg, #989898 0%, #787878 30%, #686868 60%, #787878 100%);
    border: 3px solid #484848;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}
.enhance-stone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -50deg,
        rgba(90,90,90,0.5) 0px,
        rgba(90,90,90,0.5) 4px,
        rgba(60,60,60,0.6) 4px,
        rgba(60,60,60,0.6) 8px,
        rgba(100,100,100,0.4) 8px,
        rgba(100,100,100,0.4) 12px,
        rgba(70,70,70,0.55) 12px,
        rgba(70,70,70,0.55) 16px
    );
    pointer-events: none;
}
.enhance-stone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 35%),
        linear-gradient(-45deg, rgba(0,0,0,0.15) 0%, transparent 35%);
    pointer-events: none;
    border-radius: var(--card-radius);
}

/* Gold Card - Yellow/orange weathered parchment texture (Balatro-accurate) */
.enhance-gold {
    background: linear-gradient(145deg, #e8c850 0%, #d8b040 25%, #c8a030 50%, #d8b040 75%, #e8c850 100%);
    border: 3px solid #a08020;
    box-shadow: 0 0 12px rgba(160, 128, 32, 0.45);
    position: relative;
    overflow: hidden;
}
.enhance-gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(180,140,40,0.15) 2px,
            rgba(180,140,40,0.15) 3px,
            transparent 3px,
            transparent 6px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 3px,
            rgba(160,120,30,0.12) 3px,
            rgba(160,120,30,0.12) 4px,
            transparent 4px,
            transparent 8px
        );
    pointer-events: none;
}
.enhance-gold::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 3px,
            rgba(160,120,40,0.08) 3px,
            rgba(160,120,40,0.08) 4px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 5px,
            rgba(140,100,30,0.06) 5px,
            rgba(140,100,30,0.06) 6px
        ),
        linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%, rgba(0,0,0,0.08) 100%);
    pointer-events: none;
    border-radius: var(--card-radius);
}

/* Lucky Card - White/cream with marble veins (Balatro-accurate) */
.enhance-lucky {
    background: linear-gradient(145deg, #f8f6f0 0%, #f0ece4 50%, #e8e4dc 100%);
    border: 3px solid #50a050;
    box-shadow: 0 0 10px rgba(80, 160, 80, 0.35);
    position: relative;
    overflow: hidden;
}
.enhance-lucky::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='100' viewBox='0 0 70 100'%3E%3Cpath d='M8 0 Q12 15 8 30 Q4 45 10 60 Q16 75 10 90 Q6 100 8 100' stroke='rgba(140,150,140,0.3)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M10 60 Q20 58 30 64' stroke='rgba(140,150,140,0.25)' stroke-width='1' fill='none'/%3E%3Cpath d='M30 0 Q35 18 30 35 Q25 52 32 70 Q38 88 34 100' stroke='rgba(130,140,130,0.28)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M32 70 Q42 66 52 72' stroke='rgba(130,140,130,0.22)' stroke-width='1' fill='none'/%3E%3Cpath d='M55 0 Q50 20 56 40 Q62 60 54 80 Q48 95 52 100' stroke='rgba(135,145,135,0.26)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M54 40 Q44 38 35 44' stroke='rgba(135,145,135,0.2)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
}
.enhance-lucky::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 30%),
        linear-gradient(-45deg, rgba(200,200,200,0.1) 0%, transparent 30%);
    pointer-events: none;
    border-radius: var(--card-radius);
}

/* Enhancement Badge - Improved styling */
.enhance-badge {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 5;
}
.enhance-icon {
    font-size: 10px;
}
.enhance-text {
    font-family: 'Courier New', monospace;
}

.badge-bonus { background: linear-gradient(135deg, rgba(64, 128, 192, 0.95), rgba(48, 96, 160, 0.95)); }
.badge-mult { background: linear-gradient(135deg, rgba(192, 64, 64, 0.95), rgba(160, 48, 48, 0.95)); }
.badge-wild { background: linear-gradient(135deg, rgba(96, 160, 96, 0.95), rgba(64, 128, 64, 0.95)); }
.badge-glass { background: linear-gradient(135deg, rgba(192, 64, 48, 0.95), rgba(160, 48, 40, 0.95)); }
.badge-steel { background: linear-gradient(135deg, rgba(72, 120, 160, 0.95), rgba(56, 96, 128, 0.95)); }
.badge-stone { background: linear-gradient(135deg, rgba(80, 80, 80, 0.95), rgba(56, 56, 56, 0.95)); }
.badge-gold { background: linear-gradient(135deg, rgba(184, 144, 40, 0.95), rgba(152, 112, 32, 0.95)); }
.badge-lucky { background: linear-gradient(135deg, rgba(96, 160, 96, 0.95), rgba(64, 128, 64, 0.95)); }

/* Seal Badge - Positioned in corner */
.seal-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.seal-badge-gold {
    background: linear-gradient(135deg, #ffd700, #daa520);
    border: 1px solid #b8860b;
}
.seal-badge-red {
    background: linear-gradient(135deg, #ff4040, #c00);
    border: 1px solid #900;
}
.seal-badge-blue {
    background: linear-gradient(135deg, #4080ff, #2060d0);
    border: 1px solid #1040a0;
}
.seal-badge-purple {
    background: linear-gradient(135deg, #a040ff, #7020c0);
    border: 1px solid #5010a0;
}

/* Edition Indicator */
.edition-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 12px;
    z-index: 5;
    text-shadow: 0 0 4px rgba(255,255,255,0.8);
}

/* Card Editions */
/* Edition effects - Applied via separate overlay div to avoid conflicts with enhancement pseudo-elements */

/* Base edition overlay styles */
.edition-overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}

/* Foil Edition - Subtle pink/magenta metallic sheen like reflective foil */
.edition-foil {
    box-shadow: 0 0 12px rgba(200, 150, 220, 0.5), 0 0 25px rgba(180, 140, 200, 0.3);
}

.edition-overlay-foil {
    background: linear-gradient(160deg, 
        rgba(220, 180, 230, 0.15) 0%,
        rgba(180, 150, 210, 0.2) 20%,
        rgba(200, 170, 220, 0.12) 40%,
        rgba(190, 160, 215, 0.18) 60%,
        rgba(210, 175, 225, 0.15) 80%,
        rgba(185, 155, 210, 0.2) 100%
    );
    animation: foilShimmer 4s ease-in-out infinite;
}

.edition-overlay-foil::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 40%,
        rgba(255, 255, 255, 0.15) 45%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.15) 55%,
        transparent 60%
    );
    background-size: 200% 200%;
    animation: foilShine 3s ease-in-out infinite;
    pointer-events: none;
}

.edition-overlay-foil::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(200, 170, 220, 0.08) 3px,
        rgba(200, 170, 220, 0.08) 4px
    );
    pointer-events: none;
}

@keyframes foilShimmer {
    0%, 100% { 
        filter: brightness(1) saturate(1);
    }
    50% { 
        filter: brightness(1.05) saturate(1.1);
    }
}

@keyframes foilShine {
    0%, 100% { 
        background-position: 200% 200%;
    }
    50% { 
        background-position: -50% -50%;
    }
}

/* Holographic Edition - Rainbow prismatic with diagonal crosshatch pattern */
.edition-holographic {
    box-shadow: 0 0 15px rgba(100, 200, 255, 0.5), 0 0 30px rgba(255, 150, 200, 0.3);
}

.edition-overlay-holographic {
    background: 
        linear-gradient(45deg,
            rgba(255, 100, 150, 0.3) 0%,
            rgba(255, 200, 100, 0.25) 16%,
            rgba(150, 255, 100, 0.3) 33%,
            rgba(100, 255, 200, 0.25) 50%,
            rgba(100, 200, 255, 0.3) 66%,
            rgba(200, 100, 255, 0.25) 83%,
            rgba(255, 100, 200, 0.3) 100%
        );
    background-size: 300% 300%;
    animation: holoRainbow 4s linear infinite;
}

.edition-overlay-holographic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 8px,
            rgba(255, 255, 255, 0.12) 8px,
            rgba(255, 255, 255, 0.12) 10px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 8px,
            rgba(255, 255, 255, 0.12) 8px,
            rgba(255, 255, 255, 0.12) 10px
        );
    pointer-events: none;
}

.edition-overlay-holographic::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: holoSweep 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes holoRainbow {
    0% { 
        background-position: 0% 0%;
    }
    100% { 
        background-position: 300% 300%;
    }
}

@keyframes holoSweep {
    0%, 100% { 
        background-position: -100% 0%;
    }
    50% { 
        background-position: 200% 0%;
    }
}

/* Polychrome Edition - Dark background with oil-slick rainbow effect */
.edition-polychrome {
    box-shadow: 0 0 15px rgba(100, 255, 200, 0.4), 0 0 30px rgba(255, 100, 255, 0.3);
}

.edition-overlay-polychrome {
    background: rgba(20, 20, 30, 0.55);
}

.edition-overlay-polychrome::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        conic-gradient(
            from 0deg at 30% 30%,
            rgba(255, 50, 100, 0.4) 0deg,
            rgba(255, 150, 50, 0.35) 60deg,
            rgba(100, 255, 100, 0.4) 120deg,
            rgba(50, 200, 255, 0.35) 180deg,
            rgba(150, 50, 255, 0.4) 240deg,
            rgba(255, 50, 150, 0.35) 300deg,
            rgba(255, 50, 100, 0.4) 360deg
        ),
        conic-gradient(
            from 180deg at 70% 70%,
            rgba(100, 255, 200, 0.3) 0deg,
            rgba(255, 100, 255, 0.25) 90deg,
            rgba(255, 200, 100, 0.3) 180deg,
            rgba(100, 200, 255, 0.25) 270deg,
            rgba(100, 255, 200, 0.3) 360deg
        );
    background-blend-mode: screen;
    animation: polyOilSlick 5s linear infinite;
    pointer-events: none;
}

.edition-overlay-polychrome::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(
            ellipse at 50% 50%,
            transparent 0%,
            rgba(0, 0, 0, 0.2) 100%
        );
    pointer-events: none;
}

@keyframes polyOilSlick {
    0% { 
        filter: hue-rotate(0deg);
    }
    100% { 
        filter: hue-rotate(360deg);
    }
}

/* Seal Badges */
.seal-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.seal-badge-gold { background: var(--accent-gold); box-shadow: var(--glow-gold); }
.seal-badge-red { background: var(--accent-red); box-shadow: var(--glow-red); }
.seal-badge-blue { background: var(--accent-blue); box-shadow: var(--glow-blue); }
.seal-badge-purple { background: var(--accent-purple); box-shadow: var(--glow-purple); }

/* ===== JOKER BAR ===== */
.joker-bar {
    display: flex;
    gap: 5px;
    padding: 5px 8px;
    background: var(--bg-mid);
    border-bottom: 1px solid var(--border);
    min-height: 58px;
    align-items: center;
    overflow: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
}

/* Overlapping mode for joker-bar (>6 jokers) */
.joker-bar.overlapping .joker-card {
    margin-right: -50px;
    transition: all 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.2s;
}

.joker-bar.overlapping .joker-card:last-of-type {
    margin-right: 0;
}

.joker-bar.overlapping .joker-card.card-front {
    z-index: 100 !important;
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.4);
    margin-right: 0;
    margin-left: 0;
}

.joker-bar.overlapping .joker-card.card-front + .joker-card {
    margin-left: 0;
}

.joker-empty {
    color: var(--text-dim);
    font-size: 9px;
    width: 100%;
    text-align: center;
}

/* Joker bar glow when at max capacity - indicates limit reached */
.joker-bar.at-max {
    box-shadow: inset 0 0 20px rgba(254, 95, 85, 0.3), 0 0 10px rgba(254, 95, 85, 0.2);
    border-color: rgba(254, 95, 85, 0.5);
    animation: jokerBarMaxPulse 2s ease-in-out infinite;
}

@keyframes jokerBarMaxPulse {
    0%, 100% {
        box-shadow: inset 0 0 15px rgba(254, 95, 85, 0.2), 0 0 8px rgba(254, 95, 85, 0.15);
    }
    50% {
        box-shadow: inset 0 0 25px rgba(254, 95, 85, 0.35), 0 0 15px rgba(254, 95, 85, 0.25);
    }
}

.joker-card {
    min-width: var(--joker-width);
    padding: 6px 8px;
    background: linear-gradient(180deg, #3a3a5a 0%, #2a2a45 100%);
    border: 3px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    box-shadow: 
        0 3px 0 #1a1a30,
        0 4px 8px rgba(0,0,0,0.4);
    position: relative;
    overflow: visible;
}

.joker-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 5px 5px 0 0;
}

.joker-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 6px 0 #1a1a30,
        0 10px 20px rgba(0,0,0,0.5);
    border-color: var(--border-light);
    z-index: 100;
}

.joker-card.triggered {
    animation: jokerGlow 0.35s ease-in-out infinite;
    z-index: 100;
}

@keyframes jokerGlow {
    0%, 100% { 
        box-shadow: 
            0 0 0 2px var(--accent-gold),
            0 0 15px rgba(245, 200, 66, 0.5),
            0 3px 0 #1a1a30;
        transform: scale(1);
    }
    50% { 
        box-shadow: 
            0 0 0 3px var(--accent-gold),
            0 0 30px rgba(245, 200, 66, 0.8),
            0 0 60px rgba(245, 200, 66, 0.4),
            0 3px 0 #1a1a30;
        transform: scale(1.05);
        border-color: var(--accent-gold);
    }
}

.joker-name {
    font-size: 8px;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.joker-desc {
    font-size: 7px;
    color: var(--text-dim);
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
}

/* Joker Stickers */
.joker-sticker {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 7px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
}

.sticker-eternal {
    background: linear-gradient(135deg, #f1c40f 0%, #d4a800 100%);
    color: #1a1a1a;
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.6);
}

.sticker-perishable {
    background: linear-gradient(135deg, #7f8c8d 0%, #5d6d6e 100%);
    color: #fff;
    box-shadow: 0 0 8px rgba(127, 140, 141, 0.6);
}

.sticker-rental {
    background: linear-gradient(135deg, #e67e22 0%, #c0690e 100%);
    color: #fff;
    box-shadow: 0 0 8px rgba(230, 126, 34, 0.6);
}

.joker-perishable-rounds {
    font-size: 7px;
    color: var(--accent-orange);
    margin-top: 2px;
}

.joker-card.joker-debuffed {
    filter: grayscale(0.7) brightness(0.6);
    opacity: 0.7;
}

/* Crimson Heart - Disabled Joker */
.joker-card.joker-disabled,
.game-joker-card.joker-disabled {
    filter: grayscale(0.8) brightness(0.5);
    opacity: 0.6;
    position: relative;
}

.joker-card.joker-disabled::after,
.game-joker-card.joker-disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(192, 57, 43, 0.2),
        rgba(192, 57, 43, 0.2) 5px,
        transparent 5px,
        transparent 10px
    );
    border-radius: inherit;
    pointer-events: none;
}

.joker-disabled-badge,
.gj-disabled-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(192, 57, 43, 0.95);
    color: white;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Amber Acorn - Flipped Joker (Card Back) */
.joker-card.joker-flipped,
.game-joker-card.joker-flipped {
    cursor: pointer;
    background: linear-gradient(135deg, #8b2942 0%, #5c1a2a 100%);
    border-color: #d4a05a;
}

.joker-card.joker-flipped:hover,
.game-joker-card.joker-flipped:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 8px 24px rgba(139, 41, 66, 0.5);
}

.joker-card-back {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.joker-card-back-pattern {
    position: absolute;
    inset: 4px;
    border: 2px solid rgba(212, 160, 90, 0.4);
    border-radius: 4px;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.05) 3px,
        rgba(255, 255, 255, 0.05) 6px
    ),
    repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.05) 3px,
        rgba(255, 255, 255, 0.05) 6px
    );
}

.joker-card-back-symbol {
    font-size: 32px;
    font-weight: 800;
    color: #d4a05a;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    z-index: 1;
}

.joker-flip-hint {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8px;
    color: rgba(212, 160, 90, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Joker reveal animation */
.joker-revealing {
    animation: jokerFlipReveal 0.3s ease-out forwards;
}

@keyframes jokerFlipReveal {
    0% { transform: scaleX(1); }
    50% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

/* Cerulean Bell - Force Selected Card */
.card.force-selected {
    border-color: #3498db !important;
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.6), 
                inset 0 0 10px rgba(52, 152, 219, 0.2) !important;
    animation: forceSelectPulse 1.5s ease-in-out infinite;
}

@keyframes forceSelectPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(52, 152, 219, 0.5); }
    50% { box-shadow: 0 0 25px rgba(52, 152, 219, 0.8); }
}

/* Joker Images */
.joker-image {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    overflow: hidden;
    border-radius: 4px;
}

.joker-image img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.joker-card:hover .joker-image img {
    transform: scale(1.05);
    transition: transform 0.15s ease;
}

/* Floating Tooltip (appended to body) */
.floating-tooltip {
    position: fixed;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 180px;
    max-width: 240px;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.7), 0 0 15px rgba(138, 43, 226, 0.4);
    transform: translateY(8px) scale(0.85);
    transform-origin: top center;
}

.floating-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: tooltipSpring 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Spring pop-in animation for tooltips */
@keyframes tooltipSpring {
    0% { 
        opacity: 0;
        transform: translateY(10px) scale(0.7);
    }
    50% { 
        opacity: 1;
        transform: translateY(-3px) scale(1.03);
    }
    100% { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.floating-tooltip .tooltip-name {
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
    text-align: center;
    text-shadow: 0 0 8px rgba(255,255,255,0.3);
}

.floating-tooltip .tooltip-desc {
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 8px;
}

.floating-tooltip .tooltip-rarity {
    font-size: 0.75rem;
    text-align: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: #88c0d0;
}

/* Card-specific tooltip styling */
.floating-tooltip.card-tooltip {
    background: linear-gradient(135deg, #1a2e1a 0%, #162e16 100%);
    border-color: var(--accent-green);
    min-width: 180px;
}

.floating-tooltip.card-tooltip .tooltip-name {
    font-size: 1.1rem;
    color: #fff;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
}

.floating-tooltip .tooltip-effects {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.floating-tooltip .tooltip-effect {
    font-size: 0.85rem;
    color: #ddd;
    padding: 6px 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    line-height: 1.3;
    text-align: left;
}

.floating-tooltip .tooltip-effect:nth-child(1) {
    border-left: 3px solid var(--accent-green);
}
.floating-tooltip .tooltip-effect:nth-child(2) {
    border-left: 3px solid var(--accent-blue);
}
.floating-tooltip .tooltip-effect:nth-child(3) {
    border-left: 3px solid var(--accent-purple);
}

/* Shop joker image */
.shop-joker-image {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.shop-joker-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: transform 0.15s ease;
}

.shop-item:hover .shop-joker-image img {
    transform: scale(1.1);
}

/* Prevent text selection on long press */
.joker-card,
.shop-joker {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Mobile-friendly tooltip positioning */
@media (max-width: 768px) {
    .floating-tooltip {
        min-width: 160px;
        max-width: 200px;
        padding: 8px 10px;
    }
    
    .floating-tooltip .tooltip-name {
        font-size: 0.9rem;
    }
    
    .floating-tooltip .tooltip-desc {
        font-size: 0.8rem;
    }
    
    .floating-tooltip .tooltip-rarity {
        font-size: 0.7rem;
    }
}

/* Shop item stickers */
.shop-sticker {
    position: absolute;
    top: -6px;
    left: -6px;
    font-size: 6px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 10;
}

/* Shop Edition Badges */
.shop-edition-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 6px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 10;
}

.edition-badge-foil {
    background: linear-gradient(135deg, #c8a0dc, #dbb8e8);
    color: #fff;
    box-shadow: 0 0 6px rgba(200, 160, 220, 0.6);
}

.edition-badge-holo {
    background: linear-gradient(135deg, #88ddff, #ffaa88, #88ff88);
    background-size: 200% 100%;
    color: #fff;
    box-shadow: 0 0 6px rgba(136, 221, 255, 0.6);
    animation: holoBadgeShift 2s linear infinite;
}

@keyframes holoBadgeShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.edition-badge-poly {
    background: linear-gradient(135deg, #2a2a3a, #3a3a4a);
    color: #88ffcc;
    box-shadow: 0 0 6px rgba(100, 255, 200, 0.5), 0 0 3px rgba(255, 100, 255, 0.3);
    animation: polyBadgeShift 3s linear infinite;
}

@keyframes polyBadgeShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.edition-badge-negative {
    background: linear-gradient(135deg, #333, #666);
    color: #ddd;
    box-shadow: 0 0 6px rgba(100, 100, 100, 0.6);
}

/* Shop joker edition overlays - needs position relative on parent */
.shop-joker {
    position: relative;
    overflow: hidden;
}

.shop-joker .edition-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Shop joker edition visual effects */
.shop-joker.edition-foil {
    box-shadow: 0 0 12px rgba(200, 150, 220, 0.5);
    border-color: #c8a0dc;
}

.shop-joker.edition-holographic {
    box-shadow: 0 0 12px rgba(100, 200, 255, 0.5), 0 0 20px rgba(255, 150, 200, 0.3);
    border-color: #88ddff;
}

.shop-joker.edition-polychrome {
    box-shadow: 0 0 12px rgba(100, 255, 200, 0.4), 0 0 20px rgba(255, 100, 255, 0.3);
    border-color: #555;
    background-color: rgba(20, 20, 30, 0.3);
}

.shop-joker.edition-negative {
    box-shadow: 0 0 20px rgba(100, 100, 150, 0.8), 0 0 40px rgba(80, 80, 120, 0.4);
    border-color: #8888bb;
    background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 100%);
}

.shop-joker.edition-negative .shop-joker-image img {
    filter: invert(1) hue-rotate(180deg);
}

.joker-xmult {
    font-size: 8px;
    font-weight: 700;
    color: var(--accent-red);
    margin-top: 1px;
}

.joker-stat {
    font-size: 7px;
    font-weight: 700;
    margin-top: 1px;
}
.joker-stat.chips { color: var(--chips-color); }
.joker-stat.mult { color: var(--mult-color); }
.joker-stat.money { color: var(--money-color); }

.joker-sell {
    font-size: 8px;
    color: var(--money-color);
    margin-top: 2px;
}

.joker-sell-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    margin-top: 3px;
    background: rgba(255, 215, 64, 0.15);
    border: 1px solid var(--accent-gold);
    border-radius: 4px;
    color: var(--accent-gold);
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 100%;
}

.joker-sell-btn:hover {
    background: rgba(255, 215, 64, 0.3);
    box-shadow: var(--glow-gold);
}

.joker-card[draggable],
.game-joker-card[draggable] {
    cursor: grab;
}

.joker-card[draggable]:active,
.game-joker-card[draggable]:active {
    cursor: grabbing;
}

.joker-card.dragging,
.game-joker-card.dragging {
    opacity: 0.4;
    transform: scale(1.05);
    z-index: 1000 !important;
}

.joker-card.drag-over,
.game-joker-card.drag-over {
    border-color: var(--accent-cyan) !important;
    box-shadow: -3px 0 12px rgba(0, 229, 255, 0.5);
}

.joker-slot-empty {
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-dim);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 6px;
}

/* Joker Rarities */
.rarity-common { border-color: #5588aa; }
.rarity-uncommon { border-color: var(--accent-green); }
.rarity-rare { border-color: var(--accent-blue); box-shadow: 0 0 8px rgba(74,158,255,0.2); }
.rarity-legendary {
    border-color: var(--accent-purple);
    box-shadow: 0 0 12px rgba(179,136,255,0.3);
    background: linear-gradient(135deg, #1e1a2e 0%, #2a1e3a 100%);
}

/* Joker Editions */
.joker-card.edition-foil { 
    box-shadow: 0 0 12px rgba(200, 150, 220, 0.4); 
}
.joker-card.edition-holographic { 
    box-shadow: 0 0 12px rgba(100, 200, 255, 0.4), 0 0 20px rgba(255, 150, 200, 0.2); 
}
.joker-card.edition-polychrome {
    box-shadow: 0 0 12px rgba(100, 255, 200, 0.4), 0 0 20px rgba(255, 100, 255, 0.2);
    animation: polyGlow 4s linear infinite;
}
.joker-card.edition-negative {
    box-shadow: 0 0 20px rgba(50, 50, 80, 0.8), 0 0 40px rgba(80, 80, 120, 0.4);
    background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 100%);
    border-color: #8888bb;
}

.joker-card.edition-negative .joker-image img {
    filter: invert(1) hue-rotate(180deg);
}
.joker-card.edition-negative::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: radial-gradient(ellipse at center, rgba(100, 100, 150, 0.2) 0%, transparent 70%);
    pointer-events: none;
    animation: negativeGlow 2s ease-in-out infinite;
}
@keyframes negativeGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes polyGlow {
    0% { box-shadow: 0 0 12px rgba(255,0,0,0.3); }
    33% { box-shadow: 0 0 12px rgba(0,255,0,0.3); }
    66% { box-shadow: 0 0 12px rgba(0,0,255,0.3); }
    100% { box-shadow: 0 0 12px rgba(255,0,0,0.3); }
}

/* ===== JOKER EDITION OVERLAYS ===== */
.joker-edition-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

/* Foil overlay for jokers */
.joker-edition-overlay.edition-overlay-foil {
    background: linear-gradient(160deg, 
        rgba(220, 180, 230, 0.2) 0%,
        rgba(180, 150, 210, 0.25) 20%,
        rgba(200, 170, 220, 0.15) 40%,
        rgba(190, 160, 215, 0.22) 60%,
        rgba(210, 175, 225, 0.18) 80%,
        rgba(185, 155, 210, 0.25) 100%
    );
    animation: foilShimmer 4s ease-in-out infinite;
}

.joker-edition-overlay.edition-overlay-foil::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 40%,
        rgba(255, 255, 255, 0.2) 45%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.2) 55%,
        transparent 60%
    );
    background-size: 200% 200%;
    animation: foilShine 3s ease-in-out infinite;
}

/* Holographic overlay for jokers */
.joker-edition-overlay.edition-overlay-holographic {
    background: 
        linear-gradient(45deg,
            rgba(255, 100, 150, 0.35) 0%,
            rgba(255, 200, 100, 0.3) 16%,
            rgba(150, 255, 100, 0.35) 33%,
            rgba(100, 255, 200, 0.3) 50%,
            rgba(100, 200, 255, 0.35) 66%,
            rgba(200, 100, 255, 0.3) 83%,
            rgba(255, 100, 200, 0.35) 100%
        );
    background-size: 300% 300%;
    animation: holoRainbow 4s linear infinite;
}

.joker-edition-overlay.edition-overlay-holographic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: holoSweep 2s ease-in-out infinite;
}

/* Polychrome overlay for jokers */
.joker-edition-overlay.edition-overlay-polychrome {
    background: rgba(20, 20, 30, 0.3);
}

.joker-edition-overlay.edition-overlay-polychrome::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(45deg,
            rgba(255, 0, 0, 0.25) 0%,
            rgba(255, 165, 0, 0.2) 14%,
            rgba(255, 255, 0, 0.25) 28%,
            rgba(0, 255, 0, 0.2) 42%,
            rgba(0, 255, 255, 0.25) 57%,
            rgba(0, 0, 255, 0.2) 71%,
            rgba(128, 0, 255, 0.25) 85%,
            rgba(255, 0, 255, 0.2) 100%
        );
    background-size: 400% 400%;
    animation: polyChromeSweep 6s linear infinite;
}

@keyframes polyChromeSweep {
    0% { background-position: 0% 0%; }
    100% { background-position: 400% 400%; }
}

/* Negative overlay for jokers */
.joker-edition-overlay.edition-overlay-negative {
    background: radial-gradient(ellipse at center, rgba(80, 80, 120, 0.25) 0%, transparent 70%);
    animation: negativeGlow 2s ease-in-out infinite;
}

/* ===== JOKER EDITION BADGES ===== */
.joker-edition-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: bold;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.joker-edition-badge.edition-badge-foil {
    background: linear-gradient(135deg, #c8a0dc 0%, #e8d0f0 50%, #c8a0dc 100%);
    color: #4a3060;
    animation: foilBadgeShimmer 3s ease-in-out infinite;
}

.joker-edition-badge.edition-badge-holo {
    background: linear-gradient(135deg, #88ddff 0%, #ff88cc 50%, #88ffcc 100%);
    background-size: 200% 200%;
    color: #224;
    animation: holoBadgeRainbow 4s linear infinite;
}

.joker-edition-badge.edition-badge-poly {
    background: linear-gradient(135deg, #ff4444 0%, #ffff44 25%, #44ff44 50%, #4444ff 75%, #ff44ff 100%);
    background-size: 400% 400%;
    color: #fff;
    animation: polyBadgeSweep 3s linear infinite;
}

.joker-edition-badge.edition-badge-negative {
    background: linear-gradient(135deg, #2a2a40 0%, #4a4a70 100%);
    color: #aaccff;
    box-shadow: 0 0 8px rgba(100, 100, 180, 0.5);
}

@keyframes foilBadgeShimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

@keyframes holoBadgeRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes polyBadgeSweep {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* ===== TOOLTIP EDITION STYLES ===== */
.tooltip-edition {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.tooltip-edition.edition-foil {
    background: linear-gradient(135deg, rgba(200, 160, 220, 0.3) 0%, rgba(232, 208, 240, 0.3) 100%);
    border: 1px solid #c8a0dc;
    color: #e8d0f0;
}

.tooltip-edition.edition-holo {
    background: linear-gradient(135deg, rgba(136, 221, 255, 0.25) 0%, rgba(255, 136, 204, 0.25) 100%);
    border: 1px solid #88ddff;
    color: #aaeeff;
}

.tooltip-edition.edition-poly {
    background: linear-gradient(135deg, rgba(255, 100, 100, 0.2) 0%, rgba(100, 255, 100, 0.2) 50%, rgba(100, 100, 255, 0.2) 100%);
    border: 1px solid #88ffcc;
    color: #aaffcc;
}

.tooltip-edition.edition-negative {
    background: linear-gradient(135deg, rgba(42, 42, 64, 0.5) 0%, rgba(74, 74, 112, 0.5) 100%);
    border: 1px solid #8888bb;
    color: #aaccff;
}

.tooltip-edition-icon {
    font-size: 14px;
}

.tooltip-edition-name {
    font-weight: 600;
}

.tooltip-edition-effect {
    color: #88ff88;
    font-weight: bold;
}

.tooltip-edition.edition-foil .tooltip-edition-effect {
    color: #88ccff;
}

.tooltip-edition.edition-holo .tooltip-edition-effect {
    color: #ff8888;
}

.tooltip-edition.edition-poly .tooltip-edition-effect {
    color: #ffcc44;
}

/* Game joker card edition overlays */
.game-joker-card {
    position: relative;
}

.game-joker-card .joker-edition-overlay {
    border-radius: 6px;
}

.game-joker-card .joker-edition-badge {
    top: 1px;
    right: 1px;
    font-size: 7px;
    padding: 1px 4px;
}

/* ===== JOKER EDITION APPLICATION ANIMATIONS ===== */
@keyframes joker-edition-spiral {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        left: var(--center-x);
        top: var(--center-y);
        transform: translate(-50%, -50%) scale(0);
    }
}

@keyframes joker-edition-flash {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

@keyframes joker-edition-label {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(0.8);
    }
}

/* ===== WHEEL OF FORTUNE ANIMATIONS ===== */
@keyframes wheelSpinCustom {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(var(--target-rotation, 1080deg));
    }
}

@keyframes wheelGlow {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes wheelResultPop {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes wheelNopeShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-8px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(8px);
    }
}

.wheel-of-fortune-overlay {
    background: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.3s ease-out;
}

.wheel-fortune-container {
    animation: wheelContainerAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wheelContainerAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-180deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.wheel-fortune-pointer {
    animation: pointerBounce 0.4s ease-out 0.3s backwards;
}

@keyframes pointerBounce {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
    60% {
        transform: translateX(-50%) translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.wheel-result-success {
    animation: resultSuccessAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultSuccessAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(-20deg);
    }
    60% {
        transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

.wheel-result-fail {
    animation: resultFailAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultFailAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ===== SHOP SCREEN - BALATRO STYLE ===== */
.shop-screen, .scrollable, .dv-body, .blind-options {
    -webkit-overflow-scrolling: touch;
}

/* Main Balatro shop container */
.shop-screen-balatro {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: visible; /* Changed from hidden to allow consumable tooltips to show */
    background: #2d5a4a;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.03) 2px,
            rgba(0,0,0,0.03) 4px
        );
    padding: 8px;
    /* Add left padding for iPhone notch/Dynamic Island */
    padding-left: var(--notch-padding-left);
    gap: 8px;
}

/* LEFT COLUMN: Shop badge + sidebar stats */
.shop-left-col {
    width: 120px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.shop-badge {
    background: linear-gradient(180deg, #c44040 0%, #9a2020 100%);
    border: 3px solid #601515;
    border-radius: 8px;
    padding: 6px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 
        inset 0 2px 0 rgba(255,255,255,0.2),
        0 4px 8px rgba(0,0,0,0.4);
}

.shop-badge-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    text-shadow: 2px 2px 0 #601515;
    letter-spacing: 3px;
}

.shop-badge-subtitle {
    font-size: 9px;
    color: #ffdddd;
    margin-top: 3px;
}

/* CENTER COLUMN */
.shop-center-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.shop-joker-display {
    background: linear-gradient(180deg, #3a3a50 0%, #2a2a40 100%);
    border: 3px solid #4a4a60;
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    height: 85px;
    flex-shrink: 0;
}

.shop-joker-display::-webkit-scrollbar {
    height: 4px;
}

.shop-joker-display::-webkit-scrollbar-thumb {
    background: #5a5a70;
    border-radius: 2px;
}

/* Shop top row - uses game-top-row styling for jokers + consumables inline */
.shop-top-row {
    background: linear-gradient(180deg, #3a3a50 0%, #2a2a40 100%);
    border: 3px solid #4a4a60;
    border-radius: 8px;
    padding: 6px 10px;
    height: 95px;
    overflow: visible;
    position: relative;
    z-index: 50;
}

.shop-top-row::-webkit-scrollbar {
    height: 4px;
}

.shop-top-row::-webkit-scrollbar-thumb {
    background: #5a5a70;
    border-radius: 2px;
}

/* RIGHT COLUMN: Vouchers + Tags display (consumables moved to top row) */
.shop-right-col {
    width: 70px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

/* Shop consumable cards - tall tarot style */
.shop-consumable-card {
    width: 56px;
    height: 90px;
    background: linear-gradient(180deg, #5a3a7a 0%, #3a2050 100%);
    border: 2px solid #9060b0;
    border-radius: 5px;
    padding: 6px 4px 18px 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Inner decorative frame */
.shop-consumable-card::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    pointer-events: none;
}

/* Corner decorations */
.shop-consumable-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 6px 6px, rgba(255, 220, 150, 0.3) 0%, transparent 5px),
        radial-gradient(circle at calc(100% - 6px) 6px, rgba(255, 220, 150, 0.3) 0%, transparent 5px),
        radial-gradient(circle at 6px calc(100% - 6px), rgba(255, 220, 150, 0.3) 0%, transparent 5px),
        radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(255, 220, 150, 0.3) 0%, transparent 5px);
    pointer-events: none;
}

.shop-consumable-card:hover {
    border-color: var(--accent-green);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 6px 16px rgba(100, 50, 150, 0.5), 0 0 12px rgba(144, 96, 176, 0.4);
    z-index: 10;
}

.shop-consumable-card .consumable-name {
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    line-height: 1.1;
    word-wrap: break-word;
    max-width: 100%;
}

.shop-consumable-card .consumable-sell {
    font-size: 7px;
    color: var(--accent-green);
    margin-top: 4px;
    position: relative;
    z-index: 1;
    font-weight: 600;
}

/* Planet cards in shop - cosmic blue theme */
.shop-consumable-card.consumable-planet {
    background: linear-gradient(180deg, #1e4a6f 0%, #0a2545 100%);
    border-color: #4080c0;
}

.shop-consumable-card.consumable-planet::before {
    border-color: rgba(100, 180, 255, 0.25);
}

.shop-consumable-card.consumable-planet::after {
    background: 
        radial-gradient(circle at 6px 6px, rgba(100, 180, 255, 0.4) 0%, transparent 5px),
        radial-gradient(circle at calc(100% - 6px) 6px, rgba(100, 180, 255, 0.4) 0%, transparent 5px),
        radial-gradient(circle at 6px calc(100% - 6px), rgba(100, 180, 255, 0.4) 0%, transparent 5px),
        radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(100, 180, 255, 0.4) 0%, transparent 5px);
}

.shop-consumable-card.consumable-planet:hover {
    box-shadow: 0 6px 16px rgba(30, 80, 150, 0.5), 0 0 12px rgba(64, 128, 192, 0.4);
}

/* Spectral cards in shop - ethereal cyan theme */
.shop-consumable-card.consumable-spectral {
    background: linear-gradient(180deg, #1a5060 0%, #082838 100%);
    border-color: #40a0b0;
}

.shop-consumable-card.consumable-spectral::before {
    border-color: rgba(100, 200, 220, 0.25);
}

.shop-consumable-card.consumable-spectral::after {
    background: 
        radial-gradient(circle at 6px 6px, rgba(100, 220, 230, 0.4) 0%, transparent 5px),
        radial-gradient(circle at calc(100% - 6px) 6px, rgba(100, 220, 230, 0.4) 0%, transparent 5px),
        radial-gradient(circle at 6px calc(100% - 6px), rgba(100, 220, 230, 0.4) 0%, transparent 5px),
        radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), rgba(100, 220, 230, 0.4) 0%, transparent 5px);
}

.shop-consumable-card.consumable-spectral:hover {
    box-shadow: 0 6px 16px rgba(30, 100, 120, 0.5), 0 0 12px rgba(64, 160, 176, 0.4);
}

/* Shop consumable description (shows on hover/selected) */
.shop-consumable-card .consumable-desc {
    font-size: 6px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    text-align: center;
    padding: 0 2px;
    display: none;
}

.shop-consumable-card.selected .consumable-desc,
.shop-consumable-card:hover .consumable-desc {
    display: block;
}

/* Shop consumable sell button */
.shop-consumable-card .consumable-sell-btn {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #c75050 0%, #8a3030 100%);
    border: 1px solid #e06060;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.shop-consumable-card.selected .consumable-sell-btn,
.shop-consumable-card:hover .consumable-sell-btn {
    opacity: 1;
}

.shop-consumable-card .consumable-sell-btn:hover {
    background: linear-gradient(180deg, #e06060 0%, #a04040 100%);
    transform: translateX(-50%) scale(1.1);
}

/* Shop consumable selected state */
.shop-consumable-card.selected {
    transform: translateY(-8px) scale(1.08);
    border-color: var(--accent-cyan);
    box-shadow: 
        0 0 0 2px var(--accent-cyan),
        0 0 20px rgba(0, 212, 255, 0.5),
        0 8px 16px rgba(0, 0, 0, 0.4);
    z-index: 20;
}

.shop-consumable-card.selected:hover {
    transform: translateY(-10px) scale(1.1);
}

/* Owned Tags Display (bottom right) */
.owned-tags-section {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.owned-tags-label {
    font-size: 9px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
}

.owned-tag-card {
    background: linear-gradient(180deg, var(--tag-color, #ff6b6b) 0%, color-mix(in srgb, var(--tag-color, #ff6b6b) 70%, #000) 100%);
    border: 2px solid color-mix(in srgb, var(--tag-color, #ff6b6b) 80%, #fff);
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    cursor: default;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.owned-tag-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px var(--tag-color, #ff6b6b);
}

.owned-tag-card .tag-icon {
    font-size: 16px;
    margin-bottom: 2px;
}

.owned-tag-card .tag-name {
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Tags display on blind select screen */
.blind-select-tags {
    margin-top: 15px;
    text-align: center;
}

.blind-select-tags .owned-tags-label {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.owned-tags-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.owned-tag-card-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, var(--tag-color, #ff6b6b) 0%, color-mix(in srgb, var(--tag-color, #ff6b6b) 70%, #000) 100%);
    border: 2px solid color-mix(in srgb, var(--tag-color, #ff6b6b) 80%, #fff);
    border-radius: 20px;
    padding: 6px 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: default;
}

.owned-tag-card-inline:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px var(--tag-color, #ff6b6b);
}

.owned-tag-card-inline .tag-icon {
    font-size: 14px;
}

.owned-tag-card-inline .tag-name {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.shop-joker-bar-item {
    width: 55px;
    height: 70px;
    background: linear-gradient(180deg, #4a4a65 0%, #35354a 100%);
    border: 2px solid #5a5a75;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.15s;
}

.shop-joker-bar-item:hover {
    transform: translateY(-4px);
    border-color: var(--accent-cyan);
}

.shop-joker-bar-item .sjb-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-joker-bar-item .sjb-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.shop-joker-bar-item .sjb-name {
    font-size: 7px;
    text-align: center;
    color: var(--text);
    padding: 2px;
}

.shop-joker-bar-item .sjb-sell {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-green);
    color: #000;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.shop-joker-empty {
    color: var(--text-dim);
    font-size: 12px;
    padding: 10px;
}

/* Shop joker bar edition styles */
.shop-joker-bar-item.edition-foil {
    box-shadow: 0 0 10px rgba(200, 150, 220, 0.5);
    border-color: #c8a0dc;
}

.shop-joker-bar-item.edition-holographic {
    box-shadow: 0 0 10px rgba(100, 200, 255, 0.5), 0 0 15px rgba(255, 150, 200, 0.3);
    border-color: #88ddff;
}

.shop-joker-bar-item.edition-polychrome {
    box-shadow: 0 0 10px rgba(100, 255, 200, 0.4), 0 0 15px rgba(255, 100, 255, 0.3);
    animation: polyGlow 4s linear infinite;
}

.shop-joker-bar-item.edition-negative {
    box-shadow: 0 0 15px rgba(50, 50, 80, 0.8), 0 0 30px rgba(80, 80, 120, 0.4);
    background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 100%);
    border-color: #8888bb;
}

.shop-joker-bar-item.edition-negative .sjb-image img {
    filter: invert(1) hue-rotate(180deg);
}

/* MIDDLE ROW: Actions + Items */
.shop-middle-row {
    flex: 1;
    display: flex;
    gap: 8px;
    min-height: 0;
}

/* BOTTOM ROW: Vouchers + Packs + Restock */
.shop-bottom-row {
    display: flex;
    gap: 8px;
    height: 100px;
    flex-shrink: 0;
}

.shop-score-panel {
    background: linear-gradient(180deg, #2a2a40 0%, #1e1e30 100%);
    border: 3px solid #3a3a55;
    border-radius: 6px;
    padding: 5px;
    text-align: center;
}

.score-label {
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.2;
}

.score-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-bright);
    margin-top: 4px;
}

.shop-mult-display {
    background: linear-gradient(180deg, #354535 0%, #253525 100%);
    border: 3px solid #456545;
    border-radius: 6px;
    padding: 6px 4px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.mult-chips { color: var(--chips-color); }
.mult-x { color: var(--text); margin: 0 2px; }
.mult-mult { color: var(--mult-color); }

.shop-sidebar-stats {
    background: linear-gradient(180deg, #2a2a40 0%, #1e1e30 100%);
    border: 3px solid #3a3a55;
    border-radius: 6px;
    padding: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    font-size: 10px;
}

.stat-label { color: var(--text-dim); }
.stat-value { 
    font-weight: 700; 
    text-align: right;
}
.hands-val { color: var(--accent-blue); }
.discards-val { color: var(--accent-red); }

.shop-btn-info, .shop-btn-options {
    background: linear-gradient(180deg, #3a3a55 0%, #2a2a40 100%);
    border: 3px solid #4a4a65;
    border-radius: 6px;
    color: var(--text);
    font-size: 11px;
    padding: 5px 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    font-weight: 700;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.3;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}

.shop-btn-info:hover, .shop-btn-options:hover {
    background: linear-gradient(180deg, #4a4a65 0%, #3a3a55 100%);
    border-color: var(--accent-cyan);
}

.shop-money-display {
    background: linear-gradient(180deg, #4a4535 0%, #3a3525 100%);
    border: 3px solid #5a5545;
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--money-color);
    text-shadow: var(--glow-gold);
}

.shop-ante-round {
    background: linear-gradient(180deg, #2a2a40 0%, #1e1e30 100%);
    border: 3px solid #3a3a55;
    border-radius: 6px;
    padding: 6px;
}

.ar-item {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    padding: 2px 0;
}

.ar-label { color: var(--text-dim); }
.ar-value { color: var(--text-bright); font-weight: 700; }

/* Actions Column */
.shop-actions-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 80px;
    flex-shrink: 0;
}

.btn-next-round-balatro {
    flex: 1;
    background: linear-gradient(180deg, #c44040 0%, #9a2020 100%);
    border: 3px solid #701010;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-shadow: 1px 1px 0 #500;
}

.btn-next-round-balatro:hover {
    background: linear-gradient(180deg, #d45050 0%, #aa3030 100%);
    transform: translateY(-2px);
}

.btn-reroll-balatro {
    flex: 1;
    background: linear-gradient(180deg, #40a040 0%, #308030 100%);
    border: 3px solid #206020;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-shadow: 1px 1px 0 #050;
}

.btn-reroll-balatro:hover {
    background: linear-gradient(180deg, #50b050 0%, #409040 100%);
    transform: translateY(-2px);
}

/* Items Area */
.shop-items-area {
    flex: 1;
    display: flex;
    min-width: 0;
}

.shop-items-grid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    padding: 8px;
    background: linear-gradient(180deg, #2a4a4a 0%, #1a3a3a 100%);
    border: 3px solid #3a5a5a;
    border-radius: 8px;
    overflow: hidden;
}

/* Voucher Area */
.shop-voucher-area {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Packs Area */
.shop-packs-area {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

/* Restock Message */
.shop-restock-msg {
    background: linear-gradient(180deg, #2a2a40 0%, #1a1a30 100%);
    border: 3px solid #3a3a55;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    font-size: 11px;
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90px;
    flex-shrink: 0;
}

.shop-restock-msg strong {
    color: var(--accent-red);
}

/* Shop Items (cards) */
.shop-item {
    width: 75px;
    padding: 4px;
    background: linear-gradient(180deg, #4a4a65 0%, #35354a 100%);
    border: 2px solid #5a5a75;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.shop-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 5px 5px 0 0;
}

.shop-item:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: var(--accent-cyan);
    box-shadow: var(--glow-cyan);
    animation: shopItemWobble 0.6s ease-in-out;
}

/* Subtle wobble animation for shop items - suggests interactivity */
@keyframes shopItemWobble {
    0% { transform: translateY(-4px) scale(1.03) rotate(0deg); }
    20% { transform: translateY(-5px) scale(1.03) rotate(-1.5deg); }
    40% { transform: translateY(-4px) scale(1.03) rotate(1.5deg); }
    60% { transform: translateY(-5px) scale(1.03) rotate(-0.8deg); }
    80% { transform: translateY(-4px) scale(1.03) rotate(0.5deg); }
    100% { transform: translateY(-4px) scale(1.03) rotate(0deg); }
}

/* Selected state for shop items - click to preview before buying */
.shop-item.selected {
    transform: translateY(-8px) scale(1.05);
    border-color: var(--accent-cyan);
    box-shadow: 
        0 0 0 2px var(--accent-cyan),
        0 0 20px rgba(0, 212, 255, 0.5),
        0 0 40px rgba(0, 212, 255, 0.3),
        0 10px 20px rgba(0,0,0,0.5);
    z-index: 100;
    animation: shopItemSelected 0.6s ease infinite;
}

@keyframes shopItemSelected {
    0%, 100% { 
        box-shadow: 
            0 0 0 2px var(--accent-cyan),
            0 0 15px rgba(0, 212, 255, 0.4),
            0 0 30px rgba(0, 212, 255, 0.2),
            0 10px 20px rgba(0,0,0,0.5);
    }
    50% { 
        box-shadow: 
            0 0 0 3px var(--accent-cyan),
            0 0 25px rgba(0, 212, 255, 0.6),
            0 0 50px rgba(0, 212, 255, 0.3),
            0 10px 20px rgba(0,0,0,0.5);
    }
}

.shop-item.selected:hover {
    transform: translateY(-10px) scale(1.06);
}

/* Price tag on top of shop items */
.shop-item .shop-item-cost {
    position: absolute;
    top: -8px;
    right: -4px;
    background: linear-gradient(180deg, #f5c842 0%, #d4a030 100%);
    color: #000;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    border: 2px solid #b08020;
    z-index: 2;
}

.shop-item-cost.discounted {
    background: linear-gradient(180deg, #5dde5d 0%, #40b040 100%);
    border-color: #308030;
}

.shop-item-name {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-bright);
    margin-top: 10px;
    text-align: center;
}

.shop-item-rarity {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
    text-align: center;
}

.rarity-common .shop-item-rarity { color: #5588aa; }
.rarity-uncommon .shop-item-rarity { color: var(--accent-green); }
.rarity-rare .shop-item-rarity { color: var(--accent-blue); }
.rarity-legendary .shop-item-rarity { color: var(--accent-purple); }

.shop-item-desc {
    font-size: 7px;
    color: var(--text-dim);
    line-height: 1.2;
    text-align: center;
    margin-top: 4px;
}

/* Shop Playing Cards (Magic Trick voucher) */
.shop-playing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 90px;
}

.shop-playing-card .shop-card-rank {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.shop-playing-card .shop-card-suit {
    font-size: 28px;
    line-height: 1;
    margin-top: 2px;
}

.shop-playing-card.suit-hearts,
.shop-playing-card.suit-diamonds {
    color: #e74c3c;
}

.shop-playing-card.suit-clubs,
.shop-playing-card.suit-spades {
    color: #2c3e50;
}

/* Enhancement styles for shop playing cards */
.shop-playing-card.enhancement-bonus { border-color: #3498db; background: linear-gradient(180deg, #3498db33 0%, #35354a 40%); }
.shop-playing-card.enhancement-mult { border-color: #e74c3c; background: linear-gradient(180deg, #e74c3c33 0%, #35354a 40%); }
.shop-playing-card.enhancement-wild { border-color: #9b59b6; background: linear-gradient(180deg, #9b59b655 0%, #35354a 40%); }
.shop-playing-card.enhancement-glass { border-color: #1abc9c; background: linear-gradient(180deg, #1abc9c33 0%, #35354a 40%); }
.shop-playing-card.enhancement-steel { border-color: #95a5a6; background: linear-gradient(180deg, #95a5a655 0%, #35354a 40%); }
.shop-playing-card.enhancement-stone { border-color: #7f8c8d; background: linear-gradient(180deg, #7f8c8d33 0%, #35354a 40%); }
.shop-playing-card.enhancement-gold { border-color: #f1c40f; background: linear-gradient(180deg, #f1c40f55 0%, #35354a 40%); }
.shop-playing-card.enhancement-lucky { border-color: #2ecc71; background: linear-gradient(180deg, #2ecc7133 0%, #35354a 40%); }

/* Edition styles for shop playing cards */
.shop-playing-card.edition-foil { box-shadow: 0 0 8px #aaddff; }
.shop-playing-card.edition-holographic { box-shadow: 0 0 8px #ffaaff; }
.shop-playing-card.edition-polychrome { box-shadow: 0 0 10px #ff77ff, 0 0 5px #77ffff; }

/* Seal indicator */
.shop-playing-card.seal-gold::after,
.shop-playing-card.seal-red::after,
.shop-playing-card.seal-blue::after,
.shop-playing-card.seal-purple::after {
    content: '★';
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 10px;
}
.shop-playing-card.seal-gold::after { color: gold; }
.shop-playing-card.seal-red::after { color: red; }
.shop-playing-card.seal-blue::after { color: blue; }
.shop-playing-card.seal-purple::after { color: purple; }

.shop-joker-image {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
}

.shop-joker-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.planet-name { color: var(--accent-cyan); }
.tarot-name { color: var(--accent-purple); }

.shop-planet {
    border-color: rgba(74, 158, 255, 0.4);
    background: linear-gradient(180deg, #3a4a65 0%, #2a3a50 100%);
}

.shop-tarot {
    border-color: rgba(179, 136, 255, 0.4);
    background: linear-gradient(180deg, #4a3a65 0%, #3a2a50 100%);
}

/* Voucher Card */
.shop-voucher-card {
    width: 120px;
    background: linear-gradient(180deg, #3a3a55 0%, #2a2a40 100%);
    border: 3px solid #4a4a65;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.shop-voucher-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-orange);
    box-shadow: 0 0 12px rgba(255, 145, 0, 0.4);
}

/* Selected state for voucher cards */
.shop-voucher-card.selected {
    transform: translateY(-8px) scale(1.05);
    border-color: var(--accent-cyan);
    box-shadow: 
        0 0 0 2px var(--accent-cyan),
        0 0 20px rgba(0, 212, 255, 0.5),
        0 0 40px rgba(0, 212, 255, 0.3),
        0 10px 20px rgba(0,0,0,0.5);
    z-index: 100;
    animation: shopItemSelected 0.6s ease infinite;
}

.shop-voucher-card.selected:hover {
    transform: translateY(-10px) scale(1.06);
}

.shop-voucher-card .voucher-price {
    position: absolute;
    top: -8px;
    right: -4px;
    background: linear-gradient(180deg, #f5c842 0%, #d4a030 100%);
    color: #000;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    border: 2px solid #b08020;
    z-index: 2;
}

.voucher-content {
    text-align: center;
}

.voucher-content .voucher-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.voucher-content .voucher-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-orange);
    margin-bottom: 4px;
}

.voucher-content .voucher-desc {
    font-size: 8px;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.voucher-content .voucher-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-green);
    background: rgba(93, 222, 93, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Pack Card */
.shop-pack-card {
    width: 95px;
    background: linear-gradient(180deg, #456080 0%, #304560 100%);
    border: 3px solid #5070a0;
    border-radius: 8px;
    padding: 8px 8px 10px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop-pack-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-cyan);
    box-shadow: var(--glow-cyan);
}

/* Selected state for pack cards */
.shop-pack-card.selected {
    transform: translateY(-8px) scale(1.05);
    border-color: var(--accent-cyan);
    box-shadow: 
        0 0 0 2px var(--accent-cyan),
        0 0 20px rgba(0, 212, 255, 0.5),
        0 0 40px rgba(0, 212, 255, 0.3),
        0 10px 20px rgba(0,0,0,0.5);
    z-index: 100;
    animation: shopItemSelected 0.6s ease infinite;
}

.shop-pack-card.selected:hover {
    transform: translateY(-10px) scale(1.06);
}

.shop-pack-card .pack-price {
    position: absolute;
    top: -8px;
    right: -4px;
    background: linear-gradient(180deg, #f5c842 0%, #d4a030 100%);
    color: #000;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    border: 2px solid #b08020;
    z-index: 2;
}

.pack-image-container {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto;
    overflow: hidden;
    border-radius: 6px;
}

.pack-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.shop-pack-card .pack-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-bright);
    margin-top: 6px;
}

.shop-pack-card .pack-desc {
    font-size: 7px;
    color: var(--text-dim);
    line-height: 1.2;
    margin-top: 3px;
    opacity: 0.8;
}

/* Pack type colors */
.shop-pack-card.pack-standard {
    background: linear-gradient(180deg, #406050 0%, #304040 100%);
    border-color: rgba(0, 230, 118, 0.5);
}

.shop-pack-card.pack-arcana {
    background: linear-gradient(180deg, #605080 0%, #403060 100%);
    border-color: rgba(179, 136, 255, 0.5);
}

.shop-pack-card.pack-celestial {
    background: linear-gradient(180deg, #405080 0%, #303060 100%);
    border-color: rgba(74, 158, 255, 0.5);
}

.shop-pack-card.pack-buffoon {
    background: linear-gradient(180deg, #804050 0%, #603040 100%);
    border-color: rgba(255, 68, 102, 0.5);
}

.shop-pack-card.pack-spectral {
    background: linear-gradient(180deg, #406070 0%, #304050 100%);
    border-color: rgba(0, 229, 255, 0.5);
}

/* Consumables bar at bottom - Tarot card style */
.shop-consumables-bar {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: linear-gradient(180deg, #3a3a55 0%, #2a2a40 100%);
    border: 2px solid #4a4a65;
    border-radius: 6px;
    overflow-x: auto;
    flex-shrink: 0;
    min-height: 70px;
    align-items: center;
}

/* Tarot-style consumable items in shop bar */
.shop-consumable-item {
    width: 44px;
    height: 64px;
    padding: 4px;
    background: linear-gradient(180deg, #5a3a7a 0%, #3a2050 100%);
    border: 2px solid #9060b0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Inner decorative frame */
.shop-consumable-item::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    pointer-events: none;
}

/* Corner decorations */
.shop-consumable-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 4px 4px, rgba(255, 220, 150, 0.3) 0%, transparent 3px),
        radial-gradient(circle at calc(100% - 4px) 4px, rgba(255, 220, 150, 0.3) 0%, transparent 3px),
        radial-gradient(circle at 4px calc(100% - 4px), rgba(255, 220, 150, 0.3) 0%, transparent 3px),
        radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), rgba(255, 220, 150, 0.3) 0%, transparent 3px);
    pointer-events: none;
}

.shop-consumable-item:hover {
    border-color: var(--accent-green);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 6px 16px rgba(100, 50, 150, 0.5), 0 0 10px rgba(144, 96, 176, 0.4);
    z-index: 10;
}

.shop-consumable-item .consumable-name {
    font-size: 6px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    line-height: 1.1;
}

.shop-consumable-item .consumable-sell {
    font-size: 6px;
    color: var(--accent-green);
    margin-top: 2px;
    position: relative;
    z-index: 1;
}

/* Planet cards in shop bar - cosmic blue */
.shop-consumable-item.consumable-planet {
    background: linear-gradient(180deg, #1e4a6f 0%, #0a2545 100%);
    border-color: #4080c0;
}

.shop-consumable-item.consumable-planet::before {
    border-color: rgba(100, 180, 255, 0.25);
}

.shop-consumable-item.consumable-planet::after {
    background: 
        radial-gradient(circle at 4px 4px, rgba(100, 180, 255, 0.4) 0%, transparent 3px),
        radial-gradient(circle at calc(100% - 4px) 4px, rgba(100, 180, 255, 0.4) 0%, transparent 3px),
        radial-gradient(circle at 4px calc(100% - 4px), rgba(100, 180, 255, 0.4) 0%, transparent 3px),
        radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), rgba(100, 180, 255, 0.4) 0%, transparent 3px);
}

/* Spectral cards in shop bar - ethereal cyan */
.shop-consumable-item.consumable-spectral {
    background: linear-gradient(180deg, #1a5060 0%, #082838 100%);
    border-color: #40a0b0;
}

.shop-consumable-item.consumable-spectral::before {
    border-color: rgba(100, 200, 220, 0.25);
}

.shop-consumable-item.consumable-spectral::after {
    background: 
        radial-gradient(circle at 4px 4px, rgba(100, 220, 230, 0.4) 0%, transparent 3px),
        radial-gradient(circle at calc(100% - 4px) 4px, rgba(100, 220, 230, 0.4) 0%, transparent 3px),
        radial-gradient(circle at 4px calc(100% - 4px), rgba(100, 220, 230, 0.4) 0%, transparent 3px),
        radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), rgba(100, 220, 230, 0.4) 0%, transparent 3px);
}

/* Legacy support for old elements that might still be used */
.shop-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 20px;
}

.hand-levels-panel {
    display: none; /* Hide in new layout */
}

.shop-footer {
    display: none; /* Hide in new layout */
}

.shop-earnings {
    display: none; /* Hide in new layout */
}

/* ===== TAG SELECT ===== */
.tag-select-screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 50%, #1a1230 0%, var(--bg-dark) 60%);
    /* Add left padding for iPhone notch/Dynamic Island */
    padding-left: var(--notch-padding-left);
}

.tag-subtitle {
    text-align: center;
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 16px;
}

.tag-options {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    padding: 0 30px;
    flex: 1;
    align-items: center;
}

.tag-card {
    width: 200px;
    padding: 16px;
    background: var(--bg-panel);
    border: 2px solid var(--tag-color, var(--border));
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition-med);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.tag-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 20px color-mix(in srgb, var(--tag-color, var(--accent-cyan)) 40%, transparent);
    border-color: var(--tag-color, var(--accent-cyan));
}

.tag-icon {
    font-size: 24px;
}

.tag-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--tag-color, var(--text-bright));
}

.tag-desc {
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.3;
}

/* ===== END SCREENS ===== */
.end-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 20px;
    overflow: hidden;
}

.end-title {
    font-size: 32px;
    color: var(--accent-red);
    text-shadow: 0 0 20px rgba(255, 68, 102, 0.5);
}

.win-title {
    color: var(--accent-gold);
    text-shadow: 0 0 30px rgba(255, 215, 64, 0.5);
    animation: winPulse 1.5s ease-in-out infinite;
}

@keyframes winPulse {
    0%, 100% { text-shadow: 0 0 30px rgba(255, 215, 64, 0.5); }
    50% { text-shadow: 0 0 60px rgba(255, 215, 64, 0.8); }
}

.end-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 14px;
}

/* ===== VICTORY SCREEN (Balatro Style) ===== */
.victory-screen {
    background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 50%, #0a1628 100%);
    padding: 20px;
}

.victory-panel {
    background: linear-gradient(180deg, #1a2a4a 0%, #152238 100%);
    border: 3px solid #3d5a80;
    border-radius: 12px;
    padding: 20px 30px;
    min-width: 380px;
    max-width: 420px;
    box-shadow: 0 0 40px rgba(77, 195, 255, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.victory-title {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    margin-bottom: 16px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 4px;
    animation: victoryGlow 2s ease-in-out infinite;
}

@keyframes victoryGlow {
    0%, 100% { 
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    50% { 
        text-shadow: 0 0 40px rgba(255, 255, 255, 0.8), 0 0 60px rgba(77, 195, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5);
    }
}

.victory-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.victory-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(61, 90, 128, 0.5);
}

.victory-label {
    color: #8ba3c4;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.victory-value {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.victory-score {
    color: #ff6b6b;
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.victory-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    margin-top: 8px;
}

.victory-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.victory-value-box {
    background: linear-gradient(180deg, #2a3f5f 0%, #1e2d45 100%);
    border: 2px solid #4a6a8a;
    border-radius: 4px;
    padding: 3px 10px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
}

.victory-buttons-cell {
    justify-content: flex-end;
}

.btn-victory {
    background: linear-gradient(180deg, #ff8844 0%, #e65c00 100%);
    border: 2px solid #ffaa66;
    border-radius: 6px;
    padding: 6px 14px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(230, 92, 0, 0.3);
}

.btn-victory:hover {
    background: linear-gradient(180deg, #ffaa66 0%, #ff8844 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 92, 0, 0.4);
}

.btn-victory:active {
    transform: translateY(0);
}

.victory-seed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(61, 90, 128, 0.5);
}

.victory-seed-value {
    background: linear-gradient(180deg, #2a3f5f 0%, #1e2d45 100%);
    border: 2px solid #4a6a8a;
    border-radius: 4px;
    padding: 4px 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 1px;
    flex: 1;
    text-align: center;
}

.btn-seed-copy {
    background: linear-gradient(180deg, #4a6a8a 0%, #3d5a70 100%);
    border: 2px solid #6a8aaa;
    border-radius: 4px;
    padding: 4px 12px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s ease;
}

.btn-seed-copy:hover {
    background: linear-gradient(180deg, #6a8aaa 0%, #4a6a8a 100%);
}

.btn-endless {
    width: 100%;
    margin-top: 14px;
    background: linear-gradient(180deg, #4dc3ff 0%, #0099cc 100%);
    border: 3px solid #66d4ff;
    border-radius: 8px;
    padding: 12px 20px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 20px rgba(0, 153, 204, 0.4);
}

.btn-endless:hover {
    background: linear-gradient(180deg, #66d4ff 0%, #4dc3ff 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 153, 204, 0.5);
}

.btn-endless:active {
    transform: translateY(0);
}

/* ===== CASH OUT SCREEN (Balatro Style) ===== */
.cashout-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 20px;
    padding: 20px;
    overflow: auto;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
}

.cashout-header {
    animation: cashoutSlideIn 0.4s ease-out;
}

.cashout-title-banner {
    background: linear-gradient(180deg, #3ecf8e 0%, #28a86d 100%);
    padding: 10px 50px;
    border-radius: 8px;
    box-shadow: 
        0 4px 0 #1e7a4d,
        0 6px 20px rgba(62, 207, 142, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    border: 2px solid #1e7a4d;
}

.cashout-title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
    letter-spacing: 1px;
}

@keyframes cashoutSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.cashout-main-panel {
    background: linear-gradient(180deg, #2a2a3d 0%, #1c1c2b 100%);
    border-radius: 10px;
    padding: 18px 24px;
    min-width: 380px;
    max-width: 420px;
    border: 3px solid #3d3d5c;
    box-shadow: 
        0 4px 0 #1a1a28,
        0 8px 30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: cashoutSlideIn 0.4s ease-out 0.1s both;
}

.cashout-score-section {
    margin-bottom: 12px;
}

.cashout-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cashout-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cashout-score-label {
    font-size: 14px;
    color: #9e9eb8;
    font-weight: 500;
}

.cashout-reward-dollars {
    font-size: 14px;
    font-weight: 700;
    color: #f5a623;
    letter-spacing: 1px;
}

.cashout-score-required {
    font-size: 14px;
    font-weight: 700;
    color: #f5a623;
    letter-spacing: 1px;
}

.cashout-score-achieved {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 16px;
    border-radius: 6px;
    border: 2px solid #4ade80;
}

.score-check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.score-check-icon svg {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.score-chip {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border-radius: 50%;
    border: 2px solid #166534;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cashout-final-score {
    font-size: 24px;
    font-weight: 800;
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
    font-style: italic;
}

.cashout-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, #4a4a6a, transparent);
    margin: 15px 0;
}

.cashout-divider-dots {
    height: 2px;
    margin: 14px 0;
    background-image: repeating-linear-gradient(
        90deg,
        #4a4a6a 0px,
        #4a4a6a 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0.7;
}

.cashout-earnings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cashout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.cashout-label {
    color: #b8b8d0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cashout-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #4a90d9 0%, #357abd 100%);
    color: white;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 12px;
    box-shadow: 0 2px 0 #2a5f8f;
    border: 1px solid #5a9fe0;
}

.cashout-dollars {
    font-weight: 700;
    letter-spacing: 0px;
}

.dollar-signs {
    color: #f5a623;
    text-shadow: 0 0 6px rgba(245, 166, 35, 0.4);
    font-size: 14px;
    font-weight: 700;
}

.cashout-row.rental .cashout-label {
    color: #ff6b6b;
}

.cashout-dollars.negative .dollar-signs {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
}

.cashout-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    animation: cashoutSlideIn 0.4s ease-out 0.2s both;
}

.cashout-info {
    display: flex;
    gap: 40px;
}

.cashout-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cashout-info-label {
    font-size: 11px;
    color: #6b6b8a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cashout-info-value {
    font-size: 18px;
    font-weight: 700;
    color: #e8e8f0;
}

.cashout-btn {
    background: linear-gradient(180deg, #f5a623 0%, #d4890a 100%);
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 800;
    padding: 12px 60px;
    border-radius: 6px;
    border: 2px solid #b8720a;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 
        0 4px 0 #8a5a08,
        0 6px 20px rgba(245, 166, 35, 0.25);
    animation: cashoutSlideIn 0.4s ease-out 0.2s both;
}

.cashout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 0 #8a5a08,
        0 10px 30px rgba(245, 166, 35, 0.4);
    background: linear-gradient(180deg, #f7b940 0%, #e8940f 100%);
}

.cashout-btn:active {
    transform: translateY(2px);
    box-shadow: 
        0 2px 0 #8a5a08,
        0 4px 15px rgba(245, 166, 35, 0.3);
}

/* ===== INLINE CASH OUT (Within Game Screen - Balatro Style) ===== */
.cashout-game-screen {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
}

.cashout-sidebar-score {
    background: linear-gradient(180deg, #2a2a3d 0%, #1c1c2b 100%) !important;
}

.cashout-mult-display {
    opacity: 0.5;
}

.cashout-center-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    gap: 10px;
    padding: 10px 15px;
    overflow-y: auto;
    max-height: 100%;
}

.cashout-panel-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 400px;
}

.cashout-title-banner-inline {
    background: linear-gradient(180deg, #3ecf8e 0%, #28a86d 100%);
    padding: 8px 40px;
    border-radius: 6px;
    box-shadow: 
        0 3px 0 #1e7a4d,
        0 5px 15px rgba(62, 207, 142, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 2px solid #1e7a4d;
}

/* Make the banner a clickable button */
.cashout-title-btn {
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

.cashout-title-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #4fd99a 0%, #32b878 100%);
    box-shadow: 
        0 5px 0 #1e7a4d,
        0 8px 25px rgba(62, 207, 142, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cashout-title-btn:active {
    transform: translateY(2px);
    box-shadow: 
        0 1px 0 #1e7a4d,
        0 3px 10px rgba(62, 207, 142, 0.3);
}

.cashout-title-inline {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
    letter-spacing: 1px;
}

.cashout-content-panel {
    background: linear-gradient(180deg, #2a2a3d 0%, #1c1c2b 100%);
    border-radius: 8px;
    padding: 10px 14px;
    width: 100%;
    border: 2px solid #3d3d5c;
    box-shadow: 
        0 3px 0 #1a1a28,
        0 6px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    max-height: 200px;
    overflow-y: auto;
}

.cashout-content-scroll {
    display: flex;
    flex-direction: column;
}

.cashout-score-section-inline {
    margin-bottom: 8px;
}

.cashout-score-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.cashout-score-label-inline {
    font-size: 12px;
    color: #9e9eb8;
    font-weight: 500;
}

.cashout-reward-dollars-inline {
    font-size: 12px;
    font-weight: 700;
    color: #f5a623;
    letter-spacing: 1px;
}

.cashout-score-achieved-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 12px;
    border-radius: 5px;
    border: 2px solid #4ade80;
}

.score-check-icon-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.score-check-icon-inline svg {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.cashout-final-score-inline {
    font-size: 16px;
    font-weight: 800;
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.4);
    font-style: italic;
}

.cashout-divider-dots-inline {
    height: 2px;
    margin: 8px 0;
    background-image: repeating-linear-gradient(
        90deg,
        #4a4a6a 0px,
        #4a4a6a 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0.7;
}

.cashout-earnings-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 40px;
}

.cashout-row-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    padding: 2px 0;
}

.cashout-row-animate {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease-out;
}

.cashout-row-animate.show {
    opacity: 1;
    transform: translateX(0);
}

.cashout-label-inline {
    color: #b8b8d0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cashout-count-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #4a90d9 0%, #357abd 100%);
    color: white;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    box-shadow: 0 1px 0 #2a5f8f;
    border: 1px solid #5a9fe0;
}

.cashout-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.cashout-icon-reward {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 1px 0 #166534;
}

.cashout-icon-reward::before {
    content: '$';
    color: white;
    font-weight: bold;
}

.cashout-icon-hands {
    background: linear-gradient(180deg, #4a90d9 0%, #357abd 100%);
    box-shadow: 0 1px 0 #2a5f8f;
}

.cashout-icon-interest {
    background: linear-gradient(180deg, #f5a623 0%, #d4890a 100%);
    box-shadow: 0 1px 0 #8a5a08;
}

.cashout-icon-seal {
    background: linear-gradient(180deg, #ffd700 0%, #daa520 100%);
    box-shadow: 0 1px 0 #b8860b;
}

.cashout-icon-joker {
    background: linear-gradient(180deg, #9b59b6 0%, #8e44ad 100%);
    box-shadow: 0 1px 0 #6c3483;
}

.cashout-icon-rental {
    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
    box-shadow: 0 1px 0 #922b21;
}

.cashout-dollars-inline {
    font-weight: 700;
    letter-spacing: 0px;
}

.cashout-dollars-inline .dollar-signs {
    color: #f5a623;
    text-shadow: 0 0 6px rgba(245, 166, 35, 0.4);
    font-size: 10px;
    font-weight: 700;
}

.cashout-row-inline.rental .cashout-label-inline {
    color: #ff6b6b;
}

.cashout-dollars-inline.negative .dollar-signs {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
}

.cashout-btn-inline {
    background: linear-gradient(180deg, #f5a623 0%, #d4890a 100%);
    color: #1a1a2e;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 40px;
    border-radius: 5px;
    border: 2px solid #b8720a;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 
        0 3px 0 #8a5a08,
        0 5px 15px rgba(245, 166, 35, 0.25);
    margin-top: 6px;
    flex-shrink: 0;
}

.cashout-btn-inline:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 0 #8a5a08,
        0 10px 30px rgba(245, 166, 35, 0.4);
    background: linear-gradient(180deg, #f7b940 0%, #e8940f 100%);
}

.cashout-btn-inline:active {
    transform: translateY(2px);
    box-shadow: 
        0 2px 0 #8a5a08,
        0 4px 15px rgba(245, 166, 35, 0.3);
}

/* Keep old classes for backwards compatibility */
.blind-complete-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 20px;
    padding: 20px;
    overflow: auto;
    background: linear-gradient(135deg, rgba(0, 50, 30, 0.3) 0%, rgba(0, 100, 50, 0.1) 100%);
}

.btn-proceed-shop {
    background: linear-gradient(135deg, #00c853, #00e676);
    color: #000;
    font-size: 18px;
    font-weight: 700;
    padding: 15px 40px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 20px rgba(0, 230, 118, 0.4);
}

.btn-proceed-shop:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 230, 118, 0.6);
}

.btn-proceed-shop:active {
    transform: translateY(0);
}

/* ===== MESSAGE TOAST ===== */
.game-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(20px);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.game-message.show {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

.game-message.error {
    background: rgba(255, 68, 102, 0.9);
    color: #fff;
    box-shadow: 0 0 30px rgba(255, 68, 102, 0.5);
}

.game-message.success {
    background: rgba(0, 230, 118, 0.9);
    color: #111;
    box-shadow: 0 0 30px rgba(0, 230, 118, 0.5);
}

.game-message.info {
    background: rgba(74, 158, 255, 0.9);
    color: #fff;
    box-shadow: 0 0 30px rgba(74, 158, 255, 0.5);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* ===== PACK TYPE COLORS ===== */
.shop-packs-col .pack-arcana { 
    background: linear-gradient(180deg, #605080 0%, #403060 100%); 
    border-color: rgba(179, 136, 255, 0.5);
}
.shop-packs-col .pack-arcana:hover { border-color: var(--accent-purple); box-shadow: var(--glow-purple); }

.shop-packs-col .pack-celestial { 
    background: linear-gradient(180deg, #405080 0%, #303060 100%); 
    border-color: rgba(74, 158, 255, 0.5);
}
.shop-packs-col .pack-celestial:hover { border-color: var(--accent-blue); box-shadow: var(--glow-blue); }

.shop-packs-col .pack-standard { 
    background: linear-gradient(180deg, #406050 0%, #304040 100%); 
    border-color: rgba(0, 230, 118, 0.5);
}
.shop-packs-col .pack-standard:hover { border-color: var(--accent-green); box-shadow: var(--glow-green); }

.shop-packs-col .pack-buffoon { 
    background: linear-gradient(180deg, #804050 0%, #603040 100%); 
    border-color: rgba(255, 68, 102, 0.5);
}
.shop-packs-col .pack-buffoon:hover { border-color: var(--accent-red); box-shadow: var(--glow-red); }

.shop-packs-col .pack-spectral { 
    background: linear-gradient(180deg, #406070 0%, #304050 100%); 
    border-color: rgba(0, 229, 255, 0.5);
}
.shop-packs-col .pack-spectral:hover { border-color: var(--accent-cyan); box-shadow: var(--glow-cyan); }

/* ==================== PACK OPEN SCREEN - BALATRO STYLE ==================== */
/* Reuses shop-screen-balatro layout, just adds pack-specific overrides */

/* Pack type badge styling */
.pack-type-badge {
    border-width: 3px !important;
}

/* Deck cards section (for Arcana/Spectral) */
.pack-deck-cards-section {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    flex-shrink: 0;
}

.pack-deck-cards-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
    perspective: 1000px;
}

/* Pack deck cards - same style as gameplay hand cards */
#pack-hand-container {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    max-width: 100%;
    padding: 10px;
    perspective: 1000px;
}

/* Cards in pack context - override deal animation */
#pack-hand-container .card {
    animation: none; /* No deal animation in pack context */
    cursor: pointer;
}

/* Pack selectable cards styling */
#pack-hand-container .card.pack-selectable {
    cursor: pointer;
}

#pack-hand-container .card.pack-selectable:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 8px 16px rgba(0,0,0,0.4),
        0 0 15px rgba(0, 229, 255, 0.3);
    border-color: var(--accent-cyan);
}

#pack-hand-container .card.selected {
    transform: translateY(-15px);
    box-shadow: 
        0 0 20px rgba(0, 229, 255, 0.6),
        0 8px 16px rgba(0,0,0,0.4);
    border-color: var(--accent-cyan);
}

/* Pack cards section */
.pack-cards-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 0;
}

/* Bottom section - Title and actions */
.pack-bottom-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
    flex-shrink: 0;
}

.pack-title-box {
    background: linear-gradient(180deg, rgba(40,40,60,0.95) 0%, rgba(30,30,50,0.95) 100%);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 12px 24px;
    text-align: center;
}

.pack-title-box .pack-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-bright);
    margin: 0;
}

.pack-title-box .pack-info {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
}

.pack-actions {
    display: flex;
    gap: 10px;
}

.pack-actions .btn-skip-pack {
    background: linear-gradient(180deg, #4a4a6a 0%, #3a3a5a 100%);
    border: 2px solid #5a5a7a;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-bright);
}

.pack-actions .btn-skip-pack:hover {
    background: linear-gradient(180deg, #5a4a5a 0%, #4a3a4a 100%);
    border-color: var(--accent-red);
    transform: translateY(-2px);
}

.pack-actions .btn-confirm-tarot,
.pack-actions .btn-confirm-spectral {
    background: linear-gradient(180deg, #4a7a5a 0%, #3a6a4a 100%);
    border: 2px solid var(--accent-green);
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-bright);
}

.pack-actions .btn-cancel-tarot,
.pack-actions .btn-cancel-spectral {
    background: linear-gradient(180deg, #5a4a4a 0%, #4a3a3a 100%);
    border: 2px solid var(--accent-red);
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-bright);
}

/* Right column override for pack - position deck at bottom */
.pack-right-col {
    justify-content: flex-end !important;
}

/* Pack hand cards - for Arcana/Spectral deck display */
.pack-hand-card {
    width: 52px;
    height: 72px;
    background: linear-gradient(160deg, #fffef5 0%, #f5f0e3 40%, #e8e3d6 100%);
    border: 2px solid #6b6560;
    border-radius: 5px;
    position: relative;
    cursor: default;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pack-hand-card .card-inner {
    width: 100%;
    height: 100%;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pack-hand-card .card-rank {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.pack-hand-card .card-suit {
    font-size: 10px;
    line-height: 1;
}

.pack-hand-card .card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    opacity: 0.25;
}

.pack-hand-card .card-rank-bottom {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    transform: rotate(180deg);
    line-height: 1;
}

.pack-hand-card.suit-red .card-rank,
.pack-hand-card.suit-red .card-suit,
.pack-hand-card.suit-red .card-center,
.pack-hand-card.suit-red .card-rank-bottom {
    color: #cc3333;
}

.pack-hand-card.suit-dark .card-rank,
.pack-hand-card.suit-dark .card-suit,
.pack-hand-card.suit-dark .card-center,
.pack-hand-card.suit-dark .card-rank-bottom {
    color: #222;
}

.pack-hand-card.selectable {
    cursor: pointer;
}

.pack-hand-card.selectable:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-cyan);
}

.pack-hand-card.selected {
    transform: translateY(-10px);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.6);
    border-color: var(--accent-cyan);
}

/* Legacy support - old pack-open-screen class for animations */
.pack-open-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
}

/* Pack Hand Section - Shows player's hand at top */
.pack-hand-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 10px;
    margin-top: 5px;
}

.pack-hand-cards {
    display: flex;
    gap: 4px;
    justify-content: center;
    perspective: 1000px;
}

.pack-hand-card {
    width: 48px;
    height: 68px;
    background: linear-gradient(160deg, #fffef5 0%, #f5f0e3 40%, #e8e3d6 100%);
    border: 2px solid #6b6560;
    border-radius: 5px;
    position: relative;
    cursor: default;
    transition: all 0.2s ease;
    transform-origin: center bottom;
    transform: rotate(calc((var(--card-index) - 3.5) * 3deg)) translateY(calc(abs(var(--card-index) - 3.5) * 3px));
}

.pack-hand-card .card-inner {
    width: 100%;
    height: 100%;
    padding: 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pack-hand-card .card-rank {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.pack-hand-card .card-suit {
    font-size: 10px;
    line-height: 1;
}

.pack-hand-card .card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    opacity: 0.3;
}

.pack-hand-card .card-rank-bottom {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    transform: rotate(180deg);
    line-height: 1;
}

.pack-hand-card.suit-red .card-rank,
.pack-hand-card.suit-red .card-suit,
.pack-hand-card.suit-red .card-center,
.pack-hand-card.suit-red .card-rank-bottom {
    color: #cc3333;
}

.pack-hand-card.suit-dark .card-rank,
.pack-hand-card.suit-dark .card-suit,
.pack-hand-card.suit-dark .card-center,
.pack-hand-card.suit-dark .card-rank-bottom {
    color: #222;
}

.pack-hand-card.selectable {
    cursor: pointer;
}

.pack-hand-card.selectable:hover {
    transform: rotate(calc((var(--card-index) - 3.5) * 3deg)) translateY(-8px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.pack-hand-card.selected {
    transform: rotate(calc((var(--card-index) - 3.5) * 3deg)) translateY(-12px);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
    border-color: var(--accent-cyan);
}

/* Pack Center Section - Balatro-style layout */
.pack-center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: center;
    padding: 20px;
}

.pack-cards-container {
    display: flex;
    justify-content: center;
    position: relative;
}

.pack-title-section {
    text-align: center;
    background: rgba(30, 30, 40, 0.9);
    padding: 12px 24px;
    border-radius: 8px;
    border: 2px solid var(--border);
}

.pack-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-bright);
    margin: 0;
    text-transform: none;
    letter-spacing: 1px;
}

.pack-info {
    font-size: 13px;
    color: var(--text-dim);
    margin: 4px 0 0;
}

.pack-cards {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 20px;
}

/* Bottom row - title section and skip button side by side (Balatro style) */
.pack-bottom-row {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

/* Pack actions - horizontal layout with Skip button */
.pack-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.pack-actions .btn-skip-pack {
    background: rgba(60, 60, 70, 0.95);
    border: 2px solid var(--border);
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-bright);
}

.pack-actions .btn-skip-pack:hover {
    background: rgba(100, 60, 60, 0.95);
    border-color: var(--accent-red);
    transform: translateY(-2px);
}

.pack-actions .btn-confirm-tarot,
.pack-actions .btn-confirm-spectral {
    background: rgba(60, 80, 70, 0.95);
    border: 2px solid var(--accent-green);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-bright);
}

.pack-actions .btn-cancel-tarot,
.pack-actions .btn-cancel-spectral {
    background: rgba(60, 60, 70, 0.95);
    border: 2px solid var(--border);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-bright);
}

/* Pack Selection Tooltip - appears above selected card */
.pack-selection-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.98);
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid var(--accent-cyan);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 229, 255, 0.3);
    z-index: 200;
    min-width: 120px;
    max-width: 200px;
    text-align: center;
    animation: tooltipFadeIn 0.2s ease-out;
}

@keyframes tooltipFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Tooltip arrow pointing down */
.pack-selection-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--accent-cyan);
}

.pack-tooltip-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 4px;
}

.pack-tooltip-desc {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.4;
    margin-bottom: 6px;
}

.pack-tooltip-hint {
    font-size: 10px;
    color: var(--accent-cyan);
    font-weight: 600;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 229, 255, 0.3);
}

.pack-card {
    width: 110px;
    min-height: 140px;
    padding: 8px;
    background: var(--bg-elevated);
    border: 3px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.pack-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Selected state for all pack cards */
.pack-card.pack-card-selected {
    transform: translateY(-12px);
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.6), 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

.pack-card.pack-card-selected:hover {
    transform: translateY(-12px);
}

/* Pack card tooltip - hidden by default, shown on selection */
.pack-card-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #3a2a50 0%, #1a1a2e 100%);
    border: 2px solid var(--accent-purple);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 140px;
    max-width: 200px;
    z-index: 10000;
    margin-bottom: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(179, 136, 255, 0.3);
    pointer-events: none;
}

/* Selected pack card gets higher z-index so tooltip appears above other cards */
.pack-card.pack-card-selected {
    z-index: 9999;
    position: relative;
}

/* Show tooltip when card is selected */
.pack-card.pack-card-selected .pack-card-tooltip {
    display: block;
    animation: packTooltipFadeIn 0.2s ease-out;
}

@keyframes packTooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Tooltip arrow */
.pack-card-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--accent-purple);
}

/* Tooltip name */
.pack-tooltip-name {
    font-size: 13px;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Tooltip description */
.pack-tooltip-desc {
    font-size: 11px;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 6px;
}

/* Tooltip rarity for jokers */
.pack-tooltip-rarity {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 4px;
    color: var(--accent-blue);
}

.pack-tooltip-edition {
    font-size: 10px;
    text-align: center;
    margin-bottom: 4px;
    padding: 3px 6px;
    background: rgba(100, 100, 150, 0.3);
    border-radius: 4px;
    color: #ddd;
}

/* Tooltip hint text */
.pack-tooltip-hint {
    font-size: 9px;
    color: var(--accent-cyan);
    text-align: center;
    font-style: italic;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Planet tooltip styling */
.pack-tooltip-planet {
    background: linear-gradient(180deg, #1e4a6f 0%, #0a2545 100%);
    border-color: #4080c0;
}

.pack-tooltip-planet::after {
    border-top-color: #4080c0;
}

.pack-tooltip-planet .pack-tooltip-name {
    color: #80d0ff;
}

/* Spectral tooltip styling */
.pack-tooltip-spectral {
    background: linear-gradient(180deg, #1a4a4a 0%, #0a2a2a 100%);
    border-color: #40a0b0;
}

.pack-tooltip-spectral::after {
    border-top-color: #40a0b0;
}

.pack-tooltip-spectral .pack-tooltip-name {
    color: #00e5ff;
}

/* Joker tooltip styling */
.pack-tooltip-joker {
    background: linear-gradient(180deg, #2a2a40 0%, #1a1a2e 100%);
    border-color: #6080a0;
}

.pack-tooltip-joker::after {
    border-top-color: #6080a0;
}

/* Playing card tooltip styling */
.pack-tooltip-card {
    background: linear-gradient(180deg, #2a3a2a 0%, #1a2a1a 100%);
    border-color: #60a060;
}

.pack-tooltip-card::after {
    border-top-color: #60a060;
}

.pack-tooltip-card .pack-tooltip-name {
    color: #90ff90;
}

.pack-card-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-bright);
}

.pack-card-rarity {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pack-card-desc {
    font-size: 8px;
    color: var(--text-dim);
    line-height: 1.2;
}

.pack-tarot { border-color: rgba(179, 136, 255, 0.3); }
.pack-tarot:hover { border-color: var(--accent-purple); box-shadow: 0 0 16px rgba(179, 136, 255, 0.4); }
.pack-planet { border-color: rgba(74, 158, 255, 0.3); }
.pack-planet:hover { border-color: var(--accent-blue); box-shadow: 0 0 16px rgba(74, 158, 255, 0.4); }
.pack-joker.rarity-common .pack-card-rarity { color: #5588aa; }
.pack-joker.rarity-uncommon .pack-card-rarity { color: var(--accent-green); }
.pack-joker.rarity-rare .pack-card-rarity { color: var(--accent-blue); }
.pack-joker.rarity-legendary .pack-card-rarity { color: var(--accent-purple); }

/* Pack Joker Images */
.pack-joker {
    width: 110px;
    height: auto;
    min-height: 140px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pack-joker-image {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.pack-joker-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.pack-joker:hover .pack-joker-image img {
    transform: scale(1.05);
}

.pack-joker .pack-card-name {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.pack-joker .pack-card-rarity {
    font-size: 9px;
    margin-bottom: 2px;
}

.pack-joker .pack-card-desc {
    font-size: 8px;
    text-align: center;
    line-height: 1.3;
    opacity: 0.9;
}

/* Pack Joker Rarity Borders */
.pack-joker.rarity-common { border-color: rgba(85, 136, 170, 0.4); }
.pack-joker.rarity-common:hover { border-color: #5588aa; box-shadow: 0 0 16px rgba(85, 136, 170, 0.4); }
.pack-joker.rarity-uncommon { border-color: rgba(0, 230, 118, 0.3); }
.pack-joker.rarity-uncommon:hover { border-color: var(--accent-green); box-shadow: 0 0 16px rgba(0, 230, 118, 0.4); }
.pack-joker.rarity-rare { border-color: rgba(74, 158, 255, 0.3); }
.pack-joker.rarity-rare:hover { border-color: var(--accent-blue); box-shadow: 0 0 16px rgba(74, 158, 255, 0.4); }
.pack-joker.rarity-legendary { border-color: rgba(179, 136, 255, 0.4); }
.pack-joker.rarity-legendary:hover { border-color: var(--accent-purple); box-shadow: 0 0 16px rgba(179, 136, 255, 0.5); }

/* Pack Joker Edition Effects */
.pack-joker.edition-foil {
    box-shadow: 0 0 20px rgba(200, 150, 220, 0.5);
    border-color: #c8a0dc !important;
}
.pack-joker.edition-foil .pack-joker-image {
    box-shadow: 0 0 12px rgba(200, 150, 220, 0.6);
    border-color: rgba(200, 150, 220, 0.6);
}
.pack-joker.edition-holographic {
    box-shadow: 0 0 20px rgba(100, 200, 255, 0.5), 0 0 30px rgba(255, 150, 200, 0.3);
    border-color: #88ddff !important;
}
.pack-joker.edition-holographic .pack-joker-image {
    box-shadow: 0 0 12px rgba(100, 200, 255, 0.6), 0 0 20px rgba(255, 150, 200, 0.3);
    border-color: rgba(100, 200, 255, 0.6);
}
.pack-joker.edition-polychrome {
    box-shadow: 0 0 15px rgba(100, 255, 200, 0.4), 0 0 25px rgba(255, 100, 255, 0.3);
    border-color: #555 !important;
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.6) 0%, rgba(30, 30, 40, 0.6) 100%);
    animation: polyGlow 4s linear infinite;
}
.pack-joker.edition-polychrome .pack-joker-image {
    box-shadow: 0 0 12px rgba(100, 255, 200, 0.5), 0 0 20px rgba(255, 100, 255, 0.3);
    border-color: rgba(100, 200, 150, 0.5);
}
.pack-joker.edition-negative {
    box-shadow: 0 0 20px rgba(50, 50, 80, 0.8), 0 0 40px rgba(80, 80, 120, 0.4);
    background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 100%);
    border-color: rgba(136, 136, 187, 0.8) !important;
}
.pack-joker.edition-negative .pack-joker-image,
.pack-joker.edition-negative .pack-joker-image img {
    filter: invert(1) hue-rotate(180deg);
}

/* Pack Spectral Cards with Images - only in pack opening screen */
.pack-cards .pack-spectral { 
    border-color: rgba(0, 229, 255, 0.3);
    width: 110px;
    min-height: 140px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    background: linear-gradient(180deg, #1a3a4a 0%, #0a2535 100%);
}
.pack-cards .pack-spectral:hover { 
    border-color: var(--accent-cyan); 
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
    transform: translateY(-8px) scale(1.05);
}

.pack-cards .pack-spectral-image {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 229, 255, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 229, 255, 0.2);
}

.pack-cards .pack-spectral-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.pack-cards .pack-spectral:hover .pack-spectral-image img {
    transform: scale(1.05);
}

.pack-cards .pack-spectral:hover .pack-spectral-image {
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}

.pack-cards .pack-spectral .pack-card-name {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

/* Tarot card images - gold/mustard theme */
.pack-tarot-image {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px auto;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(212, 164, 36, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(212, 164, 36, 0.2);
}

.pack-tarot-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.pack-tarot:hover .pack-tarot-image img {
    transform: scale(1.05);
}

.pack-tarot:hover .pack-tarot-image {
    border-color: rgba(212, 164, 36, 0.6);
    box-shadow: 0 0 12px rgba(212, 164, 36, 0.5);
}

/* Shop tarot image */
.shop-tarot-image {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.shop-tarot-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid rgba(212, 164, 36, 0.5);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 6px rgba(212, 164, 36, 0.2);
    transition: transform 0.15s ease;
}

.shop-tarot:hover .shop-tarot-image img {
    transform: scale(1.1);
}

/* Shop planet image - deep blue/purple cosmic theme */
.shop-planet-image {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.shop-planet-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid rgba(100, 100, 200, 0.5);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 6px rgba(100, 100, 200, 0.3);
    transition: transform 0.15s ease;
}

.shop-planet:hover .shop-planet-image img {
    transform: scale(1.1);
}

/* Pack planet image */
.pack-planet-image {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px auto;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(100, 100, 200, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(100, 100, 200, 0.2);
}

.pack-planet-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.pack-planet:hover .pack-planet-image img {
    transform: scale(1.05);
}

.pack-planet:hover .pack-planet-image {
    border-color: rgba(100, 100, 200, 0.6);
    box-shadow: 0 0 12px rgba(100, 100, 200, 0.5);
}

/* Game consumable tarot/spectral images */
.gc-image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.gc-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid rgba(212, 164, 36, 0.4);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.consumable-spectral .gc-image img {
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 6px rgba(0, 229, 255, 0.2);
}

.consumable-tarot .gc-image img {
    border-color: rgba(212, 164, 36, 0.4);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 6px rgba(212, 164, 36, 0.2);
}

/* Spectral cards now use the universal pack-card-tooltip system (shown on selection, not hover) */

/* Spectral tooltip styling - matches universal tooltip but with cyan accent */
.pack-tooltip-spectral {
    border-color: rgba(0, 229, 255, 0.5) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 229, 255, 0.3) !important;
}

.pack-tooltip-spectral .pack-tooltip-name {
    color: var(--accent-cyan);
}

/* Selection hint for spectral cards that require card selection */
.spectral-select-hint {
    font-size: 9px;
    color: rgba(0, 229, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.spectral-name { color: var(--accent-cyan); }

/* Pack Playing Card - Full card visual (Balatro style) */
.pack-playing-card {
    width: 90px;
    height: 126px;
    padding: 0;
    background: linear-gradient(160deg, #fffef5 0%, #f5f0e3 40%, #e8e3d6 100%) !important;
    border: 3px solid #6b6560;
    border-radius: 8px;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Plain cards should NOT have shimmer animation - override for clean look */
.pack-playing-card:not(.enhance-bonus):not(.enhance-mult):not(.enhance-wild):not(.enhance-glass):not(.enhance-steel):not(.enhance-stone):not(.enhance-gold):not(.enhance-lucky):not(.edition-foil):not(.edition-holographic):not(.edition-polychrome).pack-card-reveal::after {
    display: none;
}

.pack-playing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Selected state for pack cards */
.pack-playing-card.pack-card-selected {
    transform: translateY(-12px);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.6), 0 10px 25px rgba(0, 0, 0, 0.3);
}

.pack-playing-card.pack-card-selected:hover {
    transform: translateY(-12px);
}

.pack-playing-card .card-inner {
    padding: 5px 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pack-playing-card .card-rank {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.pack-playing-card .card-suit {
    font-size: 11px;
    line-height: 1;
    margin-top: -2px;
}

.pack-playing-card .card-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.pack-playing-card .card-rank-bottom {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-align: right;
    transform: rotate(180deg);
    align-self: flex-end;
}

.pack-playing-card .suit-red {
    color: #d42050;
}

.pack-playing-card .suit-dark {
    color: #2a2a35;
}

/* Pack card labels for enhancements/editions */
.pack-card-label {
    padding: 4px 6px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    border-bottom: 2px solid var(--label-color, #888);
    background: linear-gradient(180deg, 
        color-mix(in srgb, var(--label-color, #888) 30%, transparent) 0%,
        color-mix(in srgb, var(--label-color, #888) 15%, transparent) 100%
    );
}

.pack-card-label .label-name {
    display: block;
    color: var(--label-color, #fff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 9px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.pack-card-label .label-desc {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    margin-top: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.pack-card-label.enhance-label {
    border-radius: 5px 5px 0 0;
}

.pack-card-label.edition-label {
    border-top: none;
}

/* When both labels exist, adjust styling */
.pack-playing-card .enhance-label + .edition-label {
    border-top: 1px solid rgba(255,255,255,0.2);
}

/* Enhancement styling for pack cards - stronger colors */
.pack-playing-card.enhance-bonus { 
    background: linear-gradient(160deg, #d0e8ff 0%, #a8d4ff 40%, #80c0ff 100%) !important; 
    border-color: #4a9eff !important;
    box-shadow: 0 0 12px rgba(74, 158, 255, 0.4);
}
.pack-playing-card.enhance-mult { 
    background: linear-gradient(160deg, #ffd8d8 0%, #ffb8b8 40%, #ff9898 100%) !important; 
    border-color: #ff6666 !important;
    box-shadow: 0 0 12px rgba(255, 102, 102, 0.4);
}
.pack-playing-card.enhance-wild { 
    background: linear-gradient(160deg, #ffe8c8 0%, #ffd8a8 40%, #ffc888 100%) !important; 
    border-color: #ffaa44 !important;
    box-shadow: 0 0 12px rgba(255, 170, 68, 0.4);
}
.pack-playing-card.enhance-glass { 
    background: linear-gradient(160deg, #e8e8ff 0%, #d0d0ff 40%, #b8b8ff 100%) !important; 
    border-color: #aa88ff !important;
    box-shadow: 0 0 12px rgba(170, 136, 255, 0.4);
}
.pack-playing-card.enhance-steel { 
    background: linear-gradient(160deg, #e0e8f0 0%, #c8d8e8 40%, #b0c8d8 100%) !important; 
    border-color: #88aacc !important;
    box-shadow: 0 0 12px rgba(136, 170, 204, 0.4);
}
.pack-playing-card.enhance-stone { 
    background: linear-gradient(160deg, #e0dcd8 0%, #c8c4c0 40%, #b0aca8 100%) !important; 
    border-color: #888480 !important;
    box-shadow: 0 0 12px rgba(136, 132, 128, 0.4);
}
.pack-playing-card.enhance-gold { 
    background: linear-gradient(160deg, #fff0b0 0%, #ffe070 40%, #ffd040 100%) !important; 
    border-color: #ffcc00 !important;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
}
.pack-playing-card.enhance-lucky { 
    background: linear-gradient(160deg, #d0ffd0 0%, #a8ffa8 40%, #80ff80 100%) !important; 
    border-color: #44dd44 !important;
    box-shadow: 0 0 12px rgba(68, 221, 68, 0.4);
}

/* Edition styling for pack cards - more prominent */
.pack-playing-card.edition-foil { 
    box-shadow: 0 0 20px rgba(200, 150, 220, 0.7), inset 0 0 40px rgba(200, 150, 220, 0.2) !important;
    border-color: #c8a0dc !important;
}
.pack-playing-card.edition-holographic { 
    box-shadow: 0 0 20px rgba(100, 200, 255, 0.6), 0 0 30px rgba(255, 150, 200, 0.3), inset 0 0 30px rgba(100, 200, 255, 0.15) !important;
    border-color: #88ddff !important;
}
.pack-playing-card.edition-polychrome { 
    box-shadow: 0 0 20px rgba(100, 255, 200, 0.5), 0 0 30px rgba(255, 100, 255, 0.3) !important;
    border-color: #555 !important;
    background: linear-gradient(160deg, 
        rgba(20, 20, 30, 0.6) 0%, 
        rgba(30, 30, 40, 0.6) 100%
    ) !important;
    animation: polyShimmer 3s ease-in-out infinite;
}

@keyframes polyShimmer {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
}

.pack-actions {
    margin-top: 24px;
}

.btn-skip-pack {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 10px 32px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-skip-pack:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

/* ===== ARCANA PACK DECK CARDS ===== */
.pack-deck-cards-section {
    width: 100%;
    padding: 0 20px;
    margin-bottom: 16px;
}

.pack-deck-label, .pack-tarot-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-align: center;
}

.pack-deck-cards {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.pack-deck-card {
    width: 60px;
    height: 84px;
    background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pack-deck-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0, 229, 255, 0.3);
}

.pack-deck-card.selected {
    transform: translateY(-8px);
    border-color: var(--accent-purple);
    box-shadow: 0 0 20px rgba(179, 136, 255, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
}

.pack-deck-card.selected::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--accent-purple);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    font-weight: bold;
}

.pack-deck-card-face {
    text-align: center;
}

.pack-deck-card-rank {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.pack-deck-card-suit {
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
}

.pack-deck-card-info {
    position: absolute;
    bottom: 2px;
    font-size: 6px;
    color: var(--text-dim);
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

.pack-deck-card .suit-red {
    color: #c9303e;
}

.pack-deck-card .suit-dark {
    color: #1a1a30;
}

/* Tarot selection hint */
.tarot-select-hint {
    font-size: 7px;
    color: var(--accent-purple);
    margin-top: 4px;
    font-style: italic;
}

/* Disabled pack cards during tarot target selection */
.pack-card-disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* Tarot section styling */
.pack-tarot-section {
    width: 100%;
    padding: 0 20px;
}

/* Pack action buttons */
.pack-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-confirm-tarot {
    background: linear-gradient(180deg, #7c4dff 0%, #651fff 100%);
    color: white;
    border: none;
    padding: 10px 24px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 600;
}

.btn-confirm-tarot:hover {
    background: linear-gradient(180deg, #9575ff 0%, #7c4dff 100%);
    box-shadow: 0 0 16px rgba(124, 77, 255, 0.5);
    transform: translateY(-2px);
}

.btn-cancel-tarot {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 10px 24px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-cancel-tarot:hover {
    background: rgba(255, 68, 102, 0.2);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.btn-confirm-spectral {
    background: linear-gradient(180deg, #00bcd4 0%, #0097a7 100%);
    color: white;
    border: none;
    padding: 10px 24px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 600;
}

.btn-confirm-spectral:hover {
    background: linear-gradient(180deg, #26c6da 0%, #00bcd4 100%);
    box-shadow: 0 0 16px rgba(0, 188, 212, 0.5);
    transform: translateY(-2px);
}

.btn-cancel-spectral {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 10px 24px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-cancel-spectral:hover {
    background: rgba(255, 68, 102, 0.2);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* ===== DECK SELECT ===== */
.deck-select-screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 20%, #1a1230 0%, var(--bg-dark) 70%);
    padding: 15px 20px;
    padding-left: max(20px, var(--notch-padding-left));
    gap: 12px;
    align-items: center;
}

.deck-select-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-bright);
    text-shadow: 0 0 20px rgba(179, 136, 255, 0.5);
    letter-spacing: 2px;
    margin: 0;
    flex-shrink: 0;
}

.deck-select-main {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 900px;
    justify-content: center;
}

.deck-grid-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    max-width: 380px;
}

.deck-options-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 15px;
    background: var(--bg-panel);
    border-radius: 12px;
    border: 2px solid var(--border);
}

.deck-card-new {
    padding: 12px 8px;
    background: var(--bg-mid);
    border: 3px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.deck-card-new:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: var(--deck-color);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--deck-color) 30%, transparent),
                0 0 15px color-mix(in srgb, var(--deck-color) 20%, transparent);
}

.deck-card-new.deck-highlighted {
    transform: translateY(-8px) scale(1.05);
    border-color: var(--deck-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--deck-color) 50%, transparent),
                0 8px 25px color-mix(in srgb, var(--deck-color) 40%, transparent),
                0 0 30px color-mix(in srgb, var(--deck-color) 25%, transparent);
    background: color-mix(in srgb, var(--deck-color) 10%, var(--bg-mid));
}

.deck-card-new.deck-highlighted::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: var(--deck-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.deck-card-new {
    position: relative;
}

.deck-visual-new {
    width: 56px;
    height: 42px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.deck-cards-stack-new {
    position: relative;
    width: 28px;
    height: 34px;
}

.mini-card-new {
    position: absolute;
    width: 22px;
    height: 30px;
    background: linear-gradient(145deg, #f5f1e8 0%, #e8e4dc 100%);
    border: 1px solid #c8c4bc;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.mini-card-new:nth-child(1) {
    transform: rotate(-10deg);
    left: 0;
}

.mini-card-new:nth-child(2) {
    transform: rotate(0deg);
    left: 5px;
    z-index: 1;
}

.mini-card-new:nth-child(3) {
    transform: rotate(10deg);
    left: 10px;
    z-index: 2;
}

.deck-name-new {
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0 0 10px currentColor;
}

/* Pagination */
.deck-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.deck-page-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-bright);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deck-page-btn:hover:not(:disabled) {
    border-color: var(--accent-purple);
    background: var(--bg-mid);
    box-shadow: 0 0 15px rgba(179, 136, 255, 0.4);
    transform: scale(1.1);
}

.deck-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.deck-page-info {
    font-size: 13px;
    color: var(--text-dim);
    min-width: 50px;
    text-align: center;
}

/* Deck Info Panel */
.deck-info-panel {
    width: 180px;
    background: var(--bg-panel);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.deck-info-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    gap: 8px;
}

.deck-info-empty-icon {
    font-size: 48px;
    opacity: 0.4;
}

.deck-info-empty-text {
    font-size: 12px;
    color: var(--text-dim);
}

.deck-info-empty-hint {
    font-size: 10px;
    color: var(--accent-purple);
    opacity: 0.7;
}

.deck-info-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 2px solid;
    width: 100%;
}

.deck-info-visual {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.deck-cards-stack-large {
    position: relative;
    width: 40px;
    height: 48px;
}

.mini-card-large {
    position: absolute;
    width: 32px;
    height: 44px;
    background: linear-gradient(145deg, #f5f1e8 0%, #e8e4dc 100%);
    border: 2px solid #c8c4bc;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.mini-card-large:nth-child(1) {
    transform: rotate(-12deg);
    left: 0;
}

.mini-card-large:nth-child(2) {
    transform: rotate(0deg);
    left: 8px;
    z-index: 1;
}

.mini-card-large:nth-child(3) {
    transform: rotate(12deg);
    left: 16px;
    z-index: 2;
}

.deck-info-title {
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 0 15px currentColor;
    text-align: center;
}

.deck-info-desc {
    font-size: 12px;
    color: var(--text);
    text-align: center;
    line-height: 1.4;
    padding: 0 5px;
}

.btn-select-deck {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--deck-color) 0%, color-mix(in srgb, var(--deck-color) 80%, black) 100%);
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--deck-color) 40%, transparent);
    margin-top: auto;
}

.btn-select-deck:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--deck-color) 50%, transparent);
}

/* Stake Section (Compact) */
.stake-section-new {
    width: 140px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stake-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    text-align: center;
    letter-spacing: 1px;
    margin: 0;
}

.stake-options-new {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 10px;
    background: var(--bg-panel);
    border-radius: 10px;
    border: 2px solid var(--border);
}

.stake-info-compact {
    padding: 10px;
    background: var(--bg-panel);
    border-radius: 10px;
    border: 2px solid var(--border);
    text-align: center;
    flex: 1;
    overflow-y: auto;
}

.stake-name-compact {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
    text-shadow: 0 0 8px currentColor;
}

.stake-desc-compact {
    font-size: 9px;
    color: var(--text-dim);
    line-height: 1.3;
}

.btn-back-menu {
    flex-shrink: 0;
    padding: 10px 30px;
    font-size: 12px;
}

/* Legacy deck select styles (kept for compatibility) */
.deck-stake-container {
    display: flex;
    gap: 15px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.deck-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.stake-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 200px;
}

.deck-select-screen .section-title {
    margin-bottom: 10px;
    font-size: 14px;
}

.deck-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 5px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}

/* Stake Selection */
.stake-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 10px;
    background: var(--bg-panel);
    border-radius: 8px;
    border: 2px solid var(--border);
}

.stake-chip {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    background: var(--bg-mid);
    border: 2px solid var(--border);
}

.stake-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
}

.stake-chip:hover:not(.stake-locked) {
    transform: scale(1.15);
    border-color: var(--stake-color);
    box-shadow: 0 0 15px var(--stake-color);
}

.stake-chip.stake-selected {
    transform: scale(1.2);
    border-color: var(--stake-color);
    box-shadow: 0 0 0 3px var(--stake-color), 0 0 20px var(--stake-color);
}

.stake-chip.stake-locked {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.8);
}

.stake-lock {
    position: absolute;
    font-size: 10px;
    bottom: -4px;
    right: -4px;
}

.stake-check {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    top: -6px;
    right: -6px;
    color: #22c55e;
    text-shadow: 0 0 8px #22c55e, 0 0 2px #000;
    z-index: 2;
}

.stake-chip.stake-completed {
    box-shadow: 0 0 10px #22c55e40, inset 0 0 5px #22c55e30;
}

.stake-chip.stake-completed .stake-icon {
    border: 2px solid #22c55e;
}

.stake-info {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-panel);
    border-radius: 8px;
    border: 2px solid var(--border);
    text-align: center;
    flex: 1;
    overflow-y: auto;
}

.stake-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    text-shadow: 0 0 10px currentColor;
}

.stake-desc {
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.stake-modifiers {
    text-align: left;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 8px;
}

.stake-mod {
    font-size: 9px;
    color: var(--accent-red);
    margin-bottom: 4px;
    line-height: 1.3;
}

.deck-card {
    padding: 10px;
    background: var(--bg-panel);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.deck-card:hover {
    transform: translateY(-4px);
    border-color: var(--deck-color, var(--accent-cyan));
    box-shadow: 0 0 15px color-mix(in srgb, var(--deck-color, var(--accent-cyan)) 40%, transparent);
}

.deck-visual {
    width: 50px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.deck-cards-stack {
    position: relative;
    width: 24px;
    height: 30px;
}

.mini-card {
    position: absolute;
    width: 20px;
    height: 28px;
    background: linear-gradient(145deg, #f5f1e8 0%, #e8e4dc 100%);
    border: 1px solid #c8c4bc;
    border-radius: 2px;
}

.mini-card:nth-child(1) {
    transform: rotate(-8deg);
    left: 0;
}

.mini-card:nth-child(2) {
    transform: rotate(0deg);
    left: 4px;
    z-index: 1;
}

.mini-card:nth-child(3) {
    transform: rotate(8deg);
    left: 8px;
    z-index: 2;
}

.deck-name {
    font-size: 10px;
    font-weight: 700;
}

.deck-desc {
    font-size: 8px;
    color: var(--text-dim);
    line-height: 1.2;
}

.deck-select-screen .btn-skip {
    align-self: center;
    flex-shrink: 0;
    padding: 10px 30px;
    font-size: 12px;
}

/* ===== BALATRO-STYLE ANIMATIONS ===== */

/* Screen shake for big scores */
@keyframes screenShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-3px, -2px) rotate(-0.5deg); }
    20% { transform: translate(3px, 2px) rotate(0.5deg); }
    30% { transform: translate(-2px, 3px) rotate(-0.3deg); }
    40% { transform: translate(2px, -2px) rotate(0.3deg); }
    50% { transform: translate(-2px, 2px) rotate(-0.2deg); }
    60% { transform: translate(2px, -1px) rotate(0.2deg); }
    70% { transform: translate(-1px, 2px) rotate(-0.1deg); }
    80% { transform: translate(1px, -1px) rotate(0.1deg); }
    90% { transform: translate(-1px, 1px) rotate(0deg); }
}

.shake {
    animation: screenShake 0.4s ease-out;
}

.shake-strong {
    animation: screenShakeStrong 0.5s ease-out;
}

@keyframes screenShakeStrong {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-6px, -4px) rotate(-1deg); }
    20% { transform: translate(6px, 4px) rotate(1deg); }
    30% { transform: translate(-5px, 5px) rotate(-0.8deg); }
    40% { transform: translate(5px, -4px) rotate(0.8deg); }
    50% { transform: translate(-4px, 4px) rotate(-0.5deg); }
    60% { transform: translate(4px, -3px) rotate(0.5deg); }
    70% { transform: translate(-3px, 3px) rotate(-0.3deg); }
    80% { transform: translate(3px, -2px) rotate(0.3deg); }
    90% { transform: translate(-2px, 2px) rotate(0deg); }
}

/* Chip/Mult counter animations - drumroll effect with micro-bounce on each tick */
@keyframes chipPop {
    0% { transform: scale(1) translateY(0); }
    20% { transform: scale(1.15, 0.9) translateY(1px); } /* Squash */
    50% { transform: scale(1.3) translateY(-2px); color: #6dd6ff; text-shadow: 0 0 20px rgba(77, 195, 255, 0.8); }
    70% { transform: scale(1.1) translateY(0); }
    100% { transform: scale(1) translateY(0); }
}

@keyframes multPop {
    0% { transform: scale(1) translateY(0); }
    20% { transform: scale(1.2, 0.85) translateY(1px); } /* Squash */
    50% { transform: scale(1.4) translateY(-3px); color: #ff7766; text-shadow: 0 0 20px rgba(254, 95, 85, 0.8); }
    70% { transform: scale(1.15) translateY(0); }
    100% { transform: scale(1) translateY(0); }
}

@keyframes xMultPop {
    0% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    15% { 
        transform: scale(1.6) rotate(-6deg);
        filter: brightness(1.5);
    }
    30% { 
        transform: scale(1.8) rotate(6deg); 
        color: #ffff44; 
        text-shadow: 0 0 40px rgba(255, 255, 50, 1), 0 0 60px rgba(255, 100, 50, 0.8);
        filter: brightness(1.8);
    }
    50% { 
        transform: scale(1.5) rotate(-4deg); 
        color: #ff4444; 
        text-shadow: 0 0 30px rgba(255, 50, 50, 1);
        filter: brightness(1.4);
    }
    75% { 
        transform: scale(1.3) rotate(2deg);
        filter: brightness(1.2);
    }
    100% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

.chip-pop {
    animation: chipPop 0.15s ease-out;
}

.mult-pop {
    animation: multPop 0.15s ease-out;
}

.xmult-pop {
    animation: xMultPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Score total flash */
@keyframes scoreTotalFlash {
    0% { transform: scale(1); }
    30% { transform: scale(1.5); text-shadow: 0 0 40px rgba(245, 200, 66, 1); }
    100% { transform: scale(1); text-shadow: 0 0 15px rgba(245, 200, 66, 0.5); }
}

.score-flash {
    animation: scoreTotalFlash 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Card flip animation */
@keyframes cardFlip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

.card-flip {
    animation: cardFlip 0.3s ease-in-out;
}

/* Joker buy/add animation */
@keyframes jokerAdd {
    0% { 
        opacity: 0;
        transform: scale(0.5) translateY(30px) rotate(-10deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) translateY(-5px) rotate(3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0deg);
    }
}

.joker-add {
    animation: jokerAdd 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Money change animation */
@keyframes moneyUp {
    0% { color: var(--money-color); }
    50% { color: #7fff7f; transform: scale(1.2); text-shadow: 0 0 15px rgba(100, 255, 100, 0.8); }
    100% { color: var(--money-color); transform: scale(1); }
}

@keyframes moneyDown {
    0% { color: var(--money-color); }
    50% { color: #ff6666; transform: scale(1.2); text-shadow: 0 0 15px rgba(255, 100, 100, 0.8); }
    100% { color: var(--money-color); transform: scale(1); }
}

.money-up {
    animation: moneyUp 0.3s ease-out;
}

.money-down {
    animation: moneyDown 0.3s ease-out;
}

/* Blind clear celebration */
@keyframes blindClear {
    0% { 
        filter: brightness(1);
    }
    30% { 
        filter: brightness(1.5) saturate(1.3);
    }
    100% { 
        filter: brightness(1);
    }
}

.blind-clear {
    animation: blindClear 0.6s ease-out;
}

/* Pulse glow for important elements */
@keyframes pulseGlow {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
    }
    50% { 
        box-shadow: 0 0 25px rgba(0, 212, 255, 0.6), 0 0 50px rgba(0, 212, 255, 0.3);
    }
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Hand type level up */
@keyframes levelUp {
    0% { 
        transform: scale(1);
        filter: brightness(1);
    }
    30% { 
        transform: scale(1.3);
        filter: brightness(1.5);
        text-shadow: 0 0 20px currentColor;
    }
    100% { 
        transform: scale(1);
        filter: brightness(1);
    }
}

.level-up {
    animation: levelUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Pack open burst */
@keyframes packBurst {
    0% { 
        transform: scale(0.8);
        opacity: 0;
    }
    50% { 
        transform: scale(1.1);
        opacity: 1;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

.pack-burst {
    animation: packBurst 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== ENHANCED PACK OPENING ANIMATIONS ===== */

/* Pack Opening Container */
.pack-open-screen,
.pack-open-screen-balatro {
    position: relative;
    overflow: hidden;
}

.pack-open-screen::before,
.pack-open-screen-balatro::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.pack-open-screen.pack-opening::before,
.pack-open-screen-balatro.pack-opening::before {
    animation: packOpenFlash 0.8s ease-out forwards;
}

@keyframes packOpenFlash {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    50% {
        width: 800px;
        height: 800px;
        opacity: 0.8;
    }
    100% {
        width: 1200px;
        height: 1200px;
        opacity: 0;
    }
}

/* Card reveal animations - staggered entrance */
@keyframes packCardReveal {
    0% {
        transform: translateY(100px) rotateX(90deg) scale(0.3);
        opacity: 0;
        filter: blur(10px);
    }
    40% {
        transform: translateY(-20px) rotateX(-10deg) scale(1.1);
        opacity: 1;
        filter: blur(0);
    }
    60% {
        transform: translateY(10px) rotateX(5deg) scale(0.95);
    }
    80% {
        transform: translateY(-5px) rotateX(-2deg) scale(1.02);
    }
    100% {
        transform: translateY(0) rotateX(0) scale(1);
        opacity: 1;
    }
}

.pack-card-reveal {
    animation: packCardReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.pack-card-reveal:nth-child(1) { animation-delay: 0.1s; }
.pack-card-reveal:nth-child(2) { animation-delay: 0.2s; }
.pack-card-reveal:nth-child(3) { animation-delay: 0.3s; }
.pack-card-reveal:nth-child(4) { animation-delay: 0.4s; }
.pack-card-reveal:nth-child(5) { animation-delay: 0.5s; }

/* Shimmer effect on cards */
@keyframes cardShimmer {
    0% {
        background-position: -200% center;
        opacity: 1;
    }
    80% {
        background-position: 150% center;
        opacity: 1;
    }
    100% {
        background-position: 200% center;
        opacity: 0;
    }
}

.pack-card-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.3) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: cardShimmer 1.5s ease-in-out forwards;
    pointer-events: none;
    border-radius: inherit;
    opacity: 1;
}

/* Pack type specific reveal colors */
.pack-open-arcana .pack-card-reveal::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(179, 136, 255, 0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
}

.pack-open-celestial .pack-card-reveal::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(74, 158, 255, 0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
}

.pack-open-standard .pack-card-reveal::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 230, 118, 0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
}

.pack-open-buffoon .pack-card-reveal::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 68, 102, 0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
}

.pack-open-spectral .pack-card-reveal::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 229, 255, 0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
}

/* Pack opening particles */
@keyframes particle-float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

.pack-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.pack-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: particle-float 1.5s ease-out forwards;
}

/* Arcana particles - mystical purple */
.pack-open-arcana .pack-particle {
    background: radial-gradient(circle, #b388ff 0%, #7c4dff 100%);
    box-shadow: 0 0 10px #b388ff;
}

/* Celestial particles - starry blue */
.pack-open-celestial .pack-particle {
    background: radial-gradient(circle, #82b1ff 0%, #448aff 100%);
    box-shadow: 0 0 10px #82b1ff;
}

/* Standard particles - golden */
.pack-open-standard .pack-particle {
    background: radial-gradient(circle, #ffd740 0%, #ffab00 100%);
    box-shadow: 0 0 10px #ffd740;
}

/* Buffoon particles - playful multicolor */
.pack-open-buffoon .pack-particle:nth-child(odd) {
    background: radial-gradient(circle, #ff5252 0%, #d50000 100%);
    box-shadow: 0 0 10px #ff5252;
}
.pack-open-buffoon .pack-particle:nth-child(even) {
    background: radial-gradient(circle, #ffd740 0%, #ffab00 100%);
    box-shadow: 0 0 10px #ffd740;
}

/* Spectral particles - ghostly cyan */
.pack-open-spectral .pack-particle {
    background: radial-gradient(circle, #84ffff 0%, #00e5ff 100%);
    box-shadow: 0 0 10px #84ffff;
}

/* Glow ring behind cards during reveal */
@keyframes glowRing {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.pack-cards::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 150px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.pack-opening .pack-cards::before {
    animation: glowRing 0.8s ease-out forwards;
}

.pack-open-arcana .pack-cards::before {
    background: radial-gradient(ellipse, rgba(179, 136, 255, 0.4) 0%, transparent 70%);
}

.pack-open-celestial .pack-cards::before {
    background: radial-gradient(ellipse, rgba(74, 158, 255, 0.4) 0%, transparent 70%);
}

.pack-open-standard .pack-cards::before {
    background: radial-gradient(ellipse, rgba(0, 230, 118, 0.4) 0%, transparent 70%);
}

.pack-open-buffoon .pack-cards::before {
    background: radial-gradient(ellipse, rgba(255, 68, 102, 0.4) 0%, transparent 70%);
}

.pack-open-spectral .pack-cards::before {
    background: radial-gradient(ellipse, rgba(0, 229, 255, 0.4) 0%, transparent 70%);
}

/* Card pickup animation when selected */
@keyframes cardPickup {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    30% {
        transform: scale(1.15) rotate(-2deg);
        filter: brightness(1.3);
    }
    50% {
        transform: scale(1.2) rotate(0deg) translateY(-10px);
        filter: brightness(1.5);
    }
    70% {
        transform: scale(0.9) translateY(-5px);
        opacity: 0.8;
    }
    100% {
        transform: scale(0) translateY(-50px);
        opacity: 0;
    }
}

.pack-card-picked {
    animation: cardPickup 0.4s ease-in forwards;
    pointer-events: none;
}

/* Animation for card moving to deck (bottom right) */
@keyframes cardToDeck {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    30% {
        transform: scale(1.1) rotate(-3deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.9) translateX(50px) translateY(50px) rotate(5deg);
        opacity: 0.9;
    }
    100% {
        transform: scale(0.3) translateX(200px) translateY(150px) rotate(15deg);
        opacity: 0;
    }
}

.pack-card-to-deck {
    animation: cardToDeck 0.5s ease-in-out forwards;
    pointer-events: none;
    z-index: 100;
}

/* Skip remaining cards animation */
@keyframes cardSkip {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.8) translateY(10px);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.5) translateY(30px);
        opacity: 0;
    }
}

.pack-card-skipped {
    animation: cardSkip 0.3s ease-in forwards;
    pointer-events: none;
}

/* Pack title glow based on type */
.pack-open-screen .section-title {
    position: relative;
}

.pack-open-arcana .section-title {
    color: #b388ff;
    text-shadow: 0 0 20px rgba(179, 136, 255, 0.6);
}

.pack-open-celestial .section-title {
    color: #82b1ff;
    text-shadow: 0 0 20px rgba(74, 158, 255, 0.6);
}

.pack-open-standard .section-title {
    color: #69f0ae;
    text-shadow: 0 0 20px rgba(0, 230, 118, 0.6);
}

.pack-open-buffoon .section-title {
    color: #ff5252;
    text-shadow: 0 0 20px rgba(255, 68, 102, 0.6);
}

.pack-open-spectral .section-title {
    color: #84ffff;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.6);
}

/* Pack image in shop - hover glow effect */
.shop-pack-card:hover .pack-image {
    transform: scale(1.05);
    filter: brightness(1.2) drop-shadow(0 0 8px currentColor);
}

.shop-pack-card .pack-image {
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Subtle float animation for menu elements */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.float {
    animation: float 3s ease-in-out infinite;
}

/* Glow text effect */
.glow-text {
    text-shadow: 
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 40px currentColor;
}

/* Enhanced scoring display */
.score-calc {
    font-variant-numeric: tabular-nums;
}

.score-chips, .score-mult, .score-total {
    display: inline-block;
    min-width: 50px;
    text-align: center;
    transition: all 0.1s ease;
}

/* Suit colors - more vibrant */
.suit-red {
    color: #c9303e;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.suit-dark {
    color: #1a1a30;
    text-shadow: 0 1px 0 rgba(255,255,255,0.1);
}

/* Enhanced card face styling */
.card-rank {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.card-suit {
    font-size: 10px;
    line-height: 1;
    margin-top: -2px;
}

.card-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* Win/Lose screen enhancements */
.end-title {
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.win-title {
    background: linear-gradient(135deg, #f5c842 0%, #ffed80 50%, #f5c842 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(245, 200, 66, 0.8));
    animation: winPulse 1.5s ease-in-out infinite, float 3s ease-in-out infinite;
}

/* ==================== FULL DECK BUTTON ==================== */
.btn-full-deck {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 75px;
    padding: 8px 6px;
    background: linear-gradient(180deg, #405060 0%, #304050 100%);
    border: 3px solid #506070;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-full-deck:hover {
    transform: translateY(-3px);
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0, 229, 255, 0.3);
}

.btn-full-deck .deck-icon {
    font-size: 20px;
}

.btn-full-deck .deck-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-bright);
    text-transform: uppercase;
}

.btn-full-deck .deck-count {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-cyan);
}

/* ==================== FULL DECK VIEWER (Balatro Style) ==================== */
.full-deck-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.full-deck-viewer {
    width: 90%;
    max-width: 800px;
    max-height: 90%;
    background: linear-gradient(180deg, #2a3040 0%, #1a2030 100%);
    border: 3px solid #4a5a70;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.fdv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(180deg, #3a4a60 0%, #2a3a50 100%);
    border-bottom: 2px solid #4a5a70;
    position: relative;
    z-index: 1; /* Lower than tooltip z-index */
}

.fdv-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.btn-close-fdv {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    background: rgba(255, 68, 102, 0.2);
    border: 2px solid var(--accent-red);
    border-radius: 6px;
    color: var(--accent-red);
    cursor: pointer;
}

.btn-close-fdv:hover {
    background: var(--accent-red);
    color: white;
}

.fdv-content {
    display: flex;
    flex: 1;
    overflow: visible;
    position: relative;
    z-index: 10; /* Higher than header so tooltips can appear above it */
}

.fdv-sidebar {
    width: 130px;
    padding: 10px;
    background: linear-gradient(180deg, #252535 0%, #1a1a2a 100%);
    border-right: 2px solid #3a3a55;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.fdv-deck-info {
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid #3a3a55;
}

.fdv-deck-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 4px;
}

.fdv-deck-desc {
    font-size: 9px;
    color: var(--text-dim);
    line-height: 1.3;
}

.fdv-stats-box {
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid #3a3a55;
}

.fdv-stats-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #3a3a55;
}

/* Base cards breakdown (Aces, Face, Numbers) */
.fdv-base-cards {
    display: flex;
    justify-content: space-around;
    margin-bottom: 6px;
}

.fdv-base-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.fdv-base-icon {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-bright);
}

.fdv-base-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-cyan);
}

.fdv-special-counts {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid #3a3a55;
    font-size: 10px;
    font-weight: 700;
}

.fdv-special.enhanced { color: var(--accent-gold); }
.fdv-special.edition { color: var(--accent-purple); }
.fdv-special.seal { color: var(--accent-cyan); }

/* Suit grid - 2x2 layout */
.fdv-suit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.fdv-suit-row-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.fdv-suit-row-item.suit-dark {
    color: #8899aa;
}

.fdv-suit-row-item.suit-red {
    color: #c9303e;
}

.fdv-suit-sym {
    font-size: 18px;
}

.fdv-suit-ct {
    font-size: 14px;
    font-weight: 700;
}

/* Rank count column */
.fdv-rank-column {
    width: 40px;
    padding: 8px 4px;
    background: rgba(0, 0, 0, 0.3);
    border-right: 2px solid #3a3a55;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.fdv-rank-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 4px;
    font-size: 10px;
}

.fdv-rank-label {
    font-weight: 700;
    color: var(--text-muted);
}

.fdv-rank-count {
    font-weight: 700;
    color: var(--text-bright);
    min-width: 14px;
    text-align: right;
}

/* Main cards area */
.fdv-cards-area {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 2;
}

.fdv-suit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    position: relative;
    z-index: 1;
}

/* Elevate row when it contains a hovered or selected card so tooltip appears above other rows */
.fdv-suit-row:has(.fdv-mini-card:hover),
.fdv-suit-row:has(.fdv-mini-card.fdv-selected) {
    z-index: 1000;
}

/* Mini cards */
.fdv-mini-card {
    width: 32px;
    height: 44px;
    background: linear-gradient(160deg, #fffef5 0%, #f5f0e3 40%, #e8e3d6 100%);
    border: 2px solid #6b6560;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    position: relative;
    transition: transform 0.1s ease;
}

.fdv-mini-card:hover {
    transform: scale(1.15);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.fdv-mini-rank {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.fdv-mini-suit {
    font-size: 14px;
    line-height: 1;
}

/* Mini card enhancements */
.fdv-mini-card.mini-enhance-bonus { background: linear-gradient(160deg, #d0e8ff 0%, #a8d4ff 100%); border-color: #4a9eff; }
.fdv-mini-card.mini-enhance-mult { background: linear-gradient(160deg, #ffd8d8 0%, #ffb8b8 100%); border-color: #ff6666; }
.fdv-mini-card.mini-enhance-wild { background: linear-gradient(160deg, #ffe8c8 0%, #ffd8a8 100%); border-color: #ffaa44; }
.fdv-mini-card.mini-enhance-glass { background: linear-gradient(160deg, #e8e8ff 0%, #d0d0ff 100%); border-color: #aa88ff; }
.fdv-mini-card.mini-enhance-steel { background: linear-gradient(160deg, #e0e8f0 0%, #c8d8e8 100%); border-color: #88aacc; }
.fdv-mini-card.mini-enhance-stone { background: linear-gradient(160deg, #e0dcd8 0%, #c8c4c0 100%); border-color: #888480; }
.fdv-mini-card.mini-enhance-gold { background: linear-gradient(160deg, #fff0b0 0%, #ffe070 100%); border-color: #ffcc00; box-shadow: 0 0 8px rgba(255, 204, 0, 0.4); }
.fdv-mini-card.mini-enhance-lucky { background: linear-gradient(160deg, #d0ffd0 0%, #a8ffa8 100%); border-color: #44dd44; }

/* Mini card editions */
.fdv-mini-card.mini-edition-foil { box-shadow: 0 0 8px rgba(200, 150, 220, 0.6); border-color: #c8a0dc; }
.fdv-mini-card.mini-edition-holographic { box-shadow: 0 0 8px rgba(100, 200, 255, 0.6); border-color: #88ddff; }
.fdv-mini-card.mini-edition-polychrome { 
    box-shadow: 0 0 10px rgba(100, 255, 200, 0.5);
    border-color: #555;
    background: rgba(20, 20, 30, 0.4);
    animation: polyShimmerMini 2s ease-in-out infinite;
}

@keyframes polyShimmerMini {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(20deg); }
}

/* Mini card seals */
.fdv-mini-card.mini-seal-gold::after { content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; background: #ffcc00; border-radius: 50%; }
.fdv-mini-card.mini-seal-red::after { content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; background: #ff4444; border-radius: 50%; }
.fdv-mini-card.mini-seal-blue::after { content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; background: #4488ff; border-radius: 50%; }
.fdv-mini-card.mini-seal-purple::after { content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; background: #aa44ff; border-radius: 50%; }

/* Full deck viewer - Floating tooltip (positioned outside all stacking contexts) */
.fdv-floating-tooltip {
    display: none;
    position: fixed;
    background: linear-gradient(180deg, #1a3050 0%, #0a1828 100%);
    border: 2px solid var(--accent-cyan);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    white-space: pre-line;
    line-height: 1.5;
    z-index: 99999;
    min-width: 160px;
    max-width: 240px;
    text-align: left;
    box-shadow: 
        0 0 15px rgba(0, 229, 255, 0.4),
        0 6px 24px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Old inline tooltip styles removed - now using floating tooltip */

/* Selected card state - tap to select */
.fdv-mini-card.fdv-selected {
    transform: scale(1.4) translateY(-4px);
    z-index: 200;
    box-shadow: 
        0 0 0 3px var(--accent-cyan),
        0 0 15px rgba(0, 229, 255, 0.6),
        0 6px 20px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-cyan);
}

/* Keep selected card scaled on hover */
.fdv-mini-card.fdv-selected:hover {
    transform: scale(1.4) translateY(-4px);
}

/* Selected card tooltip handled by floating tooltip */

.fdv-footer {
    padding: 10px 15px;
    background: linear-gradient(180deg, #2a3a50 0%, #1a2a40 100%);
    border-top: 2px solid #4a5a70;
    display: flex;
    justify-content: center;
}

.btn-back-fdv {
    padding: 8px 24px;
    font-size: 12px;
    font-weight: 700;
    background: linear-gradient(180deg, #4a5a70 0%, #3a4a60 100%);
    border: 2px solid #5a6a80;
    border-radius: 6px;
    color: var(--text-bright);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-back-fdv:hover {
    background: linear-gradient(180deg, #5a6a80 0%, #4a5a70 100%);
    border-color: var(--accent-cyan);
}

/* ===== CARD DESTRUCTION ANIMATION ===== */
/* Explosion/evaporation effect when cards are permanently destroyed */

@keyframes card-destroy {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
    15% {
        transform: scale(1.15) rotate(-3deg);
        filter: brightness(1.5) saturate(1.5);
        box-shadow: 0 0 30px rgba(255, 100, 50, 0.8);
    }
    30% {
        transform: scale(1.1) rotate(2deg);
        filter: brightness(2) saturate(2);
        box-shadow: 0 0 50px rgba(255, 150, 50, 1), 0 0 80px rgba(255, 100, 0, 0.6);
    }
    50% {
        transform: scale(0.9) rotate(-1deg);
        opacity: 0.9;
        filter: brightness(2.5) saturate(0.5) blur(1px);
    }
    70% {
        transform: scale(0.6) rotate(5deg);
        opacity: 0.5;
        filter: brightness(3) saturate(0) blur(3px);
    }
    100% {
        transform: scale(0) rotate(15deg) translateY(-30px);
        opacity: 0;
        filter: brightness(4) saturate(0) blur(8px);
    }
}

.card-destroying {
    animation: card-destroy 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    z-index: 100;
    position: relative;
}

/* Fire glow overlay during destruction */
.card-destroying::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle at center, 
        rgba(255, 150, 50, 0.8) 0%, 
        rgba(255, 100, 0, 0.5) 30%, 
        rgba(255, 50, 0, 0.3) 60%, 
        transparent 100%);
    border-radius: 12px;
    animation: destroy-glow 0.6s ease-out forwards;
    pointer-events: none;
    z-index: -1;
}

@keyframes destroy-glow {
    0% { opacity: 0; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(2); }
}

/* Particle explosion animation */
@keyframes destruction-particle-fly {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dest-x), var(--dest-y)) rotate(var(--rotation)) scale(0);
        opacity: 0;
    }
}

/* Ember float up animation */
@keyframes destruction-ember-float {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--float-x), var(--float-y)) scale(0.3);
        opacity: 0;
    }
}

/* Destruction particles container styling */
.destruction-particles {
    transform: translate(-50%, -50%);
}

.destruction-particle {
    will-change: transform, opacity;
}

.destruction-ember {
    will-change: transform, opacity;
}

/* Screen flash effect on card destruction */
@keyframes destruction-flash {
    0% { opacity: 0; }
    10% { opacity: 0.3; }
    100% { opacity: 0; }
}

/* ===== OPTIONS MODAL ===== */
.options-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.options-modal {
    position: relative;
    background: linear-gradient(145deg, #1e1e35, #252545);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 24px 32px;
    min-width: 280px;
    max-width: 400px;
    max-height: 90%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.2), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Close button in top-left - inline with header */
.btn-close-modal {
    position: absolute;
    top: 22px;
    left: 12px;
    width: 28px;
    height: 28px;
    background: linear-gradient(145deg, #cc3333, #aa2222);
    border: 2px solid #ff4444;
    border-radius: 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(200, 50, 50, 0.5);
}

.btn-close-modal:hover {
    background: linear-gradient(145deg, #ee4444, #cc3333);
    border-color: #ff6666;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(255, 50, 50, 0.6);
}

.btn-close-modal:active {
    transform: scale(0.95);
}

.options-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 800;
    color: var(--gold);
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.options-section {
    margin-bottom: 20px;
}

.options-section h3 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.option-row label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--text-dim);
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 6px;
    background: var(--bg-dark);
    border-radius: 3px;
    cursor: pointer;
    /* CRITICAL: Enable touch dragging on iOS */
    touch-action: auto;
    -webkit-touch-callout: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--gold);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
    transition: transform 0.1s;
    /* Ensure thumb is touchable on iOS */
    touch-action: auto;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--gold);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.volume-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text);
    min-width: 40px;
    text-align: right;
}

.options-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.options-buttons .btn {
    padding: 10px 20px;
    font-size: 13px;
    min-width: 100px;
}

.btn-close-options {
    background: linear-gradient(145deg, #3a5a3a, #2a4a2a);
    border-color: #4a7a4a;
}

.btn-close-options:hover {
    background: linear-gradient(145deg, #4a6a4a, #3a5a3a);
    box-shadow: 0 0 10px rgba(100, 200, 100, 0.3);
}

.btn-abandon {
    background: linear-gradient(145deg, #5a3030, #4a2020);
    border-color: #7a4040;
}

.btn-abandon:hover {
    background: linear-gradient(145deg, #6a3a3a, #5a3030);
    box-shadow: 0 0 10px rgba(200, 100, 100, 0.3);
}

/* ===== LANGUAGE QUIZ ===== */
.quiz-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.quiz-modal {
    background: linear-gradient(145deg, var(--bg-panel), var(--bg-dark));
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 14px 20px;
    width: 420px;
    max-height: 380px;
    overflow-y: auto;
    box-shadow: 
        0 0 30px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(77, 195, 255, 0.2);
    animation: slideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideIn {
    from { 
        transform: scale(0.9) translateY(-20px); 
        opacity: 0; 
    }
    to { 
        transform: scale(1) translateY(0); 
        opacity: 1; 
    }
}

.quiz-modal.quiz-result.correct {
    border-color: var(--accent-green);
    box-shadow: 
        0 0 40px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(93, 222, 93, 0.4);
}

.quiz-modal.quiz-result.incorrect {
    border-color: var(--accent-red);
    box-shadow: 
        0 0 40px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(254, 95, 85, 0.4);
}

.quiz-header {
    text-align: center;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.quiz-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
}

.quiz-title.result-title.correct {
    color: var(--accent-green);
    text-shadow: var(--glow-green);
}

.quiz-title.result-title.incorrect {
    color: var(--accent-red);
    text-shadow: var(--glow-red);
}

.quiz-category {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: capitalize;
}

.quiz-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-prompt {
    font-size: 13px;
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 4px;
}

.quiz-swedish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.swedish-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-gold);
    text-shadow: 0 0 10px rgba(245, 200, 66, 0.3);
}

.btn-speak {
    background: linear-gradient(145deg, #3a3a5a, #2a2a4a);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-speak:hover {
    background: linear-gradient(145deg, #4a4a6a, #3a3a5a);
    box-shadow: var(--glow-blue);
    transform: scale(1.05);
}

.speak-icon {
    font-size: 16px;
}

/* Audio-only mode for word quizzes */
.quiz-listen-only {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.btn-speak-large {
    background: linear-gradient(145deg, #2a4a6a, #1a3a5a);
    border: 2px solid var(--swedish-gold);
    border-radius: 10px;
    padding: 12px 24px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.btn-speak-large:hover {
    background: linear-gradient(145deg, #3a5a7a, #2a4a6a);
    box-shadow: 0 0 16px rgba(254, 204, 2, 0.4);
    transform: scale(1.03);
}

.speak-icon-large {
    font-size: 24px;
}

.speak-text {
    font-size: 13px;
    color: var(--swedish-gold);
    font-weight: 600;
}

/* English to Target mode - display English word prominently */
.quiz-english-display {
    display: flex;
    justify-content: center;
    padding: 15px 10px;
}

.english-word-large {
    font-size: 26px;
    font-weight: bold;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 0.5px;
}

/* Hidden choices mode */
.hidden-choices-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
}

.hidden-choices-text {
    color: var(--text-dim);
    font-style: italic;
    font-size: 10px;
}

.btn-reveal {
    background: linear-gradient(145deg, #4a3a6a, #3a2a5a);
    border: 1px solid var(--accent-purple);
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-bright);
}

.btn-reveal:hover {
    background: linear-gradient(145deg, #5a4a7a, #4a3a6a);
    box-shadow: 0 0 12px rgba(170, 136, 255, 0.4);
    transform: scale(1.05);
}

.reveal-icon {
    font-size: 12px;
}

/* Option hint in settings */
.option-hint {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    padding: 0 5px 10px 5px;
    margin-top: -5px;
}

.quiz-hint {
    font-size: 11px;
    color: var(--accent-purple);
    text-align: center;
    font-style: italic;
}

.quiz-english {
    font-size: 14px;
    color: var(--text-dim);
    text-align: center;
}

.quiz-answers {
    margin-top: 8px;
}

/* Multiple Choice Styling */
.multiple-choice-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.btn-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(145deg, var(--bg-elevated), var(--bg-mid));
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: left;
}

.btn-option:hover {
    background: linear-gradient(145deg, #3a3a5a, #2a2a4a);
    border-color: var(--accent-cyan);
    box-shadow: var(--glow-cyan);
    transform: translateX(3px);
}

.option-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--bg-dark);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-cyan);
    border: 1px solid var(--border-light);
    flex-shrink: 0;
}

.option-text {
    font-size: 13px;
    color: var(--text);
}

/* Spelling Input Styling */
.spelling-input-container {
    display: flex;
    gap: 8px;
}

.spelling-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text);
    outline: none;
    transition: var(--transition-fast);
}

.spelling-input:focus {
    border-color: var(--accent-cyan);
    box-shadow: var(--glow-cyan);
}

.spelling-input::placeholder {
    color: var(--text-dim);
}

.btn-submit {
    padding: 10px 16px;
    background: linear-gradient(145deg, #2a5a4a, #1a4a3a);
    border: 1px solid #4a7a6a;
    border-radius: 6px;
    color: var(--text);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-submit:hover {
    background: linear-gradient(145deg, #3a6a5a, #2a5a4a);
    box-shadow: var(--glow-green);
}

/* Quiz Result Styling */
.quiz-answer-reveal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: 8px;
}

.correct-answer, .user-answer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.answer-label {
    font-size: 11px;
    color: var(--text-dim);
}

.answer-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-green);
}

.answer-value.wrong {
    color: var(--accent-red);
    text-decoration: line-through;
}

/* English translation for sentences */
.english-translation {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.answer-value.translation {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
    font-style: italic;
}

/* Flash green animation for correct answers */
.correct-answer.flash-green {
    animation: flashGreen 1.5s ease-out;
}

@keyframes flashGreen {
    0% {
        background-color: rgba(76, 175, 80, 0.6);
        transform: scale(1.1);
    }
    50% {
        background-color: rgba(76, 175, 80, 0.3);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

.correct-answer.flash-green .answer-value {
    animation: pulseGreen 1.5s ease-out;
}

@keyframes pulseGreen {
    0%, 50% {
        color: #81c784;
        text-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
    }
    100% {
        color: var(--accent-green);
        text-shadow: none;
    }
}

/* Result screen Swedish text styling */
.result-swedish {
    background: rgba(254, 204, 2, 0.1);
    border: 1px solid var(--swedish-gold);
    border-radius: 8px;
    padding: 10px 14px;
}

.quiz-effect {
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
}

.quiz-effect.correct {
    background: rgba(93, 222, 93, 0.15);
    border: 1px solid rgba(93, 222, 93, 0.3);
}

.quiz-effect.incorrect {
    background: rgba(254, 95, 85, 0.15);
    border: 1px solid rgba(254, 95, 85, 0.3);
}

.quiz-effect .bonus {
    color: var(--accent-green);
    text-shadow: var(--glow-green);
}

.quiz-effect .penalty {
    color: var(--accent-red);
    text-shadow: var(--glow-red);
}

/* Quiz modal continue button - compact version */
.quiz-modal .btn-continue {
    width: 100%;
    padding: 10px;
    background: linear-gradient(145deg, #3a4a6a, #2a3a5a);
    border: 1px solid #4a5a7a;
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.quiz-modal .btn-continue:hover {
    background: linear-gradient(145deg, #4a5a7a, #3a4a6a);
    box-shadow: var(--glow-blue);
}

/* ===== SELF ASSESSMENT (Anki-style) ===== */
.self-assessment-container {
    margin-top: 12px;
    text-align: center;
}

.self-assessment-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.self-assessment-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn-self-assess {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    border-radius: 8px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 70px;
    max-width: 100px;
}

.btn-self-assess .assess-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.btn-self-assess .assess-text {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-self-assess .assess-hint {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 2px;
    opacity: 0.8;
}

/* Easy button - green */
.btn-self-assess.btn-easy {
    background: linear-gradient(145deg, #1a4535, #0f2a20);
    border-color: #4dc3aa;
    color: #4dc3aa;
}

.btn-self-assess.btn-easy:hover {
    background: linear-gradient(145deg, #2a5545, #1a3a2a);
    box-shadow: 0 0 15px rgba(77, 195, 170, 0.4);
    transform: translateY(-2px);
}

.btn-self-assess.btn-easy:active {
    transform: translateY(0);
}

/* Normal button - blue/neutral */
.btn-self-assess.btn-normal {
    background: linear-gradient(145deg, #2a3a5a, #1a2a4a);
    border-color: #6b8fcc;
    color: #8ab4f8;
}

.btn-self-assess.btn-normal:hover {
    background: linear-gradient(145deg, #3a4a6a, #2a3a5a);
    box-shadow: 0 0 15px rgba(138, 180, 248, 0.3);
    transform: translateY(-2px);
}

.btn-self-assess.btn-normal:active {
    transform: translateY(0);
}

/* Hard button - red/orange */
.btn-self-assess.btn-hard {
    background: linear-gradient(145deg, #5a2a2a, #4a1a1a);
    border-color: #fe5f55;
    color: #ff8a80;
}

.btn-self-assess.btn-hard:hover {
    background: linear-gradient(145deg, #6a3a3a, #5a2a2a);
    box-shadow: 0 0 15px rgba(254, 95, 85, 0.4);
    transform: translateY(-2px);
}

.btn-self-assess.btn-hard:active {
    transform: translateY(0);
}

/* Mobile responsiveness for self-assessment */
@media (max-width: 480px) {
    .self-assessment-buttons {
        gap: 6px;
    }
    
    .btn-self-assess {
        padding: 8px 6px;
        min-width: 60px;
    }
    
    .btn-self-assess .assess-icon {
        font-size: 18px;
    }
    
    .btn-self-assess .assess-text {
        font-size: 10px;
    }
    
    .btn-self-assess .assess-hint {
        font-size: 8px;
    }
}

/* ===== SHOP QUIZ ===== */
.shop-quiz-overlay {
    z-index: 1500;
}

.shop-quiz-modal {
    border-color: var(--accent-yellow);
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.2),
        0 4px 20px rgba(0, 0, 0, 0.4);
}

.shop-quiz-item {
    color: var(--accent-yellow);
    font-weight: 600;
    padding: 4px 8px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 4px;
    margin-top: 4px;
}

.shop-quiz-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(254, 95, 85, 0.15);
    border: 1px solid rgba(254, 95, 85, 0.3);
    border-radius: 6px;
    font-size: 11px;
    color: var(--accent-red);
}

.shop-quiz-warning .warning-icon {
    font-size: 14px;
}

.shop-quiz-info {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    text-align: center;
}

.shop-quiz-penalty-info {
    font-size: 11px;
    color: var(--accent-yellow);
}

.btn-cancel-quiz {
    margin-top: 12px;
    background: rgba(254, 95, 85, 0.2);
    border-color: var(--accent-red);
    color: var(--accent-red);
    font-size: 11px;
    padding: 6px 12px;
}

.btn-cancel-quiz:hover {
    background: rgba(254, 95, 85, 0.4);
}

/* ===== OPTIONS MODAL EXTENDED ===== */
.options-modal-expanded {
    min-width: 400px;
    max-width: 450px;
}

/* ===== TABBED OPTIONS MODAL ===== */
.options-modal-tabbed {
    min-width: 380px;
    max-width: 420px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    max-height: 85%;
}

.options-modal-tabbed .options-title {
    margin-bottom: 15px;
    text-align: center;
}

.options-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 4px;
}

.options-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.options-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.options-tab-active {
    background: linear-gradient(145deg, #4a9eff, #2563eb);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.options-tab-active:hover {
    color: #fff;
}

.options-content-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
    min-height: 200px;
}

.options-tab-content {
    padding: 5px 0;
}

.options-tab-scrollable {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
}

.options-bottom-bar {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.options-bottom-bar .btn-close-options {
    min-width: 100px;
}

/* Tutorial button in game tab */
.btn-tutorial {
    padding: 8px 16px;
    background: linear-gradient(145deg, #4ade80, #22c55e);
    border: none;
    border-radius: 6px;
    color: #000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tutorial:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Danger row styling for abandon */
.option-row-danger {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 100, 100, 0.2);
}

.option-row-danger .btn-abandon {
    background: linear-gradient(145deg, #ef4444, #dc2626);
    border: none;
    color: #fff;
}

.option-row-danger .btn-abandon:hover {
    background: linear-gradient(145deg, #f87171, #ef4444);
}

.options-section h3 {
    font-size: 13px;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}

.option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.option-row label {
    font-size: 12px;
    color: var(--text);
}

.toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-cyan);
}

.toggle-label {
    font-size: 11px;
    color: var(--text-dim);
    min-width: 25px;
}

.scoring-speed-btn {
    padding: 6px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 70px;
    text-align: center;
}

.scoring-speed-btn:hover {
    background: var(--bg-card);
    border-color: var(--accent-cyan);
}

.scoring-speed-btn:active {
    transform: scale(0.95);
}

.select-container {
    flex: 1;
    max-width: 200px;
}

.difficulty-select {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    cursor: pointer;
    outline: none;
}

.difficulty-select:focus {
    border-color: var(--accent-cyan);
}

.difficulty-select option {
    background: var(--bg-dark);
    color: var(--text);
}

.quiz-stats-row {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background: var(--bg-elevated);
    border-radius: 8px;
    margin: 10px 0;
}

.stat-item {
    font-size: 11px;
    color: var(--text-dim);
}

.stat-item:nth-child(1) {
    color: var(--accent-gold);
}

.stat-item:nth-child(2) {
    color: var(--accent-cyan);
}

.stat-item:nth-child(3) {
    color: var(--accent-green);
}

.btn-reset-language {
    width: 100%;
    padding: 8px;
    background: linear-gradient(145deg, #4a2020, #3a1515);
    border: 1px solid #6a3030;
    border-radius: 6px;
    color: var(--accent-red);
    font-size: 11px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-reset-language:hover {
    background: linear-gradient(145deg, #5a2a2a, #4a2020);
    box-shadow: 0 0 10px rgba(200, 50, 50, 0.3);
}

/* Resume Music button - prominent styling for visibility */
.resume-music-row {
    margin-top: 8px;
}

.btn-resume-music {
    padding: 6px 12px;
    background: linear-gradient(145deg, #3b82f6, #2563eb);
    border: 1px solid #60a5fa;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.btn-resume-music:hover {
    background: linear-gradient(145deg, #60a5fa, #3b82f6);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
    transform: scale(1.02);
}

.btn-resume-music:active {
    transform: scale(0.98);
}

.btn-resume-music:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* ===== QUIZ MODAL - FIXED VIEWPORT STYLING ===== */
/* NOTE: No media queries for elements inside #app!
   The game viewport is always 932x430px and scales uniformly via CSS transform.
   All elements inside #app will be scaled proportionally on any device. */

/* Options modal for extra small screens - REMOVED */
/* These media queries were incorrectly changing in-game elements based on 
   actual viewport size instead of the fixed internal game resolution. */

/* The only remaining responsive adjustment is for .floating-tooltip which uses
   position: fixed (outside the scaled game area) and needs to fit the actual viewport */

/* Legacy placeholder to maintain file structure */
.options-section {
    margin-bottom: 10px;
    }
    
    .options-section h3 {
        font-size: 11px;
        margin-bottom: 6px;
        padding-bottom: 4px;
    }
    
    .option-row {
        margin-bottom: 8px;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .option-row label {
        font-size: 11px;
    }
    
    .volume-slider {
        width: 100px;
        height: 8px;
    }
    
    .volume-slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }
    
    .volume-display {
        font-size: 10px;
        min-width: 30px;
    }
    
    .options-buttons {
        margin-top: 10px;
        gap: 8px;
    }
    
    .options-buttons .btn {
        padding: 6px 12px;
        font-size: 11px;
        min-width: 70px;
    }
    
    .language-stats {
        padding: 6px 10px;
        margin: 6px 0;
    }
    
    .stat-item {
        font-size: 10px;
    }
    
    .btn-reset-language {
        padding: 6px;
        font-size: 10px;
    }
    
    /* Custom select for small screens */
    .custom-select {
        padding: 4px 8px;
        font-size: 11px;
        min-width: 100px;
    }
    
    /* Toggle for small screens */
    .toggle-switch {
        width: 36px;
        height: 18px;
    }
    
    .toggle-switch .toggle-slider:before {
        width: 14px;
        height: 14px;
    }
}

/* ===== CLOUD SYNC SECTION ===== */
.cloud-section {
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 8px;
    padding: 10px;
    background: rgba(78, 205, 196, 0.05);
}

.cloud-logged-in,
.cloud-logged-out {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cloud-username {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #4ecdc4;
    font-weight: 600;
}

.cloud-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cloud-input {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    color: #f5f5f5;
    outline: none;
    transition: border-color 0.2s;
}

.cloud-input:focus {
    border-color: #4ecdc4;
}

.cloud-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.cloud-buttons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.btn-cloud-login,
.btn-cloud-signup,
.btn-cloud-sync,
.btn-cloud-logout {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cloud-login,
.btn-cloud-sync {
    background: linear-gradient(135deg, #4ecdc4, #44a8a0);
    color: #1a1a2e;
    font-weight: 600;
}

.btn-cloud-login:hover,
.btn-cloud-sync:hover {
    background: linear-gradient(135deg, #5fd9d0, #4ecdc4);
    transform: translateY(-1px);
}

.btn-cloud-signup {
    background: rgba(255, 255, 255, 0.1);
    color: #f5f5f5;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-cloud-signup:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-cloud-logout {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.btn-cloud-logout:hover {
    background: rgba(255, 107, 107, 0.3);
}

.btn-cloud-login:disabled,
.btn-cloud-signup:disabled,
.btn-cloud-sync:disabled,
.btn-cloud-logout:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.cloud-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    min-height: 14px;
}

/* Responsive Deck Select */
@media (max-width: 768px) {
    .deck-select-screen {
        padding: 10px;
    }
    
    .deck-select-title {
        font-size: 14px;
    }
    
    .deck-select-main {
        flex-direction: column;
        gap: 12px;
    }
    
    .deck-grid-container {
        max-width: 100%;
    }
    
    .deck-options-new {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 10px;
    }
    
    .deck-card-new {
        padding: 8px 6px;
    }
    
    .deck-visual-new {
        width: 48px;
        height: 36px;
    }
    
    .deck-name-new {
        font-size: 9px;
    }
    
    .deck-info-panel {
        width: 100%;
        flex-direction: row;
        padding: 12px;
        gap: 15px;
    }
    
    .deck-info-empty {
        flex-direction: row;
        gap: 12px;
    }
    
    .deck-info-empty-icon {
        font-size: 32px;
    }
    
    .deck-info-header {
        flex-direction: row;
        border-bottom: none;
        border-right: 2px solid;
        padding-bottom: 0;
        padding-right: 15px;
        width: auto;
    }
    
    .deck-info-visual {
        width: 60px;
        height: 45px;
    }
    
    .deck-info-title {
        font-size: 14px;
    }
    
    .deck-info-desc {
        font-size: 11px;
        flex: 1;
    }
    
    .btn-select-deck {
        width: auto;
        padding: 10px 20px;
        margin-top: 0;
    }
    
    .stake-section-new {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    
    .stake-section-title {
        display: none;
    }
    
    .stake-options-new {
        flex: 0;
        flex-wrap: nowrap;
    }
    
    .stake-info-compact {
        flex: 1;
        text-align: left;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .deck-options-new {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .deck-info-panel {
        flex-direction: column;
    }
    
    .deck-info-header {
        flex-direction: column;
        border-right: none;
        border-bottom: 2px solid;
        padding-right: 0;
        padding-bottom: 10px;
    }
}

/* ==================== PACK OPEN RESPONSIVE STYLES ==================== */
/* Inherits shop-screen-balatro responsive styles, minimal overrides */

@media (max-width: 768px) {
    .pack-hand-card {
        width: 44px;
        height: 62px;
    }
    
    .pack-hand-card .card-rank {
        font-size: 12px;
    }
    
    .pack-hand-card .card-center {
        font-size: 18px;
    }
    
    .pack-title-box {
        padding: 10px 18px;
    }
    
    .pack-title-box .pack-title {
        font-size: 15px;
    }
    
    .pack-actions .btn-skip-pack {
        padding: 10px 20px;
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .pack-bottom-section {
        flex-direction: column;
        gap: 10px;
    }
}

/* ==================== AUDIO RECOVERY IN OPTIONS ==================== */
/* Styles for the Resume Music button in options modal when audio needs recovery */

.btn-resume-music {
    background: linear-gradient(145deg, #2a4a2a, #1a2e1a);
    border: 2px solid #4a9;
    color: #fff;
    padding: 8px 16px;
    font-size: 11px;
    transition: all 0.2s ease;
}

.btn-resume-music:hover,
.btn-resume-music:active {
    background: linear-gradient(145deg, #3a5a3a, #2a3e2a);
    border-color: #5ba;
}

/* When audio recovery is needed, make the button more prominent */
.btn-resume-music.needs-recovery {
    background: linear-gradient(145deg, #4a2a2a, #2e1a1a);
    border-color: #ff6b6b;
    animation: pulse-attention 2s ease-in-out infinite;
}

.btn-resume-music.needs-recovery:hover,
.btn-resume-music.needs-recovery:active {
    background: linear-gradient(145deg, #5a3a3a, #3e2a2a);
}

@keyframes pulse-attention {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 107, 107, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 107, 107, 0.6);
    }
}

.resume-music-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==================== CRT/RETRO EFFECTS - Balatro Signature Look ==================== */

/* Subtle CRT scanline overlay - creates retro monitor feel */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.015) 2px,
        rgba(0, 0, 0, 0.015) 4px
    );
    pointer-events: none;
    z-index: 9998;
}

/* Vignette overlay - darkened edges for dramatic focus */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 55%,
        rgba(0, 0, 0, 0.15) 75%,
        rgba(0, 0, 0, 0.35) 100%
    );
    pointer-events: none;
    z-index: 9997;
}

/* Screen flash effect for big moments */
.screen-flash {
    position: fixed;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    animation: screenFlash 0.3s ease-out;
}

@keyframes screenFlash {
    0% { opacity: 0.4; }
    100% { opacity: 0; }
}

/* Chromatic aberration effect for intense moments */
.chromatic-aberration {
    animation: chromaticShift 0.15s ease-out;
}

@keyframes chromaticShift {
    0% {
        text-shadow: -2px 0 #ff0000, 2px 0 #00ffff;
        filter: blur(0.3px);
    }
    50% {
        text-shadow: 2px 0 #ff0000, -2px 0 #00ffff;
        filter: blur(0.5px);
    }
    100% {
        text-shadow: none;
        filter: none;
    }
}

/* Victory confetti animation */
@keyframes confettiFall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) translateX(var(--wobble, 50px)) rotate(180deg);
    }
    50% {
        transform: translateY(50vh) translateX(calc(var(--wobble, 50px) * -0.5)) rotate(360deg);
    }
    75% {
        transform: translateY(75vh) translateX(calc(var(--wobble, 50px) * 0.7)) rotate(540deg);
    }
    100% {
        transform: translateY(110vh) translateX(0) rotate(720deg);
        opacity: 0;
    }
}

/* ===== TUTORIAL SYSTEM ===== */

/* Welcome Popup Overlay */
.tutorial-welcome-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tutorial-welcome-overlay.show {
    opacity: 1;
}

.tutorial-welcome-popup {
    background: linear-gradient(145deg, #1e2a4a, #0d1525);
    border: 3px solid #ffd700;
    border-radius: 16px;
    padding: 30px 40px;
    text-align: center;
    max-width: 420px;
    box-shadow: 
        0 0 40px rgba(255, 215, 0, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: welcomePopIn 0.4s ease-out;
}

@keyframes welcomePopIn {
    0% {
        transform: scale(0.8) translateY(20px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.welcome-icon {
    font-size: 4rem;
    margin-bottom: 15px;
    animation: welcomeIconBounce 2s ease-in-out infinite;
}

@keyframes welcomeIconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.welcome-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffd700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.welcome-text {
    font-size: 1rem;
    color: #e0e0e0;
    line-height: 1.6;
    margin-bottom: 25px;
}

.welcome-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 15px;
}

.btn-tutorial-yes {
    background: linear-gradient(145deg, #4ade80, #22c55e);
    color: #000;
    font-weight: 700;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.btn-tutorial-yes:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.btn-tutorial-no {
    background: linear-gradient(145deg, #475569, #334155);
    color: #e0e0e0;
    font-weight: 600;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tutorial-no:hover {
    background: linear-gradient(145deg, #64748b, #475569);
    transform: translateY(-2px);
}

.welcome-note {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
}

/* Tutorial Overlay */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    pointer-events: auto;
}

/* Interactive mode - allows clicks through to game elements */
.tutorial-overlay.tutorial-interactive {
    pointer-events: none;
    background: transparent;
}

.tutorial-overlay.tutorial-interactive .tutorial-dialog {
    pointer-events: auto;
}

.tutorial-overlay.tutorial-interactive .tutorial-spotlight {
    pointer-events: none;
}

/* Tutorial Dialog */
.tutorial-dialog {
    position: fixed;
    background: linear-gradient(145deg, #1e2a4a, #0d1525);
    border: 2px solid #4a9eff;
    border-radius: 12px;
    padding: 16px 20px;
    max-width: 320px;
    min-width: 260px;
    box-shadow: 
        0 0 30px rgba(74, 158, 255, 0.3),
        0 10px 40px rgba(0, 0, 0, 0.5);
    animation: tutorialSlideIn 0.3s ease-out;
    z-index: 100001;
    pointer-events: auto;
}

.tutorial-dialog.tutorial-center {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
}

@keyframes tutorialSlideIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.tutorial-dialog.tutorial-center {
    animation: tutorialCenterIn 0.3s ease-out;
}

@keyframes tutorialCenterIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(74, 158, 255, 0.3);
}

.tutorial-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4a9eff;
    margin: 0;
}

.tutorial-progress {
    font-size: 0.75rem;
    color: #888;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 8px;
    border-radius: 10px;
}

.tutorial-content {
    color: #e0e0e0;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.tutorial-content p {
    margin-bottom: 10px;
}

.tutorial-content p:last-child {
    margin-bottom: 0;
}

.tutorial-content strong {
    color: #ffd700;
}

.tutorial-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.tutorial-content li {
    margin-bottom: 5px;
}

.tutorial-hands {
    font-size: 0.8rem;
    margin: 10px 0;
}

.tutorial-hands li {
    margin-bottom: 3px;
}

.tutorial-example {
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid #ffd700;
    padding: 8px 12px;
    margin-top: 10px;
    font-size: 0.85rem;
    border-radius: 0 6px 6px 0;
}

.tutorial-shop-list {
    list-style: none;
    padding-left: 0;
}

.tutorial-shop-list li {
    padding: 5px 0;
}

.tutorial-tip {
    background: rgba(74, 158, 255, 0.1);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85rem;
    margin-top: 10px;
}

.tutorial-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tutorial-next-btn {
    flex: 1;
    background: linear-gradient(145deg, #4a9eff, #2563eb);
    color: #fff;
    font-weight: 700;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.tutorial-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.tutorial-skip-btn {
    background: transparent;
    color: #888;
    font-size: 0.8rem;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tutorial-skip-btn:hover {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.3);
}

/* Tutorial Spotlight Highlight */
.tutorial-spotlight {
    position: fixed;
    border: 3px solid #ffd700;
    border-radius: 8px;
    box-shadow: 
        0 0 0 9999px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(255, 215, 0, 0.5),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
    pointer-events: none;
    z-index: 100000;
    animation: spotlightPulse 2s ease-in-out infinite;
}

/* No spotlight dimming in interactive mode */
.tutorial-interactive .tutorial-spotlight {
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.5),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
}

@keyframes spotlightPulse {
    0%, 100% {
        box-shadow: 
            0 0 0 9999px rgba(0, 0, 0, 0.7),
            0 0 20px rgba(255, 215, 0, 0.5),
            inset 0 0 20px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow: 
            0 0 0 9999px rgba(0, 0, 0, 0.7),
            0 0 35px rgba(255, 215, 0, 0.7),
            inset 0 0 30px rgba(255, 215, 0, 0.2);
    }
}

/* Action required indicator */
.tutorial-action-hint {
    background: rgba(255, 215, 0, 0.15);
    border-left: 3px solid #ffd700;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    color: #ffd700;
}

/* Arrow indicators for tutorial */
.tutorial-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
}

.tutorial-arrow-left {
    border-right-color: #4a9eff;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.tutorial-arrow-right {
    border-left-color: #4a9eff;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.tutorial-arrow-top {
    border-bottom-color: #4a9eff;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.tutorial-arrow-bottom {
    border-top-color: #4a9eff;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}