/* Football Sweep — shared styling.
Colour palette is *inspired by* the Premier League's purple/magenta look
(a nod for a football sweepstake app), not the official Premier League
logo or trademarked crest — this is an independent club tool, not an
official Premier League product. */

:root {
--pl-purple-950: #1a0b2e;
--pl-purple-900: #2d1250;
--pl-purple-800: #3d195b;
--pl-purple-700: #4f2172;
--pl-magenta: #e90052;
--pl-magenta-dim: #b8003f;
--pl-cyan: #04f5ff;
--pl-white: #ffffff;
--pl-ink: #14091f;

--bg: var(--pl-purple-950);
--panel: rgba(255, 255, 255, 0.06);
--panel-border: rgba(255, 255, 255, 0.12);
--text: #f5f2fb;
--text-dim: #c6b9dc;
--success: #12d18e;
--warning: #ffb400;
--danger: #ff4d6d;

--radius: 14px;
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
margin: 0;
padding: 0;
background: radial-gradient(circle at 15% 0%, var(--pl-purple-700), var(--pl-purple-950) 55%);
color: var(--text);
font-family: var(--font);
min-height: 100vh;
}

a { color: inherit; }

.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 24px 20px 64px;
}

.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 20px;
background: linear-gradient(90deg, var(--pl-purple-800), var(--pl-magenta-dim));
border-bottom: 3px solid var(--pl-cyan);
}

.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 1.25rem;
letter-spacing: 0.02em;
text-decoration: none;
color: var(--pl-white);
}

.brand .ball {
width: 30px;
height: 30px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--pl-white), #d8cdea 70%);
box-shadow: inset 0 0 0 2px var(--pl-purple-900);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}

.nav {
display: flex;
gap: 6px;
flex-wrap: wrap;
}

.nav a {
text-decoration: none;
color: var(--text-dim);
padding: 8px 14px;
border-radius: 999px;
font-weight: 600;
font-size: 0.9rem;
transition: background 0.15s, color 0.15s;
}

.nav a:hover, .nav a.active {
background: rgba(255, 255, 255, 0.14);
color: var(--pl-white);
}

h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: 1.8rem; margin: 0 0 4px; }
.subtitle { color: var(--text-dim); margin: 0 0 24px; }

.panel {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 20px;
/* Safety net for anything that can still end up wider than a narrow
phone screen (mainly tables) — lets that one panel scroll sideways
internally rather than the whole page growing wider than the
viewport. The Standings table below goes further and restyles
itself so this never actually triggers there, but Admin's tables
rely on just this. */
overflow-x: auto;
}

.pot {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
background: linear-gradient(120deg, var(--pl-magenta), var(--pl-purple-700));
border-radius: var(--radius);
padding: 18px 22px;
margin-bottom: 20px;
}
.pot .amount { font-size: 2.2rem; font-weight: 900; }
.pot #pot-growth-note { color: rgba(255,255,255,0.75); font-style: italic; }
.pot #pot-growth-note:empty { display: none; }
.pot .label { color: rgba(255,255,255,0.85); font-weight: 600; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; }
thead th {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
border-bottom: 1px solid var(--panel-border);
}
tbody tr { border-bottom: 1px solid rgba(255,255,255,0.06); }
tbody tr:last-child { border-bottom: none; }
tbody tr.winner { background: rgba(18, 209, 142, 0.14); }
tbody tr.busted { opacity: 0.55; }

.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
}
.pill.won { background: rgba(18, 209, 142, 0.18); color: var(--success); }
.pill.busted { background: rgba(255, 77, 109, 0.18); color: var(--danger); }
.pill.live { background: rgba(4, 245, 255, 0.16); color: var(--pl-cyan); }

.goal-count { font-size: 1.4rem; font-weight: 900; }
.goal-target { color: var(--text-dim); font-weight: 600; font-size: 0.9rem; }

.progress-track {
position: relative;
height: 8px;
border-radius: 999px;
background: rgba(255,255,255,0.1);
overflow: hidden;
min-width: 90px;
}
.progress-fill {
position: absolute;
inset: 0;
width: 0%;
background: linear-gradient(90deg, var(--pl-cyan), var(--success));
transition: width 0.4s ease;
}
.progress-fill.over { background: linear-gradient(90deg, var(--warning), var(--danger)); }

button, .btn {
font: inherit;
cursor: pointer;
border: none;
border-radius: 999px;
padding: 10px 20px;
font-weight: 700;
background: var(--pl-magenta);
color: white;
transition: transform 0.1s, background 0.15s;
}
button:hover { background: var(--pl-magenta-dim); }
button:active { transform: scale(0.97); }
button.secondary { background: rgba(255,255,255,0.1); }
button.secondary:hover { background: rgba(255,255,255,0.18); }
button.danger { background: var(--danger); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select {
font: inherit;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--panel-border);
background: rgba(0,0,0,0.2);
color: var(--text);
}
input::placeholder { color: var(--text-dim); }

mark {
background: rgba(4, 245, 255, 0.35);
color: var(--pl-white);
border-radius: 3px;
padding: 0 1px;
}

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.muted { color: var(--text-dim); font-size: 0.9rem; }
.error-text { color: var(--danger); font-weight: 600; }
.success-text { color: var(--success); font-weight: 600; }

.badge-league {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
color: var(--text-dim);
background: rgba(255,255,255,0.08);
padding: 2px 8px;
border-radius: 6px;
}
.league-crest {
width: 13px;
height: 13px;
object-fit: contain;
flex-shrink: 0;
}

/* Informational "match in progress" badge — see index.html's renderBoard.
Deliberately styled close to .pill.busted's red rather than .pill.live's
cyan: that cyan already means something else on this page (an entry's
round status, "not won/busted yet"), and reusing it here would read as
the same thing when it isn't — this is about the football match, not
the sweepstake entry. */
.live-badge {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 6px;
padding: 2px 9px;
border-radius: 999px;
background: rgba(255, 77, 109, 0.14);
color: var(--danger);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
}
.live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--danger);
flex-shrink: 0;
animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
.live-dot { animation: none; }
}

.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--text-dim);
}

footer.foot {
text-align: center;
color: var(--text-dim);
font-size: 0.78rem;
padding: 30px 20px 10px;
}

/* Big-screen display mode */
body.display-mode .wrap { max-width: 1500px; }
body.display-mode .goal-count { font-size: 2.6rem; }
body.display-mode th, body.display-mode td { padding: 18px 16px; font-size: 1.3rem; }
body.display-mode thead th { font-size: 1rem; }
body.display-mode .pot .amount { font-size: 3.5rem; }
body.display-mode h1 { font-size: 2.6rem; }

.winner-banner {
background: linear-gradient(120deg, var(--success), var(--pl-cyan));
color: var(--pl-ink);
border-radius: var(--radius);
padding: 24px;
margin-bottom: 20px;
text-align: center;
font-weight: 900;
font-size: 1.4rem;
}
body.display-mode .winner-banner { font-size: 2.4rem; padding: 36px; }

/* Per-entry "which matches counted toward this total" disclosure on the
leaderboard (see index.html's renderBreakdown/openBreakdowns) — lets a
busted or nearly-there player check for themselves why their total is
what it is, instead of having to ask. Sits inside the existing Team
cell rather than a new table row, so it needs no changes to the
mobile stacked-card layout below. */
.match-breakdown { margin-top: 6px; }
.link-toggle {
background: none;
border: none;
padding: 0;
color: var(--pl-cyan);
font-weight: 600;
font-size: 0.78rem;
cursor: pointer;
}
.link-toggle:hover { text-decoration: underline; }
.breakdown-list {
list-style: none;
margin: 6px 0 0;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.82rem;
color: var(--text-dim);
}
.breakdown-list strong { color: var(--text); }

/* Admin-only warning banner shown when the background score sync
appears to have stopped (see admin.html's updateSyncHealth) — amber
rather than the red .error-text/.danger tone, since a stale sync isn't
necessarily broken yet, just overdue and worth a look. */
.sync-warning-banner {
background: rgba(255, 180, 0, 0.14);
border: 1px solid rgba(255, 180, 0, 0.45);
color: var(--warning);
border-radius: var(--radius);
padding: 14px 18px;
margin-bottom: 20px;
font-weight: 700;
}

/* Quiet, permanent "who won last" reminder on the big screen — stays
small and out of the way of the live standings, since the celebratory
banner above only shows for the instant before the next round is
drawn. Empty (no innerHTML) and so invisible until there's a winner
to report. */
.last-winner {
text-align: center;
padding: 14px 20px;
margin-bottom: 0;
font-weight: 600;
color: var(--text-dim);
}
.last-winner:empty { display: none; }
.last-winner strong { color: var(--pl-cyan); }
body.display-mode .last-winner { font-size: 1.15rem; padding: 16px 20px; }

@media (max-width: 700px) {
.topbar { flex-direction: column; align-items: flex-start; }
.pot .amount { font-size: 1.7rem; }
h1 { font-size: 1.5rem; }
.wrap { padding: 16px 14px 48px; }
.panel { padding: 16px; }

/* The Standings table is the one thing on this page a player checks
over and over on their phone, so on a narrow screen it drops the
5-column grid (which never fit — Progress and Status always ran
off the right edge, forcing the whole page to scroll sideways) for
a stacked card per player: name + status up top, team + league
underneath, goals and progress sharing the last line. Column order
from the row markup in index.html (Player, Team, Goals, Progress,
Status) is what the nth-child selectors below rely on. */
#board table { display: block; }
#board thead { display: none; }
#board tbody { display: block; }
#board tbody tr {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 12px;
row-gap: 6px;
padding: 14px 4px;
}
#board td { display: block; padding: 0; border: none; }
#board td:nth-child(1) { grid-column: 1; grid-row: 1; align-self: center; } /* Player */
#board td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; } /* Status */
#board td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } /* Team + league */
#board td:nth-child(3) { grid-column: 1; grid-row: 3; display: flex; align-items: baseline; gap: 6px; align-self: center; } /* Goals */
#board td:nth-child(4) { grid-column: 2; grid-row: 3; align-self: center; min-width: 90px; } /* Progress */
#board .progress-track { min-width: 0; }
}