:host,:root,[data-bs-theme=light], [data-bs-theme=dark] {
    --tblr-primary: #f36d23;
    --tblr-primary-rgb: 243,109,35;
}

html {
    scroll-behavior: smooth;
}

@media (min-width: 1200px) {
    .navbar-brand-image {
        height: 100%;
        max-height: 15rem;
    }
}

.ranking-card {
    max-width: 720px;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.rank-badge--first  { background: linear-gradient(135deg, #f5c453, #d4a017); }
.rank-badge--second { background: linear-gradient(135deg, #d6dae0, #9aa1ad); }
.rank-badge--third  { background: linear-gradient(135deg, #d99a6c, #a36a3d); }

.rank-position {
    color: var(--tblr-secondary, #6c757d);
    font-variant-numeric: tabular-nums;
}

.ranking-tie {
    color: var(--tblr-secondary, #6c757d);
    font-size: 1.25rem;
    line-height: 1;
}

.ranking-points {
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

.ranking-row--leader {
    background-color: rgba(245, 196, 83, 0.08);
}

.rank-movement {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.rank-movement--up   { color: #2fb344; }
.rank-movement--down { color: #d63939; }
.rank-movement--same { color: var(--tblr-secondary, #6c757d); }

.ranking-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tblr-secondary, #6c757d);
    margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------
 * Sporty motion layer
 * Subtle entrance + interaction animations. All keyframes are disabled
 * when the user prefers reduced motion (block at the bottom of this file).
 * ----------------------------------------------------------------------- */

@keyframes wk-backdrop-in {
    from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
}

@keyframes wk-pop {
    0%   { opacity: 0; transform: scale(0.85); }
    60%  { opacity: 1; transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes wk-nl-pulse {
    0%, 100% { background-color: #ffedd5; }
    50%      { background-color: #fed7aa; }
}

/* Netherlands row gets a pulsing orange background with a steady left stripe. */
.wk-nl-row {
    position: relative;
    background-color: #ffedd5;
    box-shadow: inset 4px 0 0 0 #f97316;
    animation: wk-nl-pulse 3.6s ease-in-out infinite;
}
.wk-nl-row:hover {
    background-color: #fed7aa;
}

/* Lift on hover for predictable, snappy feedback. */
.wk-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wk-card:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow:
        0 25px 50px -12px rgba(15, 23, 42, 0.18),
        0 8px 16px -8px rgba(15, 23, 42, 0.12);
}

/* Tab underline gets a sliding feel via background-size trick. */
.wk-tab {
    position: relative;
}
.wk-tab::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, #f97316, #fb923c);
    border-radius: 9999px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wk-tab.is-active::after,
.wk-tab:hover::after {
    transform: scaleX(1);
}

/* AI overlay — a slightly more theatrical spinner backdrop. */
@keyframes wk-overlay-in {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(3px); }
}
#ai-overlay:not(.hidden) {
    animation: wk-overlay-in 0.35s ease-out both;
}

/* Modal dialog open animation (browsers that support ::backdrop transitions). */
dialog[open] {
    animation: wk-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
dialog[open]::backdrop {
    animation: wk-backdrop-in 0.3s ease both;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Score input — soft focus ring with a sporty glow. */
input[type="number"]:focus {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

/* Reduced motion: kill every animation/transition the polish layer added. */
@media (prefers-reduced-motion: reduce) {
    .wk-nl-row,
    #ai-overlay:not(.hidden),
    dialog[open],
    dialog[open]::backdrop {
        animation: none !important;
    }
    .wk-card:hover {
        transform: none;
    }
}