/* ================================================================= UNIFIED BATTLE CSS - COMPLETE BATTLEFIELD SYSTEM Consolidates all battle-related styles into one authoritative file Created: 2025-01-06 ================================================================= */ /* ================================================================= CSS VARIABLES & CORE SETUP ================================================================= */ :root { /* Universal bar */ --universal-bar-height: 60px; /* Colors - Enhanced Modern TCG Palette */ --battle-bg-primary: #0a0e1a; --battle-bg-secondary: #141824; --player-primary: #00d4ff; --player-secondary: #0099cc; --player-glow: rgba(0, 212, 255, 0.5); --opponent-primary: #ff1744; --opponent-secondary: #d50000; --opponent-glow: rgba(255, 23, 68, 0.5); --card-border: rgba(255, 255, 255, 0.25); --zone-border: rgba(255, 255, 255, 0.25); --neutral-accent: #7c4dff; --highlight-gold: #ffd700; /* ULTRA-MASSIVE SIZES - MAXIMUM VISIBILITY AND PLAYABILITY */ --card-width-hand: 110px; --card-height-hand: 150px; --card-width-field: 200px; /* Significantly larger for better visibility */ --card-height-field: 160px; /* Significantly larger for better visibility */ --card-width-field-player: 200px; --card-height-field-player: 160px; --card-width-field-opponent: 200px; --card-height-field-opponent: 160px; --zone-width: 280px; --zone-height: 190px; --zone-width-player: 280px; --zone-height-player: 190px; --zone-width-opponent: 280px; --zone-height-opponent: 190px; /* MASSIVELY INCREASED Stat Badge Sizes */ --stat-badge-size: 50px; /* Nearly doubled! */ --stat-badge-size-player: 55px; /* Much larger for readability */ --stat-badge-size-opponent: 48px; /* Substantially bigger */ --stat-badge-font: 22px; /* Much more readable */ --stat-badge-font-player: 24px; /* Large and clear */ --stat-badge-font-opponent: 20px; /* Clearly readable */ /* Optimized spacing - PREVENT OVERLAP */ --battle-padding: 15px; --zone-gap: 15px; --card-gap: -15px; /* Optimized overlap for professional spacing */ --field-gap: 12px; --hand-height: 200px; /* Full hand visibility */ --hand-bottom-spacing: 15px; /* Optimized transitions for smooth animations */ --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-medium: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --transition-slow: 0.45s cubic-bezier(0.16, 1, 0.3, 1); /* New gradient effects */ --gradient-radial-player: radial-gradient(ellipse at center, var(--player-glow) 0%, transparent 70%); --gradient-radial-opponent: radial-gradient(ellipse at center, var(--opponent-glow) 0%, transparent 70%); } /* ================================================================= MAIN BATTLE SCREEN LAYOUT ================================================================= */ /* ================================================================= ENHANCED STATS BARS - PROFESSIONAL TCG UI ================================================================= */ #opponent-stats-bar { position: fixed !important; top: var(--universal-bar-height) !important; left: 0 !important; right: 0 !important; height: 45px !important; padding: 6px 24px !important; background: linear-gradient(90deg, rgba(255, 59, 48, 0.15) 0%, rgba(255, 59, 48, 0.05) 30%, rgba(20, 24, 32, 0.95) 50%, rgba(255, 59, 48, 0.05) 70%, rgba(255, 59, 48, 0.15) 100%), linear-gradient(180deg, rgba(20, 24, 32, 0.98) 0%, rgba(15, 17, 23, 1) 100%) !important; backdrop-filter: blur(16px) saturate(140%) !important; border-bottom: 2px solid rgba(255, 59, 48, 0.4) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; z-index: 200 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 13px !important; font-weight: 600 !important; } #player-stats-bar { position: fixed !important; top: calc(var(--universal-bar-height) + 45px) !important; left: 0 !important; right: 0 !important; height: 45px !important; padding: 6px 24px !important; background: linear-gradient(90deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 122, 255, 0.05) 30%, rgba(20, 24, 32, 0.95) 50%, rgba(0, 122, 255, 0.05) 70%, rgba(0, 122, 255, 0.15) 100%), linear-gradient(180deg, rgba(20, 24, 32, 0.98) 0%, rgba(15, 17, 23, 1) 100%) !important; backdrop-filter: blur(16px) saturate(140%) !important; border-bottom: 2px solid rgba(0, 122, 255, 0.4) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; z-index: 200 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; font-size: 13px !important; font-weight: 600 !important; } /* Battle stat styling */ .battle-stat { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(0, 0, 0, 0.3); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; position: relative; overflow: hidden; } .battle-stat:hover { background: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-1px); } /* SP Display Styling */ .player-sp-display, .opponent-sp-display { background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%); border-color: rgba(255, 215, 0, 0.3); font-weight: 700; min-width: 80px; } /* Aether Display Styling */ .player-aether-display, .opponent-aether-display { background: linear-gradient(135deg, rgba(124, 77, 255, 0.1) 0%, rgba(124, 77, 255, 0.05) 100%); border-color: rgba(124, 77, 255, 0.3); min-width: 100px; } .aether-display { display: flex; align-items: center; gap: 6px; } .aether-value { font-size: 18px; font-weight: 700; color: #7c4dff; text-shadow: 0 0 10px rgba(124, 77, 255, 0.8); } /* Resonate Display Styling */ .player-resonate-display, .opponent-resonate-display { background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%); border-color: rgba(0, 212, 255, 0.3); min-width: 110px; } /* Phase Button Styling */ .next-phase-prompt { background: linear-gradient(135deg, #2a7fff 0%, #1e5fcc 100%) !important; border: 2px solid rgba(42, 127, 255, 0.6) !important; color: white !important; font-weight: 700 !important; padding: 8px 24px !important; border-radius: 24px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 4px 16px rgba(42, 127, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; text-transform: uppercase !important; letter-spacing: 1px !important; font-size: 12px !important; position: relative !important; overflow: hidden !important; } .next-phase-prompt:hover { background: linear-gradient(135deg, #3d8aff 0%, #2a70e0 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 24px rgba(42, 127, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } .next-phase-prompt:active { transform: translateY(0) !important; } .next-phase-prompt::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: rotate(45deg); transition: all 0.5s; opacity: 0; } .next-phase-prompt:hover::before { animation: phase-shine 0.5s ease-out; } @keyframes phase-shine { 0% { transform: rotate(45deg) translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(45deg) translateX(100%); opacity: 0; } } /* Surrender Button Styling */ #surrender-button { background: linear-gradient(135deg, #ff3b30 0%, #d70015 100%) !important; border: 2px solid rgba(255, 59, 48, 0.6) !important; color: white !important; font-weight: 700 !important; padding: 8px 20px !important; border-radius: 24px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 4px 16px rgba(255, 59, 48, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; text-transform: uppercase !important; letter-spacing: 1px !important; font-size: 11px !important; position: relative !important; } #surrender-button:hover { background: linear-gradient(135deg, #ff5347 0%, #e60023 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 24px rgba(255, 59, 48, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } #surrender-button:active { transform: translateY(0) !important; } /* Force our battle screen styles with high specificity - FIXED VIEWPORT */ #screen-battle, #screen-battle.screen, body #screen-battle { position: fixed !important; top: var(--universal-bar-height) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: calc(100vh - var(--universal-bar-height)) !important; max-width: 100vw !important; max-height: calc(100vh - var(--universal-bar-height)) !important; /* Keep existing background from style.css but enhance it */ background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; /* Layout - FIXED FOR 1080p AND ALL SCREENS */ display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; /* Z-index to ensure proper layering */ z-index: 1 !important; /* Critical viewport fix for 1080p+ screens */ min-height: 100vh !important; max-height: 100vh !important; } /* Dark overlay for better visibility */ #screen-battle::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; z-index: 0; } /* Battle Screen Enhanced Info Bar */ #battle-info { position: fixed; top: var(--universal-bar-height); left: 0; right: 0; height: 80px; display: none; /* Hidden as per original design */ justify-content: space-between; align-items: center; padding: 0 30px; background: linear-gradient(180deg, rgba(10, 15, 25, 0.95) 0%, rgba(5, 10, 20, 0.8) 100%); backdrop-filter: blur(20px); border-bottom: 2px solid rgba(90, 163, 240, 0.3); z-index: 100; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } /* Phase indicator with enhanced styling */ .phase-indicator { padding: 8px 16px; background: linear-gradient(135deg, #4a90e2, #357abd); border-radius: 25px; color: white; font-weight: 600; font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); animation: phase-glow 2s ease-in-out infinite; } @keyframes phase-glow { 0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } 50% { box-shadow: 0 2px 12px rgba(90, 163, 240, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); } } /* ================================================================= BATTLEFIELD CONTAINER - REDESIGNED FOR PROFESSIONAL TCG LAYOUT ================================================================= */ .battlefield-container { position: absolute; top: 130px; /* Adjusted for enhanced stats bars */ left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 200px 1fr 200px; /* Expanded side panel for better UI elements */ grid-template-rows: 240px 60px 240px 260px; /* Enhanced spacing for premium look */ grid-template-areas: "battle-log opponent-field side-panel" "battle-log center-area side-panel" "battle-log player-field side-panel" "battle-log hand-area side-panel"; gap: 16px; /* Optimized gap for better balance */ padding: 20px; /* Balanced padding for professional feel */ overflow: hidden; height: calc(100vh - 130px) !important; /* Adjusted for enhanced stats bars */ /* Ultra-Professional Battlefield Background */ background: radial-gradient(ellipse at 50% 20%, rgba(90, 163, 240, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 50% 80%, rgba(255, 59, 48, 0.08) 0%, transparent 60%), linear-gradient(135deg, #1a1f2e 0%, #0f1319 50%, #1a1f2e 100%), linear-gradient(135deg, #0a0e1a 0%, #12162a 20%, #1a1e3a 40%, #1e2244 60%, #12162a 80%, #0a0e1a 100%), repeating-linear-gradient( -45deg, transparent, transparent 50px, rgba(255, 255, 255, 0.02) 50px, rgba(255, 255, 255, 0.02) 51px ), url('data:image/svg+xml,'); /* Enhanced atmosphere with better hierarchy */ position: relative; box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(124, 77, 255, 0.15), 0 0 40px rgba(0, 0, 0, 0.4); /* Dynamic lighting effect with professional polish */ animation: battlefield-lighting 25s ease-in-out infinite; } /* Central area - Phase/Turn Display */ /* ELITE CENTER BATTLEGROUND - Professional Gaming Aesthetic */ .center-area { grid-area: center-area; display: flex; align-items: center; justify-content: center; position: relative; height: 100%; background: /* Elite multi-layer energy effects */ radial-gradient(ellipse at center, rgba(124, 77, 255, 0.5) 0%, transparent 60%), radial-gradient(ellipse at center, rgba(255, 215, 0, 0.4) 15%, transparent 70%), radial-gradient(ellipse at 30% 30%, rgba(90, 163, 240, 0.3) 0%, transparent 50%), linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 15%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.25) 70%, rgba(255, 255, 255, 0.12) 85%, transparent 100%), linear-gradient(180deg, rgba(20, 25, 50, 0.9) 0%, rgba(10, 15, 40, 0.95) 100%); overflow: hidden; /* Professional border system */ border-top: 4px solid rgba(255, 215, 0, 0.6); border-bottom: 4px solid rgba(255, 215, 0, 0.6); border-left: 2px solid rgba(255, 215, 0, 0.3); border-right: 2px solid rgba(255, 215, 0, 0.3); box-shadow: /* Professional depth layers */ inset 0 6px 40px rgba(255, 215, 0, 0.2), 0 0 60px rgba(124, 77, 255, 0.4), 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(255, 215, 0, 0.15), /* Premium glow effects */ 0 0 40px rgba(90, 163, 240, 0.2); backdrop-filter: blur(8px) saturate(130%); } /* VS Display - Shows when timer is inactive */ .vs-display { font-size: 36px; font-weight: 900; color: rgba(255, 215, 0, 0.95); text-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 60px rgba(255, 215, 0, 0.6), 0 0 15px rgba(90, 163, 240, 0.4), 3px 3px 6px rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(255, 255, 255, 0.2); letter-spacing: 6px; font-family: var(--font-display); animation: elite-vs-pulse 4s ease-in-out infinite; z-index: 10; /* Refined backdrop effect */ padding: 10px 16px; background: rgba(0, 0, 0, 0.5); border-radius: 12px; border: 2px solid rgba(255, 215, 0, 0.3); backdrop-filter: blur(8px); transition: opacity 0.3s ease; } /* Hide VS when timer is active */ .center-area:has(.elite-turn-timer:not([style*="display: none"])) .vs-display { opacity: 0; pointer-events: none; } /* Phase display background */ .center-area::after { content: ''; position: absolute; width: 200px; height: 30px; background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.1) 20%, rgba(255, 215, 0, 0.2) 50%, rgba(255, 215, 0, 0.1) 80%, transparent 100%); border-radius: 15px; opacity: 0.5; } @keyframes elite-vs-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; filter: brightness(1) drop-shadow(0 0 12px rgba(255, 215, 0, 0.3)); border-color: rgba(255, 215, 0, 0.3); box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); } 50% { transform: scale(1.08); opacity: 1; filter: brightness(1.2) drop-shadow(0 0 20px rgba(255, 215, 0, 0.6)); border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 0 25px rgba(255, 215, 0, 0.4), 0 0 12px rgba(90, 163, 240, 0.2); } } /* Dynamic lighting effect */ @keyframes battlefield-lighting { 0%, 100% { filter: brightness(1) contrast(1); } 25% { filter: brightness(1.1) contrast(1.05); } 50% { filter: brightness(0.95) contrast(1.1); } 75% { filter: brightness(1.05) contrast(0.95); } } /* ================================================================= FIELD ZONES - ENHANCED PROFESSIONAL TCG LAYOUT ================================================================= */ /* ULTRA-PREMIUM FIELD CONTAINER - Professional 3-Lane System */ .field-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; /* Optimal spacing between lanes */ height: 100%; padding: 16px; border-radius: 24px; backdrop-filter: blur(16px) saturate(140%); position: relative; z-index: 2; /* Premium glass-morphism with enhanced depth */ background: /* Dynamic energy layers */ radial-gradient(ellipse at 30% 0%, rgba(90, 163, 240, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 70% 100%, rgba(255, 59, 48, 0.08) 0%, transparent 50%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%), /* Main gradient */ linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(255, 255, 255, 0.05), 0 0 120px rgba(124, 77, 255, 0.1); /* Perfect field container dimensions */ min-height: 190px; max-height: 200px; /* Full width optimized for all screens */ width: 100%; max-width: 1200px; margin: 0 auto; /* Smooth transitions */ transition: all var(--transition-medium); } /* OPPONENT FIELD - Modern TCG Design */ #opponent-field { grid-area: opponent-field; background: radial-gradient(ellipse at 50% 0%, rgba(255, 23, 68, 0.3) 0%, transparent 40%), linear-gradient(135deg, rgba(255, 23, 68, 0.2) 0%, rgba(213, 0, 0, 0.15) 25%, rgba(139, 0, 0, 0.1) 50%, rgba(255, 23, 68, 0.05) 100%), linear-gradient(to bottom, rgba(40, 10, 10, 0.95) 0%, rgba(30, 5, 5, 0.9) 100%); border: 3px solid; border-image: linear-gradient(135deg, #ff1744, #d50000, #ff1744) 1; border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 80px rgba(255, 23, 68, 0.25), 0 0 80px rgba(255, 23, 68, 0.4), inset 0 -3px 0 rgba(255, 255, 255, 0.15), 0 4px 20px rgba(255, 23, 68, 0.2); /* Animated hostile energy */ position: relative; overflow: hidden; /* Optimized field height for balanced layout */ min-height: 170px; max-height: 180px; } #opponent-field::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(90deg, transparent 0%, rgba(232, 21, 43, 0.2) 50%, transparent 100%); border-radius: 20px; z-index: -1; animation: hostile-pulse 4s ease-in-out infinite; } /* PLAYER FIELD - Modern TCG Design */ #player-field { grid-area: player-field; background: radial-gradient(ellipse at 50% 100%, rgba(0, 212, 255, 0.3) 0%, transparent 40%), linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 153, 204, 0.15) 25%, rgba(0, 102, 153, 0.1) 50%, rgba(0, 212, 255, 0.05) 100%), linear-gradient(to top, rgba(0, 30, 50, 0.95) 0%, rgba(0, 20, 40, 0.9) 100%); border: 3px solid; border-image: linear-gradient(135deg, #00d4ff, #0099cc, #00d4ff) 1; border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 80px rgba(0, 212, 255, 0.25), 0 0 80px rgba(0, 212, 255, 0.4), inset 0 3px 0 rgba(255, 255, 255, 0.15), 0 -4px 20px rgba(0, 212, 255, 0.2); /* Animated friendly energy */ position: relative; overflow: hidden; /* Optimized player field height for balanced layout */ min-height: 170px; max-height: 180px; /* Make player field prominent */ z-index: 4; } #player-field::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(90deg, transparent 0%, rgba(90, 163, 240, 0.2) 50%, transparent 100%); border-radius: 20px; z-index: -1; animation: friendly-pulse 4s ease-in-out infinite; } @keyframes hostile-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes friendly-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* FIELD ZONES - ULTRA-MASSIVELY ENLARGED */ .field-zone { /* Ultra-enlarged zones for maximum visibility */ width: 280px !important; height: 190px !important; min-width: 280px !important; max-width: 280px !important; min-height: 190px !important; max-height: 190px !important; /* Enhanced card slot with stronger definition */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%), radial-gradient(ellipse at center, rgba(124, 77, 255, 0.2) 0%, transparent 70%), repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 11px ), linear-gradient(180deg, rgba(20, 25, 40, 0.95) 0%, rgba(10, 15, 30, 0.9) 100%); backdrop-filter: blur(15px) saturate(180%); border: 4px solid rgba(255, 255, 255, 0.4); border-radius: 18px; margin: 5px; padding: 8px; /* Perfect centering with depth */ display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; /* Modern depth and glow effects */ box-shadow: inset 0 6px 25px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 50px rgba(124, 77, 255, 0.15), 0 0 80px rgba(124, 77, 255, 0.1); transition: all var(--transition-medium); } /* Energy field between zones */ .field-zone::after { content: ''; position: absolute; inset: -20px; background: radial-gradient(ellipse at center, transparent 30%, rgba(124, 77, 255, 0.1) 70%, transparent 100%); pointer-events: none; opacity: 0; transition: opacity var(--transition-medium); animation: energy-field 3s ease-in-out infinite; } .field-zone:hover::after { opacity: 1; } @keyframes energy-field { 0%, 100% { transform: scale(0.9) rotate(0deg); } 50% { transform: scale(1.1) rotate(180deg); } } /* Modern zone hover effect */ .field-zone:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(255, 215, 0, 0.5) !important; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%), radial-gradient(ellipse at center, rgba(255, 215, 0, 0.1) 0%, transparent 70%), repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 11px ); box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.3), 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 215, 0, 0.3), 0 0 60px rgba(255, 215, 0, 0.4) !important; } /* Player field zones - Blue zone styling */ #player-field .field-zone { /* Enhanced blue player zones with stronger definition */ border-color: rgba(0, 212, 255, 0.8) !important; border-width: 5px !important; box-shadow: inset 0 6px 30px rgba(0, 0, 0, 0.7), 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(0, 212, 255, 0.5), 0 0 60px rgba(0, 212, 255, 0.4), 0 0 100px rgba(0, 212, 255, 0.3), 0 4px 0 rgba(0, 212, 255, 0.8) !important; /* Blue tech zone background */ background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.15) 0%, transparent 60%), linear-gradient(145deg, rgba(0, 40, 60, 0.95), rgba(0, 30, 50, 0.9)), repeating-linear-gradient( -45deg, transparent, transparent 15px, rgba(0, 212, 255, 0.03) 15px, rgba(0, 212, 255, 0.03) 16px ); /* Slightly elevated for prominence */ transform: translateZ(5px) !important; z-index: 5; } #player-field .field-zone:hover { border-color: rgba(90, 163, 240, 0.8) !important; box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(90, 163, 240, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(90, 163, 240, 0.8), 0 0 60px rgba(90, 163, 240, 0.4) !important; /* Enhanced hover scaling for player zones */ transform: scale(1.08) !important; } /* Opponent field zones - Red zone styling */ #opponent-field .field-zone { /* Enhanced red opponent zones with stronger definition */ border-color: rgba(255, 23, 68, 0.8) !important; border-width: 5px !important; box-shadow: inset 0 6px 30px rgba(0, 0, 0, 0.7), 0 10px 28px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(255, 23, 68, 0.5), 0 0 50px rgba(255, 23, 68, 0.4), 0 0 80px rgba(255, 23, 68, 0.3), 0 -4px 0 rgba(255, 23, 68, 0.8) !important; /* Red tech zone background */ background: radial-gradient(ellipse at center, rgba(255, 23, 68, 0.12) 0%, transparent 60%), linear-gradient(145deg, rgba(60, 20, 20, 0.9), rgba(50, 15, 15, 0.85)), repeating-linear-gradient( -45deg, transparent, transparent 15px, rgba(255, 23, 68, 0.03) 15px, rgba(255, 23, 68, 0.03) 16px ); } #opponent-field .field-zone:hover { border-color: rgba(232, 21, 43, 0.5) !important; box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(232, 21, 43, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 0 2px rgba(232, 21, 43, 0.5), 0 0 40px rgba(232, 21, 43, 0.3) !important; } /* ================================================================= CARDS - UNIFIED STYLING ================================================================= */ /* Base card styling - Professional TCG aesthetic */ .card, .card-in-hand, .card-on-field { position: relative; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%), linear-gradient(145deg, #2d3341 0%, #1a1e28 100%); border: 2px solid rgba(255, 255, 255, 0.4); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); opacity: 1; visibility: visible; transition: all var(--transition-fast); transform-style: preserve-3d; backface-visibility: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 50px rgba(124, 77, 255, 0.08), inset 0 2px 0 rgba(255, 255, 255, 0.15), inset 0 -2px 0 rgba(0, 0, 0, 0.3); } /* Enhanced 3D card hover with polished shadows and smooth animation */ .card:hover { transform: perspective(1200px) rotateY(6deg) rotateX(-4deg) translateZ(40px) scale(1.03); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 100px rgba(124, 77, 255, 0.2), inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 255, 255, 0.1); transition: all var(--transition-medium); } /* Card in hand specific - MODERN STYLE */ .card-in-hand { width: 130px !important; height: 175px !important; /* Hand cards should be readable and substantial */ flex-shrink: 0; /* Allow full visibility in hand */ position: relative; display: flex; opacity: 1; visibility: visible; /* Modern curved card frame */ border: 4px solid rgba(255, 215, 0, 0.4); border-radius: 20px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%), linear-gradient(145deg, #2a2f3e 0%, #1e222d 100%); /* Enhanced card glow effect */ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 60px rgba(90, 163, 240, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 212, 255, 0.2); /* Optimized smooth transitions */ transition: all var(--transition-fast); } #player-hand .card:last-child { margin-right: 0 !important; } /* BATTLEFIELD CARDS - Modern TCG design */ .card-on-field, .field-zone .card { /* Optimized card size for visibility */ width: var(--card-width-field) !important; height: var(--card-height-field) !important; max-width: var(--card-width-field) !important; max-height: var(--card-height-field) !important; min-width: var(--card-width-field) !important; min-height: var(--card-height-field) !important; /* Enhanced card styling */ position: relative !important; overflow: hidden !important; margin: 0 auto !important; transform: scale(1) !important; box-sizing: border-box !important; border-radius: 15px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(124, 77, 255, 0.1) !important; transition: all var(--transition-fast) !important; /* Professional card styling with enhanced depth */ background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 30px rgba(124, 77, 255, 0.2) !important; /* Enhanced placement and positioning */ display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; /* Modern card frame design */ border: 2px solid rgba(255, 255, 255, 0.3) !important; } /* Enhanced card highlighting for player vs opponent territories */ #player-field .field-zone .card { /* Enhanced friendly card appearance */ border-color: rgba(90, 163, 240, 0.3) !important; box-shadow: 0 8px 20px rgba(90, 163, 240, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(90, 163, 240, 0.2) !important; /* Subtle friendly glow */ filter: drop-shadow(0 0 8px rgba(90, 163, 240, 0.2)); } #player-field .field-zone .card:hover { border-color: rgba(90, 163, 240, 0.8) !important; box-shadow: 0 20px 50px rgba(90, 163, 240, 0.6), 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 0 0 3px rgba(90, 163, 240, 0.6) !important; filter: drop-shadow(0 0 25px rgba(90, 163, 240, 0.5)) brightness(1.25) !important; } /* Opponent field cards - Enhanced hostile styling */ #opponent-field .field-zone .card { /* Enhanced hostile card appearance */ border-color: rgba(232, 21, 43, 0.3) !important; box-shadow: 0 8px 20px rgba(232, 21, 43, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(232, 21, 43, 0.2) !important; /* Subtle hostile glow */ filter: drop-shadow(0 0 8px rgba(232, 21, 43, 0.15)); } #opponent-field .field-zone .card:hover { border-color: rgba(232, 21, 43, 0.8) !important; box-shadow: 0 20px 50px rgba(232, 21, 43, 0.5), 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.2), 0 0 0 3px rgba(232, 21, 43, 0.6) !important; filter: drop-shadow(0 0 25px rgba(232, 21, 43, 0.4)) brightness(1.2) !important; } /* Card image - ULTRA Enhanced visibility */ .card img, .card-image, .card-image-area img { width: 100% !important; height: 75% !important; /* More image space */ object-fit: cover !important; border-radius: 15px 15px 0 0 !important; filter: brightness(1.15) saturate(1.3) contrast(1.1) !important; object-position: center; border: none; display: block; margin: 0; padding: 0; background: #2a2a2a; transition: all 0.3s ease !important; } /* ================================================================= CARD RARITY SYSTEM - Modern TCG aesthetics ================================================================= */ /* Rarity-based card frames and effects */ .card[data-rarity="common"] { background: linear-gradient(145deg, #2a2f3e 0%, #1e222d 100%) !important; border: 2px solid #666 !important; } .card[data-rarity="uncommon"] { background: linear-gradient(145deg, #1a4d2e 0%, #0f3020 100%) !important; border: 2px solid #4caf50 !important; box-shadow: 0 0 20px rgba(76, 175, 80, 0.4), inset 0 0 20px rgba(76, 175, 80, 0.1) !important; } .card[data-rarity="rare"] { background: linear-gradient(145deg, #1e3a5f 0%, #0d2340 100%) !important; border: 2px solid #2196f3 !important; box-shadow: 0 0 30px rgba(33, 150, 243, 0.5), inset 0 0 30px rgba(33, 150, 243, 0.15) !important; } .card[data-rarity="epic"] { background: linear-gradient(145deg, #4a148c 0%, #2d0a5b 100%) !important; border: 2px solid #9c27b0 !important; box-shadow: 0 0 40px rgba(156, 39, 176, 0.6), inset 0 0 40px rgba(156, 39, 176, 0.2) !important; animation: epic-pulse 3s ease-in-out infinite; } .card[data-rarity="legendary"] { background: linear-gradient(145deg, #bf9000 0%, #7d5d00 50%, #bf9000 100%), linear-gradient(90deg, #ffeb3b 0%, #ffc107 50%, #ffeb3b 100%) !important; background-size: 100% 100%, 200% 100%; background-position: 0 0, 0 0; border: 3px solid #ffd700 !important; box-shadow: 0 0 80px rgba(255, 215, 0, 0.9), 0 15px 50px rgba(255, 215, 0, 0.6), inset 0 0 60px rgba(255, 215, 0, 0.4), 0 0 120px rgba(255, 215, 0, 0.5), 0 8px 30px rgba(0, 0, 0, 0.6) !important; animation: legendary-shine 4s ease-in-out infinite, legendary-glow 2s ease-in-out infinite; } .card[data-rarity="mythic"] { background: radial-gradient(ellipse at center, rgba(255, 0, 255, 0.3) 0%, transparent 70%), linear-gradient(45deg, #ff006e 0%, #8338ec 25%, #3a86ff 50%, #06c 75%, #ff006e 100%) !important; background-size: 100% 100%, 400% 400%; border: 3px solid transparent !important; border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06c) 1 !important; box-shadow: 0 0 100px rgba(138, 56, 236, 0.9), 0 20px 60px rgba(138, 56, 236, 0.6), inset 0 0 80px rgba(255, 0, 110, 0.4), 0 0 150px rgba(58, 134, 255, 0.7), 0 12px 40px rgba(0, 0, 0, 0.7) !important; animation: mythic-rainbow 3s linear infinite, mythic-pulse 2s ease-in-out infinite; } /* Holographic effect for special cards */ .card[data-holographic="true"]::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 45deg, transparent 30%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.1) 60%, transparent 70% ); background-size: 200% 200%; animation: holographic-sweep 3s linear infinite; pointer-events: none; border-radius: inherit; } /* Rarity animations */ @keyframes epic-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } @keyframes legendary-shine { 0%, 100% { background-position: 0 0, 0 0; } 50% { background-position: 0 0, 100% 0; } } @keyframes legendary-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } @keyframes mythic-rainbow { 0% { background-position: 0 0, 0% 0%; } 100% { background-position: 0 0, 400% 400%; } } @keyframes mythic-pulse { 0%, 100% { filter: brightness(1) hue-rotate(0deg); transform: scale(1); } 50% { filter: brightness(1.3) hue-rotate(180deg); transform: scale(1.02); } } @keyframes holographic-sweep { 0% { background-position: -100% -100%; } 100% { background-position: 100% 100%; } } /* ================================================================= PLAYER HAND AREA ================================================================= */ /* ENHANCED PROFESSIONAL HAND - MODERN TCG INSPIRED */ #player-hand { grid-area: hand-area !important; position: relative !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; min-height: 200px !important; max-height: 220px !important; padding: 15px 60px 20px !important; gap: 0 !important; width: 100% !important; z-index: 10 !important; margin: 0 !important; margin-top: -5px !important; /* Closer to player field */ /* Modern curved hand background */ background: radial-gradient(ellipse at 50% 100%, rgba(0, 212, 255, 0.3) 0%, transparent 60%), linear-gradient(175deg, transparent 0%, rgba(0, 0, 0, 0.4) 15%, rgba(0, 0, 0, 0.7) 35%, rgba(0, 0, 0, 0.92) 100%), radial-gradient(ellipse at bottom, rgba(90, 163, 240, 0.15) 0%, transparent 80%), linear-gradient(90deg, rgba(0, 30, 50, 0.9) 0%, rgba(0, 20, 40, 0.95) 100%) !important; /* Enhanced curved separation with stronger definition */ border-radius: 50% 50% 0 0 / 40px 40px 0 0 !important; border: none !important; border-top: 6px solid rgba(0, 212, 255, 0.9) !important; border-left: 3px solid rgba(0, 212, 255, 0.4) !important; border-right: 3px solid rgba(0, 212, 255, 0.4) !important; /* Enhanced depth and glow with stronger hierarchy */ box-shadow: 0 -25px 70px rgba(0, 0, 0, 0.9), 0 -15px 40px rgba(0, 212, 255, 0.5), inset 0 5px 0 rgba(0, 212, 255, 0.6), inset 0 -35px 60px rgba(0, 0, 0, 0.6), 0 -3px 0 rgba(90, 163, 240, 0.9), 0 0 50px rgba(0, 212, 255, 0.3) !important; margin: 0 !important; margin-top: -10px !important; /* Slight overlap for visual connection */ overflow: visible !important; backdrop-filter: blur(16px) saturate(180%) !important; animation: hand-intro 0.8s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes hand-intro { 0% { opacity: 0; transform: translateY(100px) scale(0.8); } 50% { opacity: 0.7; transform: translateY(30px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Enhanced hand container background */ #player-hand::before { content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 100% !important; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 30%, transparent 60%) !important; pointer-events: none !important; z-index: -1 !important; backdrop-filter: blur(8px) !important; } /* OPTIMIZED CURVED HAND ARRANGEMENT - PROFESSIONAL TCG STYLE */ .card-in-hand { position: relative !important; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important; transform-origin: center bottom !important; } .card-in-hand:nth-child(1) { transform: rotate(-12deg) translateY(18px) translateX(5px) !important; z-index: 1 !important; } .card-in-hand:nth-child(2) { transform: rotate(-8deg) translateY(12px) translateX(3px) !important; z-index: 2 !important; } .card-in-hand:nth-child(3) { transform: rotate(-5deg) translateY(6px) translateX(2px) !important; z-index: 3 !important; } .card-in-hand:nth-child(4) { transform: rotate(-2deg) translateY(2px) translateX(1px) !important; z-index: 4 !important; } .card-in-hand:nth-child(5) { transform: rotate(0deg) translateY(0px) translateX(0px) !important; z-index: 5 !important; } .card-in-hand:nth-child(6) { transform: rotate(2deg) translateY(2px) translateX(-1px) !important; z-index: 6 !important; } .card-in-hand:nth-child(7) { transform: rotate(5deg) translateY(6px) translateX(-2px) !important; z-index: 7 !important; } .card-in-hand:nth-child(8) { transform: rotate(8deg) translateY(12px) translateX(-3px) !important; z-index: 8 !important; } .card-in-hand:nth-child(9) { transform: rotate(12deg) translateY(18px) translateX(-5px) !important; z-index: 9 !important; } .card-in-hand:nth-child(10) { transform: rotate(15deg) translateY(24px) translateX(-6px) !important; z-index: 10 !important; } /* ENHANCED HAND HOVER - Better card selection with isolation */ .card-in-hand { isolation: isolate !important; } .card-in-hand:hover { transform: translateY(-70px) scale(1.4) rotate(0deg) rotateX(0deg) !important; z-index: 9999 !important; position: relative !important; margin-left: 65px !important; margin-right: 65px !important; box-shadow: /* Ultra-deep shadows */ 0 70px 140px rgba(0, 0, 0, 0.95), 0 40px 80px rgba(0, 0, 0, 0.8), 0 20px 40px rgba(0, 0, 0, 0.6), /* Premium glow cascade */ 0 0 100px rgba(90, 163, 240, 0.9), 0 0 80px rgba(124, 77, 255, 0.6), 0 0 140px rgba(90, 163, 240, 0.4), 0 0 200px rgba(90, 163, 240, 0.2), /* Enhanced inner effects */ inset 0 3px 6px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 0 60px rgba(90, 163, 240, 0.3), /* Border enhancement */ 0 0 0 3px rgba(90, 163, 240, 0.8), 0 0 0 6px rgba(90, 163, 240, 0.4), /* Ambient glow */ 0 0 100px rgba(255, 255, 255, 0.1) !important; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* Premium visual enhancements */ filter: brightness(1.3) saturate(1.4) contrast(1.1) !important; /* Strong glow for better visibility */ filter: brightness(1.35) saturate(1.5) !important; border-color: rgba(0, 212, 255, 1) !important; border-width: 5px !important; /* Smooth cursor indication */ cursor: pointer !important; /* Ensure card is above everything */ pointer-events: all !important; } /* ================================================================= MODERN HAND CARD STATS DISPLAY ================================================================= */ #player-hand .card { position: relative !important; width: 130px !important; height: 175px !important; margin-right: -30px !important; /* Enhanced card appearance in hand */ border-radius: 18px !important; overflow: hidden !important; /* Optimized selection feedback */ transition: all var(--transition-fast) !important; /* Prevent overlap issues */ pointer-events: all !important; user-select: none !important; } #player-hand .card:last-child { margin-right: 0 !important; } /* Premium hand card spacing with smart overlap */ .card-in-hand:nth-child(n+6) { margin-right: -25px !important; } .card-in-hand:nth-child(n+8) { margin-right: -22px !important; } .card-in-hand:nth-child(n+10) { margin-right: -20px !important; } /* Hover state isolation to prevent glitches */ #player-hand:has(.card-in-hand:hover) .card-in-hand:not(:hover) { pointer-events: none !important; opacity: 0.8 !important; } /* REMOVED: Debug stat overlay that was causing red pattern on hand cards */ /* REMOVED: Debug overlay that was creating red pattern on hand cards */ /* REMOVED: Debug animation that was interfering with card display */ /* ================================================================= BATTLEFIELD STAT BADGES - FORCE VISIBILITY ================================================================= */ /* Modern TCG stat badges - Ultra visibility */ .battlefield-stat, .card .battlefield-stat, .field-zone .card .battlefield-stat { position: absolute !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 900 !important; border-radius: 50% !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9), 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 2px 6px rgba(255, 255, 255, 0.5), 0 0 0 4px rgba(0, 0, 0, 0.8), 0 0 20px currentColor !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), -1px -1px 2px rgba(0, 0, 0, 0.7), 0 0 10px currentColor !important; z-index: 20 !important; pointer-events: none !important; user-select: none !important; /* Glass effect */ backdrop-filter: blur(8px) saturate(180%) !important; -webkit-backdrop-filter: blur(8px) saturate(180%) !important; background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.85) 50%, rgba(255, 255, 255, 0.1) 100%) !important; /* Ensure stats are always visible */ opacity: 1 !important; visibility: visible !important; /* Size */ width: var(--stat-badge-size) !important; height: var(--stat-badge-size) !important; font-size: var(--stat-badge-font) !important; /* Subtle professional animation */ animation: stat-pulse 2.5s ease-in-out infinite; } @keyframes stat-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } .battlefield-attack { bottom: 15px !important; left: 15px !important; background: radial-gradient(circle, #ff1744 0%, #d50000 100%) !important; color: white !important; border: 4px solid #ff5252 !important; box-shadow: 0 0 30px rgba(255, 23, 68, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.4) !important; } .battlefield-defense { bottom: 12px !important; right: 70px !important; /* More space for larger badges */ background: linear-gradient(135deg, #4fc3f7, #29b6f6) !important; color: white !important; border: 4px solid #0288d1 !important; box-shadow: 0 0 25px rgba(79, 195, 247, 0.7), inset 0 0 12px rgba(255, 255, 255, 0.3) !important; } .battlefield-health { bottom: 15px !important; right: 15px !important; background: radial-gradient(circle, #00e676 0%, #00c853 100%) !important; color: white !important; border: 4px solid #69f0ae !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 230, 118, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 0 4px rgba(0, 100, 50, 0.8) !important; } /* Badge positioning for different card sizes */ #player-field .battlefield-stat { width: var(--stat-badge-size-player) !important; height: var(--stat-badge-size-player) !important; font-size: var(--stat-badge-font-player) !important; font-weight: 900 !important; } /* Opponent field badges - slightly smaller but still visible */ #opponent-field .battlefield-stat { width: var(--stat-badge-size-opponent) !important; height: var(--stat-badge-size-opponent) !important; font-size: var(--stat-badge-font-opponent) !important; } #player-field .battlefield-health { top: 8px !important; right: 8px !important; } .field-zone .battlefield-attack { bottom: 8px !important; left: 8px !important; } .field-zone .battlefield-defense { bottom: 8px !important; right: 50% !important; transform: translateX(50%) !important; } .field-zone .battlefield-health { top: 8px !important; right: 8px !important; } /* ================================================================= ENHANCED DROP ZONE INTERACTIONS - MODERN STYLE ================================================================= */ /* Drop zone highlight - Modern glow effect */ .field-zone.drag-over { border-color: var(--player-primary) !important; background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.3) 0%, transparent 70%), linear-gradient(145deg, rgba(0, 212, 255, 0.2), rgba(0, 212, 255, 0.1)) !important; box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.5), inset 0 0 30px rgba(0, 212, 255, 0.4), 0 10px 30px rgba(0, 212, 255, 0.4) !important; animation: drop-pulse 1s ease-in-out infinite !important; } @keyframes drop-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } /* Particle effect for card placement */ @keyframes particle-burst { 0% { transform: translate(0, 0) scale(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } } .card-placed { animation: card-slam 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); } @keyframes card-slam { 0% { transform: scale(1.5) rotate(10deg); } 50% { transform: scale(0.9) rotate(-2deg); } 100% { transform: scale(1) rotate(0deg); } } /* ================================================================= HOVER EFFECTS AND INTERACTIONS - PROFESSIONAL POLISH ================================================================= */ /* Card hover effects - Enhanced interaction feedback */ .card:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 60px rgba(124, 77, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; border-color: rgba(255, 255, 255, 0.4) !important; z-index: 10 !important; filter: brightness(1.1) !important; } .card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(90, 163, 240, 0.3) !important; } #player-field .card:hover { box-shadow: 0 10px 30px rgba(90, 163, 240, 0.4), 0 5px 15px rgba(0, 0, 0, 0.4) !important; } #opponent-field .card:hover { box-shadow: 0 8px 20px rgba(255, 100, 100, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3) !important; } /* ================================================================= ANIMATIONS & EFFECTS - MODERN TCG STYLE ================================================================= */ /* Stat badge pulse animations */ @keyframes pulse-attack { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes pulse-defense { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } @keyframes pulse-health { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Professional card placement */ .field-zone .card { animation: card-enter 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } @keyframes card-enter { 0% { transform: scale(0.8) rotate(10deg); opacity: 0; } 50% { transform: scale(1.1) rotate(-2deg); opacity: 0.7; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } /* ULTRA-POLISHED field zone hover with smooth professional 3D effect */ .field-zone .card:hover { transform: translateY(-15px) scale(1.15) rotate(-1deg) !important; box-shadow: 0 35px 80px rgba(0, 0, 0, 0.9), 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 70px rgba(90, 163, 240, 0.8), inset 0 4px 0 rgba(255, 255, 255, 0.4), 0 0 0 3px rgba(90, 163, 240, 0.5) !important; cursor: pointer !important; z-index: 50 !important; filter: brightness(1.2) saturate(1.3) !important; transition: all var(--transition-slow) !important; } /* Enhanced depth effects */ .battlefield-container > * { z-index: 2; } .battlefield-container .battle-log { z-index: 3; } .battlefield-container .side-panel { z-index: 3; } .battlefield-container #player-field { z-index: 4; } .battlefield-container #player-hand { z-index: 10; } /* ================================================================= BATTLE LOG - PROMINENT GAME EVENT TRACKING ================================================================= */ /* OPTIMIZED BATTLE LOG - Streamlined Professional Design */ .battle-log { grid-area: battle-log; background: /* Refined layered glass effect */ linear-gradient(155deg, rgba(8, 12, 24, 0.96) 0%, rgba(4, 8, 20, 0.98) 25%, rgba(2, 6, 18, 0.99) 50%, rgba(0, 4, 16, 1) 100%), /* Subtle energy gradients */ radial-gradient(ellipse at 30% 20%, rgba(90, 163, 240, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(124, 77, 255, 0.06) 0%, transparent 60%); backdrop-filter: blur(20px) saturate(150%); border: 2px solid rgba(90, 163, 240, 0.3); border-radius: 16px; box-shadow: /* Refined depth layers */ 0 16px 48px rgba(0, 0, 0, 0.8), 0 6px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.5), /* Subtle glow effects */ 0 0 60px rgba(90, 163, 240, 0.12), 0 0 30px rgba(124, 77, 255, 0.06); position: relative; padding: 16px; overflow-y: auto; max-height: 100%; /* Professional scrollbar styling */ scrollbar-width: thin; scrollbar-color: rgba(90, 163, 240, 0.5) transparent; /* Optimized layout properties */ display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; font-family: var(--font-body); } .battle-log::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(90, 163, 240, 0.8) 50%, transparent 100%); border-radius: 20px 20px 0 0; } } /* REFINED BATTLE LOG HEADER - Streamlined Professional Aesthetic */ .battle-log-header { color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 16px; padding: 12px 16px; background: /* Streamlined professional gradients */ linear-gradient(135deg, rgba(90, 163, 240, 0.4) 0%, rgba(124, 77, 255, 0.3) 50%, rgba(90, 163, 240, 0.25) 100%), linear-gradient(45deg, rgba(0, 0, 0, 0.4) 0%, rgba(10, 15, 30, 0.7) 100%); border-radius: 12px; border: 2px solid rgba(90, 163, 240, 0.4); text-transform: uppercase; letter-spacing: 2px; text-align: center; text-shadow: 0 0 20px rgba(90, 163, 240, 0.9), 0 0 10px rgba(124, 77, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8); font-family: var(--font-display); box-shadow: /* Refined depth system */ 0 6px 24px rgba(90, 163, 240, 0.3), 0 3px 12px rgba(124, 77, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; backdrop-filter: blur(8px); } .battle-log-header::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), rgba(90, 163, 240, 0.15), rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); filter: blur(0.5px); } .battle-log-header:hover::before { left: 100%; } .battle-log-header:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(90, 163, 240, 0.4), 0 6px 18px rgba(124, 77, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.5); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* ELITE BATTLE LOG ENTRIES - Professional Gaming Design */ .battle-log-entry { margin-bottom: 8px; padding: 10px 14px; background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(10, 15, 30, 0.7) 100%), rgba(255, 255, 255, 0.02); border-radius: 12px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.95); border-left: 4px solid rgba(90, 163, 240, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); word-wrap: break-word; hyphens: auto; max-width: 100%; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px); } .battle-log-entry:hover { background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(15, 20, 35, 0.8) 100%), rgba(255, 255, 255, 0.04); transform: translateX(4px) translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 20px rgba(90, 163, 240, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); border-left-color: rgba(90, 163, 240, 0.8); } /* PROFESSIONAL EVENT TYPE STYLING - Elite Gaming Aesthetic */ .battle-log-entry.player-action { border-left-color: rgba(90, 163, 240, 0.9); background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(10, 15, 30, 0.7) 100%), linear-gradient(90deg, rgba(90, 163, 240, 0.15) 0%, transparent 60%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 15px rgba(90, 163, 240, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .battle-log-entry.opponent-action { border-left-color: rgba(255, 59, 48, 0.9); background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(30, 10, 15, 0.7) 100%), linear-gradient(90deg, rgba(255, 59, 48, 0.15) 0%, transparent 60%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 59, 48, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .battle-log-entry.system-event { border-left-color: rgba(255, 215, 0, 0.9); background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(30, 25, 10, 0.7) 100%), linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, transparent 60%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 215, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Add timestamp styling */ .battle-log-entry .timestamp { font-size: 9px; color: rgba(255, 255, 255, 0.5); margin-right: 4px; } /* Battle log scrollbar styling */ .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(90, 163, 240, 0.4); border-radius: 3px; } .battle-log::-webkit-scrollbar-thumb:hover { background: rgba(90, 163, 240, 0.6); } /* ================================================================= SIDE PANEL - DECK & DISCARD ZONES - ULTRA PROFESSIONAL REDESIGN ================================================================= */ /* ULTRA-PROFESSIONAL SIDE PANEL - Elite TCG Game UI Design */ .side-panel { grid-area: side-panel; display: flex; flex-direction: column; gap: 20px; padding: 24px 18px; background: /* Elite layered glass effect with improved depth */ linear-gradient(160deg, rgba(8, 12, 24, 0.96) 0%, rgba(4, 8, 20, 0.98) 25%, rgba(2, 6, 18, 0.99) 50%, rgba(0, 4, 16, 1) 100%), /* Professional energy gradients with better balance */ radial-gradient(ellipse at 20% 10%, rgba(90, 163, 240, 0.25) 0%, transparent 70%), radial-gradient(ellipse at 80% 90%, rgba(255, 59, 48, 0.15) 0%, transparent 70%), radial-gradient(ellipse at 50% 50%, rgba(124, 77, 255, 0.08) 0%, transparent 80%), /* Enhanced tech pattern with professional grid */ url('data:image/svg+xml;utf8,'); /* Enhanced professional border system */ border: 2px solid rgba(90, 163, 240, 0.3); border-radius: 20px; position: relative; z-index: 3; overflow: visible; backdrop-filter: blur(24px) saturate(150%) brightness(1.1); /* Refined shadow system for premium appearance */ box-shadow: /* Primary depth shadows */ 0 24px 48px rgba(0, 0, 0, 0.8), 0 12px 24px rgba(0, 0, 0, 0.7), 0 6px 12px rgba(0, 0, 0, 0.5), /* Professional inner lighting */ inset 0 1px 2px rgba(255, 255, 255, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.6), /* Ambient glow effects */ 0 0 80px rgba(90, 163, 240, 0.2), 0 0 40px rgba(124, 77, 255, 0.15); /* Subtle animation for enhanced interactivity */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Professional top accent line */ .side-panel::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(90, 163, 240, 0.9) 25%, rgba(255, 215, 0, 0.8) 50%, rgba(90, 163, 240, 0.9) 75%, transparent 100%); border-radius: 20px 20px 0 0; animation: panel-accent-glow 4s ease-in-out infinite alternate; z-index: 2; } /* Professional visual separator between sections */ .zone-separator { height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(124, 77, 255, 0.6) 20%, rgba(255, 215, 0, 0.8) 50%, rgba(124, 77, 255, 0.6) 80%, transparent 100%); border-radius: 1px; margin: 8px 0; position: relative; overflow: hidden; } .zone-separator::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: separator-shine 3s ease-in-out infinite; } @keyframes separator-shine { 0% { left: -100%; } 50% { left: 100%; } 100% { left: -100%; } } @keyframes panel-accent-glow { 0%, 100% { opacity: 0.8; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.4); } } /* REMOVED: Replaced with more professional design */ z-index: -1; } @keyframes panel-glow { 0% { opacity: 0.6; } 100% { opacity: 1; } } background: linear-gradient(135deg, rgba(124, 77, 255, 0.15) 0%, rgba(255, 215, 0, 0.1) 100%), linear-gradient(180deg, rgba(5, 10, 20, 0.98) 0%, rgba(10, 20, 30, 0.95) 100%), radial-gradient(ellipse at top, rgba(124, 77, 255, 0.08) 0%, transparent 50%); backdrop-filter: blur(20px) saturate(160%); border-radius: 16px; border: 2px solid rgba(124, 77, 255, 0.6); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), inset 0 0 35px rgba(124, 77, 255, 0.15), 0 0 50px rgba(124, 77, 255, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.15); /* Expanded width for better layout */ width: 100%; max-width: 180px; overflow: visible; position: relative; } /* Elite Zone Section Headers with Professional Styling */ .zone-section-header { text-align: center; margin-bottom: 8px; font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, 0.95); text-transform: uppercase; letter-spacing: 1px; padding: 8px 12px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%); border-radius: 10px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; } .zone-section-header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%); } .opponent-zone-section .zone-section-header { text-shadow: 0 0 10px rgba(255, 59, 48, 0.8); } .player-zone-section .zone-section-header { text-shadow: 0 0 10px rgba(0, 122, 255, 0.8); } /* Zone section containers - Elite Professional Design */ .opponent-zone-section, .player-zone-section { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; border: 2px solid; position: relative; overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.12), inset 0 -1px 3px rgba(0, 0, 0, 0.5); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); backdrop-filter: blur(16px) saturate(130%); transform-style: preserve-3d; will-change: transform, box-shadow; /* Enhanced hover interaction */ } .opponent-zone-section:hover, .player-zone-section:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.5); } .opponent-zone-section { background: /* Enhanced gradient for opponent section */ linear-gradient(145deg, rgba(255, 59, 48, 0.20) 0%, rgba(255, 69, 58, 0.12) 25%, rgba(220, 30, 40, 0.08) 50%, rgba(255, 59, 48, 0.06) 100%), /* Professional overlay */ linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%); border-color: rgba(255, 59, 48, 0.5); position: relative; } .opponent-zone-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(255, 59, 48, 0.8) 50%, transparent 100%); border-radius: 18px 18px 0 0; } .player-zone-section { background: /* Enhanced gradient for player section */ linear-gradient(145deg, rgba(0, 122, 255, 0.20) 0%, rgba(30, 144, 255, 0.12) 25%, rgba(0, 100, 220, 0.08) 50%, rgba(0, 122, 255, 0.06) 100%), /* Professional overlay */ linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%); border-color: rgba(0, 122, 255, 0.5); position: relative; } .player-zone-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(0, 122, 255, 0.8) 50%, transparent 100%); border-radius: 18px 18px 0 0; rgba(255, 99, 71, 0.06) 60%, rgba(0, 0, 0, 0.4) 100%), radial-gradient(ellipse at 20% 20%, rgba(255, 59, 48, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(255, 140, 0, 0.06) 0%, transparent 60%); border-color: rgba(255, 59, 48, 0.4); position: relative; } .opponent-zone-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(255, 59, 48, 0.8) 20%, rgba(255, 99, 71, 0.9) 50%, rgba(255, 59, 48, 0.8) 80%, transparent 100%); border-radius: 16px 16px 0 0; animation: opponent-pulse 2s ease-in-out infinite alternate; } @keyframes opponent-pulse { 0% { opacity: 0.7; } 100% { opacity: 1; } } .player-zone-section { background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(30, 144, 255, 0.08) 30%, rgba(64, 156, 255, 0.06) 60%, rgba(0, 0, 0, 0.4) 100%), radial-gradient(ellipse at 20% 20%, rgba(0, 122, 255, 0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(124, 77, 255, 0.06) 0%, transparent 60%); border-color: rgba(0, 122, 255, 0.4); position: relative; } .player-zone-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(0, 122, 255, 0.8) 20%, rgba(64, 156, 255, 0.9) 50%, rgba(0, 122, 255, 0.8) 80%, transparent 100%); border-radius: 16px 16px 0 0; animation: player-pulse 2s ease-in-out infinite alternate; } @keyframes player-pulse { 0% { opacity: 0.7; } 100% { opacity: 1; } } .opponent-zone-section:hover { transform: translateY(-2px) rotateX(1deg); box-shadow: 0 12px 48px rgba(255, 59, 48, 0.2), 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.5); border-color: rgba(255, 59, 48, 0.6); } .player-zone-section:hover { transform: translateY(-2px) rotateX(1deg); box-shadow: 0 12px 48px rgba(0, 122, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.5); border-color: rgba(0, 122, 255, 0.6); } /* ELITE PLAYER INFO DISPLAYS - Professional Gaming Aesthetic */ .zone-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; position: relative; z-index: 2; padding: 12px 16px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.8) 100%); border: 3px solid rgba(255, 255, 255, 0.15); border-radius: 20px; backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8), 0 6px 24px rgba(0, 0, 0, 0.6), inset 0 3px 6px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.5); } /* PROFESSIONAL PLAYER INFO LAYOUT */ .player-info-display { display: flex; align-items: center; gap: 16px; flex: 1; } .player-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, rgba(90, 163, 240, 0.3) 0%, rgba(124, 77, 255, 0.2) 100%), radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 60%); border: 3px solid rgba(90, 163, 240, 0.6); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(90, 163, 240, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .player-avatar::before { content: "👤"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; opacity: 0.8; } .player-avatar:hover { transform: scale(1.05) rotateY(5deg); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8), 0 0 30px rgba(90, 163, 240, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.3); } .player-details { display: flex; flex-direction: column; gap: 6px; flex: 1; } .player-name { font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 0 20px rgba(90, 163, 240, 1), 0 2px 4px rgba(0, 0, 0, 0.8); font-family: var(--font-display); letter-spacing: 1px; margin: 0; } .player-level { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 1px; } .player-stats { display: flex; gap: 8px; align-items: center; margin-top: 4px; } .stat-item { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(0, 0, 0, 0.4); border-radius: 8px; border: 1px solid rgba(90, 163, 240, 0.3); font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.9); transition: all 0.2s ease; } .stat-item:hover { background: rgba(0, 0, 0, 0.6); border-color: rgba(90, 163, 240, 0.5); transform: translateY(-1px); } .stat-icon { font-size: 14px; } .zone-section-header h4 { font-size: 12px; font-weight: 900; letter-spacing: 2px; margin: 0; padding: 0; text-transform: uppercase; font-family: var(--font-display); color: rgba(255, 255, 255, 0.6); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 15px currentColor; opacity: 0.8; } .zone-section-header h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 20px currentColor; /* Removed distracting pulse animation */ } /* Removed distracting player-indicator-pulse animation */ /* OPPONENT PLAYER INFO - Elite Red Theme */ .opponent-zone-section .zone-section-header { border-color: rgba(255, 59, 48, 0.6); background: linear-gradient(135deg, rgba(255, 59, 48, 0.18) 0%, rgba(255, 59, 48, 0.12) 25%, rgba(60, 15, 15, 0.7) 70%, rgba(40, 10, 10, 0.9) 100%); box-shadow: 0 12px 48px rgba(255, 59, 48, 0.5), 0 6px 24px rgba(0, 0, 0, 0.7), inset 0 3px 6px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 0 80px rgba(255, 59, 48, 0.2); } .opponent-zone-section .player-avatar { border-color: rgba(255, 59, 48, 0.7); background: linear-gradient(135deg, rgba(255, 59, 48, 0.3) 0%, rgba(255, 140, 0, 0.2) 100%), radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 60%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 59, 48, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2); } .opponent-zone-section .player-avatar::before { content: "🔥"; } .opponent-zone-section .player-name { color: #ff6b6b; text-shadow: 0 0 20px rgba(255, 59, 48, 1), 0 2px 4px rgba(0, 0, 0, 0.8); } .opponent-zone-section .stat-item { border-color: rgba(255, 59, 48, 0.4); background: rgba(255, 59, 48, 0.1); } .opponent-zone-section .zone-section-header h4 { color: #ff6b6b; text-shadow: 0 0 30px rgba(255, 59, 48, 1), 0 0 60px rgba(255, 59, 48, 0.8), 0 2px 6px rgba(0, 0, 0, 0.9); } .opponent-zone-section .zone-section-header h4::before { background: #ff6b6b; box-shadow: 0 0 20px rgba(255, 59, 48, 0.8); } /* PLAYER INFO - Elite Blue Theme */ .player-zone-section .zone-section-header { border-color: rgba(0, 122, 255, 0.6); background: linear-gradient(135deg, rgba(0, 122, 255, 0.18) 0%, rgba(0, 122, 255, 0.12) 25%, rgba(15, 40, 80, 0.7) 70%, rgba(10, 25, 60, 0.9) 100%); box-shadow: 0 12px 48px rgba(0, 122, 255, 0.5), 0 6px 24px rgba(0, 0, 0, 0.7), inset 0 3px 6px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 122, 255, 0.2); } .player-zone-section .player-avatar { border-color: rgba(0, 122, 255, 0.7); background: linear-gradient(135deg, rgba(0, 122, 255, 0.3) 0%, rgba(90, 163, 240, 0.2) 100%), radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 60%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 122, 255, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2); } .player-zone-section .player-avatar::before { content: "⚡"; } .player-zone-section .player-name { color: #4da6ff; text-shadow: 0 0 20px rgba(0, 122, 255, 1), 0 2px 4px rgba(0, 0, 0, 0.8); } .player-zone-section .stat-item { border-color: rgba(0, 122, 255, 0.4); background: rgba(0, 122, 255, 0.1); } .player-zone-section .zone-section-header h4 { color: #4da6ff; text-shadow: 0 0 30px rgba(0, 122, 255, 1), 0 0 60px rgba(0, 122, 255, 0.8), 0 2px 6px rgba(0, 0, 0, 0.9); } .player-zone-section .zone-section-header h4::before { background: #4da6ff; box-shadow: 0 0 20px rgba(0, 122, 255, 0.8); } /* Professional hover effects for headers */ .zone-section-header:hover { transform: translateY(-2px) scale(1.02); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .opponent-zone-section .zone-section-header:hover { box-shadow: 0 12px 32px rgba(255, 59, 48, 0.5), 0 6px 16px rgba(0, 0, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 0 80px rgba(255, 59, 48, 0.2); } .player-zone-section .zone-section-header:hover { box-shadow: 0 12px 32px rgba(0, 122, 255, 0.5), 0 6px 16px rgba(0, 0, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 0 80px rgba(0, 122, 255, 0.2); } /* ULTRA-PROFESSIONAL DECK & DISCARD ZONES - Premium TCG Design */ .deck-zone, .discard-zone { min-height: 120px; max-height: 140px; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 18px; padding: 16px; position: relative; display: flex; align-items: center; justify-content: space-between; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); background: /* Enhanced glass effect with depth */ linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.6) 100%), /* Subtle tech pattern */ url('data:image/svg+xml;utf8,'); /* Enhanced shadow system */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px) saturate(130%); overflow: hidden; rgba(255, 255, 255, 0.02) 70%, rgba(255, 255, 255, 0.01) 100%), /* Dark base */ linear-gradient(145deg, rgba(10, 12, 18, 0.8) 0%, rgba(6, 8, 14, 0.9) 100%); box-shadow: /* Outer shadows */ 0 8px 24px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4), /* Inner lighting */ inset 0 2px 4px rgba(255, 255, 255, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.5); overflow: hidden; width: 100%; box-sizing: border-box; backdrop-filter: blur(16px) saturate(120%); } .deck-zone:hover, .discard-zone:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 25px rgba(124, 77, 255, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.6); border-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(16px) saturate(140%) brightness(1.1); } .opponent-zone-section .deck-zone:hover { border-color: rgba(255, 59, 48, 0.6); background: rgba(255, 59, 48, 0.1); } /* ENHANCED DISCARD ZONE HOVER EFFECTS - Professional Gaming UI */ .opponent-zone-section .discard-zone { border-color: rgba(255, 140, 0, 0.6); background: linear-gradient(155deg, rgba(255, 140, 0, 0.15) 0%, rgba(255, 140, 0, 0.08) 20%, rgba(80, 45, 15, 0.6) 60%, rgba(60, 35, 10, 0.9) 100%), radial-gradient(ellipse at 25% 25%, rgba(255, 140, 0, 0.2) 0%, transparent 70%); box-shadow: 0 12px 36px rgba(255, 140, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(255, 140, 0, 0.2), inset 0 3px 6px rgba(255, 255, 255, 0.1), inset 0 -3px 6px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 140, 0, 0.15); } .opponent-zone-section .discard-zone:hover { border-color: rgba(255, 140, 0, 0.8); transform: translateY(-4px) scale(1.03) rotateX(1deg); box-shadow: 0 16px 48px rgba(255, 140, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 0 80px rgba(255, 140, 0, 0.25), inset 0 3px 6px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.7), 0 0 120px rgba(255, 140, 0, 0.2); } .player-zone-section .deck-zone:hover { border-color: rgba(0, 122, 255, 0.8); transform: translateY(-4px) scale(1.03) rotateX(1deg); box-shadow: 0 16px 48px rgba(0, 122, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 0 80px rgba(0, 122, 255, 0.25), inset 0 3px 6px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.7), 0 0 120px rgba(0, 122, 255, 0.2); } .player-zone-section .discard-zone { border-color: rgba(255, 215, 0, 0.6); background: linear-gradient(155deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.08) 20%, rgba(80, 70, 15, 0.6) 60%, rgba(60, 50, 10, 0.9) 100%), radial-gradient(ellipse at 25% 25%, rgba(255, 215, 0, 0.2) 0%, transparent 70%); box-shadow: 0 12px 36px rgba(255, 215, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(255, 215, 0, 0.2), inset 0 3px 6px rgba(255, 255, 255, 0.1), inset 0 -3px 6px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 215, 0, 0.15); } .player-zone-section .discard-zone:hover { border-color: rgba(255, 215, 0, 0.8); transform: translateY(-4px) scale(1.03) rotateX(1deg); box-shadow: 0 16px 48px rgba(255, 215, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 0 80px rgba(255, 215, 0, 0.25), inset 0 3px 6px rgba(255, 255, 255, 0.15), inset 0 -3px 6px rgba(0, 0, 0, 0.7), 0 0 120px rgba(255, 215, 0, 0.2); } /* Card count display - Compact Premium */ .card-count { position: absolute; bottom: 4px; right: 6px; font-size: 18px; font-weight: 800; font-family: var(--font-mono); z-index: 3; text-shadow: 0 0 12px currentColor, 0 1px 3px rgba(0, 0, 0, 0.9); background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%); padding: 3px 8px; border-radius: 6px; border: 1px solid; min-width: 32px; text-align: center; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 1); padding: 6px 14px; background: linear-gradient(135deg, rgba(90, 163, 240, 0.6) 0%, rgba(90, 163, 240, 0.4) 100%); border-radius: 16px; min-width: 40px; text-align: center; white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 1px solid rgba(90, 163, 240, 0.8); z-index: 10; position: relative; } /* ================================================================= RESPONSIVE DESIGN - MOBILE & TABLET OPTIMIZATION ================================================================= */ /* Extra Large screens (1440px+) - Ultra-wide optimized */ @media (min-width: 1440px) { .battlefield-container { grid-template-columns: 160px 1fr 180px; grid-template-rows: 200px 55px 200px 230px; gap: 18px; padding: 18px; } .field-zone { width: 260px !important; height: 180px !important; min-width: 260px !important; max-width: 260px !important; min-height: 180px !important; max-height: 180px !important; } /* Perfect field containers for large screens */ .field-container { min-height: 160px; max-height: 170px; gap: 15px; padding: 12px; } #player-hand { min-height: 200px !important; max-height: 240px !important; padding: 25px 50px 20px !important; } .card-in-hand { width: 120px !important; height: 168px !important; } #player-hand .card { width: 120px !important; height: 168px !important; margin-right: -35px !important; } /* MASSIVE stat badges for large screens */ .field-zone .battlefield-stat { width: 60px !important; height: 60px !important; font-size: 26px !important; } } /* Small laptops/tablets (max 1024px) - Optimized compact layout */ @media (max-width: 1024px) { .battlefield-container { grid-template-columns: 120px 1fr 140px; grid-template-rows: 145px 42px 145px 180px; gap: 8px; padding: 10px; } /* Compact side panel for smaller screens */ .side-panel { gap: 8px; padding: 12px 8px; } .zone-section-header { padding: 8px 12px; gap: 8px; margin-bottom: 8px; } .player-avatar { width: 36px; height: 36px; } .player-name { font-size: 14px; } .stat-item { font-size: 10px; padding: 2px 6px; } .field-zone { width: 180px !important; height: 130px !important; min-width: 180px !important; max-width: 180px !important; min-height: 130px !important; max-height: 130px !important; } .field-container { min-height: 130px; max-height: 140px; gap: 8px; padding: 8px; } #player-hand { min-height: 170px !important; max-height: 170px !important; padding: 15px 30px 15px !important; } .card-in-hand { width: 100px !important; height: 130px !important; } #player-hand .card { width: 100px !important; height: 130px !important; margin-right: -24px !important; } /* Adjust stat badges for smaller screens */ .field-zone .battlefield-stat { width: 28px !important; height: 28px !important; font-size: 12px !important; } } /* Large screens (1200px-1439px) - Enhanced laptop balance */ @media (max-width: 1439px) and (min-width: 1200px) { .battlefield-container { grid-template-columns: 140px 1fr 160px; grid-template-rows: 170px 50px 170px 210px; gap: 12px; padding: 14px; } .field-zone { width: 220px !important; height: 150px !important; min-width: 220px !important; max-width: 220px !important; min-height: 150px !important; max-height: 150px !important; padding: 6px; margin: 4px; } .field-zone .battlefield-stat { width: 35px !important; height: 35px !important; font-size: 16px !important; } } /* Medium screens (1025px-1199px) - Standard laptop balance */ @media (max-width: 1199px) and (min-width: 1025px) { .battlefield-container { grid-template-columns: 130px 1fr 120px; grid-template-rows: 160px 45px 160px 200px; gap: 10px; padding: 12px; } /* Medium compact side panel */ .side-panel { gap: 10px; padding: 16px 10px; } .zone-section-header { padding: 10px 14px; gap: 10px; margin-bottom: 10px; } .player-avatar { width: 40px; height: 40px; } .player-name { font-size: 15px; } .stat-item { font-size: 10px; padding: 3px 6px; } .field-zone { width: 200px !important; height: 140px !important; min-width: 200px !important; max-width: 200px !important; min-height: 140px !important; max-height: 140px !important; } .field-zone .battlefield-stat { width: 32px !important; height: 32px !important; font-size: 14px !important; } .field-container { min-height: 140px; max-height: 150px; gap: 10px; padding: 10px; } #player-hand { min-height: 190px !important; max-height: 190px !important; padding: 18px 40px 18px !important; } .card-in-hand { width: 110px !important; height: 145px !important; } #player-hand .card { width: 110px !important; height: 145px !important; margin-right: -26px !important; } /* Readable UI elements */ .battle-log { font-size: 10px; padding: 8px; } .battle-log-header { font-size: 11px; margin-bottom: 4px; } .battle-log-entry { font-size: 9px; padding: 3px 5px; margin-bottom: 3px; } .side-panel { gap: 6px; padding: 6px; } .deck-zone, .discard-zone { min-height: 35px; max-height: 50px; padding: 3px; } .card-count { font-size: 10px; margin-top: 3px; padding: 1px 4px; } .zone-section-header { font-size: 7px; padding: 2px 3px; margin-bottom: 2px; } /* Stat badges for medium screens */ .field-zone .battlefield-stat { width: 30px !important; height: 30px !important; font-size: 13px !important; } } /* Small screens (992px) */ @media (max-width: 992px) { .battlefield-container { grid-template-columns: 120px 1fr 100px; grid-template-rows: 120px 20px 120px; padding: 5px; gap: 5px; } /* Ultra-compact side panel for small screens */ .side-panel { gap: 6px; padding: 8px 4px; } .zone-section-header { padding: 6px 8px; gap: 6px; margin-bottom: 6px; flex-direction: column; align-items: stretch; } .player-info-display { flex-direction: column; gap: 8px; align-items: center; } .player-avatar { width: 32px; height: 32px; } .player-name { font-size: 12px; text-align: center; } .player-stats { justify-content: center; flex-wrap: wrap; gap: 4px; } .stat-item { font-size: 9px; padding: 2px 4px; } .zone-section-header h4 { font-size: 10px; text-align: center; } .field-zone { width: 110px !important; height: 130px !important; min-width: 110px !important; max-width: 110px !important; min-height: 130px !important; max-height: 130px !important; } #player-hand { padding: 10px 15px 8px; height: 130px; max-width: calc(100vw - 270px); } .battle-log { padding: 6px; font-size: 8px; } .battle-log-header { font-size: 9px; margin-bottom: 4px; padding: 3px; } .battle-log-entry { margin-bottom: 3px; padding: 3px 4px; font-size: 7px; } .side-panel { gap: 4px; padding: 4px; } .deck-zone, .discard-zone { min-height: 40px; padding: 4px; } .card-count { font-size: 10px; margin-top: 4px; padding: 2px 4px; } .zone-section-header { font-size: 7px; padding: 2px 4px; flex-direction: column; } /* Tablet responsive player info */ .player-info-display { flex-direction: column; gap: 4px; align-items: center; } .player-avatar { width: 24px; height: 24px; } .player-name { font-size: 10px; text-align: center; } .player-stats { justify-content: center; gap: 2px; flex-wrap: wrap; } .stat-item { font-size: 8px; padding: 1px 3px; } /* Adjust card gaps for smaller screens */ .card-in-hand { margin-right: -40px !important; } } /* Tablet portrait */ @media (max-width: 768px) { .battlefield-container { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; grid-template-areas: "battle-log" "opponent-field" "center-area" "player-field" "side-panel"; gap: 8px; padding: 8px; } #player-hand { position: fixed; bottom: 0; left: 0; right: 0; padding: 8px; height: 120px; } .side-panel { flex-direction: row; justify-content: space-around; } } /* Mobile - Ultra compact layout */ @media (max-width: 480px) { .field-zone { min-height: 100px; min-width: 80px; } #player-hand { height: 100px; padding: 5px; } .card-in-hand { width: 60px !important; height: 84px !important; } /* Mobile side panel - minimal info only */ .side-panel { gap: 2px; padding: 2px; } .zone-section-header { padding: 4px; margin-bottom: 4px; flex-direction: column; } .player-info-display { flex-direction: column; gap: 2px; align-items: center; } .player-avatar { width: 20px; height: 20px; } .player-name { font-size: 9px; text-align: center; } .player-stats { display: none; /* Hide stats on mobile to save space */ } .zone-section-header h4 { font-size: 8px; text-align: center; } .deck-zone, .discard-zone { min-height: 30px; padding: 2px; } .card-count { font-size: 8px; padding: 1px 2px; } } /* ================================================================= Z-INDEX HIERARCHY ================================================================= */ /* Base level */ #screen-battle { z-index: 1; } .battlefield-container { z-index: 2; } .field-container { z-index: 3; } .field-zone { z-index: 4; } .card-on-field { z-index: 5; } /* Player area */ #player-hand { z-index: 10; } .card-in-hand { z-index: 11; } .card-in-hand:hover { z-index: 100; } /* UI elements */ #battle-info { z-index: 20; } .action-button { z-index: 21; } /* Overlays and effects */ .battle-effect { z-index: 50; } .damage-number { z-index: 51; } /* ================================================================= ENHANCED TYPOGRAPHY SYSTEM ================================================================= */ /* Import enhanced Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); /* Enhanced typography variables */ :root { /* Enhanced typography - better contrast and readability */ --font-primary: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', monospace; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Enhanced text colors with better contrast */ --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(255, 255, 255, 0.75); --text-tertiary: rgba(255, 255, 255, 0.6); --text-disabled: rgba(255, 255, 255, 0.38); /* Enhanced text shadows for better readability on dark backgrounds */ --text-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.5); --text-shadow-medium: 0 2px 6px rgba(0, 0, 0, 0.6); --text-shadow-strong: 0 3px 10px rgba(0, 0, 0, 0.7); } /* Apply enhanced typography globally in battle screen */ #screen-battle * { font-family: var(--font-primary); text-shadow: var(--text-shadow-soft); } /* Monospace for numbers and stats */ .battlefield-stat, .card-count, .stat-display { font-family: var(--font-mono); font-weight: var(--font-weight-bold); } /* ================================================================= ADVANCED CARD EFFECTS & INTERACTIONS ================================================================= */ /* Card selection and targeting */ .card.selected { border-color: rgba(255, 215, 0, 0.8) !important; box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4), 0 10px 30px rgba(255, 215, 0, 0.5), inset 0 0 20px rgba(255, 215, 0, 0.2) !important; transform: translateY(-5px) scale(1.05) !important; } /* Targeting mode effects */ .targeting-mode .field-zone { border-color: rgba(255, 215, 0, 0.6) !important; background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%) !important; animation: targeting-pulse 1s ease-in-out infinite !important; } @keyframes targeting-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); transform: scale(1); } 50% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); transform: scale(1.02); } } /* Chain reaction effects */ .card.chain-reaction { animation: chain-lightning 0.8s ease-out; } @keyframes chain-lightning { 0%, 100% { filter: brightness(1); } 25% { filter: brightness(2) hue-rotate(60deg); } 50% { filter: brightness(1.5) hue-rotate(120deg); } 75% { filter: brightness(2) hue-rotate(180deg); } } /* Card destruction effect */ .card.destroying { animation: card-destruction 1s ease-in forwards; } @keyframes card-destruction { 0% { transform: scale(1) rotate(0deg); filter: brightness(1); opacity: 1; } 50% { transform: scale(1.2) rotate(5deg); filter: brightness(2) saturate(2); opacity: 0.8; } 100% { transform: scale(0) rotate(180deg); filter: brightness(0); opacity: 0; } } /* Enhanced card summoning effect */ .card.summoning { animation: card-summon 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes card-summon { 0% { transform: scale(0) rotate(360deg); opacity: 0; filter: brightness(3) blur(10px); } 50% { transform: scale(1.3) rotate(180deg); opacity: 0.7; filter: brightness(2) blur(2px); } 100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1) blur(0px); } } /* ================================================================= ENHANCED VISUAL POLISH ================================================================= */ /* Enhanced container depth with atmospheric effects */ .field-container { position: relative; overflow: visible; transform: perspective(1000px) rotateX(2deg); transform-style: preserve-3d; } .field-container::after { content: ''; position: absolute; inset: -15px; background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.15) 70%, transparent 100%), radial-gradient(ellipse at 30% 30%, rgba(124, 77, 255, 0.1) 0%, transparent 40%), radial-gradient(ellipse at 70% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 40%); border-radius: 35px; z-index: -1; animation: battlefield-ambiance 8s ease-in-out infinite; pointer-events: none; filter: blur(5px); } @keyframes battlefield-ambiance { 0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); filter: blur(5px) brightness(1); } 25% { opacity: 0.7; transform: scale(1.02) rotate(1deg); filter: blur(6px) brightness(1.1); } 50% { opacity: 0.8; transform: scale(1.03) rotate(-1deg); filter: blur(4px) brightness(1.05); } 75% { opacity: 0.7; transform: scale(1.01) rotate(0.5deg); filter: blur(5px) brightness(0.95); } } /* Enhanced field card sizing and visibility */ .card-on-field { /* Proper card sizing for 220x160 zones */ width: calc(100% - 24px) !important; height: calc(100% - 24px) !important; max-width: 196px !important; max-height: 136px !important; margin: 12px !important; /* Enhanced card frame with better shadows */ border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 60px rgba(90, 163, 240, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.4) !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } /* Field card hover effects */ .card-on-field:hover { transform: translateY(-4px) scale(1.05) !important; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.8), 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 80px rgba(90, 163, 240, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.5) !important; z-index: 20 !important; /* Better visibility on field */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 50px rgba(124, 77, 255, 0.3) !important; } /* Ultra-large stat badges for maximum visibility */ .field-zone .battlefield-stat { width: 45px !important; height: 45px !important; font-size: 20px !important; font-weight: 900 !important; bottom: 6px !important; } .field-zone .battlefield-attack { bottom: 6px !important; left: 6px !important; } .field-zone .battlefield-health { top: 6px !important; right: 6px !important; } /* Enhanced card image for field cards */ .field-zone .card img, .field-zone .card-image { width: 100% !important; height: 70% !important; object-fit: cover !important; border-radius: 12px 12px 0 0 !important; filter: brightness(1.1) saturate(1.1) !important; } /* Ensure side panel content fits perfectly */ .side-panel > * { width: 100%; flex-shrink: 0; } /* PREMIUM ZONE LABELS - Professional Gaming UI */ .zone-label { position: absolute; top: 8px; left: 12px; font-size: 11px; font-weight: 800; letter-spacing: 2px; z-index: 5; text-transform: uppercase; background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%); padding: 4px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.95); font-family: var(--font-display); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } /* ELITE CARD COUNT DISPLAY - Professional Gaming UI */ .card-count { position: absolute; bottom: 12px; right: 14px; font-size: 32px; font-weight: 900; font-family: var(--font-mono); z-index: 5; text-shadow: 0 0 25px currentColor, 0 0 15px rgba(255, 255, 255, 0.6), 0 3px 6px rgba(0, 0, 0, 0.9), 0 6px 12px rgba(0, 0, 0, 0.7); background: linear-gradient(145deg, rgba(0, 0, 0, 0.85) 0%, rgba(15, 20, 30, 0.9) 50%, rgba(0, 0, 0, 0.95) 100%), linear-gradient(45deg, rgba(124, 77, 255, 0.15) 0%, transparent 60%); padding: 8px 16px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.3); min-width: 60px; text-align: center; backdrop-filter: blur(12px) saturate(130%); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.6); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); animation: professional-count-glow 4s ease-in-out infinite alternate; } @keyframes professional-count-glow { 0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.6); } 50% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 3px 12px rgba(0, 0, 0, 0.6), 0 0 30px rgba(124, 77, 255, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.6); } } /* ULTRA-PREMIUM CARD BACK - Professional 3D Stack Effect */ /* CRITICAL FIX: Hide card-back for hand and field cards to prevent red diamond overlay */ .card-back { width: 65px; height: 90px; border-radius: 10px; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); box-shadow: /* Multiple card stack shadows */ -3px 3px 0 rgba(0, 0, 0, 0.2), -6px 6px 0 rgba(0, 0, 0, 0.15), -9px 9px 0 rgba(0, 0, 0, 0.1), /* Main card shadow */ 0 8px 24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.15), /* Inner effects */ inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.5); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transform-style: preserve-3d; cursor: pointer; z-index: 4; perspective: 1000px; /* CRITICAL FIX: Hide by default to prevent showing on hand/field cards */ display: none !important; } /* Only show card-back for deck and discard zones where it belongs */ .deck-zone .card-back, .discard-zone .card-back { display: block !important; } .card-back::before { content: ""; position: absolute; inset: 3px; background: /* Premium holographic pattern */ conic-gradient(from 45deg at 50% 50%, rgba(90, 163, 240, 0.1) 0deg, rgba(124, 77, 255, 0.1) 90deg, rgba(255, 59, 48, 0.1) 180deg, rgba(255, 215, 0, 0.1) 270deg, rgba(90, 163, 240, 0.1) 360deg), repeating-linear-gradient(45deg, transparent 0px, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 11px, transparent 11px, transparent 20px), repeating-linear-gradient(-45deg, transparent 0px, transparent 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 11px, transparent 11px, transparent 20px); border-radius: 7px; pointer-events: none; animation: holographic 8s linear infinite; } .card-back:hover { transform: rotateY(-8deg) rotateX(4deg) scale(1.08) translateZ(30px); box-shadow: /* Enhanced stack with more depth */ -6px 6px 0 rgba(0, 0, 0, 0.35), -12px 12px 0 rgba(0, 0, 0, 0.3), -18px 18px 0 rgba(0, 0, 0, 0.25), -24px 24px 0 rgba(0, 0, 0, 0.2), -30px 30px 0 rgba(0, 0, 0, 0.15), /* Enhanced main shadows */ 0 16px 48px rgba(0, 0, 0, 0.9), 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(255, 255, 255, 0.3), inset 0 3px 6px rgba(255, 255, 255, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.7); filter: brightness(1.25) saturate(1.3) contrast(1.15); } /* Enhanced deck zone styles */ .deck-zone { background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%); overflow: hidden; } /* OPPONENT DECK ZONE - Elite Red Gaming Theme */ .opponent-zone-section .deck-zone { border-color: rgba(255, 59, 48, 0.6); background: linear-gradient(155deg, rgba(255, 59, 48, 0.15) 0%, rgba(255, 59, 48, 0.08) 20%, rgba(60, 15, 15, 0.6) 60%, rgba(40, 10, 10, 0.9) 100%), radial-gradient(ellipse at 25% 25%, rgba(255, 59, 48, 0.2) 0%, transparent 70%); box-shadow: 0 12px 36px rgba(255, 59, 48, 0.3), 0 6px 18px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(255, 59, 48, 0.2), inset 0 3px 6px rgba(255, 255, 255, 0.1), inset 0 -3px 6px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 59, 48, 0.15); } .opponent-zone-section .deck-zone .card-back { background: linear-gradient(135deg, #5a2020 0%, #3a1515 25%, #2a1010 50%, #1a0808 100%), radial-gradient(ellipse at 30% 30%, rgba(255, 59, 48, 0.25) 0%, transparent 70%); border: 3px solid rgba(255, 59, 48, 0.6); box-shadow: -4px 4px 0 rgba(200, 40, 40, 0.3), -8px 8px 0 rgba(180, 30, 30, 0.25), -12px 12px 0 rgba(160, 20, 20, 0.2), -16px 16px 0 rgba(140, 15, 15, 0.15), 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 50px rgba(255, 59, 48, 0.3), inset 0 3px 6px rgba(255, 255, 255, 0.15); } .opponent-zone-section .deck-zone .card-count { color: #ff6b6b; text-shadow: 0 0 30px rgba(255, 59, 48, 1), 0 0 60px rgba(255, 59, 48, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9); background: linear-gradient(135deg, rgba(80, 15, 15, 0.9) 0%, rgba(60, 10, 10, 0.95) 100%); border-color: rgba(255, 59, 48, 0.5); } /* PLAYER DECK ZONE - Elite Blue Gaming Theme */ .player-zone-section .deck-zone { border-color: rgba(0, 122, 255, 0.6); background: linear-gradient(155deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 122, 255, 0.08) 20%, rgba(15, 40, 80, 0.6) 60%, rgba(10, 25, 60, 0.9) 100%), radial-gradient(ellipse at 25% 25%, rgba(0, 122, 255, 0.2) 0%, transparent 70%); box-shadow: 0 12px 36px rgba(0, 122, 255, 0.3), 0 6px 18px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(0, 122, 255, 0.2), inset 0 3px 6px rgba(255, 255, 255, 0.1), inset 0 -3px 6px rgba(0, 0, 0, 0.6), 0 0 80px rgba(0, 122, 255, 0.15); } .player-zone-section .deck-zone .card-back { background: linear-gradient(135deg, #1a3a5a 0%, #152a4a 25%, #10203a 50%, #08152a 100%), radial-gradient(ellipse at 30% 30%, rgba(0, 122, 255, 0.25) 0%, transparent 70%); border: 3px solid rgba(0, 122, 255, 0.6); box-shadow: -4px 4px 0 rgba(40, 80, 160, 0.3), -8px 8px 0 rgba(30, 60, 140, 0.25), -12px 12px 0 rgba(20, 40, 120, 0.2), -16px 16px 0 rgba(15, 30, 100, 0.15), 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 50px rgba(0, 122, 255, 0.3), inset 0 3px 6px rgba(255, 255, 255, 0.15); } .player-zone-section .deck-zone .card-count { color: #4da6ff; text-shadow: 0 0 30px rgba(0, 122, 255, 1), 0 0 60px rgba(0, 122, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9); background: linear-gradient(135deg, rgba(15, 50, 100, 0.9) 0%, rgba(10, 35, 80, 0.95) 100%); border-color: rgba(0, 122, 255, 0.5); } /* Add stacked card effect for deck */ .deck-zone::before, .deck-zone::after { content: ""; position: absolute; width: 60px; height: 84px; background: inherit; border-radius: 8px; border: inherit; z-index: 1; } .deck-zone::before { top: 50%; left: 50%; transform: translate(-48%, -48%); opacity: 0.5; } .deck-zone::after { top: 50%; left: 50%; transform: translate(-52%, -52%); opacity: 0.3; border: 2px solid rgba(124, 77, 255, 0.5); border-radius: 8px; transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } /* Enhanced discard zone styles */ .discard-zone { background: linear-gradient(135deg, rgba(40, 40, 40, 0.6) 0%, rgba(20, 20, 20, 0.8) 100%); position: relative; } .opponent-zone-section .discard-zone { border-color: rgba(255, 140, 0, 0.3); box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4); } /* Optimize battlefield for perfect screen fit */ .field-container { justify-content: space-evenly; align-items: center; overflow: visible; } /* Enhanced zone selection feedback */ .field-zone.selected { border-color: rgba(255, 215, 0, 0.8) !important; box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(255, 215, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 0 2px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3) !important; animation: zone-selection-pulse 1.5s ease-in-out infinite; } @keyframes zone-selection-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } /* ================================================================= PLAYER STATS AREA - RELOCATED TO BOTTOM RIGHT ================================================================= */ /* Player stats container in bottom right */ .player-stats-container { position: absolute; bottom: 20px; right: 20px; background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 153, 204, 0.1) 100%), linear-gradient(180deg, rgba(5, 10, 20, 0.95) 0%, rgba(10, 20, 30, 0.9) 100%), radial-gradient(ellipse at center, rgba(0, 212, 255, 0.1) 0%, transparent 70%); backdrop-filter: blur(20px) saturate(180%); border: 3px solid rgba(0, 212, 255, 0.7); border-radius: 20px; padding: 15px 20px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(0, 212, 255, 0.2), 0 0 60px rgba(0, 212, 255, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2); min-width: 180px; z-index: 100; } /* Player stat items */ .player-stat-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 8px 12px; background: rgba(0, 0, 0, 0.3); border-radius: 10px; border: 1px solid rgba(0, 212, 255, 0.3); transition: all var(--transition-fast); } .player-stat-item:last-child { margin-bottom: 0; } .player-stat-item:hover { background: rgba(0, 212, 255, 0.1); border-color: rgba(0, 212, 255, 0.5); transform: translateX(2px); } .player-stat-label { font-size: 14px; font-weight: 600; color: rgba(0, 212, 255, 0.9); text-transform: uppercase; letter-spacing: 0.5px; } .player-stat-value { font-size: 18px; font-weight: 900; color: white; text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); font-family: var(--font-mono); } /* PREMIUM ZONE SEPARATOR - Animated Energy Line */ .zone-separator { height: 4px; background: linear-gradient(90deg, transparent 0%, rgba(124, 77, 255, 0.4) 15%, rgba(255, 215, 0, 0.5) 35%, rgba(124, 77, 255, 0.6) 50%, rgba(255, 215, 0, 0.5) 65%, rgba(124, 77, 255, 0.4) 85%, transparent 100%); margin: 20px 0; position: relative; overflow: hidden; border-radius: 2px; box-shadow: 0 0 30px rgba(124, 77, 255, 0.4), 0 0 60px rgba(255, 215, 0, 0.2); animation: separator-pulse 3s ease-in-out infinite; } .zone-separator::before { content: "◆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, rgba(12, 14, 20, 0.98) 0%, rgba(18, 20, 28, 0.95) 100%), radial-gradient(ellipse at center, rgba(255, 215, 0, 0.2) 0%, transparent 70%); padding: 4px 12px; font-size: 16px; color: rgba(255, 215, 0, 0.9); text-shadow: 0 0 20px rgba(255, 215, 0, 0.8); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 50%; box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2); font-weight: 700; letter-spacing: 1px; color: rgba(90, 163, 240, 0.7); text-shadow: 0 0 8px rgba(90, 163, 240, 0.5); border: 1px solid rgba(90, 163, 240, 0.2); border-radius: 4px; backdrop-filter: blur(4px); } /* Empty discard pile visual indicator */ .discard-zone[data-card-count="0"] .card-back { opacity: 0.2; border-style: dashed; } /* Enhanced deck/discard zone specific styling */ .opponent-zone-section .deck-zone { border-color: rgba(255, 59, 48, 0.2); box-shadow: inset 0 0 20px rgba(255, 59, 48, 0.08), 0 2px 8px rgba(0, 0, 0, 0.3); } .opponent-zone-section .deck-zone .card-back { background: linear-gradient(135deg, #2d1a1a 0%, #1a0f0f 100%), radial-gradient(ellipse at center, rgba(255, 59, 48, 0.1) 0%, transparent 70%); border: 1px solid rgba(255, 59, 48, 0.3); width: 40px; height: 56px; border-radius: 6px; position: relative; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.25s ease; transform-style: preserve-3d; } .opponent-zone-section .deck-zone .card-count { color: #ff453a; border-color: rgba(255, 59, 48, 0.4); text-shadow: 0 0 12px rgba(255, 59, 48, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9); box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .opponent-zone-section .discard-zone { border-color: rgba(255, 159, 10, 0.2); box-shadow: inset 0 0 20px rgba(255, 159, 10, 0.08), 0 2px 8px rgba(0, 0, 0, 0.3); } .opponent-zone-section .discard-zone .card-back { background: linear-gradient(135deg, rgba(70, 50, 25, 0.8) 0%, rgba(50, 35, 20, 0.9) 100%), radial-gradient(ellipse at center, rgba(255, 159, 10, 0.2) 0%, transparent 60%), linear-gradient(45deg, rgba(255, 140, 0, 0.05) 0%, transparent 50%); border: 2px dashed rgba(255, 159, 10, 0.6); opacity: 0.8; } .opponent-zone-section .discard-zone .card-count { color: #ff9f0a; border-color: rgba(255, 159, 10, 0.4); text-shadow: 0 0 12px rgba(255, 159, 10, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9); box-shadow: 0 2px 8px rgba(255, 159, 10, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .player-zone-section .deck-zone { border-color: rgba(0, 122, 255, 0.2); box-shadow: inset 0 0 20px rgba(0, 122, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.3); } .player-zone-section .deck-zone .card-back { background: linear-gradient(135deg, #1a2d42 0%, #0f1a30 100%), radial-gradient(ellipse at center, rgba(0, 122, 255, 0.15) 0%, transparent 60%), linear-gradient(45deg, rgba(64, 156, 255, 0.02) 0%, transparent 50%); border: 2px solid rgba(0, 122, 255, 0.4); } .player-zone-section .deck-zone .card-count { color: #0a84ff; border-color: rgba(0, 122, 255, 0.4); text-shadow: 0 0 12px rgba(0, 122, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9); box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .player-zone-section .discard-zone { border-color: rgba(255, 214, 10, 0.2); box-shadow: inset 0 0 20px rgba(255, 214, 10, 0.08), 0 2px 8px rgba(0, 0, 0, 0.3); } .player-zone-section .discard-zone .card-back { background: linear-gradient(135deg, rgba(75, 60, 25, 0.8) 0%, rgba(55, 45, 20, 0.9) 100%), radial-gradient(ellipse at center, rgba(255, 214, 10, 0.2) 0%, transparent 60%), linear-gradient(45deg, rgba(255, 215, 0, 0.05) 0%, transparent 50%); border: 2px dashed rgba(255, 214, 10, 0.6); opacity: 0.8; } .player-zone-section .discard-zone .card-count { color: #ffd60a; border-color: rgba(255, 214, 10, 0.4); text-shadow: 0 0 12px rgba(255, 214, 10, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9); box-shadow: 0 2px 8px rgba(255, 214, 10, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Multiple card stack effect for deck zones */ .deck-zone .card-back::before, .deck-zone .card-back::after { content: ""; position: absolute; width: 100%; height: 100%; background: inherit; border-radius: inherit; border: inherit; z-index: -1; transition: inherit; } .deck-zone .card-back::before { top: -2px; left: -1px; opacity: 0.7; transform: rotate(-1deg); } .deck-zone .card-back::after { top: -4px; left: -2px; opacity: 0.4; transform: rotate(-2deg); } /* Empty discard pile visual indicator */ .discard-zone[data-count="0"] .card-back { opacity: 0.3; background: linear-gradient(135deg, rgba(40, 40, 40, 0.4) 0%, rgba(20, 20, 20, 0.6) 100%) !important; border-style: dashed !important; } .discard-zone[data-count]:not([data-count="0"]) .card-back { opacity: 0.8; border-style: solid !important; } /* ================================================================= UNIVERSAL CARD SELECTION FIX - FOR ALL SCREENS ================================================================= */ /* Fix card selection glitches across all screens */ .card { isolation: isolate !important; pointer-events: all !important; user-select: none !important; } /* Prevent hover state bleed-through */ .card:hover { z-index: 9999 !important; position: relative !important; } /* Collection screen card hover fix */ .collection-grid .card:hover, .card-list .card:hover, .deck-cards .card:hover { transform: translateY(-10px) scale(1.1) !important; z-index: 9999 !important; margin: 0 10px !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 60px rgba(90, 163, 240, 0.6) !important; } /* Prevent overlapping card interactions - BATTLE SCREEN ONLY */ #screen-battle:has(.card:hover) .card:not(:hover) { pointer-events: none !important; opacity: 0.85 !important; filter: brightness(0.8) !important; } /* Enhanced field adjustments for better spacing */ .field-container { gap: 12px !important; } /* Ensure cards in zones are properly sized */ .field-zone .card { width: calc(100% - 16px) !important; height: calc(100% - 16px) !important; max-width: 260px !important; max-height: 170px !important; margin: 8px !important; } /* ================================================================= ULTRA-PREMIUM DISCARD PILE VISUALIZATION ================================================================= */ /* ULTRA-PREMIUM DISCARD PILE - Professional Card Stack */ .discard-pile-top { width: 65px; height: 90px; border-radius: 10px; position: absolute; left: 16px; top: 50%; transform: translateY(-50%) rotate(-5deg); background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%), url('data:image/svg+xml,'); border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: /* Scattered card effect */ 3px -3px 0 rgba(0, 0, 0, 0.2), 6px -6px 0 rgba(0, 0, 0, 0.15), 9px -9px 0 rgba(0, 0, 0, 0.1), /* Main shadows */ 0 8px 24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.1); opacity: 0.9; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; cursor: pointer; z-index: 4; } .discard-pile-top:hover { transform: translateY(-50%) rotate(-3deg) scale(1.1); opacity: 1; box-shadow: /* Enhanced scattered effect */ 4px -4px 0 rgba(0, 0, 0, 0.25), 8px -8px 0 rgba(0, 0, 0, 0.2), 12px -12px 0 rgba(0, 0, 0, 0.15), 16px -16px 0 rgba(0, 0, 0, 0.1), /* Main shadows */ 0 12px 36px rgba(0, 0, 0, 0.8), 0 6px 18px rgba(0, 0, 0, 0.6); filter: brightness(1.1) contrast(1.05); } /* Color variations for opponent/player discard piles */ .opponent-zone-section .discard-pile-top { background: linear-gradient(135deg, #5a3030 0%, #3a2020 50%, #2a1010 100%), url('data:image/svg+xml,'); border-color: rgba(255, 140, 0, 0.3); } .player-zone-section .discard-pile-top { background: linear-gradient(135deg, #5a5030 0%, #3a3020 50%, #2a2010 100%), url('data:image/svg+xml,'); border-color: rgba(255, 215, 0, 0.3); } /* ================================================================= ADDITIONAL ANIMATIONS AND EFFECTS ================================================================= */ @keyframes holographic { 0% { background-position: 0% 50%, 0% 50%, 0% 50%; filter: hue-rotate(0deg) brightness(1); } 50% { filter: hue-rotate(10deg) brightness(1.1); } 100% { background-position: 100% 50%, -100% 50%, 100% 50%; filter: hue-rotate(0deg) brightness(1); } } @keyframes separator-pulse { 0%, 100% { opacity: 0.7; filter: brightness(1); box-shadow: 0 0 30px rgba(124, 77, 255, 0.4), 0 0 60px rgba(255, 215, 0, 0.2); } 50% { opacity: 1; filter: brightness(1.3); box-shadow: 0 0 40px rgba(124, 77, 255, 0.6), 0 0 80px rgba(255, 215, 0, 0.3); } } /* ================================================================= FINAL UI POLISH & VISUAL CONSISTENCY ENHANCEMENTS ================================================================= */ /* Premium scrollbar styling for battle log */ .battle-log::-webkit-scrollbar { width: 8px; } .battle-log::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); } .battle-log::-webkit-scrollbar-thumb { background: linear-gradient(135deg, rgba(90, 163, 240, 0.6) 0%, rgba(124, 77, 255, 0.5) 100%); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .battle-log::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, rgba(90, 163, 240, 0.8) 0%, rgba(124, 77, 255, 0.7) 100%); } /* Enhanced battle log entries */ .battle-log-entry { transition: all 0.3s ease; border-radius: 6px; margin: 2px 0; } .battle-log-entry:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(3px); box-shadow: 2px 0 8px rgba(90, 163, 240, 0.3); } /* Premium tooltip styling */ [data-tooltip] { position: relative; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, rgba(20, 25, 40, 0.95) 0%, rgba(15, 20, 35, 0.98) 100%); color: white; padding: 8px 12px; border-radius: 8px; font-size: 12px; white-space: nowrap; z-index: 1000; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); backdrop-filter: blur(16px); } /* Smooth transitions for all interactive elements */ button, .card, .field-zone, .deck-zone, .discard-zone { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } /* Enhanced focus states for accessibility */ button:focus, .card:focus, .field-zone:focus { outline: 2px solid rgba(90, 163, 240, 0.8); outline-offset: 2px; } /* Professional loading states */ .loading { position: relative; overflow: hidden; } /* ================================================================= ELITE TURN TIMER SYSTEM - ULTRA-PREMIUM DESIGN ================================================================= */ .elite-turn-timer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; z-index: 20; animation: timer-intro 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); display: block !important; /* Ensure timer is visible when active */ } @keyframes timer-intro { 0% { transform: translate(-50%, -50%) scale(0) rotate(-180deg); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1.1) rotate(0deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; } } /* Timer SVG Container */ .timer-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.8)); } /* Timer Track (Background Circle) */ .timer-track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 6; stroke-linecap: round; } /* Timer Progress (Animated Circle) */ .timer-progress { fill: none; stroke: url(#timer-gradient); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 314.159; /* 2 * PI * radius */ stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke 0.3s ease; filter: drop-shadow(0 0 8px currentColor); } /* Timer Glow Effect */ .timer-glow { fill: none; stroke: rgba(90, 163, 240, 0.4); stroke-width: 12; stroke-linecap: round; opacity: 0; animation: timer-glow-pulse 2s ease-in-out infinite; filter: blur(8px); } @keyframes timer-glow-pulse { 0%, 100% { opacity: 0; transform: scale(0.95); } 50% { opacity: 0.6; transform: scale(1.05); } } /* Timer Display */ .timer-display { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 2; } .timer-value { display: block; font-size: 36px; font-weight: 900; color: rgba(255, 255, 255, 0.95); text-shadow: 0 0 20px rgba(90, 163, 240, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9); font-family: var(--font-mono); line-height: 1; animation: timer-value-pulse 1s ease-in-out infinite; } @keyframes timer-value-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .timer-label { display: block; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; } /* Warning Pulse Effect */ .timer-warning-pulse { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 59, 48, 0.4) 0%, transparent 70%); opacity: 0; pointer-events: none; } /* Timer States */ .elite-turn-timer[data-urgency="low"] .timer-progress { stroke: #00d4ff; } .elite-turn-timer[data-urgency="medium"] .timer-progress { stroke: #ffd700; animation: timer-medium-pulse 2s ease-in-out infinite; } .elite-turn-timer[data-urgency="high"] .timer-progress { stroke: #ff3b30; animation: timer-urgent-pulse 1s ease-in-out infinite; } .elite-turn-timer[data-urgency="critical"] { animation: timer-shake 0.5s ease-in-out infinite; } .elite-turn-timer[data-urgency="critical"] .timer-progress { stroke: #ff1744; filter: drop-shadow(0 0 12px #ff1744); } .elite-turn-timer[data-urgency="critical"] .timer-value { color: #ff1744; text-shadow: 0 0 25px #ff1744, 0 0 50px rgba(255, 23, 68, 0.8), 0 3px 6px rgba(0, 0, 0, 0.9); animation: timer-critical-flash 0.5s ease-in-out infinite; } .elite-turn-timer[data-urgency="critical"] .timer-warning-pulse { opacity: 1; animation: warning-pulse 0.5s ease-out infinite; } /* Animations */ @keyframes timer-medium-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.02); opacity: 0.9; } } @keyframes timer-urgent-pulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.03); filter: brightness(1.2); } } @keyframes timer-shake { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 25% { transform: translate(-48%, -50%) rotate(-1deg); } 75% { transform: translate(-52%, -50%) rotate(1deg); } } @keyframes timer-critical-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes warning-pulse { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } /* SVG Gradient Definition */ .timer-svg defs { /* This will be added dynamically via JavaScript */ } /* Timer Expired State */ .elite-turn-timer[data-expired="true"] { animation: timer-expired 0.5s ease-out forwards; } @keyframes timer-expired { 0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0) rotate(180deg); opacity: 0; } } .loading::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); animation: loading-shimmer 1.5s infinite; } @keyframes loading-shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Ultra-smooth animations for battlefield entrance */ @keyframes battlefield-enter { from { opacity: 0; transform: scale(0.95) translateY(20px); filter: blur(5px); } to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } .battlefield-container { animation: battlefield-enter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Premium error states */ .error { background: linear-gradient(135deg, rgba(255, 59, 48, 0.1) 0%, rgba(255, 59, 48, 0.05) 100%); border: 1px solid rgba(255, 59, 48, 0.3); color: rgba(255, 100, 100, 0.9); } /* Success states */ .success { background: linear-gradient(135deg, rgba(52, 199, 89, 0.1) 0%, rgba(52, 199, 89, 0.05) 100%); border: 1px solid rgba(52, 199, 89, 0.3); color: rgba(100, 255, 150, 0.9); } /* Final visual consistency improvements */ * { box-sizing: border-box; } /* Ensure text remains readable */ .battlefield-container * { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } /* Professional selection states */ .selected { outline: 3px solid rgba(255, 215, 0, 0.8); outline-offset: 2px; filter: brightness(1.2) saturate(1.2); } /* Enhanced contrast for better readability */ .high-contrast { filter: contrast(1.2) brightness(1.1); } /* Premium backdrop blur effects */ .backdrop-blur { backdrop-filter: blur(20px) saturate(180%); } /* ================================================================= COMPREHENSIVE CARD PREVIEW SYSTEM ================================================================= */ /* Card Preview Active State - When a card is being played */ .card-preview-active { position: relative !important; z-index: 999 !important; transform: scale(1.15) translateY(-20px) !important; animation: card-preview-pulse 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important; border: 4px solid rgba(255, 215, 0, 0.9) !important; box-shadow: 0 0 80px rgba(255, 215, 0, 0.8), 0 0 120px rgba(255, 215, 0, 0.6), 0 0 160px rgba(255, 215, 0, 0.4), 0 15px 50px rgba(0, 0, 0, 0.7), inset 0 0 40px rgba(255, 215, 0, 0.3) !important; filter: brightness(1.3) saturate(1.4) !important; } /* Player Card Preview - Blue/Cyan Theme */ .card-preview-active.player-preview { border-color: rgba(0, 212, 255, 0.9) !important; box-shadow: 0 0 80px rgba(0, 212, 255, 0.8), 0 0 120px rgba(0, 212, 255, 0.6), 0 0 160px rgba(0, 212, 255, 0.4), 0 15px 50px rgba(0, 0, 0, 0.7), inset 0 0 40px rgba(0, 212, 255, 0.3) !important; } /* Opponent Card Preview - Red Theme */ .card-preview-active.opponent-preview { border-color: rgba(255, 23, 68, 0.9) !important; box-shadow: 0 0 80px rgba(255, 23, 68, 0.8), 0 0 120px rgba(255, 23, 68, 0.6), 0 0 160px rgba(255, 23, 68, 0.4), 0 15px 50px rgba(0, 0, 0, 0.7), inset 0 0 40px rgba(255, 23, 68, 0.3) !important; } @keyframes card-preview-pulse { 0% { transform: scale(1) translateY(0px); filter: brightness(1) saturate(1); } 50% { transform: scale(1.25) translateY(-30px); filter: brightness(1.5) saturate(1.8); } 100% { transform: scale(1.15) translateY(-20px); filter: brightness(1.3) saturate(1.4); } } /* Recently Played Card Effect - Subtle ongoing highlight */ .card-recently-played { position: relative !important; animation: recently-played-glow 3s ease-out !important; } .card-recently-played.player-recent { box-shadow: 0 0 30px rgba(0, 212, 255, 0.4), 0 5px 20px rgba(0, 0, 0, 0.3) !important; border-color: rgba(0, 212, 255, 0.6) !important; } .card-recently-played.opponent-recent { box-shadow: 0 0 30px rgba(255, 23, 68, 0.4), 0 5px 20px rgba(0, 0, 0, 0.3) !important; border-color: rgba(255, 23, 68, 0.6) !important; } @keyframes recently-played-glow { 0% { box-shadow: 0 0 60px currentColor, 0 10px 30px rgba(0, 0, 0, 0.5); filter: brightness(1.4); } 50% { box-shadow: 0 0 40px currentColor, 0 8px 25px rgba(0, 0, 0, 0.4); filter: brightness(1.2); } 100% { box-shadow: 0 0 20px currentColor, 0 5px 15px rgba(0, 0, 0, 0.3); filter: brightness(1.1); } } /* ================================================================= BATTLEFIELD-CENTERED CARD PREVIEW OVERLAY SYSTEM ================================================================= */ /* Main Battlefield Card Preview Overlay - Quick and Prominent */ .battlefield-card-preview-overlay { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 9999 !important; pointer-events: none !important; animation: battlefield-preview-enter 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important; } /* Quick backdrop blur just around the card */ .battlefield-card-preview-overlay::before { content: '' !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: radial-gradient( ellipse 600px 400px at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.9) 100% ) !important; backdrop-filter: blur(8px) !important; z-index: -1 !important; animation: backdrop-fade-in 0.3s ease-out forwards !important; } @keyframes battlefield-preview-enter { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotateY(-180deg); filter: blur(10px) brightness(0); } 60% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1) rotateY(10deg); filter: blur(2px) brightness(1.4); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateY(0deg); filter: blur(0px) brightness(1.2); } } @keyframes backdrop-fade-in { 0% { opacity: 0; backdrop-filter: blur(0px); } 100% { opacity: 1; backdrop-filter: blur(8px); } } /* Enhanced Quick Preview Card */ .battlefield-preview-card { position: relative !important; width: 350px !important; height: 480px !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 100px currentColor, 0 0 150px currentColor, inset 0 3px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.6) !important; border: 4px solid rgba(255, 215, 0, 0.9) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%), linear-gradient(145deg, #2d3341 0%, #1a1e28 100%) !important; } /* Player Card Preview - Blue Theme */ .battlefield-preview-card.player-preview { border-color: rgba(0, 212, 255, 0.95) !important; color: rgba(0, 212, 255, 0.8) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 120px rgba(0, 212, 255, 0.9), 0 0 180px rgba(0, 212, 255, 0.6), inset 0 3px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.6) !important; } /* Opponent Card Preview - Red Theme */ .battlefield-preview-card.opponent-preview { border-color: rgba(255, 23, 68, 0.95) !important; color: rgba(255, 23, 68, 0.8) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 120px rgba(255, 23, 68, 0.9), 0 0 180px rgba(255, 23, 68, 0.6), inset 0 3px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.6) !important; } /* Quick Preview Player Indicator */ .battlefield-preview-player-indicator { position: absolute !important; top: -50px !important; left: 50% !important; transform: translateX(-50%) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%), linear-gradient(145deg, rgba(20, 24, 36, 0.95) 0%, rgba(10, 14, 26, 0.98) 100%) !important; border: 2px solid currentColor !important; border-radius: 20px !important; padding: 8px 20px !important; font-size: 16px !important; font-weight: 800 !important; color: inherit !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important; backdrop-filter: blur(10px) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 30px currentColor, inset 0 2px 0 rgba(255, 255, 255, 0.3) !important; white-space: nowrap !important; } /* Enhanced card text readability in preview */ .battlefield-preview-card .card-name { font-size: 24px !important; font-weight: 900 !important; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9) !important; background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%) !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } .battlefield-preview-card .card-text, .battlefield-preview-card .card-ability { font-size: 16px !important; line-height: 1.4 !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; color: rgba(255, 255, 255, 0.95) !important; } /* Fade out animation */ @keyframes battlefield-preview-exit { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotateY(0deg); filter: blur(0px) brightness(1.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) rotateY(90deg); filter: blur(8px) brightness(0.5); } } /* Preview Card Text Enhancement */ .spell-event-preview-card .card-text, .spell-event-preview-card .card-ability { font-size: 18px !important; line-height: 1.4 !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; color: rgba(255, 255, 255, 0.95) !important; } /* Preview Card Name Enhancement */ .spell-event-preview-card .card-name { font-size: 28px !important; font-weight: 900 !important; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9) !important; background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important; background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Preview Player Name Indicator */ .spell-event-preview-player-indicator { position: absolute !important; top: -60px !important; left: 50% !important; transform: translateX(-50%) !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%), linear-gradient(145deg, rgba(20, 24, 36, 0.9) 0%, rgba(10, 14, 26, 0.95) 100%) !important; border: 2px solid rgba(255, 215, 0, 0.6) !important; border-radius: 25px !important; padding: 12px 25px !important; font-size: 18px !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.9) !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; backdrop-filter: blur(10px) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.2) !important; } .spell-event-preview-player-indicator.player-indicator { border-color: rgba(0, 212, 255, 0.8) !important; color: rgba(0, 212, 255, 0.95) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 212, 255, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2) !important; } .spell-event-preview-player-indicator.opponent-indicator { border-color: rgba(255, 23, 68, 0.8) !important; color: rgba(255, 23, 68, 0.95) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 23, 68, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2) !important; } /* ================================================================= BATTLEFIELD ENTRY EFFECTS FOR SUMMONS ================================================================= */ /* Summon Entry Preview */ .summon-entry-preview { position: relative !important; animation: summon-entry-effect 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } .summon-entry-preview.player-summon { box-shadow: 0 0 80px rgba(0, 212, 255, 0.7), 0 15px 50px rgba(0, 0, 0, 0.6) !important; border: 3px solid rgba(0, 212, 255, 0.8) !important; } .summon-entry-preview.opponent-summon { box-shadow: 0 0 80px rgba(255, 23, 68, 0.7), 0 15px 50px rgba(0, 0, 0, 0.6) !important; border: 3px solid rgba(255, 23, 68, 0.8) !important; } @keyframes summon-entry-effect { 0% { transform: scale(0) rotate(180deg); opacity: 0; filter: brightness(3) blur(15px); } 30% { transform: scale(1.3) rotate(90deg); opacity: 0.7; filter: brightness(2) blur(8px); } 70% { transform: scale(0.9) rotate(-10deg); opacity: 0.9; filter: brightness(1.5) blur(3px); } 100% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1.2) blur(0px); } } /* ================================================================= CARD PLAYING FROM HAND EFFECTS ================================================================= */ /* Hand Card Playing Effect */ .hand-card-playing { position: relative !important; z-index: 999 !important; animation: hand-card-playing-effect 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important; pointer-events: none !important; } @keyframes hand-card-playing-effect { 0% { transform: scale(1) translateY(0px); opacity: 1; filter: brightness(1); } 50% { transform: scale(1.2) translateY(-30px); opacity: 0.8; filter: brightness(1.5); } 100% { transform: scale(0.8) translateY(-60px); opacity: 0; filter: brightness(2); } } /* ================================================================= PREMIUM PARTICLE EFFECTS FOR CARD PREVIEWS ================================================================= */ /* Magical Particle Effect */ .card-preview-particles::before { content: ''; position: absolute !important; inset: -20px !important; background: radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.4) 2px, transparent 3px), radial-gradient(circle at 80% 40%, rgba(255, 215, 0, 0.3) 1px, transparent 2px), radial-gradient(circle at 40% 80%, rgba(255, 215, 0, 0.4) 2px, transparent 3px), radial-gradient(circle at 90% 90%, rgba(255, 215, 0, 0.3) 1px, transparent 2px), radial-gradient(circle at 10% 60%, rgba(255, 215, 0, 0.4) 2px, transparent 3px) !important; background-size: 40px 40px, 30px 30px, 35px 35px, 25px 25px, 45px 45px !important; animation: particle-float 4s linear infinite !important; pointer-events: none !important; border-radius: inherit !important; } @keyframes particle-float { 0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; opacity: 0.6; } 50% { background-position: 50% 50%, -30% 70%, 60% -20%, 80% 120%, -10% 90%; opacity: 1; } 100% { background-position: 100% 100%, -60% 140%, 120% -40%, 160% 240%, -20% 180%; opacity: 0.6; } } /* ================================================================= RESPONSIVE ADJUSTMENTS FOR CARD PREVIEWS ================================================================= */ /* Mobile Adjustments for NEW Battlefield Preview */ @media (max-width: 768px) { .battlefield-preview-card { width: 280px !important; height: 380px !important; } .battlefield-preview-card .card-name { font-size: 20px !important; } .battlefield-preview-card .card-text, .battlefield-preview-card .card-ability { font-size: 14px !important; } .battlefield-preview-player-indicator { font-size: 14px !important; padding: 6px 16px !important; top: -40px !important; } /* Legacy previews - smaller on mobile */ .spell-event-preview-card { width: 300px !important; height: 400px !important; } .spell-event-preview-card .card-name { font-size: 22px !important; } .spell-event-preview-card .card-text, .spell-event-preview-card .card-ability { font-size: 14px !important; } .card-preview-active { transform: scale(1.08) translateY(-15px) !important; } } /* Tablet Adjustments for NEW Battlefield Preview */ @media (max-width: 1024px) { .battlefield-preview-card { width: 320px !important; height: 440px !important; } .battlefield-preview-card .card-name { font-size: 22px !important; } .battlefield-preview-player-indicator { font-size: 15px !important; padding: 7px 18px !important; top: -45px !important; } /* Legacy previews */ .spell-event-preview-card { width: 350px !important; height: 480px !important; } .card-preview-active { transform: scale(1.12) translateY(-18px) !important; } }