/* 1010TRO - Main Styles */
/* CRT-inspired dark theme with pixel art aesthetics */

/* Pixel Art Font Import */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
    /* Core Colors */
    --bg-dark: #0a0a0f;
    --bg-medium: #12121a;
    --bg-light: #1a1a25;
    --bg-card: #1e1e2a;
    
    /* Blue Palette */
    --blue-dark: #1a3a5c;
    --blue-medium: #2563eb;
    --blue-light: #3b82f6;
    --blue-glow: #60a5fa;
    --blue-pale: #93c5fd;
    
    /* Accent Colors */
    --cyan: #22d3ee;
    --teal: #14b8a6;
    --purple: #8b5cf6;
    --red: #ef4444;
    --orange: #f97316;
    --yellow: #fbbf24;
    --gold: #ffd700;
    --green: #22c55e;
    --pink: #ec4899;
    
    /* Card Suit Colors */
    --hearts: #dc2626;
    --diamonds: #3b82f6;
    --clubs: #22c55e;
    --spades: #8b5cf6;
    
    /* Text Colors */
    --text-bright: #e2e8f0;
    --text-medium: #94a3b8;
    --text-dim: #64748b;
    
    /* UI */
    --border-color: #2d3748;
    --border-glow: rgba(59, 130, 246, 0.5);
    --pixel-border: 3px;
    
    /* Typography - Pixel Art */
    --font-pixel: 'Press Start 2P', cursive;
    --font-retro: 'VT323', monospace;
    --font-mono: 'Courier New', Courier, monospace;
    
    /* Dynamic Spacing - scales with viewport */
    --base-unit: min(1vh, 1vw);
    --gap-xs: clamp(2px, 0.5vh, 6px);
    --gap-sm: clamp(4px, 1vh, 12px);
    --gap-md: clamp(8px, 1.5vh, 20px);
    --gap-lg: clamp(12px, 2vh, 28px);
    --gap-xl: clamp(16px, 3vh, 40px);
    
    /* Grid cell size - fits in CRT monitor */
    --cell-size: clamp(24px, 4.5vh, 48px);
    --grid-gap: clamp(1px, 0.15vh, 2px);
    --grid-size: calc(var(--cell-size) * 10 + var(--grid-gap) * 9);

    /* Card dimensions - poker proportions */
    --card-width: clamp(50px, 5vw, 80px);
    --card-height: calc(var(--card-width) * 1.4);

    /* Piece slot card dimensions - Bigger, more prominent */
    --piece-card-width: clamp(75px, 9vw, 120px);
    --piece-card-height: calc(var(--piece-card-width) * 1.4);
    
    /* Animation */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.4s ease;
    
    /* 2.5D Perspective */
    --perspective: 1200px;
    --card-tilt: 8deg;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-retro);
    background: #000;
    color: var(--text-bright);
    line-height: 1.4;
    font-size: clamp(16px, 2.5vh, 28px);
}

/* ==================== CUSTOM SCROLLBARS ==================== */
/* Retro pixel-art styled scrollbars */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border: 1px solid #1a1a25;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2a3a5a 0%, #1a2a4a 50%, #152035 100%);
    border: 1px solid #3a5a8a;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3a4a6a 0%, #2a3a5a 50%, #1a2a4a 100%);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
}

::-webkit-scrollbar-corner {
    background: var(--bg-dark);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #2a3a5a var(--bg-dark);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-lg { gap: var(--gap-lg); }

/* Pixel Art Border Effect */
.pixel-border {
    position: relative;
    background: var(--bg-medium);
    border: none;
    box-shadow: 
        inset -4px -4px 0 0 #0a0a0f,
        inset 4px 4px 0 0 #2a2a3a,
        0 0 0 var(--pixel-border) var(--border-color),
        4px 4px 0 0 rgba(0, 0, 0, 0.5);
}

.pixel-border-blue {
    box-shadow: 
        inset -4px -4px 0 0 #1a2a4f,
        inset 4px 4px 0 0 #3b5a8f,
        0 0 0 var(--pixel-border) var(--blue-medium),
        4px 4px 0 0 rgba(0, 0, 0, 0.5),
        0 0 20px rgba(59, 130, 246, 0.3);
}

/* Buttons - Pixel Art Style */
.crt-button {
    font-family: var(--font-pixel);
    font-size: clamp(8px, 1.1vh, 12px);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: clamp(10px, 1.5vh, 18px) clamp(16px, 2.5vh, 32px);
    border: none;
    background: var(--bg-medium);
    color: var(--blue-light);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    box-shadow: 
        inset -3px -3px 0 0 #0a0a0f,
        inset 3px 3px 0 0 #2a2a3a,
        0 0 0 3px var(--blue-dark),
        5px 5px 0 0 rgba(0, 0, 0, 0.4);
}

.crt-button:hover {
    background: var(--blue-dark);
    color: var(--text-bright);
    transform: translate(-2px, -2px);
    box-shadow: 
        inset -3px -3px 0 0 #1a2a4f,
        inset 3px 3px 0 0 #3b5a8f,
        0 0 0 3px var(--blue-medium),
        7px 7px 0 0 rgba(0, 0, 0, 0.4),
        0 0 30px rgba(59, 130, 246, 0.4);
}

.crt-button:active {
    transform: translate(2px, 2px);
    box-shadow: 
        inset -3px -3px 0 0 #0a0a0f,
        inset 3px 3px 0 0 #2a2a3a,
        0 0 0 3px var(--blue-dark),
        2px 2px 0 0 rgba(0, 0, 0, 0.4);
}

.crt-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--text-dim);
}

.crt-button:disabled:hover {
    background: var(--bg-medium);
    transform: none;
    box-shadow: 
        inset -3px -3px 0 0 #0a0a0f,
        inset 3px 3px 0 0 #2a2a3a,
        0 0 0 3px var(--blue-dark),
        5px 5px 0 0 rgba(0, 0, 0, 0.4);
}

.crt-button.primary {
    background: var(--blue-medium);
    color: var(--text-bright);
    box-shadow: 
        inset -3px -3px 0 0 #1a3a6f,
        inset 3px 3px 0 0 #4b82ff,
        0 0 0 3px var(--blue-light),
        5px 5px 0 0 rgba(0, 0, 0, 0.4);
}

.crt-button.primary:hover {
    background: var(--blue-light);
    box-shadow: 
        inset -3px -3px 0 0 #2a4a8f,
        inset 3px 3px 0 0 #6ba2ff,
        0 0 0 3px var(--blue-glow),
        7px 7px 0 0 rgba(0, 0, 0, 0.4),
        0 0 40px rgba(59, 130, 246, 0.5);
}

.crt-button.danger {
    color: var(--red);
    box-shadow: 
        inset -3px -3px 0 0 #0a0a0f,
        inset 3px 3px 0 0 #2a2a3a,
        0 0 0 3px #7f1d1d,
        5px 5px 0 0 rgba(0, 0, 0, 0.4);
}

.crt-button.gold {
    color: var(--gold);
    background: linear-gradient(180deg, #3d2f00 0%, #1a1400 100%);
    box-shadow: 
        inset -3px -3px 0 0 #1a1400,
        inset 3px 3px 0 0 #5d4f00,
        0 0 0 3px #8B4513,
        5px 5px 0 0 rgba(0, 0, 0, 0.4);
}

.crt-button.gold:hover {
    background: linear-gradient(180deg, #5d4f00 0%, #2a2400 100%);
    box-shadow: 
        inset -3px -3px 0 0 #2a2400,
        inset 3px 3px 0 0 #7d6f00,
        0 0 0 3px var(--gold),
        7px 7px 0 0 rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 215, 0, 0.4);
}

/* Section Headers - Balatro Style */
.section-header {
    font-family: var(--font-pixel);
    font-size: clamp(7px, 0.9vh, 10px);
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-dim);
    padding-bottom: var(--gap-xs);
    border-bottom: none;
    margin-bottom: var(--gap-sm);
}

/* Keyboard Key Styling - Looks like physical keyboard keys */
kbd, .kbd-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(24px, 3vh, 36px);
    height: clamp(24px, 3vh, 36px);
    padding: 0 clamp(6px, 0.8vh, 12px);
    font-family: var(--font-pixel);
    font-size: clamp(8px, 1vh, 12px);
    text-transform: uppercase;
    /* White/light keyboard key appearance */
    background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 40%, #d0d0d0 100%);
    color: #1a1a1a;
    margin: 0 3px;
    border-radius: 4px;
    /* Physical key appearance */
    box-shadow:
        /* Top highlight */
        inset 0 1px 0 0 rgba(255, 255, 255, 0.8),
        /* Inner shadow for depth */
        inset 0 -2px 0 0 #b0b0b0,
        /* Key sides */
        0 3px 0 0 #888888,
        /* Outer shadow */
        0 4px 6px rgba(0, 0, 0, 0.4);
    position: relative;
    transition: all 0.1s ease;
}

kbd:hover, .kbd-key:hover {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 0 #a0a0a0,
        0 2px 0 0 #888888,
        0 3px 4px rgba(0, 0, 0, 0.4);
}

kbd:active, .kbd-key:active, .kbd-key.pressed {
    transform: translateY(3px);
    background: linear-gradient(180deg, #e0e0e0 0%, #c8c8c8 100%);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
        inset 0 0px 0 0 #a0a0a0,
        0 0px 0 0 #888888,
        0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Wide keys like Space */
kbd.wide, .kbd-key.wide {
    min-width: clamp(60px, 8vh, 100px);
    padding: 0 clamp(10px, 1.2vh, 20px);
}

/* Key with icon */
.kbd-key.with-icon {
    gap: var(--gap-xs);
}

.kbd-key .key-icon {
    font-size: 1.2em;
}

/* Highlighted/active key - blue tint */
.kbd-key.highlight {
    background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 40%, #3b82f6 100%);
    color: #1e3a8a;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 0 #2563eb,
        0 3px 0 0 #1d4ed8,
        0 4px 6px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(59, 130, 246, 0.5);
}


/* Selection */
::selection {
    background: var(--blue-medium);
    color: var(--text-bright);
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 5px var(--blue-glow);
        filter: brightness(1);
    }
    50% { 
        box-shadow: 0 0 25px var(--blue-glow), 0 0 40px var(--blue-medium);
        filter: brightness(1.2);
    }
}

@keyframes rainbow-glow {
    0% { filter: hue-rotate(0deg) brightness(1.2); }
    100% { filter: hue-rotate(360deg) brightness(1.2); }
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes jackpot {
    0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
    25% { transform: scale(1.2) rotate(-5deg); filter: brightness(1.5); }
    50% { transform: scale(1.1) rotate(5deg); filter: brightness(2); }
    75% { transform: scale(1.3) rotate(-3deg); filter: brightness(1.5); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes coin-spin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes card-deal {
    0% { 
        transform: translateY(-200%) rotateX(90deg) scale(0.5);
        opacity: 0;
    }
    60% { 
        transform: translateY(10%) rotateX(-10deg) scale(1.05);
        opacity: 1;
    }
    100% { 
        transform: translateY(0) rotateX(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes score-pop {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    20% { transform: translateY(-20px) scale(1.5); opacity: 1; }
    100% { transform: translateY(-60px) scale(0.8); opacity: 0; }
}

@keyframes chip-cascade {
    0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes combo-burst {
    0% { transform: scale(0.5); opacity: 1; }
    50% { transform: scale(2); opacity: 0.8; }
    100% { transform: scale(3); opacity: 0; }
}

@keyframes streak-fire {
    0%, 100% { filter: brightness(1) hue-rotate(0deg); }
    50% { filter: brightness(1.5) hue-rotate(20deg); }
}

.animate-pulse { animation: pulse 2s infinite; }
.animate-glow { animation: glow 2s infinite; }
.animate-shake { animation: shake 0.3s ease; }
.animate-pop { animation: pop 0.2s ease; }
.animate-jackpot { animation: jackpot 0.8s ease; }
.animate-deal { animation: card-deal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Gold/Jackpot text */
.text-gold {
    color: var(--gold);
    text-shadow: 
        0 0 10px var(--gold),
        0 0 20px var(--orange),
        2px 2px 0 #8B4513;
}

/* Score multiplier display */
.mult-display {
    font-family: var(--font-pixel);
    color: var(--red);
    text-shadow: 2px 2px 0 #000, 0 0 10px var(--red);
}

/* Chip/money display */
.chip-display {
    font-family: var(--font-pixel);
    color: var(--gold);
    text-shadow: 2px 2px 0 #8B4513, 0 0 10px var(--yellow);
}