/* =========================================================
   Pickleball Log Lite — brand theme on top of Bootstrap 5.3
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root {
    --pl-navy: #0B2545;        /* Deep Navy    – text, nav, footer */
    --pl-navy-rgb: 11, 37, 69;
    --pl-blue: #1E6FD9;       /* Court Blue    – primary actions */
    --pl-blue-rgb: 30, 111, 217;
    --pl-blue-dark: #1857AE;
    --pl-sky: #8FD3FF;        /* Sky Blue     – accent, highlights */
    --pl-sky-rgb: 143, 211, 255;
    --pl-sky-dark: #6BC2FF;
    --pl-sand: #F4F7FB;        /* Page background */
    --pl-line: #DDE5F0;        /* Borders / court lines */

    --pl-font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* ---------- Bootstrap overrides ---------- */
    --bs-body-font-family: var(--pl-font);
    --bs-body-color: var(--pl-navy);
    --bs-body-color-rgb: var(--pl-navy-rgb);
    --bs-body-bg: var(--pl-sand);
    --bs-emphasis-color: var(--pl-navy);
    --bs-heading-color: var(--pl-navy);

    --bs-primary: var(--pl-blue);
    --bs-primary-rgb: var(--pl-blue-rgb);
    --bs-primary-text-emphasis: var(--pl-blue-dark);
    --bs-primary-bg-subtle: #DCE9FB;
    --bs-primary-border-subtle: #B3CEF4;

    --bs-link-color: var(--pl-blue);
    --bs-link-color-rgb: var(--pl-blue-rgb);
    --bs-link-hover-color: var(--pl-blue-dark);
    --bs-link-hover-color-rgb: 24, 87, 174;

    --bs-border-color: var(--pl-line);
    --bs-border-radius: .625rem;
    --bs-border-radius-lg: 1rem;
    --bs-focus-ring-color: rgba(var(--pl-blue-rgb), .3);
}

body {
    font-family: var(--pl-font);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--pl-font);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ---------- Buttons ---------- */
.btn {
    font-weight: 500;
    border-radius: 999px;
    padding-inline: 1.25rem;
}

.btn-primary {
    --bs-btn-bg: var(--pl-blue);
    --bs-btn-border-color: var(--pl-blue);
    --bs-btn-hover-bg: var(--pl-blue-dark);
    --bs-btn-hover-border-color: var(--pl-blue-dark);
    --bs-btn-active-bg: var(--pl-blue-dark);
    --bs-btn-active-border-color: var(--pl-blue-dark);
    --bs-btn-disabled-bg: var(--pl-blue);
    --bs-btn-disabled-border-color: var(--pl-blue);
    --bs-btn-focus-shadow-rgb: var(--pl-blue-rgb);
}

.btn-accent {
    --bs-btn-color: var(--pl-navy);
    --bs-btn-bg: var(--pl-sky);
    --bs-btn-border-color: var(--pl-sky);
    --bs-btn-hover-color: var(--pl-navy);
    --bs-btn-hover-bg: var(--pl-sky-dark);
    --bs-btn-hover-border-color: var(--pl-sky-dark);
    --bs-btn-active-color: var(--pl-navy);
    --bs-btn-active-bg: var(--pl-sky-dark);
    --bs-btn-active-border-color: var(--pl-sky-dark);
    --bs-btn-focus-shadow-rgb: var(--pl-sky-rgb);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

/* ---------- Brand utilities ---------- */
.bg-navy   { background-color: var(--pl-navy) !important; }
.bg-sky   { background-color: var(--pl-sky) !important; }
.text-sky { color: var(--pl-sky) !important; }
.text-navy { color: var(--pl-navy) !important; }

/* ---------- Brand lockup (logo + wordmark) ---------- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: inherit;
}

.brand img { width: 40px; height: 40px; }

.brand-name {
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

.brand-tag {
    display: inline-block;
    margin-left: .35rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: var(--pl-sky);
    color: var(--pl-navy);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ---------- Blazor template essentials ---------- */
/* Blazor focuses the page's <h1> after navigation (FocusOnNavigate); hide that outline */
h1:focus, h1:focus-visible { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================================================
   Layout, navbar and home page styles
   (global so they load regardless of the project/assembly name)
   ========================================================= */

/* ---- from MainLayout.razor.css ---- */
.site-footer {
    background-color: var(--pl-navy);
    color: #fff;
    border-top: 4px solid var(--pl-sky);
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---- from NavMenu.razor.css ---- */
.site-nav {
    border-bottom: 4px solid var(--pl-sky);
    padding-block: .6rem;
}

.site-nav .nav-link {
    color: rgba(255, 255, 255, .78);
    font-weight: 500;
    border-radius: 999px;
    padding-inline: .9rem !important;
}

.site-nav .nav-link:hover {
    color: #fff;
}

.site-nav .nav-link.active {
    color: var(--pl-navy);
    background-color: rgba(var(--pl-sky-rgb), .95);
}

/* ---- from Home.razor.css ---- */
/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 20%, rgba(var(--pl-sky-rgb), .18), transparent 40%),
        linear-gradient(135deg, var(--pl-navy) 0%, #123B73 60%, var(--pl-blue-dark) 140%);
}

/* Subtle court lines */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.06) 2px, transparent 2px);
    background-size: 100% 50%, 33.333% 100%;
    pointer-events: none;
}

.py-lg-6 { padding-block: 5rem; }

.hero-eyebrow {
    display: inline-block;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(var(--pl-sky-rgb), .15);
    color: var(--pl-sky);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.text-white-75 { color: rgba(255, 255, 255, .78); }

/* ---------- Match card ---------- */
.match-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.5rem;
    border-top: 6px solid var(--pl-sky);
}

.team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

/* ---------- Features ---------- */
.feature-card {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgba(var(--pl-navy-rgb), .08);
}

.feature-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: .85rem;
    background: rgba(var(--pl-sky-rgb), .35);
    font-size: 1.4rem;
}

/* ---------- Steps ---------- */
.step-number {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pl-blue);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: 0 0 0 6px rgba(var(--pl-blue-rgb), .15);
}

/* ---------- CTA ---------- */
.cta-band {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2.25rem;
    border-radius: 1.25rem;
    background: var(--pl-sky);
    color: var(--pl-navy);
}

.cta-band h2 { color: var(--pl-navy); }

/* ---- Account pages (Join / Log in) ---- */
.auth-page {
    padding-block: 3rem 4rem;
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--pl-sky-rgb), .35), transparent 45%),
        var(--pl-sand);
}

.auth-card {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-top: 6px solid var(--pl-blue);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 1rem 2.5rem rgba(var(--pl-navy-rgb), .08);
}

@media (min-width: 576px) {
    .auth-card { padding: 2.5rem; }
}

.auth-section-title {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pl-blue);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--pl-line);
}

.auth-card .form-label { font-weight: 500; }
.auth-card .optional { font-weight: 400; color: var(--bs-secondary-color); font-size: .875em; }
.auth-card .form-control, .auth-card .form-select { padding: .6rem .85rem; }
.auth-card .validation-message { font-size: .875rem; margin-top: .25rem; }

/* ---- Signed-in player menu ---- */
.nav-player { display: inline-flex; align-items: center; gap: .5rem; }

.nav-avatar {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pl-sky);
    color: var(--pl-navy);
    font-size: .85rem;
    font-weight: 700;
}

.site-nav .nav-player.nav-link.show,
.site-nav .nav-player.nav-link:focus { color: #fff; }

/* =========================================================
   Sessions: generate matches, session page, list
   ========================================================= */
.page-header {
    background: linear-gradient(135deg, var(--pl-navy) 0%, #123B73 100%);
    color: rgba(255, 255, 255, .8);
    padding-block: 2rem;
    border-bottom: 4px solid var(--pl-sky);
}
.page-header h1 { color: #fff; }
.back-link { color: var(--pl-sky); text-decoration: none; font-size: .875rem; display: inline-block; margin-bottom: .35rem; }
.back-link:hover { color: #fff; }

.card-panel {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    padding: 1.5rem;
}

.step-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.step-dot {
    width: 1.75rem; height: 1.75rem;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: var(--pl-blue); color: #fff;
    font-size: .85rem;
}

/* Choice cards (radio buttons styled as cards) */
.choice-card {
    display: flex; flex-direction: column; gap: .25rem;
    height: 100%;
    padding: 1rem;
    border: 2px solid var(--pl-line);
    border-radius: .85rem;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.choice-card:hover { border-color: var(--pl-sky); }
.btn-check:checked + .choice-card {
    border-color: var(--pl-blue);
    background: #EEF5FE;
    box-shadow: 0 0 0 3px rgba(var(--pl-blue-rgb), .15);
}
.btn-check:focus-visible + .choice-card { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.choice-icon {
    align-self: center;
    font-weight: 800; font-size: .85rem; letter-spacing: .05em;
    color: var(--pl-navy);
    background: var(--pl-sky);
    border-radius: .5rem;
    padding: .25rem .55rem;
    margin-bottom: .25rem;
}
.choice-card.text-start .choice-icon { align-self: flex-start; }
.choice-title { font-weight: 600; color: var(--pl-navy); }
.choice-sub { font-size: .8rem; color: var(--bs-secondary-color); line-height: 1.35; }

/* Player picker */
.player-list {
    max-height: 26rem;
    overflow-y: auto;
    border: 1px solid var(--pl-line);
    border-radius: .75rem;
}
.player-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--pl-line);
}
.player-row:last-child { border-bottom: 0; }
.player-row.is-selected { background: #EEF5FE; }
.player-row.is-disabled .player-name { color: var(--bs-secondary-color); }
.player-row .form-check-input { margin: 0; flex-shrink: 0; }
.player-name { flex: 1; margin: 0; cursor: pointer; font-weight: 500; }
.gender-set { width: auto; }
.gender-pill, .elo-pill {
    font-size: .75rem; font-weight: 600;
    border-radius: 999px;
    padding: .15rem .55rem;
    min-width: 2rem; text-align: center;
}
.gender-pill { background: var(--pl-line); color: var(--pl-navy); }
.gender-male { background: #DCE9FB; color: #1857AE; }
.gender-female { background: #E9E3FB; color: #5B3FB0; }
.elo-pill { background: var(--pl-navy); color: #fff; min-width: 3.25rem; }
.guest-add {
    background: var(--pl-sand);
    border-radius: .75rem;
    padding: .85rem 1rem;
}

.team-chip {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .8rem;
    border: 1px solid var(--pl-line);
    border-radius: .75rem;
    font-weight: 500;
}
.team-num {
    width: 1.6rem; height: 1.6rem;
    display: inline-grid; place-items: center;
    border-radius: .45rem;
    background: var(--pl-sky); color: var(--pl-navy);
    font-size: .8rem; font-weight: 700;
}

/* Summary sidebar */
.summary-panel {
    position: sticky; top: 5.5rem;
    background: var(--pl-navy);
    color: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
}
.summary-panel h2 { color: #fff; }
.summary-list { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin-bottom: 1rem; }
.summary-list dt { font-weight: 400; color: rgba(255,255,255,.6); }
.summary-list dd { margin: 0; text-align: right; font-weight: 500; }
.summary-stat {
    background: rgba(255,255,255,.08);
    border-radius: .75rem;
    padding: .85rem 1rem;
    display: grid; gap: .25rem;
}
.summary-stat .num { color: var(--pl-sky); font-weight: 700; font-size: 1.1rem; }
.summary-note { font-size: .85rem; color: rgba(255,255,255,.75); margin-top: .75rem; }
.summary-note.warn {
    color: var(--pl-navy);
    background: var(--pl-sky);
    border-radius: .6rem;
    padding: .6rem .8rem;
    font-weight: 500;
}
.summary-panel .btn-accent:disabled { opacity: .5; }

/* Session page */
.tag {
    font-size: .75rem; font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: rgba(var(--pl-sky-rgb), .18);
    color: var(--pl-sky);
}
.tag-done { background: var(--pl-sky); color: var(--pl-navy); }
.tag-light {
    font-size: .72rem; font-weight: 500;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--pl-sand);
    border: 1px solid var(--pl-line);
}

.round-card {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.round-card.is-current { border-color: var(--pl-blue); box-shadow: 0 0 0 3px rgba(var(--pl-blue-rgb), .12); }
.round-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }

.match-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-top: 1px solid var(--pl-line);
}
.court-label { font-size: .8rem; font-weight: 600; color: var(--pl-blue); text-transform: uppercase; letter-spacing: .04em; }
.team { font-weight: 500; }
.team-b { text-align: right; }
.team.winner { font-weight: 700; color: var(--pl-blue-dark); }
.team.winner::after { content: " ✓"; color: var(--pl-blue); }
.team-b.winner::after { content: ""; }
.team-b.winner::before { content: "✓ "; color: var(--pl-blue); }
.score-box { display: flex; align-items: center; justify-content: center; gap: .25rem; white-space: nowrap; }
.score-input { width: 3.75rem; text-align: center; }
.final-score { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.dash { color: var(--bs-secondary-color); }
.sit-outs {
    margin-top: .5rem;
    padding: .55rem .8rem;
    background: var(--pl-sand);
    border-radius: .6rem;
    font-size: .875rem;
}

@media (max-width: 575.98px) {
    .match-row { grid-template-columns: 1fr 1fr; }
    .court-label { grid-column: 1 / -1; }
    .score-box { grid-column: 1 / -1; grid-row: 3; }
    .team-b { text-align: right; }
}

.standings-panel {
    position: sticky; top: 5.5rem;
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    padding: 1.25rem;
}
.standings-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); font-weight: 600; }

/* Session list */
.session-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    padding: 1.15rem 1.25rem;
    color: inherit;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.session-card:hover {
    transform: translateY(-2px);
    border-color: var(--pl-sky);
    box-shadow: 0 .75rem 1.5rem rgba(var(--pl-navy-rgb), .08);
}

/* ---- Substitutions ---- */
.sub-panel {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-left: 6px solid var(--pl-sky);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 .75rem 1.5rem rgba(var(--pl-navy-rgb), .08);
}
.sub-arrow { font-size: 1.5rem; color: var(--pl-blue); padding-bottom: .35rem; }
.sub-impact {
    background: #EEF5FE;
    border-radius: .6rem;
    padding: .65rem .9rem;
    font-size: .9rem;
}
.standings-table tr.is-withdrawn td { color: var(--bs-secondary-color); }
.subs-list { border-top: 1px solid var(--pl-line); padding-top: .75rem; }

/* ---- Find your session ---- */
.finder {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 1rem 2rem rgba(var(--pl-navy-rgb), .06);
}
.finder-search { position: relative; }
.finder-search .form-control { padding-left: 2.6rem; border-radius: 999px; }
.finder-icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-52%);
    font-size: 1.35rem; color: var(--pl-blue); pointer-events: none;
}
.finder-empty {
    background: var(--pl-sand);
    border-radius: .85rem;
    padding: 1rem 1.15rem;
    color: var(--bs-secondary-color);
}
.letter-wide { letter-spacing: .06em; }

.status-card {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1rem;
    margin-bottom: .6rem;
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    color: inherit; text-decoration: none;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.status-card:hover { border-color: var(--pl-blue); transform: translateY(-1px); box-shadow: 0 .5rem 1rem rgba(var(--pl-navy-rgb), .08); }
.status-card.is-me { border-color: var(--pl-blue); background: #F5F9FF; }
.status-body { flex: 1; min-width: 0; }
.status-line { font-weight: 500; color: var(--pl-navy); margin: .1rem 0; }
.status-go { font-size: 1.25rem; color: var(--pl-blue); }

.status-court, .focus-court {
    flex-shrink: 0;
    width: 4.25rem; height: 4.25rem;
    border-radius: .9rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--pl-blue); color: #fff;
    line-height: 1;
}
.status-court .label, .focus-court .label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.status-court .value, .focus-court .value { font-size: 1.9rem; font-weight: 800; margin-top: .15rem; }
.status-court .small-value, .focus-court .small-value { font-size: 1.05rem; margin-top: .35rem; }
.state-sittingout .status-court, .focus-banner.state-sittingout .focus-court { background: var(--pl-sky); color: var(--pl-navy); }
.state-waiting .status-court, .state-done .status-court,
.focus-banner.state-waiting .focus-court, .focus-banner.state-done .focus-court { background: var(--pl-line); color: var(--pl-navy); }

.focus-banner {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1.1rem;
    border-radius: 1rem;
    background: #fff;
    border: 2px solid var(--pl-blue);
    box-shadow: 0 .75rem 1.5rem rgba(var(--pl-navy-rgb), .08);
}

.match-row.is-focus {
    background: #EEF5FE;
    border-radius: .6rem;
    padding-inline: .6rem;
    margin-inline: -.6rem;
    box-shadow: inset 4px 0 0 var(--pl-blue);
}

/* ---- Elo / probabilities ---- */
.prob-row, .delta-row {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: .6rem;
    font-size: .75rem; font-weight: 600;
    color: var(--bs-secondary-color);
    margin-top: -.25rem;
}
@media (min-width: 576px) {
    .prob-row, .delta-row { padding-left: 6.25rem; } /* line up under the teams */
}
.prob-num { min-width: 2.5rem; font-variant-numeric: tabular-nums; }
.prob-num:last-child { text-align: right; }
.prob-bar {
    flex: 1;
    height: .4rem;
    border-radius: 999px;
    background: var(--pl-sky);
    overflow: hidden;
}
.prob-fill { height: 100%; background: var(--pl-blue); border-radius: 999px 0 0 999px; }
.delta-row { justify-content: space-between; }
.delta-up { color: #1A7F4B; }
.delta-down { color: #B4232A; }
.odds-pill {
    display: inline-block;
    margin-left: .35rem;
    font-size: .72rem; font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--pl-sky); color: var(--pl-navy);
    vertical-align: middle;
}

/* ---- Rankings ---- */
/* White rows + navy header, same as the Players table */
.leaderboard {
    --bs-table-bg: #fff;
    border-collapse: separate;
    border-spacing: 0;
}
.leaderboard thead th {
    background: var(--pl-navy);
    color: #fff;
    border-bottom: 0;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding-block: .75rem;
}
.leaderboard thead th:first-child { border-top-left-radius: .6rem; }
.leaderboard thead th:last-child { border-top-right-radius: .6rem; }
.leaderboard tbody tr:first-child .rank-cell { color: var(--pl-blue); }
.rank-cell { font-weight: 700; color: var(--bs-secondary-color); width: 2.5rem; }
.elo-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.form-dots { display: inline-flex; gap: .2rem; }
.dot {
    width: 1.3rem; height: 1.3rem;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    font-size: .6rem; font-weight: 700;
}
.dot-w { background: #DDF3E7; color: #1A7F4B; }
.dot-l { background: #F9E0E1; color: #B4232A; }

.calc-panel { position: sticky; top: 5.5rem; }
.calc-team-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pl-blue); margin-bottom: .35rem; }
.calc-vs { font-weight: 800; color: var(--bs-secondary-color); }
.calc-pct { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--pl-navy); }
.prob-bar-lg { height: .75rem; }
.stakes-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); font-weight: 600; }

/* ---- Players directory & guest claims ---- */
.invite-row td { background: #F5F9FF; border-bottom-color: var(--pl-line); }
.invite-box {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
    padding: .5rem .25rem;
    text-align: left;
}
.invite-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.75rem; font-weight: 800; letter-spacing: .25em;
    color: var(--pl-navy);
    background: #fff;
    border: 2px dashed var(--pl-sky);
    border-radius: .6rem;
    padding: .15rem .6rem .15rem .85rem;
    display: inline-block;
}
.claim-banner {
    background: #EEF5FE;
    border-left: 4px solid var(--pl-blue);
    border-radius: .6rem;
    padding: .85rem 1rem;
    font-size: .925rem;
}
.claim-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
}
.guest-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    background: var(--pl-sand);
}
.guest-avatar {
    width: 3rem; height: 3rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--pl-sky); color: var(--pl-navy);
    font-weight: 800; font-size: 1.25rem;
}
.elo-big { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--pl-navy); }

/* ---- Players table: white rows, navy header ---- */
.directory-table {
    --bs-table-bg: #fff;
    border-collapse: separate;
    border-spacing: 0;
}
.directory-table thead th {
    background: var(--pl-navy);
    color: #fff;
    border-bottom: 0;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding-block: .75rem;
}
.directory-table thead th:first-child { border-top-left-radius: .6rem; }
.directory-table thead th:last-child { border-top-right-radius: .6rem; }
.directory-table .invite-row td {
    background: #fff;
    border-top: 1px dashed var(--pl-line);
}

/* =========================================================
   Milestones & player profile
   ========================================================= */
.player-link { color: inherit; text-decoration: none; }
.player-link:hover { color: var(--pl-blue); text-decoration: underline; }

.profile-avatar {
    width: 4rem; height: 4rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--pl-sky); color: var(--pl-navy);
    font-size: 1.75rem; font-weight: 800;
}
.profile-elo { font-size: 2.5rem; font-weight: 800; line-height: 1; color: #fff; }

.stat-tile {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    padding: 1rem 1.15rem;
}
.stat-value { font-size: 1.6rem; font-weight: 800; color: var(--pl-navy); line-height: 1.1; }
.stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); font-weight: 600; }

.goal-row { display: flex; gap: .85rem; align-items: flex-start; padding: .65rem 0; border-top: 1px solid var(--pl-line); }
.goal-row:first-of-type { border-top: 0; padding-top: 0; }
.goal-icon {
    width: 2.5rem; height: 2.5rem; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: .75rem;
    background: #EEF5FE;
    font-size: 1.25rem;
}
.goal-progress { height: .45rem; margin: .35rem 0 .25rem; background: var(--pl-line); }
.goal-progress .progress-bar { background: var(--pl-blue); }

.chart-legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--bs-secondary-color); margin-bottom: .35rem; }
.legend-dash { display: inline-block; width: 1rem; border-top: 2px dashed var(--pl-sky); vertical-align: middle; margin-right: .2rem; }
.rating-chart { width: 100%; height: auto; display: block; }
.chart-line { fill: none; stroke: var(--pl-blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: rgba(var(--pl-blue-rgb), .08); stroke: none; }
.chart-baseline { stroke: var(--pl-sky); stroke-width: 1.5; stroke-dasharray: 5 5; }
.chart-dot { fill: var(--pl-blue); stroke: #fff; stroke-width: 2; }

.game-row {
    display: flex; align-items: center; gap: .85rem;
    padding: .6rem 0;
    border-top: 1px solid var(--pl-line);
    color: inherit; text-decoration: none;
}
.game-row:first-of-type { border-top: 0; }
.game-row:hover .fw-medium { color: var(--pl-blue); }
.min-w-0 { min-width: 0; }
.result-chip {
    width: 2rem; height: 2rem; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: .55rem;
    font-weight: 800; font-size: .85rem;
}
.result-chip.win { background: #DDF3E7; color: #1A7F4B; }
.result-chip.loss { background: #F9E0E1; color: #B4232A; }

.badge-group-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pl-blue); margin-bottom: .5rem; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; }
.badge-tile {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem;
    padding: .75rem .4rem;
    border-radius: .85rem;
    border: 1px solid var(--pl-line);
    background: #fff;
}
.badge-tile.earned { border-color: var(--pl-sky); background: #F5F9FF; }
.badge-tile.locked { opacity: .45; filter: grayscale(1); }
.badge-icon { font-size: 1.6rem; line-height: 1; }
.badge-title { font-size: .78rem; font-weight: 700; color: var(--pl-navy); line-height: 1.2; }
.badge-sub { font-size: .68rem; color: var(--bs-secondary-color); }

.unlock-banner {
    position: relative;
    background: linear-gradient(135deg, var(--pl-navy), #123B73);
    color: #fff;
    border-radius: 1rem;
    padding: 1rem 3rem 1rem 1.25rem;
    border-bottom: 4px solid var(--pl-sky);
}
.unlock-title { font-weight: 800; font-size: 1.1rem; }
.unlock-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.12);
    border-radius: 999px;
    padding: .3rem .8rem .3rem .4rem;
    color: #fff; text-decoration: none;
    font-size: .9rem;
}
.unlock-chip:hover { background: rgba(255,255,255,.2); color: #fff; }
.unlock-icon {
    width: 1.75rem; height: 1.75rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--pl-sky);
}
.unlock-close { position: absolute; top: 1rem; right: 1rem; filter: invert(1); }

.feed-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem 0;
    border-top: 1px solid var(--pl-line);
    color: inherit; text-decoration: none;
    font-size: .9rem;
}
.feed-row:first-of-type { border-top: 0; padding-top: 0; }
.feed-icon {
    width: 2.25rem; height: 2.25rem; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: .65rem;
    background: #EEF5FE;
    font-size: 1.1rem;
}

/* =========================================================
   Account settings & admin site
   ========================================================= */
.manage-nav .nav-link { border-radius: 999px; font-weight: 500; color: var(--pl-navy); }
.manage-nav .nav-link.active { background: var(--pl-blue); color: #fff; }

.admin-header { border-bottom-color: #F2C14E; }
.admin-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #F2C14E; }

.admin-nav {
    position: sticky; top: 5.5rem;
    display: flex; flex-direction: column; gap: .25rem;
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    padding: .5rem;
}
@media (max-width: 991.98px) {
    .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}
.admin-nav-link {
    display: block;
    padding: .5rem .75rem;
    border-radius: .6rem;
    color: var(--pl-navy);
    text-decoration: none;
    font-weight: 500;
    font-size: .925rem;
}
.admin-nav-link:hover { background: var(--pl-sand); }
.admin-nav-link.active { background: var(--pl-navy); color: #fff; }

.admin-tile { color: inherit; transition: border-color .15s, transform .15s; }
.admin-tile:hover { border-color: var(--pl-blue); transform: translateY(-2px); }

.status-pill {
    display: inline-block;
    font-size: .72rem; font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--pl-line); color: var(--pl-navy);
    white-space: nowrap;
}
.status-pill.ok { background: #DDF3E7; color: #1A7F4B; }
.status-pill.warn { background: #FFF1D6; color: #8A5A00; }
.status-pill.bad { background: #F9E0E1; color: #B4232A; }
.status-pill.admin { background: #0B2545; color: #F2C14E; }

/* ---- Score verification & integrity ---- */
.verify-row {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin-top: -.15rem;
}
@media (min-width: 576px) { .verify-row { padding-left: 6.25rem; } }
.dispute-input { max-width: 16rem; }
.info-strip {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-left: 4px solid var(--pl-sky);
    border-radius: .75rem;
    padding: .65rem 1rem;
    font-size: .925rem;
}
.flag-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    padding: .55rem 0;
    border-top: 1px solid var(--pl-line);
}
.flag-row:first-of-type { border-top: 0; }

/* ---- Record a game ---- */
.team-box {
    height: 100%;
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    padding: 1rem;
    background: var(--pl-sand);
}
.team-box-a { background: #EEF5FE; border-color: #B3CEF4; }
.slot-fixed {
    display: flex; align-items: center;
    padding: .55rem .85rem;
    margin-bottom: .5rem;
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: var(--bs-border-radius);
    font-weight: 600;
}
.score-big { text-align: center; font-size: 1.75rem; font-weight: 800; }
.awaiting-panel { border-left: 6px solid #F2C14E; }
.awaiting-row { align-items: flex-start; }
.summary-panel .text-sky { color: var(--pl-sky) !important; }

/* ---- Site guide ---- */
.guide-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--pl-sky); }
.guide-lead { max-width: 46rem; font-size: 1.05rem; }
#guide-top:focus { outline: none; }

.guide-toc { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; padding-right: .25rem; }
.guide-toc-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--bs-secondary-color); margin: 0 0 .5rem .75rem; }
.guide-toc .nav-link {
    display: flex; align-items: center; gap: .55rem;
    padding: .4rem .75rem; margin-bottom: 2px;
    color: var(--bs-body-color); font-size: .92rem;
    border-radius: .6rem; border-left: 3px solid transparent;
    transition: background-color .15s, color .15s, border-color .15s;
}
.guide-toc .nav-link:hover { background: #E7F0FC; color: var(--pl-navy); }
.guide-toc .nav-link.active { background: #E7F0FC; color: var(--bs-primary); font-weight: 600; border-left-color: var(--bs-primary); }
.toc-icon { width: 1.25rem; text-align: center; }

.guide-toc-mobile { background: #fff; border: 1px solid var(--pl-line); border-radius: 1rem; padding: .75rem 1rem; }
.guide-toc-mobile summary { font-weight: 600; cursor: pointer; }
.guide-toc-mobile li a { display: block; padding: .3rem 0; text-decoration: none; }

.guide-section {
    scroll-margin-top: 5.5rem;
    background: #fff; border: 1px solid var(--pl-line); border-radius: 1.25rem;
    padding: 1.75rem; margin-bottom: 1.5rem;
}
.guide-section h2 { font-size: 1.45rem; font-weight: 700; margin-bottom: 1rem; display: flex; gap: .6rem; align-items: center; }
.guide-section h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .6rem; color: var(--pl-navy); scroll-margin-top: 5.5rem; }
.guide-section p, .guide-section li, .guide-section dd { line-height: 1.65; }
.guide-section > :last-child { margin-bottom: 0; }

.guide-tile { background: var(--pl-sand); border: 1px solid var(--pl-line); border-radius: 1rem; padding: 1rem 1.1rem; height: 100%; }
.guide-tile p { font-size: .9rem; color: var(--bs-secondary-color); margin: .3rem 0 0; }
.tile-icon { font-size: 1.5rem; margin-bottom: .25rem; }

.guide-steps { counter-reset: step; list-style: none; padding-left: 0; }
.guide-steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; margin-bottom: .75rem; }
.guide-steps > li::before {
    content: counter(step);
    position: absolute; left: 0; top: .05rem;
    width: 1.8rem; height: 1.8rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bs-primary); color: #fff; font-weight: 700; font-size: .85rem;
}

.guide-callout { background: #EEF5FE; border-left: 4px solid var(--bs-primary); border-radius: .75rem; padding: .9rem 1.1rem; margin: 1rem 0; }
.guide-dl { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1rem; align-items: baseline; }
.guide-dl dd { margin: 0; }
@media (max-width: 575.98px) { .guide-dl { grid-template-columns: 1fr; } .guide-dl dd { margin-bottom: .5rem; } }

.guide-table { --bs-table-bg: transparent; }
.guide-table thead th { background: var(--pl-navy); color: #fff; font-weight: 600; border: 0; }
.guide-table thead th:first-child { border-top-left-radius: .6rem; }
.guide-table thead th:last-child { border-top-right-radius: .6rem; }

.kbd-like { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--pl-sky); color: var(--pl-navy); font-size: .85em; font-weight: 600; }
.score-ok, .score-bad { border-radius: .6rem; padding: .55rem .8rem; font-weight: 600; }
.score-ok { background: #DDF3E7; color: #1A7F4B; }
.score-bad { background: #F9E0E1; color: #B4232A; }

.milestone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.milestone-chip { display: flex; gap: .7rem; align-items: flex-start; background: var(--pl-sand); border: 1px solid var(--pl-line); border-radius: .8rem; padding: .65rem .8rem; }
.milestone-chip .ms-icon { font-size: 1.4rem; line-height: 1; }

.guide-faq .accordion-button { font-weight: 600; font-size: 1rem; }
.guide-faq .accordion-button:not(.collapsed) { background: #EEF5FE; color: var(--pl-navy); box-shadow: none; }
.guide-faq .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .2); }

.back-to-top {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030;
    width: 3rem; height: 3rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--pl-navy); color: #fff;
    box-shadow: 0 .5rem 1.25rem rgba(11, 37, 69, .3);
    opacity: 0; visibility: hidden; transform: translateY(.75rem);
    transition: opacity .2s, transform .2s, visibility .2s, background-color .15s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover, .back-to-top:focus-visible { background: var(--bs-primary); color: #fff; }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } }
.footer-link { color: var(--pl-sky); text-decoration: none; font-size: .875rem; font-weight: 500; }
.footer-link:hover { color: #fff; text-decoration: underline; }

/* ---- Home: hero extras ---- */
.hero-trust li { color: rgba(255, 255, 255, .78); font-size: .9rem; }
.live-pill {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .4rem .9rem; border-radius: 999px;
    background: rgba(255, 255, 255, .12); color: #fff;
    font-size: .9rem; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .2);
}
.live-pill:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.live-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); animation: live-pulse 1.8s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 .55rem rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.stakes-strip { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; border-top: 1px solid var(--pl-line); padding-top: .9rem; margin-top: .25rem; }
.stakes-strip > div { display: flex; flex-direction: column; }

/* ---- Home: stats band ----
   A white card that overlaps the bottom of the hero, so the hero stays the only strong blue. */
.hero-body { padding-bottom: 7rem; }
@media (min-width: 992px) { .hero-body { padding-bottom: 8rem; } }
.stats-band { position: relative; z-index: 2; margin-top: -4.5rem; }
.stats-card {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 1.25rem 2.5rem rgba(var(--pl-navy-rgb), .12);
}
@media (max-width: 575.98px) { .stats-card { padding: 1.25rem; border-radius: 1.1rem; } }
.home-stat-tile {
    height: 100%;
    background: var(--pl-sand);
    border: 1px solid var(--pl-line);
    border-radius: 1rem;
    padding: 1.1rem 1.1rem 1rem;
    display: flex; flex-direction: column;
}
.home-stat-icon { font-size: 1.3rem; margin-bottom: .35rem; }
.home-stat-value { font-size: clamp(1.75rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.05; color: var(--pl-navy); font-variant-numeric: tabular-nums; }
.home-stat-label { font-size: .85rem; color: var(--bs-secondary-color); margin-top: .2rem; }
.week-chip { display: inline-block; padding: .35rem .85rem; border-radius: 999px; background: #FFF1D6; color: #8A5A00; font-weight: 700; font-size: .9rem; }
.upset-note { color: var(--bs-secondary-color); }
.upset-note strong { color: var(--bs-primary); }

/* ---- Home: formats ---- */
.format-group { margin-bottom: 1rem; }
.format-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--bs-secondary-color); margin-bottom: .4rem; }
.format-chip { display: inline-block; padding: .4rem .85rem; border-radius: 999px; background: #E7F0FC; color: var(--pl-navy); font-weight: 500; font-size: .92rem; }
.format-chip.alt { background: var(--pl-navy); color: #fff; }

/* ---- Home: top players + milestone feed ---- */
.top-list li, .milestone-feed li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--pl-line); }
.top-list li:last-child, .milestone-feed li:last-child { border-bottom: 0; }
.top-list a, .milestone-feed a { text-decoration: none; color: var(--pl-navy); }
.top-list a:hover, .milestone-feed a:hover { color: var(--bs-primary); text-decoration: underline; }
.top-rank { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem; background: #E7F0FC; color: var(--pl-navy); }
.top-rank.rank-1 { background: #F2C14E; }
.top-rank.rank-2 { background: #D5DDE8; }
.top-rank.rank-3 { background: #E9B98A; }
.top-elo { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.25rem; text-align: right; }
.milestone-feed .ms-icon { font-size: 1.5rem; width: 2rem; text-align: center; flex-shrink: 0; }

/* ---- Legal pages (privacy, terms) – reuse the guide layout ---- */
.legal-summary { background: #EEF5FE; border-color: #B3CEF4; }
.legal-checks { list-style: none; padding-left: 0; }
.legal-checks li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
.legal-checks li::before {
    content: "✓"; position: absolute; left: 0; top: .1rem;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bs-primary); color: #fff; font-size: .75rem; font-weight: 700;
}
.legal-body .guide-section h2 { font-size: 1.3rem; }
.legal-toc-foot { border-top: 1px solid var(--pl-line); margin-top: .75rem; padding: .75rem .75rem 0; font-size: .9rem; }
.legal-toc-foot a { text-decoration: none; font-weight: 600; }

/* ---- Terms acceptance ---- */
.terms-accept { background: var(--pl-sand); border: 1px solid var(--pl-line); border-radius: .85rem; padding: .85rem 1rem; }
.terms-accept .form-check-input { margin-top: .25rem; width: 1.15em; height: 1.15em; border: 1.5px solid #7D93B2; }
.terms-accept .form-check-label { font-size: .92rem; }
.terms-banner { background: #FFF6E0; border-bottom: 1px solid #F2C14E; color: var(--pl-navy); }
.terms-banner a { font-weight: 600; }

/* ---- Session: game waiting on an earlier game ---- */
.waiting-chip {
    display: inline-block; white-space: nowrap;
    padding: .2rem .6rem; border-radius: 999px;
    background: #EEF2F7; color: var(--bs-secondary-color);
    font-size: .78rem; font-weight: 600; cursor: help;
}

/* ---- Pickles (11–0 wins) ---- */
.pickle-tag {
    display: inline-block; margin-left: .4rem;
    padding: .1rem .5rem; border-radius: 999px;
    background: #E3F4DC; color: #2E6B1F;
    font-size: .72rem; font-weight: 700; vertical-align: middle;
}

/* ---- Session: game marked "not played" ---- */
.notplayed-chip {
    display: inline-block; white-space: nowrap;
    padding: .2rem .6rem; border-radius: 999px;
    background: #F1F3F6; color: #6B7280;
    border: 1px dashed #C5CCD6;
    font-size: .78rem; font-weight: 600;
}

/* ---- Session: live indicator ---- */
.tag-live { display: inline-flex; align-items: center; gap: .4rem; transition: background-color .3s, color .3s; }
.tag-live.is-flash { background: #3DDC84; color: var(--pl-navy); }

/* ---- Account settings: notifications ---- */
.notify-option { background: var(--pl-sand); border: 1px solid var(--pl-line); border-radius: .85rem; padding: 1rem 1.1rem; }
.notify-option .form-check-input { width: 2.4em; height: 1.25em; }
.notify-option ul { padding-left: 1.1rem; }
.manage-nav { flex-wrap: wrap; gap: .25rem; }

/* ---- Account settings: delete account ---- */
.danger-zone { border: 1px solid #F1B5B8; background: #FFF7F7; border-radius: .85rem; padding: 1rem 1.1rem; }
.delete-choice { display: flex; gap: .65rem; align-items: flex-start; padding: .6rem .75rem; margin-bottom: .5rem; background: #fff; border: 1px solid var(--pl-line); border-radius: .65rem; }
.delete-choice .form-check-input { margin-top: .3rem; flex-shrink: 0; }
.delete-choice label { cursor: pointer; }

/* ---- Error page details (admins / ShowErrorDetails) ---- */
.error-details pre { white-space: pre-wrap; word-break: break-word; background: var(--pl-sand); padding: .75rem; border-radius: .5rem; max-height: 28rem; overflow: auto; }

/* ---------- Locations ---------- */
a.tag-link { text-decoration: none; color: inherit; transition: background-color .15s; }
a.tag-link:hover, a.tag-link:focus-visible { background: rgba(var(--pl-sky-rgb), .32); color: #fff; }
.location-table td:first-child { min-width: 11rem; }
.loc-bar { height: 4px; border-radius: 2px; background: var(--pl-line); margin-top: .35rem; max-width: 12rem; overflow: hidden; }
.loc-bar > span { display: block; height: 100%; background: var(--pl-blue); border-radius: 2px; }
.location-filter .form-select { max-width: 14rem; }

/* ---------- Head-to-head & partners (profile) ---------- */
.h2h-panel {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-left: 4px solid var(--pl-blue);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}
.h2h-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.h2h-name { font-weight: 700; color: var(--pl-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-score { font-size: 2rem; font-weight: 800; color: var(--pl-navy); line-height: 1; font-variant-numeric: tabular-nums; }
.h2h-score.is-ahead > span:first-child { color: #1A7F4B; }
.h2h-score.is-behind > span:last-child { color: #B4232A; }
.h2h-dash { color: var(--bs-secondary-color); margin: 0 .35rem; font-weight: 600; }
.h2h-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.25rem; margin-top: .6rem; font-size: .875rem; color: var(--bs-secondary-color); }
.h2h-sub strong { color: var(--pl-navy); }
.h2h-meetings { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .75rem; }
.h2h-meeting { font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; text-decoration: none; font-variant-numeric: tabular-nums; }
.h2h-meeting.win { background: #DDF3E7; color: #1A7F4B; }
.h2h-meeting.loss { background: #F9E0E1; color: #B4232A; }
.h2h-meeting:hover { filter: brightness(.95); }

.matchup-highlight { background: var(--pl-sand); border: 1px solid var(--pl-line); border-radius: .85rem; padding: .7rem .85rem; min-width: 0; }
.matchup-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--bs-secondary-color); margin-bottom: .2rem; }
.matchup-name { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchup-table { --bs-table-bg: #fff; }
.matchup-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); font-weight: 700; }
.matchup-table tr.is-me td { background: #EEF5FE; }

/* ---------- Share cards ---------- */
button.badge-tile { font: inherit; width: 100%; cursor: pointer; transition: transform .12s, box-shadow .12s; }
button.badge-tile:hover, button.badge-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--pl-navy-rgb), .12); }
button.badge-tile.is-selected { border-color: var(--pl-blue); box-shadow: 0 0 0 2px rgba(var(--pl-blue-rgb), .35); }

.share-panel { background: #fff; border: 1px solid var(--pl-line); border-radius: 1rem; padding: 1rem; color: var(--pl-navy); }
.share-preview { position: relative; max-width: 360px; margin: 0 auto; }
.share-preview canvas { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1350; border-radius: .75rem; background: var(--pl-navy); box-shadow: 0 8px 24px rgba(var(--pl-navy-rgb), .18); }
.share-preview.is-square canvas { aspect-ratio: 1 / 1; }
.share-loading { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.8); }

/* ---------- Session recap ---------- */
.recap-panel {
    background: #fff;
    border: 1px solid var(--pl-line);
    border-top: 5px solid var(--pl-sky);
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 1.1rem;
    box-shadow: 0 10px 30px rgba(var(--pl-navy-rgb), .06);
}
.recap-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.recap-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-blue); }
.recap-title { font-size: 1.5rem; font-weight: 800; color: var(--pl-navy); margin: .15rem 0 .1rem; }
.recap-summary { color: var(--bs-secondary-color); font-size: .9rem; }
.recap-you {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem;
    margin-top: 1rem; padding: .6rem .9rem;
    background: #EEF5FE; border-radius: .75rem; font-size: .92rem;
}
.recap-you-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-blue); }
.recap-podium { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.recap-podium li { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border: 1px solid var(--pl-line); border-radius: .85rem; background: var(--pl-sand); }
.recap-podium li.place-1 { background: #FFF7E3; border-color: #F5D58A; }
.recap-medal { width: 2rem; height: 2rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-weight: 800; color: var(--pl-navy); background: #C9D3E0; }
.place-1 .recap-medal { background: #F5B83D; }
.place-3 .recap-medal { background: #D99A62; }
.recap-name { font-weight: 700; color: var(--pl-navy); flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap-record { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.recap-facts { display: grid; gap: .75rem; }
.recap-fact { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; }
.recap-fact-icon { width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: grid; place-items: center; border-radius: .6rem; background: var(--pl-sand); font-size: 1.1rem; }
.recap-fact-label { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bs-secondary-color); }
.recap-badge { display: inline-block; font-size: .8rem; padding: .2rem .55rem; border-radius: 999px; background: #F5F9FF; border: 1px solid var(--pl-sky); color: var(--pl-navy); text-decoration: none; }
.recap-badge:hover { background: #E6F2FF; }
@media (max-width: 575.98px) {
    .recap-head { flex-direction: column; }
}

/* ---------- Court display (/sessions/{id}/display) ----------
   Sized from the viewport so it reads from across the courts on a TV, and still works on a laptop. */
.display-root {
    --d-bg: #081B33;
    --d-panel: rgba(255, 255, 255, .06);
    --d-line: rgba(255, 255, 255, .12);
    --d-dim: rgba(255, 255, 255, .62);
    min-height: 100vh;
    display: flex; flex-direction: column;
    background: radial-gradient(ellipse at 85% -10%, rgba(143, 211, 255, .18), transparent 55%), linear-gradient(160deg, #0B2545, #0A1F3B 60%, #102F5A);
    color: #fff;
    font-size: clamp(14px, 0.9vw + 0.45vh, 30px);
    line-height: 1.3;
    padding: 1.1em 1.4em 1.4em;
    gap: 1em;
}
.display-root.hide-cursor, .display-root.hide-cursor * { cursor: none !important; }
.display-dim { color: var(--d-dim); }

.display-head { display: flex; align-items: center; gap: 1.4em; padding-bottom: .9em; border-bottom: 3px solid var(--pl-sky); }
.display-brand { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: 1.05em; white-space: nowrap; }
.display-brand img { width: 2.2em; height: 2.2em; }
.display-title { flex: 1 1 auto; min-width: 0; }
.display-title h1 { color: #fff; font-size: 1.9em; font-weight: 800; margin: 0; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display-sub { color: var(--d-dim); font-size: .9em; margin-top: .15em; }
.display-meta { min-width: 11em; text-align: right; }
.display-round { font-size: 1.35em; font-weight: 800; color: var(--pl-sky); }
.display-of { color: var(--d-dim); font-weight: 600; font-size: .75em; }
.display-progress-bar { height: .4em; border-radius: 1em; background: var(--d-line); margin: .3em 0 .2em; overflow: hidden; }
.display-progress-bar span { display: block; height: 100%; background: var(--pl-sky); border-radius: 1em; transition: width .6s; }
.display-progress-text { font-size: .8em; color: var(--d-dim); }
.display-clock { font-size: 2.1em; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.display-ampm { font-size: .45em; margin-left: .2em; color: var(--d-dim); }
.display-live { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: .85em; padding: .3em .8em; border-radius: 2em; background: rgba(61, 220, 132, .15); color: #7CF0B0; transition: background-color .3s; }
.display-live.is-flash { background: #3DDC84; color: var(--pl-navy); }
.display-fs { background: transparent; border: 1px solid var(--d-line); color: #fff; border-radius: .5em; font-size: 1.1em; width: 2em; height: 2em; line-height: 1; }
.display-fs:hover { background: var(--d-panel); }
:fullscreen .display-fs { opacity: .25; }

.display-main { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 1.4em; align-items: start; }
.display-left { display: flex; flex-direction: column; gap: 1.2em; min-width: 0; }
.display-side { display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.display-section-title { font-size: .85em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pl-sky); margin: 0 0 .6em; }
.display-panel { background: var(--d-panel); border: 1px solid var(--d-line); border-radius: 1em; padding: .9em 1.1em; }
.display-panel-title { font-size: .8em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pl-sky); margin: 0 0 .5em; display: flex; justify-content: space-between; }
.display-page { color: var(--d-dim); letter-spacing: 0; }

.display-courts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.display-courts.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: .85em; }
.display-court { background: #fff; color: var(--pl-navy); border-radius: 1.1em; padding: 1em 1.2em 1.1em; box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .25); position: relative; overflow: hidden; }
.display-court::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .45em; background: var(--pl-blue); }
.display-court.is-waiting { opacity: .72; }
.display-court.is-waiting::before { background: #C9D3E0; }
.display-court-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5em; }
.display-court-name { font-size: 1.5em; font-weight: 800; }
.display-court-round { font-size: .8em; font-weight: 700; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .08em; }
.display-team { font-size: 1.45em; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display-vs { font-size: .8em; font-weight: 700; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .12em; margin: .15em 0; }
.display-chance { display: flex; margin-top: .8em; height: 1.6em; border-radius: .5em; overflow: hidden; font-size: .8em; font-weight: 800; }
.display-chance-a { background: var(--pl-blue); color: #fff; display: flex; align-items: center; padding-left: .6em; }
.display-chance-b { flex: 1; background: #DCE8F7; color: var(--pl-navy); display: flex; align-items: center; justify-content: flex-end; padding-right: .6em; }
.display-court-note { margin-top: .8em; font-size: .85em; font-weight: 600; color: #8A5A00; background: #FFF3D6; border-radius: .5em; padding: .35em .6em; }

.display-waiting { font-size: 1.3em; font-weight: 600; text-align: center; padding: 2em 1em; }
.display-next-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em 1em; }
.display-next-item { display: flex; gap: .7em; align-items: baseline; background: var(--d-panel); border: 1px solid var(--d-line); border-radius: .7em; padding: .5em .8em; min-width: 0; }
.display-next-item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.display-next-court { color: var(--pl-sky); font-weight: 800; white-space: nowrap; font-size: .85em; }
.display-sitting { margin-top: .7em; color: var(--d-dim); }
.display-sitting strong { color: #fff; }

.display-standings { width: 100%; border-collapse: collapse; font-size: 1em; }
.display-standings td { padding: .32em .3em; border-bottom: 1px solid var(--d-line); }
.display-standings tr:last-child td { border-bottom: 0; }
.display-standings tr.is-out td { opacity: .5; }
.display-rank { width: 1.8em; color: var(--d-dim); font-weight: 700; }
.display-standings tr:first-child .display-rank { color: #F5B83D; }
.display-name { font-weight: 700; max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

.display-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.display-results li { display: flex; align-items: baseline; gap: .6em; min-width: 0; padding: .25em .4em; border-radius: .5em; }
.display-results li.is-new { animation: display-new 6s ease-out; }
@keyframes display-new { 0%, 40% { background: rgba(143, 211, 255, .35); } 100% { background: transparent; } }
.display-result-score { font-weight: 800; color: var(--pl-sky); font-variant-numeric: tabular-nums; white-space: nowrap; }
.display-result-teams { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display-tag { font-size: .7em; font-weight: 700; padding: .1em .5em; border-radius: 1em; background: rgba(255, 255, 255, .15); white-space: nowrap; }
.display-tag.bad { background: rgba(180, 35, 42, .6); }

.display-qr-panel { display: flex; align-items: center; gap: 1em; }
.display-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22em); gap: 1.2em; align-items: start; }
.display-bottom .display-qr-panel { margin-top: 1.75em; }
.display-bottom .display-next-list { grid-template-columns: 1fr; }
.display-qr { width: 7em; height: 7em; flex-shrink: 0; background: #fff; border-radius: .5em; padding: .25em; }
.display-qr svg { display: block; width: 100%; height: 100%; }
.display-url { font-size: .75em; color: var(--d-dim); margin-top: .3em; word-break: break-all; }

.display-empty { flex: 1; display: grid; place-content: center; text-align: center; gap: .5em; }
.display-empty h2 { color: #fff; }
.display-empty-icon { font-size: 4em; }

.display-finished .display-podium-panel { padding: 1.6em 1.8em; }
.display-kicker { font-size: .9em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pl-sky); }
.display-winner { color: #fff; font-size: 2.8em; font-weight: 800; margin: .2em 0 .1em; }
.display-summary { color: var(--d-dim); font-size: 1.1em; margin-bottom: 1.2em; }
.display-podium { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }
.display-podium li { display: flex; align-items: center; gap: 1em; background: #fff; color: var(--pl-navy); border-radius: 1em; padding: .7em 1.1em; font-size: 1.4em; }
.display-medal { width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; font-weight: 800; background: #C9D3E0; flex-shrink: 0; }
.display-podium .place-1 .display-medal { background: #F5B83D; }
.display-podium .place-3 .display-medal { background: #D99A62; }
.display-podium-name { flex: 1; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display-podium-record { font-weight: 700; color: var(--pl-blue); white-space: nowrap; }
.display-podium-record small { color: var(--bs-secondary-color); font-weight: 600; }
.display-highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; font-size: 1.05em; }

@media (max-width: 900px), (orientation: portrait) {
    .display-main { grid-template-columns: 1fr; }
    .display-head { flex-wrap: wrap; gap: .8em; }
    .display-root { font-size: clamp(14px, 2.2vw, 26px); }
    .display-courts.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .display-bottom { grid-template-columns: 1fr; }
    .display-bottom .display-qr-panel { margin-top: 0; }
}

/* ---------- Home: See it in action ---------- */
.showcase-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pl-blue); }
.showcase-row + .showcase-row { margin-top: 3.5rem; }
@media (min-width: 992px) { .showcase-row + .showcase-row { margin-top: 5rem; } }
.showcase-points li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; }
.showcase-points li::before {
    content: "✓"; position: absolute; left: 0; top: .1rem;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(var(--pl-blue-rgb), .12); color: var(--pl-blue);
    font-size: .8rem; font-weight: 800;
}
.shot { position: relative; margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
/* Browser window */
.shot-browser { border-radius: 14px; overflow: hidden; background: var(--pl-sand); border: 1px solid var(--pl-line); box-shadow: 0 24px 60px rgba(var(--pl-navy-rgb), .16), 0 4px 12px rgba(var(--pl-navy-rgb), .06); }
.shot-bar { display: flex; gap: 6px; align-items: center; height: 30px; padding: 0 14px; background: #E8EEF6; border-bottom: 1px solid var(--pl-line); }
.shot-bar span { width: 10px; height: 10px; border-radius: 50%; background: #C9D3E0; }
.shot-bar span:first-child { background: #F28B82; }
.shot-bar span:nth-child(2) { background: #F5C46B; }
.shot-bar span:nth-child(3) { background: #7CD39A; }
/* TV */
.shot-tv { padding: 10px; border-radius: 16px; background: #10151D; box-shadow: 0 30px 60px rgba(var(--pl-navy-rgb), .28); }
.shot-tv img { border-radius: 6px; }
.shot-tv::after { content: ""; position: absolute; left: 50%; bottom: -22px; width: 26%; height: 12px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(#2A313C, #10151D); }
.shot-none img { filter: drop-shadow(0 18px 30px rgba(var(--pl-navy-rgb), .12)); }
@media (prefers-reduced-motion: no-preference) {
    .shot { transition: transform .35s ease; }
    .showcase-row:hover .shot { transform: translateY(-4px); }
}

/* ---------- Admin: Online now / release check ---------- */
.release-verdict { display: flex; gap: .85rem; align-items: center; padding: .8rem 1rem; border-radius: .85rem; border: 1px solid; }
.release-verdict.is-go { background: #E6F6EE; border-color: #A8DFC2; color: #145C38; }
.release-verdict.is-ok { background: #FFF6DE; border-color: #F2D488; color: #6B4A00; }
.release-verdict.is-wait { background: #FCE8E9; border-color: #F0B4B8; color: #8A1C23; }
.release-icon { font-size: 1.6rem; line-height: 1; }
.online-stat { background: var(--pl-sand); border: 1px solid var(--pl-line); border-radius: .75rem; padding: .55rem .75rem; height: 100%; cursor: help; }
.online-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--pl-navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.online-stat-label { font-size: .75rem; color: var(--bs-secondary-color); }
.online-table { --bs-table-bg: #fff; font-size: .875rem; }
.online-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); }