/**
 * Shop UI Styles
 */

/* Shop Container - extends menu-container for wider content */
.shop-container {
    max-width: 900px;
}

/* Shop Balance Box */
.shop-balance-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #5a5a2a 0%, #4a4a1a 100%);
    padding: 12px 20px;
    border: 3px solid #ffd700;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
}

.shop-balance-box .shop-balance-label {
    color: #ccc;
    font-size: 11px;
    font-family: var(--retro-font);
}

.shop-balance-box .shop-balance-amount {
    color: #ffd700;
    font-size: 18px;
    font-family: var(--retro-font);
}

/* Gold Tile icon in buy buttons */
.gold-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: #1a1a1a;
    font-size: 10px;
    font-weight: bold;
    font-family: var(--retro-font);
    margin-right: 4px;
    border: 2px solid #cc8800;
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}

/* Character Tabs */
.shop-char-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.shop-char-tab {
    padding: 10px 16px;
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    border: 2px solid #4a4a4a;
    color: #888;
    cursor: pointer;
    font-size: 11px;
    font-family: var(--retro-font);
    transition: all 0.1s;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}

.shop-char-tab:hover {
    border-color: #6a6a6a;
    color: #fff;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

.shop-char-tab:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

/* Character-specific active tab colors */
.shop-char-tab.active[data-character="hero"] {
    background: linear-gradient(135deg, #2a4a4a 0%, #1a3a3a 100%);
    border-color: #4ecdc4;
    color: #4ecdc4;
    box-shadow: 2px 2px 0px rgba(78, 205, 196, 0.3);
}

.shop-char-tab.active[data-character="ranger"] {
    background: linear-gradient(135deg, #2a4a2a 0%, #1a3a1a 100%);
    border-color: #6aaa64;
    color: #6aaa64;
    box-shadow: 2px 2px 0px rgba(106, 170, 100, 0.3);
}

.shop-char-tab.active[data-character="knight"] {
    background: linear-gradient(135deg, #4a2a2a 0%, #3a1a1a 100%);
    border-color: #cc4444;
    color: #cc4444;
    box-shadow: 2px 2px 0px rgba(204, 68, 68, 0.3);
}

.shop-char-tab.active[data-character="mage"] {
    background: linear-gradient(135deg, #3a2a4a 0%, #2a1a3a 100%);
    border-color: #a335ee;
    color: #a335ee;
    box-shadow: 2px 2px 0px rgba(163, 53, 238, 0.3);
}

.shop-char-tab.active[data-character="champion"] {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    border-color: #ffffff;
    color: #ffffff;
    box-shadow: 2px 2px 0px rgba(255, 255, 255, 0.3);
}

/* Skins Grid */
.shop-skins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    width: 100%;
}

/* Skin Card */
.shop-skin-card {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    border: 2px solid #333;
    padding: 20px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: all 0.1s;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

.shop-skin-card:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
}

/* Rarity borders */
.shop-skin-card[data-rarity="common"] {
    border-color: #9d9d9d;
}

.shop-skin-card[data-rarity="rare"] {
    border-color: #0070dd;
}

.shop-skin-card[data-rarity="epic"] {
    border-color: #a335ee;
}

.shop-skin-card[data-rarity="legendary"] {
    border-color: #ff8000;
}

.shop-skin-card[data-rarity="mythical"] {
    border-color: #ff2020;
    box-shadow: 0 0 20px rgba(255, 32, 32, 0.3);
}

/* Equipped card */
.shop-skin-card.equipped {
    border-color: #4ecdc4;
    background: linear-gradient(135deg, #1a3a3a, #1a2a2a);
}

/* Locked card */
.shop-skin-card.achievement-locked,
.shop-skin-card.locked {
    opacity: 0.6;
}

.shop-skin-card.too-expensive {
    opacity: 0.7;
}

/* Skin Preview */
.shop-skin-card .skin-preview-container {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3a3a3a;
    box-shadow: inset 0 0 25px 8px rgba(0, 0, 0, 0.5);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Rarity-colored preview borders */
.shop-skin-card[data-rarity="common"] .skin-preview-container {
    border-color: #9d9d9d;
}

.shop-skin-card[data-rarity="rare"] .skin-preview-container {
    border-color: #0070dd;
}

.shop-skin-card[data-rarity="epic"] .skin-preview-container {
    border-color: #a335ee;
}

.shop-skin-card[data-rarity="legendary"] .skin-preview-container {
    border-color: #ff8000;
}

.shop-skin-card[data-rarity="mythical"] .skin-preview-container {
    border-color: #ff2020;
}

/* Mythical skin floating particles in shop - base animation */
@keyframes mythical-particles-shop {
    0%, 100% {
        opacity: 0.6;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-6px);
    }
}

/* Galaxy Hero (Cosmic Phantom) - Purple/Blue nebula with gold stars */
.shop-skin-card .skin-preview[data-skin="galaxy_hero"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(155, 89, 182, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(241, 196, 15, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, rgba(52, 152, 219, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 60%, rgba(241, 196, 15, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 80%, rgba(155, 89, 182, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.95) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 30% 50%, rgba(52, 152, 219, 0.85) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65% 85%, rgba(241, 196, 15, 0.85) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Phantom Ranger (Wisp Stalker) - Ethereal white/ghost blue wisps */
.shop-skin-card .skin-preview[data-skin="phantom_ranger"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(208, 232, 240, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(255, 255, 255, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, rgba(168, 200, 216, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 60%, rgba(208, 232, 240, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 80%, rgba(74, 96, 128, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.95) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 30% 50%, rgba(168, 200, 216, 0.85) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65% 85%, rgba(208, 232, 240, 0.85) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Coral Knight (Reef Guardian) - Coral pink/sea teal bubbles */
.shop-skin-card .skin-preview[data-skin="coral_knight"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 154, 138, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(64, 176, 160, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, rgba(45, 138, 138, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 60%, rgba(255, 154, 138, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 80%, rgba(64, 176, 160, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.95) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 30% 50%, rgba(255, 154, 138, 0.85) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65% 85%, rgba(64, 176, 160, 0.85) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Void Mage (Eldritch Weaver) - Deep purple void with pink energy */
.shop-skin-card .skin-preview[data-skin="void_mage"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 0, 102, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(51, 0, 102, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, rgba(255, 0, 102, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 60%, rgba(26, 0, 51, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 80%, rgba(255, 0, 102, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 100, 180, 0.95) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 30% 50%, rgba(51, 0, 102, 0.85) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65% 85%, rgba(255, 0, 102, 0.85) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Rainbow Champion (Prismatic) - Rainbow spectrum particles */
.shop-skin-card .skin-preview[data-skin="rainbow_champion"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 15% 25%, rgba(255, 0, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 35% 15%, rgba(255, 165, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 55% 30%, rgba(255, 255, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(0, 255, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 25% 70%, rgba(0, 136, 255, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 65%, rgba(75, 0, 130, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 45% 80%, rgba(238, 130, 238, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65% 85%, rgba(255, 0, 0, 0.85) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Eternal Hero - Warm white glow with purple and gold */
.shop-skin-card .skin-preview[data-skin="eternal_hero"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 25%, rgba(255, 215, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 80% 20%, rgba(255, 228, 181, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 50% 50%, rgba(147, 112, 219, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 30% 75%, rgba(255, 215, 0, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 70% 80%, rgba(255, 228, 181, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 15% 50%, rgba(255, 255, 255, 0.95) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 85% 55%, rgba(147, 112, 219, 0.85) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 45% 15%, rgba(255, 215, 0, 0.85) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Eternal Knight - Divine beige with slate blue and gold */
.shop-skin-card .skin-preview[data-skin="eternal_knight"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 30% 25%, rgba(245, 245, 220, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 70% 30%, rgba(255, 215, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 45% 55%, rgba(106, 90, 205, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 70%, rgba(255, 215, 0, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 75%, rgba(245, 245, 220, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.95) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 85%, rgba(106, 90, 205, 0.85) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 80% 50%, rgba(255, 215, 0, 0.85) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Eternal Mage - Mystical plum with dark blue and gold */
.shop-skin-card .skin-preview[data-skin="eternal_mage"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 35%, rgba(221, 160, 221, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 80% 25%, rgba(255, 215, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 50% 65%, rgba(72, 61, 139, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 25% 80%, rgba(255, 215, 0, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 75%, rgba(221, 160, 221, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 20%, rgba(255, 255, 255, 0.95) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 90%, rgba(72, 61, 139, 0.85) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 60%, rgba(255, 215, 0, 0.85) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Eternal Challenger - Radiant lemon with medium slate blue and gold */
.shop-skin-card .skin-preview[data-skin="eternal_champion"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 25% 30%, rgba(255, 250, 205, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(255, 215, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 45% 60%, rgba(123, 104, 238, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 20% 75%, rgba(255, 215, 0, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 80% 80%, rgba(255, 250, 205, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.95) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 30% 85%, rgba(123, 104, 238, 0.85) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 85% 45%, rgba(255, 215, 0, 0.85) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

.shop-skin-card .skin-preview {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: none;
    background: none;
    box-shadow: none;
}

/* Override the skin preview sprite scale for shop (character CSS uses 2.5x) */
.shop-skin-card .skin-preview::before {
    transform: translate(-50%, -50%) scale(1.5) !important;
}

/* Skin Info */
.shop-skin-card .skin-info {
    text-align: center;
    width: 100%;
}

.shop-skin-card .skin-name {
    color: #fff;
    font-size: 11px;
    font-family: var(--retro-font);
    margin-bottom: 6px;
}

.shop-skin-card .skin-rarity {
    font-size: 10px;
    font-family: var(--retro-font);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 0;
    display: inline-block;
}

.rarity-common {
    color: #9d9d9d;
    background: rgba(157, 157, 157, 0.2);
}

.rarity-rare {
    color: #0070dd;
    background: rgba(0, 112, 221, 0.2);
}

.rarity-epic {
    color: #a335ee;
    background: rgba(163, 53, 238, 0.2);
}

.rarity-legendary {
    color: #ff8000;
    background: rgba(255, 128, 0, 0.2);
}

.rarity-mythical {
    color: #ff2020;
    background: rgba(255, 32, 32, 0.2);
}

/* Empty shop message */
.shop-empty-message {
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    font-size: 12px;
    font-family: var(--retro-font);
    padding: 40px 20px;
}

/* Skin Action Buttons */
.skin-action {
    width: 100%;
    margin-top: auto;
}

.shop-buy-btn {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #5a5a2a 0%, #4a4a1a 100%);
    color: #ffd700;
    border: 3px solid #ffd700;
    border-radius: 0;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--retro-font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.1s;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

.shop-buy-btn:hover:not(.disabled) {
    border-color: #ffed4e;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px rgba(255, 215, 0, 0.3);
}

.shop-buy-btn:active:not(.disabled) {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.shop-buy-btn.disabled {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    border-color: #555;
    color: #666;
    cursor: not-allowed;
}

.shop-locked-text {
    display: block;
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    color: #666;
    border: 3px solid #444;
    border-radius: 0;
    font-size: 11px;
    font-family: var(--retro-font);
    text-align: center;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

/* Confirm Dialog */
.shop-confirm-dialog {
    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: 1001;
}

.shop-confirm-content {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    padding: 30px;
    border-radius: 0;
    text-align: center;
    max-width: 350px;
    border: 4px solid #4a4a4a;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
}

.shop-confirm-content h3 {
    color: #fff;
    font-family: var(--retro-font);
    font-size: 14px;
    margin: 0 0 15px 0;
}

.shop-confirm-content p {
    color: #ccc;
    font-family: var(--retro-font);
    font-size: 12px;
    margin: 0 0 10px 0;
}

.shop-confirm-price {
    color: #ffd700;
    font-size: 16px;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.shop-confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.shop-confirm-cancel {
    padding: 10px 25px;
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    color: #fff;
    border: 3px solid #4a4a4a;
    border-radius: 0;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--retro-font);
    transition: all 0.1s;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

.shop-confirm-cancel:hover {
    border-color: #6a6a6a;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.5);
}

.shop-confirm-cancel:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

.shop-confirm-buy {
    padding: 10px 25px;
    background: linear-gradient(135deg, #5a5a2a 0%, #4a4a1a 100%);
    color: #ffd700;
    border: 3px solid #ffd700;
    border-radius: 0;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--retro-font);
    transition: all 0.1s;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

.shop-confirm-buy:hover {
    border-color: #ffed4e;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px rgba(255, 215, 0, 0.3);
}

.shop-confirm-buy:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

/* Message Toast */
.shop-message {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 0;
    font-size: 12px;
    font-family: var(--retro-font);
    z-index: 1002;
    animation: slideUp 0.3s ease;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
}

.shop-message-success {
    background: linear-gradient(135deg, #2a4a4a 0%, #1a3a3a 100%);
    color: #4ecdc4;
    border: 3px solid #4ecdc4;
}

.shop-message-error {
    background: linear-gradient(135deg, #5a2a2a 0%, #4a1a1a 100%);
    color: #ff6666;
    border: 3px solid #ff4444;
}

.shop-message-info {
    background: linear-gradient(135deg, #2a3a5a 0%, #1a2a4a 100%);
    color: #6af;
    border: 3px solid #0070dd;
}

.shop-message.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

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

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}


/* Purchase Celebration */
.shop-celebration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    animation: celebrationFadeIn 0.3s ease;
}

.shop-celebration.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

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

.shop-celebration-content {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    padding: 40px;
    text-align: center;
    max-width: 350px;
    position: relative;
    box-shadow:
        inset 0 0 0 4px #9d9d9d,
        6px 6px 0px rgba(0, 0, 0, 0.5);
    animation: celebrationPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

/* Celebration content rarity borders */
.shop-celebration-content[data-rarity="common"] {
    box-shadow: inset 0 0 0 4px #9d9d9d, 6px 6px 0px rgba(0, 0, 0, 0.5);
}

.shop-celebration-content[data-rarity="rare"] {
    box-shadow: inset 0 0 0 4px #0070dd, 6px 6px 0px rgba(0, 0, 0, 0.5);
}

.shop-celebration-content[data-rarity="epic"] {
    box-shadow: inset 0 0 0 4px #a335ee, 6px 6px 0px rgba(0, 0, 0, 0.5);
}

.shop-celebration-content[data-rarity="legendary"] {
    box-shadow: inset 0 0 0 4px #ff8000, 6px 6px 0px rgba(0, 0, 0, 0.5);
}

.shop-celebration-content[data-rarity="mythical"] {
    box-shadow: inset 0 0 0 4px #ff2020, 6px 6px 0px rgba(0, 0, 0, 0.5);
}

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

.celebration-confetti {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.confetti-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color);
    left: var(--x);
    top: -20px;
    transform: rotate(var(--rotation));
    animation: confettiFall 2s ease-out var(--delay) forwards;
}

@keyframes confettiFall {
    0% {
        top: -20px;
        opacity: 1;
        transform: rotate(var(--rotation)) translateX(0);
    }
    100% {
        top: 120%;
        opacity: 0;
        transform: rotate(calc(var(--rotation) + 720deg)) translateX(calc((var(--x) - 50%) * 0.5));
    }
}

.celebration-header {
    color: #ffd700;
    font-size: 20px;
    font-family: var(--retro-font);
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px #000;
    position: relative;
    z-index: 1;
}

.celebration-skin-preview {
    width: 120px;
    height: 120px;
    margin: 15px auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    border: 4px solid #9d9d9d;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Celebration preview rarity borders */
.celebration-skin-preview[data-rarity="common"] {
    border-color: #9d9d9d;
}

.celebration-skin-preview[data-rarity="rare"] {
    border-color: #0070dd;
}

.celebration-skin-preview[data-rarity="epic"] {
    border-color: #a335ee;
}

.celebration-skin-preview[data-rarity="legendary"] {
    border-color: #ff8000;
}

.celebration-skin-preview[data-rarity="mythical"] {
    border-color: #ff2020;
    box-shadow: 0 0 15px rgba(255, 32, 32, 0.4), 3px 3px 0px rgba(0, 0, 0, 0.5);
}

/* Mythical particle effects on celebration preview - skin-specific */
/* Galaxy Hero */
.celebration-skin-preview .skin-preview[data-skin="galaxy_hero"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(155, 89, 182, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(241, 196, 15, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, rgba(52, 152, 219, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 60%, rgba(241, 196, 15, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 80%, rgba(155, 89, 182, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Phantom Ranger */
.celebration-skin-preview .skin-preview[data-skin="phantom_ranger"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(208, 232, 240, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(255, 255, 255, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, rgba(168, 200, 216, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 60%, rgba(208, 232, 240, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 80%, rgba(74, 96, 128, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Coral Knight */
.celebration-skin-preview .skin-preview[data-skin="coral_knight"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 154, 138, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(64, 176, 160, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, rgba(45, 138, 138, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 60%, rgba(255, 154, 138, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 80%, rgba(64, 176, 160, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Void Mage */
.celebration-skin-preview .skin-preview[data-skin="void_mage"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 0, 102, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(51, 0, 102, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 40% 70%, rgba(255, 0, 102, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 60%, rgba(26, 0, 51, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 80%, rgba(255, 0, 102, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 100, 180, 0.95) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Rainbow Champion */
.celebration-skin-preview .skin-preview[data-skin="rainbow_champion"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 15% 25%, rgba(255, 0, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 35% 15%, rgba(255, 165, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 55% 30%, rgba(255, 255, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(0, 255, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 25% 70%, rgba(0, 136, 255, 0.9) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 65%, rgba(238, 130, 238, 0.9) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Eternal Hero */
.celebration-skin-preview .skin-preview[data-skin="eternal_hero"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 25%, rgba(255, 215, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 80% 20%, rgba(255, 228, 181, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 50% 50%, rgba(147, 112, 219, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 30% 75%, rgba(255, 215, 0, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 15% 50%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Eternal Knight */
.celebration-skin-preview .skin-preview[data-skin="eternal_knight"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 30% 25%, rgba(245, 245, 220, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 70% 30%, rgba(255, 215, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 45% 55%, rgba(106, 90, 205, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 70%, rgba(255, 215, 0, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Eternal Mage */
.celebration-skin-preview .skin-preview[data-skin="eternal_mage"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 35%, rgba(221, 160, 221, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 80% 25%, rgba(255, 215, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 50% 65%, rgba(72, 61, 139, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 25% 80%, rgba(255, 215, 0, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 20%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

/* Eternal Challenger */
.celebration-skin-preview .skin-preview[data-skin="eternal_champion"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 25% 30%, rgba(255, 250, 205, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 20%, rgba(255, 215, 0, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 45% 60%, rgba(123, 104, 238, 0.95) 50%, transparent 100%),
        radial-gradient(2px 2px at 20% 75%, rgba(255, 215, 0, 0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
    animation: mythical-particles-shop 4s ease-in-out infinite;
    z-index: 5;
}

.celebration-skin-preview .skin-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.celebration-skin-name {
    color: #fff;
    font-size: 16px;
    font-family: var(--retro-font);
    margin-bottom: 10px;
    text-shadow: 2px 2px 0px #000;
    position: relative;
    z-index: 1;
}

.celebration-rarity {
    font-size: 12px;
    font-family: var(--retro-font);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    display: inline-block;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.celebration-close-btn {
    padding: 12px 30px;
    background: linear-gradient(135deg, #5a5a2a 0%, #4a4a1a 100%);
    color: #ffd700;
    border: 3px solid #ffd700;
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    font-family: var(--retro-font);
    transition: all 0.1s;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

.celebration-close-btn:hover {
    border-color: #ffed4e;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px rgba(255, 215, 0, 0.3);
}

.celebration-close-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .shop-skins-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .shop-skin-card {
        padding: 10px;
    }

    .shop-skin-card .skin-preview-container {
        width: 80px;
        height: 80px;
    }

    .shop-skin-card .skin-preview {
        transform: scale(1.2);
    }

    .shop-skin-card .skin-name {
        font-size: 10px;
    }

    .shop-char-tab {
        padding: 8px 12px;
        font-size: 10px;
    }

    .shop-balance-box {
        padding: 10px 15px;
    }

    .shop-skin-card {
        padding: 16px 10px 10px 10px;
    }

    .shop-celebration-content {
        padding: 30px 20px;
        max-width: 280px;
    }

    .celebration-header {
        font-size: 16px;
    }

    .celebration-skin-preview {
        width: 100px;
        height: 100px;
    }

    .celebration-skin-name {
        font-size: 14px;
    }

    .celebration-close-btn {
        padding: 10px 25px;
        font-size: 12px;
    }
}