/* UI styles with dynamic scaling via CSS variable */
:root {
    --ui-scale: 1.0; /* Set by JavaScript (Config.UI_SCALE) */
}

/* Full-width XP bar at top (like Vampire Survivors) - TINY VERSION */
#ui {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(22px * var(--ui-scale)); /* 60% of 36px */
    z-index: 100;
}

/* XP Progress Bar Background */
#xp-bar-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(10, 0, 30, 0.5);
    border-bottom: calc(1px * var(--ui-scale)) solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 calc(15px * var(--ui-scale)) rgba(0, 0, 0, 0.5);
}

/* XP Progress Bar Fill */
#xp-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(0, 255, 255, 0.25) 0%,
        rgba(0, 255, 255, 0.45) 50%,
        rgba(0, 255, 255, 0.25) 100%
    );
    border-right: calc(2px * var(--ui-scale)) solid #00ffff;
    box-shadow: 
        0 0 calc(15px * var(--ui-scale)) rgba(0, 255, 255, 0.6),
        inset 0 0 calc(20px * var(--ui-scale)) rgba(0, 255, 255, 0.2);
    transition: width 0.3s ease-out;
}

/* Stats overlay on XP bar */
#ui-stats {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(12px * var(--ui-scale));
    font-family: monospace;
    font-size: calc(8px * var(--ui-scale)); /* Tiny font */
    color: #ffffff;
    text-shadow: 
        0 0 calc(6px * var(--ui-scale)) #00ffff,
        0 calc(1px * var(--ui-scale)) calc(3px * var(--ui-scale)) rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

#ui-left, #ui-center, #ui-right {
    display: flex;
    gap: calc(12px * var(--ui-scale)); /* Tiny gaps */
    align-items: center;
}

.ui-stat {
    display: flex;
    align-items: center;
    gap: calc(4px * var(--ui-scale)); /* Tiny gap */
}

.ui-stat-label {
    color: #00ffff;
    font-weight: bold;
}

.ui-stat-value {
    color: #ffffff;
    font-size: calc(10px * var(--ui-scale)); /* Tiny value text */
}

/* CARD FLIP SYSTEM - 100% z demo */
#levelup {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    /* Card container properties */
    width: calc(550px * var(--ui-scale));
    height: calc(600px * var(--ui-scale)); /* Fixed height */
    perspective: calc(1500px * var(--ui-scale));
    cursor: default;
}

.levelup-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: opacity 0.3s ease-in;
}

/* Animacja ROLL - spin 360° */
.levelup-card.flipped {
    animation: spin360 1.2s ease-in-out;
}

@keyframes spin360 {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* Front i Back faces */
.card-face {
    position: absolute;
    width: 100%;
    height: 100%; /* Use full container height */
    backface-visibility: hidden;
    border-radius: calc(15px * var(--ui-scale));
    padding: calc(30px * var(--ui-scale));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

/* FRONT - Cyan theme (upgrade list) */
.card-front {
    background: rgba(10, 0, 21, 0.95);
    border: calc(3px * var(--ui-scale)) solid #00ffff;
    box-shadow: 0 0 calc(30px * var(--ui-scale)) #00ffff;
    color: #00ffff;
}

/* BACK - Cyberpunk card back pattern (100% z demo) */
.card-back {
    transform: rotateY(180deg);
    border: calc(3px * var(--ui-scale)) solid #ff00ff;
    box-shadow: 0 0 calc(30px * var(--ui-scale)) #ff00ff;
    
    /* CYBERPUNK CARD BACK PATTERN */
    background: 
        /* Central X pattern */
        linear-gradient(45deg, transparent 48%, rgba(255, 0, 255, 0.3) 49%, rgba(255, 0, 255, 0.3) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(0, 255, 255, 0.3) 49%, rgba(0, 255, 255, 0.3) 51%, transparent 52%),
        /* Animated gradient wave */
        linear-gradient(135deg, 
            rgba(255, 0, 255, 0.3) 0%, 
            rgba(0, 255, 255, 0.3) 25%,
            rgba(255, 0, 255, 0.3) 50%,
            rgba(0, 255, 255, 0.3) 75%,
            rgba(255, 0, 255, 0.3) 100%
        ),
        /* Vertical grid lines */
        repeating-linear-gradient(
            90deg,
            rgba(255, 0, 255, 0.15) 0px,
            transparent 2px,
            transparent 20px
        ),
        /* Horizontal grid lines */
        repeating-linear-gradient(
            0deg,
            rgba(0, 255, 255, 0.15) 0px,
            transparent 2px,
            transparent 20px
        ),
        /* Base dark purple */
        radial-gradient(circle at center, rgba(60, 0, 100, 0.95), rgba(20, 0, 40, 0.98));
        
    background-size: 100% 100%, 100% 100%, 400% 400%, 20px 100%, 100% 20px, 100% 100%;
    animation: cyberpunkPulse 4s ease infinite;
}

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

/* Container na upgrade options */
#upgrades {
    display: flex;
    flex-direction: column;
    gap: calc(15px * var(--ui-scale));
    width: 100%;
}

.upgrade {
    background: rgba(10, 0, 32, 0.6);  /* Dark cyberpunk bg */
    padding: calc(20px * var(--ui-scale));
    border-radius: calc(8px * var(--ui-scale));
    border: calc(2px * var(--ui-scale)) solid #00ffff;  /* Cyan border */
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
    font-family: monospace;
    font-size: calc(16px * var(--ui-scale));
}

.upgrade:hover {
    background: rgba(26, 0, 48, 0.8);  /* Lighter on hover */
    transform: scale(1.05);
    border-color: #ff00ff;  /* Magenta on hover */
    box-shadow: 0 0 calc(15px * var(--ui-scale)) #ff00ff;  /* Magenta glow */
}

.upgrade.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    border-color: rgba(0, 255, 255, 0.3);
}

.upgrade strong {
    color: #00ffff;  /* Cyan for upgrade names */
    font-size: calc(18px * var(--ui-scale));
    display: block;
    margin-bottom: calc(5px * var(--ui-scale));
    text-shadow: 0 0 calc(5px * var(--ui-scale)) #00ffff;
}

/* Skip/Roll action buttons */
.upgrade-actions {
    display: flex;
    gap: calc(10px * var(--ui-scale));
    margin-top: calc(20px * var(--ui-scale));
    justify-content: center;
}

.action-btn {
    flex: 1;
    padding: calc(15px * var(--ui-scale)) calc(20px * var(--ui-scale));
    font-family: monospace;
    font-size: calc(16px * var(--ui-scale));
    font-weight: bold;
    border: calc(2px * var(--ui-scale)) solid;
    border-radius: calc(6px * var(--ui-scale));
    cursor: pointer;
    transition: all 0.2s ease, opacity 0.3s ease;
    background: rgba(10, 0, 32, 0.6);
    color: #fff;
}

.skip-btn {
    border-color: #ff00ff;  /* Magenta */
    color: #ff00ff;
    text-shadow: 0 0 calc(5px * var(--ui-scale)) #ff00ff;
}

.skip-btn:hover:not(:disabled) {
    background: rgba(255, 0, 255, 0.3);
    transform: scale(1.05);
    border-color: #ff0099;  /* Pink */
    box-shadow: 0 0 calc(15px * var(--ui-scale)) #ff00ff;
}

.roll-btn {
    border-color: #00ffff;  /* Cyan */
    color: #00ffff;
    text-shadow: 0 0 calc(5px * var(--ui-scale)) #00ffff;
}

.roll-btn:hover:not(:disabled) {
    background: rgba(0, 255, 255, 0.3);
    transform: scale(1.05);
    border-color: #00ff00;  /* Green */
    box-shadow: 0 0 calc(15px * var(--ui-scale)) #00ffff;
}

.action-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #666;
    color: #666;
}

.action-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0.3);
}