/* Updated CSS with gradient color support */
.unified-stars-container {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.star-svg {
    width: 28px;
    height: 28px;
    margin-right: 2px;
    cursor: default;
    transition: all 0.2s ease;
}

.star-svg.interactive {
    cursor: pointer;
}

.star-svg.interactive:hover {
    transform: scale(1.1);
}

/* Default states for stars */
.star-svg.filled path {
    fill: #fbbf24;
    stroke: #f59e0b;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.star-svg.empty path {
    fill: #d1d5db;
    stroke: #9ca3af;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

/* Remove fixed hover colors - now handled by JavaScript */
/* Hover states will be applied via inline styles */

/* For users who have voted - empty stars are transparent */
.user-has-voted .star-svg.empty path {
    fill: transparent !important;
    stroke: #9ca3af !important;
}

/* Smooth transition for all color changes */
.star-svg path {
    transition: fill 0.3s ease, stroke 0.3s ease;
}

/* COMPACT RATING STYLE - MATCHING IGDB */
.game-rating-compact-container {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* IGDB uses 10px gap */
    background: #f8f9fa;
    padding: 7px 10px; /* IGDB uses slightly more padding */
    border-radius: 6px;
    border: 1px solid #dee2e6;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin-left: 12px;
    box-sizing: border-box;
    line-height: 1;
}

.game-rating-compact {
    display: flex;
    align-items: center;
    gap: 4px;
}

.average-number {
    font-weight: 700;
    color: #495057;
    font-size: 0.95em; /* Slightly larger, using em for better scaling */
}

.votes-brackets {
    color: #6c757d;
    font-weight: 500;
    font-size: 0.85em;
}

/* Gamepad Icon - slightly larger to match IGDB */
.gamepad-icon {
    display: flex;
    align-items: center;
    margin-left: 2px; /* Increased from 2px */
}

.gamepad-icon img {
    height: 16px; /* Increased from 14px to match IGDB logo */
    width: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.game-rating-compact-container:hover .gamepad-icon img {
    opacity: 0.9;
}

/* Make sure the stars container and compact container align properly */
.game-rating-stars {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Transparent background for rating container */
.game-rating-container.transparent-bg {
    background: transparent;
    border: none;
    padding: 10px 0;
}

/* Rating container layout */
.game-rating-flex-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* For users who want only the compact rating without stars */
.rating-compact-only {
    margin-left: 0;
}