/* ============================================
   Kobay - Epic RPG Game Styles | kobay.xyz
   ============================================ */

/* CSS Variables */
:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a25;
    --bg-card: #1e1e2e;
    --bg-hover: #252535;
    
    --text-primary: #e8e8f0;
    --text-secondary: #a0a0b0;
    --text-muted: #606070;
    
    --accent-gold: #ffd700;
    --accent-orange: #ff8c00;
    --accent-red: #ff4444;
    --accent-purple: #9966ff;
    --accent-blue: #4488ff;
    --accent-green: #44ff88;
    --accent-cyan: #44ffff;
    --accent-pink: #ff44aa;
    
    --rarity-common: #9ca3af;
    --rarity-uncommon: #22c55e;
    --rarity-rare: #3b82f6;
    --rarity-epic: #a855f7;
    --rarity-legendary: #f59e0b;
    --rarity-mythic: #ef4444;
    
    --glow-gold: 0 0 20px #ffd700, 0 0 40px #ffd70080;
    --glow-legendary: 0 0 20px #f59e0b, 0 0 40px #f59e0b80;
    --glow-epic: 0 0 20px #a855f7, 0 0 40px #a855f780;
    --glow-mythic: 0 0 25px #ef4444, 0 0 50px #ef444480, 0 0 75px #ef444440;
    
    --border-radius: 12px;
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   GLOBAL TEXT READABILITY IMPROVEMENTS
   ============================================ */

/* Ensure all text has proper contrast and readability */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Add subtle text shadows for better readability on dark backgrounds */
h1, h2, h3, h4, h5, h6,
.font-cinzel,
.font-orbitron {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Improve button text visibility */
button, .btn, [onclick] {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Ensure colored text on dark backgrounds is readable */
.text-gold-400, .text-yellow-400, .text-orange-400 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.text-green-400, .text-cyan-400, .text-blue-400 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.text-red-400, .text-pink-400, .text-purple-400 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Better contrast for muted text */
.text-gray-400 {
    color: #a0a0b8 !important;
}

.text-gray-500 {
    color: #8888a0 !important;
}

/* Ensure links and interactive elements are clearly visible */
a, .cursor-pointer {
    transition: all 0.2s ease;
}

/* Form inputs should have clear text */
input, textarea, select {
    color: #ffffff !important;
    text-shadow: none;
}

input::placeholder, textarea::placeholder {
    color: #666680 !important;
}

/* Modal and overlay text should be clearly visible */
.modal-content, [class*="modal"] {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Gradient text with better visibility */
.gradient-gold {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Stats and numbers should be clearly readable */
[id*="stat-"], [id*="-amount"], [id*="-count"] {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

/* Tab buttons with better visibility */
.tab-btn {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

body {
    font-family: 'Rajdhani', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    background-image: 
        radial-gradient(ellipse at 20% 20%, rgba(102, 51, 153, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(51, 102, 153, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(20, 20, 30, 1) 0%, var(--bg-primary) 100%);
}

/* ============================================
   LOGIN SCREEN
   ============================================ */
.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(255, 0, 128, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 200, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(128, 0, 255, 0.1) 0%, transparent 60%),
        linear-gradient(135deg, #0a0a15 0%, #1a1a2e 50%, #0f0f1a 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

/* Login Particles Background */
.login-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.login-particle {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    pointer-events: none;
    animation: sparkRise linear infinite;
}

@keyframes sparkRise {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 1;
    }
    25% {
        transform: translateY(-25vh) translateX(var(--drift, 20px)) scale(0.9);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-50vh) translateX(calc(var(--drift, 20px) * -0.5)) scale(0.7);
        opacity: 0.7;
    }
    75% {
        transform: translateY(-75vh) translateX(var(--drift, 20px)) scale(0.4);
        opacity: 0.4;
    }
    100% {
        transform: translateY(-110vh) translateX(0) scale(0.1);
        opacity: 0;
    }
}

/* Legacy animation for backwards compat */
@keyframes loginParticleFloat {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}

/* Logo Glow Ring */
.logo-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    border: 3px solid transparent;
    border-top-color: var(--accent-gold);
    border-right-color: var(--accent-orange);
    border-radius: 50%;
    animation: logoRingSpin 3s linear infinite;
}

.logo-glow-ring::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid transparent;
    border-bottom-color: var(--accent-purple);
    border-left-color: var(--accent-cyan);
    border-radius: 50%;
    animation: logoRingSpin 2s linear infinite reverse;
}

@keyframes logoRingSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Holographic Title */
.holographic-title {
    background: linear-gradient(
        135deg,
        hsl(45, 100%, 50%) 0%,
        hsl(30, 100%, 55%) 25%,
        hsl(45, 100%, 60%) 50%,
        hsl(30, 100%, 55%) 75%,
        hsl(45, 100%, 50%) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographicGold 3s ease infinite;
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
}

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

/* Tagline Animation */
.tagline {
    color: var(--text-secondary);
    font-size: 1.1rem;
    animation: taglinePulse 2s ease-in-out infinite;
}

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

.login-container {
    background: rgba(20, 20, 35, 0.95);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.1), 0 0 120px rgba(102, 51, 153, 0.1);
    animation: loginFadeIn 0.8s ease;
}

@keyframes loginFadeIn {
    from { opacity: 0; transform: translateY(-30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-logo {
    margin-bottom: 40px;
}

.login-logo-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: 15px;
    animation: pulse 2s infinite;
}

.login-logo h1 {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.login-logo p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.login-form {
    margin-bottom: 30px;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.input-group input {
    width: 100%;
    padding: 15px 20px;
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    transition: var(--transition-fast);
}

.input-group input:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.login-btn {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-orange) 100%);
    border: none;
    border-radius: 12px;
    color: var(--bg-primary);
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.login-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--glow-gold);
}

.login-note {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 15px;
}

.online-count {
    color: var(--accent-green);
    font-size: 0.95rem;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.user-badge {
    background: var(--bg-card);
    padding: 8px 15px;
    border-radius: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.username {
    color: var(--accent-gold);
    font-weight: 600;
}

.save-btn {
    background: rgba(68, 255, 136, 0.2);
    border: none;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.save-btn:hover {
    background: var(--accent-green);
    transform: scale(1.1);
}

.logout-btn {
    background: rgba(255, 68, 68, 0.2);
    border: none;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background: var(--accent-red);
    transform: scale(1.1);
}

/* Session status indicator */
.session-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.session-status.online {
    color: var(--accent-green);
}

.session-status.online::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--accent-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-purple);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}

/* Game Container */
.game-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================
   HEADER STYLES
   ============================================ */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 2.5rem;
    animation: pulse 2s infinite;
}

.logo h1 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.currency-bar {
    display: flex;
    gap: 20px;
}

.currency {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-card);
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-fast);
}

.currency:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.currency-icon {
    font-size: 1.4rem;
}

.currency span:nth-child(2) {
    font-size: 1.3rem;
    font-weight: 700;
}

.currency-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.currency.gold span:nth-child(2) {
    color: var(--accent-gold);
}

.currency.diamond span:nth-child(2) {
    color: var(--accent-cyan);
}

.currency.cash span:nth-child(2) {
    color: var(--accent-green);
}

.add-cash-btn {
    background: var(--accent-green);
    color: var(--bg-primary);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-fast);
    margin-left: 5px;
}

.add-cash-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--accent-green);
}

.player-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.level-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%);
    padding: 8px 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--glow-epic);
}

.level-text {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.level-number {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
}

.exp-bar-container {
    width: 200px;
    height: 25px;
    background: var(--bg-card);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    border: 2px solid var(--accent-purple);
}

.exp-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-purple) 0%, var(--accent-blue) 100%);
    transition: width 0.5s ease;
    position: relative;
}

.exp-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

.exp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ============================================
   MAIN LAYOUT
   ============================================ */
.game-main {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 15px;
    flex: 1;
}

/* ============================================
   CHARACTER PANEL
   ============================================ */
.character-panel {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--border-radius);
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.character-panel h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--accent-gold);
    text-align: center;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.character-display {
    position: relative;
    height: 320px;
    background: 
        radial-gradient(ellipse at 50% 50%, rgba(102, 51, 153, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20, 20, 35, 0.8) 0%, rgba(30, 30, 50, 0.9) 100%);
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* Character silhouette in center */
.char-silhouette {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 140px;
    z-index: 1;
    pointer-events: none;
}

.char-silhouette::before {
    content: '🧙';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4.5rem;
    opacity: 0.5;
    filter: drop-shadow(0 0 20px rgba(153, 102, 255, 0.5));
    animation: silhouetteFloat 3s ease-in-out infinite;
}

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

.silhouette-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(153, 102, 255, 0.3) 0%, transparent 70%);
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
}

.character-avatar {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* Equipment Slots - Improved */
.equipment-slot {
    position: absolute;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.9) 0%, rgba(20, 20, 35, 0.95) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.equipment-slot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.equipment-slot:hover {
    border-color: var(--accent-purple);
    box-shadow: 
        0 6px 20px rgba(153, 102, 255, 0.4),
        0 0 30px rgba(153, 102, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(50, 30, 80, 0.9) 0%, rgba(30, 20, 50, 0.95) 100%);
}

/* FIX: Prevent transform shift on hover for centered slots */
.head-slot:hover,
.boots-slot:hover {
    transform: translateX(-50%) scale(1.05);
}

.equipment-slot .slot-icon {
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.equipment-slot:hover .slot-icon {
    transform: scale(1.15);
}

.equipment-slot .slot-name {
    font-size: 0.55rem;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Slot Positions - Fixed Layout */
.head-slot { 
    top: 15px; 
    left: 50%; 
    transform: translateX(-50%); 
}

.weapon-slot { 
    top: 85px; 
    left: 15px; 
}

.armor-slot { 
    top: 85px; 
    right: 15px; 
}

.gloves-slot { 
    top: 160px; 
    left: 15px; 
}

.boots-slot { 
    bottom: 15px; 
    left: 50%; 
    transform: translateX(-50%); 
}

.accessory-slot { 
    top: 160px; 
    right: 15px; 
}

/* Connection lines between slots */
.character-display::after {
    content: '';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 180px;
    background: linear-gradient(180deg, 
        rgba(153, 102, 255, 0.3) 0%, 
        rgba(153, 102, 255, 0.1) 50%, 
        rgba(153, 102, 255, 0.3) 100%);
    pointer-events: none;
    z-index: 5;
}

/* Equipment slot with item */
.equipment-slot.has-item {
    background: linear-gradient(135deg, rgba(40, 40, 70, 0.95) 0%, rgba(30, 30, 50, 0.98) 100%);
    border-color: var(--accent-gold);
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.2),
        inset 0 0 15px rgba(255, 215, 0, 0.1);
}

.equipment-slot.has-item::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-orange), var(--accent-gold));
    z-index: -1;
    opacity: 0.3;
    animation: slotGlowPulse 2s ease-in-out infinite;
}

@keyframes slotGlowPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

.equipment-slot .item-enhance-level {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #6b7280;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 30;
}

/* Slot type indicators */
.weapon-slot { border-left: 3px solid var(--accent-red); }
.armor-slot { border-left: 3px solid var(--accent-blue); }
.head-slot { border-left: 3px solid var(--accent-purple); }
.gloves-slot { border-left: 3px solid var(--accent-orange); }
.boots-slot { border-left: 3px solid var(--accent-green); }
.accessory-slot { border-left: 3px solid var(--accent-pink); }

/* Slot labels on hover */
.equipment-slot[data-slot]::after {
    content: attr(data-slot);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.3s ease;
    text-transform: uppercase;
    white-space: nowrap;
}

.equipment-slot.has-item[data-slot]::after {
    content: none;
}

/* Character Stats */
.character-stats {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.9) 0%, rgba(20, 20, 35, 0.95) 100%);
    border-radius: var(--border-radius);
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.character-stats h3 {
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: var(--accent-cyan);
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(68, 255, 255, 0.2);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    margin: 4px 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.stat-row:hover {
    background: rgba(68, 255, 255, 0.1);
}

.stat-name {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.stat-value {
    font-weight: 700;
    color: var(--accent-green);
    font-size: 0.95rem;
    text-shadow: 0 0 10px rgba(68, 255, 136, 0.3);
}

/* ============================================
   ACTION PANEL (CENTER)
   ============================================ */
.action-panel {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--border-radius);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    flex: 1;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(153, 102, 255, 0.3);
}

.tab-content {
    display: none;
    flex: 1;
}

.tab-content.active {
    display: block;
}

/* Battle Tab */
.battle-area h3 {
    color: var(--accent-orange);
    margin-bottom: 15px;
}

.zones-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 15px;
    max-height: 120px;
    overflow-y: auto;
}

/* Battle Arena - FULLSCREEN */
.battle-arena {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #0a0a15 0%, #1a0a2e 50%, #0f0f1a 100%);
    padding: 30px;
    display: none;
    overflow: hidden;
    z-index: 5000;
    flex-direction: column;
    justify-content: space-between;
}

.battle-arena::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 100, 50, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 80%, rgba(100, 50, 255, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 60%);
    pointer-events: none;
    animation: backgroundPulse 4s ease-in-out infinite;
}

@keyframes backgroundPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.battle-arena::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(0deg, rgba(255, 100, 50, 0.2) 0%, transparent 100%);
    pointer-events: none;
}

.battle-arena.active {
    display: flex;
    animation: arenaFadeIn 0.8s ease;
}

@keyframes arenaFadeIn {
    from { opacity: 0; transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
}

/* Battle ground effects */
.battle-ground {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-orange), transparent);
    box-shadow: 0 0 30px var(--accent-orange), 0 0 60px var(--accent-red);
}

/* Particle effects container */
.battle-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent-gold);
    border-radius: 50%;
    animation: particleFloat 3s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
    50% { transform: translateY(-20px) scale(1.5); opacity: 1; }
}

.battle-participants {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;
    padding: 50px 100px;
    position: relative;
    z-index: 10;
}

.battle-character {
    text-align: center;
    position: relative;
    padding: 30px;
}

.battle-character::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 30px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
    border-radius: 50%;
}

.battle-character.player::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(100, 200, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
    animation: playerAura 2s ease-in-out infinite;
}

@keyframes playerAura {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
    50% { transform: translateX(-50%) scale(1.2); opacity: 0.8; }
}

.battle-character.monster::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 100, 50, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: monsterAura 2s ease-in-out infinite;
}

@keyframes monsterAura {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
    50% { transform: translateX(-50%) scale(1.3); opacity: 0.9; }
}

.battle-character-name {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.battle-character.player .battle-character-name {
    color: var(--accent-cyan);
}

.battle-character.monster .battle-character-name {
    color: var(--accent-orange);
}

.battle-hp-bar {
    width: 200px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.battle-hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-orange) 50%, var(--accent-green) 100%);
    transition: width 0.5s ease;
    position: relative;
    box-shadow: inset 0 -3px 10px rgba(0, 0, 0, 0.3);
}

.battle-hp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);
}

.battle-hp-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 8px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.battle-vs {
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    font-weight: 900;
    color: var(--accent-red);
    text-shadow: 
        0 0 30px var(--accent-red),
        0 0 60px var(--accent-orange),
        0 0 90px var(--accent-red);
    animation: vsPulse 1.5s ease-in-out infinite;
    position: relative;
}

.battle-vs::before,
.battle-vs::after {
    content: '⚔️';
    position: absolute;
    font-size: 2rem;
    animation: vsSwords 2s ease-in-out infinite;
}

.battle-vs::before {
    left: -50px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

.battle-vs::after {
    right: -50px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

@keyframes vsPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    25% { transform: scale(1.1); }
    50% { transform: scale(1.2); opacity: 0.9; text-shadow: 0 0 50px var(--accent-gold), 0 0 100px var(--accent-orange); }
    75% { transform: scale(1.1); }
}

@keyframes vsSwords {
    0%, 100% { transform: translateY(-50%) rotate(-45deg) scale(1); }
    50% { transform: translateY(-50%) rotate(-45deg) scale(1.2); }
}

/* Damage Numbers */
.damage-number {
    position: absolute;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-red);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    animation: damageFloat 1s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

.damage-number.crit {
    font-size: 2rem;
    color: var(--accent-gold);
    text-shadow: 0 0 10px var(--accent-gold);
}

.damage-number.heal {
    color: var(--accent-green);
}

@keyframes damageFloat {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-30px) scale(1.2); opacity: 1; }
    100% { transform: translateY(-60px) scale(0.8); opacity: 0; }
}

/* Skills */
.skills-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 30px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    position: relative;
    z-index: 100;
}

.skill-btn {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.9) 0%, rgba(20, 20, 35, 0.95) 100%);
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

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

.skill-btn:hover:not(:disabled)::before {
    left: 100%;
}

.skill-btn:hover:not(:disabled) {
    transform: translateY(-10px) scale(1.1);
    border-color: var(--accent-gold);
    box-shadow: 
        0 10px 40px rgba(255, 215, 0, 0.4),
        0 0 30px rgba(255, 215, 0, 0.2),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
}

.skill-btn:active:not(:disabled) {
    transform: scale(0.95);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
}

.skill-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(50%);
}

.skill-btn.on-cooldown {
    border-color: var(--accent-red);
    animation: cooldownPulse 1s ease-in-out infinite;
}

@keyframes cooldownPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 68, 68, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 68, 68, 0.5); }
}

.skill-btn .skill-icon {
    font-size: 3rem;
    transition: transform 0.3s ease;
}

.skill-btn:hover:not(:disabled) .skill-icon {
    transform: scale(1.2);
}

.skill-btn .skill-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.skill-btn .skill-cooldown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent-red);
    text-shadow: 0 0 20px var(--accent-red);
}

.skill-btn.attack { 
    border-color: var(--accent-red); 
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.2);
}
.skill-btn.attack:hover:not(:disabled) { 
    box-shadow: 0 10px 40px rgba(255, 68, 68, 0.5), 0 0 30px rgba(255, 68, 68, 0.3);
    border-color: var(--accent-red);
}

.skill-btn.skill { 
    border-color: var(--accent-purple); 
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}
.skill-btn.skill:hover:not(:disabled) { 
    box-shadow: 0 10px 40px rgba(168, 85, 247, 0.5), 0 0 30px rgba(168, 85, 247, 0.3);
    border-color: var(--accent-purple);
}

.skill-btn.defense { 
    border-color: var(--accent-blue); 
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}
.skill-btn.defense:hover:not(:disabled) { 
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.5), 0 0 30px rgba(59, 130, 246, 0.3);
    border-color: var(--accent-blue);
}

.skill-btn.heal { 
    border-color: var(--accent-green); 
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}
.skill-btn.heal:hover:not(:disabled) { 
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.5), 0 0 30px rgba(34, 197, 94, 0.3);
    border-color: var(--accent-green);
}

.skill-btn.ultimate { 
    border-color: var(--accent-gold); 
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(30, 30, 50, 0.9) 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    animation: ultimateGlow 2s ease-in-out infinite;
}

@keyframes ultimateGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.3); }
}

.skill-btn.ultimate:hover:not(:disabled) { 
    box-shadow: 0 10px 50px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.4);
    animation: none;
}

/* Battle Effects */
.battle-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10rem;
    animation: effectPop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: none;
    z-index: 500;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.8));
}

@keyframes effectPop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; filter: blur(10px); }
    30% { transform: translate(-50%, -50%) scale(2) rotate(20deg); opacity: 1; filter: blur(0); }
    50% { transform: translate(-50%, -50%) scale(1.8) rotate(-10deg); opacity: 1; }
    70% { transform: translate(-50%, -50%) scale(2.2) rotate(5deg); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3) rotate(0deg); opacity: 0; filter: blur(5px); }
}

/* Slash effect */
.slash-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 10px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), white, var(--accent-gold), transparent);
    transform: translate(-50%, -50%) rotate(-30deg);
    animation: slashAnimation 0.4s ease-out forwards;
    pointer-events: none;
    z-index: 600;
    border-radius: 50%;
    box-shadow: 0 0 30px var(--accent-gold), 0 0 60px var(--accent-orange);
}

@keyframes slashAnimation {
    0% { transform: translate(-50%, -50%) rotate(-30deg) scaleX(0); opacity: 0; }
    30% { transform: translate(-50%, -50%) rotate(-30deg) scaleX(1.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(-30deg) scaleX(2); opacity: 0; }
}

/* Impact effect */
.impact-effect {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 100, 50, 0.8) 0%, transparent 70%);
    animation: impactAnimation 0.5s ease-out forwards;
    pointer-events: none;
    z-index: 400;
}

@keyframes impactAnimation {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Energy burst */
.energy-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 5px solid var(--accent-gold);
    border-radius: 50%;
    animation: energyBurst 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 450;
}

@keyframes energyBurst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 20px; }
    50% { transform: translate(-50%, -50%) scale(2); opacity: 0.8; border-width: 10px; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; border-width: 2px; }
}

/* Monster death animation */
.battle-character.dying .battle-character-icon {
    animation: monsterDeath 1s ease forwards;
}

@keyframes monsterDeath {
    0% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
    50% { transform: scale(1.2) rotate(10deg); opacity: 1; filter: brightness(2); }
    100% { transform: scale(0) rotate(360deg); opacity: 0; filter: brightness(0); }
}

/* Victory/Defeat overlay */
.battle-result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: overlayFadeIn 0.8s ease;
    z-index: 2000;
}

@keyframes overlayFadeIn {
    from { opacity: 0; backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(10px); }
}

.battle-result-overlay.victory {
    background: 
        radial-gradient(circle at 50% 30%, rgba(255, 215, 0, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(255, 165, 0, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(255, 200, 50, 0.3) 0%, transparent 40%),
        rgba(0, 0, 0, 0.85);
}

.battle-result-overlay.defeat {
    background: 
        radial-gradient(circle at 50% 30%, rgba(255, 0, 0, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(150, 0, 0, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(200, 50, 50, 0.3) 0%, transparent 40%),
        rgba(0, 0, 0, 0.9);
}

.battle-result-text {
    font-family: 'Cinzel', serif;
    font-size: 6rem;
    font-weight: 900;
    margin-bottom: 30px;
    animation: resultAppear 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: 10px;
    text-transform: uppercase;
}

.victory .battle-result-text {
    color: var(--accent-gold);
    text-shadow: 
        0 0 30px var(--accent-gold),
        0 0 60px var(--accent-orange),
        0 0 100px var(--accent-gold),
        0 5px 30px rgba(0, 0, 0, 0.8);
    animation: victoryText 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), victoryGlow 2s ease-in-out infinite 1s;
}

.defeat .battle-result-text {
    color: var(--accent-red);
    text-shadow: 
        0 0 30px var(--accent-red),
        0 0 60px rgba(255, 0, 0, 0.5),
        0 5px 30px rgba(0, 0, 0, 0.8);
    animation: defeatText 1s ease;
}

@keyframes victoryText {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    50% { transform: scale(1.3) rotate(5deg); opacity: 1; }
    70% { transform: scale(0.95) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes victoryGlow {
    0%, 100% { text-shadow: 0 0 30px var(--accent-gold), 0 0 60px var(--accent-orange); }
    50% { text-shadow: 0 0 50px var(--accent-gold), 0 0 100px var(--accent-orange), 0 0 150px var(--accent-gold); }
}

@keyframes defeatText {
    0% { transform: scale(3) rotate(10deg); opacity: 0; filter: blur(20px); }
    50% { transform: scale(0.9) rotate(-5deg); opacity: 1; filter: blur(0); }
    70% { transform: scale(1.1) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes resultAppear {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}

.battle-rewards {
    text-align: center;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.5);
    padding: 30px 60px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    animation: rewardsSlideUp 0.8s ease 0.3s both;
}

@keyframes rewardsSlideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.battle-rewards p {
    margin: 10px 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.continue-btn {
    margin-top: 40px;
    padding: 18px 60px;
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%);
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: white;
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 3px;
    animation: buttonAppear 0.8s ease 0.6s both;
}

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

.continue-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(153, 102, 255, 0.5), 0 0 30px rgba(68, 136, 255, 0.3);
}

.continue-btn:active {
    transform: scale(0.98);
}

/* ============================================
   CHARACTER VISUAL IN BATTLE
   ============================================ */
.character-visual {
    position: relative;
    width: 180px;
    height: 220px;
    margin: 0 auto 20px;
    animation: characterFloat 3s ease-in-out infinite;
}

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

.char-body {
    font-size: 8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: all 0.3s ease;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.char-weapon {
    position: absolute;
    font-size: 5rem;
    right: -30px;
    top: 25%;
    z-index: 3;
    transform: rotate(-30deg);
    transition: all 0.3s ease;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.7));
    animation: weaponIdle 2s ease-in-out infinite;
}

@keyframes weaponIdle {
    0%, 100% { transform: rotate(-30deg) translateY(0); }
    50% { transform: rotate(-25deg) translateY(-5px); }
}

.char-weapon.glowing {
    animation: weaponGlow 1s ease-in-out infinite;
}

.char-weapon.glow-8 { filter: drop-shadow(0 0 10px var(--accent-blue)) drop-shadow(0 0 20px var(--accent-blue)); }
.char-weapon.glow-9 { filter: drop-shadow(0 0 12px var(--accent-purple)) drop-shadow(0 0 25px var(--accent-purple)); }
.char-weapon.glow-10 { filter: drop-shadow(0 0 15px var(--accent-gold)) drop-shadow(0 0 30px var(--accent-gold)); }
.char-weapon.glow-11 { filter: drop-shadow(0 0 18px var(--accent-orange)) drop-shadow(0 0 35px var(--accent-orange)); }
.char-weapon.glow-12 { filter: drop-shadow(0 0 20px var(--accent-red)) drop-shadow(0 0 40px var(--accent-red)); animation: weaponGlow12 0.8s ease-in-out infinite; }
.char-weapon.glow-13 { filter: drop-shadow(0 0 22px var(--accent-pink)) drop-shadow(0 0 45px var(--accent-pink)); animation: weaponGlow13 0.6s ease-in-out infinite; }
.char-weapon.glow-14 { filter: drop-shadow(0 0 25px var(--accent-cyan)) drop-shadow(0 0 50px var(--accent-cyan)); animation: weaponGlow14 0.5s ease-in-out infinite; }
.char-weapon.glow-15 { animation: weaponGlow15 0.4s ease-in-out infinite; }

@keyframes weaponGlow {
    0%, 100% { filter: drop-shadow(0 0 10px currentColor); }
    50% { filter: drop-shadow(0 0 25px currentColor) drop-shadow(0 0 40px currentColor); }
}

@keyframes weaponGlow12 {
    0%, 100% { filter: drop-shadow(0 0 20px var(--accent-red)) drop-shadow(0 0 40px var(--accent-red)); transform: rotate(-30deg) scale(1); }
    50% { filter: drop-shadow(0 0 35px var(--accent-red)) drop-shadow(0 0 60px var(--accent-orange)); transform: rotate(-30deg) scale(1.05); }
}

@keyframes weaponGlow13 {
    0%, 100% { filter: drop-shadow(0 0 22px var(--accent-pink)) drop-shadow(0 0 45px var(--accent-pink)); transform: rotate(-30deg) scale(1); }
    50% { filter: drop-shadow(0 0 40px var(--accent-pink)) drop-shadow(0 0 70px var(--accent-purple)); transform: rotate(-30deg) scale(1.08); }
}

@keyframes weaponGlow14 {
    0%, 100% { filter: drop-shadow(0 0 25px var(--accent-cyan)) drop-shadow(0 0 50px var(--accent-cyan)); }
    33% { filter: drop-shadow(0 0 35px var(--accent-blue)) drop-shadow(0 0 60px var(--accent-purple)); }
    66% { filter: drop-shadow(0 0 35px var(--accent-green)) drop-shadow(0 0 60px var(--accent-cyan)); }
}

@keyframes weaponGlow15 {
    0% { filter: drop-shadow(0 0 30px var(--accent-gold)) drop-shadow(0 0 60px var(--accent-orange)); transform: rotate(-30deg) scale(1); }
    25% { filter: drop-shadow(0 0 35px var(--accent-cyan)) drop-shadow(0 0 70px var(--accent-blue)); transform: rotate(-25deg) scale(1.1); }
    50% { filter: drop-shadow(0 0 40px var(--accent-pink)) drop-shadow(0 0 80px var(--accent-purple)); transform: rotate(-30deg) scale(1.15); }
    75% { filter: drop-shadow(0 0 35px var(--accent-green)) drop-shadow(0 0 70px var(--accent-cyan)); transform: rotate(-35deg) scale(1.1); }
    100% { filter: drop-shadow(0 0 30px var(--accent-gold)) drop-shadow(0 0 60px var(--accent-orange)); transform: rotate(-30deg) scale(1); }
}

.char-armor {
    position: absolute;
    font-size: 2.5rem;
    left: 50%;
    top: 65%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.9;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

.monster-visual {
    animation: monsterFloat 2.5s ease-in-out infinite;
}

@keyframes monsterFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

.monster-visual .char-body {
    font-size: 10rem;
    filter: drop-shadow(0 15px 30px rgba(255, 50, 50, 0.4));
    animation: monsterPulse 2s ease-in-out infinite;
}

@keyframes monsterPulse {
    0%, 100% { filter: drop-shadow(0 15px 30px rgba(255, 50, 50, 0.4)) brightness(1); }
    50% { filter: drop-shadow(0 20px 40px rgba(255, 100, 50, 0.6)) brightness(1.1); }
}

/* Attack Animation with Damage */
.battle-character.attacking .character-visual {
    animation: characterAttackNew 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.battle-character.player.attacking .character-visual {
    animation: playerAttackNew 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.battle-character.monster.attacking .character-visual {
    animation: monsterAttackNew 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.battle-character.attacking .char-weapon {
    animation: weaponSwing 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes playerAttackNew {
    0% { transform: translateX(0) translateY(0) scale(1); }
    15% { transform: translateX(-30px) translateY(-20px) scale(1.1); }
    30% { transform: translateX(150px) translateY(0) scale(1.3); filter: brightness(1.3); }
    50% { transform: translateX(120px) translateY(10px) scale(1.2); }
    70% { transform: translateX(50px) translateY(0) scale(1.1); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}

@keyframes monsterAttackNew {
    0% { transform: translateX(0) translateY(0) scale(1); }
    15% { transform: translateX(30px) translateY(-20px) scale(1.1); }
    30% { transform: translateX(-150px) translateY(0) scale(1.3); filter: brightness(1.3); }
    50% { transform: translateX(-120px) translateY(10px) scale(1.2); }
    70% { transform: translateX(-50px) translateY(0) scale(1.1); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}

@keyframes characterAttackNew {
    0% { transform: translateX(0) scale(1); }
    20% { transform: translateX(50px) scale(1.15); }
    40% { transform: translateX(100px) scale(1.25); filter: brightness(1.3); }
    60% { transform: translateX(70px) scale(1.15); }
    100% { transform: translateX(0) scale(1); }
}

@keyframes weaponSwing {
    0% { transform: rotate(-30deg) scale(1); }
    20% { transform: rotate(-60deg) scale(1.1) translateX(-20px); }
    40% { transform: rotate(60deg) scale(1.4) translateX(40px); filter: brightness(1.5); }
    60% { transform: rotate(30deg) scale(1.2) translateX(20px); }
    80% { transform: rotate(-15deg) scale(1.1); }
    100% { transform: rotate(-30deg) scale(1); }
}

.battle-character.hit .character-visual {
    animation: characterHitSmooth 0.5s ease-out;
}

@keyframes characterHitSmooth {
    0% { transform: translateX(0); filter: brightness(1); }
    10% { transform: translateX(-15px); filter: brightness(2.5) saturate(0); }
    25% { transform: translateX(12px); filter: brightness(0.7); }
    40% { transform: translateX(-8px); filter: brightness(1.5); }
    55% { transform: translateX(5px); filter: brightness(0.9); }
    70% { transform: translateX(-3px); filter: brightness(1.2); }
    85% { transform: translateX(1px); filter: brightness(1); }
    100% { transform: translateX(0); filter: brightness(1); }
}

/* Screen shake on hit - more subtle, no scale */
.battle-arena.screen-shake {
    animation: screenShakeSmooth 0.4s ease-out;
}

@keyframes screenShakeSmooth {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-6px, 3px); }
    20% { transform: translate(6px, -3px); }
    30% { transform: translate(-5px, 2px); }
    40% { transform: translate(5px, -2px); }
    50% { transform: translate(-3px, 1px); }
    60% { transform: translate(3px, -1px); }
    70% { transform: translate(-2px, 1px); }
    80% { transform: translate(2px, 0); }
    90% { transform: translate(-1px, 0); }
}

/* Floating Damage Numbers */
.damage-number {
    position: absolute;
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    font-weight: 900;
    color: var(--accent-red);
    text-shadow: 
        3px 3px 0 #000,
        -3px -3px 0 #000,
        3px -3px 0 #000,
        -3px 3px 0 #000,
        0 0 30px var(--accent-red),
        0 0 60px var(--accent-red);
    animation: damageFloatNew 1.5s ease-out forwards;
    pointer-events: none;
    z-index: 1000;
    left: 50%;
    top: 10%;
    white-space: nowrap;
}

.damage-number.crit {
    font-size: 6rem;
    color: var(--accent-gold);
    text-shadow: 
        4px 4px 0 #000,
        -4px -4px 0 #000,
        4px -4px 0 #000,
        -4px 4px 0 #000,
        0 0 40px var(--accent-gold),
        0 0 80px var(--accent-orange),
        0 0 120px var(--accent-red);
    animation: damageCritFloat 2s ease-out forwards;
}

.damage-number.crit::before {
    content: '💥 ';
}

.damage-number.crit::after {
    content: ' 💥';
}

.damage-number.heal {
    font-size: 3.5rem;
    color: var(--accent-green);
    text-shadow: 
        3px 3px 0 #000,
        -3px -3px 0 #000,
        0 0 30px var(--accent-green),
        0 0 60px var(--accent-cyan);
    animation: healFloat 1.5s ease-out forwards;
}

.damage-number.heal::before {
    content: '💚 ';
}

@keyframes damageFloatNew {
    0% { transform: translate(-50%, 0) scale(0.3) rotate(-15deg); opacity: 0; }
    10% { transform: translate(-50%, -30px) scale(1.8) rotate(5deg); opacity: 1; }
    20% { transform: translate(-50%, -60px) scale(1.4) rotate(-3deg); opacity: 1; }
    40% { transform: translate(-50%, -100px) scale(1.2) rotate(2deg); opacity: 1; }
    70% { transform: translate(-50%, -150px) scale(1) rotate(-1deg); opacity: 0.8; }
    100% { transform: translate(-50%, -200px) scale(0.6) rotate(0deg); opacity: 0; }
}

@keyframes damageCritFloat {
    0% { transform: translate(-50%, 0) scale(0.2) rotate(-20deg); opacity: 0; }
    8% { transform: translate(-50%, -20px) scale(2.5) rotate(10deg); opacity: 1; filter: brightness(2); }
    15% { transform: translate(-50%, -50px) scale(2) rotate(-8deg); opacity: 1; }
    25% { transform: translate(-50%, -80px) scale(1.6) rotate(5deg); opacity: 1; }
    40% { transform: translate(-50%, -120px) scale(1.4) rotate(-3deg); opacity: 1; }
    60% { transform: translate(-50%, -170px) scale(1.2) rotate(2deg); opacity: 0.9; }
    80% { transform: translate(-50%, -220px) scale(1) rotate(-1deg); opacity: 0.6; }
    100% { transform: translate(-50%, -280px) scale(0.7) rotate(0deg); opacity: 0; }
}

@keyframes healFloat {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    15% { transform: translate(-50%, -20px) scale(1.5); opacity: 1; }
    40% { transform: translate(-50%, -60px) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -150px) scale(0.8); opacity: 0; }
}

/* Combo counter */
.combo-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: bold;
    color: var(--accent-cyan);
    text-shadow: 0 0 20px var(--accent-cyan);
    animation: comboAppear 0.5s ease;
    z-index: 500;
}

/* ============================================
   PVP STYLES
   ============================================ */
.pvp-area h3 {
    color: var(--accent-purple);
    margin-bottom: 20px;
    text-align: center;
}

.pvp-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
}

.pvp-stat {
    text-align: center;
    background: var(--bg-card);
    padding: 15px 30px;
    border-radius: var(--border-radius);
}

.pvp-stat-value {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: var(--accent-gold);
}

.pvp-stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.pvp-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.pvp-option {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.pvp-option:hover {
    border-color: var(--accent-purple);
    transform: translateY(-5px);
    box-shadow: var(--glow-epic);
}

.pvp-option-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
}

.pvp-option h4 {
    color: var(--accent-gold);
    margin-bottom: 8px;
}

.pvp-option p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.pvp-room-panel, .matchmaking-panel {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 25px;
    text-align: center;
    margin-bottom: 20px;
}

.room-info h4 {
    color: var(--accent-gold);
    margin-bottom: 15px;
}

.room-url-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.room-url-container input {
    flex: 1;
    padding: 12px;
    background: var(--bg-hover);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: monospace;
}

.room-url-container button {
    padding: 12px 20px;
    background: var(--accent-purple);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: var(--transition-fast);
}

.room-url-container button:hover {
    background: var(--accent-blue);
}

.room-status {
    color: var(--accent-orange);
    animation: pulse 2s infinite;
}

.cancel-btn {
    padding: 12px 30px;
    background: var(--accent-red);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: var(--transition-fast);
    margin-top: 15px;
}

.cancel-btn:hover {
    background: #cc3333;
}

.matchmaking-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--bg-hover);
    border-top-color: var(--accent-purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.join-room-panel {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-top: 20px;
}

.join-room-panel h4 {
    color: var(--text-primary);
    margin-bottom: 15px;
}

.join-room-form {
    display: flex;
    gap: 10px;
}

.join-room-form input {
    flex: 1;
    padding: 12px;
    background: var(--bg-hover);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
}

.join-room-form button {
    padding: 12px 25px;
    background: var(--accent-green);
    border: none;
    border-radius: 8px;
    color: var(--bg-primary);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.join-room-form button:hover {
    background: #2ecc71;
}

.pvp-battle-arena {
    background: linear-gradient(180deg, #1a0a2e 0%, #0f0f1a 100%);
    border-radius: var(--border-radius);
    padding: 25px;
    border: 2px solid var(--accent-purple);
    box-shadow: var(--glow-epic);
}

.pvp-turn-indicator {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-gold);
    margin-top: 15px;
    padding: 10px;
    background: var(--bg-card);
    border-radius: 8px;
}

/* Enhanced Enhance Rate Grid */
.enhance-rate-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 15px 0;
}

.enhance-rate-grid span {
    background: var(--bg-hover);
    padding: 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    text-align: center;
}

.enhance-warning {
    color: var(--accent-red);
    font-size: 0.9rem;
    margin-top: 10px;
}

/* ============================================
   KOBAY ENHANCEMENT SCREEN
   ============================================ */
.enhance-area {
    position: relative;
}

.enhance-area h3 {
    color: var(--accent-gold);
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

/* Enhancement Forge */
.enhance-forge {
    background: linear-gradient(180deg, #1a0a0a 0%, #2a1515 50%, #1a0a0a 100%);
    border: 3px solid #8b4513;
    border-radius: 20px;
    padding: 30px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 
        inset 0 0 50px rgba(255, 100, 0, 0.2),
        0 0 30px rgba(139, 69, 19, 0.5);
}

.enhance-forge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 50% 100%, rgba(255, 100, 0, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 0%, rgba(255, 200, 0, 0.1) 0%, transparent 30%);
    pointer-events: none;
}

/* Fire effect at bottom */
.enhance-forge::after {
    content: '🔥';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    animation: fireFlicker 0.5s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 20px rgba(255, 100, 0, 0.8));
}

@keyframes fireFlicker {
    0% { transform: translateX(-50%) scale(1); opacity: 0.8; }
    100% { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

/* Enhanced slots */
.enhance-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px 0 30px;
    position: relative;
    z-index: 10;
}

.enhance-item-slot,
.enhance-result-slot {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%);
    border: 4px solid #8b4513;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(139, 69, 19, 0.3);
}

.enhance-item-slot:hover {
    border-color: var(--accent-gold);
    box-shadow: 
        inset 0 0 30px rgba(255, 215, 0, 0.2),
        0 0 30px rgba(255, 215, 0, 0.4);
    transform: scale(1.05);
}

.enhance-item-slot.has-item {
    border-color: var(--accent-gold);
    animation: slotGlow 2s ease-in-out infinite;
}

@keyframes slotGlow {
    0%, 100% { box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.2), 0 0 20px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: inset 0 0 40px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.5); }
}

.enhance-arrow {
    font-size: 3rem;
    color: var(--accent-gold);
    text-shadow: 0 0 20px var(--accent-gold);
    animation: arrowPulse 1s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(10px); opacity: 1; }
}

/* Trina Slot */
.trina-section {
    background: linear-gradient(135deg, rgba(50, 50, 80, 0.5) 0%, rgba(30, 30, 50, 0.8) 100%);
    border: 2px solid var(--accent-purple);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.trina-section h4 {
    color: var(--accent-purple);
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
}

.trina-slots {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.trina-slot {
    width: 70px;
    height: 70px;
    background: var(--bg-card);
    border: 3px dashed rgba(168, 85, 247, 0.5);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.trina-slot:hover {
    border-color: var(--accent-purple);
    background: rgba(168, 85, 247, 0.1);
}

.trina-slot.filled {
    border-style: solid;
    border-color: var(--accent-purple);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(100, 50, 200, 0.1) 100%);
    animation: trinaGlow 1.5s ease-in-out infinite;
}

@keyframes trinaGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); }
    50% { box-shadow: 0 0 25px rgba(168, 85, 247, 0.6); }
}

.trina-slot .trina-icon {
    font-size: 2rem;
}

.trina-slot .trina-bonus {
    font-size: 0.7rem;
    color: var(--accent-green);
    font-weight: bold;
}

.trina-inventory {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.trina-item {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.trina-item:hover {
    border-color: var(--accent-purple);
    transform: translateY(-3px);
}

.trina-item .trina-count {
    font-size: 0.8rem;
    color: var(--accent-green);
}

/* Success Rate Display */
.success-rate-display {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 50, 0.9) 100%);
    border: 2px solid var(--accent-gold);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

.success-rate-display h4 {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.success-rate-value {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    font-weight: bold;
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

.success-rate-bonus {
    color: var(--accent-green);
    font-size: 1.2rem;
    margin-top: 5px;
}

/* Enhance Button */
.enhance-btn {
    width: 100%;
    padding: 20px 40px;
    background: linear-gradient(135deg, #8b4513 0%, #cd853f 50%, #8b4513 100%);
    border: 3px solid var(--accent-gold);
    border-radius: 15px;
    color: white;
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    overflow: hidden;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.enhance-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.enhance-btn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 10px 30px rgba(139, 69, 19, 0.5),
        0 0 50px rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, #a0522d 0%, #daa520 50%, #a0522d 100%);
}

.enhance-btn:active {
    transform: scale(0.98);
}

/* Enhancement Animation Overlay */
.enhance-animation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    flex-direction: column;
}

.enhance-animation-overlay.active {
    display: flex;
}

.enhance-animation-item {
    font-size: 10rem;
    position: relative;
    animation: enhanceItemFloat 2s ease-in-out infinite;
}

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

/* Sparks */
.spark {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--accent-gold);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkFly 1s ease-out forwards;
}

@keyframes sparkFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* Enhancement Processing */
.enhance-processing {
    text-align: center;
}

.enhance-processing h3 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: var(--accent-gold);
    margin-bottom: 20px;
    animation: processingPulse 0.5s ease-in-out infinite;
}

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

.forge-fire {
    font-size: 5rem;
    animation: forgeFireAnim 0.3s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 30px rgba(255, 100, 0, 0.8));
}

@keyframes forgeFireAnim {
    0% { transform: scale(1) rotate(-5deg); }
    100% { transform: scale(1.1) rotate(5deg); }
}

/* Success Animation */
.enhance-success-anim {
    animation: successBurst 1s ease-out forwards;
}

@keyframes successBurst {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(1.5); filter: brightness(3) drop-shadow(0 0 50px var(--accent-gold)); }
    60% { transform: scale(1.3); filter: brightness(2) drop-shadow(0 0 80px var(--accent-gold)); }
    100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 30px var(--accent-gold)); }
}

/* Fail Animation */
.enhance-fail-anim {
    animation: failShatter 0.8s ease-out forwards;
}

@keyframes failShatter {
    0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
    20% { transform: scale(1.2) rotate(10deg); filter: brightness(2) sepia(1) hue-rotate(-50deg); }
    40% { transform: scale(0.9) rotate(-15deg); filter: brightness(0.5); }
    60% { transform: scale(1.1) rotate(5deg); filter: brightness(0.3) grayscale(1); }
    100% { transform: scale(0.8) rotate(0deg); filter: brightness(0.5) grayscale(0.5); }
}

/* Explosion particles */
.explosion-particle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, var(--accent-red) 0%, transparent 70%);
    border-radius: 50%;
    animation: explode 0.8s ease-out forwards;
}

@keyframes explode {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--ex), var(--ey)) scale(0); opacity: 0; }
}

/* Rainbow glow for +15 */
.rainbow-glow {
    animation: rainbowGlow 1s linear infinite;
}

@keyframes rainbowGlow {
    0% { filter: drop-shadow(0 0 30px red); }
    16% { filter: drop-shadow(0 0 30px orange); }
    33% { filter: drop-shadow(0 0 30px yellow); }
    50% { filter: drop-shadow(0 0 30px green); }
    66% { filter: drop-shadow(0 0 30px blue); }
    83% { filter: drop-shadow(0 0 30px purple); }
    100% { filter: drop-shadow(0 0 30px red); }
}

.zone-card {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 8px;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
}

.zone-icon {
    font-size: 1.5rem;
    margin-bottom: 3px;
    display: block;
}

.zone-name {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.zone-level {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.zone-card:hover {
    border-color: var(--accent-orange);
    transform: translateY(-3px);
}

.zone-card.selected {
    border-color: var(--accent-gold);
    box-shadow: var(--glow-gold);
}

.zone-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.battle-log {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 10px 15px;
    height: 120px;
    overflow-y: auto;
    margin-bottom: 15px;
    font-size: 0.85rem;
}

.log-entry {
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.log-entry.damage {
    color: var(--accent-red);
}

.log-entry.heal {
    color: var(--accent-green);
}

.log-entry.loot {
    color: var(--accent-gold);
}

.log-entry.exp {
    color: var(--accent-purple);
}

.log-entry.level-up {
    color: var(--accent-cyan);
    font-weight: bold;
    font-size: 1.1rem;
    text-shadow: 0 0 10px var(--accent-cyan);
}

.log-entry.info {
    color: var(--accent-blue);
    font-style: italic;
}

.battle-btn {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-orange) 100%);
    border: none;
    border-radius: var(--border-radius);
    color: white;
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.battle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
}

.battle-btn:active {
    transform: translateY(0);
}

.battle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Enhance Tab */
.enhance-area h3 {
    color: var(--accent-gold);
    margin-bottom: 15px;
}

.enhance-info {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 20px;
}

.enhance-info p {
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.enhance-materials {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.material {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-hover);
    padding: 8px 12px;
    border-radius: 8px;
}

.material-icon {
    font-size: 1.3rem;
}

.material-name {
    font-size: 0.85rem;
}

.material-count {
    font-weight: 700;
    color: var(--accent-green);
}

.gold-text {
    color: var(--accent-gold) !important;
}

.legendary-text {
    color: var(--accent-orange) !important;
    text-shadow: 0 0 10px var(--accent-orange);
}

.enhance-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
}

.enhance-item-slot,
.enhance-result-slot {
    width: 120px;
    height: 120px;
    background: var(--bg-card);
    border: 3px dashed rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.enhance-item-slot:hover {
    border-color: var(--accent-gold);
    background: var(--bg-hover);
}

.enhance-item-slot.has-item {
    border-style: solid;
    border-color: var(--accent-gold);
}

.enhance-result-slot {
    cursor: default;
    border-color: var(--accent-purple);
}

.slot-placeholder {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.enhance-arrow {
    font-size: 2rem;
    animation: pulse 1.5s infinite;
}

.enhance-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.enhance-controls select {
    flex: 1;
    padding: 12px 15px;
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    cursor: pointer;
}

.enhance-controls select:focus {
    outline: none;
    border-color: var(--accent-gold);
}

.enhance-btn {
    padding: 12px 40px;
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-orange) 100%);
    border: none;
    border-radius: var(--border-radius);
    color: var(--bg-primary);
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
}

.enhance-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-gold);
}

.enhance-chances {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 15px;
    text-align: center;
}

.enhance-chances h4 {
    color: var(--accent-purple);
    margin-bottom: 10px;
}

.enhance-chances p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 5px 0;
}

/* Shop Tab */
.shop-area h3 {
    color: var(--accent-green);
    margin-bottom: 15px;
}

.shop-categories {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.shop-cat-btn {
    padding: 8px 18px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: 20px;
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.shop-cat-btn:hover {
    background: var(--bg-hover);
}

.shop-cat-btn.active {
    background: var(--accent-green);
    color: var(--bg-primary);
}

.shop-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
}

.shop-item {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.shop-item:hover {
    border-color: var(--accent-green);
    transform: translateY(-3px);
}

.shop-item-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.shop-item-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.shop-item-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--accent-gold);
    font-weight: 700;
}

.shop-item-price.diamond-price {
    color: var(--accent-cyan);
}

/* Market Tab */
.market-area h3 {
    color: var(--accent-purple);
    margin-bottom: 10px;
}

.market-desc {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.market-packages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.package {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 20px;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.package:hover {
    transform: translateY(-5px);
    border-color: var(--accent-purple);
}

.package.popular {
    border-color: var(--accent-gold);
    box-shadow: var(--glow-gold);
}

.package.legendary {
    border-color: var(--accent-orange);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.1) 100%);
    box-shadow: var(--glow-legendary);
}

.package-badge {
    position: absolute;
    top: 10px;
    right: -30px;
    background: var(--accent-purple);
    color: white;
    padding: 5px 40px;
    font-size: 0.7rem;
    font-weight: 700;
    transform: rotate(45deg);
}

.package.popular .package-badge {
    background: var(--accent-gold);
    color: var(--bg-primary);
}

.package.legendary .package-badge {
    background: linear-gradient(90deg, var(--accent-orange), var(--accent-red));
}

.package-content {
    text-align: center;
}

.package-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
}

.package h4 {
    font-family: 'Cinzel', serif;
    margin-bottom: 15px;
    color: var(--accent-gold);
}

.package ul {
    list-style: none;
    text-align: left;
    margin-bottom: 15px;
}

.package li {
    padding: 5px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.package-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-green);
}

.currency-shop {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 20px;
}

.currency-shop h4 {
    color: var(--accent-cyan);
    margin-bottom: 15px;
}

.diamond-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.diamond-option {
    background: var(--bg-hover);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
}

.diamond-option:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-3px);
}

.diamond-option.best-value {
    border-color: var(--accent-gold);
    box-shadow: var(--glow-gold);
}

.diamond-option span {
    display: block;
}

.diamond-price {
    color: var(--accent-green);
    font-weight: 700;
    margin-top: 5px;
}

.best-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gold);
    color: var(--bg-primary);
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
}

/* ============================================
   INVENTORY PANEL
   ============================================ */
.inventory-panel {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--border-radius);
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 180px);
    overflow: hidden;
}

.inventory-panel h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--accent-cyan);
    text-align: center;
}

.inventory-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.inv-filter {
    flex: 1;
    padding: 8px;
    background: var(--bg-card);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.inv-filter:hover {
    background: var(--bg-hover);
}

.inv-filter.active {
    background: var(--accent-cyan);
    color: var(--bg-primary);
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    flex: 1;
    overflow-y: auto;
    padding: 5px;
    align-content: start;
}

.inventory-item {
    width: 100%;
    aspect-ratio: 1;
    min-height: 50px;
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.inventory-item:hover {
    border-color: var(--accent-purple);
    transform: scale(1.08);
    z-index: 5;
    box-shadow: 0 5px 20px rgba(168, 85, 247, 0.3);
}

/* ============================================
   ITEM TOOLTIP
   ============================================ */
.item-tooltip {
    position: fixed;
    z-index: 10000;
    background: linear-gradient(135deg, rgba(20, 20, 35, 0.98) 0%, rgba(30, 30, 50, 0.98) 100%);
    border: 2px solid rgba(150, 100, 255, 0.5);
    border-radius: 12px;
    padding: 0;
    min-width: 220px;
    max-width: 280px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(150, 100, 255, 0.2);
    pointer-events: none;
    animation: tooltipFadeIn 0.15s ease;
    backdrop-filter: blur(10px);
}

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

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid;
    border-radius: 10px 10px 0 0;
    background: rgba(0, 0, 0, 0.3);
}

.tooltip-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.tooltip-name {
    font-weight: 700;
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.tooltip-rarity {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.tooltip-stats {
    padding: 10px 15px;
}

.tooltip-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.85rem;
    color: #ccc;
}

.tooltip-stat span:first-child {
    color: #999;
}

.tooltip-stat span:last-child {
    font-weight: 600;
}

.tooltip-footer {
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 10px 10px;
    text-align: center;
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.inventory-item .item-icon {
    font-size: 1.8rem;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.inventory-item .enhance-level {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Rarity borders */
.inventory-item.common, .inventory-item.rarity-common { border-color: var(--rarity-common); }
.inventory-item.uncommon, .inventory-item.rarity-uncommon { border-color: var(--rarity-uncommon); }
.inventory-item.rare, .inventory-item.rarity-rare { border-color: var(--rarity-rare); }
.inventory-item.epic, .inventory-item.rarity-epic { border-color: var(--rarity-epic); }
.inventory-item.legendary, .inventory-item.rarity-legendary { border-color: var(--rarity-legendary); }
.inventory-item.mythic, .inventory-item.rarity-mythic { border-color: var(--rarity-mythic); }

/* Rarity hover effects with rarity- prefix */
.inventory-item.rarity-common:hover { box-shadow: 0 0 15px rgba(156, 163, 175, 0.5); }
.inventory-item.rarity-uncommon:hover { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5); }
.inventory-item.rarity-rare:hover { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
.inventory-item.rarity-epic:hover { box-shadow: 0 0 25px rgba(168, 85, 247, 0.7); }
.inventory-item.rarity-legendary:hover { box-shadow: 0 0 30px rgba(245, 158, 11, 0.8); }
.inventory-item.rarity-mythic:hover { box-shadow: 0 0 35px rgba(239, 68, 68, 0.9), 0 0 50px rgba(255, 100, 100, 0.5); }

/* Enhancement Glow with enhance-glow- prefix */
.enhance-glow-8 { animation: glow-8 2s ease-in-out infinite; box-shadow: 0 0 15px var(--accent-blue), 0 0 30px var(--accent-blue); }
.enhance-glow-9 { animation: glow-9 1.8s ease-in-out infinite; box-shadow: 0 0 20px var(--accent-purple), 0 0 40px var(--accent-purple); }
.enhance-glow-10 { animation: glow-10 1.5s ease-in-out infinite; box-shadow: 0 0 25px var(--accent-gold), 0 0 50px var(--accent-gold); }
.enhance-glow-11 { animation: glow-11 1.3s ease-in-out infinite; box-shadow: 0 0 30px var(--accent-orange), 0 0 60px var(--accent-orange); }
.enhance-glow-12 { animation: glow-12 1s ease-in-out infinite; box-shadow: 0 0 35px var(--accent-red), 0 0 70px var(--accent-red); }
.enhance-glow-13 { animation: glow-13 0.8s ease-in-out infinite; box-shadow: 0 0 40px var(--accent-pink), 0 0 80px var(--accent-pink), 0 0 120px var(--accent-pink); }
.enhance-glow-14 { animation: glow-14 0.6s ease-in-out infinite; box-shadow: 0 0 45px var(--accent-cyan), 0 0 90px var(--accent-cyan), 0 0 135px var(--accent-cyan); }
.enhance-glow-15 { animation: glow-15 0.5s ease-in-out infinite; box-shadow: 0 0 50px white, 0 0 100px var(--accent-gold), 0 0 150px var(--accent-orange); }

/* Enhancement Glow Effects */
.inventory-item.enhance-8,
.equipment-slot.enhance-8 {
    animation: glow-8 2s ease-in-out infinite;
    box-shadow: 0 0 15px var(--accent-blue), 0 0 30px var(--accent-blue);
}

.inventory-item.enhance-9,
.equipment-slot.enhance-9 {
    animation: glow-9 1.8s ease-in-out infinite;
    box-shadow: 0 0 20px var(--accent-purple), 0 0 40px var(--accent-purple);
}

.inventory-item.enhance-10,
.equipment-slot.enhance-10 {
    animation: glow-10 1.5s ease-in-out infinite;
    box-shadow: 0 0 25px var(--accent-gold), 0 0 50px var(--accent-gold);
}

.inventory-item.enhance-11,
.equipment-slot.enhance-11 {
    animation: glow-11 1.3s ease-in-out infinite;
    box-shadow: 0 0 30px var(--accent-orange), 0 0 60px var(--accent-orange);
}

.inventory-item.enhance-12,
.equipment-slot.enhance-12 {
    animation: glow-12 1s ease-in-out infinite;
    box-shadow: 0 0 35px var(--accent-red), 0 0 70px var(--accent-red);
}

.inventory-item.enhance-13,
.equipment-slot.enhance-13 {
    animation: glow-13 0.8s ease-in-out infinite;
    box-shadow: 0 0 40px var(--accent-pink), 0 0 80px var(--accent-pink), 0 0 120px var(--accent-pink);
}

.inventory-item.enhance-14,
.equipment-slot.enhance-14 {
    animation: glow-14 0.6s ease-in-out infinite;
    box-shadow: 0 0 45px var(--accent-cyan), 0 0 90px var(--accent-cyan), 0 0 135px var(--accent-cyan);
}

.inventory-item.enhance-15,
.equipment-slot.enhance-15 {
    animation: glow-15 0.5s ease-in-out infinite;
    box-shadow: 0 0 50px white, 0 0 100px var(--accent-gold), 0 0 150px var(--accent-orange);
}

.inventory-info {
    text-align: center;
    padding-top: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 10px;
}

/* ============================================
   FOOTER
   ============================================ */
.game-footer {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 15px 25px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.footer-stats span span {
    color: var(--accent-gold);
    font-weight: 700;
}

/* ============================================
   MODALS
   ============================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-radius: var(--border-radius);
    padding: 30px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.1);
    animation: modalSlideIn 0.3s ease;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.close-btn:hover {
    color: var(--accent-red);
}

.modal h2 {
    font-family: 'Cinzel', serif;
    color: var(--accent-gold);
    margin-bottom: 20px;
}

/* Cash Modal */
.cash-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.cash-option {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
}

.cash-option:hover {
    border-color: var(--accent-green);
    transform: translateY(-3px);
}

.cash-option.popular {
    border-color: var(--accent-gold);
}

.cash-option.best {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(68, 255, 255, 0.3);
}

.popular-badge,
.cash-option .best-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gold);
    color: var(--bg-primary);
    padding: 3px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
}

.cash-option .best-badge {
    background: var(--accent-cyan);
}

.cash-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-green);
    display: block;
    margin-bottom: 5px;
}

.cash-bonus {
    color: var(--accent-gold);
    font-size: 0.85rem;
}

.payment-methods h3 {
    color: var(--text-primary);
    margin-bottom: 15px;
}

.payment-options {
    display: flex;
    gap: 10px;
}

.payment-btn {
    flex: 1;
    padding: 12px;
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    cursor: pointer;
    transition: var(--transition-fast);
}

.payment-btn:hover {
    background: var(--bg-hover);
}

.payment-btn.active {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* Item Modal */
.item-modal-content {
    max-width: 450px;
}

.item-detail {
    text-align: center;
}

.item-detail-icon {
    font-size: 5rem;
    margin-bottom: 15px;
}

.item-detail-name {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.item-detail-rarity {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.item-detail-rarity.common { background: var(--rarity-common); color: var(--bg-primary); }
.item-detail-rarity.uncommon { background: var(--rarity-uncommon); color: var(--bg-primary); }
.item-detail-rarity.rare { background: var(--rarity-rare); }
.item-detail-rarity.epic { background: var(--rarity-epic); }
.item-detail-rarity.legendary { background: var(--rarity-legendary); color: var(--bg-primary); }
.item-detail-rarity.mythic { background: var(--rarity-mythic); }

.item-detail-stats {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 15px;
    text-align: left;
}

.item-detail-stats .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.item-detail-actions {
    display: flex;
    gap: 10px;
}

.item-detail-actions button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: var(--border-radius);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.equip-btn {
    background: var(--accent-green);
    color: var(--bg-primary);
}

.enhance-item-btn {
    background: var(--accent-gold);
    color: var(--bg-primary);
}

.sell-btn {
    background: var(--accent-red);
    color: white;
}

/* Select Inventory Modal */
.select-inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.select-inventory-grid .inventory-item {
    font-size: 1.5rem;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
}

/* Enhance Result Modal */
.enhance-result-content {
    text-align: center;
    max-width: 400px;
}

.enhance-result {
    padding: 30px 0;
}

.enhance-result-icon {
    font-size: 5rem;
    margin-bottom: 20px;
}

.enhance-result h3 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    margin-bottom: 15px;
}

.enhance-result.success h3 {
    color: var(--accent-green);
    text-shadow: 0 0 20px var(--accent-green);
}

.enhance-result.fail h3 {
    color: var(--accent-red);
}

.enhance-result p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.close-result-btn {
    padding: 12px 40px;
    background: var(--accent-purple);
    border: none;
    border-radius: var(--border-radius);
    color: white;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.close-result-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-epic);
}

/* ============================================
   NOTIFICATIONS
   ============================================ */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification {
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 15px 25px;
    min-width: 300px;
    animation: slideInRight 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification.success {
    border-color: var(--accent-green);
}

.notification.error {
    border-color: var(--accent-red);
}

.notification.warning {
    border-color: var(--accent-orange);
}

.notification.info {
    border-color: var(--accent-cyan);
}

.notification-icon {
    font-size: 1.5rem;
}

.notification-text {
    flex: 1;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes glow-8 {
    0%, 100% { 
        box-shadow: 0 0 15px var(--accent-blue), 0 0 30px var(--accent-blue);
        filter: brightness(1);
    }
    50% { 
        box-shadow: 0 0 25px var(--accent-blue), 0 0 50px var(--accent-blue);
        filter: brightness(1.2);
    }
}

@keyframes glow-9 {
    0%, 100% { 
        box-shadow: 0 0 20px var(--accent-purple), 0 0 40px var(--accent-purple);
        filter: brightness(1);
    }
    50% { 
        box-shadow: 0 0 35px var(--accent-purple), 0 0 70px var(--accent-purple);
        filter: brightness(1.3);
    }
}

@keyframes glow-10 {
    0%, 100% { 
        box-shadow: 0 0 25px var(--accent-gold), 0 0 50px var(--accent-gold);
        filter: brightness(1);
    }
    50% { 
        box-shadow: 0 0 45px var(--accent-gold), 0 0 90px var(--accent-gold);
        filter: brightness(1.4);
    }
}

@keyframes glow-11 {
    0%, 100% { 
        box-shadow: 0 0 30px var(--accent-orange), 0 0 60px var(--accent-orange);
        filter: brightness(1);
    }
    50% { 
        box-shadow: 0 0 55px var(--accent-orange), 0 0 110px var(--accent-orange);
        filter: brightness(1.5);
    }
}

@keyframes glow-12 {
    0%, 100% { 
        box-shadow: 0 0 35px var(--accent-red), 0 0 70px var(--accent-red);
        filter: brightness(1) hue-rotate(0deg);
    }
    50% { 
        box-shadow: 0 0 65px var(--accent-red), 0 0 130px var(--accent-red);
        filter: brightness(1.5) hue-rotate(15deg);
    }
}

@keyframes glow-13 {
    0%, 100% { 
        box-shadow: 0 0 40px var(--accent-pink), 0 0 80px var(--accent-pink), 0 0 120px var(--accent-pink);
        filter: brightness(1) hue-rotate(0deg);
    }
    50% { 
        box-shadow: 0 0 70px var(--accent-pink), 0 0 140px var(--accent-pink), 0 0 210px var(--accent-pink);
        filter: brightness(1.6) hue-rotate(20deg);
    }
}

@keyframes glow-14 {
    0%, 100% { 
        box-shadow: 0 0 45px var(--accent-cyan), 0 0 90px var(--accent-cyan), 0 0 135px var(--accent-cyan);
        filter: brightness(1) hue-rotate(0deg);
    }
    25% {
        filter: brightness(1.4) hue-rotate(30deg);
    }
    50% { 
        box-shadow: 0 0 80px var(--accent-cyan), 0 0 160px var(--accent-cyan), 0 0 240px var(--accent-cyan);
        filter: brightness(1.7) hue-rotate(60deg);
    }
    75% {
        filter: brightness(1.4) hue-rotate(30deg);
    }
}

@keyframes glow-15 {
    0%, 100% { 
        box-shadow: 0 0 50px white, 0 0 100px var(--accent-gold), 0 0 150px var(--accent-orange);
        filter: brightness(1) hue-rotate(0deg);
    }
    25% {
        box-shadow: 0 0 60px var(--accent-cyan), 0 0 120px var(--accent-purple), 0 0 180px var(--accent-pink);
        filter: brightness(1.5) hue-rotate(90deg);
    }
    50% { 
        box-shadow: 0 0 70px var(--accent-green), 0 0 140px var(--accent-blue), 0 0 210px var(--accent-cyan);
        filter: brightness(2) hue-rotate(180deg);
    }
    75% {
        box-shadow: 0 0 60px var(--accent-orange), 0 0 120px var(--accent-red), 0 0 180px var(--accent-pink);
        filter: brightness(1.5) hue-rotate(270deg);
    }
}

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

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

/* ============================================
   PRODUCT KEY SECTION
   ============================================ */
.product-key-section {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(139, 69, 19, 0.1) 100%);
    border: 2px solid var(--accent-gold);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.product-key-section h3 {
    color: var(--accent-gold);
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
}

.product-key-form {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.product-key-form input {
    flex: 1;
    padding: 15px;
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: monospace;
    font-size: 1rem;
    text-transform: uppercase;
}

.product-key-form input:focus {
    outline: none;
    border-color: var(--accent-gold);
}

.product-key-form button {
    padding: 15px 30px;
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-orange) 100%);
    border: none;
    border-radius: 10px;
    color: var(--bg-primary);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-key-form button:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-gold);
}

.product-key-note {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.divider span {
    padding: 0 15px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ============================================
   SERVER BROADCAST
   ============================================ */
.server-broadcast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(153, 102, 255, 0.95) 0%, rgba(68, 136, 255, 0.95) 100%);
    border: 3px solid var(--accent-gold);
    border-radius: 20px;
    padding: 30px 40px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 20px;
    animation: broadcastAppear 0.5s ease;
    box-shadow: 0 0 50px rgba(153, 102, 255, 0.5), 0 0 100px rgba(68, 136, 255, 0.3);
}

@keyframes broadcastAppear {
    from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.broadcast-icon {
    font-size: 3rem;
    animation: pulse 1s infinite;
}

.broadcast-content {
    text-align: center;
}

.broadcast-title {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--accent-gold);
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.broadcast-message {
    font-size: 1.2rem;
    color: white;
}

.server-broadcast button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.server-broadcast button:hover {
    opacity: 1;
}

/* ============================================
   3D ANIMATIONS & EFFECTS
   ============================================ */
.battle-character.player .character-visual {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.battle-character.player.attacking .character-visual {
    animation: attack3D 0.8s ease;
}

@keyframes attack3D {
    0% { transform: translateX(0) rotateY(0deg) scale(1); }
    20% { transform: translateX(-30px) rotateY(-15deg) scale(1.1); }
    40% { transform: translateX(100px) rotateY(30deg) scale(1.3); filter: brightness(1.5); }
    60% { transform: translateX(70px) rotateY(15deg) scale(1.2); }
    100% { transform: translateX(0) rotateY(0deg) scale(1); }
}

.battle-character.monster.attacking .character-visual {
    animation: monsterAttack3D 0.8s ease;
}

@keyframes monsterAttack3D {
    0% { transform: translateX(0) rotateY(0deg) scale(1); }
    20% { transform: translateX(30px) rotateY(15deg) scale(1.1); }
    40% { transform: translateX(-100px) rotateY(-30deg) scale(1.3); filter: brightness(1.5) hue-rotate(20deg); }
    60% { transform: translateX(-70px) rotateY(-15deg) scale(1.2); }
    100% { transform: translateX(0) rotateY(0deg) scale(1); }
}

/* 3D Hit Effect */
.battle-character.hit .character-visual {
    animation: hit3D 0.6s ease;
}

@keyframes hit3D {
    0% { transform: translateX(0) rotateZ(0deg) scale(1); }
    15% { transform: translateX(-20px) rotateZ(-10deg) scale(0.95); filter: brightness(3); }
    30% { transform: translateX(20px) rotateZ(10deg) scale(1.05); filter: brightness(0.5); }
    45% { transform: translateX(-15px) rotateZ(-5deg) scale(0.98); }
    60% { transform: translateX(10px) rotateZ(5deg) scale(1.02); }
    100% { transform: translateX(0) rotateZ(0deg) scale(1); }
}

/* 3D Card Hover Effect */
.package, .shop-item, .zone-card {
    transform-style: preserve-3d;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateY(-10px);
}

.shop-item:hover {
    transform: perspective(500px) rotateX(3deg) rotateY(-3deg) translateY(-5px);
}

.zone-card:hover {
    transform: perspective(500px) rotateX(5deg) translateY(-5px);
}

/* Skill Button 3D Effect */
.skill-btn {
    transform-style: preserve-3d;
}

.skill-btn:hover:not(:disabled) {
    transform: perspective(500px) rotateX(-10deg) translateY(-10px) scale(1.1);
}

.skill-btn:active:not(:disabled) {
    transform: perspective(500px) rotateX(5deg) scale(0.95);
}

/* Enhancement Forge 3D */
.enhance-forge {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.enhance-item-slot, .enhance-result-slot {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.enhance-item-slot:hover {
    transform: perspective(500px) rotateY(10deg) scale(1.05);
}

/* Inventory Item 3D Hover */
.inventory-item {
    transform-style: preserve-3d;
    transition: all 0.2s ease;
}

.inventory-item:hover {
    transform: perspective(300px) rotateX(-5deg) rotateY(5deg) scale(1.1) translateZ(10px);
    z-index: 10;
}

/* 3D Damage Numbers */
.damage-number {
    transform-style: preserve-3d;
}

.damage-number.crit {
    animation: damageCrit3D 2s ease-out forwards;
}

@keyframes damageCrit3D {
    0% { transform: translate(-50%, 0) scale(0.2) rotateX(90deg); opacity: 0; }
    10% { transform: translate(-50%, -20px) scale(2.5) rotateX(-10deg); opacity: 1; }
    30% { transform: translate(-50%, -60px) scale(1.8) rotateX(5deg) rotateY(10deg); }
    50% { transform: translate(-50%, -100px) scale(1.4) rotateX(-5deg) rotateY(-10deg); }
    100% { transform: translate(-50%, -200px) scale(0.7) rotateX(0deg); opacity: 0; }
}

/* Particle Trail Effect */
.particle-trail {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent-gold);
    border-radius: 50%;
    pointer-events: none;
    animation: particleTrail 1s ease-out forwards;
}

@keyframes particleTrail {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0) translateY(-100px); opacity: 0; }
}

/* Energy Wave Effect */
.energy-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 3px solid var(--accent-cyan);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: energyWave 0.8s ease-out forwards;
}

@keyframes energyWave {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(10); opacity: 0; }
}

/* Lightning Effect */
.lightning-effect {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--accent-cyan), white, var(--accent-cyan), transparent);
    transform: translateX(-50%);
    animation: lightning 0.3s ease-out;
    z-index: 1000;
}

@keyframes lightning {
    0% { opacity: 0; transform: translateX(-50%) scaleY(0); }
    30% { opacity: 1; transform: translateX(-50%) scaleY(1.2); }
    60% { opacity: 0.5; transform: translateX(-50%) scaleY(0.8); }
    100% { opacity: 0; transform: translateX(-50%) scaleY(0); }
}

/* Enhance glow animation for item in slot */
.enhance-item-slot.has-item.glowing {
    animation: enhanceGlow 1s ease-in-out infinite;
}

@keyframes enhanceGlow {
    0%, 100% {
        box-shadow: 0 0 20px var(--accent-gold);
    }
    50% {
        box-shadow: 0 0 40px var(--accent-gold), 0 0 60px var(--accent-orange);
    }
}

/* ============================================
   ENHANCED VISUAL EFFECTS - NEW!
   ============================================ */

/* Aurora Background Animation */
@keyframes aurora {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, 
            rgba(255, 0, 128, 0.03) 0%,
            rgba(0, 255, 255, 0.03) 25%,
            rgba(128, 0, 255, 0.03) 50%,
            rgba(0, 255, 128, 0.03) 75%,
            rgba(255, 128, 0, 0.03) 100%);
    background-size: 400% 400%;
    animation: aurora 20s ease infinite;
    pointer-events: none;
    z-index: -1;
}

/* Floating Particles Background */
.game-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 100px 100px, rgba(255, 215, 0, 0.3), transparent),
        radial-gradient(2px 2px at 200px 150px, rgba(100, 200, 255, 0.3), transparent),
        radial-gradient(2px 2px at 300px 250px, rgba(255, 100, 200, 0.3), transparent),
        radial-gradient(2px 2px at 400px 50px, rgba(100, 255, 200, 0.3), transparent),
        radial-gradient(3px 3px at 500px 200px, rgba(255, 150, 50, 0.4), transparent),
        radial-gradient(2px 2px at 600px 100px, rgba(150, 100, 255, 0.3), transparent),
        radial-gradient(2px 2px at 700px 300px, rgba(255, 255, 100, 0.3), transparent),
        radial-gradient(3px 3px at 800px 180px, rgba(100, 255, 255, 0.4), transparent),
        radial-gradient(2px 2px at 150px 280px, rgba(255, 100, 100, 0.3), transparent),
        radial-gradient(2px 2px at 250px 380px, rgba(100, 100, 255, 0.3), transparent);
    animation: floatingParticles 30s linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

@keyframes floatingParticles {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100vh); }
}

/* Neon Text Effects */
.neon-gold {
    color: var(--accent-gold);
    text-shadow: 
        0 0 5px var(--accent-gold),
        0 0 10px var(--accent-gold),
        0 0 20px var(--accent-orange),
        0 0 40px var(--accent-orange);
}

.neon-cyan {
    color: var(--accent-cyan);
    text-shadow: 
        0 0 5px var(--accent-cyan),
        0 0 10px var(--accent-cyan),
        0 0 20px var(--accent-blue),
        0 0 40px var(--accent-blue);
}

.neon-purple {
    color: var(--accent-purple);
    text-shadow: 
        0 0 5px var(--accent-purple),
        0 0 10px var(--accent-purple),
        0 0 20px var(--accent-pink),
        0 0 40px var(--accent-pink);
}

/* Holographic Effect */
.holographic {
    background: linear-gradient(
        135deg,
        hsl(0, 100%, 70%) 0%,
        hsl(60, 100%, 70%) 16.67%,
        hsl(120, 100%, 70%) 33.33%,
        hsl(180, 100%, 70%) 50%,
        hsl(240, 100%, 70%) 66.67%,
        hsl(300, 100%, 70%) 83.33%,
        hsl(360, 100%, 70%) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holographic 3s ease infinite;
}

@keyframes holographic {
    0% { background-position: 0% 50%; filter: hue-rotate(0deg); }
    50% { background-position: 100% 50%; filter: hue-rotate(30deg); }
    100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
}

/* Glass Morphism Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Enhanced Currency Bar */
.currency {
    background: linear-gradient(135deg, 
        rgba(30, 30, 50, 0.9) 0%, 
        rgba(50, 50, 80, 0.9) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.currency.gold {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 4px 20px rgba(255, 215, 0, 0.15),
        inset 0 1px 0 rgba(255, 215, 0, 0.1);
}

.currency.diamond {
    border-color: rgba(68, 255, 255, 0.3);
    box-shadow: 
        0 4px 20px rgba(68, 255, 255, 0.15),
        inset 0 1px 0 rgba(68, 255, 255, 0.1);
}

.currency.cash {
    border-color: rgba(68, 255, 136, 0.3);
    box-shadow: 
        0 4px 20px rgba(68, 255, 136, 0.15),
        inset 0 1px 0 rgba(68, 255, 136, 0.1);
}

/* Animated Border Effect */
@keyframes borderGlow {
    0%, 100% { border-color: var(--accent-purple); box-shadow: 0 0 20px rgba(153, 102, 255, 0.3); }
    25% { border-color: var(--accent-cyan); box-shadow: 0 0 20px rgba(68, 255, 255, 0.3); }
    50% { border-color: var(--accent-gold); box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
    75% { border-color: var(--accent-pink); box-shadow: 0 0 20px rgba(255, 68, 170, 0.3); }
}

.animated-border {
    animation: borderGlow 8s linear infinite;
}

/* Enhanced Battle Arena Effects */
.battle-arena {
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 50%, rgba(255, 0, 100, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(0, 200, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(150, 50, 255, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #0a0a15 0%, #1a0a2e 50%, #0f0f1a 100%);
}

/* Electric Effect */
@keyframes electric {
    0%, 100% { 
        text-shadow: 
            0 0 5px #fff,
            0 0 10px #fff,
            0 0 20px var(--accent-cyan),
            0 0 40px var(--accent-cyan);
    }
    10%, 30%, 50%, 70%, 90% { 
        text-shadow: none;
    }
    20%, 40%, 60%, 80% { 
        text-shadow: 
            0 0 5px #fff,
            0 0 10px var(--accent-cyan),
            0 0 15px var(--accent-blue);
    }
}

.electric-text {
    animation: electric 2s steps(1) infinite;
}

/* Pulse Ring Effect */
.pulse-ring {
    position: relative;
}

.pulse-ring::before,
.pulse-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid var(--accent-gold);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulseRing 2s ease-out infinite;
}

.pulse-ring::after {
    animation-delay: 1s;
}

@keyframes pulseRing {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Magic Circle Effect */
.magic-circle {
    position: relative;
}

.magic-circle::before {
    content: '⭐';
    position: absolute;
    font-size: 1rem;
    animation: magicOrbit 3s linear infinite;
}

@keyframes magicOrbit {
    0% { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

/* Shimmer Effect for Cards */
.shimmer-effect {
    position: relative;
    overflow: hidden;
}

.shimmer-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: shimmerMove 3s ease-in-out infinite;
}

@keyframes shimmerMove {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Enhanced Tab Buttons */
.tab-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.9) 0%, rgba(50, 50, 80, 0.9) 100%);
}

.tab-btn::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;
}

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

.tab-btn.active {
    background: linear-gradient(135deg, 
        var(--accent-purple) 0%, 
        var(--accent-blue) 50%,
        var(--accent-cyan) 100%);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

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

/* Enhanced Zone Cards */
.zone-card {
    background: linear-gradient(135deg, 
        rgba(30, 30, 50, 0.9) 0%, 
        rgba(50, 50, 80, 0.9) 100%);
    position: relative;
    overflow: hidden;
}

.zone-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        transparent 50%);
    pointer-events: none;
}

.zone-card:hover {
    background: linear-gradient(135deg, 
        rgba(255, 140, 0, 0.2) 0%, 
        rgba(255, 100, 50, 0.1) 100%);
    border-color: var(--accent-orange);
    box-shadow: 
        0 0 20px rgba(255, 140, 0, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.3);
}

.zone-card.selected {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.2) 0%, 
        rgba(255, 165, 0, 0.1) 100%);
    animation: selectedPulse 2s ease-in-out infinite;
}

@keyframes selectedPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 165, 0, 0.3); }
}

/* Colorful Skill Buttons */
.skill-btn.attack {
    background: linear-gradient(135deg, 
        rgba(255, 68, 68, 0.2) 0%, 
        rgba(30, 30, 50, 0.9) 100%);
}

.skill-btn.skill {
    background: linear-gradient(135deg, 
        rgba(168, 85, 247, 0.2) 0%, 
        rgba(30, 30, 50, 0.9) 100%);
}

.skill-btn.defense {
    background: linear-gradient(135deg, 
        rgba(68, 136, 255, 0.2) 0%, 
        rgba(30, 30, 50, 0.9) 100%);
}

.skill-btn.heal {
    background: linear-gradient(135deg, 
        rgba(68, 255, 136, 0.2) 0%, 
        rgba(30, 30, 50, 0.9) 100%);
}

.skill-btn.ultimate {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.3) 0%, 
        rgba(255, 100, 50, 0.2) 50%,
        rgba(30, 30, 50, 0.9) 100%);
}

/* Inventory Item Hover Effects */
.inventory-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.inventory-item:hover::before {
    opacity: 1;
}

/* Rarity Glow Effects */
.inventory-item.common:hover { box-shadow: 0 0 15px rgba(156, 163, 175, 0.5); }
.inventory-item.uncommon:hover { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5); }
.inventory-item.rare:hover { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
.inventory-item.epic:hover { box-shadow: 0 0 25px rgba(168, 85, 247, 0.7); }
.inventory-item.legendary:hover { box-shadow: 0 0 30px rgba(245, 158, 11, 0.8); }
.inventory-item.mythic:hover { box-shadow: 0 0 35px rgba(239, 68, 68, 0.9), 0 0 50px rgba(255, 100, 100, 0.5); }

/* Shop Item Rainbow Border on Hover */
.shop-item:hover {
    background: linear-gradient(135deg, 
        rgba(68, 255, 136, 0.1) 0%, 
        rgba(30, 30, 50, 0.95) 100%);
}

.shop-item.legendary {
    border-color: var(--rarity-legendary);
    animation: legendaryGlow 2s ease-in-out infinite;
}

.shop-item.mythic {
    border-color: var(--rarity-mythic);
    animation: mythicGlow 1.5s ease-in-out infinite;
}

@keyframes legendaryGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.6), 0 0 40px rgba(255, 200, 50, 0.3); }
}

@keyframes mythicGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.7), 0 0 50px rgba(255, 100, 100, 0.4); }
}

/* Enhanced Login Screen */
.login-screen {
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(255, 0, 128, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 200, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(128, 0, 255, 0.1) 0%, transparent 60%),
        linear-gradient(135deg, #0a0a15 0%, #1a1a2e 50%, #0f0f1a 100%);
}

.login-container {
    background: 
        linear-gradient(135deg, rgba(20, 20, 35, 0.98) 0%, rgba(30, 30, 50, 0.95) 100%);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 215, 0, 0.2);
    box-shadow: 
        0 0 60px rgba(255, 215, 0, 0.15),
        0 0 120px rgba(102, 51, 153, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.login-logo h1 {
    background: linear-gradient(135deg, 
        var(--accent-gold) 0%, 
        var(--accent-orange) 30%,
        var(--accent-gold) 50%,
        var(--accent-orange) 70%,
        var(--accent-gold) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    animation: goldShimmer 3s ease infinite;
}

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

/* Enhanced Battle HP Bars */
.battle-hp-bar {
    position: relative;
    overflow: hidden;
}

.battle-hp-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    animation: hpShimmer 2s ease-in-out infinite;
}

@keyframes hpShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Enhanced Damage Numbers with Colors */
.damage-number.damage {
    background: linear-gradient(180deg, #ff4444, #ff0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 10px rgba(255, 68, 68, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

/* Confetti Effect for Victory */
@keyframes confetti {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -10px;
    animation: confetti 3s ease-out forwards;
}

/* Fire Trail Effect */
@keyframes fireTrail {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0) translateY(-50px); }
}

.fire-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ffff00, #ff8800, #ff4400);
    border-radius: 50%;
    animation: fireTrail 0.5s ease-out forwards;
}

/* Enhanced Enhancement Forge */
.enhance-forge {
    background: 
        radial-gradient(ellipse at 50% 100%, rgba(255, 100, 0, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 0%, rgba(255, 50, 0, 0.2) 0%, transparent 40%),
        linear-gradient(180deg, #1a0a0a 0%, #2a1515 50%, #1a0a0a 100%);
}

/* Notification Enhancement */
.notification {
    background: linear-gradient(135deg, 
        rgba(30, 30, 50, 0.95) 0%, 
        rgba(50, 50, 80, 0.95) 100%);
    backdrop-filter: blur(10px);
}

.notification.success {
    background: linear-gradient(135deg, 
        rgba(30, 80, 50, 0.95) 0%, 
        rgba(50, 100, 70, 0.95) 100%);
    border-color: var(--accent-green);
    box-shadow: 0 0 20px rgba(68, 255, 136, 0.3);
}

.notification.error {
    background: linear-gradient(135deg, 
        rgba(80, 30, 30, 0.95) 0%, 
        rgba(100, 50, 50, 0.95) 100%);
    border-color: var(--accent-red);
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.3);
}

.notification.warning {
    background: linear-gradient(135deg, 
        rgba(80, 60, 30, 0.95) 0%, 
        rgba(100, 80, 50, 0.95) 100%);
    border-color: var(--accent-orange);
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.3);
}

/* Enhanced Footer */
.game-footer {
    background: linear-gradient(135deg, 
        rgba(18, 18, 26, 0.95) 0%, 
        rgba(26, 26, 37, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.footer-stats span {
    position: relative;
    padding: 5px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

/* Cyber Grid Background Effect */
.cyber-grid {
    background-image: 
        linear-gradient(rgba(68, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(68, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

/* Heal Particle Animation */
@keyframes healParticle {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-50px) scale(1.5); opacity: 0.8; }
    100% { transform: translateY(-100px) scale(0); opacity: 0; }
}

/* Golden Pop Animation */
@keyframes goldenPop {
    0% { transform: scale(0); opacity: 0; }
    20% { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(0) translateY(-100px); opacity: 0; }
}

/* Enhanced Character Panel Glow */
.character-panel {
    position: relative;
    overflow: hidden;
}

.character-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(153, 102, 255, 0.1),
        transparent,
        rgba(68, 255, 255, 0.1),
        transparent
    );
    animation: rotateBorder 10s linear infinite;
    pointer-events: none;
}

@keyframes rotateBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Inventory Panel Shine */
.inventory-panel {
    position: relative;
    overflow: hidden;
}

.inventory-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(68, 255, 255, 0.05),
        transparent
    );
    animation: inventoryShine 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes inventoryShine {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

/* Action Panel Gradient Border */
.action-panel {
    position: relative;
    background: 
        linear-gradient(var(--bg-secondary), var(--bg-tertiary)) padding-box,
        linear-gradient(135deg, 
            var(--accent-purple) 0%, 
            var(--accent-blue) 25%,
            var(--accent-cyan) 50%,
            var(--accent-purple) 75%,
            var(--accent-purple) 100%) border-box;
    border: 2px solid transparent;
    background-size: 100% 100%, 400% 400%;
    animation: borderAnimation 8s ease infinite;
}

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

/* Enhanced Level Badge */
.level-badge {
    position: relative;
    overflow: hidden;
}

.level-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: levelShine 3s ease-in-out infinite;
}

@keyframes levelShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Enhanced Currency Counter Animation */
.currency span:nth-child(2) {
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.currency:hover span:nth-child(2) {
    transform: scale(1.1);
    text-shadow: 0 0 10px currentColor;
}

/* Battle Log Entry Animation */
.log-entry {
    animation: logSlideIn 0.3s ease;
}

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

/* Enhanced Battle Button */
.battle-btn {
    position: relative;
    overflow: hidden;
}

.battle-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.battle-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* Package Hover Effects */
.package::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.package:hover::before {
    opacity: 1;
}

/* Legendary Package Special Effects */
.package.legendary::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        var(--accent-gold), 
        var(--accent-orange), 
        var(--accent-red), 
        var(--accent-orange), 
        var(--accent-gold));
    background-size: 300% 300%;
    animation: legendaryBorder 3s ease infinite;
    border-radius: calc(var(--border-radius) + 2px);
    z-index: -1;
}

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

/* Mythic Rarity Pulsing Effect */
.inventory-item.mythic::after,
.shop-item.mythic::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 10px;
    background: linear-gradient(45deg, 
        var(--accent-red), 
        var(--accent-pink), 
        var(--accent-purple), 
        var(--accent-pink), 
        var(--accent-red));
    background-size: 300% 300%;
    animation: mythicPulse 2s ease infinite;
    z-index: -1;
    opacity: 0.5;
}

@keyframes mythicPulse {
    0% { background-position: 0% 50%; opacity: 0.3; }
    50% { background-position: 100% 50%; opacity: 0.7; }
    100% { background-position: 0% 50%; opacity: 0.3; }
}

/* Enhanced Modal Backdrop */
.modal {
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(153, 102, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 0% 100%, rgba(68, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

/* Modal Content Entrance */
.modal.active .modal-content {
    animation: modalEnter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalEnter {
    0% { transform: scale(0.8) translateY(-50px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Diamond Option Sparkle */
.diamond-option::after {
    content: '✦';
    position: absolute;
    font-size: 0.8rem;
    color: var(--accent-cyan);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    top: 5px;
    right: 5px;
}

.diamond-option:hover::after {
    opacity: 1;
    animation: sparkle 0.5s ease infinite;
}

/* Equipment Slot Pulse when empty */
.equipment-slot:not(.has-item) {
    animation: emptySlotPulse 3s ease-in-out infinite;
}

@keyframes emptySlotPulse {
    0%, 100% { border-color: rgba(255, 255, 255, 0.15); }
    50% { border-color: rgba(153, 102, 255, 0.4); }
}

/* Success Rate Display Glow */
.success-rate-display {
    position: relative;
    overflow: hidden;
}

.success-rate-display::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 215, 0, 0.1) 50%,
        transparent 60%
    );
    animation: successRateShine 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes successRateShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Trina Slot Hover Effect */
.trina-slot:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(168, 85, 247, 0.4);
}

.trina-slot.filled {
    background: 
        radial-gradient(ellipse at 50% 50%, rgba(168, 85, 247, 0.3) 0%, transparent 70%),
        linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(100, 50, 200, 0.1) 100%);
}

/* PvP Turn Indicator Animation */
.pvp-turn-indicator {
    animation: turnPulse 1.5s ease-in-out infinite;
}

@keyframes turnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); text-shadow: 0 0 20px currentColor; }
}

/* ============================================
   EPIC MONSTER DEATH ANIMATIONS
   ============================================ */

@keyframes skullAppear {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.5) rotate(20deg); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2) rotate(-10deg); opacity: 1; }
    70% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2) rotate(0deg); opacity: 0; }
}

@keyframes xMarkAppear {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.5) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2) rotate(45deg); opacity: 0; }
}

@keyframes explosionParticle {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

@keyframes shockwave {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 20px; }
    100% { transform: translate(-50%, -50%) scale(10); opacity: 0; border-width: 2px; }
}

@keyframes screenFlash {
    0% { opacity: 0.8; }
    100% { opacity: 0; }
}

/* Enhanced Dying Monster */
.battle-character.dying {
    animation: monsterDeathEnhanced 1.5s ease forwards;
}

.battle-character.dying .character-visual {
    animation: monsterVisualDeath 1.5s ease forwards;
}

@keyframes monsterDeathEnhanced {
    0% { filter: brightness(1); }
    20% { filter: brightness(3) saturate(0); transform: scale(1.2); }
    40% { filter: brightness(0.5) hue-rotate(180deg); transform: scale(0.9) rotate(10deg); }
    60% { filter: brightness(2) sepia(1); transform: scale(1.1) rotate(-10deg); }
    80% { filter: brightness(0.3); transform: scale(0.5) rotate(20deg); opacity: 0.5; }
    100% { filter: brightness(0); transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes monsterVisualDeath {
    0% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-30px) scale(1.3); }
    50% { transform: translateY(10px) scale(0.8) rotate(15deg); }
    75% { transform: translateY(-10px) scale(0.5) rotate(-20deg); }
    100% { transform: translateY(50px) scale(0) rotate(180deg); }
}

/* ============================================
   NEW SMOOTH DEATH ANIMATION
   ============================================ */
@keyframes monsterDeathSkull {
    0% { opacity: 0; transform: scale(0) rotate(-30deg); }
    30% { opacity: 1; transform: scale(1.3) rotate(10deg); }
    50% { opacity: 1; transform: scale(1) rotate(-5deg); }
    80% { opacity: 0.8; transform: scale(1.1) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.5) rotate(0deg); }
}

@keyframes deathParticle {
    0% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1);
    }
    100% { 
        opacity: 0; 
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
    }
}

@keyframes subtleShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px) rotate(-0.5deg); }
    40% { transform: translateX(5px) rotate(0.5deg); }
    60% { transform: translateX(-3px) rotate(-0.3deg); }
    80% { transform: translateX(3px) rotate(0.3deg); }
}

/* ============================================
   PURCHASE CONFIRMATION MODAL
   ============================================ */
@keyframes scale-in {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.animate-scale-in {
    animation: scale-in 0.2s ease-out forwards;
}

#purchase-confirm-modal .glass {
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.2);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1400px) {
    .game-main {
        grid-template-columns: 250px 1fr 250px;
    }
}

@media (max-width: 1200px) {
    .game-main {
        grid-template-columns: 1fr;
    }
    
    .character-panel,
    .inventory-panel {
        display: none;
    }
    
    .market-packages {
        grid-template-columns: 1fr;
    }
    
    .diamond-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .game-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .currency-bar {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .tabs {
        flex-wrap: wrap;
    }
    
    .cash-options {
        grid-template-columns: repeat(2, 1fr);
    }
}