/* =============================================================================
   Winnrs — brand palette: Charcoal & Copper (winnrs.co.uk/palette.png)
   ============================================================================= */
:root {
    --brand-charcoal:   #1F1F23;   /* primary — logo body */
    --brand-copper:     #E07A3F;   /* accent — logo border + arrow + action buttons */
    --brand-copper-2:   #C2632E;   /* darker copper — button hover / active */
    --brand-copper-wash:#FAF0E9;   /* mildest copper tint — shaded panels (game cards) */
    --brand-page:       #E9E9EB;   /* site-wide page + top-bar shade (the "whitespace" tone) */
    --brand-white:      #FFFFFF;
    --brand-charcoal-2: #34343C;   /* lifted charcoal — hover / active */
    --brand-grey:       #6B6B73;   /* muted text */
    --brand-green:      #2E9E5B;   /* the USER'S SELECTION (picked horse / picked team) — never an accent */
    --brand-blue:       #0D6EFD;   /* dates + horse names on the Tipstar board (the blue the owner liked on mobile) */
}

/* Site-wide page shade — the top bar and every page sit on this soft grey instead of stark white
   (the owner found the all-white desktop view too bright). Loads after Bootstrap so this wins. */
body { background-color: var(--brand-page); }

/* Game-type name, rendered copper wherever a type name is shown as a heading / tile
   (via the <GameTypeName /> component). Inherits the surrounding font-size. */
.winnrs-gametype { color: var(--brand-copper); font-weight: 500; }

/* Game-type genre icon shown ahead of the game name on the player game pages (LMS / Tipstar /
   Goal Selector / Magic 6). Charcoal (black) to MATCH the genre icon on the game tiles/lobby cards
   (.game-genre-icon) — the glyph inherits colour via currentColor, so this token tints it. */
.game-title-icon { color: var(--brand-charcoal); display: inline-flex; align-items: center; }

/* The user's SELECTION (picked horse on the Tipstar racecard, picked team on the LMS pick screen).
   The owner is colour-blind, so this reads WITHOUT relying on hue: a solid dark fill (high
   contrast / brightness) + white text + a tick in the markup. Colour alone is never the signal.
   Keeps the SAME font weight/size as the other buttons — the fill + tick do the work, not bolder text. */
.winnrs-pick-selected,
.winnrs-pick-grid .btn.winnrs-pick-selected {
    border: 1.5px solid var(--brand-charcoal) !important;
    background: var(--brand-charcoal) !important;
    color: #fff !important;
}
/* Whiten the row's plain text on the dark selected fill — but NOT badges (.badge carries its own
   background+colour pairing, e.g. the copper-on-white "fav" pill; forcing it white made its text
   invisible on the selected racecard row). Badges keep their own styling. */
.winnrs-pick-selected *:not(.badge):not(.badge *) { color: #fff !important; }
/* "Clear pick" control under the grid. */
.winnrs-clear-pick { border-radius: 0.85rem; }

/* Checked switches / checkboxes are copper (brand "on"), not Bootstrap blue —
   fixes the "Show completed" switch and any racing/daily-winners toggles too. */
.form-check-input:checked {
    background-color: var(--brand-copper);
    border-color: var(--brand-copper);
}

/* Inline genre icons (SVG with currentColor) — sized to the surrounding text, recolour with it. */
.genre-icon {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
    display: inline-block;
}

/* Horse-racing genre logo: a CSS mask of the (alpha) silhouette PNG filled with currentColor, so it
   recolours with the surrounding text colour exactly like the inline-SVG genre icons. Landscape ~1.5:1. */
.genre-icon-horse {
    display: inline-block;
    width: 1.58em;
    height: 1.05em;
    vertical-align: -0.22em;
    background-color: currentColor;
    -webkit-mask: url(/img/horse-racing.png) center / contain no-repeat;
    mask: url(/img/horse-racing.png) center / contain no-repeat;
}

/* Game-card grid (My-games + Lobby). Fixed-width cards clustered to the left with a tight gap —
   not stretched across the row (which left big gaps between panels on wide screens). Cards shrink
   to fit narrow screens but never grow past their cap. */
.game-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}
.game-grid > .game-card {
    flex: 0 1 360px;
    max-width: 380px;
}
@media (max-width: 575.98px) {
    .game-grid > .game-card { flex-basis: 100%; max-width: 100%; }
}

/* Action buttons = copper. Destructive (btn-danger / btn-outline-danger) and cancel
   (btn-outline-secondary) keep Bootstrap's red / neutral so dangerous actions stay
   visually distinct from positive ones. The main nav bar uses .nav-link, not .btn. --- */
.btn-primary {
    background-color: var(--brand-copper);
    border-color: var(--brand-copper);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--brand-copper-2);
    border-color: var(--brand-copper-2);
    color: #fff;
}
.btn-outline-primary {
    color: var(--brand-copper);
    border-color: var(--brand-copper);
}
.btn-outline-primary:hover {
    background-color: var(--brand-copper);
    border-color: var(--brand-copper);
    color: #fff;
}
a, .btn-link { color: var(--brand-charcoal); }
a:hover { color: var(--brand-copper); }

/* Sub-nav pills (admin sub-menus + genre selectors): one look everywhere — charcoal text,
   copper active. Works for <a> (Users tabs) and <button> (genre pills); reset button chrome. */
.nav-pills .nav-link { color: var(--brand-charcoal); border: 0; background: transparent; }
.nav-pills .nav-link:hover { color: var(--brand-copper); }
.nav-pills .nav-link.active { background-color: var(--brand-copper); color: var(--brand-white); }

/* =============================================================================
   Auth screens (login / register / confirm / forgot / reset)
   White background, logo top-centre, form centred. Mobile-first.
   ============================================================================= */
.auth-shell {
    min-height: 100vh;
    background: var(--brand-white);
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}
.auth-container {
    width: 100%;
    max-width: 400px;
    margin-top: 5vh;
}
.auth-wordmark {
    font-family: 'Bebas Neue', system-ui, sans-serif;
    color: var(--brand-copper);
    text-align: center;
    font-size: 2.6rem;
    letter-spacing: 0.12em;
    line-height: 1;
    margin-bottom: 0.6rem;
}

.auth-logo {
    display: block;
    width: 256px;
    max-width: 72%;
    height: auto;
    margin: 0 auto 1.5rem;
}
/* Company attribution — links the public site to Fendra Limited (the business behind Winnrs). */
.auth-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.8rem;
    color: var(--brand-grey);
}
.auth-footer a {
    color: var(--brand-copper);
    text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }
.auth-card h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-charcoal);
    text-align: center;
    margin-bottom: 1.25rem;
}
.auth-card .btn-primary { width: 100%; }
.auth-links {
    text-align: center;
    margin-top: 1rem;
    font-size: .9rem;
}
.auth-muted { color: var(--brand-grey); }

/* =============================================================================
   User menu chip (initials, e.g. "SW") in the top bar
   ============================================================================= */
/* The initials are drawn as SVG text and centred with SVG's own baseline-aware centring
   (text-anchor:middle + dominant-baseline:central). This centres the actual GLYPHS — not the CSS
   line box — so capital letters (which have no descender and otherwise read high) sit dead-centre.
   It is immune to font metrics, line-height, Bootstrap/DevExpress and even brand.css caching, because
   the centring lives in the SVG attributes, not in CSS layout. */
.user-chip {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-charcoal);
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    overflow: hidden;
}
.user-chip svg { display: block; width: 100%; height: 100%; }
.user-chip text {
    fill: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-anchor: middle;        /* horizontal centre */
    dominant-baseline: central; /* vertical centre on the glyphs themselves */
}
.user-chip:hover, .user-chip:focus { background: var(--brand-charcoal-2); outline: 0; }
.user-chip:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-charcoal); }
.user-chip::after { display: none !important; } /* belt-and-braces, in case .dropdown-toggle ever returns */

/* Click-to-reveal field help "(i)" */
.field-help { position: relative; display: inline-block; }
.field-help > i { cursor: pointer; color: var(--brand-grey); }
.field-help > i:hover { color: var(--brand-charcoal); }
.field-help-pop {
    position: absolute;
    left: 1.3rem;
    top: -0.25rem;
    z-index: 30;
    width: max-content;
    max-width: 240px;
    background: var(--brand-charcoal);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.35;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
/* "pop-end": open the bubble down-and-left from the (i) instead of up-and-right, for an icon near the
   right edge (e.g. a table header) that would otherwise overflow off-screen. Width clamped to the viewport. */
.field-help-pop.pop-end {
    left: auto;
    right: 0;
    top: 1.5rem;
    max-width: min(260px, calc(100vw - 1.5rem));
}
.dropdown-item.active, .dropdown-item:active { background-color: var(--brand-charcoal); }

/* Unread message row in the inbox */
.list-group-item.winnrs-unread { border-left: 3px solid var(--brand-copper); background: rgba(224, 122, 63, 0.07); }

/* My-games tiles — a soft grey so they're not a wall of white */
.card.winnrs-tile { background-color: #f0f0f2; }

/* Pick screen: a team you've already used shows a red border (the "used" label is red too). */
.btn.winnrs-used { border-color: #dc3545 !important; }

/* A postponed (or abandoned/cancelled) fixture's teams can't be picked — greyed + muted, with an explicit
   "postponed" label under each team name (colour-blind-safe: text, not colour alone). Disabled already blocks
   the click; this just softens the button. No middle "Postponed" marker (it overran + cluttered the layout). */
.btn.winnrs-postponed { opacity: .55; }

/* Global navigation loading indicator — a slim copper bar + busy cursor while an (enhanced)
   page navigation is in flight, so it's clear the click registered and the page is loading.
   Toggled by nav-progress.js adding/removing .app-loading on <html>. */
html.app-loading, html.app-loading * { cursor: progress !important; }
#app-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 3000; overflow: hidden; display: none; }
html.app-loading #app-progress { display: block; }
#app-progress::before {
    content: ""; position: absolute; top: 0; height: 100%; width: 40%; left: -40%;
    background: var(--brand-copper);
    animation: app-progress-slide 1s infinite ease-in-out;
}
@keyframes app-progress-slide {
    0%   { left: -40%; width: 40%; }
    50%  { left: 30%;  width: 55%; }
    100% { left: 100%; width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
    #app-progress::before { animation: none; left: 0; width: 100%; opacity: .6; }
}

/* Standings "Form" column — signals it drills into the team's last-5 detail.
   Cues are shape/motion (a ring + a chevron that slides), not colour, since the owner is colour-blind. */
.winnrs-form-chevron {
    font-size: .7rem;
    color: var(--brand-grey);
    transition: transform .12s ease, color .12s ease;
}
.winnrs-form-link:hover .winnrs-form-chevron,
.winnrs-form-link:focus-visible .winnrs-form-chevron {
    color: var(--brand-copper);
    transform: translateX(2px);
}
.winnrs-form-link:hover .badge,
.winnrs-form-link:focus-visible .badge {
    box-shadow: 0 0 0 2px rgba(224, 122, 63, .45);
}

/* Android "Install app" button — shown only when the browser has offered an install prompt */
#android-install { display: none; }
html.winnrs-installable #android-install { display: block; }

/* Pick screen: home | kick-off | away, kept perfectly aligned with a 3-column grid.
   align-items:stretch makes both team buttons in a row equal height even when one name wraps. */
.winnrs-pick-grid {
    display: grid;
    /* minmax(0,1fr) so the two team columns stay EXACTLY equal — a plain 1fr has min-width:auto, so a
       long team name (or the extra tick on the picked button) would push its column wider than the other,
       which is what made home/away unequal on a narrow iPhone once a team was picked. */
    grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
    gap: 0.5rem;
    max-width: 760px;
    align-items: stretch;
}
.winnrs-pick-grid .winnrs-pick-ko {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    font-size: 0.72rem;
    color: var(--brand-grey);
}
.winnrs-pick-grid .btn {
    width: 100%;
    min-height: 3rem;          /* consistent tap target; rows line up */
    white-space: normal;       /* allow long names to wrap cleanly */
    border-radius: 0.85rem;    /* softer, rounder tap targets */
}

/* Multi-league round: league filter chips + per-fixture tag + row edge accent.
   Every league cue is icon/text/position as well as colour (colour-blind safe). */
.winnrs-league-filter {
    display: flex;
    flex-wrap: wrap;           /* wrap onto a second line on a narrow phone in portrait */
    gap: 0.4rem;
    max-width: 760px;
}
.winnrs-lchip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.7rem;
    min-height: 2rem;          /* comfortable tap target on mobile */
    border: 1px solid var(--brand-grey);
    border-radius: 1rem;
    background: #fff;
    color: var(--brand-charcoal);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}
.winnrs-lchip.active {
    background: var(--brand-charcoal);
    border-color: var(--brand-charcoal);
    color: #fff;
}
.winnrs-lchip-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--brand-grey);
    flex-shrink: 0;
}
/* Tier accents (decorative; the tag/label carries the meaning). Tier 1 copper, tier 2 blue,
   others fall back to grey via the base rules above. */
.winnrs-lchip.winnrs-l-1 .winnrs-lchip-dot { background: var(--brand-copper); }
.winnrs-lchip.winnrs-l-2 .winnrs-lchip-dot { background: #378ADD; }
/* Standalone tier dot (used in the league dropdown menu). */
.winnrs-lchip-dot.winnrs-l-1 { background: var(--brand-copper); }
.winnrs-lchip-dot.winnrs-l-2 { background: #378ADD; }

/* Fixtures filter bar: a multiselect LEAGUE dropdown + (trial) a Goalscorers toggle. Replaces the wrapping
   chips so it stays one tidy line on mobile and looks right on desktop. Colour-blind safe (icon + text). */
.winnrs-fxbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 760px;
}
.winnrs-lmenu { position: relative; }
.winnrs-lmenu-btn,
.winnrs-scorers-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.75rem;
    min-height: 2.1rem;
    border: 1px solid var(--brand-grey);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--brand-charcoal);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}
.winnrs-lmenu-btn:hover,
.winnrs-scorers-toggle:hover { border-color: var(--brand-copper); }
/* The Goalscorers toggle reads as "on" when ticked. */
.winnrs-scorers-toggle { gap: 0.4rem; }
.winnrs-scorers-toggle input,
.winnrs-lmenu-item input { width: 1rem; height: 1rem; accent-color: var(--brand-copper); flex-shrink: 0; }

.winnrs-lmenu-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border: 1px solid var(--brand-grey);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.35rem;
}
.winnrs-lmenu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.winnrs-lmenu-item:hover { background: var(--brand-copper-wash, #FAF0E9); }
.winnrs-lmenu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Small league tag under the kick-off time (e.g. PL / CH). */
.winnrs-ltag {
    margin-top: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.75rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--brand-grey);
    color: #fff;
}
.winnrs-ltag.winnrs-l-1 { background: var(--brand-copper); }
.winnrs-ltag.winnrs-l-2 { background: #185FA5; }
/* NB: league is shown via the PL/CH tag in the KO cell only. We deliberately DON'T put coloured
   borders on the team buttons — they clashed with the green "picked" border (multi-coloured edges)
   and read as noise, especially for a colour-blind viewer. The tag (text) carries the league. */

/* Header messages bell (left of the SW chip) */
.user-msg {
    color: var(--brand-charcoal);
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem;
}
.user-msg:hover { color: var(--brand-copper); }

/* Football icon (Games / My games) — sized to match the Bootstrap nav icons so labels line up */
.football-icon { vertical-align: -0.125em; }
.nav-link .football-icon { width: 1em; height: 1em; margin-right: 0.6rem; }
.bottom-nav .football-icon { width: 1.25rem; height: 1.25rem; }

/* "Best viewed in landscape" hint ------------------------------------------- */
/* Shown ONLY on narrow mobile-layout screens (< 992px, the app's phone mode)
   while held in portrait. The (orientation: portrait) query means it vanishes
   automatically the moment the phone is turned to landscape — no JS needed. */
.landscape-hint { display: none; }

@media (max-width: 991.98px) and (orientation: portrait) {
    .landscape-hint {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 1rem;
        padding: 0.55rem 0.85rem;
        border-radius: 0.5rem;
        background-color: var(--brand-charcoal);
        color: #fff;
        font-size: 0.9rem;
        line-height: 1.25;
    }
    .landscape-hint-icon {
        width: 1.6rem;
        height: 1.6rem;
        flex-shrink: 0;
        color: var(--brand-copper);
    }
    /* The phone glyph tips from portrait to landscape and back, hinting the action. */
    .lh-phone {
        transform-box: fill-box;
        transform-origin: center;
        animation: lh-rotate 2.8s ease-in-out infinite;
    }
}

@keyframes lh-rotate {
    0%, 22%   { transform: rotate(0deg); }
    48%, 72%  { transform: rotate(-90deg); }
    96%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lh-phone { animation: none; }
}

/* "Add to home screen" banner (InstallBanner.razor) — phones only ----------- */
/* Hidden everywhere by default; only laid out on the app's mobile layout
   (< 992px). This hard CSS gate means it can never appear on a desktop, no
   matter what a cached script does. When the C# component decides to show it,
   it renders <div class="install-banner">; this rule controls whether it's seen. */
.install-banner { display: none; }

@media (max-width: 991.98px) {
    .install-banner { display: flex; }
}

/* Goal flash — pulses the live score cell gold for a few seconds when a goal goes in. */
@keyframes winnrs-goal-pulse {
    0%, 100% { background-color: transparent; transform: scale(1); }
    25%      { background-color: var(--brand-copper); transform: scale(1.35); }
}
.winnrs-goal {
    display: inline-block;
    padding: 0 6px;
    border-radius: 6px;
    font-weight: 700;
    color: var(--brand-charcoal);
    animation: winnrs-goal-pulse 0.7s ease-in-out 6;
}
@media (prefers-reduced-motion: reduce) {
    .winnrs-goal { animation: none; background-color: var(--brand-copper); border-radius: 6px; padding: 0 6px; }
}

/* HT/FT transition flash — a brief, subtle copper-tint background pulse (no scale). */
@keyframes winnrs-flash-pulse {
    0%, 100% { background-color: transparent; }
    30%      { background-color: rgba(224, 122, 63, 0.35); }
}
.winnrs-flash {
    display: inline-block;
    padding: 0 5px;
    border-radius: 5px;
    animation: winnrs-flash-pulse 0.8s ease-in-out 5;
}
@media (prefers-reduced-motion: reduce) {
    .winnrs-flash { animation: none; background-color: rgba(224, 122, 63, 0.35); border-radius: 5px; padding: 0 5px; }
}

/* "How to play" panel (shared HowToPlay component: Rules + Game play). Section headings get a copper
   underline; Game play steps are icon + text rows — the copper icon is decorative, the text carries the
   meaning (the owner is colour-blind). */
.how-to-play { max-width: 680px; }
.how-to-play .htp-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand-charcoal);
    border-bottom: 2px solid var(--brand-copper);
    padding-bottom: 0.35rem;
    margin-bottom: 0.85rem;
}
.how-to-play .htp-list { line-height: 1.55; padding-left: 1.2rem; }
.how-to-play .htp-list li { margin-bottom: 0.4rem; }
.how-to-play .htp-group {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-grey);
    margin: 1rem 0 0.5rem;
}
.how-to-play .htp-group.htp-group-first { margin-top: 0; }
.how-to-play .htp-step {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    line-height: 1.45;
}
.how-to-play .htp-step > .bi {
    color: var(--brand-copper);
    font-size: 1.1rem;
    line-height: 1.4;
    flex: 0 0 auto;
}
.how-to-play .htp-example {
    background: var(--brand-copper-wash);
    border: 1px solid rgba(224, 122, 63, 0.35);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 0.25rem 0 1.25rem;
}
.how-to-play .htp-place-row { display: flex; gap: 0.75rem; align-items: baseline; margin-bottom: 0.3rem; }
.how-to-play .htp-place { color: var(--brand-copper); font-weight: 600; min-width: 2.2rem; }

/* ============================================================================
   Round-view pick rows (LMS "Round X" tab). One line per player: name · match
   in NATURAL home–away order (pick underlined in place) · status pill. The
   logged-in player is pinned top + copper-highlighted. Tap a row → match popup.
   Colour-blind safe: pick = underline + dot; result = icon + letter.
   ============================================================================ */
/* Capped width so the row doesn't sprawl across a wide desktop (which opens big gaps between the name, score
   and pill). Full-width on a phone. */
.winnrs-picks { display: flex; flex-direction: column; max-width: 640px; }
/* Row = player name | match block (the bulk of the width) | pill | chevron. Player name is a fixed-ish column
   that truncates; the match block gets the flexible space. */
.winnrs-prow {
    display: grid; align-items: center; gap: 0.5rem;
    /* Player name gets a comfortable fixed slot (fits a normal full name before truncating); the match block
       takes the rest but is capped so it doesn't leave big gaps before the team names. The status-pill column
       is a FIXED width (not auto) so a wide pill ("90+4"/"LIVE") and a narrow one ("–") occupy the same space
       — otherwise the varying pill width shifts the match block's right edge and the badges/scores stop lining
       up down the list (see the pill column note in the mobile block below). */
    grid-template-columns: minmax(120px, 1.2fr) minmax(0, 1.6fr) 3.4rem 1rem;
    padding: 0.5rem 0.4rem; border-bottom: 1px solid rgba(0,0,0,.08);
    border-radius: 0.5rem; cursor: pointer;
}
/* Transparent border on every row so the "me" row's coloured border doesn't shift its content box by 1px
   (which would misalign its badges vs the other rows). */
.winnrs-prow { border: 1px solid transparent; border-bottom-color: rgba(0,0,0,.08); }
.winnrs-prow:hover { background: rgba(0,0,0,.03); }
.winnrs-prow:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.winnrs-prow.me { background: var(--brand-copper-wash, #FAF0E9); border-color: rgba(224,122,63,.35); margin: 0.3rem 0; }
.winnrs-prow.out { opacity: .6; }

.wp-who { min-width: 0; }
.wp-nm { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* Match block as an internal GRID so the badge/score columns land at the SAME x-position on every row (true
   vertical alignment) and the two team-name columns get equal width and truncate symmetrically:
   [home name 1fr, right] [home badge] [score FIXED] [away badge] [away name 1fr, left].
   The SCORE column is a FIXED width (not auto) so a short "–" (not-yet-played) and a "2–2" occupy the same
   box and centre on the same x — otherwise the auto score column changes width and the "–" drifts left of the
   scores above it. */
.wp-match {
    display: grid; align-items: center; min-width: 0; font-size: .84rem;
    grid-template-columns: minmax(0,1fr) auto 2.1rem auto minmax(0,1fr);
    column-gap: 0.4rem;
}
.wp-sc { justify-self: center; text-align: center; }
.wp-nmside { min-width: 0; display: block; }
.wp-nmside.wp-home { text-align: right; }
.wp-nmside.wp-away { text-align: left; }
.wp-core { display: contents; }   /* let the badge/score sit in the match grid's fixed centre columns */
.wp-crest { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.wp-tn { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.wp-full { display: inline; } .wp-abbr { display: none; }
/* Masked / no-pick status ("pick hidden", "unpicked", "no pick"): span the whole match block, left-aligned on
   one line — so it lines up with the start of the match area instead of wrapping in the centre. */
.wp-status { grid-column: 1 / -1; justify-self: start; text-align: left; white-space: nowrap; font-size: .82rem; }
/* Picked team = underline only (a shape cue, colour-blind safe) — no bold, no dot. */
.wp-nmside.picked .wp-tn { box-shadow: inset 0 -2px 0 var(--brand-copper); padding-bottom: 1px; }
/* Score: plain black readout between the two badges, in the app's default font (matches the Fixtures tab —
   no monospace). tabular-nums keeps the digits evenly spaced. */
.wp-sc { font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums;
    flex: 0 0 auto; white-space: nowrap; color: var(--brand-charcoal, #1F1F23); }

.wp-res { display: flex; justify-content: center; min-width: 0; }
.wp-chev { color: var(--brand-grey); font-size: 0.85rem; justify-self: center; }
.wp-pill { display: inline-flex; align-items: center; gap: 0.2rem; font-size: .7rem; font-weight: 600; border-radius: 1rem;
    padding: 0.08rem 0.45rem; white-space: nowrap; border: 1px solid var(--brand-grey); color: var(--brand-grey);
    justify-content: center; }
.wp-pill.win { color: #fff; background: var(--brand-green, #2E9E5B); border-color: var(--brand-green, #2E9E5B); }
.wp-pill.loss { color: #fff; background: #C0392B; border-color: #C0392B; }
.wp-pill.live { color: var(--brand-copper); border-color: var(--brand-copper); background: rgba(224,122,63,.10); }
.wp-pill.muted { color: var(--brand-grey); }

/* Mobile: team names are fixed 3-char codes, so the match block only needs ~a code's width each side — cap the
   internal name cells (no greedy 1fr) so the block is COMPACT and the freed room goes to the PLAYER NAME column
   (which then fits a full name). Badges still align (fixed cell widths). */
@media (max-width: 575.98px) {
    /* Fixed pill column (3rem ≈ fits "90+4"/"LIVE") so it never varies with pill content — keeps the match
       block's right edge, and thus the badge/score columns, aligned down the whole list on mobile. */
    .winnrs-prow { grid-template-columns: minmax(0, 1fr) auto 3rem 0.8rem; gap: 0.4rem; padding: 0.45rem 0.2rem; }
    .wp-full { display: none; } .wp-abbr { display: inline; }
    .wp-nm { font-size: .82rem; }
    /* Fixed centre SCORE column (2rem) so "–" and "2–2" share a box and the "–" aligns under the scores above;
       the two badge columns stay auto (constant crest width), names capped at 2.8rem each side. */
    .wp-match { font-size: .82rem; column-gap: 0.3rem; grid-template-columns: 2.8rem auto 2rem auto 2.8rem; }
    .wp-crest { width: 18px; height: 18px; }
    .wp-pill { font-size: .68rem; padding: 0.05rem 0.4rem; min-width: 0; gap: 0.15rem; }
    .wp-chev { font-size: 0.75rem; }
}

/* Standings team-name column: responsive, never just the 3-char code when there's room.
   Default (desktop, ≥768px) = full name; tablet (576–767px) = medium name ("Nott'm Forest");
   mobile (<576px) = 3-char code. Exactly one of the three is shown per width. */
.st-team .st-full { display: inline; }
.st-team .st-med,
.st-team .st-abbr { display: none; }
@media (max-width: 767.98px) {
    .st-team .st-full { display: none; }
    .st-team .st-med { display: inline; }
    .st-team .st-abbr { display: none; }
}
@media (max-width: 575.98px) {
    .st-team .st-full,
    .st-team .st-med { display: none; }
    .st-team .st-abbr { display: inline; }
}