.skins-module {
    --skins-surface: #1c2442;
    --skins-border: rgba(140, 159, 198, 0.25);
    --skins-text-primary: #f8fafc;
    --skins-text-muted: rgba(189, 208, 247, 0.75);
    --skins-accent: #60a5fa;
    --skins-accent-soft: rgba(96, 165, 250, 0.2);
    --skins-accent-strong: #93c5fd;
    --skins-preview: #f59e0b;

    background: linear-gradient(145deg, rgba(37, 99, 235, 0.55), rgba(15, 23, 42, 0.85));
    border: 1px solid var(--skins-border);
    border-radius: 1rem;
    color: var(--skins-text-primary);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    position: relative;
    box-shadow: 0 20px 45px rgba(13, 27, 54, 0.18);
}

.skins-module__header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.skins-module__title {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.skins-module__title-badge {
    max-height: 1.75rem;
    width: auto;
    height: auto;
}

.skins-module__header-tools {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.skins-module__label {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.skins-module__badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.skins-module__refresh {
    align-items: center;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 180, 255, 0.4);
    border-radius: 999px;
    color: var(--skins-accent-strong);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0.35rem;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    width: 2rem;
}

.skins-module__refresh:hover,
.skins-module__refresh:focus-visible {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(148, 180, 255, 0.7);
    color: #ffffff;
    outline: none;
    transform: translateY(-1px);
}

.skins-module__refresh:disabled {
    cursor: progress;
    opacity: 0.75;
}

.skins-module__refresh--loading i {
    animation: skins-module-spin 0.9s linear infinite;
}

@keyframes skins-module-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.skins-module__badge {
    background: rgba(96, 165, 250, 0.95);
    border: 1px solid rgba(148, 180, 255, 0.8);
    border-radius: 999px;
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
}

.skins-module__badge--preview {
    background: rgba(245, 158, 11, 0.9);
    border-color: rgba(245, 158, 11, 0.95);
    color: #0f172a;
}

/* Distinct styling for the ON THE LINE pill */
.skins-module__badge--on-line {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(59, 130, 246, 0.85));
    border: 1px solid rgba(34, 197, 94, 1);
    color: #0f172a;
}

/* Default: show the title pill, hide the tools pill */
.skins-module__pill-title {
    display: inline-flex;
}

.skins-module__pill-tools {
    display: none;
}

.skins-module__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skins-module__player-list {
    display: grid;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.skins-module__player {
    align-items: center;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 180, 255, 0.22);
    border-radius: 0.75rem;
    display: flex;
    justify-content: flex-start; /* Left-justify row content for better multi-line layout */
    gap: 0.8rem; /* Provide consistent spacing between meta and counter */
    padding: 0.55rem 0.85rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* No special visual treatment for leader rows */
.skins-module__player--leader {
}

.skins-module__player-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start; /* ensure inner content aligns left */
    text-align: left; /* prevent centering inherited from parent contexts */
}

.skins-module__leader-badge {
    align-items: center;
    background: rgba(96, 165, 250, 0.25);
    border: 1px solid rgba(148, 180, 255, 0.4);
    border-radius: 999px;
    color: var(--skins-text-primary);
    display: inline-flex;
    font-size: 0.65rem;
    font-weight: 600;
    gap: 0.3rem;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.55rem;
    text-transform: uppercase;
}

/* Tie-breaker winner badge (final resolution) */
.skins-module__tb-winner-badge {
    align-items: center;
    background: rgba(34, 197, 94, 0.22);
    border: 1px solid rgba(74, 222, 128, 0.35);
    border-radius: 999px;
    color: var(--skins-text-primary);
    display: inline-flex;
    font-size: 0.65rem;
    font-weight: 700;
    gap: 0.3rem;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.55rem;
    text-transform: uppercase;
}

.skins-module__player-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.skins-module__player-holes {
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.skins-module__player-count {
    align-items: center;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.95), rgba(129, 140, 248, 0.92));
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    font-weight: 700;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.25rem 0.85rem;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
    line-height: 1.1;
    text-align: center;
    margin-left: auto; /* Pin the counter to the far right while content stays left */
}

.skins-module__player-value {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.85;
}

.skins-module__placeholder {
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 0.3rem 0;
}

/* Loading state: badge wiggle */
.skins-module__loading {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.skins-module__loading-badge {
    height: 1.25rem;
    width: auto;
    animation: skins-wiggle 1.4s ease-in-out infinite;
    transform-origin: 50% 60%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.skins-module__loading-text {
    opacity: 0.85;
}

@keyframes skins-wiggle {
    0% {
        transform: rotate(0deg) translateY(0);
    }
    25% {
        transform: rotate(3deg) translateY(-1px);
    }
    50% {
        transform: rotate(0deg) translateY(0);
    }
    75% {
        transform: rotate(-3deg) translateY(-1px);
    }
    100% {
        transform: rotate(0deg) translateY(0);
    }
}

.skins-module__footer {
    border-top: 1px solid rgba(59, 82, 123, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
}

.skins-module__status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--skins-text-muted);
}

.skins-module__last-hole {
    font-weight: 600;
    color: var(--skins-text-primary);
}

.skins-module__on-line {
    color: var(--skins-accent-strong);
    font-weight: 600;
}

.skins-module__tiebreakers {
    background: rgba(15, 23, 42, 0.65);
    border-radius: 0.65rem;
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skins-module__tiebreakers-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(226, 232, 240, 0.85);
}

.skins-module__tiebreaker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.skins-module__tiebreaker {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(226, 232, 240, 0.9);
}

.skins-module__tiebreaker--active {
    color: #f8fafc;
    font-weight: 600;
    text-decoration: underline;
}

.skins-module__timestamp {
    color: rgba(209, 213, 219, 0.7);
    font-size: 0.75rem;
}

/* Improve contrast for timestamp in light mode */
:root[data-bs-theme="light"] .skins-module__timestamp,
[data-bs-theme="light"] .skins-module__timestamp {
    color: rgba(15, 23, 42, 0.65);
}

@media (max-width: 576px) {
    .skins-module {
        padding: 0.9rem;
    }

    .skins-module__title {
        flex-direction: column;
        align-items: flex-start;
    }

    .skins-module__player-list {
        grid-template-columns: 1fr;
    }
}

/* Theme toggle compatibility: Use Bootstrap's data-bs-theme attribute
   These rules override prefers-color-scheme when the site uses a manual theme toggle. */

/* Light theme (explicit) */
:root[data-bs-theme="light"] .skins-module,
[data-bs-theme="light"] .skins-module {
    --skins-surface: #f6f8ff;
    --skins-border: rgba(59, 82, 123, 0.2);
    --skins-text-primary: #0f172a;
    --skins-text-muted: rgba(15, 23, 42, 0.7);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    background: #f6f8ff;
}

:root[data-bs-theme="light"] .skins-module__badge,
[data-bs-theme="light"] .skins-module__badge {
    background: rgba(59, 130, 246, 0.95);
    border-color: rgba(59, 130, 246, 1);
    color: #ffffff;
}

:root[data-bs-theme="light"] .skins-module__badge--preview,
[data-bs-theme="light"] .skins-module__badge--preview {
    background: rgba(245, 158, 11, 0.95);
    border-color: rgba(245, 158, 11, 1);
    color: #ffffff;
}

:root[data-bs-theme="light"] .skins-module__badge--on-line,
[data-bs-theme="light"] .skins-module__badge--on-line {
    background: rgba(34, 197, 94, 0.95); /* green */
    border-color: rgba(34, 197, 94, 1);
    color: #0f172a;
}

:root[data-bs-theme="light"] .skins-module__player,
[data-bs-theme="light"] .skins-module__player {
    background: rgba(255, 255, 255, 0.95);
}

:root[data-bs-theme="light"] .skins-module__player--leader,
[data-bs-theme="light"] .skins-module__player--leader {
}

:root[data-bs-theme="light"] .skins-module__leader-badge,
[data-bs-theme="light"] .skins-module__leader-badge {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
    color: #0f172a;
}

[data-bs-theme="light"] .skins-module__tb-winner-badge {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(16, 185, 129, 0.35);
    color: #0f5132;
}

:root[data-bs-theme="light"] .skins-module__player-holes,
[data-bs-theme="light"] .skins-module__player-holes {
    color: rgba(15, 23, 42, 0.75);
}

:root[data-bs-theme="light"] .skins-module__placeholder,
[data-bs-theme="light"] .skins-module__placeholder {
    color: rgba(15, 23, 42, 0.8);
}

:root[data-bs-theme="light"] .skins-module__tiebreakers-label,
[data-bs-theme="light"] .skins-module__tiebreakers-label {
    color: rgba(15, 23, 42, 0.7);
}

:root[data-bs-theme="light"] .skins-module__tiebreaker,
[data-bs-theme="light"] .skins-module__tiebreaker {
    color: rgba(15, 23, 42, 0.8);
}

/* Light theme specific containers and controls */
:root[data-bs-theme="light"] .skins-module__tiebreakers,
[data-bs-theme="light"] .skins-module__tiebreakers {
    background: rgba(59, 130, 246, 0.06); /* soft indigo wash */
    border: 1px solid rgba(59, 82, 123, 0.18);
}

:root[data-bs-theme="light"] .skins-module__refresh,
[data-bs-theme="light"] .skins-module__refresh {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.35);
    color: #1e3a8a;
}

:root[data-bs-theme="light"] .skins-module__refresh:hover,
[data-bs-theme="light"] .skins-module__refresh:focus-visible {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.5);
    color: #0f172a;
}

/* Dark theme (explicit) */
:root[data-bs-theme="dark"] .skins-module,
[data-bs-theme="dark"] .skins-module {
    --skins-text-primary: #f8fafc;
    --skins-text-muted: rgba(189, 208, 247, 0.8);
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.55), rgba(15, 23, 42, 0.85));
}

/* Ensure placeholder text is readable on dark gradient */
:root[data-bs-theme="dark"] .skins-module__placeholder,
[data-bs-theme="dark"] .skins-module__placeholder {
    color: rgba(226, 232, 240, 0.92);
}

@media (prefers-color-scheme: dark) {
    .skins-module {
        box-shadow: 0 18px 38px rgba(2, 6, 23, 0.55);
    }

    .skins-module__badge {
        color: #f8fafc;
        background: rgba(96, 165, 250, 0.32);
        border-color: rgba(148, 180, 255, 0.4);
    }

    .skins-module__leader-badge {
        color: #f8fafc;
        border-color: rgba(148, 180, 255, 0.45);
    }

    .skins-module__tb-winner-badge {
        font-size: 0.6rem;
        padding: 0.12rem 0.45rem;
    }

    .skins-module__badge--preview {
        color: #fef3c7;
    }

    .skins-module__badge--on-line {
        color: #052e1b; /* stays readable on bright pill */
    }

}

/* Mobile layout optimizations (apply in both themes) */
@media (max-width: 480px) {
    .skins-module__header {
        gap: 0.5rem;
        align-items: center;
    }

    .skins-module__title {
        gap: 0.4rem;
        flex: 1 1 auto;
        min-width: 0;
    }

    .skins-module__label {
        font-size: 1rem;
    }

    .skins-module__header-tools {
        flex: 0 0 auto;
    }

    .skins-module__badges {
        gap: 0.35rem;
    }

    .skins-module__badge {
        padding: 0.18rem 0.5rem;
        font-size: 0.7rem;
    }

    .skins-module__refresh {
        width: 1.8rem;
        height: 1.8rem;
        padding: 0.25rem;
        flex: 0 0 auto;
    }

    /* Move ON THE LINE into the tools group and hide denomination badge to save space */
    .skins-module__pill-title {
        display: none;
    }

    .skins-module__pill-tools {
        display: inline-flex;
    }

    .skins-module__badge--denom {
        display: none;
    }
}

/* Dark mode overrides migrated from darktheme.css */
[data-bs-theme="dark"] .skins-module {
    box-shadow: 0 18px 38px rgba(2, 6, 23, 0.55);
}

[data-bs-theme="dark"] .skins-module__badge {
    color: #f8fafc;
    background: rgba(96, 165, 250, 0.32);
    border-color: rgba(148, 180, 255, 0.4);
}

[data-bs-theme="dark"] .skins-module__leader-badge {
    color: #f8fafc;
    border-color: rgba(148, 180, 255, 0.45);
}

[data-bs-theme="dark"] .skins-module__badge--preview {
    color: #fef3c7;
}