/* FINAL SOLUTION - Prevent original star rendering completely */
/* Hide ALL non-interactive stars permanently */
.star:not(.clickable-star) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide any want-level containers that don't have our interactive stars */
.want-level:empty {
    display: none !important;
}

/* Ensure only our interactive stars are visible */
.want-level > *:not(.interactive-star-rating) {
    display: none !important;
}

/* Clean up any remaining duplicates */
.interactive-star-rating + .interactive-star-rating {
    display: none !important;
}

/* Prevent duplicate stars between buttons on owned games */
.game-card.owned .want-level {
    display: none !important;
}

.game-card.owned .interactive-star-rating {
    display: none !important;
}

/* Hide want-level container for owned games */
.owned-status + .want-level {
    display: none !important;
}

/* Ensure only one star rating per game */
.game-card .interactive-star-rating:not(:first-of-type) {
    display: none !important;
}

/* Hide any star ratings that appear after game actions */
.game-actions + .interactive-star-rating {
    display: none !important;
}

/* Owned games get green background regardless of platform */
.game-card.owned {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(56, 142, 60, 0.3) 100%) !important;
    border: 2px solid rgba(102, 187, 106, 0.4) !important;
    backdrop-filter: blur(10px) !important;
}

/* Platform-specific game card backgrounds */
.game-card[data-platform="snes"] {
    background: linear-gradient(135deg, rgba(139, 79, 159, 0.3) 0%, rgba(106, 59, 122, 0.3) 100%) !important;
    border: 2px solid rgba(168, 92, 187, 0.4) !important;
    backdrop-filter: blur(10px) !important;
}

.game-card[data-platform="mega-cd"] {
    background: linear-gradient(135deg, rgba(121, 85, 72, 0.3) 0%, rgba(93, 64, 55, 0.3) 100%) !important;
    border: 2px solid rgba(141, 110, 99, 0.4) !important;
    backdrop-filter: blur(10px) !important;
}

.game-card[data-platform="megadrive"] {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.3) 0%, rgba(25, 118, 210, 0.3) 100%) !important;
    border: 2px solid rgba(66, 165, 245, 0.4) !important;
    backdrop-filter: blur(10px) !important;
}

.game-card[data-platform="32x"] {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.3) 0%, rgba(216, 67, 21, 0.3) 100%) !important;
    border: 2px solid rgba(255, 112, 67, 0.4) !important;
    backdrop-filter: blur(10px) !important;
}

.game-card[data-platform="master-system"] {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.3) 0%, rgba(245, 124, 0, 0.3) 100%) !important;
    border: 2px solid rgba(255, 183, 77, 0.4) !important;
    backdrop-filter: blur(10px) !important;
}

/* Ensure text remains readable on colored backgrounds */
.game-card[data-platform] .game-title,
.game-card[data-platform] .detail-label,
.game-card[data-platform] .detail-value {
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

/* Adjust button styles on colored backgrounds */
.game-card[data-platform] .action-btn,
.game-card[data-platform] .link-btn,
.game-card[data-platform] .control-btn {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Loading state for star ratings */
.interactive-star-rating.updating,
.spreadsheet-star-rating.updating {
    opacity: 0.8 !important;
    pointer-events: none !important;
}

.interactive-star-rating.updating .clickable-star,
.spreadsheet-star-rating.updating .clickable-star {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Ensure stars remain visible during updates */
.clickable-star {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    transition: color 0.2s ease, transform 0.15s ease !important;
}

/* Prevent stars from disappearing */
.interactive-star-rating .clickable-star,
.spreadsheet-star-rating .clickable-star {
    position: relative !important;
    z-index: 1 !important;
}/* Interactive Star Rating System - Replaces Dropdown Want Level Selectors */

/* Base star rating container */
.interactive-star-rating {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    margin: 0.75rem 0 !important;
    padding: 0.5rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.interactive-star-rating:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Individual clickable stars */
.clickable-star {
    font-size: 1.4rem !important;
    color: rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    margin: 0 1px !important;
    display: inline-block !important;
    transform: scale(1) !important;
    filter: none !important;
}

/* Filled stars (active) */
.clickable-star.filled {
    color: #ffd700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 215, 0, 0.6) !important;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4)) !important;
}

/* Hover effects */
.clickable-star:hover {
    transform: scale(1.1) !important;
    color: #ffd700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 215, 0, 0.8) !important;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)) !important;
}

/* Hover effect for all stars up to the hovered one */
.interactive-star-rating:hover .clickable-star.preview-fill {
    color: #ffd700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 215, 0, 0.5) !important;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.3)) !important;
}

/* Star rating label */
.star-rating-label {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-align: center !important;
    margin-top: 0.25rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .interactive-star-rating {
        padding: 0.6rem 0.4rem !important;
        margin: 0.5rem 0 !important;
        gap: 0.15rem !important;
    }
    
    .clickable-star {
        font-size: 1.2rem !important;
        margin: 0 !important;
        min-width: 24px !important;
        min-height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .clickable-star:hover {
        transform: scale(1.05) !important;
    }
    
    .star-rating-label {
        font-size: 0.7rem !important;
        margin-top: 0.2rem !important;
    }
}

/* Samsung Fold closed state optimizations */
@media screen and (min-width: 344px) and (max-width: 374px) and (min-height: 882px) and (max-height: 932px) {
    .interactive-star-rating {
        padding: 0.4rem 0.3rem !important;
        margin: 0.4rem 0 !important;
        gap: 0.1rem !important;
    }
    
    .clickable-star {
        font-size: 1rem !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
    
    .star-rating-label {
        font-size: 0.6rem !important;
        margin-top: 0.15rem !important;
    }
}

/* Samsung Fold open state optimizations */
@media screen and (min-width: 1812px) and (max-width: 1892px) and (min-height: 1344px) and (max-height: 1394px) {
    .interactive-star-rating {
        padding: 1rem 0.8rem !important;
        margin: 1.2rem 0 !important;
        gap: 0.3rem !important;
    }
    
    .clickable-star {
        font-size: 1.8rem !important;
        margin: 0 2px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    .star-rating-label {
        font-size: 1rem !important;
        margin-top: 0.5rem !important;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .interactive-star-rating {
        padding: 0.5rem 0.3rem !important;
        gap: 0.1rem !important;
    }
    
    .clickable-star {
        font-size: 1.1rem !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }
}

/* Animation for star filling */
@keyframes starFill {
    0% {
        transform: scale(1);
        color: rgba(255, 255, 255, 0.2);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        color: #ffd700;
    }
}

.clickable-star.animate-fill {
    animation: starFill 0.3s ease !important;
}

/* Spreadsheet view stars */
.spreadsheet-star-rating {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.1rem !important;
    padding: 0.2rem !important;
}

.spreadsheet-star-rating .clickable-star {
    font-size: 0.9rem !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .spreadsheet-star-rating .clickable-star {
        font-size: 0.8rem !important;
        min-width: 14px !important;
        min-height: 14px !important;
    }
}

/* Remove the original want-select dropdowns completely */
.want-select {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Ensure star ratings show instead of dropdowns */
.game-card .want-select,
.spreadsheet-table .want-select,
.fold-view-panel .want-select,
.fold-search-panel .want-select {
    display: none !important;
}

/* Hide any duplicate star elements */
.want-level .star:not(.clickable-star) {
    display: none !important;
}

/* Ensure only our interactive star ratings are visible */
.want-level:not(:has(.interactive-star-rating)) .star {
    display: none !important;
}

/* Override any existing star displays */
.star:not(.clickable-star) {
    display: none !important;
}

/* Custom star rating for different states */
.star-rating-container {
    position: relative !important;
    width: 100% !important;
}

/* Tooltip for star ratings */
.star-tooltip {
    position: absolute !important;
    bottom: 120% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    padding: 0.4rem 0.6rem !important;
    border-radius: 4px !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}

.star-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 4px solid transparent !important;
    border-top-color: rgba(0, 0, 0, 0.9) !important;
}

.interactive-star-rating:hover .star-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Touch feedback for mobile */
@media (max-width: 768px) {
    .clickable-star:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }
    
    .interactive-star-rating {
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2) !important;
    }
}

/* Accessibility improvements */
.clickable-star:focus {
    outline: 2px solid #ffd700 !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

.interactive-star-rating[role="radiogroup"] {
    position: relative !important;
}

.clickable-star[role="radio"] {
    position: relative !important;
}

/* Screen reader support */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Rating text descriptions */
.rating-description {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-align: center !important;
    margin-top: 0.25rem !important;
    font-style: italic !important;
}

/* Different rating levels styling */
.rating-level-0 .star-rating-label {
    color: rgba(255, 255, 255, 0.4) !important;
}

.rating-level-1 .star-rating-label {
    color: #ff6b6b !important;
}

.rating-level-2 .star-rating-label {
    color: #ffa726 !important;
}

.rating-level-3 .star-rating-label {
    color: #ffeb3b !important;
}

.rating-level-4 .star-rating-label {
    color: #66bb6a !important;
}

.rating-level-5 .star-rating-label {
    color: #4caf50 !important;
}