/* ==========================================
   STABILITY FIXES - Visual Consistency Engine
   v1.0 - Correções de Estabilidade Visual
   ==========================================
   
   Este arquivo corrige problemas específicos de:
   - Tremedeira (jitter)
   - Elementos desalinhados
   - Animações problemáticas
   - Layout shifts
   ========================================== */

/* ==========================================
   1. MODAL STABILITY OVERRIDES
   ========================================== */

/* Base modal - fixed positioning, never moves */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 10000;
    /* Prevent layout shift */
    contain: layout style;
}

.modal.active {
    display: flex;
}

/* Modal content - locked dimensions */
.modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    /* CRITICAL: Flex column with internal scroll */
    display: flex;
    flex-direction: column;
    /* Prevent content from pushing modal */
    overflow: hidden;
    /* Smooth appearance without layout shift */
    transform-origin: center center;
}

/* Modal body must scroll internally */
.modal-content > *:not(.close-modal):not(.close-modal-btn) {
    flex-shrink: 0;
}

/* If modal has scrollable content, this is where it goes */
.modal-scroll-area,
.expedition-result,
.creature-detail,
.battle-result {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* ==========================================
   2. CARD STABILITY OVERRIDES
   ========================================== */

/* Cards - 3 Zone Layout (Header | Body | Footer) */
.creature-card {
    /* Use flex column, NOT aspect-ratio */
    display: flex !important;
    flex-direction: column !important;
    /* GPU acceleration for smooth hover */
    transform: translateZ(0);
    will-change: transform;
    /* Allow content to define height */
    overflow: visible;
}

/* Card Header - Fixed height zone */
.creature-card .card-header {
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Card Body - Flexible zone with image + name */
.creature-card .card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 80px !important;
    overflow: hidden !important;
}

/* Card image container - flexible, centers content */
.creature-card .card-image {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 60px !important;
    padding: 8px !important;
    overflow: hidden !important;
}

/* Card image - NEVER cut off, always contained */
.creature-card .card-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Card Name - Fixed at bottom of body */
.creature-card .card-name {
    flex-shrink: 0 !important;
    text-align: center !important;
    padding: 4px 8px 6px !important;
}

/* Card Footer - Fixed height zone with stats */
.creature-card .card-footer {
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Card Stats - Equal width, side by side */
.creature-card .card-stat {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
}

/* Card hover - ONLY transform, never size */
.creature-card:hover {
    transform: translateY(-6px) scale(1.03) translateZ(0) !important;
}

/* ==========================================
   3. ANIMATION SAFETY OVERRIDES
   ========================================== */

/* FORBIDDEN: Animations that cause layout shift */
/* Override any animation that changes layout properties */

/* Safe pulse - only uses transform */
@keyframes safe-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.02);
        opacity: 0.95;
    }
}

/* Safe glow - only uses filter/box-shadow */
@keyframes safe-glow-pulse {
    0%, 100% { 
        filter: drop-shadow(0 0 5px currentColor);
    }
    50% { 
        filter: drop-shadow(0 0 15px currentColor);
    }
}

/* Override problematic newItemPulse */
.inventory-item.new-item {
    animation: safe-glow-pulse 2s ease-in-out infinite;
    /* Remove any scale animation that could cause jitter */
}

/* Override shake animations on body - make them smoother */
body.shake {
    animation: safe-screen-shake 0.4s ease-in-out;
}

@keyframes safe-screen-shake {
    0%, 100% { transform: translateX(0) translateZ(0); }
    20% { transform: translateX(-3px) translateZ(0); }
    40% { transform: translateX(3px) translateZ(0); }
    60% { transform: translateX(-2px) translateZ(0); }
    80% { transform: translateX(2px) translateZ(0); }
}

/* ==========================================
   4. BUTTON STABILITY
   ========================================== */

/* Buttons must have stable dimensions */
.btn,
button[class*="btn"] {
    /* Fixed minimum dimensions */
    min-height: 36px;
    min-width: 80px;
    /* Prevent text from causing size changes */
    white-space: nowrap;
    /* GPU layer for smooth hover */
    transform: translateZ(0);
}

/* Button hover - SAFE properties only */
.btn:hover:not(:disabled),
button[class*="btn"]:hover:not(:disabled) {
    transform: translateY(-2px) translateZ(0);
}

.btn:active:not(:disabled),
button[class*="btn"]:active:not(:disabled) {
    transform: translateY(0) scale(0.98) translateZ(0);
}

/* Button with loading spinner */
.btn.loading,
.btn[disabled] {
    pointer-events: none;
}

/* ==========================================
   5. GRID STABILITY
   ========================================== */

/* Grids must maintain stable cell sizes */
.creatures-grid,
#collection-grid,
.marketplace-listings-grid,
.sellable-creatures-grid,
.fusion-cards-grid,
.friends-list {
    /* Stable grid */
    display: grid;
    /* Minimum cell width prevents collapse */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    /* Prevent horizontal overflow */
    overflow-x: hidden;
    width: 100%;
}

/* Empty state placeholder - maintains grid height */
.marketplace-empty,
.empty-collection,
.no-creatures {
    grid-column: 1 / -1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ==========================================
   6. CIRCULAR ICON BUTTONS FIX
   ========================================== */

/* Force ALL icon buttons to be perfect circles */
.close-modal,
.close-modal-btn,
.profile-close-btn,
.header-icon-btn,
.logout-btn-small,
.mobile-logout-btn-header,
.notification-btn,
.header-daily-rewards-btn,
.login-mute-btn,
.welcome-mute-btn,
.mobile-sound-btn,
.edit-name-btn {
    aspect-ratio: 1 / 1 !important;
    min-width: unset !important;
    max-width: unset !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Streak/Daily Rewards Button - Force perfect circle */
.header-daily-rewards-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

/* Notification button - consistent size */
.notification-btn {
    width: 40px !important;
    height: 40px !important;
}

/* Hide edit name button - click on avatar to edit */
.edit-name-btn {
    display: none !important;
}

/* ==========================================
   7. TEAM SLOTS STABILITY
   ========================================== */

/* Team slots must have fixed dimensions */
.team-slot-new,
.slot-card-premium {
    /* Minimum size */
    min-width: 100px;
    min-height: 280px;
    /* Allow buttons to overflow */
    overflow: visible;
}

/* Slot content - fills slot completely */
.slot-content,
.slot-content-premium {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   7. HEADER/NAVBAR STABILITY
   ========================================== */

/* Header must have fixed height */
.top-header {
    position: sticky;
    top: 0;
    /* Fixed minimum height */
    min-height: 60px;
    /* Prevent content from pushing header */
    flex-shrink: 0;
    /* GPU layer */
    transform: translateZ(0);
    z-index: 100;
}

/* Nav items - stable width */
.nav-item {
    /* Prevent width changes on active state */
    min-width: 60px;
    /* Center content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   8. LOADER OVERRIDES - TEXT NEVER SPINS
   ========================================== */

/* Override old loading-spinner that had text inside */
.loading-spinner {
    /* If this is the old spinner with text, make it a proper container */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Remove any animation from the container itself */
    animation: none !important;
}

/* The actual spinner element */
.loading-spinner::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--primary, #4fc3f7);
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}

/* If loading-spinner has text content, style it */
.loading-spinner {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Specific fix for any element that might have spinning text */
[class*="loading"] {
    /* Text should never rotate */
    text-orientation: mixed;
}

/* ==========================================
   9. STATS/COUNTERS STABILITY
   ========================================== */

/* Stat counters - prevent number changes from shifting layout */
.home-stat-value,
.stat-value,
.currency span,
#player-coins,
#player-gems,
#player-coins-mobile,
#player-gems-mobile {
    /* Fixed minimum width for numbers */
    min-width: 2ch;
    /* Tabular numbers for stable width */
    font-variant-numeric: tabular-nums;
    /* Prevent layout shift on value change */
    display: inline-block;
}

/* ==========================================
   10. TOOLTIP/DROPDOWN STABILITY
   ========================================== */

/* Tooltips and dropdowns - position fixed, never affect parent layout */
.streak-tooltip,
.notification-dropdown,
[class*="tooltip"],
[class*="dropdown"] {
    position: absolute;
    /* Prevent from affecting parent layout */
    pointer-events: auto;
    /* Layer above content */
    z-index: 1000;
}

/* ==========================================
   11. IMAGE LOADING STABILITY
   ========================================== */

/* All images should have defined dimensions or aspect ratio */
img {
    /* Prevent layout shift during load */
    max-width: 100%;
    height: auto;
}

/* Avatar images - prevent distortion */
.avatar img,
.friend-avatar img,
.player-avatar img,
[class*="avatar"] img {
    /* Prevent distortion - let parent container control size */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================
   12. SCROLL CONTAINER STABILITY
   ========================================== */

/* Scrollable containers must have defined height */
.modal-content,
.section,
[class*="scroll"] {
    /* Enable scroll without affecting parent */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent scroll bar appearance from shifting layout */
    scrollbar-gutter: stable;
}

/* ==========================================
   13. FORM INPUT STABILITY
   ========================================== */

/* Inputs must have fixed height */
input,
select,
textarea {
    /* Fixed height */
    min-height: 40px;
    /* Prevent resize from shifting layout */
    box-sizing: border-box;
}

/* Prevent textarea resize from affecting layout */
textarea {
    resize: vertical;
    max-height: 200px;
}

/* ==========================================
   14. BATTLE FIELD STABILITY
   ========================================== */

/* Battle field - fixed layout */
.battle-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Fixed minimum height */
    min-height: 300px;
    /* Prevent battle cards from shifting layout */
    contain: layout style;
}

/* Battle cards - stable size */
.creature-card.stability-fixed-v5.card-battle {
    /* Lock size */
    width: 140px;
    max-width: 140px;
    min-width: 100px;
    aspect-ratio: 3 / 4;
}

/* ==========================================
   15. EXPEDITION UI STABILITY
   ========================================== */

/* Destination cards - fixed grid */
.expedition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.destination-card {
    /* Fixed aspect ratio */
    aspect-ratio: 4 / 3;
    min-height: 120px;
    /* Prevent content overflow */
    overflow: hidden;
}

/* ==========================================
   16. RANKING/PODIUM STABILITY
   ========================================== */

/* Podium - fixed layout */
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    min-height: 200px;
}

.podium-place {
    /* Fixed width */
    width: 120px;
    min-width: 100px;
    max-width: 150px;
}

/* ==========================================
   17. PREVENT COMMON JITTER CAUSES
   ========================================== */

/* Font rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent sub-pixel rendering issues */
.creature-card,
.btn,
.modal-content,
.team-slot-new,
[class*="card"] {
    /* Force pixel-aligned rendering */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Prevent flickering on hover */
a, button, .clickable, [onclick] {
    /* Stable cursor */
    cursor: pointer;
    /* Prevent text selection flicker */
    user-select: none;
}

/* ==========================================
   18. Z-INDEX HIERARCHY (PREVENT OVERLAP ISSUES)
   ========================================== */

/* Establish clear z-index layers */
.mystical-fog,
.energy-orbs,
.css-particles { z-index: 0; }

body > *:not(.mystical-fog):not(.energy-orbs):not(.css-particles) { z-index: 1; }

.top-header { z-index: 100; }
.mobile-bottom-nav { z-index: 100; }

.notification-dropdown,
.streak-tooltip,
[class*="dropdown"] { z-index: 500; }

.modal { z-index: 10000; }
.modal-content { z-index: 10001; }

#effects-layer { z-index: 12000; }

/* Toast notifications */
.toast-container,
[class*="toast"] { z-index: 15000; }

/* ==========================================
   19. RESPONSIVE STABILITY
   ========================================== */

@media (max-width: 480px) {
    /* Prevent layout shift on mobile */
    .creatures-grid,
    #collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    
    .creature-card {
        max-width: 140px;
    }
    
    .modal-content {
        max-width: 95vw;
        max-height: 90vh;
    }
    
    /* Ensure avatars remain properly sized on mobile */
    .avatar img,
    [class*="avatar"] img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* ==========================================
   20. PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* Reduce repaints for animated elements */
.creature-card,
.btn,
.nav-item,
.team-slot-new,
.podium-place {
    /* Only animate when needed */
    will-change: auto;
}

.creature-card:hover,
.btn:hover,
.nav-item:hover {
    will-change: transform, opacity;
}

/* Reduce animation complexity on low-end devices */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   21. CIRCULAR BUTTONS - HEADER ICONS
   ========================================== */

/* All header icon buttons must be circles */
.header-left .notification-btn,
.header-left .header-daily-rewards-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* Mobile adjustments for circular buttons */
@media (max-width: 768px) {
    .header-left .notification-btn,
    .header-left .header-daily-rewards-btn,
    .mobile-sound-btn,
    .mobile-logout-btn-header {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }
}

@media (max-width: 480px) {
    .header-left .notification-btn,
    .header-left .header-daily-rewards-btn,
    .mobile-sound-btn,
    .mobile-logout-btn-header {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        font-size: 1rem !important;
    }
}

/* ==========================================
   22. REDUCED BUTTON SIZES - COMPACT UI
   ========================================== */

/* Smaller base button padding */
.btn {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
}

.btn-sm {
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
}

.btn-lg {
    padding: 12px 28px !important;
    font-size: 1rem !important;
}

/* Compact nav items */
.nav-item {
    padding: 8px 14px !important;
}

.nav-item .icon {
    font-size: 1.1rem !important;
}

.nav-item .label {
    font-size: 0.8rem !important;
}

/* Compact currency display */
.currency-display {
    padding: 6px 12px !important;
    gap: 8px !important;
}

.currency {
    padding: 4px 10px !important;
    font-size: 0.85rem !important;
}

/* ==========================================
   23. FLOATING PARTICLES - GLOW EFFECT FIX
   ========================================== */

/* Enable CSS particles animation */
.css-particles::before,
.css-particles::after {
    animation: particlesRise 20s linear infinite !important;
}

.css-particles::after {
    animation: particlesRise 25s linear infinite !important;
    animation-delay: -10s !important;
}

/* Enhanced particle glow */
.css-particles {
    filter: blur(0.3px) !important;
    opacity: 0.6 !important;
}

/* Mystical fog enhancement */
.mystical-fog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(79, 195, 247, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(156, 39, 176, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 152, 0, 0.04) 0%, transparent 60%) !important;
    animation: fogPulse 8s ease-in-out infinite alternate !important;
}

@keyframes fogPulse {
    0% { opacity: 0.4; }
    100% { opacity: 0.7; }
}

/* Energy orbs glow effect */
.energy-orbs {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: hidden !important;
}

.energy-orbs::before,
.energy-orbs::after {
    content: '' !important;
    position: absolute !important;
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    filter: blur(40px) !important;
    animation: orbFloat 15s ease-in-out infinite !important;
}

.energy-orbs::before {
    background: radial-gradient(circle, rgba(79, 195, 247, 0.3) 0%, transparent 70%) !important;
    top: 10% !important;
    left: 10% !important;
}

.energy-orbs::after {
    background: radial-gradient(circle, rgba(156, 39, 176, 0.25) 0%, transparent 70%) !important;
    bottom: 20% !important;
    right: 15% !important;
    animation-delay: -7s !important;
    animation-duration: 18s !important;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    25% {
        transform: translate(30px, -20px) scale(1.1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-20px, 30px) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translate(20px, 20px) scale(1.05);
        opacity: 0.6;
    }
}

/* ==========================================
   24. SMOOTH TRANSITIONS & FLUIDITY
   ========================================== */

/* Smooth all interactive elements */
a, button, .btn, .nav-item, .creature-card, .team-slot-new, input, select {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Smoother hover states */
.creature-card:hover {
    transform: translateY(-6px) scale(1.03) !important;
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(79, 195, 247, 0.2) !important;
}

/* Fantasy glow on active cards */
.creature-card.selected,
.creature-card:focus {
    box-shadow: 
        0 0 0 3px rgba(79, 195, 247, 0.6),
        0 0 30px rgba(79, 195, 247, 0.3),
        0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================
   25. BADGE POSITIONING FIX
   ========================================== */

/* Ensure badges don't stretch parent buttons */
.notification-badge,
.streak-badge-header,
.streak-badge {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    font-size: 0.65rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

/* ==========================================
   26. COMPACT HEADER
   ========================================== */

.top-header {
    padding: 8px 16px !important;
    min-height: 50px !important;
}

.header-left {
    gap: 8px !important;
}

.header-right {
    gap: 10px !important;
}

.player-info {
    padding: 4px 10px !important;
    gap: 8px !important;
}

.avatar {
    width: 34px !important;
    height: 34px !important;
}

/* ==========================================
   27. MOBILE BOTTOM NAV - COMPACT
   ========================================== */

@media (max-width: 768px) {
    .mobile-bottom-nav {
        height: 60px !important;
    }
    
    .mobile-bottom-nav .nav-item .icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }
    
    .mobile-bottom-nav .nav-item.active .icon {
        width: 42px !important;
        height: 42px !important;
        transform: translateY(-3px) !important;
    }
    
    .mobile-bottom-nav .nav-item .label {
        font-size: 0.55rem !important;
    }
    
    .main-content {
        padding-bottom: 70px !important;
    }
}

/* ==========================================
   28. UNIFIED CARD TEMPLATE - POLISH v5
   FIXED heights for ALL zones - NO flexibility
   ========================================== */

/* -------- BASE CARD: Fixed Total Height -------- */
.creature-card.stability-fixed-v5 {
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    max-width: 160px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(20, 30, 50, 0.95) 0%, rgba(10, 20, 40, 0.98) 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* -------- HEADER: 28px Fixed -------- */
.creature-card.stability-fixed-v5 .card-header {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    flex: 0 0 28px !important;
    padding: 0 6px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: linear-gradient(180deg, rgba(15, 25, 45, 1) 0%, rgba(20, 35, 60, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    gap: 4px !important;
}

/* -------- BADGES: 18px Fixed Height -------- */
.creature-card.stability-fixed-v5 .card-header-rarity,
.creature-card.stability-fixed-v5 .card-header-type {
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px !important;
    font-size: 0.5rem !important;
    font-weight: 700 !important;
    font-family: 'Nunito', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* -------- BODY: Fills remaining space -------- */
.creature-card.stability-fixed-v5 .card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, rgba(30, 45, 70, 0.6) 0%, rgba(20, 35, 55, 0.8) 100%) !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

/* -------- IMAGE: Fixed 100px -------- */
.creature-card.stability-fixed-v5 .card-image {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    flex: 0 0 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    overflow: hidden !important;
}

.creature-card.stability-fixed-v5 .card-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* -------- NAME: 22px Fixed -------- */
.creature-card.stability-fixed-v5 .card-name {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    flex: 0 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0 6px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 20, 40, 0.6) 100%) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* -------- FOOTER: 40px Fixed -------- */
.creature-card.stability-fixed-v5 .card-footer {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    padding: 4px 6px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(180deg, rgba(20, 35, 60, 0.95) 0%, rgba(10, 20, 40, 1) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* -------- STATS: 28px Fixed, Equal Width -------- */
.creature-card.stability-fixed-v5 .card-stat {
    flex: 1 1 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 6px !important;
    border-radius: 5px !important;
    min-width: 0 !important;
}

.creature-card.stability-fixed-v5 .card-stat.attack {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.25) 0%, rgba(211, 47, 47, 0.25) 100%) !important;
    border: 1px solid rgba(244, 67, 54, 0.5) !important;
}

.creature-card.stability-fixed-v5 .card-stat.defense {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.25) 0%, rgba(25, 118, 210, 0.25) 100%) !important;
    border: 1px solid rgba(33, 150, 243, 0.5) !important;
}

/* -------- STAT ICON + VALUE: Perfect Vertical Alignment -------- */
.creature-card.stability-fixed-v5 .card-stat .stat-icon {
    font-size: 0.85rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
}

.creature-card.stability-fixed-v5 .card-stat .stat-value {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    font-family: 'Nunito', sans-serif !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.creature-card.stability-fixed-v5 .card-stat.attack .stat-value {
    color: #ff7043 !important;
}

.creature-card.stability-fixed-v5 .card-stat.defense .stat-value {
    color: #64b5f6 !important;
}

/* ==========================================
   29. CARD SIZE VARIANTS
   ========================================== */

/* Mini Card - Team slots */
.creature-card.stability-fixed-v5.card-mini {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    max-width: 120px !important;
}

.creature-card.stability-fixed-v5.card-mini .card-header {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex: 0 0 24px !important;
    padding: 0 5px !important;
}

.creature-card.stability-fixed-v5.card-mini .card-header-rarity,
.creature-card.stability-fixed-v5.card-mini .card-header-type {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    font-size: 0.45rem !important;
    padding: 0 5px !important;
}

.creature-card.stability-fixed-v5.card-mini .card-image {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    flex: 0 0 80px !important;
    padding: 4px !important;
}

.creature-card.stability-fixed-v5.card-mini .card-name {
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    font-size: 0.6rem !important;
}

.creature-card.stability-fixed-v5.card-mini .card-footer {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    flex: 0 0 34px !important;
    padding: 3px 5px !important;
}

.creature-card.stability-fixed-v5.card-mini .card-stat {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    gap: 3px !important;
    padding: 0 5px !important;
}

.creature-card.stability-fixed-v5.card-mini .card-stat .stat-icon {
    font-size: 0.75rem !important;
    width: 14px !important;
    height: 14px !important;
}

.creature-card.stability-fixed-v5.card-mini .card-stat .stat-value {
    font-size: 0.75rem !important;
}

/* Battle Card */
.creature-card.stability-fixed-v5.card-battle {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    max-width: 140px !important;
}

.creature-card.stability-fixed-v5.card-battle .card-header {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    flex: 0 0 26px !important;
}

.creature-card.stability-fixed-v5.card-battle .card-header-rarity,
.creature-card.stability-fixed-v5.card-battle .card-header-type {
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    font-size: 0.48rem !important;
    padding: 0 5px !important;
}

.creature-card.stability-fixed-v5.card-battle .card-image {
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    flex: 0 0 90px !important;
    padding: 5px !important;
}

.creature-card.stability-fixed-v5.card-battle .card-name {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    flex: 0 0 20px !important;
    font-size: 0.65rem !important;
}

.creature-card.stability-fixed-v5.card-battle .card-footer {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
    padding: 3px 5px !important;
}

.creature-card.stability-fixed-v5.card-battle .card-stat {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    gap: 4px !important;
}

.creature-card.stability-fixed-v5.card-battle .card-stat .stat-icon {
    font-size: 0.8rem !important;
    width: 15px !important;
    height: 15px !important;
}

.creature-card.stability-fixed-v5.card-battle .card-stat .stat-value {
    font-size: 0.8rem !important;
}

/* ==========================================
   30. GRID LAYOUTS - ALL CONTEXTS
   ========================================== */

/* Collection Grid */
#collection-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 15px !important;
}

#collection-grid .creature-card {
    max-width: none !important;
    width: 100% !important;
}

/* Team Creatures Grid */
.creatures-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 12px !important;
}

.creatures-grid .creature-card {
    max-width: none !important;
    width: 100% !important;
}

/* Marketplace Grid */
.marketplace-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 16px !important;
}

/* Sellable Creatures Grid */
.sellable-creatures-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 12px !important;
}

/* Fusion Cards Grid */
.fusion-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 12px !important;
}

/* ==========================================
   31. TEAM SLOT CARDS
   ========================================== */

.team-slot-new .slot-content .creature-card,
.slot-content-premium .creature-card {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
}

.team-slot-new .slot-content.filled,
.slot-content-premium.filled {
    aspect-ratio: auto !important;
    overflow: visible !important;
}

.team-slot-new .slot-content.filled .creature-card,
.slot-content-premium.filled .creature-card {
    height: auto !important;
}

.team-slot-new .slot-content.filled {
    padding: 0 !important;
}

/* ==========================================
   32. MARKETPLACE CARD SPECIFICS
   ========================================== */

.marketplace-card .creature-card,
.marketplace-card.creature-card {
    max-width: none !important;
    width: 100% !important;
}

/* ==========================================
   33. MOBILE CARD ADJUSTMENTS
   ========================================== */

@media (max-width: 768px) {
    .creature-card.stability-fixed-v5 {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
        max-width: 145px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-header {
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        flex: 0 0 26px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-header-rarity,
    .creature-card.stability-fixed-v5 .card-header-type {
        height: 17px !important;
        min-height: 17px !important;
        max-height: 17px !important;
        font-size: 0.48rem !important;
        padding: 0 5px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-image {
        height: 90px !important;
        min-height: 90px !important;
        max-height: 90px !important;
        flex: 0 0 90px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-name {
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        flex: 0 0 20px !important;
        font-size: 0.65rem !important;
    }
    
    .creature-card.stability-fixed-v5 .card-footer {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
        padding: 4px 5px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-stat {
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-stat .stat-icon {
        font-size: 0.8rem !important;
        width: 15px !important;
        height: 15px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-stat .stat-value {
        font-size: 0.8rem !important;
    }
    
    #collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        gap: 10px !important;
    }
    
    .creatures-grid {
        grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
        gap: 10px !important;
    }
    
    .marketplace-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .creature-card.stability-fixed-v5 {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        max-width: 130px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-header {
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        flex: 0 0 24px !important;
        padding: 0 5px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-header-rarity,
    .creature-card.stability-fixed-v5 .card-header-type {
        height: 16px !important;
        min-height: 16px !important;
        max-height: 16px !important;
        font-size: 0.45rem !important;
        padding: 0 4px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-image {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        flex: 0 0 80px !important;
        padding: 4px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-name {
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        flex: 0 0 18px !important;
        font-size: 0.6rem !important;
    }
    
    .creature-card.stability-fixed-v5 .card-footer {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 34px !important;
        padding: 3px 5px !important;
        gap: 5px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-stat {
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        gap: 3px !important;
        padding: 0 5px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-stat .stat-icon {
        font-size: 0.75rem !important;
        width: 14px !important;
        height: 14px !important;
    }
    
    .creature-card.stability-fixed-v5 .card-stat .stat-value {
        font-size: 0.75rem !important;
    }
    
    #collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
        gap: 8px !important;
    }
    
    .creatures-grid {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) !important;
        gap: 8px !important;
    }
    
    .marketplace-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 10px !important;
    }
    
    /* Battle cards smaller on mobile */
    .creature-card.stability-fixed-v5.card-battle {
        max-width: 110px !important;
        min-height: 145px !important;
    }
    
    .creature-card.stability-fixed-v5.card-battle .card-header {
        height: 20px !important;
        min-height: 20px !important;
    }
    
    .creature-card.stability-fixed-v5.card-battle .card-footer {
        height: 28px !important;
        min-height: 28px !important;
    }
    
    .creature-card.stability-fixed-v5.card-battle .card-stat .stat-icon,
    .creature-card.stability-fixed-v5.card-battle .card-stat .stat-value {
        font-size: 0.65rem !important;
    }
}