/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@400;500;600;700&display=swap');

/* ========================================
   MODERN PROFESSIONAL DESIGN SYSTEM
   ======================================== */

/* CSS Variables - Dark Grey & Purple Theme */
:root {
    /* Neutral Base Colors - Very Dark Grey */
    --bg-primary: #0a0a0f;
    --bg-secondary: #14141f;
    --bg-tertiary: #1c1c2e;
    --bg-elevated: #24243a;
    
    /* Accent Colors - Purple Theme */
    --accent-primary: #8B5CF6;
    --accent-primary-hover: #7C3AED;
    --accent-secondary: #A78BFA;
    --accent-success: #10B981;
    --accent-warning: #F59E0B;
    --accent-danger: #EF4444;
    
    /* Text Colors */
    --text-primary: #F9FAFB;
    --text-secondary: #C4B5FD;
    --text-tertiary: #9CA3AF;
    --text-muted: #6B7280;
    
    /* Border & Divider Colors */
    --border-primary: #2d2d4a;
    --border-secondary: #1f1f35;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    
    /* Spacing */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 70px;
    --topbar-height: 64px;
    
    /* Transitions */
    --transition-base: 150ms ease;
    --transition-slow: 300ms ease;
}

/* ========================================
   AVATAR COLLECTION
   ======================================== */

.avatar-collection-sub {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.training-block.avatar-collection {
    align-items: stretch;
}

.avatar-collection-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.avatar-tile {
    border: 1px solid var(--border-secondary);
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    color: var(--text-primary);
}

.avatar-tile:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.avatar-tile.current {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}

.avatar-thumb {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-elevated);
    margin-bottom: 0.6rem;
}

.avatar-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-status {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 15, 0.8);
    color: var(--text-primary);
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.avatar-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar-tile.locked img {
    filter: grayscale(1) blur(2px);
    opacity: 0.6;
}

.avatar-tile.locked .avatar-status {
    background: rgba(20, 0, 40, 0.85);
    color: var(--text-tertiary);
}

@media (max-width: 600px) {
    .avatar-collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }
}

/* Strong overrides to ensure rarity-info displays horizontally regardless of earlier grid rules. */
.rarity-info {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
    align-items: center !important;
    padding: 0.5rem !important;
    overflow-x: auto !important;
}
.rarity-info .rarity-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 0.45rem 0.65rem !important;
}

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

html, body {
    height: 100%;
    font-family: 'JetBrains Mono', monospace;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
}

/* Allow scrolling on mobile to show all content */
@media (max-width: 768px) {
    html, body {
        height: auto;
        overflow: visible;
        overflow-x: hidden;
    }
}

body {
    display: flex;
    position: relative;
}

/* ========================================
   SIDEBAR NAVIGATION
   ======================================== */

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-secondary);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    transition: width var(--transition-slow);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    min-height: 48px;
    position: relative;
}

.sidebar.collapsed .sidebar-brand {
    justify-content: center;
    padding: 0.5rem 0;
    overflow: visible;
}

.sidebar-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: opacity var(--transition-slow), width var(--transition-slow);
}

.sidebar.collapsed .sidebar-logo {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: opacity var(--transition-slow), width var(--transition-slow);
    font-family: 'Orbitron', sans-serif;
}

.sidebar.collapsed .sidebar-title {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-toggle {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 0.25rem;
    padding: 0;
}

.sidebar.collapsed .sidebar-toggle {
    width: auto;
    height: auto;
    padding: 0.625rem;
    margin: 0;
    margin-left: -1.5rem;
    background: transparent;
    border-color: transparent;
    border-radius: 8px;
}

.sidebar-toggle:hover {
    background: var(--bg-elevated);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.sidebar.collapsed .sidebar-toggle:hover {
    background: var(--bg-elevated);
    border-color: var(--border-secondary);
}

/* Hide sidebar toggle on mobile */
@media (max-width: 768px) {
    .sidebar-toggle {
        display: none !important;
    }
}

.toggle-icon {
    width: 24px;
    height: 24px;
    transition: transform var(--transition-slow);
}

.sidebar.collapsed .toggle-icon {
    transform: rotate(180deg);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: 8px;
    background: var(--bg-tertiary);
    overflow: hidden;
    min-height: 64px;
    margin-bottom: 0.5rem;
}

.sidebar.collapsed .user-profile {
    display: none !important;
}

.user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-primary);
    flex-shrink: 0;
}

.sidebar.collapsed .user-avatar {
    display: none;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.sidebar.collapsed .user-info {
    display: none;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-level {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sidebar-nav {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-base);
    width: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 0.75rem;
    gap: 0;
}

.nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--accent-primary);
    color: white;
}

.nav-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.nav-label {
    transition: opacity var(--transition-slow);
}

.sidebar.collapsed .nav-label {
    opacity: 0;
    width: 0;
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-secondary);
    flex-shrink: 0;
}

.sidebar-footer .nav-item {
    margin: 0;
}

/* Stats section in sidebar (below title, above nav) */
.sidebar-stats {
    padding: 1rem;
    border-bottom: 1px solid var(--border-secondary);
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-stats .stat-chip {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    background: var(--bg-tertiary) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-secondary) !important;
    width: 100% !important;
}

.sidebar-stats .stat-chip svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    color: var(--accent-primary) !important;
}

.sidebar-stats .stat-chip span {
    flex: 1 !important;
}

.sidebar-stats .xp-chip {
    min-width: unset !important;
    flex-direction: column !important;
}

.sidebar-stats .xp-bar-container {
    width: 100% !important;
    height: 16px !important;
}

.sidebar-stats .xp-bar-fill {
    height: 100% !important;
}

.sidebar-stats .xp-bar-text {
    font-size: 0.65rem !important;
}

/* Hide XP bar icon on mobile */
@media (max-width: 768px) {
    .xp-chip .stat-icon {
        display: none !important;
    }
}

/* Show stats in sidebar on mobile */
@media (max-width: 768px) {
    .sidebar-stats {
        display: flex !important;
    }
    
    .sidebar-stats .stat-chip {
        display: flex !important;
    }
    
    .top-bar-right {
        display: none !important;
    }
    
    .top-bar-right .stat-chip {
        display: none !important;
    }
}

/* Ensure sidebar stats stay visible on smaller screens too */
@media (max-width: 600px) {
    .sidebar-stats {
        display: flex !important;
    }
    
    .sidebar-stats .stat-chip {
        display: flex !important;
    }
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow-y: auto;
    transition: margin-left var(--transition-slow);
}

.main-content.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed-width);
}

/* On mobile, allow main-content to grow with content */
@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        min-height: auto;
        overflow-y: auto;
    }
}

/* Top Bar */
.top-bar {
    height: var(--topbar-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    flex-shrink: 0;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* On mobile, hide the bar and convert left area into a circular button */
@media (max-width: 768px) {
    .top-bar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        z-index: 900;
        flex-shrink: unset;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        pointer-events: none;
    }
    
    .top-bar-left {
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        width: 50px !important;
        height: 50px !important;
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover)) !important;
        border: 2px solid var(--accent-secondary) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 901 !important;
        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4) !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        pointer-events: auto;
    }
    
    .top-bar-left:hover {
        background: linear-gradient(135deg, var(--accent-primary-hover), var(--accent-primary)) !important;
        box-shadow: 0 6px 16px rgba(124, 58, 237, 0.6) !important;
        transform: scale(1.1) !important;
    }
    
    .top-bar-left:active {
        transform: scale(0.95) !important;
    }
    
    .page-title {
        display: none !important;
    }
    
    .top-bar-left::before {
        content: '☰' !important;
        font-size: 1.5rem !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
}

.stat-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    border: 1px solid var(--border-secondary);
}

.stat-chip.xp-chip {
    font-family: 'JetBrains Mono', monospace;
    min-width: 140px;
}

/* Hide stat chips on mobile */
@media (max-width: 768px) {
    .stat-chip {
        display: none !important;
    }
}

.xp-bar-container {
    position: relative;
    width: 120px;
    height: 20px;
    background: var(--bg-primary);
    border-radius: 10px;
    overflow: hidden;
}

.xp-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    transition: width 0.3s ease;
    width: 0%;
}

.xp-bar-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.stat-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-primary);
}

/* Dynamic Content Area */
#dynamic-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    max-width: 100%;
    box-sizing: border-box;
}

/* Reduce padding when showing collection for maximum width */
#dynamic-content:has(.collection-interface) {
    padding: 1rem;
}

/* Gacha screen - fill entire content area */
#dynamic-content:has(.gacha-screen) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

#dynamic-content:has(.shop-hub-shell) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Level up animation */
.level-up {
    animation: levelUpGlow 0.8s ease;
}
@keyframes levelUpGlow {
    0% { text-shadow: 0 0 8px var(--accent-success), 0 0 1px #fff; color: var(--accent-success); }
    60% { text-shadow: 0 0 24px var(--accent-success), 0 0 1px #fff; color: var(--accent-success); }
    100% { text-shadow: none; color: var(--text-primary); }
}

/* Terminal Output Area */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    /* GIF background removed per user request */
    background: none;
    opacity: 0; /* hide this layer */
    filter: none;
    mix-blend-mode: normal;
    pointer-events: none;
}
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: linear-gradient(120deg, rgba(20,0,40,0.92) 0%, rgba(8,0,30,0.98) 100%);
    pointer-events: none;
}

/* Legacy main-content styles removed - using new sidebar layout */

/* Tablet and medium screens */
@media (max-width: 900px) {
    .drone-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4em;
    }
    .xp-bar-bg {
        width: 100%;
    }
    
    .minigame-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        gap: 1rem;
    }
    
    .minigame-btn {
        padding: 1.25rem;
        min-height: 120px;
    }
    
    .minigame-title {
        font-size: 1.1rem;
    }
    
    .minigame-desc {
        font-size: 0.875rem;
    }
}

/* Small screens and phones */
@media (max-width: 600px) {
    .main-content {
        padding: 0;
        min-height: auto;
        display: flex;
        flex-direction: column;
    }
    
    .drone-overlay {
        position: relative; /* Make drone overlay flow with content instead of absolute positioning */
        top: auto;
        left: auto;
        width: 100%;
        max-width: none;
        margin-bottom: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Simpler shadow */
    }
    
    .drone-ui-pill {
        position: fixed !important; /* Fix to top of screen */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: auto !important;
        border-radius: 0 !important;
        padding: 0.22em 0.6em !important;
        margin-bottom: 0 !important;
        z-index: 50 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.6em !important;
        background: rgba(18,4,36,0.98) !important;
        backdrop-filter: none;
        box-shadow: none !important;
        min-height: 40px !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        border: none !important;
        margin-left: 50px !important; /* Leave space for menu button */
        width: calc(100% - 50px) !important;
    }
    
    /* Add margin to content to account for drone pill + button */
    #dynamic-content {
        margin-top: 40px !important;
        padding-left: 8px !important;
    }
    
    .drone-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.6em !important;
        flex: 1 !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
    }
    
    .xp-bar-bg {
        min-width: 80px;
        flex: 0 1 auto;
    }
    
    .xp-label, .credits {
        font-size: 0.75em;
        white-space: nowrap;
    }
    
    /* Add top padding to content to account for fixed drone pill header */
    #dynamic-content {
        margin-top: 40px !important; /* Account for fixed drone pill */
        padding: 0.6em 0.5em 3.5em 0.5em !important; /* extra bottom padding for bottom buttons */
        flex: 1;
        text-align: left !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto;
    }

    /* Remove left padding on very small screens so content sits flush to the viewport edge */
    @media (max-width: 480px) {
        #dynamic-content, .intro-block, .training-block, .collection-interface {
            padding-left: 0.4em !important;
            padding-right: 0.6em !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            max-width: 100% !important;
        }
        /* Also make sure the main content doesn't have internal left offsets */
        main.main-content { padding-left: 8px !important; padding-right: 8px !important; }
    }
    
    #dynamic-content * {
        text-align: left !important;
    }

    /* Slightly reduce typography scale on phones so more fits above the fold */
    :root, body, .main-content {
        font-size: 14px; /* base font for mobile */
    }
    .intro-block h1, .training-block h1 {
        font-size: 1.2em !important;
        line-height: 1.05 !important;
        margin-bottom: 0.3em !important;
    }
    .intro-block p, .training-block p {
        font-size: 0.88em !important;
        line-height: 1.2 !important;
    }
    .minigame-title {
        font-size: 0.95em !important;
    }
    .minigame-desc {
        font-size: 0.8em !important;
    }

    /* Override legacy fixed memory layout so the 4x4 grid fits on small screens */
    .training-block.memory-active {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.6em !important;
        margin: 0.4em 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .training-block.memory-active #memory-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.4em 0 !important;
        left: 0 !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-auto-rows: 1fr !important;
        gap: 6px !important;
        justify-items: stretch !important;
        align-items: stretch !important;
        padding: 0 !important;
    }

    .training-block.memory-active .memory-card {
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        font-size: 20px !important;
        box-sizing: border-box !important;
    }

    /* Reduce left padding/indent for memory UI so the grid sits flush on small screens */
    .training-block.memory-active,
    .training-block.memory-active #memory-grid,
    #memory-grid,
    .memory-grid,
    .memory-card {
        padding-left: 2px !important;
        padding-right: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
    }
    
    /* Make intro/training/collection blocks full-width containers on mobile so grids can use full space */
    .intro-block, .training-block, .collection-interface {
        padding: 0.6em 0.6em 0.6em 0.6em !important;
        margin-top: 0.4em !important;
        border-radius: 0 !important; /* give up the card borders on mobile */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        text-align: left !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Strong override to remove left padding on common mobile/tablet widths */
    #dynamic-content, .intro-block, .training-block, .collection-interface {
        padding-left: 0 !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .intro-block h1, .training-block h1,
    .intro-block h2, .training-block h2,
    .intro-block p, .training-block p {
        text-align: left !important;
        margin-left: 0 !important;
    }
    
    .minigame-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Two buttons per row on phones */
        gap: 0.8em !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .minigame-menu {
        margin-top: 1em !important;
        padding: 0 !important;
    }
    
    .minigame-btn {
        padding: 1em 0.8em;
        font-size: 0.9em;
        min-height: auto;
        text-align: left !important;
        background: rgba(20, 0, 40, 0.6) !important;
        border: 1px solid rgba(124, 58, 237, 0.3) !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
    .minigame-btn:hover {
        background: rgba(20, 0, 40, 0.8) !important;
        border-color: rgba(124, 58, 237, 0.5) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    .minigame-title {
        font-size: 1em;
        margin-bottom: 0.4em;
        text-align: left !important;
        color: #fff !important;
    }
    
    .minigame-desc {
        font-size: 0.8em;
        line-height: 1.3;
        text-align: left !important;
        color: #ccc !important;
    }
    
    .drone-profile {
        width: 45px !important;
        height: 45px !important;
        flex-shrink: 0 !important;
    }
    
    .drone-name {
        font-size: 0.95em;
        flex-shrink: 0;
    }
    
    /* Mobile store section styling */
    .store-section {
        margin-top: 1.5em !important;
        padding: 1em !important;
        border-width: 1px !important;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.2) !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .store-section-title {
        font-size: 1em !important;
        margin-bottom: 0.8em !important;
    }
    
    .store-btn {
        padding: 1em !important;
        gap: 1em !important;
        text-align: left !important;
        transform: none !important;
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.1) !important;
    }
    
    .store-btn:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2) !important;
    }
    
    .store-icon {
        font-size: 2em !important;
    }
    
    .store-title {
        font-size: 1.1em !important;
    }
    
    .store-desc {
        font-size: 0.9em !important;
    }
    
    .store-cost {
        font-size: 0.8em !important;
    }

    /* Make the Edit Drone modal anchor to the top on small screens so it's visible above the fold
       and does not appear vertically centered (which pushed it too low on phones). */
    #magiEditModal {
        /* overlay is a flex container; align child to the top */
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 56px !important; /* offset for fixed header */
        box-sizing: border-box !important;
    }

    /* Ensure the inner dialog fits on narrow viewports */
    #magiEditModal > div {
        min-width: 90vw !important;
        max-width: 560px !important;
        margin: 0.4em auto !important;
        width: calc(100% - 24px) !important;
    }

    /* Hide Close button on mobile settings menu */
    #modalCancel {
        display: none !important;
    }
}

/* Main Layout - Side by side design */
.main-layout {
    display: flex;
    gap: 2em;
    margin-top: 1.5em;
    align-items: flex-start;
}

.training-area {
    flex: 2;
    min-width: 0; /* Allow flexbox to shrink */
}

.store-sidebar {
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}

/* Minigame button styles */
.minigame-menu {
    margin-top: 1.5em;
}

.minigame-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 100%;
    width: 100%;
}

.minigame-btn {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: 8px;
    padding: 1.5rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: inherit;
    text-align: left;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
}

.minigame-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary), var(--shadow-lg);
    transform: translateY(-2px);
}

.minigame-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.minigame-desc {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* Store Section - Distinct from training modules */
.store-section {
    margin-top: 0;
    padding: 1.5rem;
    background: transparent;
    border: 2px solid #ffd700;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    height: fit-content;
}

.store-section-title {
    color: #ffd700;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    letter-spacing: 1px;
}

.store-btn {
    display: flex;
    align-items: center;
    width: 100%;
    background: linear-gradient(135deg, #2d1566 0%, #4a1d8a 100%);
    border: 2px solid #ffd700;
    border-radius: 10px;
    padding: 1.2em;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Fira Mono', 'Consolas', monospace;
    gap: 1.2em;
    text-align: left;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

/* Memory minigame responsive grid */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-items: stretch;
}

.memory-card {
    width: 100%;
    /* Keep a square aspect ratio so cards scale nicely */
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

/* Mobile: make cards slightly smaller so the whole grid fits comfortably */
@media (max-width: 600px) {
    .memory-grid {
        gap: 6px;
        grid-template-columns: repeat(4, 1fr);
        max-width: 100%;
    }
    .memory-card {
        aspect-ratio: 1 / 1;
        min-width: 0;
    }
}

.store-btn:hover {
    background: linear-gradient(135deg, #4a1d8a 0%, #6b2db3 100%);
    border-color: #ffed4e;
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.4);
    transform: translateY(-3px);
}

.store-icon {
    font-size: 2.5em;
    flex-shrink: 0;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.store-content {
    flex: 1;
}

.store-title {
    font-size: 1.3em;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 0.3em;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.store-desc {
    font-size: 1em;
    color: #e0c3ff;
    margin-bottom: 0.3em;
}

.store-cost {
    font-size: 0.9em;
    color: #b983ff;
    font-style: italic;
}

.drone-overlay {
    position: absolute;
    top: 1.2em;
    left: 1.2em;
    z-index: 10;
    display: flex;
    align-items: center;
    background: rgba(20,0,40,0.98);
    border-radius: 18px;
    box-shadow: 0 4px 32px #000b, 0 0 0 2px #7c3aed;
    padding: 0.7em 1.2em 0.7em 0.7em;
    min-width: 180px;
    max-width: 260px;
    gap: 0.7em;
    border: 2px solid #7c3aed;
}
.drone-ui-pill {
    position: absolute;
    top: 0;
    left: 0;
    width: 24%;
    min-width: 180px;
    max-width: 24%;
    display: flex;
    align-items: center;
    gap: 2.2em;
    background: #18102a;
    border-radius: 2em 0 2em 0;
    box-shadow: 0 2px 16px #000a, 0 0 0 2px #18102a;
    border: 2px solid #18102a;
    padding: 0.5em 0.5em 0.5em 0.7em;
    margin: 0;
    min-height: 80px;
    z-index: 2;
}
.drone-profile {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2.5px solid #7c3aed;
    box-shadow: 0 0 14px #7c3aed88, 0 0 0 7px #1a0033;
    background: #1a0033;
    object-fit: cover;
    display: block;
}
.drone-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 120px;
    max-width: 220px;
    gap: 0.7em;
}
.drone-name {
    font-size: 1.35em;
    color: #b983ff;
    font-weight: bold;
    letter-spacing: 1.2px;
    text-shadow: 0 0 4px #7c3aed, 0 0 1px #fff;
    margin-bottom: 0.1em;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}
.xp-bar-bg {
    width: 220px;
    max-width: 100%;
    height: 14px;
    background: #1a0033;
    border-radius: 7px;
    box-shadow: 0 0 4px #7c3aed44;
    overflow: hidden;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    transition: width 0.3s;
}
.xp-bar {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed 0%, #39ff14 100%);
    border-radius: 6px 0 0 6px;
    transition: width 0.5s cubic-bezier(.4,2,.6,1);
    width: 0%;
    box-shadow: 0 0 5px #7c3aed88;
}
.xp-label {
    font-size: 0.85em;
    color: #d1b3ff;
    margin-top: 0.08em;
    text-shadow: 0 0 1px #7c3aed;
    font-family: inherit;
    text-align: right;
}

.credits, .highscore {
    font-size: 0.85em;
    color: #b983ff;
    margin-left: 0;
    white-space: nowrap;
}

/* ============================================
   RESULT MODAL - Floating overlay for game results
   ============================================ */
.result-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    animation: fadeIn 200ms ease;
}

.result-modal-content {
    background: var(--bg-secondary);
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    padding: 2rem;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 
                0 0 0 1px var(--accent-primary),
                0 0 40px rgba(139, 92, 246, 0.3);
    animation: modalSlideUp 300ms ease;
    position: relative;
}

.result-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all var(--transition-base);
}

.result-modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

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

@keyframes modalSlideUp {
    from { 
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.intro-block, .training-block {
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    box-sizing: border-box;
}

/* Collection interface needs more width for the grid */
.collection-interface {
    max-width: 100% !important;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0.75rem; /* Reduced padding for more space */
    align-items: flex-start; /* Don't center the grid */
}

#collectionGrid {
    width: 100%;
}

.big-collection-grid {
    width: 100%;
}

/* Toggle switch styling */
.switch-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    border-radius: 24px;
    transition: 0.3s;
    border: 1px solid #444;
}

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

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
    background-color: white;
}

.toggle-switch:hover .toggle-slider {
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}

.purple {
    color: var(--accent-primary);
}
.green {
    color: var(--accent-success);
}
.drone-input {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    border: 1.5px solid var(--border-secondary);
    border-radius: 8px;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    width: 12rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    outline: none;
    box-shadow: none;
    transition: all var(--transition-base);
    text-align: center;
    position: relative;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace;
}
.drone-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.drone-begin-btn {
    margin-top: 1.2em;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: inherit;
    box-shadow: var(--shadow-md);
}
.drone-begin-btn:hover {
    background: var(--accent-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

/* Session notch that protrudes from top */
.session-notch {
    position: absolute;
    top: 0; /* sit at the inside top edge of the tablet */
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    pointer-events: none;
}
.session-notch-inner {
    background: linear-gradient(180deg, rgba(10,2,26,0.98), rgba(26,0,51,0.98));
    color: #d1b3ff;
    padding: 8px 14px;
    border-radius: 0 0 10px 10px; /* notch sits flush at top */
    box-shadow: 0 6px 18px rgba(0,0,0,0.45); /* subtle shadow only */
    border: none; /* remove glowing purple border */
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.6px;
    pointer-events: none;
}
.session-notch-inner span { font-size:0.95em; }

/* Memory grid styling */
#memory-grid, .memory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 10px;
    max-width: 520px;
    margin: 0.6em auto 0 auto;
    justify-items: center;
}
.memory-card {
    width: 60px;
    height: 60px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: transparent;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
    user-select: none;
}
.memory-card:disabled {
    opacity: 0.9;
    cursor: default;
    background: linear-gradient(90deg,#1a0033,#27143e);
}

.memory-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.memory-card span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.memory-card.flipped {
    transform: scale(1.03);
}

/* Typing task - remove flex centering for normal text flow */
.training-block:has(#typingInput) {
    align-items: stretch !important;
}

/* Memory active layout - properly sized to contain grid */
.training-block.memory-active {
    width: 500px !important;
    max-width: 500px !important;
    padding: 8px !important;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: hidden;
}

.training-block.memory-active #memory-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: 8px !important;
    justify-items: center;
    align-items: center;
    width: 344px !important;
    margin: 12px 0 !important;
    padding: 0;
    position: relative !important;
    left: -40px !important;
}

/* Make memory cards expand to fill their grid cells in the enlarged layout (responsive) */
.training-block.memory-active .memory-card {
    width: 100%;
    height: 100%;
    min-width: 64px;
    min-height: 64px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Puzzle grid styling */
#puzzleGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0; /* no spacing so image tiles sit flush */
    justify-items: stretch;
    align-items: stretch;
    max-width: 100%;
    margin: 12px auto;
    width: 100%;
}
.puzzle-tile {
    width: 100%;
    /* Let the grid control the height (gridAutoRows) so tiles perfectly align */
    height: 100%;
    max-width: none;
    display: block;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none; /* no border so background segments abut exactly */
    background-color: transparent;
    background-clip: padding-box;
    font-size: 1.1em;
    border-radius: 0; /* remove rounding so seams align flush */
}

/* Puzzle tile states: movable tiles show a border, locked tiles are borderless and disabled */
.puzzle-tile.movable {
    /* Use outline instead of border so visual highlight doesn't change layout or tile size */
    outline: 2px dashed rgba(185,131,255,0.95);
    outline-offset: -2px; /* draw outline inside the tile edge */
    background-color: transparent;
    cursor: pointer;
    transition: box-shadow 120ms ease, transform 120ms ease;
}
.puzzle-tile.movable:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.puzzle-tile.locked {
    border: none;
    background-color: transparent;
    box-shadow: none;
    cursor: default;
    opacity: 1;
}

/* Floating End Session button positioned inside the tablet so it follows the tablet's border-radius */
.end-session-floating {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: none;
    padding: 8px 10px;
    font-size: 0.9em;
    border-radius: 10px;
    /* muted reddish-dark purple */
    background: linear-gradient(180deg, #4b1830 0%, #30101f 100%);
    color: #f3e9f5;
    border: 1px solid rgba(124,58,237,0.08);
    box-shadow: 0 6px 14px rgba(0,0,0,0.32);
    cursor: pointer;
    z-index: 9998;
    pointer-events: auto;
}
.end-session-floating:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.36); }

@media (max-width: 900px) {
    .end-session-floating { right: 12px; bottom: 12px; padding: 7px 9px; font-size: 0.85em; }
}
.puzzle-tile.locked[disabled] { pointer-events: none; }

.training-block.memory-active .memory-card {
    width: 100%;
    height: 100%;
    min-width: 100px;
    min-height: 100px;
    border-radius: 8px;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0;
}

/* Quiz layout enlargement */
.training-block.quiz-active {
    min-width: auto;
    max-width: 100%;
    min-height: 420px;
    padding: 1.5rem;
    box-sizing: border-box;
}

/* Quick content transition utilities */
.content-fade-enter {
    opacity: 0;
    transform: translateY(6px) scale(0.995);
    /* ensure the element has transition available when the active class is added */
    transition: opacity 220ms ease, transform 220ms ease;
}
.content-fade-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.content-fade-exit {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 180ms ease, transform 180ms ease;
}
.content-fade-exit-active {
    opacity: 0;
    transform: translateY(-6px) scale(0.995);
}

#quizChoices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 14px;
    width: 100%;
}

#quizChoices button {
    padding: 12px 14px;
    font-size: 16px;
    min-height: 56px;
    box-sizing: border-box;
    text-align: left;
}

@media (max-width: 760px) {
    .training-block.memory-active,
    .training-block.quiz-active {
        min-width: auto;
        max-width: 100%;
        padding: 14px;
    }
    .training-block.memory-active #memory-grid {
        grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)) !important;
        grid-auto-rows: 86px !important;
        gap: 10px !important;
    }
    #quizChoices {
        grid-template-columns: 1fr;
    }
    
    /* Puzzle mobile responsiveness */
    .puzzle-container {
        max-height: calc(100vh - 180px); /* Reduce max height on mobile */
    }
    .puzzle-inner {
        max-width: 95vw; /* Use more of the screen width */
    }
}
.puzzle-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Limit maximum visual height to the main content area and allow scrolling if needed */
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    overflow-x: hidden;
}
.puzzle-inner {
    display: block;
    will-change: transform;
    transform-origin: top center;
}

/* Store Interface Styling */
.store-interface {
    max-width: 700px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.store-credits {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid #7c3aed;
    border-radius: 8px;
    padding: 1em;
    margin-bottom: 1.5em;
    text-align: center;
}

.credits-display {
    font-size: 1.2em;
    font-weight: bold;
    color: #b983ff;
}

.gacha-section {
    background: transparent;
    border-radius: 0;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 2px solid var(--border-primary);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.gacha-left {
    display: flex;
    flex-direction: column;
}

.gacha-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gacha-section h3 {
    margin-bottom: 0.75rem;
    text-align: center;
}

.gacha-section p {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-secondary-purple);
}

.rarity-info {
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem;
    padding: 0.6rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Force any rarity-info instance to be horizontal and keep items from stretching
   in case other rules try to make them grid/column. This ensures side-by-side
   layout across themes/banners. */
.rarity-info {
    display: flex !important;
    flex-wrap: nowrap !important;
}
.rarity-info .rarity-item {
    flex: 0 0 auto; /* don't grow or shrink to fill row */
    min-width: 0; /* allow content to determine width */
}

.rarity-item {
    text-align: center;
    min-height: 56px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg-elevated);
    font-size: 0.95rem;
    border: 1px solid var(--border-secondary);
    white-space: nowrap;
}

.rarity-common { color: #ffffff; }
.rarity-rare { color: #4a90e2; }
.rarity-epic { color: #b83aed; }
.rarity-legendary { color: #ffd700; }

.gacha-actions {
    text-align: center;
    margin-bottom: 1em;
}

.gacha-button {
    background: var(--accent-primary);
    border: none;
    border-radius: 8px;
    padding: 1rem 2rem;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.gacha-button:hover:not(:disabled) {
    background: var(--accent-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.gacha-button:disabled {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.collection-controls select,
#bannerSelect,
#collectionBannerSelect {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

/* Search input for collection */
.collection-search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.collection-search-box input {
    flex: 1;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.collection-search-box input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
}

.collection-search-box input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.6;
}

/* Banner previews removed from store UI */

.card-result {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-primary);
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    word-wrap: break-word;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

.card-reveal h3 {
    font-size: 1.4em;
    margin-bottom: 0.8em;
    text-shadow: 0 0 10px currentColor;
}

.card-info h4 {
    font-size: 1.2em;
    margin-bottom: 0.5em;
    color: #fff;
}

.card-info p {
    color: #d1b3ff;
    font-size: 0.9em;
}

.store-actions, .collection-actions {
    display: flex;
    gap: 1em;
    justify-content: center;
    flex-wrap: wrap;
}

.collection-button, .home-button {
    background: linear-gradient(135deg, #1a0026 0%, #2d1b40 100%);
    border: 3px solid #7c3aed;
    border-radius: 12px;
    padding: 1.2em 2.5em;
    color: #b983ff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.collection-button:hover, .home-button:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #b983ff 100%);
    border-color: #b983ff;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.5);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Collection Interface */
.collection-interface {
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
    box-sizing: border-box;
    justify-content: start; 
}

.collection-card {
    background: transparent; /* Let image fill completely */
    border: 2px solid;
    border-radius: 10px;
    padding: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, z-index 0.1s ease;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4; /* Portrait format - taller cards */
    box-sizing: border-box;
    display: block; /* Changed from flex to block since image is absolute */
    text-align: center;
    opacity: 1;
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* Fade out animation when hiding */
.collection-card.fade-out {
    opacity: 0;
    transform: scale(0.95);
}

/* Fade in animation when showing */
.collection-card.fade-in {
    animation: fadeInCard 0.3s ease forwards;
}

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

.collection-card:hover {
    transform: scale(1.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    z-index: 100;
}

.collection-card.owned {
    background: transparent; /* Image fills the card */
}

.collection-card.unowned {
    background: rgba(10, 0, 20, 0.3);
    border-style: dashed;
    opacity: 0.6;
}

.collection-card.unowned:hover {
    transform: none;
    box-shadow: none;
    cursor: default;
}

/* Goldfoil border - textured gold gradient that overrides rarity colors */
.collection-card.foil-goldfoil {
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, 
                    #ffd700 0%,
                    #ffed4e 10%,
                    #d4af37 20%,
                    #ffd700 30%,
                    #ffb700 40%,
                    #d4af37 50%,
                    #ffd700 60%,
                    #ffed4e 70%,
                    #d4af37 80%,
                    #ffb700 90%,
                    #ffd700 100%
                ) border-box !important;
    background-size: 200% 200%;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 
                inset 0 0 20px rgba(255, 215, 0, 0.2);
    animation: goldBorderFlow 8s ease-in-out infinite;
}

.collection-card.foil-goldfoil:hover {
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.6), 
                0 0 25px rgba(255, 215, 0, 0.7),
                inset 0 0 30px rgba(255, 215, 0, 0.3);
}

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

/* Holofoil border - animated rainbow gradient that overrides rarity colors */
.collection-card.foil-holofoil {
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg,
                    #ff00ff 0%,
                    #8000ff 15%,
                    #0080ff 30%,
                    #00ffff 45%,
                    #00ff00 60%,
                    #ffff00 75%,
                    #ff0000 90%,
                    #ff00ff 100%
                ) border-box !important;
    background-size: 200% 200%;
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.35),
                inset 0 0 15px rgba(255, 0, 255, 0.12);
    animation: rainbowBorderFlow 20s linear infinite;
}

.collection-card.foil-holofoil:hover {
    box-shadow: 0 10px 30px rgba(255, 0, 255, 0.5),
                0 0 25px rgba(0, 255, 255, 0.35),
                inset 0 0 20px rgba(255, 0, 255, 0.15);
}

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

/* Card styling - image fills entire card */
.card-image {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    clip-path: inset(0);
    border-radius: 10px;
}

.card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Subtle gradient tint at bottom for text readability */
.card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Depth effect layer - enhances shadow areas with gradient color */
.collection-card .card-image {
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3), inset 0 -40px 60px rgba(0, 0, 0, 0.5);
}.card-visual {
    display: none; /* Hide the old card-visual div, image now fills entire card */
}
/* Center card name and count - positioned absolutely over image */
.collection-card .card-name, .collection-card .card-count, .collection-card .card-set {
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    padding: 0.3em 0.5em;
    margin: 0;
}

.collection-card .card-name {
    bottom: 1.2em !important;
    padding: 0.3em 0.5em 0.2em 0.5em !important;
}

.collection-card .card-set {
    bottom: 0.3em !important;
    left: 0.5em !important;
    right: auto !important;
    text-align: left !important;
    padding: 0 0.3em !important;
    font-size: 0.5em !important; /* Even smaller set name */
    opacity: 0.8 !important;
}

.collection-card .card-count {
    bottom: 0.3em !important;
    right: 0.5em !important;
    left: auto !important;
    text-align: right !important;
    padding: 0 0.3em !important;
}

.card-icon {
    font-size: 3em;
    margin-bottom: 0.2em;
}

.card-id {
    font-size: 0.7em;
    font-weight: bold;
    color: #b983ff;
    letter-spacing: 1px;
}

.card-name {
    font-size: 0.9em;
    font-weight: bold;
    color: #fff;
    margin: 0;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.card-set {
    font-size: 0.7em;
    color: #ccc;
    text-align: center;
    margin: 0.2em 0;
    padding: 0 0.75em;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Foil indicator dots - show which foil types the user owns */
.foil-indicators {
    position: absolute;
    bottom: 0.3em;
    left: 2.6rem;
    display: flex;
    gap: 0.25rem;
    z-index: 11;
}

.foil-dot {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.foil-dot.rainbow {
    background: linear-gradient(135deg,
        #ff00ff 0%,
        #00ffff 25%,
        #00ff00 50%,
        #ffff00 75%,
        #ff0000 100%
    );
    animation: rainbowPulse 3s ease-in-out infinite;
}

.foil-dot.gold {
    background: linear-gradient(135deg,
        #ffd700 0%,
        #ffed4e 50%,
        #d4af37 100%
    );
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5);
    animation: goldPulse 2s ease-in-out infinite;
}

@keyframes rainbowPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

@keyframes goldPulse {
    0%, 100% { opacity: 0.8; box-shadow: 0 0 5px rgba(255, 215, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5); }
    50% { opacity: 1; box-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.5); }
}
/* Duplicate foil-dot rules removed (defined earlier) */

/* Favorite button styling */
.favorite-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    padding: 0;
    width: auto;
    height: auto;
    cursor: pointer;
    font-size: 1.4em;
    z-index: 10;
    transition: all 0.2s ease;
    line-height: 1;
    font-weight: 400;
    /* Outline star by default */
    -webkit-text-stroke: 1.5px currentColor;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    pointer-events: auto; /* Ensure it's clickable */
}

.favorite-btn:hover,
.collection-card:has(.favorite-btn:hover) {
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.favorite-btn.active {
    /* Filled star when active */
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0;
}

.foil-btn {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: transparent;
    border: none;
    padding: 0;
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    line-height: 1;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    pointer-events: auto;
}

.foil-btn:hover:not(.disabled),
.collection-card:has(.foil-btn:hover:not(.disabled)) {
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.foil-btn.disabled {
    cursor: not-allowed;
    opacity: 0.3 !important;
    pointer-events: none !important;
}

.collection-card {
    position: relative;
}

.card-count {
    font-size: 0.8em;
    color: #b983ff;
    text-align: center;
    margin: 0;
    padding: 0 0.75em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.card-rarity {
    font-size: 1.2em;
    text-align: center;
}

.clickable-card {
    cursor: pointer;
}

/* Hover handled by .collection-card:hover rule above */

/* Simplified card modal styling */
.card-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
}

.card-modal-fullimage {
    max-width: 90vw;
    max-height: 90vh;
    width: fit-content;
    height: fit-content;
    cursor: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.card-modal-fullimage img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: cover;
    object-position: top center; /* Keep fullscreen preview focused on top */
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.card-modal-visual-large {
    width: 400px;
    height: 400px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid;
    cursor: auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

.card-modal-icon-large {
    font-size: 6em;
    margin-bottom: 0.3em;
}

.card-modal-name {
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 0 1em;
}

/* Holofoil effect for full-size card modal */
.card-modal-fullimage.foil-holofoil {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.card-modal-fullimage.foil-holofoil::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, 
            #ff006e 0%,
            #ff0080 4%,
            #ff1493 8%,
            #ff69b4 12%,
            #ff00ff 16%,
            #d000ff 20%,
            #6000ff 24%,
            #0040ff 28%,
            #0080ff 32%,
            #00d4ff 36%,
            #00ffff 40%,
            #00ff80 44%,
            #00ff00 48%,
            #80ff00 52%,
            #ffff00 56%,
            #ffaa00 60%,
            #ff6600 64%,
            #ff0000 68%,
            #ff0080 72%,
            #ff00ff 76%,
            #6000ff 80%,
            #0080ff 84%,
            #00ffff 88%,
            #00ff00 92%,
            #ffff00 96%,
            #ff006e 100%
        );
    background-size: 400% 400%;
    animation: rainbowFlow 9s linear infinite;
    pointer-events: none;
    mix-blend-mode: color-dodge;
    z-index: 2;
    opacity: 0.35;
    border-radius: 10px;
    inset: 0;
}

.card-modal-fullimage.foil-holofoil::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at var(--shimmer-x, 50%) var(--shimmer-y, 50%), 
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 100, 200, 0.3) 10%,
            rgba(100, 200, 255, 0.2) 25%,
            rgba(100, 255, 200, 0.15) 40%,
            transparent 70%),
        linear-gradient(135deg,
            rgba(255, 0, 100, 0.1) 0%,
            rgba(0, 200, 255, 0.1) 50%,
            rgba(100, 255, 0, 0.1) 100%);
    pointer-events: none;
    mix-blend-mode: hard-light;
    z-index: 3;
    border-radius: 10px;
    inset: 0;
    animation: shimmerPulse 2s ease-in-out infinite;
}

/* Goldfoil modal effect */
.card-modal-fullimage.foil-goldfoil {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.card-modal-fullimage.foil-goldfoil::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 223, 0, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 200, 50, 0.4) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(255, 180, 0, 0.5) 0%, transparent 40%),
        radial-gradient(circle at 90% 20%, rgba(255, 230, 100, 0.4) 0%, transparent 45%),
        linear-gradient(135deg, 
            rgba(255, 215, 0, 0.3) 0%,
            rgba(255, 180, 0, 0.2) 25%,
            rgba(255, 230, 100, 0.25) 50%,
            rgba(255, 200, 50, 0.2) 75%,
            rgba(255, 215, 0, 0.3) 100%
        );
    background-size: 200% 200%, 200% 200%, 150% 150%, 180% 180%, 160% 160%, 100% 100%;
    animation: goldenGlitter 3s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: 0.28;
    border-radius: 10px;
    inset: 0;
}

.card-modal-fullimage.foil-goldfoil::after { background: none !important; filter: none !important; }

/* Foil Modal Styles */
.foil-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    animation: modalFadeIn 0.2s ease-out;
}

.foil-modal {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
    border: 2px solid #7c3aed;
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.5), 0 0 40px rgba(124, 58, 237, 0.2);
    animation: cardZoomIn 0.2s ease-out;
}

.foil-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(124, 58, 237, 0.3);
}

.foil-modal-header h2 {
    color: #fff;
    font-size: 1.4em;
    margin: 0;
    background: linear-gradient(90deg, #a78bfa, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.foil-modal-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5em;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.foil-modal-close:hover {
    background: rgba(124, 58, 237, 0.3);
    transform: scale(1.1);
}

.foil-modal-content {
    color: #fff;
}

.foil-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Foil Item Layout */
.foil-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    gap: 0.75rem;
    transition: all 0.2s ease;
    flex-wrap: nowrap;
}

.foil-item:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.5);
}

.foil-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.foil-icon {
    font-size: 1.8em;
    flex-shrink: 0;
    display: inline-block;
}

/* Holofoil icon glisten animation */
.foil-item:has(.foil-item-header:contains("Holofoil")) .foil-icon,
.foil-item:nth-child(3) .foil-icon {
    animation: holoGlisten 2s ease-in-out infinite;
}

/* Goldfoil icon glisten animation */
.foil-item:has(.foil-item-header:contains("Goldfoil")) .foil-icon,
.foil-item:nth-child(2) .foil-icon {
    animation: goldfoilGlisten 2.5s ease-in-out infinite;
}

.foil-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.foil-item-info h3 {
    color: #fff;
    font-size: 0.95em;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foil-item-method {
    color: #bbb;
    font-size: 0.75em;
    margin: 0.2rem 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foil-item-btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.75em;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
    height: fit-content;
}

/* Normal button (always owned, always disabled) */
.foil-owned-btn {
    background: rgba(124, 58, 237, 0.3);
    color: #a78bfa;
    cursor: default;
    opacity: 0.7;
}

/* Goldfoil button (owned = disabled, not owned = disabled but not clickable) */
.foil-goldfoil-btn {
    background: rgba(124, 58, 237, 0.3);
    color: #a78bfa;
    cursor: default;
    opacity: 0.5;
}

/* Craft button */
.foil-craft-btn {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    color: #fff;
}

.foil-craft-btn:not(:disabled):hover {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.foil-craft-btn:disabled {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    cursor: not-allowed;
    opacity: 0.6;
}

.foil-craft-btn:disabled:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.foil-variant-btn {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    color: #fff;
}

.foil-variant-btn:not(:disabled):hover {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.foil-variant-btn:disabled {
    background: rgba(124, 58, 237, 0.3);
    color: #a78bfa;
    cursor: default;
    opacity: 0.5;
}

.foil-variant-btn.active,
.foil-craft-btn.active {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #fff;
    border: 2px solid #22c55e;
}

.foil-variant-btn.active:hover,
.foil-craft-btn.active:hover {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

/* Mobile responsiveness for foil modal */
@media (max-width: 600px) {
    .foil-modal {
        max-width: 95%;
        padding: 1rem;
    }
    
    .foil-modal-header h2 {
        font-size: 1.2em;
    }
    
    .foil-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .foil-item-btn {
        width: 100%;
        text-align: center;
    }
}

.foil-switch-section,
.foil-craft-section {
    padding: 1rem;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
}

.foil-switch-section h3,
.foil-craft-section h3 {
    color: #a78bfa;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 0.75rem 0;
}

.foil-switch-section p,
.foil-craft-section p {
    margin: 0 0 0.75rem 0;
    color: #ccc;
    font-size: 0.85em;
}

.foil-craft-cost {
    font-size: 0.8em;
    color: #888;
    margin: 0.5rem 0 0 0;
}

.foil-owned {
    text-align: center;
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.95em;
    padding: 1rem 0;
}

/* Mobile responsiveness for foil modal */
@media (max-width: 600px) {
    .foil-modal {
        max-width: 95%;
        padding: 1rem;
    }
    
    .foil-modal-header h2 {
        font-size: 1.2em;
    }
    
    .foil-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .foil-item-btn {
        width: 100%;
        text-align: center;
    }
}

/* Mobile responsiveness for store */
@media (max-width: 600px) {
    /* Revert to vertical layout on mobile */
    .main-layout {
        flex-direction: column;
        gap: 1.5em;
    }
    
    .store-sidebar {
        min-width: unset;
        max-width: unset;
    }
    
    .store-section {
        margin-top: 1.5em; /* Restore margin for mobile vertical layout */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .gacha-section {
        grid-template-columns: 1fr !important;
        gap: 1em !important;
    }
    
    .rarity-info {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Use auto-fill on phones so cards adapt to available width */
    .collection-grid, .big-collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        justify-items: stretch !important;
    }

    .collection-grid > .collection-card, .big-collection-grid > .collection-card {
        width: 100% !important;
        max-width: 100% !important;
        align-self: start !important;
    }
    
    .store-actions, .collection-actions {
        /* two columns on mobile for tighter layouts */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6em;
    }
    
    .gacha-button, .collection-button, .home-button {
        width: 100%;
    }

    /* Make collection cards taller on phones so they don't look thin */
    .collection-card {
        min-width: 0; /* allow flexible shrinking when required */
    }
    .collection-card .card-image img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    /* Ensure mobile cards have the same text styling and gradient as desktop */
    .collection-card .card-name {
        bottom: 1.2em !important;
        padding: 0.3em 0.5em 0.2em 0.5em !important;
        font-size: 0.9em !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        text-align: center !important;
    }
    
    .collection-card .card-set {
        bottom: 0.3em !important;
        left: 0.5em !important;
        right: auto !important;
        text-align: left !important;
        padding: 0 0.3em !important;
        font-size: 0.5em !important;
        opacity: 0.8 !important;
        width: auto !important;
    }
    
    .collection-card .card-count {
        bottom: 0.3em !important;
        right: 0.5em !important;
        left: auto !important;
        text-align: right !important;
        padding: 0 0.3em !important;
        font-size: 0.9em !important;
        width: auto !important;
    }
}

/* Very narrow screens (like older phones) */
@media (max-width: 400px) {
    .collection-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on very narrow screens */
        gap: 6px;
    }
}

/* Tablet screens */
@media (min-width: 601px) and (max-width: 900px) {
    .collection-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on tablets */
        gap: 12px;
    }
}

/* ========================================
   DASHBOARD STYLES
   ======================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 100%;
    width: 100%;
    align-items: start; /* Prevent vertical stretching */
}

.dashboard-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all var(--transition-base);
    max-height: 70vh; /* Prevent cards from stretching too tall */
    height: fit-content; /* Let cards size to their content */
}

.dashboard-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

/* Stats Card */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-item {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-secondary);
    transition: all var(--transition-base);
}

.stat-item:hover {
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.stat-level { color: var(--accent-primary); text-shadow: 0 0 10px rgba(139, 92, 246, 0.3); }
.stat-credits { color: var(--accent-success); }
.stat-xp { font-size: 1.25rem; }
.stat-cards { color: var(--accent-secondary); }

.progress-bar-container {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
}

.progress-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.progress-bar {
    height: 10px;
    background: var(--bg-elevated);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-secondary);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 5px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}

/* ========================================
   SHOP LAYOUT
   ======================================== */

.shop-layout-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.shop-hub-shell {
    height: 100%;
    min-height: calc(100vh - var(--topbar-height) - 5rem);
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: 1rem;
    overflow: hidden;
}

.shop-hub-shell.shop-slide-out-left,
.shop-hub-shell.shop-slide-out-right,
.shop-hub-shell.shop-slide-in-left,
.shop-hub-shell.shop-slide-in-right {
    will-change: transform, opacity;
}

.shop-hub-shell.shop-slide-out-left {
    animation: shopSlideOutLeft 0.16s ease forwards;
}

.shop-hub-shell.shop-slide-out-right {
    animation: shopSlideOutRight 0.16s ease forwards;
}

.shop-hub-shell.shop-slide-in-left {
    animation: shopSlideInLeft 0.22s ease forwards;
}

.shop-hub-shell.shop-slide-in-right {
    animation: shopSlideInRight 0.22s ease forwards;
}

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

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

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

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

.shop-hub-shell .dashboard-card {
    height: 100%;
    max-height: none;
}

.shop-expandable-section {
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.65rem;
    min-height: 0;
    height: 100%;
}

.shop-expandable-section.expanded {
    grid-template-rows: auto 1fr;
}

.shop-expandable-section.expanded .shop-preview-grid {
    display: none;
}

.shop-hub-shell.shop-focus-cards {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.22fr);
}

.shop-hub-shell.shop-focus-themes {
    grid-template-columns: minmax(180px, 0.22fr) minmax(0, 1fr);
}

.shop-hub-shell.shop-focus-cards .shop-expandable-section[data-section='cards'],
.shop-hub-shell.shop-focus-themes .shop-expandable-section[data-section='themes'] {
    grid-template-rows: auto 1fr;
}

.shop-hub-shell.shop-focus-cards .shop-expandable-section[data-section='cards'] .shop-preview-grid,
.shop-hub-shell.shop-focus-themes .shop-expandable-section[data-section='themes'] .shop-preview-grid {
    display: none;
}

.shop-hub-shell.shop-focus-cards .shop-expandable-section[data-section='themes'],
.shop-hub-shell.shop-focus-themes .shop-expandable-section[data-section='cards'] {
    grid-template-rows: auto;
}

.shop-hub-shell.shop-focus-cards .shop-expandable-section[data-section='themes'] .shop-preview-grid,
.shop-hub-shell.shop-focus-cards .shop-expandable-section[data-section='themes'] .shop-expandable-body,
.shop-hub-shell.shop-focus-themes .shop-expandable-section[data-section='cards'] .shop-preview-grid,
.shop-hub-shell.shop-focus-themes .shop-expandable-section[data-section='cards'] .shop-expandable-body {
    display: none;
}

.shop-expandable-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
}

.shop-expand-indicator {
    font-size: 1.4rem;
    color: var(--accent-primary);
    line-height: 1;
}

.shop-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.shop-preview-chip {
    border: 1px solid var(--border-secondary);
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.shop-preview-chip-image {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-secondary);
}

.shop-preview-chip-info {
    min-width: 0;
}

.shop-preview-chip-name {
    font-size: 0.82rem;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-preview-chip-sub {
    font-size: 0.74rem;
    color: var(--text-tertiary);
}

.shop-preview-empty {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    padding: 0.5rem;
}

.shop-expandable-body {
    min-height: 0;
    overflow: auto;
    border-top: 1px solid var(--border-secondary);
    padding-top: 0.55rem;
}

.shop-hub-name-card {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.shop-section-shell {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.95rem;
    min-height: calc(100vh - var(--topbar-height) - 5rem);
}

.shop-section-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
}

.shop-back-btn {
    width: auto;
    white-space: nowrap;
}

.shop-section-content {
    min-height: 0;
    overflow: auto;
}

.shop-panel {
    height: 100%;
    max-height: none;
}

.shop-panel-cards {
    grid-column: 1 / -1;
}

.shop-panel-theme {
    grid-column: span 7;
}

.shop-panel-name {
    grid-column: span 5;
}

.shop-panel-sub {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
}

.shop-stats-grid {
    margin-bottom: 1rem;
}

.shop-action-btn {
    width: 100%;
}

.shop-name-wrap {
    margin-bottom: 1rem;
}

.shop-name-current-wrap {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-secondary);
}

.shop-name-current-label {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.shop-name-current-value {
    color: var(--accent-primary);
    font-weight: 600;
}

.shop-name-input {
    width: 100%;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.shop-name-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.shop-name-cost-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.8rem;
}

.shop-name-cost {
    color: var(--accent-warning);
    font-weight: 700;
}

.shop-theme-section {
    margin-bottom: 1rem;
}

.shop-theme-section-title {
    font-weight: 700;
    color: var(--accent-secondary);
    margin-bottom: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.shop-theme-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.shop-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
}

.shop-theme-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.7rem;
    background: var(--bg-tertiary);
    padding: 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--border-secondary);
}

.shop-theme-preview {
    width: 100%;
    height: 74px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    background: rgba(0, 0, 0, 0.2);
}

.shop-theme-preview-strip {
    width: 100%;
    height: 74px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    border-radius: 8px;
}

.shop-theme-preview-tile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    background: rgba(0, 0, 0, 0.2);
}

.shop-theme-info {
    min-width: 0;
}

.shop-theme-name {
    font-weight: 700;
    color: var(--text-primary);
}

.shop-theme-description {
    font-size: 0.82em;
    color: var(--text-tertiary);
}

.shop-theme-price {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--accent-warning);
    font-weight: 600;
}

.shop-theme-action {
    flex-shrink: 0;
}

.shop-theme-btn {
    width: 100%;
}

.shop-loading-hint {
    opacity: 0.65;
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
}

.shop-direct-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--shop-card-row-height, 240px);
    align-content: start;
    gap: 0.75rem;
}

.shop-hub-shell.shop-focus-cards .shop-expandable-section[data-section='cards'] .shop-direct-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shop-direct-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 10px;
    padding: 0.6rem;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    height: 100%;
    min-height: 0;
}

.shop-direct-card-visual {
    position: relative;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    background: rgba(0, 0, 0, 0.15);
}

.shop-direct-card-image {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: cover;
    display: block;
    border: none;
}

.shop-direct-card-visual::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.52) 35%, rgba(0, 0, 0, 0.2) 68%, transparent 100%);
    pointer-events: none;
}

.shop-direct-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0.5rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.shop-direct-card-rarity {
    font-size: 0.76rem;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.shop-direct-card-owned {
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.shop-direct-card-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.shop-direct-card-buy {
    width: 100%;
}

@media (max-width: 600px) {
    .shop-hub-shell,
    .shop-hub-shell.shop-focus-cards,
    .shop-hub-shell.shop-focus-themes {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: auto;
        height: auto;
        overflow: visible;
    }

    .shop-hub-shell .dashboard-card,
    .shop-expandable-section {
        height: auto;
        max-height: none;
    }
}

/* ========================================
   HOME DASHBOARD
   ======================================== */

.home-dashboard-grid {
    height: calc(100vh - var(--topbar-height) - 5rem);
    overflow: hidden;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.home-card {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.home-card .activity-list,
.home-card .module-list {
    flex: 1;
    overflow: hidden;
}

.home-avatar-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.55rem;
}

.home-avatar-badge {
    font-size: 0.72rem;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    border: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

.home-avatar-badge.achievement {
    color: var(--accent-success);
    border-color: rgba(34, 197, 94, 0.35);
}

.home-avatar-badge.store {
    color: var(--accent-secondary);
    border-color: rgba(59, 130, 246, 0.35);
}

.home-avatar-badge.default {
    color: var(--text-tertiary);
}

.home-avatar-image {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border-secondary);
}

.home-avatar-name {
    font-weight: 700;
    color: var(--text-primary);
}

.home-avatar-requirement {
    color: var(--text-tertiary);
    font-size: 0.82rem;
    max-width: 320px;
}

.home-avatar-progress {
    color: var(--accent-primary);
    font-size: 0.78rem;
    font-weight: 600;
}

.home-avatar-action {
    width: 100%;
    margin-top: 0.35rem;
}

.home-daily-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

.home-daily-pill {
    font-size: 0.76rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-secondary);
    background: var(--bg-tertiary);
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
}

/* Action Buttons */
.action-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.action-btn.wide {
    grid-column: span 2;
}

.action-btn.primary {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.action-btn.primary:hover {
    background: var(--accent-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}

.action-btn.secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.action-btn.secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.action-btn.tertiary {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

.action-btn.tertiary:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.action-icon {
    width: 24px;
    height: 24px;
}

/* Activity List */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    transition: all var(--transition-base);
}

.activity-item:hover {
    border-color: var(--accent-primary);
}

/* Recent card items with background images */
.recent-card-item {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-size: cover !important;
    background-position: right 20% !important;
    z-index: 1;
}

.recent-card-item:hover {
    transform: none;
    border-color: var(--accent-secondary);
    box-shadow: 0 2px 8px rgba(185, 131, 255, 0.2);
    z-index: 100;
}

.recent-card-item:active {
    transform: scale(0.98);
}

.recent-card-item .activity-icon {
    position: relative;
    z-index: 1;
    background: rgba(20, 0, 40, 0.8);
    backdrop-filter: blur(4px);
}

.recent-card-item .activity-content {
    position: relative;
    z-index: 1;
}

.activity-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: 8px;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.activity-time {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Module List */
.module-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.module-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.module-item:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
}

.module-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
}

.module-info {
    flex: 1;
}

.module-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.module-desc {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-width);
        height: 100vh;
        z-index: 1000;
        overflow-y: auto;
    }
    
    .sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
        z-index: 1000;
    }
    
    /* Mobile overlay behind sidebar */
    .main-content::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 999;
    }
    
    .main-content.sidebar-open::before {
        opacity: 1;
        pointer-events: auto;
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .main-content.sidebar-collapsed {
        margin-left: 0;
    }
    
    #dynamic-content {
        padding: 1rem;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .home-dashboard-grid {
        height: auto;
        overflow: visible;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .shop-layout-grid {
        grid-template-columns: 1fr;
    }

    .shop-hub-shell {
        height: auto;
        grid-template-rows: auto;
        overflow: visible;
    }

    .shop-preview-grid {
        grid-template-columns: 1fr;
    }

    .shop-section-shell {
        min-height: 0;
    }

    .shop-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .shop-panel-name,
    .shop-panel-theme,
    .shop-panel-cards {
        grid-column: auto;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .action-buttons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .top-bar-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;
    }

    .shop-theme-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .shop-theme-action {
        width: 100%;
    }

    .shop-theme-action .drone-begin-btn {
        width: 100%;
    }
}

/* ========================================
   LOGIN SCREEN
   ======================================== */

.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--topbar-height) - 4rem);
    padding: 2rem;
}

.login-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: 16px;
    padding: 3rem 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-xl);
}

.login-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.login-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 2rem;
    background: var(--accent-primary);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.login-btn:hover {
    background: var(--accent-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.login-icon {
    width: 20px;
    height: 20px;
}

/* Card modal animations */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(5px);
    }
}

@keyframes cardZoomIn {
    from {
        opacity: 0;
        transform: scale(0.5) rotateY(90deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) rotateY(0deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes holoGlisten {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(123, 58, 237, 0.6)) drop-shadow(0 0 10px rgba(167, 139, 250, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(123, 58, 237, 0.8)) drop-shadow(0 0 25px rgba(167, 139, 250, 0.6));
    }
}

@keyframes goldfoilGlisten {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 10px rgba(253, 224, 71, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 25px rgba(253, 224, 71, 0.6));
    }
}

/* Trainer Gallery Holofoil effect on cards */
.foil-holofoil .card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, 
            #ff006e 0%,
            #ff0080 4%,
            #ff1493 8%,
            #ff69b4 12%,
            #ff00ff 16%,
            #d000ff 20%,
            #6000ff 24%,
            #0040ff 28%,
            #0080ff 32%,
            #00d4ff 36%,
            #00ffff 40%,
            #00ff80 44%,
            #00ff00 48%,
            #80ff00 52%,
            #ffff00 56%,
            #ffaa00 60%,
            #ff6600 64%,
            #ff0000 68%,
            #ff0080 72%,
            #ff00ff 76%,
            #6000ff 80%,
            #0080ff 84%,
            #00ffff 88%,
            #00ff00 92%,
            #ffff00 96%,
            #ff006e 100%
        );
    background-size: 400% 400%;
    animation: rainbowFlow 9s linear infinite;
    pointer-events: none;
    mix-blend-mode: color-dodge;
    z-index: 2;
    opacity: 0.35;
}

@keyframes rainbowFlow {
    0% {
        background-position: 0% 0%;
        opacity: 0.25;
    }
    50% {
        background-position: 100% 100%;
        opacity: 0.45;
    }
    100% {
        background-position: 0% 0%;
        opacity: 0.25;
    }
}

.foil-holofoil .card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at var(--shimmer-x, 50%) var(--shimmer-y, 50%), 
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 100, 200, 0.3) 10%,
            rgba(100, 200, 255, 0.2) 25%,
            rgba(100, 255, 200, 0.15) 40%,
            transparent 70%),
        linear-gradient(135deg,
            rgba(255, 0, 100, 0.1) 0%,
            rgba(0, 200, 255, 0.1) 50%,
            rgba(100, 255, 0, 0.1) 100%);
    pointer-events: none;
    mix-blend-mode: hard-light;
    z-index: 3;
    animation: shimmerPulse 2s ease-in-out infinite;
}

@keyframes shimmerPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* Goldfoil effect - subtle golden base glow (reduced to let stars pop) */
.foil-goldfoil .card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 223, 0, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 200, 50, 0.2) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(255, 180, 0, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 90% 20%, rgba(255, 230, 100, 0.2) 0%, transparent 45%),
        linear-gradient(135deg, 
            rgba(255, 215, 0, 0.15) 0%,
            rgba(255, 180, 0, 0.1) 25%,
            rgba(255, 230, 100, 0.12) 50%,
            rgba(255, 200, 50, 0.1) 75%,
            rgba(255, 215, 0, 0.15) 100%
        );
    background-size: 200% 200%, 200% 200%, 150% 150%, 180% 180%, 160% 160%, 100% 100%;
    animation: goldenGlitter 5s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: 0.15; /* lighter base so sparkles stand out */
}

/* Disable the previous bloom shimmer so we can use crisp cartoon stars */
.foil-goldfoil .card-image::after { background: none !important; filter: none !important; }



@keyframes starSparkle1 {
    0%   { top: 12%; left: 18%; opacity: 0; }
    35%  { top: 12%; left: 18%; opacity: 1; }
    65%  { top: 12%; left: 18%; opacity: 0.2; }
    66%  { top: 45%; left: 72%; opacity: 0; }
    100% { top: 45%; left: 72%; opacity: 0; }
}

@keyframes starSparkle2 {
    0%   { top: 28%; left: 78%; opacity: 0; }
    35%  { top: 28%; left: 78%; opacity: 1; }
    65%  { top: 28%; left: 78%; opacity: 0.2; }
    66%  { top: 64%; left: 14%; opacity: 0; }
    100% { top: 64%; left: 14%; opacity: 0; }
}

@keyframes starSparkle3 {
    0%   { top: 54%; left: 22%; opacity: 0; }
    35%  { top: 54%; left: 22%; opacity: 1; }
    65%  { top: 54%; left: 22%; opacity: 0.2; }
    66%  { top: 8%; left: 58%; opacity: 0; }
    100% { top: 8%; left: 58%; opacity: 0; }
}

@keyframes starSparkle4 {
    0%   { top: 66%; left: 64%; opacity: 0; }
    35%  { top: 66%; left: 64%; opacity: 1; }
    65%  { top: 66%; left: 64%; opacity: 0.2; }
    66%  { top: 78%; left: 82%; opacity: 0; }
    100% { top: 78%; left: 82%; opacity: 0; }
}

@keyframes starSparkle5 {
    0%   { top: 40%; left: 48%; opacity: 0; }
    35%  { top: 40%; left: 48%; opacity: 1; }
    65%  { top: 40%; left: 48%; opacity: 0.2; }
    66%  { top: 20%; left: 35%; opacity: 0; }
    100% { top: 20%; left: 35%; opacity: 0; }
}

@keyframes starSparkle6 {
    0%   { top: 78%; left: 14%; opacity: 0; }
    35%  { top: 78%; left: 14%; opacity: 1; }
    65%  { top: 78%; left: 14%; opacity: 0.2; }
    66%  { top: 32%; left: 68%; opacity: 0; }
    100% { top: 32%; left: 68%; opacity: 0; }
}

@keyframes starSparkle7 {
    0%   { top: 8%; left: 58%; opacity: 0; }
    35%  { top: 8%; left: 58%; opacity: 1; }
    65%  { top: 8%; left: 58%; opacity: 0.2; }
    66%  { top: 56%; left: 82%; opacity: 0; }
    100% { top: 56%; left: 82%; opacity: 0; }
}

@keyframes starSparkle8 {
    0%   { top: 84%; left: 82%; opacity: 0; }
    35%  { top: 84%; left: 82%; opacity: 1; }
    65%  { top: 84%; left: 82%; opacity: 0.2; }
    66%  { top: 22%; left: 12%; opacity: 0; }
    100% { top: 22%; left: 12%; opacity: 0; }
}

@keyframes starSparkleModal1 {
    0%   { top: 12%; left: 18%; opacity: 0; }
    32%  { top: 12%; left: 18%; opacity: 1; }
    60%  { top: 12%; left: 18%; opacity: 0.15; }
    61%  { top: 45%; left: 72%; opacity: 0; }
    100% { top: 45%; left: 72%; opacity: 0; }
}

@keyframes starSparkleModal2 {
    0%   { top: 28%; left: 78%; opacity: 0; }
    32%  { top: 28%; left: 78%; opacity: 1; }
    60%  { top: 28%; left: 78%; opacity: 0.15; }
    61%  { top: 64%; left: 14%; opacity: 0; }
    100% { top: 64%; left: 14%; opacity: 0; }
}

@keyframes starSparkleModal3 {
    0%   { top: 54%; left: 22%; opacity: 0; }
    32%  { top: 54%; left: 22%; opacity: 1; }
    60%  { top: 54%; left: 22%; opacity: 0.15; }
    61%  { top: 8%; left: 58%; opacity: 0; }
    100% { top: 8%; left: 58%; opacity: 0; }
}

@keyframes starSparkleModal4 {
    0%   { top: 66%; left: 64%; opacity: 0; }
    32%  { top: 66%; left: 64%; opacity: 1; }
    60%  { top: 66%; left: 64%; opacity: 0.15; }
    61%  { top: 78%; left: 82%; opacity: 0; }
    100% { top: 78%; left: 82%; opacity: 0; }
}

@keyframes starSparkleModal5 {
    0%   { top: 40%; left: 48%; opacity: 0; }
    32%  { top: 40%; left: 48%; opacity: 1; }
    60%  { top: 40%; left: 48%; opacity: 0.15; }
    61%  { top: 20%; left: 35%; opacity: 0; }
    100% { top: 20%; left: 35%; opacity: 0; }
}

@keyframes starSparkleModal6 {
    0%   { top: 78%; left: 14%; opacity: 0; }
    32%  { top: 78%; left: 14%; opacity: 1; }
    60%  { top: 78%; left: 14%; opacity: 0.15; }
    61%  { top: 32%; left: 68%; opacity: 0; }
    100% { top: 32%; left: 68%; opacity: 0; }
}

@keyframes starSparkleModal7 {
    0%   { top: 8%; left: 58%; opacity: 0; }
    32%  { top: 8%; left: 58%; opacity: 1; }
    60%  { top: 8%; left: 58%; opacity: 0.15; }
    61%  { top: 56%; left: 82%; opacity: 0; }
    100% { top: 56%; left: 82%; opacity: 0; }
}

@keyframes starSparkleModal8 {
    0%   { top: 84%; left: 82%; opacity: 0; }
    32%  { top: 84%; left: 82%; opacity: 1; }
    60%  { top: 84%; left: 82%; opacity: 0.15; }
    61%  { top: 22%; left: 12%; opacity: 0; }
    100% { top: 22%; left: 12%; opacity: 0; }
}

@keyframes goldenGlitter {
    0% {
        background-position: 0% 0%, 100% 100%, 50% 50%, 0% 100%, 100% 0%, 0% 0%;
        opacity: 0.5;
    }
    33% {
        background-position: 50% 50%, 50% 50%, 80% 20%, 40% 60%, 60% 40%, 50% 50%;
        opacity: 0.7;
    }
    66% {
        background-position: 100% 100%, 0% 0%, 20% 80%, 80% 20%, 20% 80%, 100% 100%;
        opacity: 0.6;
    }
    100% {
        background-position: 0% 0%, 100% 100%, 50% 50%, 0% 100%, 100% 0%, 0% 0%;
        opacity: 0.5;
    }
}

@keyframes cardPulse {
    0% {
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 50px rgba(124, 58, 237, 0.8), 0 0 80px rgba(124, 58, 237, 0.4);
    }
    100% {
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    }
}

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

@keyframes cardZoomOut {
    from {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
    to {
        opacity: 0;
        transform: scale(0.5) rotateY(-90deg);
    }
}

.card-modal-overlay {
    animation: modalFadeIn 0.3s ease-out forwards;
}

/* Strong override: ensure collection uses full width and two readable columns on narrow viewports
   Place this at the end so it wins over earlier rules that might unintentionally constrain width. */
@media (max-width: 1000px) {
    /* Ensure the collection interface isn't constrained by the generic .training-block max-width.
       Use a higher specificity selector so it overrides earlier rules. */
    .training-block.collection-interface, .collection-interface {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Force responsive auto-fill columns inside the collection view */
    .training-block.collection-interface .collection-grid,
    .training-block.collection-interface .big-collection-grid,
    .collection-interface .collection-grid,
    .collection-interface .big-collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important; /* Use full available width */
        margin: 0 !important;
        justify-items: stretch !important;
    }

    /* Make each card fill the available column */
    .training-block.collection-interface .collection-card,
    .collection-interface .collection-card,
    .training-block.collection-interface .big-collection-grid > .collection-card,
    .collection-interface .big-collection-grid > .collection-card {
        width: 100% !important;
        max-width: 100% !important; /* No cap - let grid control size */
        box-sizing: border-box !important;
        align-self: start !important;
        min-height: 220px !important; /* slightly reduced to better balance width/height */
    }
}

.card-modal-fullimage {
    animation: cardZoomIn 0.5s ease-out forwards;
}

.card-modal-fullimage img {
    animation: cardPulse 2s ease-in-out infinite;
}

.card-modal-visual-large {
    animation: cardZoomIn 0.5s ease-out forwards;
}

/* Particle system for rapid send */
#particleLayer {
    z-index: 10;
    width: 220px;
    height: 220px;
}

#particleLayer > div {
    text-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
    font-size: 18px !important;
    z-index: 15;
}

/* Utility for two-column button groups used in training results and similar screens */
.two-up {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6em;
}

@media (max-width: 360px) {
    .two-up {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Toned-down select styling to integrate with the UI */
select#bannerSelect, select#collectionBannerSelect {
    background: linear-gradient(90deg, #0b0b0b, #12021a);
    border: 1px solid rgba(124,58,237,0.18);
    padding: 0.5em 0.6em;
    border-radius: 6px;
    color: #e8d7ff;
    font-family: 'Fira Mono', monospace;
    box-shadow: inset 0 -2px 6px rgba(0,0,0,0.6);
}

/* Banner preview removed: previews are no longer displayed */

/* Collection section grouping */
.collection-section { margin: 0.6em 0; border-top: 1px dashed rgba(255,255,255,0.04); padding-top: 0.6em; }
.collection-section h4 { margin: 0 0 0.4em 0; color: #b983ff; font-size: 0.95em; }
.collection-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* six columns on desktop */
    gap: 10px;
}

@media (max-width: 1000px) {
    .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    .collection-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Banner divider that spans the entire collection grid width */
.collection-banner-divider {
    grid-column: 1 / -1;
    padding: 0.6em 0.4em;
    color: #b983ff; /* purple accent instead of yellow */
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin: 6px 0 4px 0;
    background: linear-gradient(90deg, rgba(18,4,36,0.6), rgba(18,4,36,0.4));
    border-radius: 6px;
}

.collection-banner-divider .set-code {
    font-size: 0.75em;
    font-weight: 400;
    opacity: 0.5;
    margin-left: 0.5em;
    text-transform: uppercase;
}

/* container to group the unified grid items (dividers + cards) */
.big-collection-grid {
    display: grid;
    /* Auto-fill columns based on available space with minimum card width */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.big-collection-grid > .collection-banner-divider { grid-column: 1 / -1; }

/* Prevent collection cards from compressing too much */
.collection-card {
    min-height: 150px; /* slightly taller cards, reduced a touch */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 8px;
    box-sizing: border-box;
}
.collection-card .card-image img {
    width: 100%;
    height: 130px; /* slightly reduced image height to fit frame */
    object-fit: cover;
    display: block;
    border-radius: 6px;
}
.collection-card .card-name {
    margin-top: 0.5em;
    font-size: 0.95em;
    white-space: normal;
    word-break: break-word;
}

/* 'Show more' button for collections */
.collection-show-more { display:inline-block; margin-top:0.6em; background:transparent; border:1px solid rgba(124,58,237,0.16); color:#e8d7ff; padding:0.4em 0.6em; border-radius:6px; cursor:pointer; }

/* Slightly reduce contrast on store selects on mobile */
@media (max-width:600px) {
    select#bannerSelect, select#collectionBannerSelect { background: #0b0b0b; border: 1px solid rgba(255,255,255,0.04); }
}

    /* Ensure cards occupy full available width per column and don't get artificially narrow */
    .collection-card {
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
    }
    /* Reduce container padding slightly so grid can use more horizontal space */
    .intro-block, .training-block, .collection-interface {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

/* Floating minigame home button */
.minigame-floating-home {
    position: fixed;
    bottom: 20px;
    left: -60px; /* Start off-screen */
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    border: 2px solid #b983ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
}

.minigame-floating-home.show {
    left: 20px; /* Slide in */
    animation: slideInFromLeft 0.4s ease-out forwards;
}

.minigame-floating-home:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.6);
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.minigame-floating-home:active {
    transform: scale(0.95);
}

@keyframes slideInFromLeft {
    from {
        left: -60px;
        opacity: 0;
    }
    to {
        left: 20px;
        opacity: 1;
    }
}

@media (max-width: 600px) {
    .minigame-floating-home {
        position: absolute; /* Change from fixed to absolute on mobile */
        width: 45px;
        height: 45px;
        font-size: 20px;
        bottom: auto; /* Remove fixed bottom positioning */
        top: 10px; /* Position at top of content */
        left: auto !important; /* Force remove left positioning */
        right: -60px; /* Start off-screen on the right for animation */
        animation: none; /* Remove default left animation */
    }
    .minigame-floating-home.show {
        right: 10px; /* Slide in to right side of content */
        animation: slideInFromRight 0.4s ease-out forwards;
    }
    
    /* Ensure training blocks have relative positioning for absolute child */
    .training-block {
        position: relative;
    }
    
    @keyframes slideInFromRight {
        from {
            right: -60px;
            opacity: 0;
        }
        to {
            right: 10px;
            opacity: 1;
        }
    }
}

/* Slider toggle for SFX mute */
#sfxMuteToggle:checked + span {
    background: #7c3aed !important;
}

#sfxMuteToggle:checked + span + span {
    transform: translateX(26px);
}

/* Slider toggle for game order */
#gameOrderToggle:checked + span {
    background: #7c3aed !important;
}

#gameOrderToggle:checked + span + span {
    transform: translateX(26px);
}

/* ========================================
   GACHA CAROUSEL STYLES
   ======================================== */

/* Gacha Screen */
.gacha-screen {
    background: var(--bg-primary);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    /* allow scrolling so stacked banners below the fold are reachable */
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    height: auto;
    max-height: 100vh;
}

.gacha-screen::-webkit-scrollbar {
    display: none;
}

.gacha-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-primary);
}

.gacha-main-title {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.credits-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.credits-amount {
    font-family: 'Orbitron', monospace;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--accent-secondary);
}

.credits-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Carousel Wrapper */
.gacha-carousel-wrapper {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 500px;
    overflow: hidden;
    margin-bottom: 2rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: none;
}

.gacha-carousel-wrapper::-webkit-scrollbar {
    display: none;
}

/* avoid forcing global overflow:hidden when gacha is active; allow normal page scrolling */
/* Note: previously the gacha screen forced global overflow:hidden. We now allow normal page scrolling. */

.gacha-carousel-track {
    display: flex;
    height: 100%;
    width: 100%;
    transition: transform 0.3s ease;
    cursor: grab;
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gacha-carousel-track::-webkit-scrollbar {
    display: none;
}

.gacha-carousel-track:active {
    cursor: grabbing;
}

/* Banner Slides */
.gacha-banner-slide {
    /* stacked layout: allow each banner to size to its content */
    flex: none;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1.5rem;
    transition: opacity 0.2s ease;
    overflow: visible;
}

.gacha-banner-slide::-webkit-scrollbar {
    display: none;
}

.gacha-banner-content {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gacha-banner-content::-webkit-scrollbar {
    display: none;
}

.banner-header-section {
    text-align: center;
    margin-bottom: 0.25rem;
}

.banner-title {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.banner-description {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.4;
    max-width: 400px;
    margin: 0 auto;
}


.rates-section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.rarity-chance {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-secondary);
}

.rarity-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rarity-dot.common { background: #9CA3AF; }
.rarity-dot.rare { background: #4A90E2; }
.rarity-dot.epic { background: #B83AED; }
.rarity-dot.legendary { background: #FFD700; }

/* Rate emoji (replace the previous small colored dots) */
.rate-emoji {
    font-size: 1.25rem;
    display: inline-block;
    width: 1.6rem;
    text-align: center;
    margin-right: 0.5rem;
}
.rate-item { display:flex; align-items:center; gap:0.25rem; padding:0.4rem 0.6rem; background: var(--bg-tertiary); border-radius: 10px; border:1px solid var(--border-secondary); }
.rate-percent { font-family: 'Orbitron', monospace; font-size: 0.9rem; font-weight: 700; }

.rarity-text {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1rem;
}

.banner-action-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.gacha-pull-btn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
    color: white;
    border: none;
    padding: 1.2rem 2.5rem;
    border-radius: 12px;
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-lg);
    min-width: 200px;
}

.gacha-pull-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, var(--accent-primary-hover), var(--accent-secondary));
}

.gacha-pull-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--shadow-md);
}

/* Navigation Buttons */
.gacha-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-elevated);
    border: 2px solid var(--border-primary);
    color: var(--text-primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    transition: all var(--transition-base);
    z-index: 20;
    box-shadow: var(--shadow-lg);
}

.gacha-nav-btn:hover:not(:disabled) {
    background: var(--accent-primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--shadow-xl);
}

.gacha-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: translateY(-50%);
}

.prev-btn {
    left: 1rem;
}

.next-btn {
    right: 1rem;
}

/* Indicators */
.gacha-indicators {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.gacha-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--border-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.gacha-indicator.active {
    background: var(--accent-primary);
    transform: scale(1.3);
    border-color: var(--accent-primary);
}

.gacha-indicator:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

/* Recent Card Section */
.recent-card-section {
    margin-bottom: 2rem;
}

.section-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 0 0 10px var(--accent-primary);
}

.recent-card-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    background: var(--bg-tertiary);
    border: 3px solid var(--border-secondary);
    border-radius: 12px;
    padding: 1rem;
    margin: 0 auto;
    width: 220px;
    height: 320px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.recent-card-display:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.recent-card-display[data-rarity="common"] {
    border-color: #9CA3AF;
    box-shadow: 0 0 15px rgba(156, 163, 175, 0.3);
}

.recent-card-display[data-rarity="rare"] {
    border-color: #4A90E2;
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.3);
}

.recent-card-display[data-rarity="epic"] {
    border-color: #B83AED;
    box-shadow: 0 0 15px rgba(184, 58, 237, 0.3);
}

.recent-card-display[data-rarity="legendary"] {
    border-color: #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.recent-card-display img {
    width: 160px;
    height: 240px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--border-primary);
}

.recent-card-info {
    flex: 1;
}

/* Gacha banner recent list - compact version similar to home recent cards */
.gacha-banner-slide .recent-card-section {
    margin-bottom: 0.5rem;
}
.gacha-banner-slide .gacha-recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 420px;
    overflow: hidden;
}
.gacha-banner-slide .gacha-recent-list .activity-item {
    padding: 0.6rem;
    border-radius: 8px;
    font-size: 0.92rem;
}
.gacha-recent-list .activity-title { font-size: 0.95rem; }

/* Hide featured/sample cards area when requested */
/* Featured/sample cards are visible on desktop; hide on narrow screens below */
@media (max-width: 768px) {
    .sample-cards-section,
    .sample-cards-grid,
    .sample-card.full-sample {
        display: none !important;
    }
    /* When featured cards are hidden, let the remaining two columns use the space */
    .gacha-columns-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }
}

/* Responsive pull button styles */
.banner-action-section {
    padding: 1rem;
}

.banner-action-section .gacha-pull-btn {
    background: linear-gradient(90deg,#7c3aed,#b983ff);
    color: white;
    border: none;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    border-radius: 8px;
    cursor: pointer;
    min-width: 0; /* allow flex children to shrink */
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-action-section > div { /* the flex wrapper */
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* allow buttons to wrap onto next line */
}

@media (max-width: 600px) {
    .banner-action-section .gacha-pull-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
}
.gacha-recent-list .activity-title { font-size: 0.95rem; }

.recent-card-name {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clickable-recent { cursor: pointer; }

/* Multi-pull results */
.multi-pull-results {
    padding: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
}
.multi-pull-results .multi-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.multi-pull-results .multi-item {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-weight: 700;
}

/* Compact 5-pull presentation */
.multi-pull-results.compact-5 {
    padding: 0.75rem;
}
.multi-pull-results.compact-5 .compact-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.compact-item {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-height: 88px;
}
.compact-thumb {
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}
.compact-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compact-thumb.no-image { font-size: 22px; }
.compact-name { font-size: 0.68rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.compact-rarity { font-size: 0.64rem; font-weight: 700; opacity: 0.9; }

@media (max-width: 720px) {
    .multi-pull-results.compact-5 .compact-grid { grid-template-columns: repeat(3, 1fr); }
    .compact-item { min-height: 84px; }
}

.recent-card-rarity {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.recent-card-display[data-rarity="common"] .recent-card-rarity { color: #9CA3AF; }
.recent-card-display[data-rarity="rare"] .recent-card-rarity { color: #4A90E2; }
.recent-card-display[data-rarity="epic"] .recent-card-rarity { color: #B83AED; }
.recent-card-display[data-rarity="legendary"] .recent-card-rarity { color: #FFD700; }

/* Set List Section */
.set-list-section {
    margin-bottom: 2rem;
}

.set-list-text {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-height: 120px;
    overflow-y: auto;
    text-align: center;
}

/* Sample Cards Section */
.sample-cards-section {
    margin-bottom: 2rem;
}

.sample-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.9rem;
    align-items: stretch;
}

/* Full-bleed sample card: image fills the whole card area and the card retains
   a visible colored border based on rarity. We intentionally scope the small
   .sample-card img rules (used for compact list items) so they don't affect
   the full-sample layout. */
.sample-card.full-sample {
    position: relative;
    background: var(--bg-elevated);
    border-radius: 12px;
    overflow: hidden;
    display: block;
    height: 340px; /* fixed visual card height to ensure image fills */
    box-shadow: var(--shadow-md);
    border: 3px solid var(--border-primary); /* default border that will be colored by data-rarity rules */
}

.sample-card.full-sample .sample-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-elevated);
}
.sample-card.full-sample .sample-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sample-card.full-sample .sample-card-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.8rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.sample-card.full-sample .sample-card-name { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.sample-card.full-sample .sample-card-rarity { font-size: 0.78rem; color: var(--text-secondary); }

@media (max-width: 900px) {
    .sample-card.full-sample { height: 260px; }
}
@media (max-width: 600px) {
    .sample-cards-grid { grid-template-columns: 1fr; }
    .sample-card.full-sample { height: 300px; }
}
.sample-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-primary);
}

.sample-card:not(.full-sample) img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
}

.sample-card-name {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}

.sample-card[data-rarity="common"] { border-color: #9CA3AF; }
.sample-card[data-rarity="rare"] { border-color: #4A90E2; }
.sample-card[data-rarity="epic"] { border-color: #B83AED; }
.sample-card[data-rarity="legendary"] { border-color: #FFD700; }

/* Rates Section */
.rates-section {
    margin-bottom: 2rem;
}

.rarity-rates {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: nowrap; /* keep items on a single line */
    overflow-x: auto; /* allow horizontal scroll on small screens */
    -webkit-overflow-scrolling: touch;
}

.rate-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--border-secondary);
    white-space: nowrap;
}

.rate-item .rarity-dot {
    width: 12px;
    height: 12px;
}

.rate-percent {
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .gacha-screen {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .gacha-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .gacha-main-title {
        font-size: 2rem;
    }

    .credits-display {
        align-items: center;
    }

    /* Convert 3-column grid to single column on mobile */
    .gacha-columns-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 1.5rem !important;
        align-items: stretch !important;
    }

    /* Disable carousel on mobile - show all banners vertically */
    .gacha-carousel-wrapper {
        position: static;
        height: auto;
        min-height: auto;
        width: 100%;
        overflow: visible;
        margin-bottom: 1rem;
    }

    /* Stack banners vertically */
    .gacha-carousel-track {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        transform: none !important;
        cursor: auto;
    }

    /* Each banner takes full width and height auto */
    .gacha-banner-slide {
        flex: none;
        width: 100%;
        height: auto;
        transform: none !important;
        opacity: 1 !important;
        scale: 1 !important;
        margin-bottom: 1.5rem;
    }

    .gacha-banner-content {
        padding: 1rem;
        width: 100%;
        max-width: none;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        overflow: visible;
    }

    .banner-title {
        font-size: 1.5rem;
    }

    .banner-description {
        font-size: 1rem;
    }

    .rarity-chance {
        padding: 0.35rem 0.5rem;
        gap: 0.5rem;
    }

    .rarity-text {
        font-size: 0.9rem;
    }

    .gacha-pull-btn {
        padding: 1rem 2rem;
        font-size: 1rem;
        min-width: auto;
        width: 100%;
    }

    /* Hide carousel nav buttons on mobile */
    .gacha-nav-btn {
        display: none;
    }

    /* Hide indicators on mobile */
    .gacha-indicators {
        display: none;
    }
}

/* ========================================
   MAGI PAGE - QUEEN MAGI'S LINKS
   ======================================== */

.magi-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
}

.magi-header {
    text-align: center;
    margin-bottom: 3rem;
}

.magi-crown {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
    animation: float 3s ease-in-out infinite;
}

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

.magi-title {
    font-size: 3rem;
    color: var(--accent-primary);
    margin: 0.5rem 0;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.magi-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0;
}

.magi-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.magi-link-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-elevated));
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    cursor: pointer;
}

.magi-link-card:hover {
    transform: translateX(5px);
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-tertiary));
}

.magi-link-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.magi-link-content {
    flex: 1;
    min-width: 0;
}

.magi-link-content h3 {
    margin: 0 0 0.3rem 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.magi-link-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-tertiary);
}

.magi-link-arrow {
    font-size: 1.5rem;
    color: var(--accent-primary);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.magi-link-card:hover .magi-link-arrow {
    transform: translateX(5px);
}

.magi-section-title {
    font-size: 1rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--accent-primary);
}

.magi-footer {
    text-align: center;
    padding-top: 2rem;
    color: var(--text-tertiary);
    font-size: 0.95rem;
}

/* Desktop leaderboard optimizations - restore larger sizes */
.leaderboard-layout {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
    max-width: min(1100px, 95vw);
    margin: 0.5em auto 1.5em auto;
}

.leaderboard-main {
    flex: 1;
    min-width: 0;
}

.leaderboard-side {
    flex: 0 0 280px;
}

.personal-card {
    padding: 1em;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
    .leaderboard-layout {
        flex-direction: column;
        max-width: 95vw;
    }
    .leaderboard-side {
        flex: 1;
        width: 100%;
    }
    .personal-card {
        margin-top: 0.5em;
    }
}

.leaderboard-entry {
    padding: 0.8em;
    margin: 0.3em 0;
    gap: 0.3em;
    display: grid;
    grid-template-columns: 50px 1fr 80px;
    align-items: center;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.leaderboard-entry > div:first-child {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

.leaderboard-entry > div:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.leaderboard-entry > div:nth-child(2) > div:first-child {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #b983ff;
    overflow: hidden;
}

.leaderboard-entry img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.leaderboard-entry > div:nth-child(3) {
    text-align: center;
    padding: 0.3em 0.6em;
    background: rgba(124, 58, 237, 0.2);
    border-radius: 4px;
}

/* Responsive adjustments for Magi page */
@media (max-width: 768px) {
    .magi-container {
        padding: 1.5rem;
    }

    .magi-title {
        font-size: 2rem;
    }

    .magi-crown {
        font-size: 3rem;
    }

    .magi-link-card {
        padding: 1rem;
        gap: 1rem;
    }

    .magi-link-icon {
        font-size: 1.5rem;
        width: 50px;
    }

    .magi-link-content h3 {
        font-size: 1rem;
    }
    
    /* Login screen mobile-specific styling */
    .intro-block[style*="display: flex"][style*="justify-content"] h1 {
        text-align: center !important;
        font-size: 2em !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    .intro-block[style*="display: flex"][style*="justify-content"] p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .intro-block[style*="display: flex"][style*="justify-content"] > div[style*="display: flex"] {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Leaderboard mobile optimizations */
    .leaderboard-entry {
        padding: 0.5em !important;
        margin: 0.2em 0 !important;
        gap: 0.3em !important;
    }

    .leaderboard-entry > div:first-child {
        font-size: 0.9em !important;
    }

    .leaderboard-entry > div:nth-child(3) {
        padding: 0.2em 0.4em !important;
        font-size: 0.8em !important;
    }

    .leaderboard-entry img {
        width: 28px !important;
        height: 28px !important;
    }

    .leaderboard-entry div[style*="flex-direction: column"] > div {
        font-size: 0.8em !important;
        max-width: 100px !important;
    }

    /* Reduce gap between rank/position and avatar icon on mobile */
    .leaderboard-entry > div:nth-child(2) {
        gap: 0.3em !important;
    }

    /* Center leaderboard on mobile */
    .training-block[style*="max-width: 700px"] {
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 1em !important;
    }
}