:root {
    --bg: #0e1726;
    --panel: #18223a;
    --panel-2: #1f2c4a;
    --text: #e9eef7;
    --muted: #9aa6bd;
    --accent: #37e078;
    --accent-2: #59b3ff;
    --danger: #ff6b6b;
    --border: #2a3656;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: .5rem; }
.brand .logo { font-size: 1.5rem; }
.brand-name { font-weight: 700; color: var(--text); font-size: 1.1rem; }

.topbar nav { display: flex; gap: 1rem; }
.topbar nav a {
    color: var(--muted);
    padding: .35rem .6rem;
    border-radius: 6px;
}
.topbar nav a.active,
.topbar nav a:hover {
    color: var(--text);
    background: var(--panel-2);
    text-decoration: none;
}

main { flex: 1; padding: 1.5rem 0; }

.footer {
    border-top: 1px solid var(--border);
    padding: 1rem 0;
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}

h1 { font-size: 1.8rem; margin: 0 0 1rem 0; }
h2 { font-size: 1.3rem; margin: 1rem 0 .5rem 0; }

.hero {
    background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.hero .lead { color: var(--muted); margin-top: -.25rem; }
.hero-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.badge {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .85rem;
    color: var(--muted);
}
.badge strong { color: var(--text); }

.cta-row { margin-top: 1rem; }
.cta {
    display: inline-block;
    background: var(--accent);
    color: #07172d;
    padding: .6rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}
.cta:hover { text-decoration: none; filter: brightness(1.05); }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 1.25rem;
    border-radius: 10px;
}
.card h3 { margin-top: 0; }

.league-header { margin-bottom: 1rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

table.standings {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
}
table.standings th, table.standings td {
    padding: .55rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
table.standings th { background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: .85rem; }
table.standings td.rank, table.standings th.rank { width: 60px; }
table.standings td.move, table.standings th.move { width: 60px; color: var(--muted); }
table.standings td.num, table.standings th.num { text-align: right; width: 80px; font-variant-numeric: tabular-nums; }
table.standings tbody tr:hover { background: rgba(255,255,255,.03); }

.alert {
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 1rem;
}
.alert-error { background: rgba(255,107,107,.08); border-color: var(--danger); color: var(--danger); }

.btn-secondary {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    padding: .45rem .85rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .9rem;
    margin-top: .5rem;
}
.btn-secondary:hover { background: var(--panel); }

#blazor-error-ui {
    background: var(--danger);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* === Manager of the Month ============================================ */
.motm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.motm-nav { display: flex; align-items: center; gap: .75rem; }
.motm-current { font-weight: 600; color: var(--text); min-width: 140px; text-align: center; }

.motm-trophy {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
    color: #2a1a00;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.15);
}
.motm-trophy .trophy-icon { font-size: 3rem; line-height: 1; }
.motm-trophy .trophy-text { display: flex; flex-direction: column; gap: .15rem; }
.motm-trophy .trophy-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .75;
    font-weight: 600;
}
.motm-trophy .trophy-name { font-size: 1.6rem; font-weight: 700; }
.motm-trophy .trophy-manager { font-size: .95rem; opacity: .9; }

table.standings tr.leader { background: rgba(255, 215, 0, 0.08); }
table.standings tr.leader td.rank::before { content: "🏆 "; }

/* === Last Man Standing =============================================== */
.lms-status {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.badge-live {
    background: rgba(255, 60, 60, 0.15);
    border-color: var(--danger);
    color: var(--danger);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

.lms-winner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #6a0dad 0%, #c084fc 100%);
    color: #1a0033;
    padding: 1.5rem 1.75rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(192, 132, 252, 0.25);
}
.lms-winner .trophy-icon { font-size: 3.5rem; line-height: 1; }
.lms-winner .trophy-text { display: flex; flex-direction: column; gap: .2rem; }
.lms-winner .trophy-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .8;
    font-weight: 600;
}
.lms-winner .trophy-name { font-size: 1.7rem; font-weight: 700; }
.lms-winner .trophy-manager { font-size: 1rem; opacity: .9; }

table.standings tr.alive td { color: var(--text); }
table.standings tr.dead td  { color: var(--muted); text-decoration: line-through; opacity: .65; }

.eliminated-heading { margin-top: 2rem; color: var(--muted); }
table.eliminated-table { opacity: .85; }

.highlight-card {
    border-color: #6a0dad;
    background: linear-gradient(180deg, var(--panel) 0%, rgba(106, 13, 173, 0.08) 100%);
}
.highlight-card h3 { color: #c084fc; }

/* === Stage 1: Admin + Subs styles ==================================== */

.admin-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;
}
.admin-actions { display: flex; gap: .5rem; }

.admin-tiles, .subs-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.tile {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.tile-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.tile-value { font-size: 1.6rem; font-weight: 700; color: var(--text); }
.tile-sub   { font-size: .8rem; color: var(--muted); }
.tile-good  { border-color: rgba(55, 224, 120, 0.4); background: rgba(55, 224, 120, 0.05); }
.tile-warn  { border-color: rgba(255, 180, 60, 0.5); background: rgba(255, 180, 60, 0.06); }
.tile-money { border-color: rgba(89, 179, 255, 0.45); background: rgba(89, 179, 255, 0.05); }

.admin-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.btn-secondary.danger { color: var(--danger); border-color: rgba(255,107,107,0.5); }
.btn-secondary.small { padding: .25rem .5rem; font-size: .8rem; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.admin-table th, .admin-table td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.admin-table th { background: var(--panel-2); color: var(--muted); font-size: .8rem; }
.admin-table td.center, .admin-table th.center { text-align: center; }
.admin-table input[type="text"],
.admin-table input[type="tel"],
.admin-table input[type="date"] {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: .25rem .4rem;
    width: 100%;
    font-size: .85rem;
}
.admin-table input[type="checkbox"] { transform: scale(1.25); accent-color: var(--accent); }

.chase-list {
    list-style: none; padding: 0; margin: .5rem 0 1.25rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .35rem;
}
.chase-list li {
    background: var(--panel); border: 1px solid var(--border);
    padding: .5rem .75rem; border-radius: 6px; font-size: .9rem;
}
.chase-list.compact li { padding: .3rem .5rem; font-size: .82rem; }

.admin-summary {
    background: rgba(89, 179, 255, 0.04);
    border: 1px solid rgba(89, 179, 255, 0.2);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.admin-summary h2 { margin-top: 0; }
.unpaid-details summary { cursor: pointer; font-weight: 600; padding: .25rem 0; }

.admin-login-wrap { display: flex; justify-content: center; padding: 3rem 1rem; }
.admin-login-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    max-width: 380px;
    width: 100%;
}
.admin-login-card label { display: block; margin: 1rem 0 .25rem; color: var(--muted); font-size: .85rem; }
.admin-login-card input[type="password"] {
    width: 100%;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: 1rem;
    margin-bottom: 1rem;
}
.admin-login-card .cta { width: 100%; text-align: center; cursor: pointer; border: none; }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.settings-grid .card label {
    display: block; color: var(--muted); font-size: .8rem;
    margin-top: .75rem; margin-bottom: .25rem;
}
.settings-grid .card input {
    width: 100%;
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: .4rem .6rem; font-size: .9rem;
}
.settings-grid .card .inline { display: flex; gap: .5rem; }
.settings-grid .card .inline input { flex: 1; }

.nav-admin { color: var(--accent) !important; }

/* --- Public Subs honour board --- */
.subs-hero {
    background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}
.subs-hero h1 { margin: 0 0 .25rem; }
.subs-hero .lead { color: var(--muted); margin: 0; }

.honour-board {
    list-style: none; padding: 0; margin: .5rem 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .5rem;
}
.honour-board li {
    background: rgba(55, 224, 120, 0.06);
    border: 1px solid rgba(55, 224, 120, 0.25);
    border-radius: 8px;
    padding: .6rem .85rem;
    display: flex; align-items: center; gap: .6rem;
}
.honour-board .tick { font-size: 1.1rem; }
.honour-board .team { font-weight: 700; }
.honour-board .manager { color: var(--muted); font-size: .85rem; }

.subs-nudge { border-color: rgba(255, 180, 60, 0.4); background: rgba(255, 180, 60, 0.04); }
.subs-complete { border-color: rgba(55, 224, 120, 0.4); background: rgba(55, 224, 120, 0.06); }

.alert-good { background: rgba(55, 224, 120, 0.08); border-color: var(--accent); color: var(--accent); }

/* FILE: src/McGintysPremierLeague.Web/wwwroot/css/site.css
   ACTION: APPEND these rules to the END of the existing file
   (don't replace the whole file — just paste these at the bottom) */

/* === MoM context strip === */
.motm-toolbar {
    margin: .25rem 0 1rem;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.month-context {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.ctx-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.ctx-label {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
.ctx-value {
    color: var(--text);
    font-size: .95rem;
}

/* === Season summary page === */
.season-hero {
    background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.season-hero h2 { margin: 0; }
.season-hero p { margin: .25rem 0 0; }

.season-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.streaks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.streak-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.streak-card.streak-active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.12) 0%, var(--panel) 100%);
    border-color: #ff8c00;
}
.streak-flame { font-size: 2.2rem; line-height: 1; }
.streak-name { font-size: 1.05rem; }
.streak-len { font-weight: 600; color: var(--accent); }
.streak-range { margin-top: .15rem; }
.streak-badge {
    display: inline-block;
    margin-top: .35rem;
    background: #ff8c00;
    color: #20140a;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .15rem .5rem;
    border-radius: 4px;
}

table.standings tr.pending-month td {
    color: var(--muted);
}

/* FILE: src/McGintysPremierLeague.Web/wwwroot/css/site.css
   ACTION: APPEND these rules to the END of the existing file
   (don't replace — paste at the bottom) */

/* === Crimbo Challenge styling ======================================= */
.nav-crimbo {
    color: #ff8fa3 !important;
}
.nav-crimbo.active {
    background: rgba(220, 20, 60, 0.15) !important;
}

.crimbo-card {
    border-color: #c62828;
    background:
      radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.06) 0 6px, transparent 7px),
      radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0 5px, transparent 6px),
      linear-gradient(180deg, var(--panel) 0%, rgba(198, 40, 40, 0.15) 100%);
}
.crimbo-card h3 { color: #ff8fa3; }

/* --- Hero banner --- */
.crimbo-hero {
    position: relative;
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    margin-bottom: 1.5rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #7a1220 0%, #c62828 50%, #14532d 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(198, 40, 40, 0.25);
}
.crimbo-hero h1 {
    font-size: 2.2rem;
    margin: .35rem 0 .5rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.crimbo-hero .crimbo-tagline {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(255,255,255,.9);
    line-height: 1.45;
}
.crimbo-hero .crimbo-santa {
    font-size: 5rem;
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.crimbo-hero .crimbo-snowflakes {
    position: absolute;
    top: .5rem;
    left: 0;
    right: 0;
    text-align: center;
    letter-spacing: 1.5rem;
    font-size: 1.1rem;
    color: rgba(255,255,255,.4);
    pointer-events: none;
}

/* --- Status/Coming-soon --- */
.crimbo-coming-soon {
    border-color: #c62828;
    background: rgba(198, 40, 40, 0.05);
}
.crimbo-status {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
}

/* --- Winner banner --- */
.crimbo-winner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #c62828 0%, #ffd700 60%, #14532d 100%);
    color: #2a1a00;
    padding: 1.5rem 1.75rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.25);
}
.crimbo-crown {
    font-size: 3.2rem;
    line-height: 1;
}

/* --- Table tweaks --- */
table.standings.crimbo-table th {
    background: rgba(198, 40, 40, 0.1);
    color: #ff8fa3;
}

/* --- Player of the Crimbo card --- */
.crimbo-mvp {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(198, 40, 40, 0.08));
    border: 1px solid #ffd700;
    border-radius: 12px;
}
.crimbo-mvp-icon {
    font-size: 2.4rem;
    line-height: 1;
}
.crimbo-mvp-label {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
.crimbo-mvp-name {
    font-size: 1.35rem;
    font-weight: 700;
    margin: .1rem 0 .2rem;
}
.crimbo-mvp-stats {
    color: var(--muted);
    font-size: .9rem;
}

/* FILE: src/McGintysPremierLeague.Web/wwwroot/css/site.css
   ACTION: APPEND these rules to the END of the existing file
   (don't replace — paste at the bottom) */

/* === Prize Fund card + badge styling ================================= */
.prize-card {
    background: linear-gradient(180deg, var(--panel) 0%, rgba(255, 215, 0, 0.05) 100%);
    border-color: rgba(255, 215, 0, 0.35);
}
.prize-card h3 { color: #ffd166; }

.prize-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.prize-section:first-of-type {
    margin-top: .5rem;
    padding-top: 0;
    border-top: none;
}
.prize-section-label {
    font-weight: 600;
    color: var(--text);
    margin-bottom: .35rem;
}
.prize-section-overall {
    background: rgba(255, 215, 0, 0.08);
    padding: .75rem;
    border-radius: 6px;
    border-top: none;
    margin-top: 1rem;
}

.prize-currency {
    display: inline-block;
    padding: .4rem .6rem;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-weight: 600;
    color: var(--muted);
    min-width: 2rem;
    text-align: center;
}

.prize-total {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
}
.prize-total strong {
    color: #ffd166;
    font-size: 1.15rem;
    margin-left: .35rem;
}

/* --- Prize badge (used on competition page headers) --- */
.prize-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    background: linear-gradient(135deg, #b8860b 0%, #ffd166 100%);
    color: #2a1a00;
    font-weight: 700;
    border-radius: 999px;
    font-size: .9rem;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.2);
    white-space: nowrap;
}
.prize-badge .prize-icon {
    font-size: 1rem;
}
.prize-badge-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .5rem 0 1rem;
}

/* FILE: src/McGintysPremierLeague.Web/wwwroot/css/site.css
   ACTION: APPEND these rules to the END of the existing file
   (don't replace — paste at the bottom) */

/* === Captain multiplier indicator ==================================== */
.mult-indicator {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .35rem;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #ffd166;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: .05em;
    vertical-align: middle;
}

/* FILE: src/McGintysPremierLeague.Web/wwwroot/css/site.css
   ACTION: APPEND these rules to the END of the existing file
   (don't replace — paste at the bottom) */

/* === Highest Gameweek Score styling ================================== */
.nav-hgw {
    color: #ffd166 !important;
}
.nav-hgw.active {
    background: rgba(255, 215, 0, 0.15) !important;
}

.hgw-card {
    border-color: #ffd166;
    background: linear-gradient(180deg, var(--panel) 0%, rgba(255, 215, 0, 0.08) 100%);
}
.hgw-card h3 { color: #ffd166; }

.hgw-hero {
    position: relative;
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #7a5c00 0%, #b8860b 45%, #ffd166 100%);
    color: #1a1200;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(255, 215, 0, 0.2);
}
.hgw-hero h1 {
    font-size: 2rem;
    margin: .35rem 0 .5rem;
    color: #1a1200;
    text-shadow: 0 1px 6px rgba(255, 255, 255, .3);
}
.hgw-hero .hgw-tagline {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(26, 18, 0, 0.85);
    line-height: 1.45;
}
.hgw-hero .hgw-bolt {
    font-size: 4rem;
    line-height: 1;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .2));
}

.hgw-status {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
}

.hgw-leader {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #1a1200;
    padding: 1.5rem 1.75rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}
.hgw-leader-crown {
    font-size: 3.2rem;
    line-height: 1;
}

/* FILE: src/McGintysPremierLeague.Web/wwwroot/css/site.css
   ACTION: APPEND these rules to the END of the existing file
   (don't replace — paste at the bottom) */

/* === League Cup styling ============================================== */
.nav-cup {
    color: #c8a2c8 !important;
}
.nav-cup.active {
    background: rgba(200, 162, 200, 0.15) !important;
}

.cup-home-card {
    border-color: #b28dff;
    background: linear-gradient(180deg, var(--panel) 0%, rgba(178, 141, 255, 0.08) 100%);
}
.cup-home-card h3 { color: #c8a2c8; }

/* --- Admin card variant --- */
.cup-card {
    border-color: rgba(200, 162, 200, 0.4);
    background: linear-gradient(180deg, var(--panel) 0%, rgba(178, 141, 255, 0.05) 100%);
}
.cup-card h3 { color: #c8a2c8; }
.cup-card select {
    width: 100%;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .4rem .6rem;
    font-size: .9rem;
    margin-bottom: .5rem;
}

/* --- Hero banner --- */
.cup-hero {
    position: relative;
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #2c1a4a 0%, #4b0082 50%, #7f00ff 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(75, 0, 130, 0.35);
}
.cup-hero h1 {
    font-size: 2rem;
    margin: .5rem 0 .6rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.cup-hero .cup-tagline {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .9);
    line-height: 1.45;
}
.cup-hero .cup-trophy {
    font-size: 5rem;
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}

/* --- In-progress card --- */
.cup-in-progress {
    border-color: rgba(200, 162, 200, 0.4);
    background: rgba(178, 141, 255, 0.06);
}
.cup-in-progress a {
    color: #c8a2c8;
    text-decoration: underline;
}

/* --- Final result card --- */
.cup-final {
    background:
        radial-gradient(circle at 15% 30%, rgba(255, 215, 0, 0.12), transparent 50%),
        radial-gradient(circle at 85% 70%, rgba(178, 141, 255, 0.15), transparent 50%),
        linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    border: 2px solid #ffd166;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 30px rgba(255, 215, 0, 0.15);
}
.cup-final-title {
    text-align: center;
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffd166;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.cup-vs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
}
.cup-side {
    text-align: center;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}
.cup-winner-side {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
    border: 1px solid rgba(255, 215, 0, 0.35);
}
.cup-runnerup-side {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.12), rgba(192, 192, 192, 0.04));
    border: 1px solid rgba(192, 192, 192, 0.3);
}
.cup-side-medal {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: .35rem;
}
.cup-side-label {
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: .35rem;
}
.cup-side-team {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .15rem;
}
.cup-side-manager {
    color: var(--muted);
    font-size: .95rem;
}
.cup-vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cup-vs-text {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--muted);
    padding: .5rem .75rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
    letter-spacing: .05em;
}

@media (max-width: 620px) {
    .cup-vs {
        grid-template-columns: 1fr;
    }
    .cup-vs-divider {
        margin: -.25rem 0;
    }
}

/* FILE: src/McGintysPremierLeague.Web/wwwroot/css/site.css
   ACTION: APPEND these rules to the END of the existing file
   (don't replace — paste at the bottom) */

/* === Pick Your Player styling ======================================== */
.nav-pyp {
    color: #7cd0ff !important;
}
.nav-pyp.active {
    background: rgba(124, 208, 255, 0.15) !important;
}

.pyp-card {
    border-color: #7cd0ff;
    background: linear-gradient(180deg, var(--panel) 0%, rgba(124, 208, 255, 0.08) 100%);
}
.pyp-card h3 { color: #7cd0ff; }

/* --- Hero banner --- */
.pyp-hero {
    position: relative;
    text-align: center;
    padding: 2.25rem 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f4c81 0%, #1e7fc4 55%, #7cd0ff 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(30, 127, 196, 0.25);
}
.pyp-hero h1 {
    font-size: 2rem;
    margin: .35rem 0 .5rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.pyp-hero .pyp-tagline {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .9);
    line-height: 1.45;
}
.pyp-hero .pyp-icon {
    font-size: 4rem;
    line-height: 1;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .25));
}

/* --- Status --- */
.pyp-status {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
}

/* --- Winner banner --- */
.pyp-winner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #7cd0ff 0%, #ffd700 100%);
    color: #0a1a2a;
    padding: 1.5rem 1.75rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 20px rgba(124, 208, 255, 0.3);
}
.pyp-winner-crown {
    font-size: 3.2rem;
    line-height: 1;
}

/* --- Table cells --- */
table.pyp-table th {
    background: rgba(124, 208, 255, 0.08);
    color: #7cd0ff;
    font-weight: 600;
    font-size: .82rem;
}
.pyp-cell {
    min-width: 90px;
    padding: .5rem !important;
    text-align: center;
}
.pyp-cell-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .1rem;
}
.pyp-cell-pts {
    font-size: .8rem;
    color: var(--muted);
}
.pyp-cell-pts strong {
    color: var(--accent);
}

/* --- Admin grid inputs (also used by admin page) --- */
.pyp-grid input[type="text"] {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: .25rem .4rem;
    width: 100%;
    font-size: .85rem;
    min-width: 100px;
}
.pyp-grid select {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: .25rem .4rem;
    width: 100%;
    font-size: .85rem;
    min-width: 120px;
}

/* FILE: src/McGintysPremierLeague.Web/wwwroot/css/site.css
   ACTION: APPEND these rules to the END of the existing file
   (don't replace — paste at the bottom) */

/* === LMS "Fell into the void" banner ================================= */
.lms-void-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: radial-gradient(ellipse at 20% 50%,
                rgba(120, 60, 200, 0.15) 0%,
                rgba(20, 10, 40, 0.9) 40%,
                #050510 100%);
    color: #e8e0ff;
    padding: 1.75rem 2rem;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(120, 60, 200, 0.3);
    box-shadow: 0 6px 24px rgba(80, 20, 160, 0.25),
                inset 0 0 40px rgba(80, 20, 160, 0.1);
    overflow: hidden;
    position: relative;
}

.lms-void-banner::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -10%;
    width: 30%;
    height: 120%;
    background: radial-gradient(circle,
                rgba(255, 100, 50, 0.08) 0%,
                transparent 60%);
    pointer-events: none;
}

/* --- The black hole itself (pure CSS) --- */
.black-hole {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}

/* Accretion disk — rotating orange/purple ring */
.black-hole-disk {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #ff6b1a 0deg,
        #d946ef 90deg,
        #6b21a8 180deg,
        #ff6b1a 270deg,
        #ff6b1a 360deg
    );
    filter: blur(6px);
    animation: black-hole-spin 12s linear infinite;
    box-shadow: 0 0 40px rgba(217, 70, 239, 0.4),
                0 0 60px rgba(255, 107, 26, 0.25);
}

/* Event horizon — the black centre */
.black-hole-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 40% 40%,
                #1a1030 0%,
                #000000 60%,
                #000000 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9),
                0 0 25px rgba(0, 0, 0, 0.6);
}

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

/* --- Text side --- */
.lms-void-text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    position: relative;
    z-index: 1;
}

.lms-void-label {
    font-size: .8rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #d0b8ff;
    font-weight: 700;
    opacity: .9;
}

.lms-void-gw {
    font-size: .95rem;
    color: #ff8f4d;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(255, 107, 26, 0.5);
}

.lms-void-team {
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 0 18px rgba(217, 70, 239, 0.5);
    margin-top: .15rem;
}

.lms-void-manager {
    font-size: 1rem;
    color: #b8a8e0;
    opacity: .9;
}

/* --- Mobile stacking --- */
@media (max-width: 520px) {
    .lms-void-banner {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
    }
    .black-hole {
        width: 100px;
        height: 100px;
    }
    .lms-void-text {
        align-items: center;
    }
}

/* FILE: src/McGintysPremierLeague.Web/wwwroot/css/site.css
   ACTION: APPEND these rules to the END of the existing file
   (do NOT replace the whole file — paste at the very bottom) */

/* === Join our league card + admin bank card ========================= */
.join-card {
    background: linear-gradient(135deg, #0f4c81 0%, #1e7fc4 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(30, 127, 196, 0.25);
}

.join-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.join-card-icon {
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.join-card h2 {
    margin: 0 0 .15rem;
    color: #ffffff;
    font-size: 1.5rem;
}

.join-card-fee {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

.join-card-fee strong {
    color: #ffd166;
    font-weight: 700;
}

.join-card-body p {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
}

.join-card-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem;
    background: rgba(0, 0, 0, 0.15);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.join-detail {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.join-detail-label {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.join-detail-value {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Segoe UI', system-ui, monospace;
    word-break: break-word;
}

.join-card-note {
    background: rgba(255, 209, 102, 0.15);
    border-left: 3px solid #ffd166;
    padding: .75rem 1rem;
    border-radius: 6px;
    margin: 1rem 0 0;
    color: #ffffff;
    font-size: .95rem;
}

/* --- Admin bank card variant --- */
.bank-card {
    border-color: rgba(30, 127, 196, 0.35);
    background: linear-gradient(180deg, var(--panel) 0%, rgba(30, 127, 196, 0.06) 100%);
}
.bank-card h3 { color: #7cd0ff; }
.bank-card textarea {
    width: 100%;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .5rem .6rem;
    font-family: inherit;
    font-size: .9rem;
    resize: vertical;
    min-height: 60px;
}