/* ============================================
   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;
    
    /* 3D Perspective Variables */
    --perspective-main: 1200px;
    --perspective-card: 800px;
    --depth-small: 5px;
    --depth-medium: 15px;
    --depth-large: 30px;
    
    /* 3D Shadow Layers */
    --shadow-3d-light: 
        0 1px 1px rgba(0,0,0,0.15),
        0 2px 2px rgba(0,0,0,0.15),
        0 4px 4px rgba(0,0,0,0.15),
        0 8px 8px rgba(0,0,0,0.15);
    --shadow-3d-medium: 
        0 2px 2px rgba(0,0,0,0.2),
        0 4px 4px rgba(0,0,0,0.2),
        0 8px 8px rgba(0,0,0,0.2),
        0 16px 16px rgba(0,0,0,0.2),
        0 32px 32px rgba(0,0,0,0.15);
    --shadow-3d-heavy:
        0 2px 2px rgba(0,0,0,0.25),
        0 4px 4px rgba(0,0,0,0.25),
        0 8px 8px rgba(0,0,0,0.2),
        0 16px 16px rgba(0,0,0,0.15),
        0 32px 32px rgba(0,0,0,0.1),
        0 64px 64px rgba(0,0,0,0.05);
}

/* 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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    perspective: 2000px;
    transform-style: preserve-3d;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.01em;
    background-image: 
        radial-gradient(ellipse at 20% 20%, rgba(102, 51, 153, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(51, 102, 153, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(80, 40, 120, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(20, 20, 30, 1) 0%, var(--bg-primary) 100%);
}

/* ============================================
   IMPROVED FONT READABILITY
   ============================================ */

/* Small text should be more readable */
small, .text-xs, [class*="text-xs"] {
    font-size: 0.8rem !important;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.text-sm, [class*="text-sm"] {
    font-size: 0.9rem !important;
    font-weight: 500;
}

/* Very small text needs extra help */
[class*="text-[8px]"], [class*="text-[10px]"] {
    font-size: 0.75rem !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Numbers should use monospace for better alignment */
[id*="-amount"], [id*="-count"], [id*="-hp"], [id*="-level"], .font-mono {
    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
    font-weight: 600;
    letter-spacing: 0;
}

/* Improved label text */
label, .label {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Better button text */
button, .btn, [role="button"] {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Stats and values should be clear */
.stat-value, .currency-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}

/* Global 3D Transform Support */
.game-container,
.game-main,
.sidebar,
.action-panel {
    transform-style: preserve-3d;
}

/* ============================================
   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: 12px;
    margin-bottom: 20px;
    perspective: 800px;
}

.tab-btn {
    flex: 1;
    padding: 14px 22px;
    background: linear-gradient(180deg, rgba(40, 40, 60, 0.95) 0%, rgba(25, 25, 40, 0.98) 100%);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: perspective(500px) rotateX(5deg);
    box-shadow: 
        0 4px 0 rgba(0,0,0,0.3),
        0 6px 15px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
}

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

.tab-btn:hover {
    background: linear-gradient(180deg, rgba(50, 50, 70, 0.98) 0%, rgba(35, 35, 55, 1) 100%);
    color: var(--text-primary);
    transform: perspective(500px) rotateX(0deg) translateY(-3px);
    box-shadow: 
        0 8px 0 rgba(0,0,0,0.25),
        0 15px 30px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.15);
}

.tab-btn:active {
    transform: perspective(500px) rotateX(8deg) translateY(2px);
    box-shadow: 
        0 2px 0 rgba(0,0,0,0.3),
        0 4px 10px rgba(0,0,0,0.2);
}

.tab-btn.active {
    background: linear-gradient(180deg, rgba(150, 100, 255, 0.9) 0%, rgba(100, 70, 200, 0.95) 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;
}

/* ========================================
   3D PROFESSIONAL BATTLE ARENA
   ======================================== */

/* Base Battle Arena - Full 3D Environment */
.battle-arena {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #030308 0%, #0a0a18 30%, #0d0d20 60%, #151530 100%);
    display: none;
    overflow: hidden;
    z-index: 5000;
    flex-direction: column;
    perspective: 1500px;
    transform-style: preserve-3d;
    box-sizing: border-box;
}

.battle-arena.active {
    display: flex !important;
    animation: arena3DFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes arena3DFadeIn {
    from { 
        opacity: 0; 
        transform: perspective(1500px) rotateX(15deg) scale(0.9);
    }
    to { 
        opacity: 1; 
        transform: perspective(1500px) rotateX(0deg) scale(1);
    }
}

/* 3D Animated Background Layers */
.battle-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* 3D Stars with depth */
.battle-bg-stars {
    background-image: 
        radial-gradient(3px 3px at 20px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,215,0,0.6), transparent),
        radial-gradient(3px 3px at 50px 160px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(147,112,219,0.5), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(3px 3px at 160px 120px, rgba(255,215,0,0.4), transparent),
        radial-gradient(1px 1px at 80px 200px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(100,200,255,0.5), transparent);
    background-size: 250px 250px;
    animation: starTwinkle3D 10s ease-in-out infinite;
    transform: translateZ(-200px) scale(1.3);
}

@keyframes starTwinkle3D {
    0%, 100% { opacity: 0.4; transform: translateZ(-200px) scale(1.3); }
    50% { opacity: 1; transform: translateZ(-180px) scale(1.35); }
}

/* 3D Nebula/Particles */
.battle-bg-particles {
    background: 
        radial-gradient(ellipse 100% 60% at 50% 120%, rgba(80, 40, 120, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 20% 90%, rgba(255, 80, 30, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 80% 90%, rgba(50, 100, 200, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
    animation: nebulaPulse3D 8s ease-in-out infinite;
    transform: translateZ(-100px);
}

@keyframes nebulaPulse3D {
    0%, 100% { opacity: 0.5; transform: translateZ(-100px) scale(1); }
    50% { opacity: 0.9; transform: translateZ(-80px) scale(1.05); }
}

.battle-bg-vignette {
    background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.95) 100%);
    transform: translateZ(-50px);
}

/* 3D Ground with perspective */
.battle-ground {
    position: absolute;
    bottom: 0;
    left: -20%;
    right: -20%;
    height: 35%;
    background: 
        linear-gradient(180deg, 
            transparent 0%, 
            rgba(40, 20, 60, 0.3) 20%,
            rgba(60, 30, 80, 0.4) 40%,
            rgba(80, 40, 100, 0.5) 60%,
            rgba(50, 25, 70, 0.7) 80%,
            rgba(30, 15, 50, 0.9) 100%
        );
    transform: perspective(1000px) rotateX(60deg) translateZ(-50px);
    transform-origin: center bottom;
    border-top: 3px solid rgba(150, 100, 255, 0.4);
    box-shadow: 
        0 -5px 30px rgba(150, 100, 255, 0.3),
        0 -10px 60px rgba(100, 50, 200, 0.2),
        inset 0 50px 100px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* 3D Ground Grid Lines */
.battle-ground::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 80px,
            rgba(150, 100, 255, 0.15) 80px,
            rgba(150, 100, 255, 0.15) 82px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 40px,
            rgba(150, 100, 255, 0.1) 40px,
            rgba(150, 100, 255, 0.1) 42px
        );
    animation: gridMove 20s linear infinite;
}

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

/* Glowing horizon line */
.battle-ground::after {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    right: -10%;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 150, 100, 0.5) 20%,
        rgba(255, 200, 150, 0.8) 50%,
        rgba(255, 150, 100, 0.5) 80%,
        transparent 100%
    );
    box-shadow: 
        0 0 20px rgba(255, 150, 100, 0.6),
        0 0 40px rgba(255, 100, 50, 0.4),
        0 0 80px rgba(255, 50, 0, 0.2);
    animation: horizonPulse 3s ease-in-out infinite;
}

@keyframes horizonPulse {
    0%, 100% { opacity: 0.7; box-shadow: 0 0 20px rgba(255, 150, 100, 0.6), 0 0 40px rgba(255, 100, 50, 0.4); }
    50% { opacity: 1; box-shadow: 0 0 30px rgba(255, 150, 100, 0.8), 0 0 60px rgba(255, 100, 50, 0.6), 0 0 100px rgba(255, 50, 0, 0.3); }
}

/* 3D Top HUD Bar */
.battle-hud-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(10,10,30,0.8) 60%, transparent 100%);
    position: relative;
    z-index: 100;
    transform-style: preserve-3d;
    border-bottom: 1px solid rgba(255,215,0,0.2);
    box-shadow: 0 5px 30px rgba(0,0,0,0.5);
}

.battle-zone-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(20,20,40,0.9) 0%, rgba(10,10,25,0.95) 100%);
    padding: 10px 18px;
    border-radius: 12px;
    border: 2px solid rgba(255,215,0,0.3);
    box-shadow: 
        var(--shadow-3d-light),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 20px rgba(255,215,0,0.1);
    transform: perspective(500px) rotateX(5deg);
    transition: all 0.3s ease;
}

.battle-zone-info:hover {
    transform: perspective(500px) rotateX(0deg) translateY(-2px);
    box-shadow: var(--shadow-3d-medium), 0 0 30px rgba(255,215,0,0.2);
}

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

.battle-zone-name {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 20px rgba(255,215,0,0.3);
}

.battle-title-container {
    position: relative;
    text-align: center;
    transform-style: preserve-3d;
}

.battle-title-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(-20px);
    width: 400px;
    height: 80px;
    background: radial-gradient(ellipse, rgba(255,215,0,0.4) 0%, rgba(255,165,0,0.2) 40%, transparent 70%);
    filter: blur(25px);
    animation: titleGlow3D 3s ease-in-out infinite;
}

@keyframes titleGlow3D {
    0%, 100% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) translateZ(-20px) scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: translate(-50%, -50%) translateZ(-10px) scale(1.3); 
    }
}

.battle-title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent-gold);
    text-shadow: 
        0 0 10px rgba(255,215,0,0.8),
        0 0 20px rgba(255,215,0,0.6),
        0 0 40px rgba(255,165,0,0.4),
        0 4px 0 #8B6914,
        0 5px 0 #6B5010,
        0 6px 10px rgba(0,0,0,0.8);
    letter-spacing: 6px;
    position: relative;
    transform: perspective(500px) rotateX(-5deg);
    animation: titleFloat 4s ease-in-out infinite;
}

@keyframes titleFloat {
    0%, 100% { transform: perspective(500px) rotateX(-5deg) translateY(0); }
    50% { transform: perspective(500px) rotateX(-3deg) translateY(-3px); }
}

.battle-exit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #8B0000 0%, #5C0000 50%, #3C0000 100%);
    border: 2px solid rgba(255, 100, 100, 0.6);
    padding: 12px 22px;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: perspective(500px) rotateX(5deg);
    box-shadow: 
        var(--shadow-3d-light),
        inset 0 1px 0 rgba(255,150,150,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.3),
        0 0 15px rgba(255,50,50,0.2);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.battle-exit-btn:hover {
    background: linear-gradient(180deg, #B00000 0%, #7C0000 50%, #5C0000 100%);
    transform: perspective(500px) rotateX(0deg) translateY(-3px) scale(1.05);
    box-shadow: 
        var(--shadow-3d-medium),
        0 0 30px rgba(255, 100, 100, 0.5),
        0 0 60px rgba(255, 50, 50, 0.3);
}

.battle-exit-btn:active {
    transform: perspective(500px) rotateX(10deg) translateY(2px) scale(0.98);
}

/* 3D Main Battle Area */
.battle-main-area {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 60px 150px 60px; /* Extra bottom padding for skills panel */
    position: relative;
    z-index: 10;
    transform-style: preserve-3d;
    perspective: 1200px;
    max-height: calc(100vh - 80px);
    overflow: visible;
}

/* 3D Combatant Cards */
.battle-combatant {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    animation: combatantIdle 4s ease-in-out infinite;
}

.battle-player {
    animation-delay: 0s;
}

.battle-monster {
    animation-delay: -2s;
}

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

/* 3D Platform with reflection */
.combatant-platform {
    position: absolute;
    bottom: -50px;
    width: 220px;
    height: 100px;
    border-radius: 50%;
    background: 
        radial-gradient(ellipse 100% 40% at 50% 30%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0,0,0,0.7) 0%, transparent 70%);
    transform: perspective(500px) rotateX(70deg);
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

.player-platform {
    background: 
        radial-gradient(ellipse 100% 40% at 50% 30%, rgba(0,200,255,0.2) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0,50,100,0.7) 0%, transparent 70%);
    box-shadow: 
        0 0 50px rgba(0, 200, 255, 0.4),
        0 0 100px rgba(0, 150, 255, 0.2);
    animation: platformPulse 2s ease-in-out infinite;
}

.monster-platform {
    background: 
        radial-gradient(ellipse 100% 40% at 50% 30%, rgba(255,100,50,0.2) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 50% 50%, rgba(100,30,0,0.7) 0%, transparent 70%);
    box-shadow: 
        0 0 50px rgba(255, 100, 50, 0.4),
        0 0 100px rgba(255, 50, 0, 0.2);
    animation: platformPulse 2s ease-in-out infinite;
    animation-delay: -1s;
}

@keyframes platformPulse {
    0%, 100% { opacity: 0.8; transform: perspective(500px) rotateX(70deg) scale(1); }
    50% { opacity: 1; transform: perspective(500px) rotateX(70deg) scale(1.05); }
}

/* 3D Animated Aura */
.combatant-aura {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
    transform-style: preserve-3d;
    animation: aura3DFloat 4s ease-in-out infinite;
}

.player-aura {
    background: 
        radial-gradient(circle, rgba(0, 200, 255, 0.2) 0%, transparent 60%),
        conic-gradient(from 0deg, transparent, rgba(0, 200, 255, 0.1), transparent, rgba(0, 150, 255, 0.1), transparent);
    filter: blur(10px);
    animation-name: playerAura3D;
}

.monster-aura {
    background: 
        radial-gradient(circle, rgba(255, 80, 30, 0.25) 0%, transparent 60%),
        conic-gradient(from 0deg, transparent, rgba(255, 100, 50, 0.15), transparent, rgba(255, 50, 0, 0.1), transparent);
    filter: blur(10px);
    animation-name: monsterAura3D;
    animation-delay: -2s;
}

@keyframes playerAura3D {
    0%, 100% { 
        transform: scale(1) rotateZ(0deg) translateZ(-30px); 
        opacity: 0.5; 
    }
    50% { 
        transform: scale(1.2) rotateZ(180deg) translateZ(-20px); 
        opacity: 0.9; 
    }
}

@keyframes monsterAura3D {
    0%, 100% { 
        transform: scale(1) rotateZ(0deg) translateZ(-30px); 
        opacity: 0.5; 
    }
    50% { 
        transform: scale(1.25) rotateZ(-180deg) translateZ(-20px); 
        opacity: 1; 
    }
}

/* 3D Combatant Card */
.combatant-card {
    background: linear-gradient(180deg, 
        rgba(30, 30, 50, 0.98) 0%, 
        rgba(20, 20, 35, 0.99) 50%,
        rgba(15, 15, 28, 1) 100%
    );
    border-radius: 20px;
    padding: 18px;
    min-width: 240px;
    max-width: 320px;
    border: 2px solid rgba(255,255,255,0.15);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-3d-heavy);
}

/* 3D Shine effect on card */
.combatant-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    border-radius: 24px 24px 0 0;
    pointer-events: none;
}

/* 3D Inner glow */
.combatant-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05) 0%, transparent 50%);
    pointer-events: none;
    transform: translateZ(10px);
}

.battle-player .combatant-card {
    border-color: rgba(0, 200, 255, 0.5);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 200, 255, 0.25),
        inset 0 0 20px rgba(0, 200, 255, 0.05);
}

.battle-player .combatant-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(0, 200, 255, 0.4);
}

.battle-monster .combatant-card {
    border-color: rgba(255, 100, 50, 0.5);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 100, 50, 0.25),
        inset 0 0 20px rgba(255, 100, 50, 0.05);
}

.battle-monster .combatant-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(255, 100, 50, 0.4),
        0 0 100px rgba(255, 50, 0, 0.25);
}

/* 3D Card Header */
.combatant-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    position: relative;
    transform: translateZ(15px);
}

.combatant-card-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.player-header {
    border-bottom-color: rgba(0, 200, 255, 0.4);
}

.player-header::after {
    background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.6), transparent);
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}

.monster-header {
    border-bottom-color: rgba(255, 100, 50, 0.4);
}

.monster-header::after {
    background: linear-gradient(90deg, transparent, rgba(255, 100, 50, 0.6), transparent);
    box-shadow: 0 0 10px rgba(255, 100, 50, 0.5);
}

/* 3D Level Badge */
.combatant-level {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: perspective(200px) rotateX(10deg);
    transition: all 0.3s ease;
}

.battle-player .combatant-level {
    background: linear-gradient(180deg, rgba(0, 220, 255, 0.4) 0%, rgba(0, 100, 200, 0.4) 100%);
    color: var(--accent-cyan);
    border: 2px solid rgba(0, 200, 255, 0.6);
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 15px rgba(0, 200, 255, 0.3);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.battle-monster .combatant-level {
    background: linear-gradient(180deg, rgba(255, 120, 50, 0.4) 0%, rgba(200, 50, 0, 0.4) 100%);
    color: var(--accent-orange);
    border: 2px solid rgba(255, 100, 50, 0.6);
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 15px rgba(255, 100, 50, 0.3);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* 3D Name */
.combatant-name {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    transform: translateZ(10px);
}

.battle-player .combatant-name {
    color: var(--accent-cyan);
    text-shadow: 
        0 0 10px rgba(0, 200, 255, 0.6),
        0 0 20px rgba(0, 200, 255, 0.4),
        0 2px 4px rgba(0,0,0,0.8);
}

.battle-monster .combatant-name {
    color: var(--accent-orange);
    text-shadow: 
        0 0 10px rgba(255, 100, 50, 0.6),
        0 0 20px rgba(255, 100, 50, 0.4),
        0 2px 4px rgba(0,0,0,0.8);
}

/* 3D Character Visual */
.combatant-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    position: relative;
    margin: 10px 0;
}

.char-body {
    font-size: 4.5rem;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.7));
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
}

.player-body {
    animation: player3DIdle 3s ease-in-out infinite;
}

.monster-body {
    animation: monster3DIdle 3.5s ease-in-out infinite;
}

@keyframes player3DIdle {
    0%, 100% { 
        transform: translateY(0) translateZ(0) rotateY(0deg); 
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.7));
    }
    25% { 
        transform: translateY(-8px) translateZ(10px) rotateY(-5deg); 
    }
    50% { 
        transform: translateY(-12px) translateZ(20px) rotateY(0deg); 
        filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 30px rgba(0, 200, 255, 0.3));
    }
    75% { 
        transform: translateY(-8px) translateZ(10px) rotateY(5deg); 
    }
}

@keyframes monster3DIdle {
    0%, 100% { 
        transform: translateY(0) translateZ(0) rotateY(0deg) scale(1); 
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.7));
    }
    25% { 
        transform: translateY(-5px) translateZ(5px) rotateY(5deg) scale(1.02); 
    }
    50% { 
        transform: translateY(-10px) translateZ(15px) rotateY(0deg) scale(1.05); 
        filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 30px rgba(255, 100, 50, 0.3));
    }
    75% { 
        transform: translateY(-5px) translateZ(5px) rotateY(-5deg) scale(1.02); 
    }
}

/* 3D Character Effect */
.char-effect {
    position: absolute;
    width: 150%;
    height: 150%;
    pointer-events: none;
    transform: translateZ(-20px);
    border-radius: 50%;
}

.player-effect {
    background: 
        radial-gradient(circle, rgba(0, 200, 255, 0.2) 0%, transparent 50%),
        conic-gradient(from 0deg, transparent, rgba(0, 200, 255, 0.1), transparent);
    animation: effectRotate 6s linear infinite;
}

.monster-effect {
    background: 
        radial-gradient(circle, rgba(255, 100, 50, 0.2) 0%, transparent 50%),
        conic-gradient(from 0deg, transparent, rgba(255, 100, 50, 0.15), transparent);
    animation: effectRotate 6s linear infinite reverse;
}

@keyframes effectRotate {
    from { transform: translateZ(-20px) rotate(0deg); }
    to { transform: translateZ(-20px) rotate(360deg); }
}

/* 3D HP Section */
.combatant-hp-section {
    margin-top: 15px;
    transform: translateZ(10px);
}

.hp-bar-container {
    position: relative;
    transform-style: preserve-3d;
}

/* 3D HP Bar Background */
.hp-bar-bg {
    height: 28px;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(20,20,30,0.9) 50%, rgba(0,0,0,0.8) 100%);
    border-radius: 14px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.2);
    position: relative;
    transform: perspective(300px) rotateX(10deg);
    box-shadow: 
        inset 0 4px 8px rgba(0,0,0,0.5),
        inset 0 -2px 4px rgba(255,255,255,0.05),
        0 4px 10px rgba(0,0,0,0.4);
}

.player-hp-container .hp-bar-bg {
    border-color: rgba(0, 200, 255, 0.5);
    box-shadow: 
        inset 0 4px 8px rgba(0,0,0,0.5),
        inset 0 -2px 4px rgba(255,255,255,0.05),
        0 4px 10px rgba(0,0,0,0.4),
        0 0 20px rgba(0, 200, 255, 0.2);
}

.monster-hp-container .hp-bar-bg {
    border-color: rgba(255, 100, 50, 0.5);
    box-shadow: 
        inset 0 4px 8px rgba(0,0,0,0.5),
        inset 0 -2px 4px rgba(255,255,255,0.05),
        0 4px 10px rgba(0,0,0,0.4),
        0 0 20px rgba(255, 100, 50, 0.2);
}

/* 3D HP Bar Fill */
.hp-bar-fill {
    height: 100%;
    border-radius: 11px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.player-hp-fill {
    background: linear-gradient(180deg, 
        #00ffcc 0%, 
        #00d4ff 30%, 
        #00aaff 60%, 
        #0088cc 100%
    );
    box-shadow: 
        0 0 20px rgba(0, 200, 255, 0.6),
        0 0 40px rgba(0, 200, 255, 0.3),
        inset 0 2px 0 rgba(255,255,255,0.4);
}

.monster-hp-fill {
    background: linear-gradient(180deg, 
        #ffcc44 0%, 
        #ff8844 30%, 
        #ff5544 60%, 
        #cc3333 100%
    );
    box-shadow: 
        0 0 20px rgba(255, 100, 50, 0.6),
        0 0 40px rgba(255, 100, 50, 0.3),
        inset 0 2px 0 rgba(255,255,255,0.4);
}

/* 3D Shine Animation */
.hp-bar-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255,255,255,0.4) 50%, 
        transparent 100%
    );
    animation: hpShine 3s ease-in-out infinite;
}

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

/* 3D HP Top Highlight */
.hp-bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%);
    border-radius: 11px 11px 0 0;
}

/* Damage Flash */
.hp-bar-damage {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 50, 50, 0.8));
    transition: width 0.3s ease 0.2s;
    border-radius: 0 11px 11px 0;
    animation: damageFlash 0.5s ease-out;
}

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

/* 3D HP Text */
.hp-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-family: 'Orbitron', 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    transform: translateZ(5px);
}

.hp-icon {
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    animation: heartbeat 1.5s ease-in-out infinite;
}

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

.hp-current {
    color: #66ffaa;
    text-shadow: 
        0 0 10px rgba(100, 255, 150, 0.6),
        0 0 20px rgba(100, 255, 150, 0.3),
        0 2px 4px rgba(0,0,0,0.8);
}

.hp-separator {
    color: rgba(255,255,255,0.5);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.hp-max {
    color: rgba(255,255,255,0.8);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* 3D Battle Center - VS */
.battle-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.vs-container {
    display: flex;
    align-items: center;
    gap: 15px;
    animation: vsFloat 3s ease-in-out infinite;
}

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

/* 3D Animated Swords */
.vs-sword {
    font-size: 3rem;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
    transform-style: preserve-3d;
}

.vs-sword-left {
    animation: sword3DLeft 2.5s ease-in-out infinite;
    transform-origin: bottom right;
}

.vs-sword-right {
    animation: sword3DRight 2.5s ease-in-out infinite;
    transform-origin: bottom left;
}

@keyframes sword3DLeft {
    0%, 100% { 
        transform: rotate(-45deg) translateZ(0) scale(1); 
        filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
    }
    25% { 
        transform: rotate(-30deg) translateZ(20px) scale(1.1); 
        filter: drop-shadow(0 10px 20px rgba(255, 215, 0, 0.5));
    }
    50% { 
        transform: rotate(-50deg) translateZ(10px) scale(1.05); 
    }
    75% { 
        transform: rotate(-35deg) translateZ(15px) scale(1.08); 
    }
}

@keyframes sword3DRight {
    0%, 100% { 
        transform: rotate(45deg) scaleX(-1) translateZ(0) scale(1); 
        filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
    }
    25% { 
        transform: rotate(35deg) scaleX(-1) translateZ(15px) scale(1.08); 
    }
    50% { 
        transform: rotate(50deg) scaleX(-1) translateZ(10px) scale(1.05); 
    }
    75% { 
        transform: rotate(30deg) scaleX(-1) translateZ(20px) scale(1.1); 
        filter: drop-shadow(0 10px 20px rgba(255, 215, 0, 0.5));
    }
}

/* 3D VS Text */
.vs-text {
    font-family: 'Cinzel', serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: #ff3333;
    letter-spacing: 6px;
    position: relative;
    animation: vs3DPulse 2s ease-in-out infinite;
    text-shadow: 
        0 0 20px rgba(255, 68, 68, 1),
        0 0 40px rgba(255, 68, 68, 0.8),
        0 0 60px rgba(255, 100, 50, 0.6),
        /* 3D extrusion */
        1px 1px 0 #cc0000,
        2px 2px 0 #bb0000,
        3px 3px 0 #aa0000,
        4px 4px 0 #990000,
        5px 5px 0 #880000,
        6px 6px 0 #770000,
        7px 7px 15px rgba(0,0,0,0.8);
}

/* 3D VS glow effect behind */
.vs-text::before {
    content: 'VS';
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    text-shadow: 
        0 0 60px rgba(255, 215, 0, 0.6),
        0 0 100px rgba(255, 150, 0, 0.4),
        0 0 150px rgba(255, 100, 0, 0.2);
    transform: translateZ(-50px) scale(1.2);
    filter: blur(10px);
    animation: vsGlow 2s ease-in-out infinite;
}

@keyframes vs3DPulse {
    0%, 100% { 
        transform: translateZ(0) scale(1) rotateY(0deg); 
    }
    25% { 
        transform: translateZ(20px) scale(1.05) rotateY(-5deg); 
    }
    50% { 
        transform: translateZ(40px) scale(1.15) rotateY(0deg); 
        text-shadow: 
            0 0 30px rgba(255, 215, 0, 1),
            0 0 60px rgba(255, 215, 0, 0.8),
            0 0 90px rgba(255, 165, 0, 0.6),
            1px 1px 0 #cc0000,
            2px 2px 0 #bb0000,
            3px 3px 0 #aa0000,
            4px 4px 0 #990000,
            5px 5px 0 #880000,
            6px 6px 0 #770000,
            7px 7px 20px rgba(0,0,0,0.8);
    }
    75% { 
        transform: translateZ(20px) scale(1.05) rotateY(5deg); 
    }
}

@keyframes vsGlow {
    0%, 100% { opacity: 0.5; transform: translateZ(-50px) scale(1.2); }
    50% { opacity: 1; transform: translateZ(-30px) scale(1.5); }
}

/* 3D Turn Indicator */
.battle-turn-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(30,30,50,0.95) 0%, rgba(15,15,30,0.98) 100%);
    padding: 12px 25px;
    border-radius: 30px;
    border: 3px solid rgba(255, 215, 0, 0.6);
    transform: perspective(500px) rotateX(15deg);
    box-shadow: 
        var(--shadow-3d-medium),
        0 0 30px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
    animation: turnIndicator3D 2s ease-in-out infinite;
}

@keyframes turnIndicator3D {
    0%, 100% { 
        transform: perspective(500px) rotateX(15deg) translateZ(0);
        box-shadow: var(--shadow-3d-medium), 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% { 
        transform: perspective(500px) rotateX(10deg) translateZ(10px);
        box-shadow: var(--shadow-3d-medium), 0 0 40px rgba(255, 215, 0, 0.5);
    }
}

.turn-arrow {
    color: var(--accent-gold);
    font-size: 1.4rem;
    animation: arrow3DBounce 1s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

@keyframes arrow3DBounce {
    0%, 100% { transform: translateX(0) translateZ(0); }
    50% { transform: translateX(8px) translateZ(5px); }
}

.turn-text {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.5),
        0 2px 4px rgba(0,0,0,0.8);
}

/* Battle Log Mini */
.battle-log-mini {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    max-height: 80px;
    background: rgba(0,0,0,0.7);
    border-radius: 12px;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    z-index: 50;
}

.battle-log-content {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    max-height: 60px;
    overflow-y: auto;
}

.battle-log-content::-webkit-scrollbar {
    width: 4px;
}

.battle-log-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

/* 3D Skills Panel */
.battle-skills-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 40px 30px;
    z-index: 100;
    transform-style: preserve-3d;
    perspective: 1000px;
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(10,10,30,0.8) 70%, transparent 100%);
}

.skills-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(5, 5, 15, 0.9) 20%, 
        rgba(10, 10, 25, 0.98) 50%,
        rgba(15, 15, 35, 1) 100%
    );
    border-top: 3px solid rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 -10px 40px rgba(0,0,0,0.5),
        inset 0 5px 30px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* Glowing border animation */
.skills-bg::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 215, 0, 0.8) 20%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 215, 0, 0.8) 80%,
        transparent 100%
    );
    animation: skillsBorderGlow 3s ease-in-out infinite;
}

@keyframes skillsBorderGlow {
    0%, 100% { opacity: 0.5; filter: blur(2px); }
    50% { opacity: 1; filter: blur(0); }
}

.skills-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 10;
    flex-wrap: wrap;
    max-width: 100%;
    padding: 0 10px;
}

/* 3D Skill Button Design */
.new-skill-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, 
        rgba(40, 40, 60, 0.98) 0%, 
        rgba(25, 25, 40, 0.99) 50%,
        rgba(15, 15, 25, 1) 100%
    );
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 120px;
    max-width: 160px;
    flex: 1;
    box-shadow: 
        0 4px 0 rgba(0,0,0,0.4),
        0 8px 20px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

/* 3D Press effect */
.new-skill-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    border-radius: 15px 15px 0 0;
    pointer-events: none;
}

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

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

.skill-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    transform: translateZ(-10px);
}

.attack-glow { background: radial-gradient(circle, rgba(255, 68, 68, 0.4) 0%, transparent 50%); }
.power-glow { background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 50%); }
.defend-glow { background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 50%); }
.heal-glow { background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, transparent 50%); }
.ultimate-glow { background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, transparent 50%); }

.new-skill-btn:hover:not(:disabled) .skill-glow {
    opacity: 1;
}

/* 3D Skill Icon Wrap */
.skill-icon-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(20,20,30,0.6) 100%);
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.15);
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 
        inset 0 3px 6px rgba(0,0,0,0.4),
        inset 0 -2px 4px rgba(255,255,255,0.05),
        0 4px 8px rgba(0,0,0,0.3);
}

.skill-icon-wrap .skill-icon {
    font-size: 1.5rem;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.skill-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    min-width: 0;
    flex: 1;
}

.skill-info .skill-name {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skill-info .skill-desc {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.6);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
}

/* 3D Skill Key */
.skill-key {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%);
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 1px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    transform: translateZ(8px);
}

/* 3D Skill Button Colors */
.attack-btn {
    border-color: rgba(255, 68, 68, 0.5);
    box-shadow: 
        0 4px 0 rgba(150, 30, 30, 0.8),
        0 8px 20px rgba(255, 68, 68, 0.2),
        inset 0 1px 0 rgba(255,150,150,0.2);
}
.attack-btn .skill-icon-wrap {
    border-color: rgba(255, 68, 68, 0.6);
    background: linear-gradient(180deg, rgba(255, 68, 68, 0.2) 0%, rgba(150, 30, 30, 0.3) 100%);
    box-shadow: inset 0 0 15px rgba(255, 68, 68, 0.2);
}
.attack-btn .skill-name { 
    color: #ff7777; 
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5), 0 2px 4px rgba(0,0,0,0.8);
}

.power-btn {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 
        0 4px 0 rgba(100, 40, 180, 0.8),
        0 8px 20px rgba(168, 85, 247, 0.2),
        inset 0 1px 0 rgba(200,150,255,0.2);
}
.power-btn .skill-icon-wrap {
    border-color: rgba(168, 85, 247, 0.6);
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.2) 0%, rgba(100, 40, 180, 0.3) 100%);
    box-shadow: inset 0 0 15px rgba(168, 85, 247, 0.2);
}
.power-btn .skill-name { 
    color: #c9a0ff; 
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5), 0 2px 4px rgba(0,0,0,0.8);
}

.defend-btn {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 
        0 4px 0 rgba(30, 80, 180, 0.8),
        0 8px 20px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(150,180,255,0.2);
}
.defend-btn .skill-icon-wrap {
    border-color: rgba(59, 130, 246, 0.6);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.2) 0%, rgba(30, 80, 180, 0.3) 100%);
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.2);
}
.defend-btn .skill-name { 
    color: #88bbff; 
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 2px 4px rgba(0,0,0,0.8);
}

.heal-btn {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 
        0 4px 0 rgba(20, 120, 60, 0.8),
        0 8px 20px rgba(34, 197, 94, 0.2),
        inset 0 1px 0 rgba(150,255,180,0.2);
}
.heal-btn .skill-icon-wrap {
    border-color: rgba(34, 197, 94, 0.6);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.2) 0%, rgba(20, 120, 60, 0.3) 100%);
    box-shadow: inset 0 0 15px rgba(34, 197, 94, 0.2);
}
.heal-btn .skill-name { 
    color: #88ffbb; 
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5), 0 2px 4px rgba(0,0,0,0.8);
}

.ultimate-btn {
    border-color: rgba(255, 215, 0, 0.6);
    background: linear-gradient(180deg, 
        rgba(60, 50, 20, 0.98) 0%, 
        rgba(40, 35, 15, 0.99) 50%,
        rgba(25, 22, 10, 1) 100%
    );
    box-shadow: 
        0 4px 0 rgba(150, 120, 0, 0.8),
        0 8px 20px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255,240,150,0.3),
        0 0 30px rgba(255, 215, 0, 0.2);
    animation: ultimate3DGlow 3s ease-in-out infinite;
}
.ultimate-btn .skill-icon-wrap {
    border-color: rgba(255, 215, 0, 0.7);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.25) 0%, rgba(150, 120, 0, 0.35) 100%);
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.3), 0 0 15px rgba(255, 215, 0, 0.2);
}
.ultimate-btn .skill-name { 
    color: #ffdd44; 
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.7), 0 2px 4px rgba(0,0,0,0.8);
}

@keyframes ultimate3DGlow {
    0%, 100% { 
        box-shadow: 
            0 4px 0 rgba(150, 120, 0, 0.8),
            0 8px 20px rgba(255, 215, 0, 0.3),
            inset 0 1px 0 rgba(255,240,150,0.3),
            0 0 20px rgba(255, 215, 0, 0.2);
    }
    50% { 
        box-shadow: 
            0 4px 0 rgba(150, 120, 0, 0.8),
            0 8px 30px rgba(255, 215, 0, 0.5),
            inset 0 1px 0 rgba(255,240,150,0.4),
            0 0 50px rgba(255, 215, 0, 0.4),
            0 0 80px rgba(255, 165, 0, 0.2);
    }
}

/* 3D Skill Button Hover States */
.new-skill-btn:hover:not(:disabled) {
    transform: perspective(500px) rotateX(-8deg) translateY(-8px) translateZ(15px);
    box-shadow: 
        0 15px 40px rgba(0,0,0,0.5),
        0 8px 0 rgba(0,0,0,0.3);
}

.new-skill-btn:hover:not(:disabled) .skill-icon-wrap {
    transform: scale(1.1) translateZ(10px);
}

.new-skill-btn:hover:not(:disabled) .skill-icon-wrap .skill-icon {
    transform: scale(1.2) translateZ(15px);
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

.attack-btn:hover:not(:disabled) {
    border-color: rgba(255, 68, 68, 0.9);
    box-shadow: 
        0 15px 40px rgba(255, 68, 68, 0.4),
        0 8px 0 rgba(150, 30, 30, 0.8),
        0 0 50px rgba(255, 68, 68, 0.3);
}

.power-btn:hover:not(:disabled) {
    border-color: rgba(168, 85, 247, 0.9);
    box-shadow: 
        0 15px 40px rgba(168, 85, 247, 0.4),
        0 8px 0 rgba(100, 40, 180, 0.8),
        0 0 50px rgba(168, 85, 247, 0.3);
}

.defend-btn:hover:not(:disabled) {
    border-color: rgba(59, 130, 246, 0.9);
    box-shadow: 
        0 15px 40px rgba(59, 130, 246, 0.4),
        0 8px 0 rgba(30, 80, 180, 0.8),
        0 0 50px rgba(59, 130, 246, 0.3);
}

.heal-btn:hover:not(:disabled) {
    border-color: rgba(34, 197, 94, 0.9);
    box-shadow: 
        0 15px 40px rgba(34, 197, 94, 0.4),
        0 8px 0 rgba(20, 120, 60, 0.8),
        0 0 50px rgba(34, 197, 94, 0.3);
}

.ultimate-btn:hover:not(:disabled) {
    border-color: rgba(255, 215, 0, 1);
    box-shadow: 
        0 15px 50px rgba(255, 215, 0, 0.5),
        0 8px 0 rgba(150, 120, 0, 0.8),
        0 0 60px rgba(255, 215, 0, 0.4),
        0 0 100px rgba(255, 165, 0, 0.2);
    animation: none;
}

/* 3D Press Effect */
.new-skill-btn:active:not(:disabled) {
    transform: perspective(500px) rotateX(5deg) translateY(4px) translateZ(-5px);
    box-shadow: 
        0 2px 10px rgba(0,0,0,0.4),
        0 2px 0 rgba(0,0,0,0.3);
}

.new-skill-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(50%) brightness(0.7);
    transform: perspective(500px) rotateX(0deg);
}

/* Cooldown Overlay */
.skill-cooldown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    border-radius: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent-red);
    text-shadow: 0 0 20px var(--accent-red);
}

.new-skill-btn.on-cooldown .skill-cooldown-overlay {
    display: flex;
}

/* Legacy support - keep old skill-btn working */
.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;
}

/* Damage Numbers - Enhanced */
.damage-number {
    position: absolute;
    font-size: 2rem;
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-red);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9), 0 0 20px rgba(255, 68, 68, 0.5);
    animation: damageFloat 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
    z-index: 500;
}

.damage-number.crit {
    font-size: 2.8rem;
    color: var(--accent-gold);
    text-shadow: 0 0 20px var(--accent-gold), 0 0 40px var(--accent-orange);
    animation: critFloat 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.damage-number.heal {
    color: var(--accent-green);
    text-shadow: 0 0 15px var(--accent-green);
}

@keyframes damageFloat {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { transform: translateY(-20px) scale(1.3); opacity: 1; }
    100% { transform: translateY(-80px) scale(0.7); opacity: 0; }
}

@keyframes critFloat {
    0% { transform: translateY(0) scale(0.5) rotate(-10deg); opacity: 0; }
    20% { transform: translateY(-30px) scale(1.5) rotate(5deg); opacity: 1; }
    100% { transform: translateY(-100px) scale(0.6) rotate(0deg); opacity: 0; }
}

.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;
}

/* ========================================
   3D BATTLE COMBATANT ANIMATIONS
   ======================================== */

/* 3D Attacking Animation */
.battle-combatant.attacking .combatant-card {
    animation: combatant3DAttack 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.battle-player.attacking .combatant-card {
    animation: player3DAttackSlide 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.battle-monster.attacking .combatant-card {
    animation: monster3DAttackSlide 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes combatant3DAttack {
    0% { transform: perspective(800px) rotateY(0deg) scale(1); }
    25% { transform: perspective(800px) rotateY(-10deg) scale(1.08) translateZ(30px); }
    50% { 
        transform: perspective(800px) rotateY(5deg) scale(1.15) translateZ(50px) translateY(-10px); 
        box-shadow: 0 30px 80px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.3);
    }
    75% { transform: perspective(800px) rotateY(-5deg) scale(1.05) translateZ(20px); }
    100% { transform: perspective(800px) rotateY(0deg) scale(1); }
}

@keyframes player3DAttackSlide {
    0% { transform: perspective(800px) rotateY(8deg) translateX(0) scale(1); }
    20% { transform: perspective(800px) rotateY(15deg) translateX(30px) translateZ(20px) scale(1.05); }
    40% { 
        transform: perspective(800px) rotateY(20deg) translateX(100px) translateZ(60px) scale(1.12); 
        box-shadow: 0 0 80px rgba(0, 200, 255, 0.7), 0 30px 60px rgba(0,0,0,0.4);
    }
    60% { transform: perspective(800px) rotateY(10deg) translateX(60px) translateZ(30px) scale(1.08); }
    100% { transform: perspective(800px) rotateY(8deg) translateX(0) scale(1); }
}

@keyframes monster3DAttackSlide {
    0% { transform: perspective(800px) rotateY(-8deg) translateX(0) scale(1); }
    20% { transform: perspective(800px) rotateY(-15deg) translateX(-30px) translateZ(20px) scale(1.05); }
    40% { 
        transform: perspective(800px) rotateY(-20deg) translateX(-100px) translateZ(60px) scale(1.12); 
        box-shadow: 0 0 80px rgba(255, 100, 50, 0.7), 0 30px 60px rgba(0,0,0,0.4);
    }
    60% { transform: perspective(800px) rotateY(-10deg) translateX(-60px) translateZ(30px) scale(1.08); }
    100% { transform: perspective(800px) rotateY(-8deg) translateX(0) scale(1); }
}

/* 3D Character Attack */
.battle-combatant.attacking .char-body {
    animation: char3DStrike 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes char3DStrike {
    0% { transform: translateZ(0) scale(1); }
    30% { transform: translateZ(40px) scale(1.3) rotateY(-20deg); filter: drop-shadow(0 0 30px currentColor); }
    50% { transform: translateZ(60px) scale(1.4) rotateY(10deg); }
    70% { transform: translateZ(30px) scale(1.2) rotateY(-5deg); }
    100% { transform: translateZ(0) scale(1); }
}

/* 3D Hit Animation */
.battle-combatant.hit .combatant-card {
    animation: combatant3DHit 0.6s ease;
}

@keyframes combatant3DHit {
    0% { transform: perspective(800px) rotateY(8deg) translateX(0); filter: brightness(1); }
    15% { transform: perspective(800px) rotateY(-15deg) rotateX(10deg) translateX(-20px) translateZ(-20px); filter: brightness(2.5) saturate(0); }
    30% { transform: perspective(800px) rotateY(20deg) rotateX(-8deg) translateX(25px) translateZ(10px); filter: brightness(1.8); }
    50% { transform: perspective(800px) rotateY(-10deg) rotateX(5deg) translateX(-15px); filter: brightness(1.4); }
    70% { transform: perspective(800px) rotateY(8deg) rotateX(-3deg) translateX(8px); filter: brightness(1.2); }
    100% { transform: perspective(800px) rotateY(8deg) translateX(0); filter: brightness(1); }
}

.battle-combatant.hit .combatant-visual {
    animation: visual3DShake 0.6s ease;
}

@keyframes visual3DShake {
    0%, 100% { transform: rotateZ(0deg) rotateY(0deg) scale(1); }
    15% { transform: rotateZ(-12deg) rotateY(-20deg) scale(0.9); filter: brightness(2); }
    30% { transform: rotateZ(10deg) rotateY(15deg) scale(0.95); }
    50% { transform: rotateZ(-6deg) rotateY(-10deg) scale(0.97); }
    70% { transform: rotateZ(4deg) rotateY(5deg) scale(0.99); }
}

/* 3D Screen shake on big hits */
.battle-arena.screen-shake {
    animation: screen3DShake 0.5s ease;
}

@keyframes screen3DShake {
    0%, 100% { transform: perspective(1500px) translate(0, 0) rotateX(0deg) rotateY(0deg); }
    10% { transform: perspective(1500px) translate(-8px, -5px) rotateX(1deg) rotateY(-1deg); }
    20% { transform: perspective(1500px) translate(8px, 5px) rotateX(-1deg) rotateY(1deg); }
    30% { transform: perspective(1500px) translate(-6px, 4px) rotateX(0.5deg) rotateY(-0.5deg); }
    40% { transform: perspective(1500px) translate(6px, -4px) rotateX(-0.5deg) rotateY(0.5deg); }
    50% { transform: perspective(1500px) translate(-4px, 3px) rotateX(0.3deg); }
    60% { transform: perspective(1500px) translate(4px, -3px) rotateY(-0.3deg); }
    70% { transform: perspective(1500px) translate(-3px, 2px); }
    80% { transform: perspective(1500px) translate(2px, -1px); }
    90% { transform: perspective(1500px) translate(-1px, 1px); }
}

/* 3D Dying Animation */
.battle-combatant.dying .combatant-card {
    animation: combatant3DDying 1.2s ease forwards;
}

@keyframes combatant3DDying {
    0% { 
        transform: perspective(800px) rotateY(-8deg) scale(1); 
        opacity: 1; 
        filter: brightness(1); 
    }
    20% { 
        transform: perspective(800px) rotateY(0deg) scale(1.2) translateZ(30px); 
        filter: brightness(3) saturate(0.5); 
    }
    40% { 
        transform: perspective(800px) rotateY(30deg) rotateX(15deg) scale(0.9) translateY(10px); 
        opacity: 0.9; 
        filter: brightness(2) saturate(0.3);
    }
    60% { 
        transform: perspective(800px) rotateY(-20deg) rotateX(-10deg) rotateZ(15deg) scale(0.6) translateY(40px) translateZ(-50px); 
        opacity: 0.6; 
        filter: brightness(1.5) blur(2px);
    }
    80% { 
        transform: perspective(800px) rotateY(10deg) rotateX(20deg) rotateZ(-10deg) scale(0.3) translateY(80px) translateZ(-100px); 
        opacity: 0.3; 
        filter: brightness(0.8) blur(4px);
    }
    100% { 
        transform: perspective(800px) rotateX(30deg) rotateZ(20deg) scale(0.1) translateY(120px) translateZ(-150px); 
        opacity: 0; 
        filter: blur(8px);
    }
}

/* Victory Explosion 3D */
.battle-combatant.victory .combatant-card {
    animation: victory3DPop 1s ease-out;
}

@keyframes victory3DPop {
    0% { transform: perspective(800px) rotateY(8deg) scale(1); }
    30% { transform: perspective(800px) rotateY(0deg) scale(1.3) translateZ(50px) translateY(-20px); }
    50% { transform: perspective(800px) rotateY(-10deg) scale(1.2) translateZ(30px); filter: brightness(1.5); }
    70% { transform: perspective(800px) rotateY(5deg) scale(1.1) translateZ(15px); }
    100% { transform: perspective(800px) rotateY(8deg) scale(1); }
}

/* 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: characterHitNew 0.6s ease;
}

@keyframes characterHitNew {
    0% { transform: translateX(0) scale(1); filter: brightness(1); }
    15% { transform: translateX(-30px) scale(0.95); filter: brightness(3) saturate(0); }
    30% { transform: translateX(25px) scale(1.05); filter: brightness(0.5) hue-rotate(180deg); }
    45% { transform: translateX(-20px) scale(0.98); filter: brightness(2) sepia(1); }
    60% { transform: translateX(15px) scale(1.02); filter: brightness(0.8); }
    75% { transform: translateX(-10px) scale(0.99); filter: brightness(1.3); }
    100% { transform: translateX(0) scale(1); filter: brightness(1); }
}

/* Screen shake on hit */
.battle-arena.screen-shake {
    animation: screenShake 0.5s ease;
}

@keyframes screenShake {
    0%, 100% { transform: translateX(0) translateY(0); }
    10% { transform: translateX(-10px) translateY(5px); }
    20% { transform: translateX(10px) translateY(-5px); }
    30% { transform: translateX(-8px) translateY(3px); }
    40% { transform: translateX(8px) translateY(-3px); }
    50% { transform: translateX(-5px) translateY(2px); }
    60% { transform: translateX(5px) translateY(-2px); }
    70% { transform: translateX(-3px) translateY(1px); }
    80% { transform: translateX(3px) translateY(-1px); }
    90% { transform: translateX(-1px) translateY(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);
}

/* ========================================
   KNIGHT ONLINE STYLE FORGE SYSTEM
   ======================================== */

/* Main Forge Overlay */
.ko-forge-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    flex-direction: column;
    z-index: 10000;
    overflow: hidden;
}

.ko-forge-overlay.active {
    display: flex !important;
}

/* Forge Background */
.forge-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 100, 0, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 50, 0, 0.4) 0%, transparent 40%),
        linear-gradient(180deg, #0a0505 0%, #1a0a05 30%, #2a1008 60%, #1a0a05 80%, #0a0505 100%);
    z-index: 0;
}

/* Animated Smoke */
.forge-smoke {
    position: absolute;
    inset: 0;
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    animation: smokeMove 20s linear infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes smokeMove {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-50px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}

/* Floating Embers */
.forge-embers {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.forge-embers::before,
.forge-embers::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 10% 90%, #ff6600 0%, transparent 100%),
        radial-gradient(3px 3px at 20% 85%, #ff8800 0%, transparent 100%),
        radial-gradient(2px 2px at 30% 95%, #ffaa00 0%, transparent 100%),
        radial-gradient(4px 4px at 40% 88%, #ff4400 0%, transparent 100%),
        radial-gradient(2px 2px at 50% 92%, #ff6600 0%, transparent 100%),
        radial-gradient(3px 3px at 60% 87%, #ff8800 0%, transparent 100%),
        radial-gradient(2px 2px at 70% 93%, #ffaa00 0%, transparent 100%),
        radial-gradient(4px 4px at 80% 89%, #ff4400 0%, transparent 100%),
        radial-gradient(2px 2px at 90% 91%, #ff6600 0%, transparent 100%);
    animation: embersFloat 4s ease-in-out infinite;
}

.forge-embers::after {
    animation-delay: -2s;
    opacity: 0.7;
}

@keyframes embersFloat {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(-100px); opacity: 0; }
}

/* Top Bar */
.forge-top-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
    position: relative;
    z-index: 10;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, transparent 100%);
}

.forge-title {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 
        0 0 20px rgba(255, 150, 0, 0.8),
        0 0 40px rgba(255, 100, 0, 0.6),
        2px 2px 0 #8B4513,
        4px 4px 0 #5C3317;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.forge-close-btn {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: 3px solid #8B4513;
    border-radius: 50%;
    background: linear-gradient(180deg, #3a1a0a 0%, #1a0a05 100%);
    color: #ff6600;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.forge-close-btn:hover {
    background: linear-gradient(180deg, #5a2a1a 0%, #2a1a10 100%);
    border-color: #ff6600;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.5);
}

/* Main Forge Area */
.forge-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 20px 40px;
    position: relative;
    z-index: 10;
}

/* Materials Panel */
.forge-materials,
.forge-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 200px;
}

.material-card,
.stat-card {
    background: linear-gradient(135deg, rgba(30, 15, 5, 0.95) 0%, rgba(50, 25, 10, 0.9) 100%);
    border: 2px solid #8B4513;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 
        inset 0 2px 10px rgba(255, 150, 0, 0.1),
        0 5px 20px rgba(0, 0, 0, 0.5);
}

.material-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 10px rgba(255, 200, 0, 0.5));
}

.material-name,
.stat-label {
    color: #d4a574;
    font-size: 0.9rem;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.material-count,
.stat-value {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.stat-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #5a3a1a;
}

.stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff4400, #ff8800, #ffcc00);
    border-radius: 4px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(255, 136, 0, 0.5);
}

/* Center Forge Area */
.forge-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 400px;
    min-height: 500px;
}

/* Floating Item Container */
.forge-item-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    z-index: 20;
}

.forge-item-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 0, 0.3) 0%, transparent 70%);
    animation: itemGlowPulse 2s ease-in-out infinite;
    z-index: -1;
}

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

.forge-item {
    font-size: 8rem;
    animation: forgeItemFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 200, 0, 0.6));
    cursor: pointer;
    transition: transform 0.3s ease;
}

.forge-item:hover {
    transform: scale(1.1);
}

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

.forge-item-level {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 
        0 0 20px rgba(255, 215, 0, 0.8),
        2px 2px 0 #000;
    margin-top: 10px;
}

.forge-item-name {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #d4a574;
    text-align: center;
    margin-top: 5px;
}

/* Anvil */
.forge-anvil {
    position: relative;
    width: 300px;
    height: 150px;
}

.anvil-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 40px;
    background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
    border-radius: 10px 10px 5px 5px;
    box-shadow: 
        inset 0 5px 15px rgba(255, 255, 255, 0.1),
        0 5px 20px rgba(0, 0, 0, 0.5);
}

.anvil-top::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 10px;
    right: 10px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 200, 0, 0.3), transparent);
    border-radius: 2px;
}

.anvil-base {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 80px;
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

/* Fire under anvil */
.anvil-fire {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 80px;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.fire-particle {
    width: 30px;
    height: 60px;
    background: linear-gradient(180deg, 
        rgba(255, 255, 0, 0.9) 0%, 
        rgba(255, 150, 0, 0.8) 30%, 
        rgba(255, 50, 0, 0.6) 60%, 
        transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: fireFlicker 0.5s ease-in-out infinite alternate;
    filter: blur(2px);
}

.fire-particle:nth-child(1) { animation-delay: 0s; height: 50px; }
.fire-particle:nth-child(2) { animation-delay: 0.1s; height: 70px; }
.fire-particle:nth-child(3) { animation-delay: 0.15s; height: 80px; }
.fire-particle:nth-child(4) { animation-delay: 0.1s; height: 65px; }
.fire-particle:nth-child(5) { animation-delay: 0s; height: 45px; }

@keyframes fireFlicker {
    0% { transform: scaleY(1) scaleX(1); opacity: 0.8; }
    100% { transform: scaleY(1.2) scaleX(0.9); opacity: 1; }
}

/* Sparks */
.forge-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 30;
}

.forge-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff8800, 0 0 20px #ff4400;
}

/* Result Display */
.forge-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
}

.forge-result.show-success {
    animation: resultSuccess 2s ease-out forwards;
}

.forge-result.show-fail {
    animation: resultFail 2s ease-out forwards;
}

.result-text {
    font-family: 'Cinzel', serif;
    font-size: 5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 10px;
}

.forge-result.show-success .result-text {
    color: #ffd700;
    text-shadow: 
        0 0 30px rgba(255, 215, 0, 1),
        0 0 60px rgba(255, 200, 0, 0.8),
        0 0 100px rgba(255, 150, 0, 0.6);
    animation: successTextPulse 0.5s ease-in-out infinite;
}

.forge-result.show-fail .result-text {
    color: #ff4444;
    text-shadow: 
        0 0 30px rgba(255, 50, 50, 1),
        0 0 60px rgba(255, 0, 0, 0.8);
    animation: failTextShake 0.3s ease-in-out infinite;
}

.result-level {
    font-family: 'Orbitron', monospace;
    font-size: 4rem;
    font-weight: 900;
    margin-top: 20px;
}

.forge-result.show-success .result-level {
    color: #00ff88;
    text-shadow: 0 0 30px rgba(0, 255, 136, 0.8);
}

@keyframes resultSuccess {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    40% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

@keyframes resultFail {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    30%, 50%, 70% { transform: translate(-50%, -50%) rotate(-3deg); }
    40%, 60% { transform: translate(-50%, -50%) rotate(3deg); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

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

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

/* Bottom Actions */
.forge-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 30px;
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
    position: relative;
    z-index: 10;
}

.forge-select-btn,
.forge-trina-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 30px;
    background: linear-gradient(180deg, #3a2a1a 0%, #2a1a0a 100%);
    border: 3px solid #8B4513;
    border-radius: 15px;
    color: #d4a574;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
}

.forge-select-btn span:first-child,
.forge-trina-btn span:first-child {
    font-size: 2rem;
}

.forge-select-btn:hover,
.forge-trina-btn:hover {
    background: linear-gradient(180deg, #5a3a2a 0%, #3a2a1a 100%);
    border-color: #ffd700;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 150, 0, 0.3);
}

/* Main Enhance Button */
.forge-enhance-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 60px;
    background: linear-gradient(180deg, #8B4513 0%, #5C3317 50%, #3a1a0a 100%);
    border: 4px solid #ffd700;
    border-radius: 20px;
    color: #ffd700;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    min-width: 250px;
}

.forge-enhance-btn .btn-icon {
    font-size: 3rem;
    z-index: 2;
    animation: hammerBounce 1s ease-in-out infinite;
}

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

.forge-enhance-btn .btn-text {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-shadow: 2px 2px 0 #000;
    z-index: 2;
}

.forge-enhance-btn .btn-fire {
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, 
        rgba(255, 100, 0, 0.8) 0%, 
        rgba(255, 50, 0, 0.4) 50%, 
        transparent 100%);
    animation: btnFireAnim 0.3s ease-in-out infinite alternate;
    z-index: 1;
}

@keyframes btnFireAnim {
    0% { opacity: 0.6; transform: scaleY(1); }
    100% { opacity: 1; transform: scaleY(1.2); }
}

.forge-enhance-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 15px 40px rgba(255, 100, 0, 0.5),
        0 0 50px rgba(255, 150, 0, 0.3);
    border-color: #fff;
}

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

/* Processing Overlay */
.forge-processing {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

.forge-processing.hidden {
    display: none;
}

.processing-hammer {
    font-size: 10rem;
    animation: hammerStrike 0.3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 150, 0, 0.8));
}

@keyframes hammerStrike {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(50px) rotate(20deg); }
}

.processing-text {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: #ffd700;
    margin-top: 30px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    animation: processingBlink 0.5s ease-in-out infinite;
}

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

/* Item Enhancement Animations */
.forge-item.enhancing {
    animation: itemEnhancing 0.2s ease-in-out infinite;
}

@keyframes itemEnhancing {
    0%, 100% { transform: scale(1) rotate(-2deg); filter: brightness(1); }
    50% { transform: scale(1.1) rotate(2deg); filter: brightness(1.5); }
}

.forge-item.success {
    animation: itemSuccess 1.5s ease-out forwards;
}

@keyframes itemSuccess {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(1.5); filter: brightness(3) drop-shadow(0 0 80px #ffd700); }
    50% { transform: scale(1.3) translateY(-50px); filter: brightness(2) drop-shadow(0 0 100px #ffd700); }
    100% { transform: scale(1) translateY(0); filter: brightness(1) drop-shadow(0 0 30px #ffd700); }
}

.forge-item.fail {
    animation: itemFail 1s ease-out forwards;
}

@keyframes itemFail {
    0% { transform: scale(1); filter: brightness(1) hue-rotate(0deg); }
    20% { transform: scale(1.2); filter: brightness(2) hue-rotate(-30deg); }
    40%, 60% { transform: scale(0.9) rotate(-5deg); filter: brightness(0.5) grayscale(0.5); }
    50% { transform: scale(0.9) rotate(5deg); }
    100% { transform: scale(1); filter: brightness(0.8) grayscale(0); }
}

/* Success Particles */
.success-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 15px #ffd700;
    animation: successParticleFly 1s ease-out forwards;
}

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

/* Fail Particles */
.fail-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff0000;
    animation: failParticleFall 1s ease-in forwards;
}

@keyframes failParticleFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(200px) rotate(360deg); opacity: 0; }
}

/* Spark fly animation */
@keyframes sparkFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) 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); }
}

/* Responsive Forge */
@media (max-width: 1024px) {
    .forge-main {
        flex-direction: column;
        gap: 30px;
    }
    
    .forge-materials,
    .forge-stats {
        flex-direction: row;
        min-width: auto;
    }
    
    .forge-center {
        min-width: auto;
        min-height: auto;
    }
    
    .forge-item {
        font-size: 6rem;
    }
}

@media (max-width: 768px) {
    .forge-title {
        font-size: 1.5rem;
    }
    
    .forge-actions {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .forge-enhance-btn {
        padding: 20px 40px;
        min-width: 200px;
    }
    
    .forge-select-btn,
    .forge-trina-btn {
        padding: 15px 20px;
        min-width: 120px;
    }
}

.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: linear-gradient(180deg, rgba(40, 40, 55, 0.95) 0%, rgba(25, 25, 35, 0.98) 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 cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: perspective(400px) rotateX(0deg);
    box-shadow: 
        0 3px 0 rgba(0,0,0,0.3),
        0 6px 12px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

/* 3D shine effect */
.inventory-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    border-radius: 10px 10px 0 0;
    pointer-events: none;
}

.inventory-item:hover {
    border-color: var(--accent-purple);
    transform: perspective(400px) rotateX(-8deg) rotateY(5deg) translateY(-5px) scale(1.1);
    z-index: 5;
    box-shadow: 
        0 10px 0 rgba(80, 40, 120, 0.3),
        0 15px 30px rgba(168, 85, 247, 0.4),
        0 0 30px rgba(168, 85, 247, 0.2);
}

/* ============================================
   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);
}

/* Enhanced 3D Inventory Item (additional styles) */
.inventory-item {
    transform-style: preserve-3d;
}

/* Rarity specific 3D glows */
.inventory-item.rarity-legendary:hover {
    box-shadow: 
        0 10px 0 rgba(200, 130, 0, 0.4),
        0 15px 30px rgba(245, 158, 11, 0.5),
        0 0 40px rgba(245, 158, 11, 0.3);
}

.inventory-item.rarity-epic:hover {
    box-shadow: 
        0 10px 0 rgba(100, 50, 150, 0.4),
        0 15px 30px rgba(168, 85, 247, 0.5),
        0 0 40px rgba(168, 85, 247, 0.3);
}

.inventory-item.rarity-mythic:hover {
    box-shadow: 
        0 10px 0 rgba(150, 30, 30, 0.4),
        0 15px 30px rgba(239, 68, 68, 0.5),
        0 0 40px rgba(239, 68, 68, 0.3);
}

/* 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);
    }
}

/* ========================================
   BATTLE ARENA RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
    .battle-main-area {
        padding: 10px 20px 140px 20px;
    }
    
    .combatant-card {
        min-width: 200px;
        padding: 14px;
    }
    
    .combatant-visual {
        height: 80px;
    }
    
    .char-body {
        font-size: 3.5rem;
    }
    
    .vs-text {
        font-size: 2.5rem;
    }
    
    .new-skill-btn {
        padding: 8px 12px;
        min-width: 100px;
    }
    
    .skill-icon-wrap {
        width: 35px;
        height: 40px;
    }
    
    .skill-icon-wrap .skill-icon {
        font-size: 1.5rem;
    }
    
    .skill-info .skill-name {
        font-size: 0.8rem;
    }
    
    .skill-info .skill-desc {
        font-size: 0.65rem;
    }
}

@media (max-width: 768px) {
    .battle-hud-top {
        padding: 10px 15px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .battle-zone-info {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
    
    .battle-title {
        font-size: 1.2rem;
        letter-spacing: 2px;
    }
    
    .battle-exit-btn {
        padding: 8px 15px;
        font-size: 0.8rem;
    }
    
    .battle-main-area {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10px 10px 130px 10px;
        gap: 15px;
        justify-content: center;
    }
    
    .battle-center {
        width: 100%;
        order: -1;
        flex-direction: row;
        gap: 10px;
    }
    
    .vs-container {
        transform: none;
    }
    
    .vs-text {
        font-size: 2rem;
    }
    
    .vs-text {
        font-size: 2rem;
    }
    
    .vs-sword {
        font-size: 1.5rem;
    }
    
    .battle-turn-indicator {
        transform: none;
        padding: 8px 15px;
    }
    
    .turn-text {
        font-size: 0.85rem;
    }
    
    .combatant-card {
        min-width: 100%;
        max-width: 300px;
    }
    
    .combatant-visual {
        height: 80px;
    }
    
    .char-body {
        font-size: 3.5rem;
    }
    
    .combatant-name {
        font-size: 1rem;
    }
    
    .hp-bar-bg {
        height: 18px;
    }
    
    .hp-text {
        font-size: 0.85rem;
    }
    
    .battle-log-mini {
        width: 90%;
        bottom: 180px;
        max-height: 60px;
    }
    
    .battle-skills-panel {
        padding: 15px 10px 20px;
    }
    
    .skills-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .new-skill-btn {
        padding: 8px 12px;
        min-width: auto;
        flex: 1 1 calc(33% - 8px);
        max-width: calc(33% - 8px);
    }
    
    .skill-icon-wrap {
        width: 35px;
        height: 35px;
    }
    
    .skill-icon-wrap .skill-icon {
        font-size: 1.3rem;
    }
    
    .skill-info {
        display: none;
    }
    
    .skill-key {
        display: none;
    }
}

@media (max-width: 480px) {
    .battle-hud-top {
        padding: 8px 10px;
    }
    
    .battle-zone-info {
        display: none;
    }
    
    .battle-title {
        font-size: 1rem;
    }
    
    .battle-exit-btn span:last-child {
        display: none;
    }
    
    .combatant-card {
        padding: 10px;
    }
    
    .combatant-card-header {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    
    .combatant-level {
        font-size: 0.65rem;
        padding: 3px 8px;
    }
    
    .combatant-name {
        font-size: 0.9rem;
    }
    
    .combatant-visual {
        height: 60px;
        margin: 5px 0;
    }
    
    .char-body {
        font-size: 2.8rem;
    }
    
    .hp-bar-bg {
        height: 14px;
    }
    
    .hp-text {
        font-size: 0.75rem;
        margin-top: 5px;
    }
    
    .vs-text {
        font-size: 1.5rem;
    }
    
    .vs-sword {
        font-size: 1.2rem;
    }
    
    .battle-log-mini {
        display: none;
    }
    
    .skills-row {
        gap: 6px;
    }
    
    .new-skill-btn {
        padding: 6px 8px;
        border-radius: 10px;
        flex: 1 1 calc(20% - 6px);
        max-width: calc(20% - 6px);
        justify-content: center;
    }
    
    .skill-icon-wrap {
        width: 45px;
        height: 45px;
        border-radius: 10px;
    }
    
    .skill-icon-wrap .skill-icon {
        font-size: 1.5rem;
    }
}