@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════
   DYNAMIC VIEWPORT HEIGHT & SAFE AREA SUPPORT
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Dynamic viewport height that adjusts when browser address bar shows/hides */
    --viewport-height: 100vh;
    --viewport-height-dvh: 100dvh;

    /* Mobile navigation dimensions with safe area support */
    --mobile-nav-height: 70px;
    --mobile-bottom-padding: max(20px, env(safe-area-inset-bottom, 0px));
    --mobile-top-padding: max(0px, env(safe-area-inset-top, 0px));

    /* Actual available content height (viewport - nav bar) */
    --mobile-content-height: calc(var(--viewport-height) - var(--mobile-nav-height) - var(--mobile-bottom-padding));
}

/* Use dvh (dynamic viewport height) if supported - this adjusts automatically for browser chrome */
@supports (height: 100dvh) {
    :root {
        --viewport-height: 100dvh;
    }

    body, html, #root {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

/* Fallback for browsers without dvh support */
@supports not (height: 100dvh) {
    body, html, #root {
        height: 100vh !important;
        max-height: 100vh !important;
        /* iOS Safari fix */
        min-height: -webkit-fill-available !important;
    }
}

/* iOS Safari Safe Area Support */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL FONTS - Audiowide for headings, Roboto Mono for body
   ═══════════════════════════════════════════════════════════════════════ */

body, html, #root {
font-family: 'Roboto Mono', monospace !important;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
color: white;
}

body {
height: 100vh;
min-height: -webkit-fill-available;
overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   CRT SCANLINES EFFECT - Retro TV look
   ═══════════════════════════════════════════════════════════════════════ */

.scanlines,
.scanlines-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.3) 0px,
    rgba(0, 0, 0, 0.3) 1px,
    transparent 1px,
    transparent 4px
);
pointer-events: none;
z-index: 9999;
opacity: 0.4;
}

/* Optional: Add subtle flicker animation for more authentic CRT feel */
@keyframes scanline-flicker {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.35; }
}

.scanlines-animated {
animation: scanline-flicker 0.1s infinite;
}

/* Heading font - Audiowide */
h1, h2, h3, h4, h5, h6,
.title, .heading, .round-indicator, .stat-label,
[class*="title"], [class*="heading"], [class*="label"] {
font-family: 'Audiowide', sans-serif !important;
}

/* Button font - Audiowide */
button, .btn, [class*="btn"], [class*="button"],
input[type="submit"], input[type="button"] {
font-family: 'Audiowide', sans-serif !important;
}

#root {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
justify-content: flex-start;
padding-top: 0;
box-sizing: border-box;
}

/* Top HUD */
.top-hud {
height: 60px;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
padding-top: env(safe-area-inset-top, 0px);
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.round-indicator {
font-size: 20px;
font-weight: bold;
color: #fcd34d;
}

/* SPD Order Bar */
.spd-order-bar {
height: 80px;
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
padding: 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.spd-segment {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}

.spd-segment-label {
font-size: 12px;
color: #aaa;
text-transform: uppercase;
}

.spd-units {
display: flex;
gap: 8px;
}

.spd-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
border: 2px solid transparent;
transition: all 0.3s ease;
}

.spd-avatar.active {
transform: scale(1.15);
border-color: #fcd34d;
box-shadow: 0 0 20px rgba(252, 211, 77, 0.6);
}

.spd-avatar.next-unit {
border-color: #60a5fa;
box-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
animation: nextPulse 2s ease-in-out infinite;
}

/* v5.1.2: Quickcast unit highlight */
.spd-avatar.quickcast {
border-color: #fbbf24;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
position: relative;
}

.spd-avatar.quickcast::before {
content: '⚡';
position: absolute;
top: -8px;
right: -8px;
font-size: 16px;
opacity: 0.7;
}

/* v5.1.3: Flash only on active Quickcast unit */
.spd-avatar.quickcast.next-unit::before {
animation: quickcastFlash 1.5s ease-in-out infinite;
}

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

@keyframes nextPulse {
0%, 100% { box-shadow: 0 0 15px rgba(96, 165, 250, 0.4); }
50% { box-shadow: 0 0 25px rgba(96, 165, 250, 0.7); }
}

/* Battle Board - Responsive with viewport units */
.battle-board {
flex: 1;
display: flex;
justify-content: space-around;
align-items: flex-start;
padding: clamp(10px, 2vh, 20px) clamp(10px, 2vw, 20px) clamp(120px, 15vh, 180px) clamp(10px, 2vw, 20px);
position: relative;
gap: clamp(10px, 2vw, 30px);
}

.team-side {
display: flex;
flex-direction: column;
gap: clamp(8px, 1vh, 10px);
width: clamp(180px, 18vw, 240px);
max-width: 240px;
align-items: center;
}

/* Staggered card positions - YOUR TEAM (left side) - Responsive */
.team-side:first-child > div:nth-child(2) {
transform: translateX(clamp(-80px, -8vw, -120px));
}

.team-side:first-child > div:nth-child(3) {
transform: translateX(clamp(40px, 4vw, 60px));
}

.team-side:first-child > div:nth-child(4) {
transform: translateX(clamp(-80px, -8vw, -120px));
}

/* Staggered card positions - ENEMY TEAM (right side) - mirrored - Responsive */
.team-side:last-child > div:nth-child(2) {
transform: translateX(clamp(80px, 8vw, 120px));
}

.team-side:last-child > div:nth-child(3) {
transform: translateX(clamp(-40px, -4vw, -60px));
}

.team-side:last-child > div:nth-child(4) {
transform: translateX(clamp(80px, 8vw, 120px));
}

.team-label {
font-size: 18px;
font-weight: bold;
color: #fbbf24;
text-align: center;
margin-bottom: 5px;
}

.vs-label {
font-size: clamp(32px, 4vw, 48px);
font-weight: bold;
color: rgba(251, 191, 36, 0.3);
position: absolute;
left: 50%;
top: clamp(100px, 15vh, 200px);
transform: translateX(-50%);
}

/* Card Slot */
.card-slot {
background: rgba(30, 27, 75, 0.6);
border: 3px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 8px;
display: flex;
gap: 8px;
min-height: 80px;
transition: all 0.3s ease;
position: relative;
}

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

.card-slot.dead {
opacity: 0.3;
background: rgba(0, 0, 0, 0.4);
}

.card-slot.selected {
border-color: #fbbf24 !important;
box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

/* v5.1.2: MVP highlight during round summary */
.card-slot.mvp-highlight {
border: 3px solid #fbbf24 !important;
box-shadow: 0 0 30px rgba(251, 191, 36, 0.8), 
inset 0 0 20px rgba(251, 191, 36, 0.2);
animation: mvpGlow 2s ease-in-out infinite;
position: relative;
}

.card-slot.mvp-highlight::before {
content: '👑';
position: absolute;
top: -15px;
right: -10px;
font-size: 24px;
z-index: 10;
animation: crownBounce 1.5s ease-in-out infinite;
}

@keyframes mvpGlow {
0%, 100% { 
box-shadow: 0 0 30px rgba(251, 191, 36, 0.8), 
inset 0 0 20px rgba(251, 191, 36, 0.2);
}
50% { 
box-shadow: 0 0 45px rgba(251, 191, 36, 1), 
inset 0 0 30px rgba(251, 191, 36, 0.3);
}
}

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

.card-slot.targeted {
border-color: #ef4444 !important;
box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
transform: scale(1.05);
}

.card-slot.targeted-ally {
border-color: #10b981 !important;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
transform: scale(1.05);
}

.card-portrait {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.3));
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
position: relative;
flex-shrink: 0;
overflow: hidden;
}

.rarity-badge {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
}

.rare-LEGENDARY {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #000;
}

.rare-GOLD {
background: linear-gradient(135deg, #fbbf24, #eab308);
color: #000;
}

.category-badge {
position: absolute;
bottom: 2px;
right: 2px;
padding: 2px 6px;
border-radius: 4px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
}

.cat-L1 { background: #1E3A8A; }
.cat-L2 { background: #7C3AED; }
.cat-AI { background: #0891B2; }
.cat-DeFi { background: #059669; }
.cat-Meme { background: #EA580C; }
.cat-Any { background: #6B7280; } /* v5.4-POLISH: Neutral fallback for cross-category achievements */

.card-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}

.card-name {
font-size: 14px;
font-weight: bold;
color: white;
}

.card-stats {
display: flex;
gap: 10px;
font-size: 12px;
}

.stat-item {
display: flex;
align-items: center;
gap: 3px;
}

.bars-container {
display: flex;
flex-direction: column;
gap: 4px;
}

.bar {
height: 8px;
background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
overflow: hidden;
position: relative;
}

.bar-fill {
height: 100%;
transition: width 0.3s ease;
}

.hp-bar .bar-fill {
background: linear-gradient(90deg, #ef4444, #dc2626);
}

.mana-bar .bar-fill {
background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.shield-chip {
position: absolute;
top: -8px;
right: 10px;
background: rgba(59, 130, 246, 0.9);
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: bold;
}

/* Skill Bar - Viewport-aware for mobile address bar */
.skill-bar {
height: 120px;
background: rgba(0, 0, 0, 0.5);
border-top: 2px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
padding: 20px;
position: relative;
}

/* Mobile skill bar adjustments */
@media (max-width: 480px) {
    .skill-bar {
        height: auto;
        min-height: 100px;
        max-height: min(120px, 15vh);
        gap: 15px;
        padding: 15px;
        padding-bottom: max(15px, env(safe-area-inset-bottom, 0px));
    }
}

.card-skills {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}

.card-skills-label {
font-size: 12px;
color: #aaa;
font-weight: bold;
}

.skill-buttons {
display: flex;
gap: 8px;
}

.skill-btn {
padding: 10px 16px;
background: rgba(59, 130, 246, 0.3);
border: 2px solid rgba(59, 130, 246, 0.5);
border-radius: 8px;
color: white;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
text-transform: uppercase;
}

.skill-btn:hover:not(:disabled) {
background: rgba(59, 130, 246, 0.6);
transform: translateY(-2px);
}

.skill-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}

.skill-btn.selected {
background: rgba(251, 191, 36, 0.6);
border-color: #fbbf24;
box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
}

.skill-btn.ready:not(:disabled) {
animation: skillReadyPulse 2s ease-in-out infinite;
}

@keyframes skillReadyPulse {
0%, 100% {
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
border-color: rgba(59, 130, 246, 0.6);
}
50% {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
border-color: rgba(59, 130, 246, 1);
}
}

.confirm-btn {
padding: 15px 40px;
background: linear-gradient(135deg, #10b981, #059669);
border: none;
border-radius: 10px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
}

.confirm-btn:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
}

.confirm-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* Animation Layer */
.animation-layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1000;
}

/* Battle Log */
.battle-log {
position: fixed;
top: 145px;
left: 50%;
transform: translateX(-50%);
width: 500px;
max-height: 140px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 10px;
font-size: 12px;
border: 2px solid rgba(251, 191, 36, 0.3);
pointer-events: auto; /* Allow scrolling */
z-index: 50;
}

/* Custom scrollbar for battle log */
.battle-log::-webkit-scrollbar {
width: 6px;
}

.battle-log::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
border-radius: 3px;
}

.battle-log::-webkit-scrollbar-thumb {
background: rgba(251, 191, 36, 0.5);
border-radius: 3px;
}

.battle-log::-webkit-scrollbar-thumb:hover {
background: rgba(251, 191, 36, 0.7);
}

.log-entry {
padding: 4px 8px;
margin-bottom: 3px;
border-left: 2px solid rgba(251, 191, 36, 0.5);
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
line-height: 1.3;
font-size: 11px;
}

/* v5.1.1: Log type colors */
.log-entry.log-dmg {
border-left-color: rgba(239, 68, 68, 0.8);
background: rgba(239, 68, 68, 0.08);
}

.log-entry.log-heal {
border-left-color: rgba(34, 197, 94, 0.8);
background: rgba(34, 197, 94, 0.08);
}

.log-entry.log-shield {
border-left-color: rgba(59, 130, 246, 0.8);
background: rgba(59, 130, 246, 0.08);
}

.log-entry:last-child {
border-left-color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
}

/* Start Screen */
.start-screen {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
}

.game-title {
font-size: 60px;
font-weight: bold;
background: linear-gradient(135deg, #fbbf24, #f59e0b, #ea580c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 40px rgba(251, 191, 36, 0.5);
}

.start-btn {
padding: 20px 60px;
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
border: none;
border-radius: 15px;
color: white;
font-size: 24px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
}

.start-btn:hover {
transform: scale(1.1);
box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
}

/* Target Selection Indicator */
.target-selection-indicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(251, 191, 36, 0.95);
color: #000;
padding: 15px 30px;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
z-index: 100;
animation: pulse 1.5s infinite;
}

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

/* Damage Numbers */
.damage-number {
position: fixed;
font-size: 32px;
font-weight: bold;
pointer-events: none;
z-index: 2000;
animation: floatUp 1.5s ease-out forwards;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}

.damage-number .damage-value {
/* Main damage number styling */
}

.damage-number .effectiveness-msg {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
animation: effectivenessPopIn 0.4s ease-out;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
}

/* Super effective message - GOLD/ORANGE */
.damage-number.super-effective .effectiveness-msg {
color: #fbbf24;
text-shadow: 0 0 8px rgba(251, 191, 36, 1), 2px 2px 6px rgba(0, 0, 0, 0.9);
}

/* Not very effective message - GRAY */
.damage-number .effectiveness-msg {
color: #9ca3af;
}

@keyframes effectivenessPopIn {
0% {
opacity: 0;
transform: scale(0.5) translateY(10px);
}
50% {
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.damage-number.damage {
color: #ef4444;
}

.damage-number.heal {
color: #10b981;
}

.damage-number.shield {
color: #3b82f6;
}

/* v4 NEW: Crit damage - GOLD */
.damage-number.crit {
color: #fbbf24;
font-size: 44px;
text-shadow: 0 0 12px rgba(251, 191, 36, 0.9);
animation: floatUpCrit 1.5s ease-out forwards;
}

/* v4 NEW: Super effective damage - ORANGE */
.damage-number.super-effective {
color: #f59e0b;
font-size: 40px;
text-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
}

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

/* v4 NEW: Crit float animation */
@keyframes floatUpCrit {
0% {
opacity: 1;
transform: translateY(0) scale(1) rotate(-5deg);
}
30% {
transform: translateY(-20px) scale(1.3) rotate(5deg);
}
60% {
transform: translateY(-40px) scale(1.25) rotate(-3deg);
}
100% {
opacity: 0;
transform: translateY(-90px) scale(0.9) rotate(0deg);
}
}

/* Projectile */
.projectile {
position: fixed;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
z-index: 1500;
box-shadow: 0 0 15px currentColor;
}

.projectile.basic {
background: radial-gradient(circle, #fbbf24, #f59e0b);
}

.projectile.skill {
background: radial-gradient(circle, #8b5cf6, #7c3aed);
}

/* Hit Flash */
.hit-flash {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.6);
border-radius: 12px;
pointer-events: none;
animation: flashEffect 0.3s ease-out;
}

@keyframes flashEffect {
0% { opacity: 1; }
100% { opacity: 0; }
}

/* Skill VFX */
.skill-vfx {
position: fixed;
pointer-events: none;
z-index: 1800;
}

.vfx-shield {
width: 120px;
height: 120px;
border: 4px solid #3b82f6;
border-radius: 50%;
animation: shieldPulse 0.8s ease-out;
}

@keyframes shieldPulse {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}

.vfx-burn {
width: 40px;
height: 40px;
background: radial-gradient(circle, #ef4444, #dc2626);
border-radius: 50%;
animation: burnEffect 0.6s ease-out;
}

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

.vfx-heal {
width: 30px;
height: 30px;
background: #10b981;
border-radius: 50%;
animation: healRise 1s ease-out;
}

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

.vfx-stun {
width: 80px;
height: 80px;
animation: stunSpin 1s linear;
}

@keyframes stunSpin {
0% {
transform: rotate(0deg) scale(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotate(720deg) scale(1.5);
opacity: 0;
}
}

.vfx-aoe {
width: 200px;
height: 200px;
border: 4px solid #8b5cf6;
border-radius: 50%;
animation: aoeExpand 0.8s ease-out;
}

@keyframes aoeExpand {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}

/* Screen Shake */
.screen-shake {
animation: shake 0.5s;
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes projectileFly {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate(var(--dx, 100px), var(--dy, 0)) scale(0.5);
opacity: 0;
}
}

/* Card Attack Animation */
.card-attacking {
animation: attackMove 0.4s ease-in-out;
}

/* ==================== v6.2-A4.2.7: 3D HOLOGRAPHIC CARD ANIMATIONS ==================== */

/* 3D Attack Lunge - Right (Player Team) */
@keyframes lungeRight {
0% { 
transform: translateX(0) rotateY(15deg) rotateX(5deg) scale(1);
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}
50% { 
transform: translateX(120px) rotateY(25deg) rotateX(10deg) scale(1.3);
filter: drop-shadow(20px 15px 40px rgba(0,0,0,0.8));
}
100% { 
transform: translateX(0) rotateY(15deg) rotateX(5deg) scale(1);
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}
}

/* 3D Attack Lunge - Left (Enemy Team) */
@keyframes lungeLeft {
0% { 
transform: translateX(0) rotateY(-15deg) rotateX(5deg) scale(1);
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}
50% { 
transform: translateX(-120px) rotateY(-25deg) rotateX(10deg) scale(1.3);
filter: drop-shadow(-20px 15px 40px rgba(0,0,0,0.8));
}
100% { 
transform: translateX(0) rotateY(-15deg) rotateX(5deg) scale(1);
filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}
}

/* Legacy 2D attack (fallback) */
@keyframes attackMove {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(20px); }
}

/* Status Icons */
.status-icons {
position: absolute;
top: 5px;
right: 5px;
display: flex;
gap: 3px;
flex-wrap: wrap;
max-width: 60px;
}

.status-icon {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
}

.status-icon.buff {
border-color: #10b981;
color: #10b981;
}

.status-icon.debuff {
border-color: #ef4444;
color: #ef4444;
}

/* ==================== v5.0: ROUND SUMMARY STYLES ==================== */

.round-summary-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 5000;
animation: fadeIn 0.3s ease-out;
}

.round-summary-panel {
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
border: 3px solid #fbbf24;
border-radius: 20px;
padding: 30px 40px;
max-width: 700px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: slideIn 0.4s ease-out;
}

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

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

.round-summary-panel h2 {
text-align: center;
color: #fbbf24;
font-size: 32px;
margin-bottom: 25px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.summary-teams {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 25px;
}

.summary-team {
background: rgba(0, 0, 0, 0.3);
padding: 20px;
border-radius: 12px;
}

.summary-team.team-a {
border: 2px solid #3b82f6;
}

.summary-team.team-b {
border: 2px solid #ef4444;
}

.summary-team h3 {
color: #fbbf24;
font-size: 16px;
margin-bottom: 15px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}

.summary-stat {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #cbd5e1;
font-size: 15px;
}

.summary-stat:last-child {
border-bottom: none;
}

.summary-stat span {
color: #fbbf24;
font-weight: bold;
}

.summary-mvp {
background: linear-gradient(90deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05));
border: 2px solid #fbbf24;
border-radius: 10px;
padding: 12px 20px;
margin: 10px 0;
display: flex;
align-items: center;
gap: 15px;
font-size: 16px;
}

.mvp-badge {
font-weight: bold;
color: #fbbf24;
}

.mvp-name {
color: white;
font-weight: bold;
flex: 1;
}

.mvp-value {
color: #10b981;
font-weight: bold;
}

.notable-moments {
margin-top: 20px;
padding-top: 20px;
border-top: 2px solid rgba(251, 191, 36, 0.3);
}

.notable-moment {
background: rgba(139, 92, 246, 0.2);
border-left: 4px solid #8b5cf6;
padding: 10px 15px;
margin: 8px 0;
border-radius: 6px;
color: #e0e7ff;
font-size: 14px;
}

/* ==================== v5.0: ACHIEVEMENT TOAST STYLES ==================== */

.achievement-toast {
position: fixed;
top: 80px;
right: 20px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #000;
border-radius: 12px;
padding: 15px 20px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 10px 30px rgba(251, 191, 36, 0.4);
z-index: 6000;
min-width: 320px;
animation: toastSlideIn 0.5s ease-out, toastPulse 2s ease-in-out 0.5s;
overflow: visible; /* Allow confetti to escape */
}

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

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

.achievement-icon {
font-size: 48px;
animation: iconBounce 0.6s ease-out;
}

@keyframes iconBounce {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.2) rotate(10deg);
}
}

.achievement-content {
flex: 1;
}

.achievement-title {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}

.achievement-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 4px;
}

.achievement-desc {
font-size: 13px;
opacity: 0.9;
}

/* v5.4: Achievement Toast Enhancements */
.achievement-icon-large {
font-size: 56px;
animation: iconBounce 0.6s ease-out, iconGlow 2s ease-in-out infinite 0.6s;
}

@keyframes iconGlow {
0%, 100% {
filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}
50% {
filter: drop-shadow(0 0 16px rgba(251, 191, 36, 1));
}
}

.achievement-category {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.2);
padding: 4px 8px;
border-radius: 8px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}

/* v5.4: Confetti Animation */
.confetti-container {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
}

.confetti-particle {
position: absolute;
width: 8px;
height: 8px;
background: var(--color);
top: 50%;
left: 50%;
border-radius: 50%;
animation: confettiBurst 0.8s ease-out forwards;
animation-delay: var(--delay);
opacity: 0;
}

@keyframes confettiBurst {
0% {
transform: translate(-50%, -50%) rotate(0deg) translateY(0) scale(0);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform: translate(-50%, -50%) rotate(var(--angle)) translateY(80px) scale(1);
opacity: 0;
}
}

/* ==================== v5.0: MATCH SUMMARY STYLES ==================== */

.match-summary-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 5000;
animation: fadeIn 0.5s ease-out;
}

.match-summary-panel {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
border: 4px solid #fbbf24;
border-radius: 25px;
padding: 40px 50px;
max-width: 800px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
animation: slideIn 0.6s ease-out;
}

.match-summary-panel h2 {
text-align: center;
color: #fbbf24;
font-size: 42px;
margin-bottom: 35px;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}

.match-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 35px;
}

.match-stat-card {
background: rgba(59, 130, 246, 0.1);
border: 2px solid rgba(59, 130, 246, 0.3);
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
}

.match-stat-card:hover {
transform: translateY(-5px);
border-color: #3b82f6;
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.stat-label {
color: #94a3b8;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}

.stat-value {
color: #fbbf24;
font-size: 36px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.close-match-btn {
width: 100%;
padding: 15px 30px;
background: linear-gradient(135deg, #10b981, #059669);
border: none;
border-radius: 10px;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}

.close-match-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
}

/* ==================== v5.1: BATTLE LOG FORMATTING ==================== */
.log-line { 
line-height: 1.25; 
margin: 2px 0; 
}

.log-dmg { 
padding: 4px 8px;
margin-bottom: 3px;
border-left: 2px solid rgba(239, 68, 68, 0.5);
background: rgba(239, 68, 68, 0.05);
border-radius: 3px;
line-height: 1.3;
font-size: 11px;
color: #ef4444; 
font-weight: 600;
}

.log-heal { 
padding: 4px 8px;
margin-bottom: 3px;
border-left: 2px solid rgba(16, 185, 129, 0.5);
background: rgba(16, 185, 129, 0.05);
border-radius: 3px;
line-height: 1.3;
font-size: 11px;
color: #10b981; 
font-weight: 600;
}

.log-shield { 
padding: 4px 8px;
margin-bottom: 3px;
border-left: 2px solid rgba(96, 165, 250, 0.5);
background: rgba(96, 165, 250, 0.05);
border-radius: 3px;
line-height: 1.3;
font-size: 11px;
color: #60a5fa; 
font-weight: 600;
}

.log-crit { 
font-weight: 700; 
text-shadow: 0 0 6px rgba(250, 204, 21, 0.6); 
color: #fbbf24;
}

.log-buff { 
padding: 4px 8px;
margin-bottom: 3px;
border-left: 2px solid rgba(167, 139, 250, 0.5);
background: rgba(167, 139, 250, 0.05);
border-radius: 3px;
line-height: 1.3;
font-size: 11px;
color: #a78bfa; 
font-weight: 600;
}

.log-debuff { 
padding: 4px 8px;
margin-bottom: 3px;
border-left: 2px solid rgba(156, 163, 175, 0.5);
background: rgba(156, 163, 175, 0.05);
border-radius: 3px;
line-height: 1.3;
font-size: 11px;
color: #9ca3af; 
font-weight: 600;
}

.log-se { 
color: #f59e0b; 
font-weight: 600;
}

.log-ne { 
color: #93c5fd; 
}

.log-round { 
margin: 6px 0; 
font-weight: 700; 
letter-spacing: 0.5px; 
color: #a855f7;
text-align: center;
}

.victory-banner {
margin-top: 12px; 
padding: 10px 12px; 
border-radius: 10px;
background: linear-gradient(90deg, #22c55e22, #22c55e11);
border: 1px solid #22c55e55; 
font-weight: 700;
color: #22c55e;
text-align: center;
}

/* ==================== v5.1.1: ROUND BANNER ANIMATION ==================== */
@keyframes roundBannerPulse {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
}
20% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
80% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.9);
}
}


/* ==========================================
PRIME ROYALE v5.3 - NEW CSS ADDITIONS
VFX + Modals + Combat Log Enhancements
========================================== */

/* ==================== VFX ANIMATIONS ==================== */
.fx-damage {
animation: fxDamage 0.5s ease;
}

.fx-heal {
animation: fxHeal 0.6s ease;
}

.fx-shield {
animation: fxShield 0.7s ease;
}

.fx-crit {
animation: fxCrit 0.6s ease;
}

.fx-death {
animation: fxDeath 0.80s ease forwards;
}

@keyframes fxDamage {
0% {
filter: saturate(1.8) brightness(1.4) hue-rotate(-15deg);
transform: translateX(-8px) translateY(-2px);
box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
}
25% {
filter: saturate(2.0) brightness(1.5) hue-rotate(-10deg);
transform: translateX(8px) translateY(2px);
box-shadow: 0 0 25px rgba(239, 68, 68, 1);
}
50% {
filter: saturate(1.9) brightness(1.4);
transform: translateX(-6px) translateY(-1px);
box-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
}
75% {
filter: saturate(1.5) brightness(1.2);
transform: translateX(4px) translateY(1px);
box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}
100% {
filter: none;
transform: translateX(0) translateY(0);
box-shadow: none;
}
}

@keyframes fxHeal {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.8);
filter: brightness(1);
}
25% {
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.6);
filter: brightness(1.3) saturate(1.4);
}
50% {
box-shadow: 0 0 0 12px rgba(34, 197, 94, 0.4);
filter: brightness(1.4) saturate(1.5);
}
75% {
box-shadow: 0 0 0 18px rgba(34, 197, 94, 0.2);
filter: brightness(1.2) saturate(1.3);
}
100% {
box-shadow: 0 0 0 24px rgba(34, 197, 94, 0);
filter: brightness(1);
}
}

@keyframes fxShield {
0% {
outline: 0 solid rgba(59, 130, 246, 0);
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
}
25% {
outline: 4px solid rgba(59, 130, 246, 1);
box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.8);
}
50% {
outline: 5px solid rgba(59, 130, 246, 0.9);
box-shadow: 0 0 25px 8px rgba(59, 130, 246, 0.6);
}
75% {
outline: 4px solid rgba(59, 130, 246, 0.7);
box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.4);
}
100% {
outline: 0 solid rgba(59, 130, 246, 0);
box-shadow: 0 0 0 12px rgba(59, 130, 246, 0);
}
}

@keyframes fxCrit {
0% {
transform: scale(1) rotate(0deg);
box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
filter: brightness(1);
}
25% {
transform: scale(1.25) rotate(-3deg);
box-shadow: 0 0 30px 10px rgba(250, 204, 21, 0.9);
filter: brightness(1.5) saturate(1.5);
}
50% {
transform: scale(1.2) rotate(3deg);
box-shadow: 0 0 40px 15px rgba(250, 204, 21, 1);
filter: brightness(1.6) saturate(1.6);
}
75% {
transform: scale(1.15) rotate(-2deg);
box-shadow: 0 0 30px 10px rgba(250, 204, 21, 0.7);
filter: brightness(1.4) saturate(1.4);
}
100% {
transform: scale(1) rotate(0deg);
box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
filter: brightness(1);
}
}

@keyframes fxDeath {
0% {
filter: grayscale(0) brightness(1);
opacity: 1;
transform: scale(1) rotate(0deg);
}
50% {
filter: grayscale(0.5) brightness(0.6);
opacity: 0.6;
transform: scale(0.98) rotate(-2deg);
}
100% {
filter: grayscale(1) brightness(0.3);
opacity: 0.2;
transform: scale(0.92) rotate(0deg);
}
}

/* ==================== ACTOR HIGHLIGHT (SPD Queue) ==================== */
.is-acting {
outline: 2px solid #f59e0b !important;
box-shadow: 0 0 12px rgba(245, 158, 11, 0.7) !important;
transform: scale(1.05);
}

/* ==================== SKILL READY PULSE ==================== */
@keyframes readyPulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
}
70% {
transform: scale(1.04);
box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}

.skill-ready {
animation: readyPulse 1.6s infinite;
border-color: #22c55e !important;
}

.skill-disabled,
.skill-oncd {
opacity: 0.5;
animation: none;
cursor: not-allowed;
}

/* ==================== COMBAT LOG (v5.3 Enhanced + Accessibility) ==================== */
/* Accessibility: Add aria-live="polite" and role="log" to #combat-log in HTML */
/* Icons (💥, 💚, etc.) provide visual distinction beyond color for accessibility */
#combat-log {
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
font-size: 13px;
line-height: 1.4;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.log-line {
margin: 3px 0;
padding: 2px 4px;
border-radius: 3px;
transition: background 0.2s;
}

.log-line:hover {
background: rgba(255, 255, 255, 0.05);
}

.log-banner {
color: #fff;
background: #111827;
padding: 6px 12px;
border-radius: 6px;
margin: 8px 0;
text-align: center;
letter-spacing: 0.8px;
font-weight: 700;
font-size: 14px;
border: 1px solid #374151;
}

#combat-log::-webkit-scrollbar {
width: 6px;
}

#combat-log::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}

#combat-log::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}

#combat-log::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}

/* ==================== ROUND TRANSITION OVERLAY ==================== */
#round-transition {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
}

#round-transition.show {
opacity: 1;
}

#round-transition::after {
content: 'ROUND START';
color: #fcd34d;
font-size: 48px;
font-weight: 900;
text-shadow: 0 0 20px rgba(252, 211, 77, 0.5);
letter-spacing: 4px;
}

/* ==================== SETTINGS MODAL ==================== */
#settings-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
z-index: 1000;
}

#settings-modal.open {
opacity: 1;
pointer-events: auto;
}

#settings-modal .modal-card {
width: 380px;
background: #0b1220;
color: #e5e7eb;
border: 1px solid #1f2937;
border-radius: 12px;
padding: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

#settings-modal .modal-header {
font-size: 20px;
font-weight: 700;
margin-bottom: 16px;
color: #60a5fa;
}

#settings-modal .setting-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#settings-modal .setting-row:last-of-type {
border-bottom: none;
}

#settings-modal .setting-label {
font-size: 14px;
color: #d1d5db;
}

#settings-modal .toggle-switch {
position: relative;
width: 48px;
height: 24px;
}

#settings-modal .toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}

#settings-modal .toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #374151;
border-radius: 24px;
transition: 0.3s;
}

#settings-modal .toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: 0.3s;
}

#settings-modal input:checked + .toggle-slider {
background: #22c55e;
}

#settings-modal input:checked + .toggle-slider:before {
transform: translateX(24px);
}

#settings-modal .actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 16px;
}

#settings-modal .btn {
padding: 8px 20px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}

#settings-modal .btn-primary {
background: #3b82f6;
color: white;
}

#settings-modal .btn-primary:hover {
background: #2563eb;
}

#settings-modal .btn-secondary {
background: #374151;
color: #d1d5db;
}

#settings-modal .btn-secondary:hover {
background: #4b5563;
}

/* ==================== RESULT MODAL ==================== */
#result-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 1100;
}

#result-modal.open {
opacity: 1;
pointer-events: auto;
}

#result-modal .modal-card {
width: 480px;
background: #0b1220;
color: #e5e7eb;
border: 2px solid #1f2937;
border-radius: 16px;
padding: 32px;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

#result-modal .result-title {
font-size: 42px;
font-weight: 900;
margin-bottom: 24px;
letter-spacing: 2px;
}

#result-modal .result-title.victory {
color: #22c55e;
text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

#result-modal .result-title.defeat {
color: #ef4444;
text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

#result-modal .result-stats {
margin: 20px 0;
padding: 16px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
}

#result-modal .stat-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
}

#result-modal .actions {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 24px;
}

#result-modal .btn {
padding: 12px 32px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}

#result-modal .btn-primary {
background: #3b82f6;
color: white;
}

#result-modal .btn-primary:hover {
background: #2563eb;
transform: translateY(-2px);
}

#result-modal .btn-secondary {
background: #374151;
color: #d1d5db;
}

#result-modal .btn-secondary:hover {
background: #4b5563;
}

/* No input during modals */
.no-input * {
pointer-events: none !important;
}

.no-input #result-modal,
.no-input #settings-modal {
pointer-events: auto !important;
}

.no-input #result-modal *,
.no-input #settings-modal * {
pointer-events: auto !important;
}

/* ==================== SETTINGS BUTTON ==================== */
.settings-btn {
background: rgba(59, 130, 246, 0.2);
border: 1px solid rgba(59, 130, 246, 0.5);
color: #60a5fa;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}

.settings-btn:hover {
background: rgba(59, 130, 246, 0.3);
border-color: #60a5fa;
}

/* ==================== REDUCE MOTION SUPPORT ==================== */
@media (prefers-reduced-motion: reduce) {
#round-transition {
transition: opacity 0.25s ease;
}

.fx-damage,
.fx-heal,
.fx-shield,
.fx-crit {
animation-duration: 0.15s !important;
}

.fx-death {
animation-duration: 0.4s !important;
}

.skill-ready {
animation: none;
border-color: #22c55e !important;
}

.is-acting {
transform: none;
}

/* v5.4: Reduce motion for achievement toast */
.achievement-toast {
animation: toastSlideIn 0.25s ease-out !important;
}

.confetti-particle {
display: none; /* No confetti */
}

.achievement-icon-large {
animation: none !important; /* No bounce/glow */
}
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
#settings-modal .modal-card {
width: 320px;
}

#result-modal .modal-card {
width: 340px;
}

#round-transition::after {
font-size: 32px;
}
}

/* ==================== v5.4-PHASE3: XP & LEVEL SYSTEM ==================== */

/* XP Bar Container */
.xp-bar-container {
position: fixed;
top: 100px; /* v5.4-HOTFIX: Moved down to avoid overlapping battle order menu */
right: 20px;
width: 300px;
background: rgba(0, 0, 0, 0.85);
border: 2px solid #fbbf24;
border-radius: 12px;
padding: 12px 16px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(251, 191, 36, 0.3);
z-index: 100;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.xp-bar-container:hover {
transform: translateY(-2px);
}

.xp-bar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
}

.xp-level {
color: #fbbf24;
font-size: 16px;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.xp-values {
color: #d1d5db;
font-size: 12px;
font-variant-numeric: tabular-nums;
}

.xp-bar-track {
width: 100%;
height: 14px;
background: rgba(255, 255, 255, 0.1);
border-radius: 7px;
overflow: hidden;
position: relative;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.xp-bar-fill {
height: 100%;
border-radius: 7px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
position: relative;
}

.xp-bar-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
border-radius: 7px 7px 0 0;
}

/* XP Bar Animation on Gain */
@keyframes xp-pulse {
0%, 100% { 
box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
transform: scale(1);
}
50% { 
box-shadow: 0 0 24px rgba(251, 191, 36, 1);
transform: scale(1.02);
}
}

.xp-bar-fill.gaining-xp {
animation: xp-pulse 1s ease-in-out;
}

/* Level-Up Overlay */
.levelup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: radial-gradient(circle, rgba(251,191,36,0.35) 0%, transparent 70%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
pointer-events: none;
animation: levelup-flash 1.2s ease-out;
}

@keyframes levelup-flash {
0% { 
opacity: 0;
backdrop-filter: blur(0px);
}
15% { 
opacity: 1;
backdrop-filter: blur(4px);
}
85% {
opacity: 1;
backdrop-filter: blur(4px);
}
100% { 
opacity: 0;
backdrop-filter: blur(0px);
}
}

.levelup-content {
text-align: center;
animation: levelup-bounce 1s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
z-index: 2;
}

@keyframes levelup-bounce {
0% { 
transform: scale(0) rotate(-180deg);
opacity: 0;
}
50% { 
transform: scale(1.15) rotate(5deg);
}
70% {
transform: scale(0.95) rotate(-2deg);
}
100% { 
transform: scale(1) rotate(0deg);
opacity: 1;
}
}

.levelup-title {
font-size: 64px;
font-weight: 900;
color: #fbbf24;
text-shadow: 
0 0 30px rgba(251, 191, 36, 0.8),
0 0 60px rgba(251, 191, 36, 0.5),
0 4px 20px rgba(0, 0, 0, 0.6);
margin-bottom: 20px;
letter-spacing: 4px;
text-transform: uppercase;
}

.levelup-number {
font-size: 128px;
font-weight: 900;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 8px 32px rgba(251, 191, 36, 0.7));
line-height: 1;
}

/* Level-Up Confetti */
.levelup-confetti-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}

.levelup-confetti {
position: absolute;
width: 12px;
height: 12px;
top: -20px;
border-radius: 2px;
animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
0% {
transform: translateY(0) rotate(0deg) translateX(0);
opacity: 1;
}
100% {
transform: translateY(120vh) rotate(720deg) translateX(calc(-50px + 100px * var(--random, 0.5)));
opacity: 0;
}
}

/* Reduce Motion Support */
@media (prefers-reduced-motion: reduce) {
.xp-bar-fill {
transition: width 0.3s linear;
}

.xp-bar-fill.gaining-xp {
animation: none;
}

.levelup-overlay {
animation: levelup-flash-reduced 1s ease-out;
}

@keyframes levelup-flash-reduced {
0%, 100% { opacity: 0; }
20%, 80% { opacity: 0.9; }
}

.levelup-content {
animation: levelup-bounce-reduced 0.6s ease-out;
}

@keyframes levelup-bounce-reduced {
0% { 
transform: scale(0.8);
opacity: 0;
}
100% { 
transform: scale(1);
opacity: 1;
}
}

.levelup-confetti {
animation: confetti-fall-reduced 1.5s linear forwards;
}

@keyframes confetti-fall-reduced {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(60vh);
opacity: 0;
}
}
}

/* Mobile Responsive - XP Bar */
@media (max-width: 768px) {
.xp-bar-container {
top: 80px; /* v5.4-HOTFIX: Mobile - avoid battle order overlap */
right: 10px;
width: 200px;
padding: 8px 12px;
}

.xp-level {
font-size: 14px;
}

.xp-values {
font-size: 11px;
}

.xp-bar-track {
height: 10px;
}

.levelup-title {
font-size: 48px;
}

.levelup-number {
font-size: 96px;
}
}

/* ═══════════════════════════════════════════════════════════════════════
PRIME ROYALE v6.0 - DECK BUILDER CSS
Bu CSS'i mevcut styles.css dosyasının SONUNA ekle
═══════════════════════════════════════════════════════════════════════ */

/* ==================== DECK BUILDER SCREEN ==================== */
.deck-builder-screen {
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0d0d1a 100%);
display: flex;
flex-direction: column;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.deck-builder-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: rgba(0, 0, 0, 0.5);
border-bottom: 2px solid #3b82f6;
}

.deck-builder-header h1 {
margin: 0;
color: #fff;
font-size: 28px;
text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.back-button {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}

.back-button:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #3b82f6;
}

.header-spacer {
width: 100px;
}

.deck-builder-content {
display: flex;
flex: 1;
gap: 20px;
padding: 20px;
overflow: hidden;
}

/* ==================== FILTERS PANEL ==================== */
.filters-panel {
width: 200px;
background: rgba(30, 30, 60, 0.8);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(59, 130, 246, 0.3);
overflow-y: auto;
}

.filters-panel h3 {
margin: 0 0 15px 0;
color: #3b82f6;
font-size: 18px;
}

.filter-section {
margin-bottom: 20px;
}

.filter-section h4 {
margin: 0 0 10px 0;
color: #9ca3af;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}

.filter-checkbox {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
cursor: pointer;
color: #d1d5db;
font-size: 14px;
}

.filter-checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}

.search-input {
width: 100%;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
color: #fff;
font-size: 14px;
}

.search-input::placeholder {
color: #6b7280;
}

.search-input:focus {
outline: none;
border-color: #3b82f6;
}

.clear-filters-btn {
width: 100%;
padding: 8px;
background: rgba(239, 68, 68, 0.2);
border: 1px solid rgba(239, 68, 68, 0.5);
border-radius: 6px;
color: #ef4444;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
}

.clear-filters-btn:hover {
background: rgba(239, 68, 68, 0.4);
}

/* Rarity Colors */
.rarity-legendary { color: #fbbf24 !important; font-weight: bold; }
.rarity-gold { color: #f59e0b !important; }
.rarity-silver { color: #9ca3af !important; }
.rarity-bronze { color: #d97706 !important; }

/* ==================== CARD POOL ==================== */
.card-pool-container {
flex: 1;
background: rgba(30, 30, 60, 0.6);
border-radius: 12px;
border: 1px solid rgba(59, 130, 246, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}

.pool-header {
padding: 15px 20px;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}

.pool-header h3 {
margin: 0;
color: #fff;
font-size: 16px;
}

.card-pool-grid {
display: grid;
grid-template-columns: repeat(6, 337px); /* 50% of 675px */
gap: 15px;
padding: 20px;
overflow: auto; /* Scroll both directions */
flex: 1;
justify-content: start;
}

/* ========== PROFESSIONAL CARD DESIGN - FIXED SIZE ========== */
.pool-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
border-radius: 12px;
border: 3px solid #4c1d95;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
padding: 15px 12px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
width: 337px; /* 50% of 675px */
height: 525px; /* 50% of 1050px */
flex-shrink: 0; /* Never shrink */
}

.pool-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.03) 50%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.03) 50%, transparent 52%);
background-size: 20px 20px;
pointer-events: none;
}

.pool-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 15px 45px rgba(102, 126, 234, 0.6);
}

.pool-card.selected {
border-color: #22c55e;
box-shadow: 0 0 25px rgba(34, 197, 94, 0.6);
}

.pool-card.disabled {
opacity: 0.4;
cursor: not-allowed;
filter: grayscale(0.8);
}

.pool-card.disabled:hover {
transform: none;
}

/* Rarity-specific backgrounds */
.pool-card.rarity-legendary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
border-color: #a855f7;
box-shadow: 0 8px 30px rgba(168, 85, 247, 0.5);
}

.pool-card.rarity-gold {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #f59e0b 100%);
border-color: #fbbf24;
box-shadow: 0 8px 30px rgba(251, 191, 36, 0.4);
}

.pool-card.rarity-silver {
background: linear-gradient(135deg, #6b7280 0%, #4b5563 50%, #6b7280 100%);
border-color: #9ca3af;
box-shadow: 0 8px 30px rgba(156, 163, 175, 0.4);
}

.pool-card.rarity-bronze {
background: linear-gradient(135deg, #92400e 0%, #78350f 50%, #92400e 100%);
border-color: #d97706;
box-shadow: 0 8px 30px rgba(217, 119, 6, 0.4);
}

/* Rarity Badge Top */
.rarity-badge-top {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 6px 15px;
border-radius: 15px;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
margin-bottom: 10px;
}

.rarity-badge-top.rarity-legendary {
color: #e9d5ff;
}

.rarity-badge-top.rarity-gold {
color: #fef3c7;
}

.rarity-badge-top.rarity-silver {
color: #e5e7eb;
}

.rarity-badge-top.rarity-bronze {
color: #fde68a;
}

/* Hero Ticker */
.card-ticker-hero {
font-size: 40px;
font-weight: 900;
color: #fff;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
letter-spacing: 2px;
margin: 8px 0;
}

/* Logo Circle */
.card-logo-circle {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 12px 0;
backdrop-filter: blur(5px);
}

.card-logo-img {
width: 60%;
height: 60%;
object-fit: contain;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

.card-logo-letter {
font-size: 50px;
font-weight: 900;
color: rgba(255, 255, 255, 0.6);
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Star Ratings Panel */
.star-ratings-panel {
width: 90%;
background: rgba(30, 0, 80, 0.6);
border-radius: 8px;
padding: 10px;
margin: 10px 0;
}

.rating-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
margin: 3px 0;
}

.rating-name {
font-size: 11px;
font-weight: 700;
color: #c4b5fd;
letter-spacing: 0.5px;
}

.rating-stars-gold {
color: #fbbf24;
font-size: 14px;
letter-spacing: 1px;
text-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

/* Passive Skill Box */
.passive-skill-box {
text-align: center;
margin: 10px 0;
}

.passive-icon {
display: block;
font-size: 15px;
margin-bottom: 2px;
}

.passive-title {
display: block;
font-size: 9px;
color: #c4b5fd;
letter-spacing: 0.5px;
margin-bottom: 4px;
}

.passive-skill-name {
display: block;
font-size: 12px;
font-weight: 800;
color: #fbbf24;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* OVR Badge on Card */
.ovr-badge-card {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 15px;
border-radius: 15px;
font-weight: 900;
font-size: 16px;
color: #000;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
margin: 15px 0 0 0; /* Closer to ratings */
}

.ovr-badge-card .ovr-text {
font-size: 10px;
opacity: 0.8;
}

/* PRIME Footer - Hidden */
.prime-footer {
display: none;
}

.prime-coin {
font-size: 18px;
}

.prime-text {
font-size: 16px;
font-weight: 900;
color: #fff;
letter-spacing: 2px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Passive Skill Box - Hidden */
.passive-skill-box {
display: none;
}

/* Selected Overlay */
.selected-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(34, 197, 94, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 900;
color: #fff;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
border-radius: 9px;
z-index: 10;
}

/* Synergy Badge */
.synergy-badge {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
padding: 5px 10px;
border-radius: 10px;
font-size: 12px;
font-weight: bold;
z-index: 15;
box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5);
animation: synergy-glow 2s infinite;
}

@keyframes synergy-glow {
0%, 100% { box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5); }
50% { box-shadow: 0 3px 15px rgba(16, 185, 129, 0.8); }
}

/* OLD STYLES - Hidden */
.pool-card-header,
.pool-card-body,
.pool-card-bg-image,
.level-rarity-badge,
.rarity-label,
.card-ticker-large,
.card-logo-container,
.star-ratings,
.passive-skill,
.prime-indicator,
.card-name-ovr,
.card-stats-bottom,
.selected-badge,
.synergy-indicator {
display: none !important;
}

.portrait-image {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 6px;
}

.card-name {
color: #d1d5db;
font-size: 11px;
margin-bottom: 8px;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.card-mini-stats {
display: flex;
justify-content: space-around;
font-size: 11px;
color: #9ca3af;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* v6.5: OVR Badge on Cards */
.ovr-badge {
position: absolute;
top: 8px;
left: 8px;
padding: 4px 8px;
border-radius: 6px;
font-weight: bold;
font-size: 14px;
color: #000;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
text-shadow: none;
}

/* v6.5: Team OVR Display */
.team-ovr-display {
background: rgba(0, 0, 0, 0.4);
border-radius: 10px;
padding: 15px;
text-align: center;
margin-bottom: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.ovr-main {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}

.ovr-number {
font-size: 2.5rem;
font-weight: bold;
line-height: 1;
}

.ovr-label {
font-size: 0.9rem;
color: #9ca3af;
letter-spacing: 2px;
}

.ovr-breakdown {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
font-size: 0.9rem;
}

.ovr-base {
color: #9ca3af;
}

.ovr-arrow {
color: #4ade80;
font-weight: bold;
}

.ovr-boosted {
font-weight: bold;
}

.ovr-bonus {
color: #4ade80;
font-size: 0.85rem;
}

.ovr-tier {
margin-top: 8px;
font-size: 0.8rem;
font-weight: bold;
letter-spacing: 3px;
}

.selected-badge {
position: absolute;
top: 15px;
right: 8px;
background: #22c55e;
color: #fff;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
z-index: 15;
}

/* ==================== TEAM PANEL ==================== */
.team-panel {
width: 320px;
background: rgba(30, 30, 60, 0.8);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(59, 130, 246, 0.3);
display: flex;
flex-direction: column;
gap: 15px;
overflow-y: auto;
}

.team-panel h3 {
margin: 0;
color: #3b82f6;
font-size: 18px;
}

.selected-team {
display: flex;
flex-direction: column;
gap: 12px;
}

.team-slot {
background: rgba(20, 20, 40, 0.9);
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.1);
min-height: 100px;
position: relative;
overflow: hidden;
}

.team-slot.empty {
border-style: dashed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #6b7280;
}

.empty-slot {
text-align: center;
}

.slot-number {
display: block;
font-size: 12px;
margin-top: 5px;
opacity: 0.7;
}

.team-card-header {
padding: 10px;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 16px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.team-card-body {
padding: 10px;
}

.team-card-name {
color: #d1d5db;
font-size: 12px;
text-align: center;
margin-bottom: 8px;
}

.team-card-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
font-size: 12px;
color: #9ca3af;
}

/* v6.5: Stat boost indicators */
.stat-with-boost {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}

.boost-indicator {
color: #4ade80;
font-weight: 600;
font-size: 11px;
animation: boostPulse 2s ease-in-out infinite;
}

@keyframes boostPulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; text-shadow: 0 0 4px rgba(74, 222, 128, 0.5); }
}

.remove-card-btn {
position: absolute;
top: 5px;
right: 5px;
background: rgba(239, 68, 68, 0.8);
border: none;
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}

.remove-card-btn:hover {
background: #ef4444;
transform: scale(1.1);
}

/* Team Stats */
.team-stats {
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 12px;
}

.team-stats h4 {
margin: 0 0 10px 0;
color: #9ca3af;
font-size: 14px;
}

.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}

.stat-item {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #d1d5db;
}

.stat-value {
color: #22c55e;
font-weight: bold;
}

/* ==================== SYNERGIES PANEL ==================== */
.synergies-panel {
background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 8px;
padding: 12px;
}

.synergies-panel h4 {
margin: 0 0 10px 0;
color: #a78bfa;
font-size: 14px;
}

.no-synergies {
color: #6b7280;
font-size: 12px;
font-style: italic;
text-align: center;
padding: 10px;
}

.active-synergies {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}

.synergy-item {
display: flex;
align-items: center;
gap: 8px;
background: rgba(139, 92, 246, 0.2);
padding: 8px 10px;
border-radius: 6px;
animation: synergy-glow 2s infinite alternate;
}

@keyframes synergy-glow {
from { box-shadow: 0 0 5px rgba(139, 92, 246, 0.3); }
to { box-shadow: 0 0 15px rgba(139, 92, 246, 0.6); }
}

.synergy-icon {
font-size: 18px;
}

.synergy-label {
flex: 1;
color: #e9d5ff;
font-size: 13px;
font-weight: 500;
}

.synergy-count {
color: #a78bfa;
font-size: 12px;
}

.synergy-bonuses {
border-top: 1px solid rgba(139, 92, 246, 0.3);
padding-top: 10px;
}

.synergy-bonuses h5 {
margin: 0 0 8px 0;
color: #a78bfa;
font-size: 12px;
}

.bonus-list {
display: flex;
flex-direction: column;
gap: 4px;
}

.bonus-item {
color: #22c55e;
font-size: 11px;
font-weight: 500;
}

/* ==================== ACTION BUTTONS ==================== */
.team-actions {
display: flex;
gap: 10px;
margin-top: auto;
}

.random-btn {
flex: 1;
padding: 12px;
background: rgba(245, 158, 11, 0.2);
border: 2px solid #f59e0b;
border-radius: 8px;
color: #fbbf24;
font-weight: bold;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}

.random-btn:hover {
background: rgba(245, 158, 11, 0.4);
transform: translateY(-2px);
}

.confirm-btn {
flex: 2;
padding: 12px;
background: rgba(107, 114, 128, 0.3);
border: 2px solid #6b7280;
border-radius: 8px;
color: #9ca3af;
font-weight: bold;
cursor: not-allowed;
font-size: 14px;
transition: all 0.2s;
}

.confirm-btn.ready {
background: rgba(34, 197, 94, 0.3);
border-color: #22c55e;
color: #22c55e;
cursor: pointer;
animation: pulse-ready 1.5s infinite;
}

@keyframes pulse-ready {
0%, 100% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.4); }
50% { box-shadow: 0 0 25px rgba(34, 197, 94, 0.8); }
}

.confirm-btn.ready:hover {
background: rgba(34, 197, 94, 0.5);
transform: translateY(-2px);
}

/* ==================== CARD DETAIL TOOLTIP ==================== */
.card-detail-tooltip {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(20, 20, 40, 0.98);
border: 2px solid #3b82f6;
border-radius: 12px;
padding: 15px 20px;
min-width: 300px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
z-index: 1000;
animation: tooltip-appear 0.2s ease;
}

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

.card-detail-tooltip h4 {
margin: 0 0 8px 0;
color: #fff;
font-size: 16px;
}

.detail-category {
font-size: 12px;
margin-bottom: 10px;
font-weight: 500;
}

.detail-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 10px;
font-size: 12px;
color: #d1d5db;
}

.detail-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.tag {
background: rgba(139, 92, 246, 0.3);
color: #c4b5fd;
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
}

/* ==================== RESPONSIVE ==================== */
/* Fixed layout - no responsive grid changes */
@media (max-width: 1200px) {
.team-panel {
width: 280px;
}
}

@media (max-width: 900px) {
.deck-builder-content {
flex-direction: column;
}

.filters-panel {
width: 100%;
flex-direction: row;
display: flex;
gap: 20px;
padding: 15px;
}

.filter-section {
margin-bottom: 0;
}

.card-pool-container {
flex: 1;
min-height: 300px;
}

.team-panel {
width: 100%;
}

.selected-team {
flex-direction: row;
}

.team-slot {
flex: 1;
min-height: 120px;
}
}

/* ==================== BATTLE LOG SYNERGY STYLE ==================== */
.log-entry.synergy {
color: #a78bfa;
background: rgba(139, 92, 246, 0.1);
border-left: 3px solid #8b5cf6;
padding-left: 8px;
}

/* ============================================
Prime Royale v6.4 - Native Chain Synergies
Deck Builder UI Enhancements
============================================ */

/* Synergy Indicator on Pool Cards */
.pool-card.has-synergy {
border-color: #10b981 !important;
box-shadow: 0 10px 40px rgba(16, 185, 129, 0.5) !important;
}

/* Old synergy-indicator - replaced by synergy-badge */
.synergy-indicator {
display: none !important;
}

/* Potential Synergies Section */
.potential-synergies {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.potential-synergies h5 {
color: #FFC107;
margin-bottom: 10px;
font-size: 0.85rem;
}

.synergy-item.potential {
opacity: 0.9;
background: rgba(255, 193, 7, 0.1);
border-radius: 6px;
padding: 8px 10px;
margin-bottom: 8px;
border: 1px solid rgba(255, 193, 7, 0.2);
}

.synergy-item.active {
background: rgba(76, 175, 80, 0.15);
border: 1px solid rgba(76, 175, 80, 0.4);
border-radius: 6px;
padding: 6px 10px;
margin-bottom: 6px;
}

.potential-info {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}

.synergy-progress {
display: flex;
align-items: center;
gap: 8px;
}

.progress-bar {
flex: 1;
height: 8px;
background: rgba(255, 255, 255, 0.15);
border-radius: 4px;
overflow: hidden;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, #FFC107, #FF9800);
border-radius: 4px;
transition: width 0.3s ease;
}

.progress-text {
font-size: 0.75rem;
font-weight: bold;
color: #FFC107;
min-width: 35px;
text-align: right;
}

/* Tag Matching in Tooltip */
.detail-tags h5 {
color: #81D4FA;
margin-bottom: 8px;
font-size: 0.8rem;
}

.tag {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
padding: 2px 8px;
border-radius: 12px;
font-size: 0.65rem;
margin: 2px;
color: #9E9E9E;
transition: all 0.2s ease;
}

.tag.matching {
background: rgba(76, 175, 80, 0.3);
border: 1px solid #4CAF50;
color: #81C784;
font-weight: bold;
}

/* Skill Info in Tooltip */
.detail-skills {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-skills h5 {
color: #CE93D8;
margin-bottom: 8px;
font-size: 0.8rem;
}

.skill-info {
display: flex;
gap: 10px;
margin-bottom: 4px;
font-size: 0.75rem;
}

.skill-name {
flex: 1;
color: #E0E0E0;
}

.skill-cost {
color: #64B5F6;
font-weight: bold;
}

.skill-cd {
color: #FFB74D;
font-size: 0.7rem;
}

/* Enhanced Search Input */
.search-input {
width: 100%;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
color: #E0E0E0;
font-size: 0.85rem;
transition: all 0.2s ease;
}

.search-input::placeholder {
color: #757575;
}

.search-input:focus {
outline: none;
border-color: #64B5F6;
box-shadow: 0 0 10px rgba(100, 181, 246, 0.3);
}

/* Clear Filters Button */
.clear-filters-btn {
width: 100%;
padding: 8px;
background: rgba(244, 67, 54, 0.15);
border: 1px solid rgba(244, 67, 54, 0.3);
border-radius: 6px;
color: #EF9A9A;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.2s ease;
margin-top: 10px;
}

.clear-filters-btn:hover {
background: rgba(244, 67, 54, 0.3);
color: #FFCDD2;
border-color: rgba(244, 67, 54, 0.5);
}

/* Enhanced Bonus List */
.synergy-bonuses h5 {
color: #FFD54F;
margin: 12px 0 8px 0;
font-size: 0.85rem;
}

.bonus-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
}

.bonus-item {
background: rgba(139, 195, 74, 0.1);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
color: #A5D6A7;
border-left: 2px solid rgba(139, 195, 74, 0.4);
}

/* Filter Stats */
.filter-stats {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
font-size: 0.75rem;
color: #78909C;
}

/* Native Chain Filter Colors */
.filter-checkbox input[type="checkbox"] {
accent-color: #4CAF50;
}

/* Empty Team Slot */
.team-slot.empty {
border: 2px dashed rgba(255, 255, 255, 0.2) !important;
opacity: 0.7;
}

.empty-slot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #616161;
padding: 20px;
}

.slot-number {
font-size: 0.75rem;
margin-top: 4px;
color: #757575;
}

/* Pool Header */
.pool-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.pool-header h3 {
margin: 0;
}

/* Responsive Bonus Grid */
@media (max-width: 1400px) {
.bonus-list {
grid-template-columns: 1fr;
}
}

/* ==================== v6.4 Native Chain Colors ==================== */
/* Solana Purple */
.filter-checkbox span:has(+ input:checked)[data-chain="SOL_NATIVE"] {
color: #9945FF;
}

/* Cosmos Blue */
.filter-checkbox span:has(+ input:checked)[data-chain="COSMOS_NATIVE"] {
color: #6F7390;
}

/* BSC Yellow */
.filter-checkbox span:has(+ input:checked)[data-chain="BSC_NATIVE"] {
color: #F3BA2F;
}

/* ETH Blue */
.filter-checkbox span:has(+ input:checked)[data-chain="ETH_ECOSYSTEM"] {
color: #627EEA;
}

/* ============================================
SYNERGY HELP PANEL - In-Game Guide
============================================ */

.help-panel-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
animation: fadeIn 0.3s ease;
}

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

.help-panel {
background: linear-gradient(135deg, #1a1a2e, #16213e);
border-radius: 12px;
width: 90%;
max-width: 800px;
max-height: 85vh;
display: flex;
flex-direction: column;
border: 2px solid rgba(139, 92, 246, 0.3);
box-shadow: 0 0 40px rgba(139, 92, 246, 0.2);
animation: slideIn 0.3s ease;
}

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

.help-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.help-header h2 {
margin: 0;
color: #a78bfa;
font-size: 1.3rem;
}

.help-panel .close-btn {
background: rgba(239, 68, 68, 0.2);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #fca5a5;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
transition: all 0.2s;
}

.help-panel .close-btn:hover {
background: rgba(239, 68, 68, 0.4);
transform: scale(1.1);
}

.help-tabs {
display: flex;
gap: 5px;
padding: 10px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
overflow-x: auto;
}

.help-tabs .tab {
padding: 8px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
color: #9ca3af;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s;
white-space: nowrap;
}

.help-tabs .tab:hover {
background: rgba(255, 255, 255, 0.1);
color: #e0e0e0;
}

.help-tabs .tab.active {
background: rgba(139, 92, 246, 0.3);
border-color: rgba(139, 92, 246, 0.5);
color: #c4b5fd;
}

.help-content {
flex: 1;
overflow-y: auto;
padding: 20px;
}

/* Native Chain Cards */
.chain-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
border-left: 3px solid #a78bfa;
transition: all 0.2s;
}

.chain-card:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(3px);
}

.chain-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}

.chain-icon {
font-size: 1.2rem;
}

.chain-name {
font-weight: bold;
color: #e0e0e0;
font-size: 1rem;
}

.chain-cards {
font-size: 0.8rem;
color: #9ca3af;
margin-bottom: 8px;
}

.chain-tiers .tier {
display: flex;
gap: 8px;
margin-bottom: 4px;
font-size: 0.85rem;
}

.tier-count {
color: #fcd34d;
font-weight: bold;
min-width: 25px;
}

.tier-bonuses {
color: #86efac;
}

.chain-strategy {
margin-top: 8px;
font-size: 0.8rem;
color: #93c5fd;
font-style: italic;
}

/* Category Items */
.category-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
padding: 10px;
margin-bottom: 8px;
transition: all 0.2s;
}

.category-item:hover {
background: rgba(255, 255, 255, 0.08);
}

.cat-header {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
font-weight: bold;
}

.cat-type {
font-size: 0.75rem;
color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
padding: 2px 8px;
border-radius: 10px;
}

.cat-bonuses {
font-size: 0.8rem;
color: #86efac;
}

/* Meta Team Cards */
.meta-team-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.2s;
}

.meta-team-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
}

.meta-team-card .team-name {
font-size: 1.1rem;
font-weight: bold;
color: #f0f0f0;
margin-bottom: 4px;
}

.team-style {
font-size: 0.85rem;
color: #fbbf24;
margin-bottom: 8px;
}

.team-cards {
font-size: 0.9rem;
color: #93c5fd;
margin-bottom: 4px;
}

.team-synergies {
font-size: 0.8rem;
color: #a78bfa;
margin-bottom: 4px;
}

.team-stats {
font-size: 0.85rem;
color: #86efac;
margin-bottom: 4px;
}

.team-power {
font-size: 0.8rem;
color: #fca5a5;
font-weight: bold;
}

/* Counter Matchups */
.matchup {
display: grid;
grid-template-columns: 1fr auto 1fr auto;
gap: 10px;
align-items: center;
padding: 8px;
background: rgba(255, 255, 255, 0.03);
border-radius: 6px;
margin-bottom: 6px;
font-size: 0.85rem;
}

.matchup .attacker {
color: #fca5a5;
text-align: right;
}

.matchup .vs {
color: #9ca3af;
font-size: 0.75rem;
}

.matchup .defender {
color: #93c5fd;
}

.matchup .result {
font-size: 0.8rem;
}

.counter-tips {
margin-top: 15px;
}

.counter-tips h4 {
color: #fcd34d;
margin-bottom: 10px;
font-size: 0.95rem;
}

.counter-tips ul {
list-style: none;
padding: 0;
margin: 0;
}

.counter-tips li {
padding: 6px 0;
font-size: 0.85rem;
color: #d1d5db;
}

.help-footer {
padding: 15px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.2);
border-radius: 0 0 12px 12px;
}

.help-footer .tip {
font-size: 0.8rem;
color: #9ca3af;
line-height: 1.4;
}

.help-footer .tip strong {
color: #fcd34d;
}

/* Help Button in Deck Builder */
.help-btn {
background: rgba(139, 92, 246, 0.2);
border: 1px solid rgba(139, 92, 246, 0.4);
color: #c4b5fd;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s;
}

.help-btn:hover {
background: rgba(139, 92, 246, 0.4);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Combos Section */
.combos-section .section-title {
color: #fcd34d;
margin-bottom: 15px;
font-size: 1rem;
}

.combo-card {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(139, 92, 246, 0.1));
border-radius: 10px;
padding: 14px;
margin-bottom: 14px;
border: 1px solid rgba(251, 191, 36, 0.3);
}

.combo-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}

.combo-name {
font-weight: bold;
font-size: 1rem;
color: #fbbf24;
}

.combo-rating {
font-size: 0.9rem;
}

.combo-cards {
font-size: 0.85rem;
color: #93c5fd;
margin-bottom: 6px;
}

.combo-synergies {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}

.synergy-tag {
background: rgba(139, 92, 246, 0.3);
padding: 3px 8px;
border-radius: 4px;
font-size: 0.75rem;
color: #c4b5fd;
}

.combo-bonus {
font-size: 0.85rem;
color: #86efac;
margin-bottom: 6px;
font-weight: 500;
}

.combo-desc {
font-size: 0.8rem;
color: #9ca3af;
font-style: italic;
}

/* Scaling Chart */
.scaling-chart {
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 12px;
margin-top: 10px;
}

.scaling-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 0.8rem;
}

.scaling-row:last-child {
border-bottom: none;
}

.scaling-stat {
color: #fbbf24;
font-weight: 500;
}

.scaling-dps {
color: #86efac;
text-align: center;
}

.scaling-note {
color: #9ca3af;
font-size: 0.75rem;
}

/* AI Tactics Section */
.ai-tactics-section .section-title {
color: #a78bfa;
margin-bottom: 10px;
font-size: 1rem;
}

.ai-intro {
font-size: 0.85rem;
color: #9ca3af;
margin-bottom: 15px;
padding: 10px;
background: rgba(139, 92, 246, 0.1);
border-radius: 6px;
border-left: 3px solid #a78bfa;
}

.ai-tactic-card {
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.2s;
}

.ai-tactic-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(139, 92, 246, 0.3);
}

.tactic-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}

.tactic-icon {
font-size: 1.2rem;
}

.tactic-title {
font-weight: bold;
color: #e0e0e0;
font-size: 0.95rem;
}

.tactic-description {
font-size: 0.8rem;
color: #b0b0b0;
line-height: 1.5;
}

/* ==================== TEST MODE STYLES v6.4 ==================== */
.test-mode-badge {
background: rgba(251, 191, 36, 0.3);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
color: #fbbf24;
margin-left: 10px;
animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}

.test-mode-toggle {
background: rgba(139, 92, 246, 0.2);
border: 1px solid rgba(139, 92, 246, 0.4);
color: #c4b5fd;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s;
}

.test-mode-toggle:hover {
background: rgba(139, 92, 246, 0.4);
}

.test-mode-toggle.active {
background: rgba(251, 191, 36, 0.3);
border-color: rgba(251, 191, 36, 0.6);
color: #fbbf24;
}

.test-mode-controls {
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.3);
border-radius: 10px;
padding: 15px;
margin: 10px 20px;
}

.team-selector-tabs {
display: flex;
gap: 10px;
margin-bottom: 12px;
}

.team-tab {
flex: 1;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #9ca3af;
cursor: pointer;
font-weight: bold;
transition: all 0.2s;
}

.team-tab:hover {
background: rgba(255, 255, 255, 0.1);
}

.team-tab.active {
background: rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.6);
color: #93c5fd;
}

.team-tab:last-child.active {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.6);
color: #fca5a5;
}

.preset-teams {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}

.preset-label {
font-size: 0.85rem;
color: #9ca3af;
font-weight: 500;
}

.preset-teams button {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #d1d5db;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 0.75rem;
transition: all 0.2s;
}

.preset-teams button:hover {
background: rgba(139, 92, 246, 0.3);
border-color: rgba(139, 92, 246, 0.5);
color: #c4b5fd;
transform: translateY(-2px);
}

.enemy-team-section {
margin-top: 20px;
padding-top: 15px;
border-top: 2px dashed rgba(239, 68, 68, 0.3);
}

.enemy-team-section h3 {
color: #fca5a5;
margin-bottom: 10px;
}

.selected-team.enemy-team .team-slot {
border-color: rgba(239, 68, 68, 0.3);
}

.selected-team.enemy-team .team-slot.selecting {
box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.empty-slot.enemy {
color: #fca5a5;
}

.deck-builder-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: rgba(0, 0, 0, 0.3);
}

/* Responsive Help Panel */
@media (max-width: 768px) {
.help-panel {
width: 95%;
max-height: 90vh;
}

.help-tabs {
padding: 8px 15px;
}

.help-tabs .tab {
padding: 6px 12px;
font-size: 0.8rem;
}

.matchup {
grid-template-columns: 1fr;
text-align: center;
}

.matchup .attacker,
.matchup .defender {
text-align: center;
}
}
/* ====================
PRIME ROYALE v6.2 - FUSION UI STYLES
Phase A1: Fusion Success Experience

ADD THIS TO styles.css
==================== */

/* ==================== FUSION MODAL OVERLAY ==================== */
.fusion-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
opacity: 0;
animation: fadeInOverlay 0.3s ease-out forwards;
}

.fusion-modal-overlay.show {
opacity: 1;
}

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

/* ==================== FUSION MODAL CONTAINER ==================== */
.fusion-modal {
background: linear-gradient(135deg, rgba(15, 12, 41, 0.95), rgba(48, 43, 99, 0.95));
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 30px;
max-width: 700px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: slideInFromBottom 0.4s ease-out;
position: relative;
overflow: hidden;
}

.fusion-modal.legendary {
border: 2px solid rgba(168, 85, 247, 0.8);
box-shadow: 
0 20px 60px rgba(0, 0, 0, 0.5),
0 0 40px rgba(168, 85, 247, 0.4),
0 0 80px rgba(251, 191, 36, 0.2);
animation: slideInFromBottom 0.4s ease-out, legendaryPulseModal 2s ease-in-out infinite;
}

@keyframes slideInFromBottom {
from {
transform: translateY(100px) scale(0.8);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}

@keyframes legendaryPulseModal {
0%, 100% {
box-shadow: 
0 20px 60px rgba(0, 0, 0, 0.5),
0 0 30px rgba(168, 85, 247, 0.4),
0 0 60px rgba(251, 191, 36, 0.2);
}
50% {
box-shadow: 
0 20px 60px rgba(0, 0, 0, 0.5),
0 0 50px rgba(168, 85, 247, 0.6),
0 0 100px rgba(251, 191, 36, 0.4);
}
}

/* ==================== MODAL HEADER ==================== */
.fusion-modal-header {
text-align: center;
margin-bottom: 25px;
}

.fusion-title {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
background: linear-gradient(90deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titlePulse 1.5s ease-in-out infinite;
}

.fusion-title.rarity-up {
background: linear-gradient(90deg, #a855f7, #c084fc, #fbbf24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

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

.legendary-banner {
font-size: 18px;
color: #fbbf24;
font-weight: bold;
padding: 8px 16px;
background: linear-gradient(90deg, rgba(168, 85, 247, 0.3), rgba(251, 191, 36, 0.3));
border-radius: 20px;
display: inline-block;
margin-top: 10px;
animation: rainbowGlow 2s linear infinite;
}

@keyframes rainbowGlow {
0% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
33% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
66% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
}

/* ==================== CARD COMPARISON ==================== */
.fusion-cards-container {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin: 30px 0;
}

.fusion-card {
flex: 1;
max-width: 200px;
}

.fusion-card .card-frame {
position: relative;
aspect-ratio: 2/3;
border-radius: 12px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.2);
}

.fusion-card.after-card .card-frame {
animation: cardReveal 0.6s ease-out 0.2s backwards;
}

@keyframes cardReveal {
from {
transform: rotateY(90deg) scale(0.8);
opacity: 0;
}
to {
transform: rotateY(0deg) scale(1);
opacity: 1;
}
}

.fusion-card .card-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.card-info-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
text-align: center;
}

.card-name {
font-size: 14px;
font-weight: bold;
margin-bottom: 4px;
}

.card-name.upgraded {
color: #fbbf24;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}

.card-level-rarity {
font-size: 12px;
color: #9ca3af;
}

.card-level-rarity.upgraded {
font-size: 14px;
font-weight: bold;
}

.card-level-rarity.rarity-bronze { color: #d97706; }
.card-level-rarity.rarity-silver { color: #9ca3af; }
.card-level-rarity.rarity-gold { color: #fbbf24; }
.card-level-rarity.rarity-legendary { 
color: #a855f7;
text-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
}

/* Card shine effect (after card only) */
.card-shine-overlay {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.3) 50%,
transparent 70%
);
animation: shinePass 2s ease-in-out infinite;
pointer-events: none;
}

@keyframes shinePass {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
50%, 100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}

/* ==================== FUSION ARROW ==================== */
.fusion-arrow {
display: flex;
align-items: center;
justify-content: center;
}

.arrow-icon {
font-size: 40px;
font-weight: bold;
color: #fbbf24;
animation: arrowPulse 1.5s ease-in-out infinite;
}

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

/* ==================== RARITY GLOW SYSTEM ==================== */
.rarity-glow {
position: absolute;
inset: -4px;
border-radius: 12px;
pointer-events: none;
opacity: calc(var(--intensity, 1) * 0.8);
z-index: 1;
}

.rarity-glow-bronze {
background: radial-gradient(circle at center, 
rgba(217, 119, 6, 0.3) 0%, 
transparent 70%
);
box-shadow: 0 0 15px rgba(217, 119, 6, 0.5);
animation: glowPulseBronze 2s ease-in-out infinite;
}

.rarity-glow-silver {
background: radial-gradient(circle at center, 
rgba(156, 163, 175, 0.3) 0%, 
transparent 70%
);
box-shadow: 0 0 20px rgba(156, 163, 175, 0.6);
animation: glowPulseSilver 2s ease-in-out infinite;
}

.rarity-glow-gold {
background: radial-gradient(circle at center, 
rgba(251, 191, 36, 0.3) 0%, 
transparent 70%
);
box-shadow: 0 0 25px rgba(251, 191, 36, 0.7);
animation: glowPulseGold 2s ease-in-out infinite;
}

.rarity-glow-legendary {
background: radial-gradient(circle at center, 
rgba(168, 85, 247, 0.4) 0%, 
rgba(251, 191, 36, 0.2) 50%,
transparent 70%
);
box-shadow: 
0 0 30px rgba(168, 85, 247, 0.8),
0 0 50px rgba(251, 191, 36, 0.5);
animation: glowPulseLegendary 1.5s ease-in-out infinite;
}

@keyframes glowPulseBronze {
0%, 100% { box-shadow: 0 0 15px rgba(217, 119, 6, 0.4); }
50% { box-shadow: 0 0 25px rgba(217, 119, 6, 0.7); }
}

@keyframes glowPulseSilver {
0%, 100% { box-shadow: 0 0 20px rgba(156, 163, 175, 0.5); }
50% { box-shadow: 0 0 30px rgba(156, 163, 175, 0.8); }
}

@keyframes glowPulseGold {
0%, 100% { box-shadow: 0 0 25px rgba(251, 191, 36, 0.6); }
50% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.9); }
}

@keyframes glowPulseLegendary {
0%, 100% {
box-shadow: 
0 0 30px rgba(168, 85, 247, 0.7),
0 0 50px rgba(251, 191, 36, 0.4);
}
50% {
box-shadow: 
0 0 50px rgba(168, 85, 247, 1.0),
0 0 80px rgba(251, 191, 36, 0.7);
}
}

/* ==================== STATS COMPARISON ==================== */
.fusion-stats-container {
margin: 25px 0;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-title {
text-align: center;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #fbbf24;
}

.stats-grid {
display: flex;
flex-direction: column;
gap: 10px;
}

.stat-comparison-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
transition: background 0.3s ease;
}

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

.stat-label {
display: flex;
align-items: center;
gap: 8px;
font-weight: bold;
font-size: 14px;
}

.stat-icon {
font-size: 18px;
}

.stat-values {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
}

.stat-old {
color: #9ca3af;
}

.stat-arrow {
color: #fbbf24;
font-weight: bold;
}

.stat-new {
color: #22c55e;
font-weight: bold;
font-size: 18px;
}

.stat-new.animating {
animation: statBounce 0.4s ease-out;
}

@keyframes statBounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.stat-increase {
color: #fbbf24;
font-size: 12px;
font-weight: bold;
padding: 2px 6px;
background: rgba(251, 191, 36, 0.2);
border-radius: 4px;
}

/* ==================== PARTICLE BURST ==================== */
.particle-burst-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}

.fusion-particle {
position: absolute;
width: var(--size, 6px);
height: var(--size, 6px);
background: var(--color, #fbbf24);
border-radius: 50%;
left: var(--px, 50%);
top: var(--py, 50%);
animation: particleExplode 1.5s ease-out forwards;
box-shadow: 0 0 4px var(--color, #fbbf24);
}

@keyframes particleExplode {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: 
translate(var(--vx, 0), var(--vy, 0)) 
rotate(var(--rotation, 0deg)) 
scale(0);
opacity: 0;
}
}

/* ==================== MODAL FOOTER ==================== */
.fusion-modal-footer {
text-align: center;
margin-top: 25px;
display: flex;
flex-direction: column;
gap: 10px;
}

.fusion-close-btn {
padding: 12px 40px;
font-size: 16px;
font-weight: bold;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #000;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}

.fusion-close-btn:hover {
background: linear-gradient(135deg, #fde047, #fbbf24);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}

.fusion-hint {
font-size: 12px;
color: #9ca3af;
font-style: italic;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 768px) {
.fusion-modal {
padding: 20px;
width: 95%;
}

.fusion-title {
font-size: 24px;
}

.fusion-cards-container {
gap: 15px;
}

.fusion-card {
max-width: 120px;
}

.arrow-icon {
font-size: 30px;
}

.stat-values {
font-size: 14px;
}
}

/* ==================== ACCESSIBILITY ==================== */
@media (prefers-reduced-motion: reduce) {
.fusion-modal,
.fusion-card,
.stat-new,
.arrow-icon,
.fusion-particle,
.card-shine-overlay {
animation: none !important;
}

.rarity-glow-bronze,
.rarity-glow-silver,
.rarity-glow-gold,
.rarity-glow-legendary {
animation: none !important;
}
}
/* ====================
PRIME ROYALE v6.2 - FUSION UI STYLES
Phase A1: Fusion Success Experience

ADD THIS TO styles.css
==================== */

/* ==================== FUSION MODAL OVERLAY ==================== */
.fusion-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
opacity: 0;
animation: fadeInOverlay 0.3s ease-out forwards;
}

.fusion-modal-overlay.show {
opacity: 1;
}

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

/* ==================== FUSION MODAL CONTAINER ==================== */
.fusion-modal {
background: linear-gradient(135deg, rgba(15, 12, 41, 0.95), rgba(48, 43, 99, 0.95));
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 30px;
max-width: 700px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
animation: slideInFromBottom 0.4s ease-out;
position: relative;
overflow: hidden;
}

.fusion-modal.legendary {
border: 2px solid rgba(168, 85, 247, 0.8);
box-shadow: 
0 20px 60px rgba(0, 0, 0, 0.5),
0 0 40px rgba(168, 85, 247, 0.4),
0 0 80px rgba(251, 191, 36, 0.2);
animation: slideInFromBottom 0.4s ease-out, legendaryPulseModal 2s ease-in-out infinite;
}

@keyframes slideInFromBottom {
from {
transform: translateY(100px) scale(0.8);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}

@keyframes legendaryPulseModal {
0%, 100% {
box-shadow: 
0 20px 60px rgba(0, 0, 0, 0.5),
0 0 30px rgba(168, 85, 247, 0.4),
0 0 60px rgba(251, 191, 36, 0.2);
}
50% {
box-shadow: 
0 20px 60px rgba(0, 0, 0, 0.5),
0 0 50px rgba(168, 85, 247, 0.6),
0 0 100px rgba(251, 191, 36, 0.4);
}
}

/* ==================== MODAL HEADER ==================== */
.fusion-modal-header {
text-align: center;
margin-bottom: 25px;
}

.fusion-title {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
background: linear-gradient(90deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: titlePulse 1.5s ease-in-out infinite;
}

.fusion-title.rarity-up {
background: linear-gradient(90deg, #a855f7, #c084fc, #fbbf24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

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

.legendary-banner {
font-size: 18px;
color: #fbbf24;
font-weight: bold;
padding: 8px 16px;
background: linear-gradient(90deg, rgba(168, 85, 247, 0.3), rgba(251, 191, 36, 0.3));
border-radius: 20px;
display: inline-block;
margin-top: 10px;
animation: rainbowGlow 2s linear infinite;
}

@keyframes rainbowGlow {
0% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
33% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
66% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
}

/* ==================== CARD COMPARISON ==================== */
.fusion-cards-container {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin: 30px 0;
}

.fusion-card {
flex: 1;
max-width: 200px;
}

.fusion-card .card-frame {
position: relative;
aspect-ratio: 2/3;
border-radius: 12px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.2);
}

.fusion-card.after-card .card-frame {
animation: cardReveal 0.6s ease-out 0.2s backwards;
}

@keyframes cardReveal {
from {
transform: rotateY(90deg) scale(0.8);
opacity: 0;
}
to {
transform: rotateY(0deg) scale(1);
opacity: 1;
}
}

.fusion-card .card-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.card-info-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
text-align: center;
}

.card-name {
font-size: 14px;
font-weight: bold;
margin-bottom: 4px;
}

.card-name.upgraded {
color: #fbbf24;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}

.card-level-rarity {
font-size: 12px;
color: #9ca3af;
}

.card-level-rarity.upgraded {
font-size: 14px;
font-weight: bold;
}

.card-level-rarity.rarity-bronze { color: #d97706; }
.card-level-rarity.rarity-silver { color: #9ca3af; }
.card-level-rarity.rarity-gold { color: #fbbf24; }
.card-level-rarity.rarity-legendary { 
color: #a855f7;
text-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
}

/* Card shine effect (after card only) */
.card-shine-overlay {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.3) 50%,
transparent 70%
);
animation: shinePass 2s ease-in-out infinite;
pointer-events: none;
}

@keyframes shinePass {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
50%, 100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}

/* ==================== FUSION ARROW ==================== */
.fusion-arrow {
display: flex;
align-items: center;
justify-content: center;
}

.arrow-icon {
font-size: 40px;
font-weight: bold;
color: #fbbf24;
animation: arrowPulse 1.5s ease-in-out infinite;
}

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

/* ==================== RARITY GLOW SYSTEM ==================== */
.rarity-glow {
position: absolute;
inset: -4px;
border-radius: 12px;
pointer-events: none;
opacity: calc(var(--intensity, 1) * 0.8);
z-index: 1;
}

.rarity-glow-bronze {
background: radial-gradient(circle at center, 
rgba(217, 119, 6, 0.3) 0%, 
transparent 70%
);
box-shadow: 0 0 15px rgba(217, 119, 6, 0.5);
animation: glowPulseBronze 2s ease-in-out infinite;
}

.rarity-glow-silver {
background: radial-gradient(circle at center, 
rgba(156, 163, 175, 0.3) 0%, 
transparent 70%
);
box-shadow: 0 0 20px rgba(156, 163, 175, 0.6);
animation: glowPulseSilver 2s ease-in-out infinite;
}

.rarity-glow-gold {
background: radial-gradient(circle at center, 
rgba(251, 191, 36, 0.3) 0%, 
transparent 70%
);
box-shadow: 0 0 25px rgba(251, 191, 36, 0.7);
animation: glowPulseGold 2s ease-in-out infinite;
}

.rarity-glow-legendary {
background: radial-gradient(circle at center, 
rgba(168, 85, 247, 0.4) 0%, 
rgba(251, 191, 36, 0.2) 50%,
transparent 70%
);
box-shadow: 
0 0 30px rgba(168, 85, 247, 0.8),
0 0 50px rgba(251, 191, 36, 0.5);
animation: glowPulseLegendary 1.5s ease-in-out infinite;
}

@keyframes glowPulseBronze {
0%, 100% { box-shadow: 0 0 15px rgba(217, 119, 6, 0.4); }
50% { box-shadow: 0 0 25px rgba(217, 119, 6, 0.7); }
}

@keyframes glowPulseSilver {
0%, 100% { box-shadow: 0 0 20px rgba(156, 163, 175, 0.5); }
50% { box-shadow: 0 0 30px rgba(156, 163, 175, 0.8); }
}

@keyframes glowPulseGold {
0%, 100% { box-shadow: 0 0 25px rgba(251, 191, 36, 0.6); }
50% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.9); }
}

@keyframes glowPulseLegendary {
0%, 100% {
box-shadow: 
0 0 30px rgba(168, 85, 247, 0.7),
0 0 50px rgba(251, 191, 36, 0.4);
}
50% {
box-shadow: 
0 0 50px rgba(168, 85, 247, 1.0),
0 0 80px rgba(251, 191, 36, 0.7);
}
}

/* ==================== STATS COMPARISON ==================== */
.fusion-stats-container {
margin: 25px 0;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-title {
text-align: center;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #fbbf24;
}

.stats-grid {
display: flex;
flex-direction: column;
gap: 10px;
}

.stat-comparison-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
transition: background 0.3s ease;
}

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

.stat-label {
display: flex;
align-items: center;
gap: 8px;
font-weight: bold;
font-size: 14px;
}

.stat-icon {
font-size: 18px;
}

.stat-values {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
}

.stat-old {
color: #9ca3af;
}

.stat-arrow {
color: #fbbf24;
font-weight: bold;
}

.stat-new {
color: #22c55e;
font-weight: bold;
font-size: 18px;
}

.stat-new.animating {
animation: statBounce 0.4s ease-out;
}

@keyframes statBounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.stat-increase {
color: #fbbf24;
font-size: 12px;
font-weight: bold;
padding: 2px 6px;
background: rgba(251, 191, 36, 0.2);
border-radius: 4px;
}

/* ==================== PARTICLE BURST ==================== */
.particle-burst-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}

.fusion-particle {
position: absolute;
width: var(--size, 6px);
height: var(--size, 6px);
background: var(--color, #fbbf24);
border-radius: 50%;
left: var(--px, 50%);
top: var(--py, 50%);
animation: particleExplode 1.5s ease-out forwards;
box-shadow: 0 0 4px var(--color, #fbbf24);
}

@keyframes particleExplode {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: 
translate(var(--vx, 0), var(--vy, 0)) 
rotate(var(--rotation, 0deg)) 
scale(0);
opacity: 0;
}
}

/* ==================== MODAL FOOTER ==================== */
.fusion-modal-footer {
text-align: center;
margin-top: 25px;
display: flex;
flex-direction: column;
gap: 10px;
}

.fusion-close-btn {
padding: 12px 40px;
font-size: 16px;
font-weight: bold;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #000;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}

.fusion-close-btn:hover {
background: linear-gradient(135deg, #fde047, #fbbf24);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}

.fusion-hint {
font-size: 12px;
color: #9ca3af;
font-style: italic;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 768px) {
.fusion-modal {
padding: 20px;
width: 95%;
}

.fusion-title {
font-size: 24px;
}

.fusion-cards-container {
gap: 15px;
}

.fusion-card {
max-width: 120px;
}

.arrow-icon {
font-size: 30px;
}

.stat-values {
font-size: 14px;
}
}

/* ==================== ACCESSIBILITY ==================== */
@media (prefers-reduced-motion: reduce) {
.fusion-modal,
.fusion-card,
.stat-new,
.arrow-icon,
.fusion-particle,
.card-shine-overlay {
animation: none !important;
}

.rarity-glow-bronze,
.rarity-glow-silver,
.rarity-glow-gold,
.rarity-glow-legendary {
animation: none !important;
}
}
/* ====================
PRIME ROYALE v6.2-A2 - BATTLE UI STYLES
Phase A2: Battle Polish

ADD THIS TO styles.css
==================== */

/* ==================== ENHANCED HP BAR ==================== */
.enhanced-hp-bar-container {
position: relative;
width: 100%;
margin: 4px 0;
}

.enhanced-hp-bar-bg {
position: relative;
width: 100%;
height: 8px;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
overflow: hidden;
}

.enhanced-hp-bar-ghost {
position: absolute;
top: 0;
left: 0;
height: 100%;
transition: width 0.8s ease-out 0.2s, opacity 0.8s ease-out 0.2s;
border-radius: 4px;
opacity: 0.8;
}

.enhanced-hp-bar-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
transition: width 0.3s ease-out, background-color 0.3s ease;
border-radius: 4px;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.enhanced-hp-text {
position: absolute;
top: -2px;
right: 0;
font-size: 10px;
font-weight: bold;
color: white;
text-shadow: 1px 1px 2px #000;
pointer-events: none;
}

/* ==================== DAMAGE POPUP LAYER ==================== */
.damage-popup-layer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 9999;
}

.damage-popup {
position: absolute;
font-size: 24px;
font-weight: bold;
text-shadow: 
2px 2px 4px #000,
-1px -1px 2px #000,
1px -1px 2px #000,
-1px 1px 2px #000;
animation: damagePopupFloat 1s ease-out forwards;
pointer-events: none;
display: flex;
align-items: center;
gap: 4px;
transform: translate(-50%, -50%);
white-space: nowrap;
}

.damage-popup.critical {
font-size: 32px;
animation: damagePopupFloatCrit 1s ease-out forwards;
}

.damage-popup.heal {
color: #51cf66 !important;
}

.damage-popup.shield {
color: #74c0fc !important;
}

.damage-icon {
font-size: 0.8em;
animation: iconBounce 0.5s ease-out;
}

.damage-value {
animation: valuePop 0.3s ease-out;
}

.crit-star {
font-size: 0.6em;
color: #ffd43b;
animation: starSpin 0.6s ease-out;
}

@keyframes damagePopupFloat {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
50% {
transform: translate(-50%, calc(-50% - 40px)) scale(1.2);
}
100% {
transform: translate(-50%, calc(-50% - 80px)) scale(1);
opacity: 0;
}
}

@keyframes damagePopupFloatCrit {
0% {
transform: translate(-50%, -50%) scale(0.6) rotate(-10deg);
opacity: 1;
}
50% {
transform: translate(-50%, calc(-50% - 50px)) scale(1.4) rotate(5deg);
}
100% {
transform: translate(-50%, calc(-50% - 100px)) scale(1.2) rotate(0deg);
opacity: 0;
}
}

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

@keyframes valuePop {
0% { transform: scale(0.8); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

@keyframes starSpin {
0% {
transform: rotate(0deg) scale(0);
opacity: 0;
}
50% {
transform: rotate(180deg) scale(1.5);
opacity: 1;
}
100% {
transform: rotate(360deg) scale(1);
opacity: 1;
}
}

/* ==================== LEVEL BADGE ==================== */
.battle-level-badge {
position: absolute;
z-index: 10;
background: linear-gradient(135deg, #1e293b, #0f172a);
color: #fbbf24;
padding: 3px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: bold;
border: 1.5px solid #fbbf24;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 2px #000;
animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
0%, 100% {
box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
}
50% {
box-shadow: 0 2px 12px rgba(251, 191, 36, 0.7);
}
}

/* ==================== RARITY BORDER ==================== */
.battle-rarity-border {
position: absolute;
inset: -2px;
border-radius: 8px;
pointer-events: none;
border: 2px solid transparent;
z-index: 1;
}

.battle-rarity-border.rarity-silver {
border-color: #9ca3af;
animation: rarityGlowSilver 2s ease-in-out infinite;
}

.battle-rarity-border.rarity-gold {
border-color: #fbbf24;
animation: rarityGlowGold 2s ease-in-out infinite;
}

.battle-rarity-border.rarity-legendary {
border-color: #a855f7;
animation: rarityGlowLegendary 1.5s ease-in-out infinite;
}

@keyframes rarityGlowSilver {
0%, 100% {
box-shadow: 0 0 8px rgba(156, 163, 175, 0.5);
}
50% {
box-shadow: 0 0 16px rgba(156, 163, 175, 0.8);
}
}

@keyframes rarityGlowGold {
0%, 100% {
box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}
50% {
box-shadow: 0 0 20px rgba(251, 191, 36, 0.9);
}
}

@keyframes rarityGlowLegendary {
0%, 100% {
box-shadow: 
0 0 12px rgba(168, 85, 247, 0.7),
0 0 24px rgba(251, 191, 36, 0.4);
}
50% {
box-shadow: 
0 0 20px rgba(168, 85, 247, 1.0),
0 0 40px rgba(251, 191, 36, 0.7);
}
}

/* ==================== ENHANCED BATTLE CARD ==================== */
.enhanced-battle-card {
position: relative;
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 10px;
transition: all 0.3s ease;
}

.enhanced-battle-card.selected {
border-color: #fbbf24;
box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
transform: scale(1.05);
}

.enhanced-battle-card.targeted {
border-color: #ef4444;
box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

.enhanced-battle-card.shaking {
animation: cardShake 0.3s ease-in-out;
}

@keyframes cardShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px) rotate(-1deg); }
50% { transform: translateX(6px) rotate(1deg); }
75% { transform: translateX(-4px) rotate(-0.5deg); }
}

.enhanced-bars-container {
margin-top: 8px;
}

/* ==================== FLASH EFFECT ==================== */
.battle-card-flash {
animation: cardFlash 0.2s ease-out;
}

@keyframes cardFlash {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.5);
}
}

/* Critical hit flash */
.battle-card-crit-flash {
animation: critFlash 0.4s ease-out;
}

@keyframes critFlash {
0%, 100% {
filter: brightness(1);
box-shadow: none;
}
50% {
filter: brightness(1.8);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 768px) {
.damage-popup {
font-size: 20px;
}

.damage-popup.critical {
font-size: 26px;
}

.battle-level-badge {
font-size: 10px;
padding: 2px 6px;
}

.enhanced-hp-bar-bg {
height: 6px;
}
}

/* ==================== ACCESSIBILITY ==================== */
@media (prefers-reduced-motion: reduce) {
.damage-popup,
.damage-popup.critical,
.enhanced-battle-card.shaking,
.battle-level-badge,
.battle-rarity-border {
animation: none !important;
}

.enhanced-hp-bar-fill,
.enhanced-hp-bar-ghost {
transition: none !important;
}

.damage-popup {
opacity: 1;
transform: translate(-50%, -50%);
}
}

/* ==================== DEATH ANIMATION ==================== */
.enhanced-battle-card.dying {
animation: cardDeath 0.8s ease-out forwards;
}

@keyframes cardDeath {
0% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
50% {
opacity: 0.5;
transform: scale(0.9) rotate(-5deg);
}
100% {
opacity: 0;
transform: scale(0.7) rotate(-10deg);
filter: grayscale(100%);
}
}

/* ==================== ATTACK ANIMATION ==================== */
.enhanced-battle-card.attacking {
animation: cardAttack 0.4s ease-out;
}

@keyframes cardAttack {
0%, 100% {
transform: translateX(0);
}
30% {
transform: translateX(-10px);
}
60% {
transform: translateX(15px);
}
}

/* ==================== HEAL EFFECT ==================== */
.enhanced-battle-card.healing {
animation: cardHeal 0.6s ease-out;
}

@keyframes cardHeal {
0%, 100% {
filter: brightness(1);
box-shadow: none;
}
50% {
filter: brightness(1.4);
box-shadow: 0 0 20px rgba(81, 207, 102, 0.8);
}
}

/* ==================== v6.2-A3.1: DECK BUILDER STYLES ==================== */
/* Phase A3.1: Instance-Based Deck Building */

/* ====================
PRIME ROYALE v6.2-A3.1 - DECK BUILDER STYLES
Phase A3.1: Instance-Based Deck Building

ADD THIS TO styles.css
==================== */

/* ==================== DECK BUILDER SCREEN ====================  */
/* ==================== OLD A3.1 CSS - DISABLED (Using Phase 4 instead) ====================
.deck-builder-a31-screen {
width: 100%;
min-height: 100vh;
background: linear-gradient(135deg, #0f172a, #1e293b);
padding: 20px;
}

.deck-builder-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 15px 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
}

.deck-builder-header h1 {
margin: 0;
font-size: 28px;
color: #fbbf24;
text-shadow: 0 2px 10px rgba(251, 191, 36, 0.5);
}

.back-btn {
padding: 10px 20px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: white;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}

.back-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}

/* ==================== v6.1 MAIN + RESERVE DECK UI ==================== */
.main-reserve-container {
margin-bottom: 20px;
background: rgba(0, 0, 0, 0.4);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.deck-zones {
display: flex;
gap: 15px;
margin-bottom: 15px;
}

.zone-btn {
flex: 1;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

.zone-btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}

.zone-btn.active {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2));
border-color: #fbbf24;
box-shadow: 0 5px 20px rgba(251, 191, 36, 0.4);
}

.zone-label {
font-size: 16px;
font-weight: bold;
color: white;
}

.zone-count {
font-size: 20px;
font-weight: bold;
color: #fbbf24;
}

.deck-actions-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
margin-bottom: 15px;
}

.deck-info {
display: flex;
flex-direction: column;
gap: 5px;
}

.deck-total {
font-size: 16px;
font-weight: bold;
color: white;
}

.deck-hint {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}

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

.auto-btn, .clear-btn {
padding: 10px 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: white;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
}

.auto-btn {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-color: #fbbf24;
}

.auto-btn:hover {
background: linear-gradient(135deg, #f59e0b, #d97706);
transform: translateY(-2px);
}

.clear-btn {
background: rgba(239, 68, 68, 0.2);
border-color: #ef4444;
}

.clear-btn:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.4);
transform: translateY(-2px);
}

.clear-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}

.selected-cards-display {
display: flex;
flex-direction: column;
gap: 15px;
}

.main-deck-cards, .reserve-deck-cards {
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 15px;
}

.cards-label {
font-size: 14px;
font-weight: bold;
color: #fbbf24;
margin-bottom: 10px;
}

.cards-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.mini-card {
width: 80px;
height: 100px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}

.mini-card:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.mini-card.empty {
cursor: default;
opacity: 0.3;
border-style: dashed;
}

.mini-card.empty:hover {
transform: none;
}

.mini-card-header {
padding: 8px;
font-size: 12px;
font-weight: bold;
text-align: center;
color: white;
}

.mini-card-header.cat-l1 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.mini-card-header.cat-l2 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.mini-card-header.cat-ai { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.mini-card-header.cat-defi { background: linear-gradient(135deg, #10b981, #059669); }
.mini-card-header.cat-meme { background: linear-gradient(135deg, #f59e0b, #d97706); }

.mini-card-ovr {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: #fbbf24;
}

.empty-label {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.3);
}

/* ==================== END MAIN + RESERVE UI ==================== */

/* ==================== CONTENT LAYOUT ==================== 
.deck-builder-content {
display: grid;
grid-template-columns: 1fr 400px;
gap: 20px;
max-width: 1400px;  <-- THIS WAS THE PROBLEM!
margin: 0 auto;
}
END OLD CSS */

/* ==================== COLLECTION PANEL ==================== */
.collection-panel {
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-header {
margin-bottom: 15px;
}

.panel-header h2 {
margin: 0;
font-size: 20px;
color: #fbbf24;
}

/* ==================== SORT BUTTONS ==================== */
.sort-buttons {
display: flex;
gap: 10px;
margin-bottom: 15px;
}

.sort-btn {
flex: 1;
padding: 10px 15px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: white;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}

.sort-btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}

.sort-btn.active {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-color: #fbbf24;
color: #000;
font-weight: bold;
box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

/* ==================== AUTO-SELECT BUTTON ==================== */
.auto-select-btn {
width: 100%;
padding: 12px 20px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border: none;
border-radius: 8px;
color: #000;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}

.auto-select-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #fde047, #fbbf24);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(251, 191, 36, 0.5);
}

.auto-select-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* ==================== INSTANCE CARD GRID ==================== */
.instance-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
max-height: calc(100vh - 350px);
overflow-y: auto;
padding-right: 10px;
}

/* Scrollbar styling */
.instance-card-grid::-webkit-scrollbar {
width: 8px;
}

.instance-card-grid::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
}

.instance-card-grid::-webkit-scrollbar-thumb {
background: rgba(251, 191, 36, 0.5);
border-radius: 4px;
}

.instance-card-grid::-webkit-scrollbar-thumb:hover {
background: rgba(251, 191, 36, 0.8);
}

/* ==================== INSTANCE CARD ==================== */
.instance-card {
position: relative;
background: rgba(0, 0, 0, 0.4);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 10px;
transition: all 0.3s ease;
cursor: pointer;
}

.instance-card:hover {
border-color: #fbbf24;
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(251, 191, 36, 0.3);
}

.instance-card.selected {
border-color: #22c55e;
background: rgba(34, 197, 94, 0.1);
box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
}

/* Level Badge */
.instance-level-badge {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #1e293b, #0f172a);
color: #fbbf24;
padding: 3px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: bold;
border: 1.5px solid #fbbf24;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
z-index: 2;
}

/* Card Image */
.instance-card-image-container {
width: 100%;
aspect-ratio: 2/3;
border-radius: 8px;
overflow: hidden;
margin-bottom: 8px;
background: rgba(0, 0, 0, 0.3);
}

.instance-card-image {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Rarity Glow */
.instance-rarity-glow {
position: absolute;
inset: -2px;
border-radius: 12px;
pointer-events: none;
z-index: 1;
}

.instance-rarity-glow.rarity-silver {
box-shadow: 0 0 15px rgba(156, 163, 175, 0.6);
animation: rarityPulseSilver 2s ease-in-out infinite;
}

.instance-rarity-glow.rarity-gold {
box-shadow: 0 0 20px rgba(251, 191, 36, 0.7);
animation: rarityPulseGold 2s ease-in-out infinite;
}

.instance-rarity-glow.rarity-legendary {
box-shadow: 
0 0 25px rgba(168, 85, 247, 0.8),
0 0 40px rgba(251, 191, 36, 0.6);
animation: rarityPulseLegendary 1.5s ease-in-out infinite;
}

@keyframes rarityPulseSilver {
0%, 100% { box-shadow: 0 0 15px rgba(156, 163, 175, 0.5); }
50% { box-shadow: 0 0 25px rgba(156, 163, 175, 0.8); }
}

@keyframes rarityPulseGold {
0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.6); }
50% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.9); }
}

@keyframes rarityPulseLegendary {
0%, 100% {
box-shadow: 
0 0 25px rgba(168, 85, 247, 0.7),
0 0 40px rgba(251, 191, 36, 0.5);
}
50% {
box-shadow: 
0 0 35px rgba(168, 85, 247, 1.0),
0 0 60px rgba(251, 191, 36, 0.8);
}
}

/* Card Info */
.instance-card-info {
text-align: center;
}

.instance-card-name {
font-size: 14px;
font-weight: bold;
margin-bottom: 4px;
color: white;
}

.instance-power-score {
font-size: 16px;
font-weight: bold;
margin-bottom: 4px;
text-shadow: 0 2px 8px currentColor;
}

.instance-card-stats {
display: flex;
justify-content: space-around;
font-size: 12px;
color: #9ca3af;
margin-bottom: 4px;
}

.instance-rarity-badge {
font-size: 10px;
font-weight: bold;
padding: 2px 6px;
border-radius: 4px;
display: inline-block;
}

.instance-rarity-badge.rarity-silver {
background: rgba(156, 163, 175, 0.3);
color: #9ca3af;
}

.instance-rarity-badge.rarity-gold {
background: rgba(251, 191, 36, 0.3);
color: #fbbf24;
}

.instance-rarity-badge.rarity-legendary {
background: rgba(168, 85, 247, 0.3);
color: #a855f7;
}

/* ==================== DECK PANEL ==================== */
.deck-panel {
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
max-width: 400px;
width: 100%;
}

/* ==================== DECK SLOTS ==================== */
.deck-slots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
max-width: 360px;
}

.deck-slot {
aspect-ratio: 2/3;
border-radius: 8px;
overflow: hidden;
max-width: 110px;
max-height: 165px;
}

.deck-slot-empty {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
border: 2px dashed rgba(255, 255, 255, 0.3);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #9ca3af;
}

.slot-number {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}

.slot-label {
font-size: 12px;
}

/* Deck slot instance card (smaller version) */
.deck-slot .instance-card {
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
}

.deck-slot .instance-card-image-container {
margin-bottom: 4px;
aspect-ratio: 1/1;
}

.deck-slot .instance-card-name {
font-size: 11px;
}

.deck-slot .instance-card-stats {
font-size: 10px;
}

.deck-slot .instance-level-badge {
padding: 2px 5px;
font-size: 9px;
}

/* ==================== MINI DECK PREVIEW ==================== */
.mini-deck-preview {
background: rgba(0, 0, 0, 0.4);
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-title {
font-size: 16px;
font-weight: bold;
color: #fbbf24;
margin-bottom: 10px;
}

.preview-subtitle {
font-size: 14px;
font-weight: bold;
color: #fbbf24;
margin-bottom: 8px;
margin-top: 10px;
}

.preview-stats {
display: flex;
flex-direction: column;
gap: 6px;
}

.preview-stat {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}

.preview-icon {
font-size: 16px;
min-width: 20px;
}

.preview-label {
flex: 1;
color: #9ca3af;
}

.preview-value {
font-weight: bold;
color: white;
}

.preview-empty {
text-align: center;
color: #9ca3af;
font-style: italic;
}

.preview-chains {
margin-top: 10px;
}

.chain-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.chain-item {
background: rgba(251, 191, 36, 0.2);
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
color: #fbbf24;
border: 1px solid rgba(251, 191, 36, 0.4);
}

/* ==================== START BATTLE BUTTON ==================== */
.start-battle-btn {
width: 100%;
padding: 15px 20px;
background: linear-gradient(135deg, #22c55e, #16a34a);
border: none;
border-radius: 8px;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}

.start-battle-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #4ade80, #22c55e);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
}

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

/* ==================== TOAST NOTIFICATION ==================== */
.deck-toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 15px 30px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
font-size: 16px;
font-weight: bold;
z-index: 10000;
animation: toastSlideIn 0.3s ease-out;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

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

/* ==================== CONFIRM MODAL ==================== */
.confirm-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.2s ease-out;
}

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

.confirm-modal {
background: linear-gradient(135deg, rgba(15, 12, 41, 0.95), rgba(48, 43, 99, 0.95));
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 30px;
max-width: 400px;
text-align: center;
animation: modalSlideIn 0.3s ease-out;
}

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

.confirm-modal h3 {
margin: 0 0 15px 0;
font-size: 22px;
color: #fbbf24;
}

.confirm-modal p {
margin: 0 0 20px 0;
color: #9ca3af;
line-height: 1.5;
}

.modal-buttons {
display: flex;
gap: 10px;
}

.modal-buttons button {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}

.modal-buttons button:first-child {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
}

.modal-buttons button:first-child:hover {
background: linear-gradient(135deg, #4ade80, #22c55e);
transform: translateY(-2px);
}

.modal-buttons button:last-child {
background: rgba(255, 255, 255, 0.1);
color: white;
}

.modal-buttons button:last-child:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1200px) {
.deck-builder-content {
grid-template-columns: 1fr;
}

.deck-panel {
max-width: 600px;
margin: 0 auto;
}
}

@media (max-width: 768px) {
.deck-builder-header h1 {
font-size: 22px;
}

.instance-card-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}

.deck-slots {
grid-template-columns: repeat(2, 1fr);
}
}

/* ==================== ACCESSIBILITY ==================== */
@media (prefers-reduced-motion: reduce) {
.instance-card,
.sort-btn,
.auto-select-btn,
.start-battle-btn,
.instance-rarity-glow {
animation: none !important;
transition: none !important;
}
}

/* ==================== A3.2 PHASE 1: FILTERS + TEST MODE + HELP ==================== */

/* Header Controls */
.deck-builder-header .header-controls {
display: flex;
gap: 10px;
align-items: center;
}

.test-mode-btn,
.help-btn {
padding: 8px 16px;
border: 2px solid #444;
background: #222;
color: #fff;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.2s;
}

.test-mode-btn:hover,
.help-btn:hover {
background: #333;
border-color: #666;
}

.test-mode-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
}

/* Test Mode Team Selector */
.test-mode-selector {
display: flex;
gap: 10px;
padding: 15px;
background: rgba(102, 126, 234, 0.1);
border-radius: 8px;
margin-bottom: 15px;
}

.team-selector-btn {
flex: 1;
padding: 12px;
border: 2px solid #444;
background: #222;
color: #fff;
border-radius: 6px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.2s;
}

.team-selector-btn:hover {
background: #333;
border-color: #666;
}

.team-selector-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Filters Panel */
.filters-panel {
padding: 15px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
margin-bottom: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}

.filter-header h3 {
margin: 0;
font-size: 16px;
color: #fff;
}

.clear-filters-btn {
padding: 5px 12px;
background: rgba(255, 59, 48, 0.2);
border: 1px solid rgba(255, 59, 48, 0.5);
color: #ff3b30;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
}

.clear-filters-btn:hover {
background: rgba(255, 59, 48, 0.3);
}

.filter-group {
margin-bottom: 12px;
}

.filter-group label {
display: block;
margin-bottom: 6px;
font-size: 13px;
color: #aaa;
font-weight: 600;
}

.filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.filter-btn {
padding: 6px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #aaa;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
}

.filter-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}

.filter-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
color: #fff;
font-weight: 600;
}

/* Rarity-specific filter buttons */
.filter-btn.rarity-bronze.active {
background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%);
border-color: #cd7f32;
}

.filter-btn.rarity-silver.active {
background: linear-gradient(135deg, #c0c0c0 0%, #808080 100%);
border-color: #c0c0c0;
}

.filter-btn.rarity-gold.active {
background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
border-color: #ffd700;
}

.filter-btn.rarity-legendary.active {
background: linear-gradient(135deg, #ff00ff 0%, #8b00ff 100%);
border-color: #ff00ff;
}

.search-input {
width: 100%;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
color: #fff;
font-size: 14px;
}

.search-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.08);
border-color: #667eea;
}

.search-input::placeholder {
color: #666;
}

/* Dimmed cards (in test mode when card is in other team) */
.instance-card.dimmed {
opacity: 0.4;
pointer-events: none;
}

/* Help Modal */
.help-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(5px);
}

.help-modal {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border-radius: 12px;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(102, 126, 234, 0.3);
}

.help-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.help-header h2 {
margin: 0;
font-size: 24px;
color: #fff;
}

.help-header .close-btn {
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
font-size: 24px;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}

.help-header .close-btn:hover {
background: rgba(255, 255, 255, 0.2);
}

.help-content {
padding: 20px;
}

.help-section {
margin-bottom: 25px;
}

.help-section h3 {
color: #667eea;
font-size: 18px;
margin-bottom: 10px;
}

.help-section ul {
list-style: none;
padding: 0;
margin: 0;
}

.help-section li {
padding: 8px 0;
color: #ccc;
line-height: 1.6;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.help-section li:last-child {
border-bottom: none;
}

.help-section strong {
color: #fff;
font-weight: 600;
}

.help-section .advantage {
color: #4caf50;
font-weight: 600;
}

.help-section .disadvantage {
color: #f44336;
font-weight: 600;
}

/* Responsive adjustments for filters */
@media (max-width: 768px) {
.filters-panel {
padding: 12px;
}

.filter-buttons {
gap: 4px;
}

.filter-btn {
padding: 5px 10px;
font-size: 11px;
}

.help-modal {
width: 95%;
max-height: 90vh;
}
}

/* ==================== A3.2 PHASE 2: SYNERGY SYSTEM ==================== */

/* Synergy sections in preview */
.preview-synergies {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-subtitle {
font-size: 13px;
font-weight: 600;
color: #667eea;
margin-bottom: 8px;
}

.synergy-list {
display: flex;
flex-direction: column;
gap: 6px;
}

.synergy-item {
padding: 8px 10px;
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
}

.synergy-item.active {
background: rgba(102, 126, 234, 0.15);
border-left: 3px solid #667eea;
color: #e0e7ff;
}

.synergy-item.potential {
background: rgba(255, 193, 7, 0.1);
border-left: 3px solid #ffc107;
color: #ffe082;
}

.synergy-need {
color: #ffc107;
font-weight: 600;
}

/* Synergy-boosted stats */
.synergy-boosted {
color: #4ade80 !important;
font-weight: 700;
}

.base-stat {
font-size: 10px;
color: #666;
margin-left: 4px;
font-weight: 400;
}

/* Enhanced preview stat layout */
.preview-stat {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 0;
}

.preview-icon {
font-size: 14px;
width: 20px;
text-align: center;
}

.preview-label {
font-size: 12px;
color: #aaa;
flex: 1;
}

.preview-value {
font-size: 14px;
font-weight: 600;
color: #fff;
}

/* Responsive synergies */
@media (max-width: 768px) {
.synergy-item {
font-size: 11px;
padding: 6px 8px;
}

.preview-subtitle {
font-size: 12px;
}
}

/* ==================== A3.2 PHASE 3: TEAM ANALYSIS (OVR + COVERAGE) ==================== */

/* OVR Section */
.preview-ovr {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ovr-display {
background: rgba(255, 255, 255, 0.03);
border-radius: 6px;
padding: 10px;
}

.ovr-main {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}

.ovr-label {
font-size: 13px;
color: #aaa;
font-weight: 600;
}

.ovr-value {
font-size: 24px;
font-weight: 700;
}

.ovr-tier {
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.1);
}

/* OVR Tier Colors */
.ovr-tier-elite {
color: #fbbf24;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.ovr-tier-excellent {
color: #a78bfa;
text-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
}

.ovr-tier-good {
color: #60a5fa;
text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}

.ovr-tier-average {
color: #4ade80;
text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.ovr-tier-developing {
color: #9ca3af;
}

.ovr-breakdown {
font-size: 11px;
color: #666;
text-align: center;
margin-top: 6px;
}

/* Pentagon Coverage Section */
.preview-coverage {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.coverage-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 4px;
margin-bottom: 6px;
font-size: 12px;
}

.coverage-label {
font-weight: 600;
min-width: 80px;
}

.coverage-value {
flex: 1;
}

.coverage-row.coverage-good {
background: rgba(74, 222, 128, 0.1);
border-left: 3px solid #4ade80;
color: #86efac;
}

.coverage-row.coverage-bad {
background: rgba(239, 68, 68, 0.1);
border-left: 3px solid #ef4444;
color: #fca5a5;
}

.coverage-warnings {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}

.coverage-warning {
font-size: 11px;
padding: 6px 10px;
border-radius: 4px;
background: rgba(251, 191, 36, 0.1);
border-left: 3px solid #fbbf24;
color: #fde047;
}

/* Enhanced Mini Deck Preview Layout */
.mini-deck-preview {
background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%);
border-radius: 8px;
padding: 15px;
border: 1px solid rgba(102, 126, 234, 0.2);
max-height: calc(100vh - 300px);
overflow-y: auto;
}

.preview-title {
font-size: 16px;
font-weight: 700;
color: #fff;
margin-bottom: 15px;
text-align: center;
}

/* Scrollbar styling for preview */
.mini-deck-preview::-webkit-scrollbar {
width: 6px;
}

.mini-deck-preview::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
}

.mini-deck-preview::-webkit-scrollbar-thumb {
background: rgba(102, 126, 234, 0.3);
border-radius: 3px;
}

.mini-deck-preview::-webkit-scrollbar-thumb:hover {
background: rgba(102, 126, 234, 0.5);
}

/* Responsive adjustments for Phase 3 */
@media (max-width: 768px) {
.ovr-value {
font-size: 20px;
}

.ovr-label {
font-size: 12px;
}

.coverage-row {
font-size: 11px;
padding: 5px 8px;
}

.coverage-label {
min-width: 70px;
}

.mini-deck-preview {
max-height: none;
}
}

/* ==================== A3.2 PHASE 4: LAYOUT OPTIMIZATION ==================== */
/* Full-width 3-column layout: Filters | Collection | Active Deck */

.deck-builder-a31-screen {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
}

.deck-builder-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: rgba(0, 0, 0, 0.3);
border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.deck-builder-header h1 {
margin: 0;
font-size: 24px;
color: #fbbf24;
}

.deck-builder-content {
display: grid;
grid-template-columns: 280px 1fr 420px;
gap: 20px;
padding: 20px;
height: calc(100vh - 120px);
overflow: hidden;
max-width: none; /* Full width! */
}

/* LEFT COLUMN: Filters */
.filters-column {
background: rgba(26, 26, 46, 0.6);
border-radius: 8px;
padding: 15px;
overflow-y: auto;
border: 1px solid rgba(102, 126, 234, 0.2);
}

.filters-panel {
display: flex;
flex-direction: column;
gap: 15px;
}

.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.filter-header h3 {
margin: 0;
font-size: 16px;
color: #fff;
}

.clear-filters-btn {
padding: 4px 10px;
background: rgba(255, 59, 48, 0.2);
border: 1px solid rgba(255, 59, 48, 0.5);
color: #ff3b30;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
transition: all 0.2s;
}

.clear-filters-btn:hover {
background: rgba(255, 59, 48, 0.3);
}

.filter-group {
margin-bottom: 10px;
}

.filter-group label {
display: block;
margin-bottom: 6px;
font-size: 12px;
color: #aaa;
font-weight: 600;
}

.filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.filter-btn {
padding: 6px 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #aaa;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
transition: all 0.2s;
flex: 1;
min-width: 45%;
}

.filter-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}

.filter-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
color: #fff;
font-weight: 600;
}

.search-input {
width: 100%;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
color: #fff;
font-size: 13px;
}

.search-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.08);
border-color: #667eea;
}

.search-input::placeholder {
color: #666;
}

/* MIDDLE COLUMN: Collection */
.collection-column {
display: flex;
flex-direction: column;
background: rgba(26, 26, 46, 0.6);
border-radius: 8px;
padding: 15px;
border: 1px solid rgba(102, 126, 234, 0.2);
overflow: hidden;
}

.collection-header {
margin-bottom: 10px;
}

.collection-header h2 {
margin: 0;
font-size: 18px;
color: #fff;
}

.sort-buttons {
display: flex;
gap: 8px;
margin-bottom: 10px;
}

.sort-btn {
flex: 1;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #aaa;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
}

.sort-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}

.sort-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
color: #fff;
font-weight: 600;
}

.auto-select-btn {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
border: none;
color: #000;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
margin-bottom: 15px;
transition: all 0.2s;
}

.auto-select-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

.auto-select-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* SCROLLABLE COLLECTION GRID */
.instance-card-grid-scrollable {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px;
overflow-y: auto;
padding-right: 8px;
height: 100%;
align-content: start;
}

/* Custom Scrollbar */
.instance-card-grid-scrollable::-webkit-scrollbar {
width: 8px;
}

.instance-card-grid-scrollable::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}

.instance-card-grid-scrollable::-webkit-scrollbar-thumb {
background: rgba(102, 126, 234, 0.4);
border-radius: 4px;
}

.instance-card-grid-scrollable::-webkit-scrollbar-thumb:hover {
background: rgba(102, 126, 234, 0.6);
}

/* RIGHT COLUMN: Active Deck */
.deck-column {
display: flex;
flex-direction: column;
background: rgba(26, 26, 46, 0.6);
border-radius: 8px;
padding: 15px;
border: 1px solid rgba(102, 126, 234, 0.2);
overflow-y: auto;
}

.panel-header h2 {
margin: 0 0 15px 0;
font-size: 18px;
color: #fff;
}

.deck-slots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
max-width: 360px;
}

.deck-slot {
aspect-ratio: 2/3;
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.02);
max-width: 110px;
max-height: 165px;
}

.deck-slot-empty {
text-align: center;
color: #666;
}

.slot-number {
font-size: 24px;
font-weight: 700;
margin-bottom: 5px;
}

.slot-label {
font-size: 12px;
}

.start-battle-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border: none;
color: #fff;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 700;
margin-top: 15px;
transition: all 0.2s;
}

.start-battle-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

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

/* Mini Deck Preview - Compact for sidebar */
.mini-deck-preview {
background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%);
border-radius: 8px;
padding: 12px;
border: 1px solid rgba(102, 126, 234, 0.2);
margin-bottom: 15px;
}

.preview-title {
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
text-align: center;
}

.preview-stats {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}

.preview-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
}

.preview-icon {
width: 18px;
text-align: center;
}

.preview-label {
color: #aaa;
flex: 1;
}

.preview-value {
color: #fff;
font-weight: 600;
}

/* Responsive */
@media (max-width: 1600px) {
.deck-builder-content {
grid-template-columns: 180px 1fr 320px;
gap: 15px;
}
}

@media (max-width: 1400px) {
.deck-builder-content {
grid-template-columns: 180px 1fr 300px;
}

.instance-card-grid-scrollable {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
}

@media (max-width: 1024px) {
.deck-builder-content {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
}

.filters-column {
max-height: 200px;
}

.deck-column {
max-height: 300px;
}
}

/* ═══════════════════════════════════════════════════════════════════════
PRIME ROYALE v7.0 HYBRID - GLASSMORPHISM + COMPREHENSIVE ANALYSIS
Modern UI (v7.0) + Full Features (A3.2)
═══════════════════════════════════════════════════════════════════════ */

/* CSS Variables */
:root {
--bg-primary: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #0f172a 60%, #000000 100%);
--glass-light: rgba(255, 255, 255, 0.05);
--glass-medium: rgba(255, 255, 255, 0.08);
--glass-dark: rgba(15, 23, 42, 0.8);
--glass-darker: rgba(15, 23, 42, 0.95);

--neon-gold: #fbbf24;
--neon-purple: #a855f7;
--neon-blue: #3b82f6;
--neon-green: #10b981;
--neon-red: #ef4444;

--glow-legendary: rgba(168, 85, 247, 0.4);
--glow-gold: rgba(251, 191, 36, 0.3);
--glow-silver: rgba(148, 163, 184, 0.2);
--glow-bronze: rgba(217, 119, 6, 0.2);
}

/* Main Container */
.deck-builder-hybrid {
width: 100vw;
height: 100vh;
background: var(--bg-primary);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Grid Background Effect */
.deck-builder-hybrid::before {
content: '';
position: absolute;
inset: 0;
background-image: 
linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
animation: gridPulse 4s ease-in-out infinite;
}

@keyframes gridPulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════════════════
HEADER & STATS HUD
═══════════════════════════════════════════════════════════════════════ */

.hybrid-header {
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
background: var(--glass-dark);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 100;
position: relative;
}

.header-left {
display: flex;
align-items: center;
gap: 20px;
}

.header-title {
margin: 0;
font-size: 24px;
font-weight: 900;
background: linear-gradient(135deg, var(--neon-gold) 0%, #f59e0b 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 1px;
text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.back-btn-hybrid {
padding: 8px 16px;
background: var(--glass-light);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}

.back-btn-hybrid:hover {
background: var(--glass-medium);
border-color: rgba(255, 255, 255, 0.2);
transform: translateX(-2px);
}

/* Test Mode Toggle */
.mode-switch-container {
display: flex;
background: rgba(0, 0, 0, 0.3);
padding: 4px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.mode-btn-hybrid {
padding: 6px 16px;
border-radius: 16px;
border: none;
background: transparent;
color: #94a3b8;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.mode-btn-hybrid.active {
background: var(--neon-blue);
color: white;
box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}

.mode-btn-hybrid.enemy-mode {
background: var(--neon-red);
box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
}

/* Stats HUD */
.stats-hud {
display: flex;
gap: 20px;
background: rgba(30, 41, 59, 0.5);
padding: 6px 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
}

.hud-stat {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
gap: 2px;
}

.hud-value {
font-size: 18px;
font-weight: 800;
color: var(--neon-gold);
text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.hud-value.synergy-count {
color: var(--neon-purple);
text-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.hud-value.cards-count {
color: var(--neon-green);
text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.hud-value.incomplete {
color: var(--neon-red);
text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.hud-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1px;
color: #94a3b8;
font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
COLLECTION GRID
═══════════════════════════════════════════════════════════════════════ */

.hybrid-collection-area {
flex: 1;
padding: 20px;
padding-bottom: 180px; /* Space for dock */
overflow-y: auto;
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 16px;
align-content: start;
z-index: 10;
position: relative;
}

/* Custom Scrollbar */
.hybrid-collection-area::-webkit-scrollbar {
width: 8px;
}

.hybrid-collection-area::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}

.hybrid-collection-area::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 4px;
transition: background 0.2s;
}

.hybrid-collection-area::-webkit-scrollbar-thumb:hover {
background: #475569;
}

/* ═══════════════════════════════════════════════════════════════════════
MODERN CARD COMPONENT (Glassmorphism)
═══════════════════════════════════════════════════════════════════════ */

.hybrid-card {
position: relative;
aspect-ratio: 2/3;
background: #1e293b;
border-radius: 10px;
overflow: hidden;
border: 2px solid transparent;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.hybrid-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
z-index: 50;
}

/* Rarity Borders & Glows */
.hybrid-card.rarity-LEGENDARY {
border: 2px solid var(--neon-purple);
box-shadow: 0 0 20px var(--glow-legendary),
0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.hybrid-card.rarity-LEGENDARY:hover {
box-shadow: 0 0 30px var(--glow-legendary),
0 10px 30px rgba(168, 85, 247, 0.3);
}

.hybrid-card.rarity-GOLD {
border: 2px solid var(--neon-gold);
box-shadow: 0 0 15px var(--glow-gold);
}

.hybrid-card.rarity-GOLD:hover {
box-shadow: 0 0 25px var(--glow-gold);
}

.hybrid-card.rarity-SILVER {
border: 2px solid #94a3b8;
box-shadow: 0 0 10px var(--glow-silver);
}

.hybrid-card.rarity-BRONZE {
border: 2px solid #d97706;
}

/* Selection States */
.hybrid-card.selected {
opacity: 0.4;
filter: grayscale(0.6);
border-color: var(--neon-green);
}

.hybrid-card.in-enemy-deck {
opacity: 0.6;
border-color: var(--neon-red);
}

.hybrid-card.dimmed {
opacity: 0.3;
}

/* Card Image */
.hybrid-card-image {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
transition: opacity 0.3s;
}

.hybrid-card:hover .hybrid-card-image {
opacity: 1;
}

/* Power Badge (Top Right) */
.card-power-badge-hybrid {
position: absolute;
top: 6px;
right: 6px;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
color: var(--neon-gold);
font-size: 11px;
font-weight: 800;
padding: 3px 7px;
border-radius: 6px;
border: 1px solid rgba(251, 191, 36, 0.3);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
z-index: 10;
}

/* Level Badge (Top Center) */
.card-level-badge-hybrid {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
background: rgba(59, 130, 246, 0.85);
backdrop-filter: blur(8px);
color: white;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.2);
z-index: 10;
}

/* Card Bottom Overlay */
.hybrid-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 8px;
background: linear-gradient(to top, 
rgba(0, 0, 0, 0.95) 0%, 
rgba(0, 0, 0, 0.7) 50%, 
transparent 100%);
display: flex;
flex-direction: column;
gap: 2px;
}

.card-name-hybrid {
font-size: 12px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.card-stats-mini {
display: flex;
justify-content: space-between;
font-size: 10px;
color: #cbd5e1;
font-weight: 600;
}

/* Selection Checkmark */
.card-selected-overlay {
position: absolute;
inset: 0;
background: rgba(16, 185, 129, 0.3);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
animation: checkmarkPop 0.3s ease-out;
}

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

/* ═══════════════════════════════════════════════════════════════════════
BOTTOM DOCK (Fixed)
═══════════════════════════════════════════════════════════════════════ */

.hybrid-dock {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 160px;
background: var(--glass-darker);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 2px solid var(--neon-gold);
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
z-index: 200;
display: flex;
align-items: center;
padding: 0 40px;
}

.dock-content {
width: 100%;
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}

/* Test Mode Team Switcher */
.dock-team-switch {
display: flex;
flex-direction: column;
gap: 6px;
}

.team-switch-btn {
padding: 6px 12px;
border-radius: 6px;
border: none;
font-size: 10px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.team-switch-btn.player-team {
background: rgba(59, 130, 246, 0.2);
color: var(--neon-blue);
border: 1px solid var(--neon-blue);
}

.team-switch-btn.player-team.active {
background: var(--neon-blue);
color: white;
box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}

.team-switch-btn.enemy-team {
background: rgba(239, 68, 68, 0.2);
color: var(--neon-red);
border: 1px solid var(--neon-red);
}

.team-switch-btn.enemy-team.active {
background: var(--neon-red);
color: white;
box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
}

/* Deck Slots */
.dock-slots {
display: flex;
gap: 12px;
}

.dock-slot {
width: 90px;
height: 125px;
background: var(--glass-light);
border: 1px dashed rgba(255, 255, 255, 0.2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
}

.dock-slot:hover {
background: var(--glass-medium);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.05);
}

.dock-slot.filled {
border: none;
background: transparent;
padding: 0;
}

.dock-slot-number {
font-size: 24px;
font-weight: 700;
color: rgba(255, 255, 255, 0.2);
}

/* Card in Dock */
.dock-card {
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
animation: slotFill 0.3s ease-out;
}

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

.dock-card-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.dock-remove-overlay {
position: absolute;
inset: 0;
background: rgba(239, 68, 68, 0.85);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
font-size: 32px;
color: white;
font-weight: 900;
cursor: pointer;
}

.dock-card:hover .dock-remove-overlay {
opacity: 1;
}

/* Dock Info Panel */
.dock-info {
width: 280px;
display: flex;
flex-direction: column;
gap: 10px;
}

.dock-synergies-mini {
display: flex;
flex-wrap: wrap;
gap: 5px;
max-height: 60px;
overflow-y: auto;
}

.synergy-tag-mini {
font-size: 10px;
background: rgba(139, 92, 246, 0.2);
border: 1px solid rgba(139, 92, 246, 0.4);
color: #c4b5fd;
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}

.dock-start-btn {
background: linear-gradient(135deg, var(--neon-gold) 0%, #f59e0b 100%);
color: #000;
font-weight: 900;
border: none;
padding: 14px;
border-radius: 8px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1.5px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}

.dock-start-btn:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
}

.dock-start-btn:disabled {
background: #334155;
color: #94a3b8;
cursor: not-allowed;
box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════
RESPONSIVE (Mobile Ready for v8.2)
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
.hybrid-dock {
height: 100px;
padding: 0 10px;
}

.dock-slot {
width: 50px;
height: 75px;
}

.dock-info {
display: none;
}

.dock-start-btn {
position: fixed;
bottom: 110px;
right: 15px;
width: auto;
padding: 10px 20px;
z-index: 250;
font-size: 14px;
}

.hybrid-collection-area {
padding-bottom: 120px;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}

.stats-hud {
display: none;
}

.header-title {
font-size: 18px;
}
}

/* ═══════════════════════════════════════════════════════════════════════
TEAM ANALYSIS PANEL 2.0 (Radar & Visuals)
═══════════════════════════════════════════════════════════════════════ */

/* Layout Grid */
.analysis-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* Sol: Radar, Sağ: Stats & Warnings */
gap: 25px;
height: 100%;
}

/* Sol Taraf: Radar & OVR */
.analysis-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
border-radius: 16px;
padding: 20px;
position: relative;
}

/* Sağ Taraf: Detaylar */
.analysis-right {
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
padding-right: 10px;
}

/* --- PENTAGON RADAR CHART --- */
.radar-container {
width: 300px;
height: 300px;
position: relative;
margin: 20px 0;
}

.radar-svg {
width: 100%;
height: 100%;
overflow: visible;
}

.radar-axis {
stroke: rgba(255, 255, 255, 0.1);
stroke-width: 1;
}

.radar-web {
fill: none;
stroke: rgba(255, 255, 255, 0.1);
stroke-width: 1;
}

.radar-area {
fill: rgba(168, 85, 247, 0.2);
stroke: #a855f7;
stroke-width: 2;
filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
animation: radarGrow 1s ease-out forwards;
}

.radar-point {
fill: #fbbf24;
stroke: #fff;
stroke-width: 2;
}

.radar-label {
font-size: 11px;
fill: #94a3b8;
font-weight: 700;
text-anchor: middle;
dominant-baseline: middle;
}

@keyframes radarGrow {
from { transform: scale(0); transform-origin: center; opacity: 0; }
to { transform: scale(1); transform-origin: center; opacity: 1; }
}

/* --- DYNAMIC WARNINGS --- */
.warnings-container {
display: flex;
flex-direction: column;
gap: 8px;
}

.warning-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
animation: slideInRight 0.3s ease-out backwards;
}

.warning-card.critical {
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid #ef4444;
color: #fca5a5;
}

.warning-card.moderate {
background: rgba(251, 191, 36, 0.1);
border-left: 4px solid #fbbf24;
color: #fcd34d;
}

.warning-card.success {
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid #10b981;
color: #86efac;
}

.warning-icon {
font-size: 18px;
}

/* --- SYNERGY CHAIN --- */
.synergy-chain-container {
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
padding: 15px;
}

.synergy-chain {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 10px;
}

.chain-node {
background: rgba(102, 126, 234, 0.2);
border: 1px solid rgba(102, 126, 234, 0.4);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
color: #c4b5fd;
font-weight: 600;
}

.chain-arrow {
color: #64748b;
font-size: 14px;
}

/* Scrollbar for Right Panel */
.analysis-right::-webkit-scrollbar {
width: 6px;
}
.analysis-right::-webkit-scrollbar-track {
background: rgba(0,0,0,0.1);
}
.analysis-right::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}

@media (max-width: 768px) {
.analysis-grid {
grid-template-columns: 1fr;
}
.radar-container {
width: 240px;
height: 240px;
}
}

/* ═══════════════════════════════════════════════════════════════════════
ENHANCED START SCREEN ANIMATIONS
═══════════════════════════════════════════════════════════════════════ */

@keyframes logoFloat {
0%, 100% { 
transform: translateY(0) scale(1); 
filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.4));
}
50% { 
transform: translateY(-10px) scale(1.02); 
filter: drop-shadow(0 0 50px rgba(251, 191, 36, 0.6));
}
}


/* ═══════════════════════════════════════════════════════════════════════
DASHBOARD V2 START SCREEN
═══════════════════════════════════════════════════════════════════════ */

.start-screen-v2 {
width: 100%;
height: 100vh;
max-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 15px;
background: radial-gradient(circle at 50% 0%, rgba(30, 27, 75, 0.9) 0%, rgba(15, 23, 42, 0.95) 60%, #000000 100%);
position: relative;
z-index: 10;
overflow: hidden;
}

.dashboard-logo-container {
text-align: center;
margin-bottom: 10px;
animation: fadeUp 1s ease-out;
}

.dashboard-logo {
width: 120px;
height: auto;
mix-blend-mode: screen;
filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.5));
animation: breathe 4s ease-in-out infinite;
}

.profile-card {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 16px;
padding: 20px;
width: 420px;
max-width: 90vw;
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: fadeUp 1.2s ease-out;
}

.profile-avatar {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #4c1d95, #6d28d9);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
border: 2px solid var(--neon-purple);
flex-shrink: 0;
}

.profile-info {
flex: 1;
}

.profile-name {
font-weight: 700;
font-size: 16px;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}

.prime-balance {
color: var(--neon-gold);
font-weight: 700;
font-size: 13px;
}

.level-bar-bg {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
margin-top: 6px;
overflow: hidden;
}

.level-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue));
border-radius: 3px;
transition: width 0.5s ease-out;
}

.main-action-btn {
background: linear-gradient(135deg, var(--neon-gold), #d97706);
width: 320px;
max-width: 90vw;
padding: 18px;
border: none;
border-radius: 12px;
color: black;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
margin-bottom: 15px;
animation: fadeUp 1.4s ease-out;
}

.main-action-btn:hover {
transform: scale(1.05) translateY(-2px);
box-shadow: 0 0 50px rgba(251, 191, 36, 0.6);
}

.menu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
width: 540px;
max-width: 90vw;
animation: fadeUp 1.6s ease-out;
}

.menu-btn {
background: rgba(30, 41, 59, 0.5);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 16px;
border-radius: 10px;
color: #cbd5e1;
font-weight: 600;
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
}

.menu-btn:hover:not(.menu-btn-disabled) {
background: rgba(59, 130, 246, 0.2);
border-color: var(--neon-blue);
color: white;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.menu-btn-disabled {
opacity: 0.6;
cursor: not-allowed;
}

.menu-btn-disabled:hover {
background: rgba(30, 41, 59, 0.5);
border-color: rgba(255, 255, 255, 0.05);
color: #cbd5e1;
transform: none;
}

/* Responsive */
@media (max-width: 768px) {
.dashboard-logo {
width: 100px;
}

.profile-card {
width: 90%;
}

.main-action-btn {
font-size: 16px;
padding: 14px;
}

.menu-grid {
width: 90%;
gap: 10px;
}

.menu-btn {
padding: 12px;
font-size: 14px;
}
}

/* v6.2-A3.1: Turn-by-turn combat - AI thinking indicator */
.pulse-dot {
display: inline-block;
width: 12px;
height: 12px;
background: #ef4444;
border-radius: 50%;
animation: pulse-dot-animation 1.5s ease-in-out infinite;
}

@keyframes pulse-dot-animation {
0%, 100% { 
opacity: 1;
transform: scale(1);
}
50% { 
opacity: 0.4;
transform: scale(1.3);
}
}

/* ==================== v6.2-A4: ENHANCED TURN-BY-TURN SKILL BAR ==================== */
/* v6.5: Viewport-aware positioning for better UX across all devices */

.skill-bar-enhanced {
position: fixed;
/* Viewport-based bottom: Adapts to screen height */
bottom: clamp(20px, 3vh, 40px);
left: 50%;
transform: translateX(-50%);
background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* Safari support */
border: 2px solid rgba(251, 191, 36, 0.4);
border-radius: 20px;
padding: clamp(12px, 2vh, 18px) clamp(16px, 2vw, 22px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 60px rgba(251, 191, 36, 0.2);
width: auto;
max-width: 90vw;
/* Ensure buttons don't exceed 20% of viewport height */
max-height: 20vh;
}

.skills-container-enhanced {
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
position: relative;
}

.skill-selection-header {
display: none; /* Header gizlendi - yer kazandık! */
}

.unit-ticker-badge {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
padding: 6px 16px;
border-radius: 8px;
font-weight: 800;
color: #0f172a;
font-size: 16px;
letter-spacing: 1px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.selection-prompt {
font-weight: 600;
color: #fbbf24;
font-size: 20px;
}

.skill-cards-grid {
display: flex;
gap: 10px;
justify-content: center;
align-items: stretch;
}

.skill-card-enhanced {
width: 160px;
height: 130px;
/* WCAG 2.1 AAA: Minimum touch target size */
min-width: max(120px, 10vw);
min-height: max(100px, 8vh);
background: linear-gradient(145deg, #1e293b, #0f172a);
border: 2px solid #334155;
border-radius: 14px;
padding: 10px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
overflow: hidden;
/* Better touch feedback */
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}

.skill-card-enhanced:hover:not(.disabled) {
transform: translateY(-5px);
border-color: #10b981;
box-shadow: 0 6px 24px rgba(16, 185, 129, 0.3);
background: linear-gradient(145deg, #22303f, #1a202c);
}

/* Active state for native app feel */
.skill-card-enhanced:active:not(.disabled) {
transform: translateY(-2px) scale(0.98);
transition: all 0.1s ease;
}

.skill-card-enhanced.ready {
border-color: #10b981;
box-shadow: 0 0 16px rgba(16, 185, 129, 0.2);
}

.skill-card-enhanced.selected {
border-color: #fbbf24 !important;
box-shadow: 0 0 24px rgba(251, 191, 36, 0.5) !important;
transform: translateY(-8px);
background: linear-gradient(145deg, #2d3b4f, #1e2a3a);
}

.skill-card-enhanced.disabled {
opacity: 0.5;
cursor: not-allowed;
filter: grayscale(0.6);
}

.skill-card-enhanced.disabled:hover {
transform: none;
border-color: #334155;
box-shadow: none;
}

.skill-card-header {
display: flex;
align-items: center;
justify-content: space-between;
}

.skill-card-name {
font-size: 11px;
font-weight: 800;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
}

.skill-card-description {
font-size: 9px;
color: #94a3b8;
line-height: 1.2;
flex-grow: 1;
}

.skill-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}

.skill-mana-badge {
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
gap: 4px;
}

.skill-mana-badge.insufficient {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}

.mana-modifier {
font-size: 10px;
margin-left: 2px;
}

.cooldown-badge {
background: rgba(168, 85, 247, 0.2);
color: #a855f7;
padding: 4px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
}

.skill-selected-overlay {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: white;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
animation: checkmark-pop 0.3s ease-out;
}

@keyframes checkmark-pop {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

.skill-cooldown-overlay-enhanced {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
}

.cooldown-number {
font-size: 48px;
font-weight: 900;
color: #a855f7;
text-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
}

.skill-low-mana-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
}

.low-mana-text {
font-size: 14px;
font-weight: 700;
color: #ef4444;
text-transform: uppercase;
letter-spacing: 1px;
}

.skip-turn-btn {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #64748b, #475569);
border: 2px solid #94a3b8;
border-radius: 50%;
font-size: 12px;
font-weight: 800;
color: white;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
margin-left: 8px;
}

.skip-turn-btn:hover {
background: linear-gradient(135deg, #475569, #334155);
border-color: #cbd5e1;
transform: scale(1.08);
box-shadow: 0 0 20px rgba(148, 163, 184, 0.4);
}

.skip-turn-btn:active {
transform: scale(0.95);
}

/* ==================== END ENHANCED SKILL BAR ==================== */

/* v6.2-A4: Active unit highlight */
.card-slot.active-turn {
border: 3px solid #fbbf24 !important;
box-shadow: 0 0 30px rgba(251, 191, 36, 0.6),
0 0 60px rgba(251, 191, 36, 0.3) !important;
animation: active-unit-pulse 2s ease-in-out infinite;
transform: scale(1.05);
z-index: 10;
}

@keyframes active-unit-pulse {
0%, 100% { 
box-shadow: 0 0 30px rgba(251, 191, 36, 0.6),
0 0 60px rgba(251, 191, 36, 0.3);
}
50% { 
box-shadow: 0 0 40px rgba(251, 191, 36, 0.8),
0 0 80px rgba(251, 191, 36, 0.4);
}
}

/* ==================== v6.2-A4.2.7: 3D CARD SYSTEM ENHANCEMENTS ==================== */

/* 3D Perspective for Battle Board */
.battle-board {
perspective: 1500px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
flex: 1;
display: flex;
justify-content: space-around;
align-items: flex-start;
padding: 20px 20px 180px 20px;
position: relative;
}

.team-side {
transform-style: preserve-3d;
display: flex;
flex-direction: column;
gap: 10px;
width: 220px;
align-items: center;
}

/* Staggered card positions - YOUR TEAM (left side) - Responsive */
.team-side:first-child > div:nth-child(2) {
transform: translateX(clamp(-80px, -8vw, -120px));
}

.team-side:first-child > div:nth-child(3) {
transform: translateX(clamp(40px, 4vw, 60px));
}

.team-side:first-child > div:nth-child(4) {
transform: translateX(clamp(-80px, -8vw, -120px));
}

/* Staggered card positions - ENEMY TEAM (right side) - mirrored - Responsive */
.team-side:last-child > div:nth-child(2) {
transform: translateX(clamp(80px, 8vw, 120px));
}

.team-side:last-child > div:nth-child(3) {
transform: translateX(clamp(-40px, -4vw, -60px));
}

.team-side:last-child > div:nth-child(4) {
transform: translateX(clamp(80px, 8vw, 120px));
}

/* 3D Card Effects - Only on Desktop/Tablet for performance */
@media (min-width: 769px) {
    /* 3D Card Container - Enable hardware acceleration */
    .card-slot {
        transform-style: preserve-3d;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Idle 3D poses for cards - Subtle tilt */
    .team-side:first-child .card-slot {
        /* Player team - slight right tilt */
        transform: rotateY(3deg) rotateX(1deg);
        transition: transform 0.3s ease;
    }

    .team-side:last-child .card-slot {
        /* Enemy team - slight left tilt */
        transform: rotateY(-3deg) rotateX(1deg);
        transition: transform 0.3s ease;
    }

    /* Enhanced hover for 3D cards */
    .card-slot:hover {
        transform: rotateY(0deg) rotateX(0deg) scale(1.05) translateZ(20px) !important;
        transition: transform 0.2s ease;
    }
}

/* Mobile/Tablet: Disable 3D transforms, use simple transforms */
@media (max-width: 768px) {
    .card-slot {
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        transform-style: flat;
    }

    .card-slot:hover {
        transform: scale(1.02) !important;
        transition: transform 0.2s ease;
    }
}

/* 3D Card attacking - use new animations */
.card-attacking-right {
animation: lungeRight 0.6s ease-in-out !important;
}

.card-attacking-left {
animation: lungeLeft 0.6s ease-in-out !important;
}

/* Legacy support */
.card-attacking {
animation: attackMove 0.4s ease-in-out;
}

/* Screen shake for critical hits */
@keyframes screenShake3D {
0%, 100% { transform: translate(0) rotateZ(0deg); }
10% { transform: translate(-5px, 5px) rotateZ(-1deg); }
20% { transform: translate(5px, -5px) rotateZ(1deg); }
30% { transform: translate(-5px, -5px) rotateZ(-1deg); }
40% { transform: translate(5px, 5px) rotateZ(1deg); }
50% { transform: translate(-5px, 5px) rotateZ(-1deg); }
60% { transform: translate(5px, -5px) rotateZ(1deg); }
70% { transform: translate(-5px, -5px) rotateZ(-1deg); }
80% { transform: translate(5px, 5px) rotateZ(1deg); }
90% { transform: translate(-5px, 5px) rotateZ(-1deg); }
}

.screen-shake-3d {
animation: screenShake3D 0.5s ease-out;
}

/* Performance optimizations for 3D */
.card-portrait img,
.portrait-image {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
transform: translateZ(0);
will-change: transform;
}

/* Smooth projectile animations with 3D */
.projectile {
will-change: transform, opacity;
backface-visibility: hidden;
transform-style: preserve-3d;
}

/* Damage popup 3D enhancement */
.damage-popup {
will-change: transform, opacity;
backface-visibility: hidden;
transform: translateZ(100px);
}

/* ==================== END 3D ENHANCEMENTS ==================== */

/* ==================== v6.1 PRE-BATTLE SCREEN ==================== */

.pre-battle-screen {
width: 100%;
min-height: 100vh;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}

.pre-battle-header {
text-align: center;
position: relative;
}

.pre-battle-header h1 {
font-size: 36px;
font-weight: bold;
color: #fbbf24;
text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
margin-bottom: 10px;
}

.pre-battle-subtitle {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
}

.pre-battle-header .back-btn {
position: absolute;
top: 0;
right: 0;
padding: 10px 20px;
background: rgba(239, 68, 68, 0.2);
border: 1px solid #ef4444;
border-radius: 8px;
color: white;
cursor: pointer;
transition: all 0.2s;
}

.pre-battle-header .back-btn:hover {
background: rgba(239, 68, 68, 0.4);
transform: translateY(-2px);
}

/* Enemy Preview Section */
.enemy-preview-section {
background: rgba(239, 68, 68, 0.1);
border: 2px solid rgba(239, 68, 68, 0.3);
border-radius: 16px;
padding: 20px;
backdrop-filter: blur(10px);
}

.enemy-preview-section h2 {
font-size: 24px;
color: #ef4444;
margin-bottom: 15px;
text-align: center;
}

.enemy-cards-row {
display: flex;
gap: 15px;
justify-content: center;
margin-bottom: 15px;
}

.enemy-preview-card {
width: 180px;
background: rgba(0, 0, 0, 0.4);
border: 2px solid rgba(239, 68, 68, 0.5);
border-radius: 12px;
padding: 15px;
text-align: center;
transition: all 0.3s;
}

.enemy-preview-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3);
}

.advantage-hint {
text-align: center;
font-size: 18px;
font-weight: bold;
padding: 10px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.3);
}

.advantage-good {
color: #10b981;
}

.advantage-bad {
color: #ef4444;
}

.advantage-neutral {
color: #fbbf24;
}

/* Your Main Deck Section */
.your-main-section {
background: rgba(59, 130, 246, 0.1);
border: 2px solid rgba(59, 130, 246, 0.3);
border-radius: 16px;
padding: 20px;
backdrop-filter: blur(10px);
}

.your-main-section h2 {
font-size: 24px;
color: #3b82f6;
margin-bottom: 10px;
text-align: center;
}

.swap-instruction {
text-align: center;
color: #fbbf24;
font-size: 14px;
margin-bottom: 15px;
}

.main-cards-row {
display: flex;
gap: 15px;
justify-content: center;
}

.main-swap-card {
width: 180px;
background: rgba(0, 0, 0, 0.4);
border: 2px solid rgba(59, 130, 246, 0.5);
border-radius: 12px;
padding: 15px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
position: relative;
}

.main-swap-card:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5);
}

.main-swap-card.selected {
border-color: #fbbf24;
box-shadow: 0 0 30px rgba(251, 191, 36, 0.8);
transform: translateY(-8px) scale(1.08);
}

.main-swap-card.no-swap {
opacity: 0.6;
cursor: not-allowed;
}

.main-swap-card.no-swap:hover {
transform: none;
}

.selected-indicator {
position: absolute;
top: 5px;
right: 5px;
background: #fbbf24;
color: #000;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
}

/* Reserve Pool Section */
.reserve-pool-section {
background: rgba(139, 92, 246, 0.1);
border: 2px solid rgba(139, 92, 246, 0.3);
border-radius: 16px;
padding: 20px;
backdrop-filter: blur(10px);
}

.reserve-pool-section h2 {
font-size: 24px;
color: #8b5cf6;
margin-bottom: 15px;
text-align: center;
}

.reserve-cards-row {
display: flex;
gap: 15px;
justify-content: center;
}

.reserve-swap-card {
width: 180px;
background: rgba(0, 0, 0, 0.4);
border: 2px solid rgba(139, 92, 246, 0.5);
border-radius: 12px;
padding: 15px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
position: relative;
}

.reserve-swap-card:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 10px 30px rgba(139, 92, 246, 0.5);
}

.reserve-swap-card.selected {
border-color: #fbbf24;
box-shadow: 0 0 30px rgba(251, 191, 36, 0.8);
}

.reserve-swap-card.swappable {
border-color: #10b981;
animation: pulse-green 1.5s infinite;
}

@keyframes pulse-green {
0%, 100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
50% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.8); }
}

.swap-hint {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
background: #10b981;
color: white;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: bold;
}

.no-reserve-message {
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-style: italic;
}

/* Card Common Styles */
.card-category {
font-size: 12px;
font-weight: bold;
padding: 5px;
border-radius: 6px;
margin-bottom: 8px;
}

.cat-l1 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.cat-l2 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.cat-ai { background: linear-gradient(135deg, #10b981, #059669); }
.cat-defi { background: linear-gradient(135deg, #f59e0b, #d97706); }
.cat-meme { background: linear-gradient(135deg, #ec4899, #db2777); }

.card-ticker {
font-size: 18px;
font-weight: bold;
color: white;
margin-bottom: 8px;
}

.card-stats {
display: flex;
gap: 10px;
justify-content: center;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 8px;
}

.card-ovr {
font-size: 14px;
color: #fbbf24;
font-weight: bold;
}

/* Actions */
.pre-battle-actions {
display: flex;
gap: 15px;
justify-content: center;
padding: 20px;
}

.pre-battle-actions button {
padding: 15px 30px;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
min-width: 180px;
}

.undo-btn {
background: rgba(107, 114, 128, 0.3);
border: 2px solid #6b7280;
color: white;
}

.undo-btn:hover:not(:disabled) {
background: rgba(107, 114, 128, 0.5);
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(107, 114, 128, 0.4);
}

.undo-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}

.skip-btn {
background: rgba(251, 191, 36, 0.2);
border: 2px solid #fbbf24;
color: #fbbf24;
}

.skip-btn:hover {
background: rgba(251, 191, 36, 0.4);
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(251, 191, 36, 0.4);
}

.lock-start-btn {
background: linear-gradient(135deg, #10b981, #059669);
border: 2px solid #10b981;
color: white;
}

.lock-start-btn:hover {
background: linear-gradient(135deg, #059669, #047857);
transform: translateY(-3px);
box-shadow: 0 5px 30px rgba(16, 185, 129, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
.enemy-cards-row,
.main-cards-row,
.reserve-cards-row {
flex-direction: column;
align-items: center;
}

.pre-battle-actions {
flex-direction: column;
}

.pre-battle-actions button {
width: 100%;
}
}

/* ==================== END PRE-BATTLE SCREEN ==================== */

.continue-btn {
background: linear-gradient(135deg, #3b82f6, #2563eb);
border: 2px solid #3b82f6;
color: white;
min-width: 300px;
font-size: 18px;
}

.continue-btn:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
transform: translateY(-3px);
box-shadow: 0 5px 30px rgba(59, 130, 246, 0.6);
}

.enemy-loading {
text-align: center;
padding: 40px 20px;
}

.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(239, 68, 68, 0.3);
border-top-color: #ef4444;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}

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

.enemy-loading p {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
}

/* ==================== v6.2-CARDS: 3D HOLOGRAPHIC CARD EFFECTS ==================== */

/* Card Layer Glare Effect */
.card-layer-glare {
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 25%, transparent 70%);
transition: opacity 0.2s;
}

/* Holographic Diagonal Scan - Base */
.hologram-stripe {
background: linear-gradient(
135deg,
transparent 0%,
transparent 30%,
rgba(0,255,255,0.4) 50%,
transparent 70%,
transparent 100%
);
background-size: 200% 200%;
animation: diagonalScan 4.5s ease-in-out infinite;
mix-blend-mode: screen;
}

/* Rarity-Specific Hologram Colors */
.hologram-stripe.rarity-silver {
background: linear-gradient(
135deg,
transparent 0%,
transparent 30%,
rgba(156,163,175,0.4) 50%,
transparent 70%,
transparent 100%
);
background-size: 200% 200%;
animation: diagonalScanSilver 4.5s ease-in-out infinite;
}

.hologram-stripe.rarity-bronze {
background: linear-gradient(
135deg,
transparent 0%,
transparent 30%,
rgba(251,146,60,0.4) 50%,
transparent 70%,
transparent 100%
);
background-size: 200% 200%;
animation: diagonalScanBronze 4.5s ease-in-out infinite;
}

.hologram-stripe.rarity-legendary {
background: linear-gradient(
135deg,
transparent 0%,
transparent 30%,
rgba(168,85,247,0.4) 50%,
transparent 70%,
transparent 100%
);
background-size: 200% 200%;
animation: diagonalScanLegendary 4.5s ease-in-out infinite;
}

.hologram-stripe.rarity-gold {
background: linear-gradient(
135deg,
transparent 0%,
transparent 30%,
rgba(251,191,36,0.4) 50%,
transparent 70%,
transparent 100%
);
background-size: 200% 200%;
animation: diagonalScanGold 4.5s ease-in-out infinite;
}

/* Diagonal Scan Animations */
@keyframes diagonalScan {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}

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

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

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

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

/* Oswald Font - imported at top of file */


/* ==================== v6.2-CARDS: ENHANCED RARITY GLOWS ==================== */

/* Legendary Cards - Purple Glow */
.rarity-legendary {
box-shadow: 
0 0 15px rgba(168, 85, 247, 0.8) !important,
0 0 30px rgba(168, 85, 247, 0.6) !important,
0 0 45px rgba(168, 85, 247, 0.4) !important,
inset 0 0 20px rgba(168, 85, 247, 0.3) !important;
border-color: #a855f7 !important;
animation: pulseGlowLegendary 2s ease-in-out infinite;
}

/* Gold Cards - Golden Glow */
.rarity-gold {
box-shadow: 
0 0 15px rgba(251, 191, 36, 0.8) !important,
0 0 30px rgba(251, 191, 36, 0.6) !important,
0 0 45px rgba(251, 191, 36, 0.4) !important,
inset 0 0 20px rgba(251, 191, 36, 0.3) !important;
border-color: #fbbf24 !important;
animation: pulseGlowGold 2s ease-in-out infinite;
}

/* Silver Cards - Silver Glow */
.rarity-silver {
box-shadow: 
0 0 12px rgba(156, 163, 175, 0.8) !important,
0 0 25px rgba(156, 163, 175, 0.6) !important,
0 0 40px rgba(156, 163, 175, 0.4) !important,
inset 0 0 15px rgba(156, 163, 175, 0.3) !important;
border-color: #9ca3af !important;
animation: pulseGlowSilver 2s ease-in-out infinite;
}

/* Bronze Cards - Bronze Glow */
.rarity-bronze {
box-shadow: 
0 0 12px rgba(251, 146, 60, 0.8) !important,
0 0 25px rgba(251, 146, 60, 0.6) !important,
0 0 40px rgba(234, 88, 12, 0.4) !important,
inset 0 0 15px rgba(251, 146, 60, 0.3) !important;
border-color: #fb923c !important;
animation: pulseGlowBronze 2s ease-in-out infinite;
}

/* Pulsing Glow Animations */
@keyframes pulseGlowLegendary {
0%, 100% { 
filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
}
50% { 
filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.9));
}
}

@keyframes pulseGlowGold {
0%, 100% { 
filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}
50% { 
filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.9));
}
}

@keyframes pulseGlowSilver {
0%, 100% { 
filter: drop-shadow(0 0 6px rgba(156, 163, 175, 0.6));
}
50% { 
filter: drop-shadow(0 0 12px rgba(156, 163, 175, 0.9));
}
}

@keyframes pulseGlowBronze {
0%, 100% { 
filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.6));
}
50% { 
filter: drop-shadow(0 0 12px rgba(251, 146, 60, 0.9));
}
}


/* ==================== SCREEN CONTAINERS ==================== */
.screen-container {
min-height: 100vh;
background: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #0f172a 60%, #020617 100%);
color: white;
font-family: 'Inter', sans-serif;
}

.screen-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
background: rgba(15, 23, 42, 0.9);
border-bottom: 2px solid rgba(168, 85, 247, 0.3);
}

.screen-header h1 {
font-family: 'Oswald', sans-serif;
font-size: 28px;
color: #a855f7;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
}

.screen-content {
padding: 20px;
max-width: 1400px;
margin: 0 auto;
}

.back-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}

.back-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}

.prime-display {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.1));
border: 2px solid #fbbf24;
padding: 10px 20px;
border-radius: 20px;
color: #fbbf24;
font-weight: 800;
font-size: 16px;
}

/* ==================== FUSION LAB SCREEN ==================== */
.fusion-lab-screen {
min-height: 100vh;
background: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #0f172a 60%, #020617 100%);
}

.fusion-info {
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(168, 85, 247, 0.3);
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
text-align: center;
}

.fusion-info p {
margin: 8px 0;
color: #cbd5e1;
font-size: 14px;
}

.fusion-slots {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin: 30px 0;
flex-wrap: wrap;
}

.fusion-card-mini {
width: 120px;
height: 160px;
background: rgba(30, 41, 59, 0.8);
border: 2px dashed rgba(168, 85, 247, 0.4);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
}

.fusion-card-mini.filled {
border: 2px solid #a855f7;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(30, 41, 59, 0.8));
}

.fusion-card-mini.result {
border: 2px solid #fbbf24;
background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(30, 41, 59, 0.8));
}

.fusion-card-mini .card-name {
font-size: 12px;
font-weight: bold;
color: white;
text-align: center;
}

.fusion-card-mini .card-level {
font-size: 11px;
color: #fbbf24;
font-weight: bold;
}

.fusion-card-mini .rarity-badge {
font-size: 9px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(168, 85, 247, 0.3);
color: #c084fc;
}

.fusion-plus {
font-size: 36px;
color: #a855f7;
font-weight: bold;
}

.fusion-arrow {
font-size: 36px;
color: #fbbf24;
}

.fusion-result-slot {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.slot-placeholder {
font-size: 48px;
color: rgba(168, 85, 247, 0.3);
}

.fusion-action {
text-align: center;
margin: 30px 0;
}

.fusion-btn {
background: linear-gradient(135deg, #6b7280, #4b5563);
border: none;
color: white;
padding: 15px 40px;
border-radius: 12px;
font-size: 18px;
font-weight: bold;
cursor: not-allowed;
opacity: 0.6;
transition: all 0.3s ease;
}

.fusion-btn.active {
background: linear-gradient(135deg, #a855f7, #7c3aed);
cursor: pointer;
opacity: 1;
}

.fusion-btn.active:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4);
}

.fusion-cards-grid {
margin-top: 40px;
}

.fusion-cards-grid h3 {
color: #fbbf24;
font-size: 18px;
margin-bottom: 20px;
text-align: center;
}

.no-duplicates {
text-align: center;
color: #9ca3af;
padding: 40px;
background: rgba(30, 41, 59, 0.4);
border-radius: 12px;
border: 1px dashed rgba(156, 163, 175, 0.3);
}

.duplicates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}

.duplicate-group {
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(168, 85, 247, 0.2);
border-radius: 12px;
padding: 15px;
}

.duplicate-header {
color: white;
font-weight: bold;
font-size: 14px;
margin-bottom: 10px;
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}

.duplicate-cards {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}

.duplicate-card {
width: 70px;
height: 90px;
background: rgba(15, 23, 42, 0.8);
border: 2px solid rgba(168, 85, 247, 0.3);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

.duplicate-card:hover {
border-color: #a855f7;
transform: translateY(-3px);
}

.duplicate-card.selected {
border-color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
}

.duplicate-card .rarity-badge {
font-size: 8px;
padding: 1px 4px;
border-radius: 3px;
background: rgba(168, 85, 247, 0.3);
color: #c084fc;
}

.duplicate-card .level-badge {
font-size: 10px;
color: #fbbf24;
font-weight: bold;
}

.error-text {
color: #ef4444;
margin-top: 10px;
font-size: 14px;
}

/* ==================== COLLECTION SCREEN ==================== */
.collection-screen {
min-height: 100vh;
background: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #0f172a 60%, #020617 100%);
}

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

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

.stat-value {
font-size: 36px;
font-weight: 900;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.stat-label {
font-size: 12px;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 1px;
}

.collection-filters {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}

.filter-btn {
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(168, 85, 247, 0.3);
color: #cbd5e1;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: all 0.3s ease;
}

.filter-btn:hover {
background: rgba(168, 85, 247, 0.2);
border-color: #a855f7;
}

.filter-btn.active {
background: linear-gradient(135deg, #a855f7, #7c3aed);
border-color: #a855f7;
color: white;
}

.collection-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
gap: 25px;
padding: 20px;
}

.collection-card {
background: rgba(30, 41, 59, 0.8);
border: 2px solid rgba(168, 85, 247, 0.3);
border-radius: 16px;
padding: 15px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.collection-card:hover {
transform: translateY(-5px);
border-color: #a855f7;
box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
}

.collection-card.rarity-legendary {
border-color: #a855f7;
box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.collection-card.rarity-gold {
border-color: #fbbf24;
box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
}

.collection-card.rarity-silver {
border-color: #9ca3af;
}

.collection-card-image {
width: 100%;
aspect-ratio: 1;
object-fit: contain;
border-radius: 8px;
margin-bottom: 10px;
background: rgba(0, 0, 0, 0.2);
}

.collection-card-name {
font-size: 14px;
font-weight: bold;
color: white;
margin-bottom: 5px;
}

.collection-card-stats {
display: flex;
justify-content: center;
gap: 10px;
font-size: 11px;
color: #9ca3af;
}

.rarity-stats {
display: flex;
flex-direction: column;
gap: 5px;
padding: 15px;
background: rgba(15, 23, 42, 0.6);
border-radius: 12px;
border: 1px solid rgba(168, 85, 247, 0.2);
}

.rarity-stat-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}

.rarity-stat-row .count {
font-weight: bold;
color: white;
}

/* Fusion Selection Area */
.fusion-selection {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin: 30px 0;
flex-wrap: wrap;
padding: 30px;
background: rgba(15, 23, 42, 0.5);
border-radius: 16px;
border: 1px solid rgba(168, 85, 247, 0.2);
}

.fusion-slot {
width: 120px;
height: 160px;
background: rgba(30, 41, 59, 0.8);
border: 2px dashed rgba(168, 85, 247, 0.4);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.fusion-slot.filled {
border: 2px solid #a855f7;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(30, 41, 59, 0.8));
}

/* Collection Screen Additional Styles */
.filter-group {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}

.filter-group span {
color: #9ca3af;
font-weight: 600;
font-size: 13px;
}

.collection-card .card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.collection-card .card-ticker {
font-size: 14px;
font-weight: 900;
color: #a855f7;
}

.collection-card .card-level {
font-size: 11px;
color: #fbbf24;
font-weight: bold;
background: rgba(251, 191, 36, 0.2);
padding: 2px 6px;
border-radius: 4px;
}

.collection-card .card-name {
font-size: 16px;
font-weight: bold;
color: white;
margin-bottom: 5px;
text-align: center;
}

.collection-card .card-category {
font-size: 11px;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
text-align: center;
}

.collection-card .card-power {
font-size: 18px;
font-weight: 900;
color: #fbbf24;
text-align: center;
margin-bottom: 10px;
}

.collection-card .card-rarity {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 4px;
text-align: center;
}

.collection-card .card-rarity.legendary {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(139, 92, 246, 0.2));
color: #c084fc;
border: 1px solid #a855f7;
}

.collection-card .card-rarity.gold {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.2));
color: #fbbf24;
border: 1px solid #fbbf24;
}

.collection-card .card-rarity.silver {
background: rgba(156, 163, 175, 0.2);
color: #9ca3af;
border: 1px solid #9ca3af;
}

.collection-card .card-rarity.bronze {
background: rgba(180, 83, 9, 0.2);
color: #d97706;
border: 1px solid #d97706;
}

/* Stat item colors */
.stat-item.legendary .stat-value {
background: linear-gradient(135deg, #a855f7, #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.stat-item.gold .stat-value {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.stat-item.silver .stat-value {
color: #9ca3af;
background: none;
-webkit-text-fill-color: #9ca3af;
}

.stat-item.bronze .stat-value {
color: #d97706;
background: none;
-webkit-text-fill-color: #d97706;
}

/* ==================== DECK BUILDER V6.2 STYLES ==================== */
.deck-section-v62 {
margin-bottom: 20px;
}

.section-title-v62 {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 700;
color: #fbbf24;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.zone-edit-btn {
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
color: white;
}

.zone-edit-btn:hover {
transform: scale(1.05);
}

.deck-slots-v62 {
display: grid;
gap: 8px;
}

.deck-slots-v62.main-slots-v62 {
grid-template-columns: repeat(3, 1fr);
}

.deck-slots-v62.reserve-slots-v62 {
grid-template-columns: repeat(2, 1fr);
}

.deck-slot-v62 {
width: 105px;
height: 145px;
border-radius: 8px;
overflow: visible;
position: relative;
}

.slot-with-card-v62 {
position: relative;
width: 100%;
height: 100%;
}

.slot-with-card-v62 .instance-card {
width: 100%;
height: 100%;
padding: 4px;
border-radius: 8px;
}

.slot-with-card-v62 .instance-card-image-container {
aspect-ratio: 1/1;
margin-bottom: 4px;
}

.slot-with-card-v62 .instance-card-name {
font-size: 10px;
}

.slot-with-card-v62 .instance-card-stats {
font-size: 9px;
gap: 6px;
}

.slot-with-card-v62 .instance-level-badge {
font-size: 8px;
padding: 1px 4px;
}

.remove-card-btn-v62 {
position: absolute;
top: 2px;
right: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.9);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
font-size: 10px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: all 0.2s ease;
}

.remove-card-btn-v62:hover {
background: #ef4444;
transform: scale(1.1);
}

.deck-slot-empty-v62 {
width: 100%;
height: 100%;
background: rgba(30, 41, 59, 0.6);
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #6b7280;
}

.slot-number-v62 {
font-size: 20px;
font-weight: 900;
margin-bottom: 4px;
}

.slot-label-v62 {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}

.quick-actions-v62 {
display: flex;
gap: 8px;
margin-top: 15px;
}

.quick-action-btn {
flex: 1;
padding: 10px;
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(168, 85, 247, 0.3);
border-radius: 8px;
color: white;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}

.quick-action-btn:hover {
background: rgba(168, 85, 247, 0.2);
border-color: #a855f7;
}

.deck-column {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 350px;
width: 100%;
}

.deck-column .panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

.deck-column .panel-header h2 {
font-size: 18px;
font-weight: 700;
color: white;
margin: 0;
}

.deck-total-ovr {
background: rgba(168, 85, 247, 0.2);
padding: 5px 12px;
border-radius: 8px;
font-size: 14px;
color: #c084fc;
}

.deck-total-ovr .ovr-value {
font-weight: 900;
color: #fbbf24;
margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRIME ROYALE - HOME SCREEN STYLES v7.5
   Season 1: Genesis - Main Dashboard
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    --bg-dark: #050814;
    --bg-panel: rgba(10, 20, 40, 0.7);
    --accent-blue: #00aaff;
    --accent-gold: #E5B80B;
    --text-primary: #ffffff;
    --text-secondary: #8aa4d4;
    --gold-gradient: linear-gradient(to bottom, #f7e379, #E5B80B, #b48811);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MAIN CONTAINER
   ═══════════════════════════════════════════════════════════════════════════════ */

.home-screen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: var(--bg-dark);
    font-family: 'Roboto Mono', monospace;
    color: var(--text-primary);
}

/* Background Effects */
.home-screen .network-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cdefs%3E%3CradialGradient id='grad1' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' style='stop-color:%2300aaff;stop-opacity:0.15' /%3E%3Cstop offset='100%25' style='stop-opacity:0' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grad1)'/%3E%3Cg stroke='%2300aaff' stroke-width='0.5' fill='none' opacity='0.1'%3E%3Cpath d='M100 0 L100 200 M0 100 L200 100'/%3E%3Ccircle cx='100' cy='100' r='50'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 300px 300px;
    z-index: 1;
    animation: bg-pan 30s linear infinite;
    pointer-events: none;
}

@keyframes bg-pan {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.home-screen .scanlines {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.3) 0px, rgba(0,0,0,0.3) 1px, transparent 1px, transparent 4px);
    pointer-events: none;
    z-index: 3;
    opacity: 0.5;
}

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

.particle {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.8), rgba(0, 212, 255, 0.3));
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
    animation: float-up linear infinite;
}

@keyframes float-up {
    to {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════════ */

.home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 25px;
    background: #010101;
    position: relative;
    z-index: 10;
}

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

.logo-text {
    font-family: 'Audiowide', sans-serif;
    font-size: 26px;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.user-profile {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.profile-top {
    display: flex;
    align-items: center;
    gap: 15px;
}

.username {
    font-family: 'Audiowide', sans-serif;
    font-size: 16px;
    color: var(--accent-blue);
}

.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--accent-blue);
    background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.4);
}

.notification-wrapper {
    position: relative;
}

.home-screen .notification-btn {
    background: transparent;
    border: none;
    color: var(--accent-blue);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    position: relative;
}

.home-screen .notification-btn:hover {
    transform: scale(1.15);
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.6);
}

.notification-count {
    position: absolute;
    top: -5px;
    right: -8px;
    background: #ff4444;
    color: white;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Audiowide', sans-serif;
    animation: notification-pulse 2s ease-in-out infinite;
}

@keyframes notification-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 68, 68, 0.6); }
    50% { box-shadow: 0 0 15px rgba(255, 68, 68, 1); }
}

.notification-panel {
    position: absolute;
    top: 40px;
    right: 0;
    width: 300px;
    background: var(--bg-panel);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;
    z-index: 1000;
    max-height: 350px;
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.2);
}

.notification-item {
    padding: 12px;
    border-bottom: 1px solid rgba(0, 170, 255, 0.2);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s;
}

.notification-item:hover {
    background: rgba(0, 170, 255, 0.1);
}

.notification-item.unread {
    background: rgba(0, 170, 255, 0.05);
    border-left: 3px solid var(--accent-blue);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-title {
    color: var(--accent-blue);
    font-weight: bold;
    margin-bottom: 4px;
}

.settings-btn {
    background: transparent;
    color: var(--accent-blue);
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid var(--accent-blue);
    border-left-width: 0;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.settings-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    border-left: 2px solid var(--accent-blue);
}

.settings-btn:hover {
    background: rgba(0, 170, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.5);
}

/* Profile Level (fixed position) */
.profile-level {
    position: fixed;
    right: 25px;
    top: 70px;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    width: 150px;
    z-index: 10;
}

.level-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.profile-xp-bar {
    width: 150px;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(0, 170, 255, 0.3);
}

.profile-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), #8b5cf6);
    border-radius: 3px;
    box-shadow: 0 0 10px var(--accent-blue);
    transition: width 1s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════════════════════════════════════════ */

.home-screen .stats-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 12px 25px;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 4px solid var(--accent-gold);
    position: relative;
    z-index: 5;
}

.home-screen .stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    border: 1px solid;
    font-weight: bold;
    font-size: 15px;
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}

.home-screen .stat-item.gold {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.home-screen .stat-item.blue {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════════════════════ */

.home-screen .main-content {
    flex: 1;
    padding: 25px;
    display: flex;
    gap: 25px;
    overflow-y: auto;
    position: relative;
    z-index: 5;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LEFT SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════════ */

.sidebar-left {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 170, 255, 0.3);
    color: var(--text-secondary);
    font-family: 'Audiowide', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    clip-path: polygon(15px 0%, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0% 15px);
}

.sidebar-btn:hover {
    background: rgba(0, 170, 255, 0.15);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.sidebar-btn.gold-cta {
    background: var(--gold-gradient);
    color: #000;
    border: none;
    box-shadow: 0 0 20px rgba(229, 184, 11, 0.5);
    font-weight: bold;
}

.sidebar-btn.gold-cta:hover {
    box-shadow: 0 0 30px rgba(229, 184, 11, 0.8);
    transform: translateY(-2px);
}

.btn-icon {
    font-size: 20px;
}

.sidebar-btn .notification-badge {
    margin-left: auto;
    background: #ff4444;
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    font-family: 'Roboto Mono', monospace;
}

/* Fusion Queue */
.fusion-queue {
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-top: 5px;
    font-size: 12px;
}

.fusion-queue-title {
    color: var(--accent-blue);
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Audiowide', sans-serif;
    font-size: 11px;
}

.fusion-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 8px;
    border-left: 3px solid #8b5cf6;
}

.fusion-item:last-child {
    margin-bottom: 0;
}

.fusion-progress {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.fusion-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #00d4ff);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CENTRAL FEATURE
   ═══════════════════════════════════════════════════════════════════════════════ */

.central-feature {
    flex: 1;
    background: var(--bg-panel);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 170, 255, 0.3);
    clip-path: polygon(25px 0%, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0% 25px);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Featured Cards */
.featured-cards {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 25px;
    margin-bottom: 40px;
    perspective: 1000px;
    position: relative;
    z-index: 2;
}

.card-slot {
    transition: all 0.5s ease;
    animation: float-card 3s ease-in-out infinite;
}

.card-slot.side {
    transform: scale(0.85) rotateY(15deg);
    opacity: 0.7;
    animation-delay: 0s;
}

.card-slot.side.right {
    transform: scale(0.85) rotateY(-15deg);
    animation-delay: 0.2s;
}

.card-slot.center {
    transform: scale(1);
    z-index: 5;
    animation-delay: 0.1s;
}

@keyframes float-card {
    0%, 100% {
        transform: translateY(0px);
        filter: drop-shadow(0 10px 20px rgba(0, 170, 255, 0.2));
    }
    50% {
        transform: translateY(-15px);
        filter: drop-shadow(0 20px 40px rgba(0, 170, 255, 0.4));
    }
}

.card-slot:hover {
    filter: drop-shadow(0 30px 60px rgba(0, 170, 255, 0.6)) brightness(1.2);
}

.card-frame {
    width: 110px;
    height: 150px;
    border-radius: 10px;
    padding: 4px;
    position: relative;
    overflow: hidden;
}

.card-frame.legendary {
    background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
    animation: legendary-glow 3s ease-in-out infinite;
}

.card-frame.mythic {
    background: linear-gradient(135deg, #ef4444, #f97316, #ef4444);
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.6);
    animation: mythic-pulse 2s ease-in-out infinite;
}

@keyframes legendary-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 40px rgba(245, 158, 11, 0.8), inset 0 0 40px rgba(255, 255, 255, 0.2); }
}

@keyframes mythic-pulse {
    0%, 100% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 60px rgba(239, 68, 68, 0.9), inset 0 0 40px rgba(255, 255, 255, 0.2); }
}

.card-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    position: relative;
    overflow: hidden;
}

.card-shine {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: card-shine 3s ease-in-out infinite;
}

@keyframes card-shine {
    0% { transform: translateX(-50%) translateY(-50%) rotate(45deg); }
    50% { opacity: 1; }
    100% { transform: translateX(50%) translateY(50%) rotate(45deg); opacity: 0.5; }
}

/* Feature Title & Info */
.feature-title {
    font-family: 'Audiowide', sans-serif;
    font-size: 34px;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 12px;
    text-align: center;
    position: relative;
    z-index: 2;
    animation: title-glow 2s ease-in-out infinite;
    letter-spacing: 2px;
}

@keyframes title-glow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(229, 184, 11, 0.4)) brightness(1);
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(229, 184, 11, 0.8)) brightness(1.1);
        transform: scale(1.02);
    }
}

.feature-subtitle {
    color: var(--text-secondary);
    font-size: 15px;
    margin-bottom: 8px;
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 500px;
}

.feature-info {
    color: var(--accent-blue);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 25px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Continue Section */
.continue-section {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.pve-info {
    font-family: 'Audiowide', sans-serif;
    font-size: 14px;
    color: var(--accent-blue);
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
    animation: pve-info-glow 2s ease-in-out infinite;
}

@keyframes pve-info-glow {
    0%, 100% { 
        text-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
        color: var(--accent-blue);
    }
    50% { 
        text-shadow: 0 0 20px rgba(0, 170, 255, 0.8);
        color: #00ffff;
    }
}

.continue-btn {
    padding: 14px 45px;
    background: var(--gold-gradient);
    border: 2px solid #E5B80B;
    color: #000;
    font-family: 'Audiowide', sans-serif;
    font-size: 15px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 25px rgba(229, 184, 11, 0.5);
    letter-spacing: 2px;
}

.continue-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 50px rgba(229, 184, 11, 0.8), 0 10px 30px rgba(0, 0, 0, 0.3);
    filter: brightness(1.15);
}

.continue-btn:active {
    transform: translateY(-1px);
}

.btn-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255,255,255,0.8), transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: btn-pulse-glow 1.5s ease-out infinite;
    pointer-events: none;
}

@keyframes btn-pulse-glow {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RIGHT SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════════ */

.sidebar-right {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.glass-panel {
    background: var(--bg-panel);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 170, 255, 0.3);
    flex: 1;
    overflow: hidden;
    clip-path: polygon(20px 0%, 100% 0, 100% 100%, 0 100%, 0% 20px);
}

.home-screen .panel-title {
    font-family: 'Audiowide', sans-serif;
    font-size: 14px;
    color: var(--accent-blue);
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 170, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-screen .panel-content {
    padding: 15px;
    overflow-y: auto;
    max-height: 200px;
}

/* Leaderboard */
.leader-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    margin-bottom: 8px;
    font-size: 13px;
}

.leader-item .rank {
    font-family: 'Audiowide', sans-serif;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 25px;
}

.leader-item .name {
    flex: 1;
    color: var(--text-primary);
}

.leader-item .score {
    font-family: 'Audiowide', sans-serif;
    color: var(--accent-gold);
    font-weight: bold;
}

.leader-item.rank-1 .rank { color: #fbbf24; }
.leader-item.rank-2 .rank { color: #d1d5db; }
.leader-item.rank-3 .rank { color: #f97316; }

/* News */
.news-item {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.news-bullet {
    color: var(--accent-blue);
    font-weight: bold;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px 25px;
    background: rgba(0, 0, 0, 0.8);
    border-top: 2px solid var(--accent-blue);
    position: relative;
    z-index: 10;
}

.cyber-btn {
    background: transparent;
    color: var(--accent-blue);
    padding: 14px 35px;
    font-size: 15px;
    font-family: 'Audiowide', sans-serif;
    position: relative;
    text-shadow: 0 0 5px rgba(0, 170, 255, 0.5);
    border: 2px solid var(--accent-blue);
    border-left-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.cyber-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    border-left: 2px solid var(--accent-blue);
}

.cyber-btn:hover, .cyber-btn.active {
    background: rgba(0, 170, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.5);
    color: white;
}

.cyber-btn.active {
    padding: 16px 90px;
    font-size: 16px;
}

.cyber-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.nav-icon {
    font-size: 20px;
}

.cyber-btn.active .nav-icon {
    font-size: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .sidebar-right {
        display: none;
    }
    
    .profile-level {
        position: static;
        width: auto;
    }
}

@media (max-width: 900px) {
    .sidebar-left {
        flex: 0 0 180px;
    }
    
    .sidebar-btn {
        padding: 10px 12px;
        font-size: 11px;
    }
    
    .feature-title {
        font-size: 24px;
    }
    
    .featured-cards {
        gap: 15px;
    }
    
    .card-frame {
        width: 80px;
        height: 110px;
    }
    
    .card-inner {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .home-screen .main-content {
        flex-direction: column;
        padding: 15px;
    }
    
    .sidebar-left {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .sidebar-btn {
        flex: 1 1 calc(50% - 8px);
    }
    
    .fusion-queue {
        display: none;
    }
    
    .central-feature {
        padding: 20px;
    }
    
    .home-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .home-screen .stats-bar {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .footer-nav {
        padding: 10px 15px;
        gap: 10px;
    }
    
    .cyber-btn {
        padding: 10px 20px;
        font-size: 12px;
    }
    
    .cyber-btn.active {
        padding: 12px 40px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .sidebar-btn {
        flex: 1 1 100%;
    }
    
    .feature-title {
        font-size: 18px;
    }
    
    .featured-cards {
        gap: 10px;
    }
    
    .card-slot.side {
        display: none;
    }
    
    .logo-text {
        font-size: 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TABLET BATTLE SCREEN - Responsive (481px-768px breakpoint)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 481px) and (max-width: 768px) {
    /* Battle Board - Optimized for tablet with viewport-aware spacing */
    .battle-board {
        padding: clamp(12px, 2vh, 18px) clamp(8px, 2vw, 12px) clamp(130px, 22vh, 160px) clamp(8px, 2vw, 12px) !important;
        gap: clamp(12px, 2vh, 18px) !important;
    }

    .team-side {
        width: clamp(160px, 20vw, 180px) !important;
        gap: 8px !important;
    }

    /* Card Slots - Touch-friendly on tablet */
    .card-slot {
        width: 140px !important;
        height: 180px !important;
        padding: 10px !important;
    }

    .card-portrait {
        width: 60px !important;
        height: 60px !important;
    }

    /* VS Label */
    .vs-label {
        font-size: 36px !important;
        top: 150px !important;
    }

    /* Top HUD - Compact */
    .top-hud {
        height: auto !important;
        min-height: 50px !important;
        padding: 10px !important;
        gap: 8px;
    }

    .top-hud button {
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 40px;
    }

    /* SPD Order Bar */
    .spd-order-bar {
        height: 50px !important;
        padding: 8px 15px;
    }

    .spd-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 11px !important;
    }

    /* Skill Bar - Viewport-aware positioning for tablet */
    .skill-bar,
    .skill-bar-enhanced {
        position: fixed !important;
        /* Safe-area aware bottom positioning */
        bottom: env(safe-area-inset-bottom, 0px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* Viewport-based spacing for comfortable thumb reach */
        padding: clamp(12px, 2vh, 18px) clamp(10px, 2vw, 16px) !important;
        padding-bottom: clamp(14px, 2.5vh, 22px) !important;
        background: rgba(15, 23, 42, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 100 !important;
        max-width: 95vw !important;
        max-height: 22vh !important;
    }

    .skill-bar button,
    .skill-bar .skill-btn {
        padding: 12px 18px !important;
        font-size: 13px !important;
        /* WCAG AAA touch targets - viewport aware */
        min-height: max(44px, 6vh) !important;
        min-width: max(90px, 12vw) !important;
        touch-action: manipulation !important;
    }

    .confirm-btn {
        width: 100%;
        padding: 14px !important;
        font-size: 14px !important;
    }

    /* Skill Cards - Enhanced for tablet */
    .skill-card-enhanced {
        width: 100px !important;
        height: 120px !important;
        padding: 10px !important;
    }

    .skill-card-name {
        font-size: 11px !important;
    }

    .skill-card-description {
        font-size: 9px !important;
        line-height: 1.3 !important;
    }

    .skill-mana-badge {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }

    /* Battle Log - Compact sidebar */
    .battle-log {
        width: 250px !important;
        font-size: 11px !important;
        max-height: 60vh !important;
    }

    /* Match Result Modal */
    .match-result-modal {
        width: 90% !important;
        max-width: 500px !important;
        padding: 25px !important;
    }

    /* Reduce stagger transforms for tablet */
    .team-side:first-child > div:nth-child(2),
    .team-side:first-child > div:nth-child(4) {
        transform: translateX(clamp(-60px, -6vw, -80px)) !important;
    }

    .team-side:first-child > div:nth-child(3) {
        transform: translateX(clamp(30px, 3vw, 40px)) !important;
    }

    .team-side:last-child > div:nth-child(2),
    .team-side:last-child > div:nth-child(4) {
        transform: translateX(clamp(60px, 6vw, 80px)) !important;
    }

    .team-side:last-child > div:nth-child(3) {
        transform: translateX(clamp(-30px, -3vw, -40px)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE BATTLE SCREEN - Phase 7 Responsive (480px breakpoint)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Top HUD - Compact with safe area */
    .top-hud {
        height: auto !important;
        min-height: 40px !important;
        padding: 8px !important;
        padding-top: calc(var(--mobile-top-padding, 0px) + 8px) !important;
        gap: 5px;
        flex-wrap: nowrap;
    }
    
    .top-hud .round-indicator {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
    
    .top-hud button {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-height: 32px;
    }
    
    /* SPD Order Bar - Clean horizontal layout on mobile */
    .spd-order-bar {
        height: 44px !important;
        gap: 10px;
        padding: 6px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .spd-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }

    .spd-segment-label {
        font-size: 9px !important;
        display: block;
        color: #888;
    }

    .spd-units {
        gap: 4px;
    }
    
    /* Battle Board - Stack vertically on mobile with space for buttons */
    .battle-board {
        flex-direction: column !important;
        gap: 4px !important;
        /* Top/side padding minimal, bottom padding reserves space for skill bar */
        padding: 5px 2px clamp(120px, 20vh, 180px) 2px !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        max-height: none !important;
        height: auto !important;
        align-items: center !important;
        width: 100% !important;
        position: relative !important;
    }
    
    /* Team Sides - Horizontal layout on mobile, centered */
    .team-side {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(3px, 1vw, 5px) !important;
        width: 100%;
        max-width: 100vw;
        padding: 5px 2px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    .team-label {
        font-size: 10px !important;
        margin-bottom: 3px !important;
        width: 100%;
        text-align: center;
    }
    
    .team-label > div {
        display: none !important;
    }
    
    /* VS Label - Visible */
    .vs-label {
        font-size: 16px !important;
        padding: 5px 0 !important;
        margin: 0 !important;
    }
    
    /* Card Slots - Responsive for better visibility */
    .card-slot {
        width: clamp(90px, 22vw, 110px) !important;
        height: clamp(130px, 35vw, 155px) !important;
        min-width: 90px !important;
        flex-shrink: 0;
    }

    .card-slot .card-image {
        width: 85px;
        height: 85px;
    }

    .card-slot .card-name {
        font-size: 10px !important;
    }

    .card-slot .card-stats {
        font-size: 9px !important;
    }

    /* HP Bar in card slots */
    .hp-bar-container {
        height: 5px !important;
    }

    /* Enhanced Battle Cards - Responsive on mobile */
    .enhanced-battle-card {
        width: clamp(90px, 22vw, 110px) !important;
        min-width: 90px !important;
        height: clamp(130px, 35vw, 155px) !important;
        flex-shrink: 0;
    }

    .enhanced-battle-card .card-icon {
        font-size: 36px !important;
    }

    .enhanced-battle-card .card-ticker {
        font-size: 11px !important;
    }

    .enhanced-battle-card .card-level {
        font-size: 10px !important;
    }
    
    /* Skill Bar - Viewport-aware mobile positioning for thumb-friendly UX */
    .skill-bar,
    .skill-bar-enhanced {
        position: fixed !important;
        /* Safe-area aware bottom positioning */
        bottom: env(safe-area-inset-bottom, 0px) !important;
        left: 0 !important;
        right: 0 !important;
        /* Dynamic padding based on viewport height */
        padding: clamp(8px, 1.5vh, 14px) clamp(8px, 2vw, 12px) !important;
        /* Comfortable thumb zone padding */
        padding-bottom: clamp(12px, 2.5vh, 20px) !important;
        gap: clamp(4px, 1vw, 8px);
        flex-wrap: nowrap;
        justify-content: center;
        background: rgba(15, 23, 42, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        z-index: 100 !important;
        /* Prevent skill bar from taking too much screen space */
        max-height: 18vh !important;
    }

    .skill-bar button,
    .skill-bar .skill-btn {
        padding: clamp(10px, 2vh, 14px) clamp(12px, 3vw, 18px) !important;
        font-size: clamp(11px, 2.5vw, 13px) !important;
        /* WCAG AAA minimum touch target - viewport aware */
        min-height: max(44px, 7vh) !important;
        flex: 1 1 auto;
        min-width: max(80px, 18vw) !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Active state for skill buttons - native app feel */
    .skill-bar button:active:not(:disabled),
    .skill-bar .skill-btn:active:not(:disabled) {
        transform: scale(0.96) !important;
        transition: transform 0.1s ease !important;
    }

    .confirm-btn {
        width: 100%;
        padding: clamp(12px, 2.5vh, 16px) !important;
        font-size: clamp(13px, 3vw, 15px) !important;
        /* Extra tall for easy tapping */
        min-height: max(50px, 8vh) !important;
        touch-action: manipulation !important;
        border-radius: 10px !important;
    }

    /* Active state for confirm button */
    .confirm-btn:active:not(:disabled) {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Battle Log - Hidden on mobile */
    .battle-log {
        display: none !important;
    }
    
    /* Damage/Heal Animations */
    .damage-text, .heal-text {
        font-size: 14px !important;
    }
    
    /* Round Banner */
    .round-banner {
        font-size: 24px !important;
        padding: 15px 30px !important;
    }
    
    /* Match Result Modal */
    .match-result-modal {
        width: 95% !important;
        max-width: 350px !important;
        padding: 20px !important;
    }
    
    .match-result-modal h2 {
        font-size: 20px !important;
    }
    
    .match-result-modal .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    
    /* Achievement Panel */
    .achievement-panel {
        width: 95% !important;
        max-width: 350px !important;
        right: 2.5% !important;
    }
    
    /* Settings Panel */
    .settings-panel {
        width: 95% !important;
        max-width: 300px !important;
    }
    
    /* Turn Indicator - Much smaller on mobile */
    .target-selection-indicator {
        font-size: 10px !important;
        padding: 6px 12px !important;
        top: auto !important;
        bottom: 80px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: 200px !important;
        text-align: center !important;
    }
    
    /* Planning Phase Actions */
    .planned-action-indicator {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    /* Skill Bar Enhanced - Viewport-aware mobile positioning */
    .skill-bar-enhanced {
        position: fixed !important;
        /* Viewport-based bottom positioning for thumb-friendly reach */
        bottom: max(
            env(safe-area-inset-bottom, 0px),
            clamp(8px, 1.5vh, 16px)
        ) !important;
        top: auto !important;
        padding: clamp(6px, 1vh, 10px) clamp(6px, 1.5vw, 10px) !important;
        /* Optimized bottom padding for iOS/Android gesture bars */
        padding-bottom: calc(
            env(safe-area-inset-bottom, 0px) +
            clamp(8px, 1.5vh, 12px)
        ) !important;
        border-radius: 12px !important;
        /* Centered at 80% width */
        width: 80% !important;
        max-width: 80% !important;
        border-width: 1px !important;
        /* Height reduced to half */
        height: auto !important;
        max-height: 12vh !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }

    .skills-container-enhanced {
        gap: clamp(3px, 0.8vw, 5px) !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Hide the selection header on mobile for compact layout */
    .skills-container-enhanced > div:first-child {
        display: none !important;
    }

    .skill-cards-grid {
        gap: clamp(4px, 1vw, 6px) !important;
        /* 3-column grid - no scroll needed */
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .skill-cards-grid::-webkit-scrollbar {
        display: none !important;
    }

    .skill-card-enhanced {
        /* Fill grid cell - 3 equal parts */
        width: 100% !important;
        height: clamp(55px, 8vh, 70px) !important;
        padding: clamp(6px, 1vh, 10px) clamp(4px, 1vw, 8px) !important;
        border-radius: 8px !important;
        gap: clamp(2px, 0.5vh, 4px) !important;
        border-width: 1px !important;
        /* Auto-size to fit in grid */
        min-width: unset !important;
        min-height: unset !important;
        flex-shrink: 1 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .skill-card-enhanced:hover:not(.disabled) {
        transform: none !important;
    }

    /* Active state for native app feel on mobile */
    .skill-card-enhanced:active:not(.disabled) {
        transform: scale(0.96) !important;
        transition: transform 0.1s ease !important;
        opacity: 0.9 !important;
    }
    
    .skill-card-name {
        font-size: 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .skill-card-description {
        font-size: 9px !important;
        line-height: 1.2 !important;
        display: none !important; /* Hide description to save space */
    }

    .skill-card-header {
        margin-bottom: 2px !important;
    }

    .skill-card-footer {
        margin-top: 2px !important;
    }

    .skill-mana-badge {
        font-size: 11px !important;
        padding: 2px 4px !important;
    }

    .cooldown-badge {
        font-size: 10px !important;
        padding: 1px 3px !important;
    }

    .skip-turn-btn {
        /* Smaller skip button for compact layout */
        width: max(32px, 5vh) !important;
        height: max(32px, 5vh) !important;
        padding: 0 !important;
        font-size: clamp(9px, 2vw, 11px) !important;
        min-width: max(32px, 5vh) !important;
        min-height: max(32px, 5vh) !important;
        margin-left: clamp(2px, 0.5vw, 4px) !important;
        border-radius: 50% !important;
        touch-action: manipulation !important;
    }
    
    .skill-cooldown-overlay-enhanced .cooldown-number {
        font-size: 12px !important;
    }
    
    .skill-low-mana-overlay .low-mana-text {
        font-size: 6px !important;
    }
    
    .skill-selected-overlay {
        font-size: 10px !important;
    }
        font-size: 12px !important;
    }
}

/* Battle Card Slot responsive for very small screens */
@media (max-width: 360px) {
    .card-slot {
        width: 60px !important;
        height: 85px !important;
    }
    
    .card-slot .card-image {
        width: 50px;
        height: 50px;
    }
    
    .skill-bar button {
        min-width: 70px;
        padding: 8px 12px !important;
    }
    
    .top-hud {
        height: 45px;
    }
    
    .spd-order-bar {
        height: 50px;
    }
    
    .spd-avatar {
        width: 28px;
        height: 28px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE PRE-BATTLE SCREEN - Phase 7 Responsive
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .pre-battle-screen {
        padding: 10px;
    }
    
    .pre-battle-header {
        padding: 15px;
    }
    
    .pre-battle-header h1 {
        font-size: 18px;
    }
    
    .pre-battle-subtitle {
        font-size: 12px;
    }
    
    .pre-battle-header .back-btn {
        padding: 8px 16px;
        font-size: 12px;
        min-height: 40px;
    }
    
    /* Enemy Preview */
    .enemy-preview-section {
        padding: 15px;
    }
    
    .enemy-preview-section h2 {
        font-size: 14px;
    }
    
    .enemy-cards-row {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .enemy-preview-card {
        width: 80px;
        height: 100px;
        padding: 8px;
    }
    
    .enemy-preview-card .card-ticker {
        font-size: 10px;
    }
    
    .enemy-preview-card .card-ovr {
        font-size: 9px;
    }
    
    .advantage-hint {
        font-size: 11px;
        padding: 8px;
    }
    
    /* Main Deck Section */
    .main-deck-section {
        padding: 15px;
    }
    
    .main-deck-section h2 {
        font-size: 14px;
    }
    
    .main-deck-cards {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .main-deck-card {
        width: 85px;
        height: 110px;
        padding: 8px;
    }
    
    .main-deck-card .card-ticker {
        font-size: 10px;
    }
    
    .main-deck-card .card-stats {
        font-size: 8px;
    }
    
    /* Reserve Section */
    .reserve-section {
        padding: 15px;
    }
    
    .reserve-section h2 {
        font-size: 14px;
    }
    
    .reserve-cards {
        gap: 8px;
        justify-content: center;
    }
    
    .reserve-card {
        width: 75px;
        height: 95px;
        padding: 6px;
    }
    
    /* Action Buttons */
    .pre-battle-actions {
        padding: 15px;
        padding-bottom: max(env(safe-area-inset-bottom, 15px), 24px);
        gap: 10px;
        flex-direction: column;
    }
    
    .pre-battle-actions button {
        width: 100%;
        padding: 14px;
        font-size: 14px;
        min-height: 48px;
    }
    
    .start-battle-btn {
        font-size: 16px !important;
    }
    
    /* Swap indicators */
    .swap-indicator {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    /* Stats comparison */
    .stats-comparison {
        font-size: 10px;
        gap: 5px;
    }
    
    /* JS class names - your-main-section, main-cards-row, etc */
    .your-main-section {
        padding: 15px;
    }
    
    .your-main-section h2 {
        font-size: 14px;
    }
    
    .swap-instruction {
        font-size: 11px;
    }
    
    .main-cards-row {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .main-swap-card {
        width: 85px;
        height: 110px;
        padding: 8px;
    }
    
    .main-swap-card .card-ticker {
        font-size: 10px;
    }
    
    .main-swap-card .card-stats {
        font-size: 8px;
        gap: 4px;
    }
    
    .main-swap-card .card-ovr {
        font-size: 9px;
    }
    
    .selected-indicator {
        font-size: 9px;
        padding: 3px 6px;
    }
    
    /* Reserve Pool */
    .reserve-pool-section {
        padding: 15px;
    }
    
    .reserve-pool-section h2 {
        font-size: 14px;
    }
    
    .reserve-cards-row {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .reserve-swap-card {
        width: 75px;
        height: 95px;
        padding: 6px;
    }
    
    .reserve-swap-card .card-ticker {
        font-size: 9px;
    }
    
    .reserve-swap-card .card-stats {
        font-size: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE ACHIEVEMENTS SCREEN - Phase 9 Responsive
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .achievement-screen {
        padding: 10px;
    }
    
    /* Header */
    .achievement-screen .header,
    .achievement-header {
        padding: 12px 15px;
        flex-direction: column;
        gap: 10px;
    }
    
    .achievement-screen .header h1,
    .achievement-title {
        font-size: 16px;
    }
    
    .achievement-screen .back-btn {
        padding: 8px 16px;
        font-size: 12px;
        min-height: 40px;
    }
    
    /* Progress Bar */
    .achievement-progress-section {
        padding: 12px;
    }
    
    .achievement-progress-bar {
        height: 10px;
    }
    
    .achievement-progress-text {
        font-size: 11px;
    }
    
    /* Filter Tabs */
    .achievement-filters {
        gap: 5px;
        padding: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .achievement-filters button,
    .filter-btn {
        padding: 8px 12px;
        font-size: 10px;
        min-height: 36px;
    }
    
    /* Achievement Cards Grid */
    .achievement-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }
    
    .achievement-card {
        padding: 15px;
        flex-direction: column;
        text-align: center;
    }
    
    .achievement-icon {
        font-size: 32px;
        margin-bottom: 10px;
    }
    
    .achievement-info {
        width: 100%;
    }
    
    .achievement-name {
        font-size: 13px;
    }
    
    .achievement-description {
        font-size: 11px;
    }
    
    .achievement-reward {
        font-size: 10px;
        margin-top: 8px;
    }
    
    /* Claim Button */
    .claim-btn {
        width: 100%;
        padding: 12px;
        font-size: 12px;
        min-height: 44px;
        margin-top: 10px;
    }
    
    /* Tier Badge */
    .achievement-tier-badge {
        font-size: 9px;
        padding: 3px 8px;
    }
    
    /* Toast Notification */
    .achievement-toast {
        width: 90%;
        max-width: 300px;
        font-size: 12px;
        padding: 12px;
    }
    
    /* Stats Row */
    .achievement-stats-row {
        flex-direction: column;
        gap: 8px;
        font-size: 11px;
    }
    
    .achievement-stat {
        padding: 8px 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE PVE / CAMPAIGN SCREENS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .pve-screen, 
    .campaign-screen {
        padding: 10px;
    }
    
    .pve-header,
    .campaign-header {
        padding: 15px;
        flex-direction: column;
        gap: 10px;
    }
    
    .pve-header h1,
    .campaign-title {
        font-size: 18px;
    }
    
    /* Chapter/Mission Cards */
    .chapter-grid,
    .mission-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .chapter-card,
    .mission-card {
        padding: 15px;
    }
    
    .chapter-title,
    .mission-title {
        font-size: 14px;
    }
    
    .chapter-description,
    .mission-description {
        font-size: 11px;
    }
    
    /* Stars Display */
    .stars-display {
        font-size: 16px;
    }
    
    /* Difficulty Selector */
    .difficulty-selector {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .difficulty-btn {
        padding: 8px 12px;
        font-size: 10px;
        min-height: 36px;
    }
    
    /* Reward Preview */
    .reward-preview {
        font-size: 11px;
        padding: 10px;
    }
    
    /* Start Battle Button */
    .start-mission-btn {
        width: 100%;
        padding: 14px;
        font-size: 14px;
        min-height: 48px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE FUSION LAB - Phase 10 Responsive
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Fusion Modal */
    .fusion-modal {
        width: 95vw !important;
        max-width: none !important;
        padding: 15px !important;
        margin: 10px;
    }
    
    .fusion-modal-header {
        padding: 10px;
    }
    
    .fusion-title {
        font-size: 18px !important;
    }
    
    /* Fusion Cards Container */
    .fusion-cards-container {
        flex-direction: column;
        gap: 15px;
        padding: 10px;
    }
    
    .fusion-card {
        width: 100px !important;
        height: 130px !important;
    }
    
    .fusion-card .card-frame {
        width: 100%;
        height: 100%;
    }
    
    .fusion-arrow {
        font-size: 24px !important;
        transform: rotate(90deg);
        margin: 10px 0;
    }
    
    /* Fusion Stats */
    .fusion-stats-container {
        padding: 10px;
        font-size: 11px;
    }
    
    /* Fusion Footer */
    .fusion-modal-footer {
        padding: 15px 10px;
        flex-direction: column;
        gap: 10px;
    }
    
    .fusion-close-btn {
        width: 100%;
        padding: 14px;
        min-height: 48px;
    }
    
    .fusion-hint {
        font-size: 10px;
        padding: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE MARKETPLACE - Phase 10 Responsive
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Market Card Grid */
    .market-card {
        min-width: 0 !important;
        border-radius: 8px !important;
    }
    
    .market-card > div:first-child {
        /* Header */
        padding: 6px 8px !important;
    }
    
    .market-card > div:nth-child(2) {
        /* Card Display container */
        padding: 8px !important;
    }
    
    /* Card inside listing - make smaller */
    .market-card .card-frame,
    .market-card .lite-card,
    .market-card .holographic-card {
        width: 80px !important;
        height: 110px !important;
        transform: scale(0.85);
    }
    
    .market-card .card-info {
        padding: 6px !important;
    }
    
    .market-card .card-name {
        font-size: 10px !important;
    }
    
    .market-card .card-price {
        font-size: 13px !important;
    }
    
    /* Price section */
    .market-card > div:last-child {
        padding: 8px !important;
    }
    
    /* Listing Detail Modal */
    .listing-detail-modal {
        width: 95vw !important;
        max-width: none !important;
        max-height: 90vh;
        padding: 15px !important;
        overflow-y: auto;
    }
    
    .listing-detail-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .listing-detail-card {
        width: 120px !important;
        height: 160px !important;
        margin: 0 auto;
    }
    
    .listing-detail-info {
        text-align: center;
    }
    
    .listing-detail-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .listing-detail-actions button {
        width: 100%;
        padding: 14px;
        min-height: 48px;
    }
    
    /* Sell Card Modal */
    .sell-modal {
        width: 95vw !important;
        max-width: none !important;
        padding: 15px !important;
    }
    
    .sell-modal input {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }
    
    .sell-modal button {
        width: 100%;
        padding: 14px;
        min-height: 48px;
    }
    
    /* Notification Panel */
    .notification-panel {
        width: 100% !important;
        max-width: none !important;
        right: 0 !important;
        left: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION - Dynamic Viewport & Safe Area Support
   ═══════════════════════════════════════════════════════════════════════ */

/* Global Mobile Screen Container */
.mobile-screen {
    padding-top: var(--mobile-top-padding, 0px) !important;
    padding-bottom: 0 !important;
    height: var(--viewport-height) !important;
    max-height: var(--viewport-height) !important;
    overflow: hidden !important;
}

/* Global Mobile Content with Bottom Nav - uses dynamic viewport height */
.mobile-content-with-nav {
    padding-bottom: calc(var(--mobile-nav-height, 70px) + var(--mobile-bottom-padding, 20px) + 10px) !important;
    max-height: calc(var(--viewport-height) - var(--mobile-nav-height, 70px) - var(--mobile-bottom-padding, 20px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Global Mobile Bottom Nav - viewport-aware positioning */
.mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mobile-nav-height, 70px) !important;
    padding-bottom: var(--mobile-bottom-padding, 20px) !important;
    z-index: 9999 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Global Mobile Header */
.mobile-header {
    padding-top: var(--mobile-top-padding, 0px) !important;
}

/* Ensure fixed bottom elements respect safe area on iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav,
    [data-mobile-nav="true"] {
        padding-bottom: var(--mobile-bottom-padding) !important;
        height: calc(var(--mobile-nav-height, 70px) + var(--mobile-bottom-padding)) !important;
    }

    /* Main content should have padding to not be hidden behind bottom nav */
    .mobile-main-content,
    .mobile-content-with-nav,
    [data-has-bottom-nav="true"] {
        padding-bottom: calc(var(--mobile-nav-height, 70px) + var(--mobile-bottom-padding) + 10px) !important;
        max-height: calc(var(--viewport-height) - var(--mobile-nav-height, 70px) - var(--mobile-bottom-padding)) !important;
    }
}

/* Mobile touch target minimum size */
@media (max-width: 480px) {
    /* All interactive elements should be at least 44x44 for touch */
    button, 
    [role="button"],
    .btn,
    a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Modal close buttons */
    .modal-close,
    [data-close="true"] {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Bottom fixed elements z-index */
    [style*="position: fixed"][style*="bottom"] {
        z-index: 9999 !important;
    }
    
    /* Prevent iOS zoom on input focus */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Smooth scrolling on iOS */
    .scrollable,
    [style*="overflow: auto"],
    [style*="overflow-y: auto"],
    [style*="overflowY: auto"] {
        -webkit-overflow-scrolling: touch !important;
    }
}