/* Component-specific styles */

.grayed-out {
    filter: grayscale(100%) brightness(0.5);
    opacity: 0.6;
}

/* 3D Card Tilt Effect */
.card-3d-container {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

.card-3d-image {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    touch-action: none;
}

.card-3d-image:active {
    cursor: grabbing;
}

.card-3d-image.tilting {
    transition: none;
}

.card-3d-image.dragging {
    cursor: none;
}

body.cursor-hidden {
    cursor: none;
}

/* Touch improvements for mobile */
@media (max-width: 768px) {
    .card-3d-image {
        cursor: grab;
    }

    .card-3d-image:active {
        cursor: grabbing;
    }
}

/* Card Component */
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.card-image img {
    width: 100%;
    height: auto;
    display: block;
}

.card-name {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 14px;
}

.card-number {
    padding: 4px 12px;
    font-size: 12px;
    color: #666;
}

.card-rarity {
    padding: 4px 12px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.card-rarity.Common {
    color: #6b7280;
}

.card-rarity.Uncommon {
    color: #059669;
}

.card-rarity.Rare {
    color: #dc2626;
}

.card-rarity['Holo Rare'] {
    color: #7c3aed;
}

.card-rarity['Full Art'] {
    color: #ea580c;
}

.card-rarity['Secret Rare'] {
    color: #ca8a04;
}

/* Pack Component */
.pack-item {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pack-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.pack-image img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.pack-info {
    text-align: center;
    margin-top: 12px;
}

.pack-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.pack-remaining {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.pack-reset {
    font-size: 12px;
    color: #999;
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: 8px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-footer {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Tab Navigation */
.tab-button {
    transition: background-color 0.2s ease;
    background-color: transparent;
}

.tab-button.active {
    background-color: #1E3A8A !important;
    color: white !important;
}

.tab-button:hover:not(.active) {
    background-color: #1E3A8A;
}

.tab-button.active:hover {
    background-color: #1E3A8A !important;
    color: white !important;
}

/* Ensure active state is clearly visible */
button.tab-button.active {
    background-color: #1E3A8A !important;
    color: white !important;
}

/* Collection Grid */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* Universal Card Hover Effects - applies to all cards */
.card-with-progress,
.relative.cursor-pointer {
    background: transparent !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    min-height: fit-content;
}

.card-with-progress:hover,
.relative.cursor-pointer:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.1) !important;
    /* Match shadow darkness */
}

/* Ensure all card images have transparent backgrounds */
.card-with-progress img,
.relative.cursor-pointer img {
    background: transparent !important;
    border-radius: 0.375rem;
}

/* Ensure all card containers have transparent backgrounds */
.card-with-progress,
.relative.cursor-pointer {
    background: transparent !important;
}



.card-with-progress .level-progress-bar {
    transition: all 0.2s ease;
    border-radius: 0.375rem;
    /* Same as filter buttons */
}

.card-with-progress:hover .level-progress-bar {
    transform: scale(1.0);
}

/* Ensure progress bar doesn't overflow */
.card-image-container {
    position: relative;
    width: 100%;
}

/* Level progress bar - locked state (like filter buttons) */
.level-bar-locked {
    background: white;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Level progress bar - upgradeable state (green gradient with shadow) */
.level-bar-upgradeable {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.3);
    border: 1px solid #15803d;
}

/* Level progress bar - max level state (gold gradient) */
.level-bar-max {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(251, 191, 36, 0.4);
    border: 1px solid #f59e0b;
    font-weight: bold;
}

/* User Item */
.user-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Admin Grid */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    padding: 24px 0;
}

.admin-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Game Selector - Responsive Circles */
.game-type-button {
    width: 128px !important;
    height: 128px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-block !important;
    position: relative !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
}

.game-type-button img {
    width: 128px !important;
    height: 128px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 50% !important;
}

/* Mobile responsive sizing for game type buttons */
@media (max-width: 640px) {
    .game-type-button {
        width: 70px !important;
        height: 70px !important;
    }

    .game-type-button img {
        width: 70px !important;
        height: 70px !important;
    }
}

/* Small mobile devices (very small screens) */
@media (max-width: 480px) {
    .game-type-button {
        width: 60px !important;
        height: 60px !important;
    }

    .game-type-button img {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .game-type-button {
        width: 55px !important;
        height: 55px !important;
    }

    .game-type-button img {
        width: 55px !important;
        height: 55px !important;
    }
}

/* Type Selector Buttons - Smaller version for ClickerGame */
.type-selector-button {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-block !important;
    position: relative !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.type-selector-button img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 16px;
    }

    .admin-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Mobile-specific: Top Picks cards - 3 per row with scrolling */
    #cardsPreview {
        width: 100% !important;
        overflow-y: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #cardsPreview .flex {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2px !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #cardsPreview .flex .relative {
        width: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    #cardsPreview .flex .relative img {
        width: 100% !important;
        height: 40px !important;
        max-height: 40px !important;
        max-width: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Mobile-specific: All Cards grid - 5 per row */
    #allCardsGrid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
    }

    /* Mobile-specific: Remove vertical space in pack image container */
    #packImageContainer {
        height: auto !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    #packImageContainer img {
        height: auto !important;
        max-height: 200px !important;
    }

    /* Mobile-specific: Sprite pack modal grid - 4 columns */
    #bulkCardsGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.25rem !important;
    }

    /* Mobile-specific: Make sprite items smaller to fit 4 per row */
    #bulkCardsGrid > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Override fixed width classes for sprites in mobile */
    #bulkCardsGrid .w-48,
    #bulkCardsGrid .w-40,
    #bulkCardsGrid .w-36,
    #bulkCardsGrid .w-32 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Make "NEW!" badge smaller in sprite pack modal */
    #bulkCardsGrid > div > div > div.absolute.bg-red-500 {
        font-size: 0.5rem !important;
        padding: 0.125rem 0.375rem !important;
        top: 0.25rem !important;
        left: 0.25rem !important;
        line-height: 1 !important;
    }

    /* Mobile-specific: Make shiny star container smaller in sprite pack modal */
    #bulkCardsGrid > div > div > div.absolute[style*="width: 21px"] {
        width: 14px !important;
        height: 14px !important;
        top: 0.25rem !important;
        right: 0.25rem !important;
    }

    /* Mobile-specific: Make shiny star SVG smaller in sprite pack modal */
    #bulkCardsGrid > div > div > div.absolute svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Mobile-specific: Make "NEW!" badge smaller in pack opening modal (single card view) */
    #newIndicator {
        font-size: 0.5rem !important;
        padding: 0.125rem 0.375rem !important;
        top: 0.25rem !important;
        left: 0.25rem !important;
        line-height: 1 !important;
    }

    /* Mobile-specific: Make "NEW!" and "PROMO" badges smaller in bulk cards view */
    #bulkCardsGrid > div > div > div.absolute.bg-red-500,
    #bulkCardsGrid > div > div > div.absolute.bg-purple-600 {
        font-size: 0.5rem !important;
        padding: 0.125rem 0.375rem !important;
        top: 0.25rem !important;
        left: 0.25rem !important;
        line-height: 1 !important;
    }

    /* Mobile-specific: Available Sprites buttons - smaller size and text */
    .sprite-set-btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        line-height: 1rem !important;
    }

    /* Mobile-specific: Sprite grid - 6 per row */
    #spritesGrid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    /* Mobile-specific: Pack type selector buttons - equal width in grid */
    #packTypeSelector .grid.grid-cols-2 button {
        width: 100% !important;
    }

    /* Mobile-specific: Unique promo view - full width */
    #uniquePromoView {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile-specific: Unique promo header - full width */
    #uniquePromoHeader {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Unique promo sets container - full width */
    #uniquePromoSetsContainer {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Unique promo sets grid - 4 columns instead of 5 */
    #uniquePromoSetsContainer .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 0.5rem !important;
        row-gap: 0.5rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile-specific: Remove vertical spacing from sections */
    #uniquePromoSetsContainer > section {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #uniquePromoSetsContainer > section .space-y-4 > * + * {
        margin-top: 0 !important;
    }

    /* Mobile-specific: Unique promo card tiles - remove empty space, fit card exactly */
    #uniquePromoSetsContainer .grid > div {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        aspect-ratio: 367/512 !important;
        line-height: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
    }

    /* Mobile-specific: Unique promo card images - fill container exactly, no empty space */
    #uniquePromoSetsContainer .grid > div > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        vertical-align: top !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    /* Mobile-specific: Hide "All Obtained" badge in mobile view */
    #uniquePromoSetsContainer .grid > div > div.absolute {
        display: none !important;
    }

    /* Mobile-specific: Ensure setSelection container is full width when showing unique promos */
    #setSelection.space-y-10 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Ensure setSelectionView container allows full width */
    #setSelectionView {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Ensure all sections inside unique promo view are full width */
    #uniquePromoSetsContainer > section {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Sprite packs in setSelection grid - ensure 3 per row (only when it's a grid, not space-y-10) */
    #setSelection.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        display: grid !important;
    }

    /* Mobile-specific: Sprite pack items should respect grid layout (only when it's a grid) */
    #setSelection.grid > div {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Sprite pack images should fit within grid cells (only when it's a grid) */
    #setSelection.grid img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Override fixed width classes on mobile for sprite pack images (only when it's a grid) */
    #setSelection.grid .w-48 {
        width: 100% !important;
    }

    /* Mobile-specific: Unique promo modal - fit viewport without scrolling */
    #uniquePromoModal {
        padding: 1rem !important;
    }

    #uniquePromoModal > div {
        max-height: calc(100vh - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        overflow-y: auto !important;
    }

    #uniquePromoModal .flex.flex-col {
        max-height: calc(100vh - 2rem) !important;
    }

    #uniquePromoModal img {
        max-height: calc(50vh - 2rem) !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Profile view - make white box full width, keep internal padding */
    .max-w-4xl.mx-auto {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .max-w-4xl.mx-auto > .bg-white {
        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
    }

    .max-w-4xl.mx-auto #profilePromoCardsSection {
        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
    }

    /* Mobile-specific: Collection statistics - smaller text for 2 per row */
    #statsGrid {
        gap: 0.5rem !important;
    }

    #statsGrid > div {
        padding: 0.5rem !important;
    }

    #statsGrid > div span.text-3xl {
        font-size: 1rem !important;
    }

    #statsGrid > div .text-3xl.font-extrabold {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #statsGrid > div p.font-semibold {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #statsGrid > div p.text-xs {
        font-size: 0.625rem !important;
    }

    /* Mobile-specific: Clicker game statistics - smaller text for 2 per row */
    #clickerStatsGrid {
        gap: 0.5rem !important;
    }

    #clickerStatsGrid > div {
        padding: 0.5rem !important;
    }

    #clickerStatsGrid > div span.text-3xl {
        font-size: 1rem !important;
    }

    #clickerStatsGrid > div .text-3xl.font-extrabold {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #clickerStatsGrid > div p.font-semibold {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #clickerStatsGrid > div p.text-xs {
        font-size: 0.625rem !important;
    }

    /* Mobile-specific: Promo cards grid - 3 per row */
    #profilePromoCardsGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    /* Mobile-specific: Pokedex view - reduce side padding, make grid full width */
    #pokedex-view {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    #pokedex-view .max-w-7xl {
        max-width: 100% !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* Mobile-specific: Pokedex grid - 6 items per row, full width */
    #pokemonGrid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Mobile-specific: Pokedex pokemon items - reduce padding */
    #pokemonGrid .pokemon-item {
        padding: 0.5rem !important;
    }

    /* Mobile-specific: Pokedex pokemon number text - smaller */
    #pokemonGrid .pokemon-item span {
        font-size: 0.625rem !important;
        margin-top: 0.25rem !important;
    }

    /* Mobile-specific: Generation buttons - smaller and equal width in grid */
    #pokedex-view .grid.grid-cols-5 button {
        width: 100% !important;
        font-size: 0.625rem !important;
        padding: 0.25rem 0.125rem !important;
    }

    /* Mobile-specific: Pokemon detail view - reduce side padding, make content full width */
    #pokemon-detail-view {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #pokemon-detail-view .max-w-7xl {
        max-width: 100% !important;
        padding-left: 0.125rem !important;
        padding-right: 0.125rem !important;
    }

    /* Mobile-specific: TCGP cards grid - 3 per row */
    #tcgpCardsGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.375rem !important;
    }

    /* Mobile-specific: Make TCGP card set name text smaller */
    #tcgpCardsGrid p.text-xs {
        font-size: 0.5rem !important;
        line-height: 1.2 !important;
        margin-top: 0.125rem !important;
    }

    /* Mobile-specific: Make TCGP card rarity text smaller too */
    #tcgpCardsGrid p.text-gray-500 {
        font-size: 0.5rem !important;
    }

    /* Mobile-specific: Promo cards grid - 3 per row */
    #promoCardsGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Mobile-specific: Sprites grids - 3 per row */
    #normalSpritesGrid,
    #shinySpritesGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Mobile-specific: Make sprite version text smaller (Red Version, etc) */
    #spritesContainer h4 {
        font-size: 0.625rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.2 !important;
    }

    /* Mobile-specific: Make sprite section headings smaller */
    #spritesContainer h3 {
        font-size: 1rem !important;
    }

    #spritesContainer h3 span {
        font-size: 0.75rem !important;
    }

    /* Mobile-specific: Make sprite images smaller */
    #spritesContainer img {
        width: 4rem !important;
        height: 4rem !important;
    }

    /* Mobile-specific: Best friend indicators - smaller and more in top right */
    .best-friend-indicator {
        width: 0.75rem !important;
        height: 0.75rem !important;
        top: 0.125rem !important;
        right: 0.125rem !important;
        border-width: 1px !important;
    }

    /* Mobile-specific: AllUsers grid - 3 users per row */
    #usersContainer {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Mobile-specific: User cards - reduce padding and make text smaller */
    #usersContainer > div {
        padding: 0.5rem !important;
    }

    #usersContainer > div h3 {
        font-size: 0.75rem !important;
    }

    #usersContainer > div .w-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    /* Mobile-specific: UserProfile view - match ProfileView mobile styles */
    /* Note: ProfileView already has rules for .max-w-4xl.mx-auto, so these are for UserProfile specifically */
    .max-w-4xl.mx-auto #userPromoCardsSection {
        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
    }

    /* Mobile-specific: UserProfile stats grids - 2 per row with smaller text */
    #userStatsGrid {
        gap: 0.5rem !important;
    }

    #userStatsGrid > div {
        padding: 0.5rem !important;
    }

    #userStatsGrid > div span.text-3xl {
        font-size: 1rem !important;
    }

    #userStatsGrid > div .text-3xl.font-extrabold {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #userStatsGrid > div p.font-semibold {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #userStatsGrid > div p.text-xs {
        font-size: 0.625rem !important;
    }

    /* Mobile-specific: UserProfile clicker stats grids - 2 per row with smaller text */
    #userClickerStatsGrid {
        gap: 0.5rem !important;
    }

    #userClickerStatsGrid > div {
        padding: 0.5rem !important;
    }

    #userClickerStatsGrid > div span.text-3xl {
        font-size: 1rem !important;
    }

    #userClickerStatsGrid > div .text-3xl.font-extrabold {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #userClickerStatsGrid > div p.font-semibold {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #userClickerStatsGrid > div p.text-xs {
        font-size: 0.625rem !important;
    }

    /* Mobile-specific: UserProfile promo cards grid - 3 per row */
    #userPromoCardsGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    /* Mobile-specific: UserProfile promo card set name text smaller */
    #userPromoCardsGrid > div > div.absolute.bottom-2 {
        font-size: 0.625rem !important;
        padding: 0.125rem 0.25rem !important;
        line-height: 1.2 !important;
    }

    /* Mobile-specific: UserProfile Top 5 Cards grid - 3 per row */
    #userTopCardsGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    /* Mobile-specific: UserProfile Shiny and Legendary Sprites grids - 4 per row */
    #userShinySpritesGrid,
    #userLegendarySpritesGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Mobile-specific: ClickerGame - Back to Games button smaller */
    #backToSelector {
        font-size: 0.875rem !important;
    }

    /* Mobile-specific: ClickerGame - Collection card count badges smaller and more in top right */
    #collectionCards .absolute.bg-blue-500 {
        width: 1rem !important;
        height: 1rem !important;
        top: 0.125rem !important;
        right: 0.125rem !important;
        font-size: 0.625rem !important;
        line-height: 1 !important;
    }

    /* Mobile-specific: ClickerGame - reduce side padding, make content wider */
    .min-h-screen.bg-gradient-to-br {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .min-h-screen.bg-gradient-to-br .max-w-7xl {
        max-width: 100% !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* Mobile-specific: MyCardsView - Rarity filter buttons - 3 per row, smaller text */
    #rarityCounts {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    #rarityCounts > div {
        padding: 0.5rem !important;
        min-width: 0 !important;
    }

    #rarityCounts > div .font-semibold.text-sm {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #rarityCounts > div .text-xs {
        font-size: 0.625rem !important;
        line-height: 1.2 !important;
    }

    /* Mobile-specific: MyCardsView - Prevent horizontal scroll, ensure everything fits */
    #raritySummary {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #raritySummary > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Make order by and show card levels fit on one line */
    #raritySummary .flex.items-center.gap-4 {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    #raritySummary .flex.items-center.gap-4 > div {
        flex-shrink: 0 !important;
    }

    /* Mobile-specific: Make order by and show card levels text smaller */
    #raritySummary .flex.items-center.gap-4 span.text-sm {
        font-size: 0.75rem !important;
    }

    #raritySummary .flex.items-center.gap-4 select {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Mobile-specific: Make toggle switch smaller */
    #raritySummary .flex.items-center.gap-4 label .w-11 {
        width: 2.5rem !important;
        height: 1.25rem !important;
    }

    #raritySummary .flex.items-center.gap-4 label .w-11::after {
        width: 1rem !important;
        height: 1rem !important;
        top: 0.125rem !important;
        left: 0.125rem !important;
    }

    /* Mobile-specific: Adjust toggle switch translation for smaller size */
    #raritySummary .flex.items-center.gap-4 label input:checked ~ div::after {
        transform: translateX(1.25rem) !important;
    }

    /* Mobile-specific: Make search bar full width */
    #cardSearch {
        max-width: 100% !important;
    }

    /* Mobile-specific: Collection grid - responsive columns based on zoom level */
    /* Small zoom: 4 per row, Normal: 3 per row, Large: 2 per row */
    /* JavaScript sets the correct columns, CSS ensures no overflow */
    #collectionGrid {
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        justify-content: start !important;
    }

    /* Override inline gap style on mobile */
    #collectionGrid[style*="gap: 20px"] {
        gap: 0.5rem !important;
    }

    #collectionGrid > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Mobile-specific: Make card level text smaller */
    #collectionGrid .level-progress-bar {
        font-size: 0.625rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    #collectionGrid .level-progress-bar span {
        font-size: 0.625rem !important;
        line-height: 1.2 !important;
    }

    /* Mobile-specific: Ensure parent containers don't cause horizontal scroll */
    #myCardsView {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    #collectionContentPlaceholder {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Mobile-specific: CollectionBase container - prevent horizontal scroll */
    #content2 .max-w-7xl.mx-auto {
        max-width: 100% !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        overflow-x: hidden !important;
    }

    /* Mobile-specific: Body and main containers - prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
    }

    #content2 {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Upgrade counter - smaller text and better layout */
    #upgradeCounter {
        padding: 0.75rem !important;
    }

    #upgradeCounter .text-xs {
        font-size: 0.75rem !important;
    }

    #upgradeCounter svg {
        width: 1rem !important;
        height: 1rem !important;
    }

    #upgradeCounter button {
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* Mobile-specific: Make toggle switch smaller in upgrade counter */
    #upgradeCounter label .w-11 {
        width: 2.5rem !important;
        height: 1.25rem !important;
    }

    #upgradeCounter label .w-11::after {
        width: 1rem !important;
        height: 1rem !important;
        top: 0.125rem !important;
        left: 0.125rem !important;
    }

    #upgradeCounter label input:checked ~ div::after {
        transform: translateX(1.25rem) !important;
    }

    /* Mobile-specific: UserProfile card detail modal - fit viewport without scrolling */
    .fixed.inset-0.bg-black.bg-opacity-50 {
        padding: 0.5rem !important;
    }

    .fixed.inset-0.bg-black.bg-opacity-50 > .bg-white.rounded-lg {
        max-height: calc(100vh - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        overflow-y: auto !important;
        padding: 0.75rem !important;
    }

    .fixed.inset-0.bg-black.bg-opacity-50 > .bg-white.rounded-lg img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Mobile-specific: Make text smaller in card detail modal */
    .fixed.inset-0.bg-black.bg-opacity-50 > .bg-white.rounded-lg h3 {
        font-size: 1.125rem !important;
    }

    .fixed.inset-0.bg-black.bg-opacity-50 > .bg-white.rounded-lg p {
        font-size: 0.75rem !important;
    }

    .fixed.inset-0.bg-black.bg-opacity-50 > .bg-white.rounded-lg button {
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* Mobile-specific: Reduce padding in containers */
    #tcgpCardsContainer,
    #tcgCardsContainer,
    #promoCardsContainer,
    #spritesContainer {
        padding: 0.5rem !important;
    }

    /* Mobile-specific: Reduce padding in TCGP card items */
    #tcgpCardsGrid > div {
        padding: 0 !important;
    }

    /* Mobile-specific: Reduce padding in TCGP card text container */
    #tcgpCardsGrid > div > div.p-2 {
        padding: 0.25rem !important;
    }

    /* Mobile-specific: Make promo card set name text smaller */
    #profilePromoCardsGrid > div > div.absolute.bottom-2 {
        font-size: 0.625rem !important;
        padding: 0.125rem 0.25rem !important;
        line-height: 1.2 !important;
    }

    /* Mobile-specific: Promo card modal - fit viewport without scrolling */
    #promoCardModal {
        padding: 0.5rem !important;
    }

    #promoCardModal > div {
        max-height: calc(100vh - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        overflow-y: auto !important;
    }

    #promoCardModal .flex.flex-col {
        max-height: calc(100vh - 1rem) !important;
    }

    #promoCardModal img {
        max-height: calc(50vh - 3rem) !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Reduce padding in promo card modal content sections */
    #promoCardModal .bg-gray-100 {
        padding: 0.75rem !important;
    }

    #promoCardModal .flex.flex-col > div.p-6 {
        padding: 0.75rem !important;
    }

    /* Mobile-specific: Make text smaller in promo card modal */
    #promoCardModal h3 {
        font-size: 1.125rem !important;
    }

    #promoCardModal p,
    #promoCardModal span {
        font-size: 0.75rem !important;
    }

    /* Mobile-specific: All Sets View - Set buttons 6 per row */
    #quickLinks {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    #quickLinks button {
        font-size: 0.625rem !important;
        padding: 0.25rem 0.5rem !important;
        width: 100% !important;
    }

    /* Mobile-specific: All Sets View - Card grids 6 per row */
    #pokedexContent .set-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Mobile-specific: My Sprites View - Similar to My Cards View */
    #spritesSummary {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #spritesSummary > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile-specific: Sprite filters - 3 per row with smaller text */
    #spriteFilters {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    #spriteFilters button {
        padding: 0.5rem !important;
        min-width: 0 !important;
        font-size: 0.75rem !important;
    }

    /* Mobile-specific: Order by/Show Count - wrap and center */
    #spritesSummary .flex.items-center.gap-4 {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    #spritesSummary .flex.items-center.gap-4 span {
        font-size: 0.75rem !important;
    }

    #spritesSummary .flex.items-center.gap-4 select {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Mobile-specific: Toggle switch smaller */
    #spritesSummary label .w-11 {
        width: 2.5rem !important;
        height: 1.25rem !important;
    }

    #spritesSummary label .w-11::after {
        width: 1rem !important;
        height: 1rem !important;
        top: 0.125rem !important;
        left: 0.125rem !important;
    }

    #spritesSummary label input:checked ~ div::after {
        transform: translateX(1.25rem) !important;
    }

    /* Mobile-specific: Search bar full width */
    #spriteSearch {
        max-width: 100% !important;
    }

    /* Mobile-specific: Sprite grid - responsive columns based on zoom level */
    /* Small zoom: 4 per row, Normal: 3 per row, Large: 2 per row */
    #spritesGrid {
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Override inline styles based on zoom level using data-zoom attribute */
    /* Small zoom: 4 columns */
    #spritesGrid[data-zoom="small"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    /* Normal zoom: 3 columns (default) */
    #spritesGrid[data-zoom="normal"],
    #spritesGrid:not([data-zoom]) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    /* Large zoom: 2 columns */
    #spritesGrid[data-zoom="large"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Mobile-specific: Shiny star - smaller and more in top right */
    /* Target the absolute div with z-10 (shiny star) */
    #spritesGrid > div > div.absolute.z-10 {
        top: 0.125rem !important;
        right: 0.125rem !important;
        width: 0.875rem !important;
        height: 0.875rem !important;
    }

    #spritesGrid > div > div.absolute.z-10 svg {
        width: 100% !important;
        height: 100% !important;
    }

    /* Mobile-specific: All Sprites View - Set name buttons smaller */
    #allSpritesQuickLinks button {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Mobile-specific: All Sprites View - Grid always 5 columns per row */
    #allSpritesContent .grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Mobile-specific: OpenSpritePack Available Sprites grid - 5 columns per row */
    #spriteGridContainer #spritesGrid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Mobile-specific: ClickerGame notification popups - smaller size and text */
    #notification-container {
        top: 0.5rem !important;
        right: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }

    #notification-container .notification-item {
        padding: 0.5rem !important;
        max-width: 18rem !important;
        font-size: 0.75rem !important;
    }

    #notification-container .notification-item h4 {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    #notification-container .notification-item div {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    #notification-container .notification-item strong {
        font-size: 0.75rem !important;
    }

    /* Mobile-specific: Sprite pack modal with 20 sprites (4x5 grid) - ensure it fits on screen */
    #packModal #bulkCardsView {
        max-height: calc(100vh - 250px) !important;
        overflow-y: auto !important;
    }

    #packModal #bulkCardsGrid.grid-cols-5 {
        padding-bottom: 1rem !important;
    }
}

/* Desktop: Ensure sprite pack modal with 20 sprites fits on screen */
#packModal #bulkCardsView {
    max-height: calc(90vh - 150px);
    overflow-y: auto;
}

#packModal #bulkCardsGrid.grid-cols-5 {
    min-height: fit-content;
}