/* ==========================================================================================================
   PLYRpath - interface styles.  Deep-navy surfaces, one teal accent, soft rounded cards, line icons (no emoji).
   ALL brand colours and fonts are the variables below: change them here and the whole app follows.
     Deep Navy #0B1F33 · Teal #14D6AD · Light Grey #F4F7FA · Slate #64748B
   Slate is the brand's neutral (borders, icons, placeholders). Small text on navy uses a lighter slate tint (--muted)
   because #64748B on #0B1F33 is only about 3.5:1; --muted gives about 6.5:1.
   ========================================================================================================== */
:root {
  color-scheme: dark;
  /* brand */
  --navy: #0B1F33; --teal: #14D6AD; --mist: #F4F7FA; --slate: #64748B;
  /* surfaces: layers of the navy, lightest = most raised */
  --bg: var(--navy); --surface: #112A44; --surface2: #17365A; --surface3: #1F4266;
  --line: rgba(188,208,232,.10); --line2: rgba(188,208,232,.18);
  /* text */
  --text: var(--mist); --soft: #CBD5E1; --muted: #94A3B8;
  /* accent */
  --accent: var(--teal); --accent-ink: var(--navy); --accent-soft: rgba(20,214,173,.14); --accent-line: rgba(20,214,173,.5);
  --accent-grad: linear-gradient(180deg, #2BE6C0, #10C9A2); --accent-glow: rgba(20,214,173,.26);
  /* status */
  --warn: #ffb02e; --warn-soft: rgba(255,176,46,.11); --danger: #ff6b78; --danger-soft: rgba(255,107,120,.12);
  --info: #5aa9ff; --info-soft: rgba(90,169,255,.14);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  /* type: Inter for text, Montserrat for headings and big numbers. Neither is bundled (see the note below), so a device without them
     uses its own system UI font, which keeps the app fast and works offline. */
  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: Montserrat, Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, system-ui, sans-serif;
  /* layout */
  --side-w: 232px;
}
/* To ship Inter / Montserrat with the app, put the .woff2 files in a /fonts folder and add, for example:
   @font-face { font-family: Inter; font-weight: 100 900; font-display: swap; src: url(fonts/Inter.woff2) format("woff2"); }
   (and the same for Montserrat). Then add the files to SHELL in sw.js so they work offline. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--text); font: 16px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(760px 380px at 85% -140px, rgba(20,214,173,.11), transparent 70%), radial-gradient(640px 360px at -12% 6%, rgba(90,169,255,.06), transparent 70%); }
button, select, input, textarea { font: inherit; color: inherit; }
:is(button, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
b, strong { font-weight: 700; }

/* ---------- icons ---------- */
.ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; }
.ico.fill { fill: currentColor; }
.chev { width: 18px; height: 18px; color: var(--muted); vertical-align: -4px; }
.toastico { width: 20px; height: 20px; color: var(--accent); }
.okc { color: var(--accent); vertical-align: -3px; margin-right: 2px; }
.pot { width: 14px; height: 14px; color: var(--warn); vertical-align: -2px; margin-left: 4px; }
.fav { width: 12px; height: 12px; color: var(--warn); vertical-align: -1px; margin-left: 3px; }

/* ---------- header ---------- */
header#top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(10px + var(--safe-t)) 14px 10px;
  background: rgba(11,31,51,.84); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; }
.brand img { height: 34px; width: auto; flex: none; display: block; }
.brand > div { min-width: 0; }
.brand b.tname { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 750; letter-spacing: -.01em; line-height: 1.15; }
.brand b.tname .tn { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.brand b.tname[data-a] { cursor: pointer; }
.brand b.tname .chev { width: 16px; height: 16px; color: var(--accent); flex: none; }
.brand > div > span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header#top > .row { flex: none; gap: 6px; margin-left: 4px; }
header#top .btn { width: 38px; height: 38px; padding: 0; border-radius: 12px; justify-content: center; }
header#top .btn .ico { width: 19px; height: 19px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; }
.badge::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.badge.ok { color: var(--accent); } .badge.warn { color: var(--warn); } .badge.err { color: var(--danger); }

/* ---------- page + floating tab bar ---------- */
main { padding: 18px 16px calc(112px + var(--safe-b)); max-width: 640px; margin: 0 auto; }
nav#nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + var(--safe-b)); width: calc(100% - 24px); max-width: 520px; z-index: 12; display: flex; gap: 4px; padding: 6px;
  background: rgba(17,42,68,.88); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px); border: 1px solid var(--line2); border-radius: 26px; box-shadow: 0 14px 36px rgba(0,0,0,.5); }
nav#nav[hidden], #sheet-wrap[hidden], #toast[hidden] { display: none; }
nav#nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; border: 0; border-radius: 20px; background: none; color: var(--muted); font-size: 11.5px; font-weight: 650; transition: background .15s, color .15s; }
nav#nav button .ico { width: 23px; height: 23px; vertical-align: 0; }
nav#nav button.on { color: var(--accent); background: var(--accent-soft); }
nav#nav button:active { transform: scale(.96); }

/* ---------- type ---------- */
h2 { margin: 6px 0 14px; font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
h3 { margin: 26px 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); } .muted b { color: var(--text); } .small { font-size: 13px; } .center { text-align: center; }
.err { color: var(--danger); }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: 6px; }

/* ---------- layout bits ---------- */
.row { display: flex; align-items: center; gap: 10px; } .grow { flex: 1; min-width: 0; } .gap { margin-top: 12px; }
.titlerow { margin-bottom: 12px; gap: 10px; } .titlerow .btn { flex: none; white-space: nowrap; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.twin { display: flex; gap: 10px; margin-bottom: 10px; } .twin .btn { flex: 1 1 0; min-width: 0; width: auto; margin-bottom: 0; flex-direction: column; gap: 7px; padding: 14px 6px 13px; font-size: 14.5px; line-height: 1.2; text-align: center; }
.twin .btn .ico { width: 24px; height: 24px; color: var(--accent); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px; margin-bottom: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.card.live { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(20,214,173,.09), rgba(20,214,173,.02)), var(--surface); }
.card[data-a] { cursor: pointer; transition: transform .08s, background .15s; } .card[data-a]:active { transform: scale(.985); background: var(--surface2); }
.card .chev { margin-left: auto; }
td .chev, th .chev { display: none; }

/* ---------- buttons ---------- */
button.btn, a.btn, label.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface2); border: 1px solid var(--line2); border-radius: 14px; padding: 13px 16px; font-weight: 650; color: var(--text); cursor: pointer; text-decoration: none; transition: transform .08s, background .15s, border-color .15s; }
button.btn:active, a.btn:active, label.btn:active { transform: scale(.98); }
button.btn .ico, label.btn .ico { width: 1.15em; height: 1.15em; vertical-align: 0; }
button.primary { background: var(--accent-grad); color: var(--accent-ink); border-color: transparent; box-shadow: 0 8px 22px var(--accent-glow); }
button.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(255,107,120,.45); }
button.ghost { background: transparent; border-color: var(--line2); }
button.big { width: 100%; padding: 16px; font-size: 17px; border-radius: 18px; margin-bottom: 10px; }
button.big .ico { width: 1.25em; height: 1.25em; }
button.sm, label.sm { padding: 8px 12px; font-size: 13.5px; border-radius: 12px; gap: 6px; }
button[disabled] { opacity: .42; box-shadow: none; }
a.btn { color: var(--text); }

/* ---------- forms ---------- */
input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], select, textarea { width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--line2); border-radius: 14px; padding: 12px 14px; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
:is(input, select, textarea):focus { border-color: rgba(20,214,173,.7); box-shadow: 0 0 0 4px rgba(20,214,173,.15); }
::placeholder { color: #7D8EA5; }
select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
select option { background: var(--surface2); color: var(--text); }
label.f { display: block; margin: 14px 2px 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.check { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.check:last-child { border-bottom: 0; }
input[type=checkbox] { accent-color: var(--accent); }
.check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
input[readonly] { opacity: .85; font-size: 13px; }
.scorein { width: 82px; text-align: center; font-size: 28px; font-weight: 800; padding: 10px 6px; }
/* Date fields: iPhone Safari draws <input type=date> as its own control, ignoring width and padding, and lets the date spill out of the box.
   Switching the native look off makes it obey the same rules as every other field. */
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; height: 48px; line-height: 1.2; margin: 0; text-align: left; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; min-width: 0; min-height: 1.2em; margin: 0; padding: 0; }
input[type=date]::-webkit-datetime-edit, input[type=time]::-webkit-datetime-edit { padding: 0; min-width: 0; text-align: left; }
input[type=date]::-webkit-datetime-edit-fields-wrapper, input[type=time]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { margin-left: auto; opacity: .7; filter: invert(.8); }
input[type=file] { display: block; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; padding: 8px; font-size: 14px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line2); border-radius: 14px; }
input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button { background: var(--surface3); color: var(--text); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 14px; margin-right: 10px; font: inherit; font-weight: 650; cursor: pointer; }
textarea.mono { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow: auto; min-height: 150px; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 5px; text-align: right; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
tr.tap { cursor: pointer; } tr.tap:active { background: var(--surface2); } tr.tap td:first-child { font-weight: 650; }
th .ico { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
table.bd td, table.bd th { text-align: center; } table.bd td:first-child, table.bd th:first-child { text-align: left; } table.bd td:first-child { font-weight: 650; }
table.bd tr.tot td { border-top: 1px solid var(--line2); font-weight: 800; color: var(--accent); }
.cap { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 6px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; vertical-align: 1px; }

/* ---------- tags, results, badges ---------- */
.num { margin-left: 6px; padding: 1px 6px; border-radius: 7px; background: rgba(255,255,255,.07); color: var(--muted); font-size: 12px; font-weight: 700; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; margin-left: 8px; } .tags .tag { margin-left: 0; }
.card .grow > b + .tags { display: flex; margin: 6px 0 3px; }
.tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--soft); font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }
.tag.Home { background: var(--accent-soft); color: var(--accent); } .tag.Away { background: var(--info-soft); color: var(--info); }
.prow .n .tag { font-size: 10px; padding: 1px 7px; margin-left: 6px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.07); color: var(--soft); }
.row .pill { flex: none; white-space: nowrap; } .row .pill.vs { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.res { display: inline-block; min-width: 54px; text-align: center; padding: 5px 10px; border-radius: 99px; font-weight: 800; font-size: 13.5px; color: var(--navy); white-space: nowrap; }
.res.W { background: var(--accent); } .res.D { background: #a9b7c9; } .res.L { background: var(--danger); }
.row .res + .btn { margin-left: 8px; }
.rate { display: inline-block; min-width: 40px; text-align: center; padding: 5px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 14.5px; }
.pos-GK { --pc: #ffc247; } .pos-DEF { --pc: #5aa9ff; } .pos-CM { --pc: #38dc76; } .pos-LM { --pc: #f472b6; } .pos-RM { --pc: #c084fc; } .pos-ST { --pc: #ff6b78; } .pos-SUB { --pc: #94A3B8; }
.p, .pbadge { display: inline-block; text-align: center; font-weight: 800; letter-spacing: .04em; color: var(--pc, #94A3B8); background: rgba(255,255,255,.08); border-radius: 10px; }
@supports (background: color-mix(in srgb, red 10%, transparent)) { .p, .pbadge { background: color-mix(in srgb, var(--pc, #94A3B8) 17%, transparent); } }
.pbadge { min-width: 38px; padding: 3px 8px; font-size: 12px; }
.qpos { display: block; font-size: 11px; font-weight: 700; color: var(--pc, var(--muted)); }

/* ---------- segmented control, chips, tabs ---------- */
.seg { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px; margin: 8px 0 12px; }
.seg button { flex: 1; border: 0; background: none; padding: 10px 6px; border-radius: 12px; color: var(--muted); font-weight: 650; font-size: 14.5px; transition: background .15s, color .15s; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn { border: 1px solid var(--line2); background: var(--surface); color: var(--soft); padding: 8px 14px; border-radius: 99px; font-weight: 600; font-size: 14px; }
.chip-btn.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chip { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line2); border-radius: 14px; background: var(--surface2); font-weight: 600; } .chip input { width: 20px; height: 20px; accent-color: var(--accent); }
.qtabs { display: flex; gap: 6px; margin: 4px 0 8px; }
.qtabs button { flex: 1; padding: 11px 4px; border-radius: 14px; border: 1px solid var(--line2); background: var(--surface); color: var(--muted); font-weight: 700; font-size: 15px; }
.qtabs button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.qtabs .qdone { width: 14px; height: 14px; margin-left: 4px; color: var(--accent); vertical-align: -2px; } .qtabs button.on .qdone { color: var(--accent-ink); }

/* ---------- season bar, hero ---------- */
.seasonbar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line2); border-radius: 16px; color: var(--text); font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seasonbar .chev { color: var(--accent); }
.seasonbar:active { transform: scale(.99); }
.hero { text-align: center; padding: 8px 0 6px; }
.hero img { display: block; margin: 0 auto; width: min(78vw, 300px); max-height: 30vh; object-fit: contain; height: auto; }
.hero h2 { margin: 10px 0 0; font-size: clamp(20px, 6.2vw, 26px); letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.hero p { margin: 4px 0 18px; color: var(--muted); font-size: 14.5px; }
.hero + .card { margin-top: 6px; }

/* ---------- live match ---------- */
.score { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; color: var(--muted); letter-spacing: .03em; font-size: 12.5px; }
.score b { color: var(--accent); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score .sc { flex: none; white-space: nowrap; font-size: 20px; color: var(--muted); }
.score .sn, .bigscore span, .sidelbl { min-width: 0; text-align: center; text-transform: uppercase; line-height: 1.25; overflow-wrap: anywhere; }
.score .sn { flex: 1 1 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sidelbl { max-width: 132px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 auto 2px; }
.clockwrap { text-align: center; padding: 16px 10px 12px; margin: 10px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; }
.clock { font-size: 74px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.clock.over { color: var(--warn); } .clock.paused { opacity: .5; }
.prow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.prow.on { background: linear-gradient(90deg, rgba(20,214,173,.07), transparent 60%), var(--surface); border-color: rgba(20,214,173,.2); }
.prow.off { opacity: .92; }
.prow .p { min-width: 44px; padding: 6px 0; font-size: 12.5px; }
.prow .n { flex: 1; min-width: 0; font-weight: 650; font-size: 17px; letter-spacing: -.01em; }
.prow .m { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; text-align: right; } .prow .m b { color: var(--text); }
.prow .btn + .btn { margin-left: 2px; }
.arow { flex-wrap: wrap; } .arow .n { flex: 1 1 100%; font-size: 15px; overflow-wrap: anywhere; }
.tapn { cursor: pointer; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.actions button { flex-direction: column; gap: 8px; padding: 18px 8px; font-size: 14.5px; font-weight: 700; letter-spacing: .06em; border-radius: 20px; }
.actions button .ico { width: 26px; height: 26px; }
.actions .wide { grid-column: 1 / -1; flex-direction: row; padding: 14px; }
.actions .wide .ico { width: 20px; height: 20px; }
.ev { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .ev.undone { opacity: .45; text-decoration: line-through; }

/* ---------- sheets + toast ---------- */
#sheet-wrap { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; }
#sheet-bg { position: absolute; inset: 0; background: rgba(2,7,14,.64); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#sheet { position: relative; width: 100%; max-width: 640px; margin: 0 auto; max-height: 90vh; overflow: auto; background: var(--surface); border: 1px solid var(--line2); border-bottom: 0; border-radius: 28px 28px 0 0; padding: 24px 16px calc(20px + var(--safe-b)); box-shadow: 0 -20px 50px rgba(0,0,0,.5); animation: sheetUp .22s ease-out; }
#sheet::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255,255,255,.2); }
#sheet h2 { margin: 2px 0 12px; font-size: 21px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .opts.three { grid-template-columns: 1fr 1fr 1fr; } .opts.one { grid-template-columns: 1fr; }
.opts button { text-align: left; justify-content: flex-start; padding: 14px 12px; } .opts button small { display: block; color: var(--muted); font-weight: 400; }
.opts button.sel { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
#toast { pointer-events: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + var(--safe-b)); z-index: 40; display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 16px; background: rgba(27,45,68,.96); color: var(--text); font-weight: 600; font-size: 14.5px; text-align: left; border: 1px solid var(--line2); box-shadow: 0 12px 30px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: toastIn .18s ease-out; }
@keyframes sheetUp { from { transform: translateY(26px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- stats ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 6px; text-align: center; }
.tile b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile span { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.bar { height: 6px; border-radius: 4px; background: var(--surface3); overflow: hidden; margin-top: 5px; width: 100%; } .bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; } .chart div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: 11px; color: var(--muted); min-width: 0; }
.chart i { display: block; width: 100%; background: linear-gradient(180deg, var(--accent), rgba(20,214,173,.45)); border-radius: 6px 6px 2px 2px; margin-top: 3px; }
.shirt { flex: none; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(160deg, #2BE6C0, #0FB896); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; box-shadow: 0 0 0 4px rgba(20,214,173,.18); }
.bio { display: flex; align-items: center; gap: 14px; }
.bigscore { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; font-weight: 700; padding: 6px 0; }
.bigscore b { flex: none; color: var(--accent); font-size: 42px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bigscore span { flex: 1 1 0; font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .05em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.callout { background: var(--warn-soft); border: 1px solid rgba(255,176,46,.28); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; color: var(--text); font-size: 14px; line-height: 1.45; }
.callout .ico { color: var(--warn); vertical-align: -3px; margin-right: 3px; }
.callout.bad { background: var(--danger-soft); border-color: rgba(255,107,120,.42); } .callout.bad .ico { color: var(--danger); }
.evwarn { color: var(--warn); font-size: 12.5px; margin-top: 4px; } .evwarn .ico { vertical-align: -2px; margin-right: 4px; }
.ev2 { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); } .ev2:last-child { border-bottom: 0; }
.ev2 .evt { flex: none; width: 50px; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; font-size: 14px; padding-top: 2px; }
.evb { flex: 1; min-width: 0; } .evtxt { font-size: 15px; font-weight: 650; } .evtxt .ico { color: var(--muted); margin-right: 4px; vertical-align: -3px; }
.ev2.undone .evtxt { opacity: .45; text-decoration: line-through; } .ev2.undone .evt { opacity: .45; }
.evbtn { display: flex; gap: 8px; margin-top: 8px; }
details.card summary { cursor: pointer; font-weight: 700; color: var(--accent); } details.card[open] summary { margin-bottom: 8px; }
details.card ul { margin: 6px 0 0; padding-left: 18px; } details.card li { margin: 5px 0; font-size: 14px; color: var(--muted); } details.card li b { color: var(--text); }
details.card .prow { margin-top: 8px; }

/* ---------- minutes vs team ---------- */
table.cmpt { font-size: 13.5px; } table.cmpt th, table.cmpt td { padding: 8px 5px; text-align: center; white-space: nowrap; } table.cmpt th:first-child, table.cmpt td:first-child { text-align: left; white-space: normal; }
table.cmpt td.vs { font-weight: 800; color: #0a1220; min-width: 54px; border-radius: 10px; border-bottom: 2px solid var(--surface); }
table.cmpt tr.dim td:not(.vs) { opacity: .55; } table.cmpt tr.dim td.vs { opacity: .6; }
table.cmpt td.gm { color: var(--muted); } .lowg { color: var(--warn) !important; font-weight: 700; } .lowg .ico { width: 1em; height: 1em; vertical-align: -.15em; }
.legendbar { height: 10px; border-radius: 6px; margin-top: 12px; background: linear-gradient(to right, rgb(248,105,107), rgb(255,235,132), rgb(99,190,123)); }
.cmpchip { display: inline-block; min-width: 62px; text-align: center; padding: 10px 12px; border-radius: 14px; font-size: 20px; font-weight: 800; color: #0a1220; background: var(--surface3); }

/* ---------- past matches ---------- */
.impm.off { opacity: .6; } .impm .check input { flex: none; }
.pfp { padding: 12px 14px; } .pfp.bad { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.pfhead { display: flex; align-items: center; gap: 10px; font-size: 17px; padding: 2px 0; } .pfhead input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.pfscroll { overflow-x: auto; margin-top: 8px; -webkit-overflow-scrolling: touch; }
.pfgrid { display: grid; grid-template-columns: repeat(var(--nq, 4), minmax(58px, 1fr)); gap: 6px; }
.pfgrid .qh { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; letter-spacing: .06em; }
.pfgrid input, .pfgrid select { min-width: 0; width: 100%; height: 42px; padding: 6px 2px; text-align: center; text-align-last: center; font-size: 15px; border-radius: 12px; }
.pfgrid select { padding-right: 14px; background-position: right 4px center; background-size: 12px; }
.prow select { padding-right: 30px; background-position: right 9px center; }

/* the "form" strip: last five results as compact chips that wrap rather than overflow */
.formrow { flex-wrap: wrap; gap: 6px; } .formrow .res { min-width: 0; width: 32px; padding: 5px 0; }

/* ---------- team logos ---------- */
.brand img.tlogo { height: 38px; width: 38px; object-fit: contain; border-radius: 10px; }
.hero img.tlogo { width: auto; height: auto; max-width: 150px; max-height: 150px; border-radius: 24px; margin: 6px auto 4px; object-fit: contain; }
.logopick { display: flex; align-items: center; gap: 14px; }
.logoprev { flex: none; width: 84px; height: 84px; border-radius: 20px; background: var(--surface2); border: 1px dashed var(--line2); display: grid; place-items: center; overflow: hidden; }
.logoprev img { width: 100%; height: 100%; object-fit: contain; }
.logoprev .lpl { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); } .logoprev .lpl .ico { width: 24px; height: 24px; } .logoprev .lpl small { font-size: 11px; }
.logopick .grow { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.logopick .btn.gone, .gone { display: none; }
input[type=file][hidden] { display: none; }
.othumb { flex: none; width: 38px; height: 38px; border-radius: 11px; object-fit: contain; background: var(--surface3); }
.othumb.mono { display: grid; place-items: center; font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--accent); }
.poweredby { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 4px; color: var(--muted); font-size: 12px; opacity: .85; } .poweredby img { height: 22px; width: auto; }

/* option lists (teams, seasons, move targets): the name on one line, the detail underneath - never run together */
.opts.one button { justify-content: flex-start; align-items: center; text-align: left; gap: 12px; }
.opts.one button .ot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.opts.one button:not(:has(.ot)) { flex-direction: column; align-items: flex-start; gap: 2px; }
.opts.one button small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; }
.opts.one button.sel small { color: var(--soft); }

/* ---------- level score, extra time, penalty shootout ---------- */
.card.lvl { border-color: rgba(255,176,46,.35); background: linear-gradient(180deg, rgba(255,176,46,.07), rgba(255,176,46,.015)), var(--surface); }
.card.lvl.done { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(20,214,173,.08), rgba(20,214,173,.015)), var(--surface); }
.lvlhead { display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 16px; } .lvlhead .ico { width: 20px; height: 20px; color: var(--warn); } .card.lvl.done .lvlhead .ico { color: var(--accent); }
.pensbig { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 4px; } .pensbig.won { color: var(--accent); } .pensbig.lost { color: var(--text); }
.resnote { text-align: center; font-size: 13px; font-weight: 600; color: var(--soft); margin: 2px 0 6px; }
.pscore { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 12px; }
.pscore .sn { flex: 1 1 0; min-width: 0; text-align: center; text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pscore .sc { flex: none; font-size: 24px; color: var(--muted); white-space: nowrap; } .pscore .sc b { font-size: 56px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .pscore .sc b:last-child { color: var(--text); }
.kdots { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.kdots > div { display: flex; align-items: center; gap: 10px; } .kdots .kl { flex: none; width: 92px; font-size: 12px; font-weight: 650; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdots .kd { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.kdot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line2); background: transparent; flex: none; }
.kdot.ok { background: var(--accent); border-color: var(--accent); } .kdot.no { border-color: var(--danger); background: var(--danger-soft); position: relative; } .kdot.no::after { content: ""; position: absolute; inset: 4px 2px; border-top: 2px solid var(--danger); transform: rotate(-45deg); }
.kdot.now { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(255,176,46,.2); }
.takers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
button.taker { flex-direction: column; gap: 0; padding: 9px 12px; min-width: 76px; line-height: 1.2; } button.taker small { font-size: 10.5px; font-weight: 500; color: var(--muted); }
button.taker.sel { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); } button.taker.did:not(.sel) { opacity: .75; }
details.more { margin: -4px 0 12px; } details.more summary { cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 650; margin-bottom: 8px; }
.outs { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; } .outs .btn { padding: 18px 6px; font-size: 15.5px; border-radius: 18px; flex-direction: column; gap: 5px; } .outs .btn .ico { width: 22px; height: 22px; }
.klog { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .klog:last-child { border-bottom: 0; }
.klog .kno { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface3); color: var(--muted); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.kres { flex: none; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; } .kres.scored { background: var(--accent-soft); color: var(--accent); } .kres.saved { background: var(--info-soft); color: var(--info); } .kres.missed { background: var(--danger-soft); color: var(--danger); }
details.kdet { margin: 10px 0 0; padding: 12px 16px; } details.kdet .klog:first-of-type { margin-top: 4px; }

/* assists */
th[title="Assists"] { color: var(--accent); }
.card .pill + .pill { margin-left: 2px; }
.chips .pill { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* sheets with long names: the columns may shrink below their content and the text wraps instead of pushing the button off the screen */
.opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .opts.one { grid-template-columns: minmax(0, 1fr); }
.opts button { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.opts button { flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; }
.opts button small { flex: none; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.opts.one button { flex-wrap: nowrap; align-items: center; }
/* the Goals / Assists / Copy row on the by-hand past-match form */
.pfextra { flex-wrap: wrap; row-gap: 8px; } .pfextra input { width: 60px; padding: 8px; flex: none; } .pfextra .btn { flex: none; }

/* the POTM star in a table heading: same gold as the stars next to a player of the match */
th .ico.pot { margin-left: 0; width: 1.05em; height: 1.05em; vertical-align: -.15em; }

/* a very long player name wraps inside its own column instead of pushing the number columns out of view */
table td:first-child, table th:first-child { overflow-wrap: anywhere; }
/* the narrowest phones (iPhone SE size): a little less padding so every stats column stays on screen */
@media (max-width: 340px) { th, td { padding-left: 3px; padding-right: 3px; } .card.scroll { padding-left: 5px !important; padding-right: 5px !important; } }
/* a shirt number like "#7" is never split across two lines */
.num { white-space: nowrap; overflow-wrap: normal; display: inline-block; }

/* ==========================================================================================================
   PLYRpath brand layer: display type, tagline, hover states, tablet and desktop layouts
   ========================================================================================================== */
h2, .hero h2, .brand b.tname, .tile b, .score b, .bigscore b, .pscore .sc b, .rate { font-family: var(--font-display); }
.hero p { margin: 12px 0 22px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hero img { width: min(80vw, 320px); }

/* devices with a mouse */
@media (hover: hover) {
  button.btn:hover, a.btn:hover, label.btn:hover { border-color: var(--accent-line); }
  button.primary:hover { filter: brightness(1.06); }
  .card[data-a]:hover, tr.tap:hover { background: var(--surface2); }
  nav#nav button:hover:not(.on) { color: var(--text); background: rgba(255,255,255,.05); }
}

/* tablet: a wider column, the header lines up with it, and sheets become centred dialogs */
@media (min-width: 700px) {
  main { max-width: 760px; padding-top: 24px; }
  header#top { padding-left: max(16px, calc((100vw - 760px) / 2 + 16px)); padding-right: max(16px, calc((100vw - 760px) / 2 + 16px)); }
  nav#nav { max-width: 560px; }
  #sheet-wrap { align-items: center; padding: 24px; }
  #sheet { border-radius: 28px; border-bottom: 1px solid var(--line2); max-height: 86vh; }
  #sheet::before { display: none; }
  .hero img { width: min(60vw, 360px); }
}

/* desktop: the tab bar becomes a left sidebar carrying the PLYRpath logo */
@media (min-width: 1024px) {
  body { padding-left: var(--side-w); }
  body:has(nav#nav[hidden]) { padding-left: 0; }
  nav#nav { left: 0; top: 0; bottom: 0; transform: none; width: var(--side-w); max-width: none; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 22px 14px; border: 0; border-right: 1px solid var(--line2); border-radius: 0; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  nav#nav::before { content: ""; display: block; height: 34px; margin: 4px 6px 24px; background: url(icons/plyrpath-horizontal.svg) left center / contain no-repeat; }
  nav#nav button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; font-size: 14.5px; border-radius: 14px; }
  nav#nav button .ico { width: 22px; height: 22px; }
  main { max-width: 880px; padding: 28px 32px 56px; }
  header#top { padding-left: max(32px, calc((100vw - var(--side-w) - 880px) / 2 + 32px)); padding-right: max(32px, calc((100vw - var(--side-w) - 880px) / 2 + 32px)); }
  #toast { bottom: 28px; left: calc(50% + var(--side-w) / 2); }
  .hero img { width: min(40vw, 380px); }
}
/* ---------- v27/v28: settings menu, guest players ---------- */
.setmenu { display: flex; flex-direction: column; gap: 8px; }
.setrow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; color: var(--text); cursor: pointer; font: inherit; transition: background .15s, transform .08s; }
.setrow:active { transform: scale(.99); background: var(--surface2); }
.setrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.setrow .setico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.setrow .setico .ico { width: 21px; height: 21px; vertical-align: 0; }
.setrow b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.setrow small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.setrow small.flag { color: var(--warn); font-weight: 650; }
.setrow .chev { margin-left: auto; flex: none; }
@media (hover: hover) { .setrow:hover { background: var(--surface2); border-color: var(--line2); } }
.tag.guest { background: var(--info-soft); color: var(--info); }
#sheet #g-list h3 { margin: 14px 0 6px; }
#sheet .row input#g-name { min-width: 0; }
/* v32: profile action buttons */
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ==========================================================================================================
   FA Four Corner Development Styles (v36)
   ========================================================================================================== */
.dev-section { margin-top: 14px; }
.dev-hero-card { border-color: rgba(20,214,173,.35); margin-bottom: 14px; }
.dev-header-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 6px; margin-bottom: 6px; }
.dev-title { margin: 2px 0 6px; font-size: 20px; font-weight: 800; }
.dev-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.4; }
.dev-meta-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--soft); border-top: 1px solid var(--line); padding-top: 10px; }

.dev-corners-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
@media (min-width: 640px) {
  .dev-corners-grid { grid-template-columns: 1fr 1fr; }
}

.dev-corner-box { border-radius: 18px; padding: 14px; }
.dev-corner-num { width: 24px; height: 24px; border-radius: 8px; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.dev-sub-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dev-sub-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.dev-sub-row:first-child { border-top: 0; padding-top: 0; }
.dev-sub-info { flex: 1; min-width: 0; }
.dev-sub-name { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.dev-sub-hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.dev-sub-note { font-size: 12px; font-style: italic; color: var(--soft); margin: 4px 0 0; }

.dev-sub-pill { flex: none; text-align: center; border-radius: 12px; padding: 4px 8px; font-size: 12px; min-width: 48px; }
.dev-sub-pill.rated { background: var(--surface2); border: 1px solid var(--line2); color: var(--accent); }
.dev-sub-pill.rated b { font-size: 14px; }
.dev-sub-pill.unrated { background: rgba(255,255,255,.03); border: 1px dashed var(--line); }

.dev-goals-card { margin-bottom: 14px; }
.dev-goals-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dev-goal-item { background: var(--surface2); border: 1px solid var(--line2); border-radius: 16px; padding: 12px; }
.dev-goal-item.history { opacity: .75; background: var(--surface); }
.dev-corner-tag { font-size: 11px; font-weight: 800; border: 1px solid currentColor; padding: 2px 8px; border-radius: 99px; }
.dev-goal-title { font-size: 15px; display: block; margin-top: 4px; }
.dev-goal-desc { font-size: 13px; color: var(--soft); margin: 4px 0; }
.dev-goal-measure { font-size: 12px; color: var(--muted); margin: 3px 0; }
.dev-goal-dates { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.dev-goal-coachnote { font-size: 12.5px; color: var(--accent); margin: 6px 0 2px; }
.dev-goal-actions { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }

.dev-empty-box { text-align: center; padding: 20px 10px; font-size: 13.5px; color: var(--muted); border: 1px dashed var(--line2); border-radius: 14px; }

.dev-context-card { border-left: 4px solid var(--accent); }
.dev-context-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dev-context-header h4 { margin: 0; font-size: 15px; font-weight: 750; }
.row > .btn.big { width: auto; flex: 1 1 0; min-width: 0; margin-bottom: 0; }
/* ==========================================================================================================
   PLYRpath v37 — Training Matrix & PDF Report Styles
   ========================================================================================================== */
.matrix-view { margin-top: 10px; }
.matrix-hero { margin-bottom: 16px; border-color: rgba(20,214,173,.35); }
.matrix-themes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.matrix-theme-card { padding: 12px 14px; border-left: 4px solid var(--accent); }
.matrix-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.row > .btn.big { width: auto; flex: 1 1 0; min-width: 0; margin-bottom: 0; }
/* ==========================================================================================================
   PLYRpath v38 — Dedicated Power Play & Lineup Validation Styles
   ========================================================================================================== */
.pp-banner { background: var(--surface2); border: 1.5px solid var(--accent); border-radius: 18px; padding: 14px 16px; margin: 12px 0; }
.pp-banner.opp { border-color: var(--info); background: var(--surface); }
.pp-banner.warn { border-color: var(--warn); background: var(--warn-soft); }
.lineup-status { font-size: 13px; font-weight: 750; padding: 4px 12px; border-radius: 99px; }
.lineup-status.ok { background: var(--accent-soft); color: var(--accent); }
.lineup-status.err { background: var(--danger-soft); color: var(--danger); }
.lineup-status.warn { background: var(--warn-soft); color: var(--warn); }
.btn.pp-action { background: var(--accent-grad); color: var(--accent-ink); border-color: transparent; font-weight: 750; }
.btn.pp-withdraw { background: var(--warn-soft); color: var(--warn); border-color: rgba(255,176,46,.4); font-weight: 750; }
.row > .btn.big { width: auto; flex: 1 1 0; min-width: 0; margin-bottom: 0; }

/* ---------- v39: sheets, development tab, matrix, line-up minutes ---------- */
/* While a sheet is open the page behind stays still, so a swipe on the sheet scrolls the sheet (iPhone). */
body.sheet-lock { position: fixed; left: 0; right: 0; overflow: hidden; }
#sheet { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Goal buttons: a tidy 2-column grid that never runs off the card. */
.dev-goal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dev-goal-actions .btn { width: 100%; min-width: 0; white-space: normal; line-height: 1.2; margin: 0; }
.dev-goal-item, .dev-goals-card, .matrix-hero { min-width: 0; max-width: 100%; overflow: hidden; }
.dev-coach-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dev-coach-tools .check { flex: 1 1 100%; border: 0; padding: 4px 0 0; font-size: 15px; }
/* Squad development matrix: the four figures wrap to two per row instead of pushing out of the card. */
.matrix-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.matrix-tiles .tile { min-width: 0; }
.matrix-tiles .tile b { line-height: 1.15; overflow-wrap: normal; word-break: normal; hyphens: none; }
.matrix-tiles .tile.wide { grid-column: 1 / -1; order: 4; }                    /* the top training focus (a word) gets its own row */
.matrix-tiles .tile.wide b { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }
@media (min-width: 700px) { .matrix-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .matrix-tiles .tile.wide { grid-column: auto; order: 0; } }
/* Progress chart */
.dev-progress-card { margin-top: 14px; }
.dev-chart { width: 100%; height: auto; display: block; }
.dev-chart .dev-grid { stroke: var(--line); stroke-width: 1; }
.dev-chart .dev-axis { fill: var(--muted); font-size: 10px; font-family: var(--font); }
.dev-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--soft); }
.dev-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dev-bars { display: grid; gap: 8px; }
.dev-bar-row { display: grid; grid-template-columns: 110px 1fr 28px; gap: 10px; align-items: center; font-size: 14px; }
.dev-bar { height: 10px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.dev-bar i { display: block; height: 100%; border-radius: 6px; }
/* Line-up: who needs minutes; match notes read-only until Edit */
.under50 { color: var(--warn); font-weight: 700; }
.notes-view { background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; white-space: normal; overflow-wrap: anywhere; }

/* ---------- v40: coach board, simpler live screen, insights ---------- */
.seg.mini { margin: 0; display: inline-flex; width: auto; }
.seg.mini button { padding: 6px 12px; font-size: 13px; }
.board { margin-top: 8px; }
.pitch { position: relative; width: 100%; max-width: 440px; margin: 10px auto 6px; aspect-ratio: 68 / 100; border-radius: 16px; border: 2px solid rgba(244,247,250,.55);
  background: repeating-linear-gradient(180deg, #1c7a4c 0 10%, #1a7046 10% 20%); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.pitch i { position: absolute; border: 2px solid rgba(244,247,250,.45); pointer-events: none; }
.pitch .half { left: 0; right: 0; top: 50%; height: 0; border-width: 2px 0 0; }
.pitch .circle { left: 50%; top: 50%; width: 26%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.pitch .box { left: 25%; width: 50%; height: 14%; }
.pitch .box.top { top: -2px; border-top: 0; } .pitch .box.bot { bottom: -2px; border-bottom: 0; }
.spot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; min-width: 64px; color: #fff; cursor: pointer; }
.spot .dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; letter-spacing: .02em;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 6px rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.85); }
.spot.gk .dot { background: #ffc247; }
.spot.cap .dot { outline: 3px solid #ffc247; outline-offset: 1px; }
.spot .nm { font-size: 12.5px; font-weight: 700; background: rgba(11,31,51,.78); padding: 1px 7px; border-radius: 8px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot small { font-size: 11px; background: rgba(11,31,51,.6); padding: 0 5px; border-radius: 6px; }
.spot.empty .dot { background: rgba(11,31,51,.45); color: #fff; border-style: dashed; }
.spot.empty .nm { background: none; opacity: .85; }
.bench { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.bench .muted { flex: 1 1 100%; }
.bchip { border: 1px solid var(--line2); background: var(--surface2); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.bchip.on { border-color: var(--accent-line); } .bchip small { margin-left: 6px; color: var(--muted); font-weight: 600; } .bchip:disabled { cursor: default; opacity: 1; }
/* live: three big actions, the clock beside its pause button */
.clock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
.clock-row .clock { font-size: 54px; line-height: 1; }
.actions.big3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.actions.big3 .btn { min-height: 64px; font-size: 16px; font-weight: 800; flex-direction: column; gap: 4px; }
.live-minor { align-items: center; gap: 6px; margin: 8px 0 2px; }
/* insights */
.ins-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 40px; grid-template-areas: 'n bar pc' 'sub sub sub'; gap: 2px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ins-row:last-child { border-bottom: 0; } .ins-row .n { grid-area: n; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-row .ins-bar { grid-area: bar; position: relative; height: 10px; background: var(--surface2); border-radius: 6px; overflow: visible; }
.ins-row .ins-bar i { display: block; height: 100%; border-radius: 6px; background: var(--accent); } .ins-row .ins-bar i.low { background: var(--warn); }
.ins-row .ins-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: .6; }
.ins-row b { grid-area: pc; text-align: right; } .ins-row small { grid-area: sub; }
td.hot { color: var(--accent); font-weight: 800; } b.pos { color: var(--accent); } b.neg { color: var(--danger); }

/* ---------- v41 fixes ---------- */
/* board: each spot is anchored on its circle (not the middle of the whole button), so circles in one line always line up */
.spot { transform: translate(-50%, -20px); }
.spot .dot { position: relative; }
.spot .capb { position: absolute; top: -6px; right: -8px; width: 18px; height: 18px; border-radius: 50%; background: #ffc247; color: #0B1F33; font-style: normal; font-size: 11px; font-weight: 900; display: grid; place-items: center; border: 2px solid #0B1F33; }
.spot .nm { max-width: min(84px, 19vw); }
/* the buttons under a list of options in a sheet keep clear of it */
.sheet-foot { margin-top: 16px; display: grid; gap: 10px; }
/* insights positions table: the name column stays readable and the positions scroll */
.pos-table td.pname, .pos-table th:first-child { white-space: nowrap; min-width: 96px; position: sticky; left: 0; background: var(--surface); z-index: 1; padding-right: 12px; }
.pos-table td, .pos-table th { white-space: nowrap; }

/* ---------- v42: tab bars never push a tab (or its highlight) outside the bar ---------- */
.seg { overflow: hidden; }
.seg button { min-width: 0; }
.seg.wrap { flex-wrap: wrap; }
.seg.wrap button { flex: 1 1 28%; white-space: nowrap; }                       /* 5 tabs on a phone: 3 on the first row, 2 on the second */
@media (max-width: 699px) { .hide-sm { display: none; } }
@media (min-width: 700px) { .seg.wrap button { flex: 1 1 0; } }                /* wide screens: one row */

/* ---------- v43: availability and the rotation preview ---------- */
.avail-card { margin: -6px 0 12px; padding: 8px 14px 10px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; }
.avail-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
.avail-q .n { font-weight: 700; }
.avail-btns { display: inline-flex; gap: 6px; }
.avb { border: 1px solid var(--line2); background: var(--surface2); color: var(--text); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; min-width: 64px; }
.avb.yes.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.avb.maybe.on { background: var(--warn); color: #0B1F33; border-color: var(--warn); }
.avb.no.on { background: var(--danger); color: #0B1F33; border-color: var(--danger); }
.avail-line { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.avail-line:last-child { border-bottom: 0; } .avail-line .check { flex: 1; border-bottom: 0; min-width: 0; }
.avchip { flex: none; border-radius: 999px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line2); background: var(--surface2); color: var(--muted); }
.avchip.yes { color: var(--accent); border-color: var(--accent-line); } .avchip.maybe { color: var(--warn); border-color: var(--warn); } .avchip.no { color: var(--danger); border-color: var(--danger); }
.avail-sum b { color: var(--text); }
td.gkc { color: #ffc247; font-weight: 800; }

/* ---------- v44: kick-off, meet time and location ---------- */
.ww { margin-top: 8px; display: grid; gap: 6px; }
.ww-line { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.ww-line .ico { flex: none; margin-top: 2px; color: var(--accent); }
.ww-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ww-btns a.btn { text-decoration: none; }
.ww-card { margin: -6px 0 0; padding: 4px 14px 10px; background: var(--surface); border: 1px solid var(--line); border-top: 0; }
.ww-card + .avail-card { margin-top: 0; }
.ww-card:last-child, .ww-card:not(:has(+ .avail-card)) { border-radius: 0 0 18px 18px; margin-bottom: 12px; }
.ww-short { font-size: 13px; color: var(--accent); font-weight: 700; margin-bottom: 2px; }

/* ---------- v45: training ---------- */
.pill.cancelp { background: rgba(255,107,120,.14); color: var(--danger); border-color: rgba(255,107,120,.4); font-weight: 800; }

/* v48: time fields (kick-off, meet, training start/end) look like every other field, and the empty "--:--" is the muted placeholder colour */
input[type=time]:invalid::-webkit-datetime-edit, input[type=time]:not(:valid)::-webkit-datetime-edit { color: #7D8EA5; }

/* ---------- v49: the coach's session plan ---------- */
.pill.coachp { font-size: 11px; vertical-align: 2px; margin-left: 6px; color: var(--warn); border-color: var(--warn); background: var(--warn-soft); letter-spacing: .02em; }
.sp-block { margin-top: 10px; }
.sp-block textarea, .sp-block input[type=text] { font-size: 15px; }
.sp-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--accent); font-size: 13px; flex: none; }
.sp-tools { margin-top: 8px; gap: 6px; align-items: center; }
.sp-time { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font-weight: 700; color: var(--accent); }
.sp-time.over { color: var(--warn); }

/* ---------- v50: drill library ---------- */
input[type=search] { -webkit-appearance: none; appearance: none; }
.drill-card { cursor: pointer; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 0; }
.cn-technical { color: #FF6B78; } .cn-psychological { color: #38DC76; } .cn-physical { color: #FFC247; } .cn-social { color: #5AA9FF; }
.sp-tools { flex-wrap: wrap; }

/* v52: three time fields in a row (training starts / ends / meet) fit a phone even in 12-hour format ("06:00 PM") */
.row.times { gap: 8px; }
.row.times > .grow { min-width: 0; }
.row.times input[type=time] { padding: 12px 8px; font-size: 15px; }
.row.times input[type=time]::-webkit-calendar-picker-indicator { display: none; }   /* tapping the field opens the picker on phones; the icon only took space */

/* v57: the "moved to plyrpath.co.uk" banner on the old address */
.moved-banner { background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 16px; padding: 12px 14px; margin: 4px 0 14px; display: grid; gap: 6px; }
.moved-banner .btn { justify-self: start; text-decoration: none; }