/* Compact scale: sizes were reduced to 84% so more fits on one phone screen.
   Layout: one phone-shaped column (max 480px). Night-purple stadium theme:
   deep aubergine page, raised purple cards, one vivid cyan-to-magenta gradient for the
   club card and match heroes, cyan for the main action, green/amber/red for status. */
:root {
  --night: #22082F;
  --stand: #300E42;
  --stand2: #3F1757;
  --line: #4B2565;
  --chalk: #FFFFFF;
  --mute: #C3B0D8;
  --amber: #2DE2EE;
  --amber-ink: #0E0420;
  --turf: #2A8A56;
  --turf2: #24804F;
  --good: #2BD46A;
  --warn: #F5C518;
  --bad: #F43F5E;
  --draw: #8E7FA8;
  --grad: linear-gradient(118deg, #1FD1E8 0%, #3A7BF2 36%, #7B3FE4 68%, #C02BD9 100%);
  --f-disp: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 15px;
  color-scheme: dark;
}
html, body { height: 100%; }
body { background: radial-gradient(130% 55% at 50% -12%, #4E1569 0%, transparent 62%) fixed, var(--night); color: var(--chalk); font-family: var(--f-body); font-size: 12.5px; line-height: 1.4; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
b { font-weight: 600; }
small { font-size: 10px; }
.muted { color: var(--mute); font-size: 11px; margin: 0; }
.muted.c { text-align: center; }
.good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); }

#app { height: 100%; max-width: 480px; margin: 0 auto; position: relative; }
.app { height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--night); }
@media (min-width: 520px) { #app { border-inline: 1px solid var(--line); } }

/* ---------- shell ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 8.5px; padding-block: 6.5px; padding-left: max(13.5px, env(safe-area-inset-left, 0px)); padding-right: max(13.5px, env(safe-area-inset-right, 0px)); background: var(--stand); border-bottom: 1px solid var(--line); flex: none; }
.top-club { display: flex; align-items: center; gap: 8.5px; min-width: 0; }
.top-club span { display: flex; flex-direction: column; min-width: 0; }
.top-club b { font-family: var(--f-disp); font-size: 17px; font-weight: 700; letter-spacing: .02em; line-height: 1.05; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-club small { color: var(--mute); white-space: nowrap; }
.top-money { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.top-money small { color: var(--mute); text-transform: uppercase; letter-spacing: .08em; font-size: 8.5px; }
.top-money b { font-family: var(--f-disp); font-size: 16px; font-variant-numeric: tabular-nums; }
.main { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-block: 12px; padding-left: max(13.5px, env(safe-area-inset-left, 0px)); padding-right: max(13.5px, env(safe-area-inset-right, 0px)); }
.main > * { flex: none; }
.spacer { height: 47px; }

/* ---------- type ---------- */
.h1 { font-family: var(--f-disp); font-size: 25px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; margin: 2px 0 0; text-wrap: balance; }
.h1 small { font-size: 12.5px; color: var(--mute); font-weight: 600; letter-spacing: .04em; margin-left: 5px; }
.eyebrow { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--amber); }
.lbl { margin: 5px 0 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8.5px; margin-top: 3.5px; flex-wrap: wrap; }
.sec-h h2 { margin: 0; font-family: var(--f-disp); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.link { color: var(--amber); font-weight: 600; font-size: 11px; }
.note { margin: 6.5px 0; padding: 8.5px 10px; border-radius: 8.5px; background: rgba(255,181,71,.1); border: 1px solid rgba(255,181,71,.25); font-size: 11px; }
.body { white-space: pre-line; }
.match-analysis-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- hero (match card) ---------- */
.hero { position: relative; padding: 13.5px; border-radius: 13.5px; border: 1px solid var(--line); background:
  linear-gradient(115deg, color-mix(in srgb, var(--k1, #2A8A56) 34%, transparent) 0 46%, transparent 46% 54%, color-mix(in srgb, var(--k2, #1A3240) 34%, transparent) 54%),
  var(--stand); overflow: hidden; display: flex; flex-direction: column; gap: 8.5px; }
.hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 15px, transparent 15px 30px); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; }
.vs-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vs-mid b { font-family: var(--f-disp); font-size: 25px; font-weight: 800; color: var(--mute); line-height: 1; }
.vs-mid.score b { color: var(--chalk); font-size: 37px; font-variant-numeric: tabular-nums; }
.vs-mid small { color: var(--mute); }
.ha { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 2px 6.5px; border-radius: 8.5px; background: rgba(0,0,0,.35); }
.vs-names { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; text-align: center; font-family: var(--f-disp); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.vs-meta { display: flex; justify-content: space-between; align-items: center; gap: 6.5px; font-size: 11px; color: var(--mute); flex-wrap: wrap; }
.scorers { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; text-align: center; font-size: 10px; color: var(--mute); }
.crest { flex: none; filter: drop-shadow(0 2px 2.5px rgba(0,0,0,.35)); }
img.crest-art { object-fit: contain; max-width: none; vertical-align: middle; }

/* ---------- tiles & cards ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8.5px; }
.tile { display: flex; flex-direction: column; gap: 3.5px; padding: 10px; border-radius: var(--r); background: var(--stand); border: 1px solid var(--line); min-width: 0; }
.tile small { color: var(--mute); text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 700; }
.tile b { font-family: var(--f-disp); font-size: 21px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile b i { font-style: normal; font-size: 12.5px; color: var(--mute); }
.tile span { font-size: 10px; color: var(--mute); }
.tile.hot { border-color: rgba(255,181,71,.5); }
.tile.hot b { color: var(--amber); }
.card { padding: 12px; border-radius: var(--r); background: var(--stand); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8.5px; min-width: 0; }
.card h3 { margin: 0; font-family: var(--f-disp); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.card h3 small { color: var(--mute); font-family: var(--f-body); font-size: 10px; text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 3.5px; }
.card.danger { border-color: rgba(240,96,93,.35); }
.card.two, .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8.5px; }
.two > * { min-width: 0; }
@media (max-width: 302.5px) { .two { grid-template-columns: 1fr; } }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8.5px; }
.gcard { display: flex; flex-direction: column; gap: 3.5px; padding: 12px 10px; border-radius: var(--r); background: var(--stand); border: 1px solid var(--line); min-height: 65.5px; }
.gcard b { font-family: var(--f-disp); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.gcard small { color: var(--mute); }
.gcard.on { border-color: var(--amber); background: linear-gradient(var(--stand2), var(--stand)); box-shadow: inset 0 0 0 1px var(--amber); }
.gcard.on b { color: var(--amber); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.kv > div { background: var(--stand); padding: 8.5px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv small { color: var(--mute); text-transform: uppercase; letter-spacing: .07em; font-size: 9px; font-weight: 700; }
.kv b { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kvrow { display: flex; justify-content: space-between; gap: 8.5px; font-size: 12px; }
.kvrow span { color: var(--mute); }
.kvrow b { font-variant-numeric: tabular-nums; }
.kvrow.tot { border-top: 1px solid var(--line); padding-top: 6.5px; }
.banner { padding: 8.5px 10px; border-radius: var(--r); background: var(--stand); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.banner span { color: var(--mute); }
.banner.open { border-color: rgba(255,181,71,.45); }
.banner.open b { color: var(--amber); }
.empty { padding: 18.5px 13.5px; text-align: center; color: var(--mute); }
.empty b { color: var(--chalk); display: block; margin-bottom: 3.5px; }
.empty p { margin: 0; font-size: 11px; }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; background: var(--stand); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.list:empty { display: none; }
.card .list, .sheet .list { background: var(--stand2); }
.row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 40px; border-bottom: 1px solid var(--line); width: 100%; min-width: 0; }
.row:last-child { border-bottom: 0; }
.row.sm { min-height: 32px; padding: 4px 8.5px; }
.row.act:not(:disabled):active { background: rgba(255,255,255,.04); }
.row.sel { background: rgba(255,181,71,.12); box-shadow: inset 2.5px 0 0 var(--amber); }
.row.me, tr.me td { background: rgba(255,181,71,.08); }
.row.add b { color: var(--amber); }
.grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.grow > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grow small { color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grow.r { text-align: right; align-items: flex-end; }
.grow > .tag { align-self: flex-start; }
.prow .grow { display: block; }
.prow .grow small { display: block; }
.linked-prow { padding-top: 0; padding-bottom: 0; }
.player-main { display: flex; align-items: center; flex: 1; gap: 8px; min-width: 0; min-height: 44px; padding: 6px 0; }
.entity-link { display: inline; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entity-link:hover, .entity-link:focus-visible { color: var(--amber); }
.entity-link:focus-visible, .crest-link:focus-visible, .player-main:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.entity-link.rb, .crest-link { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 32px; min-width: 28px; }
.related-actions { margin-bottom: 12px; }
.related-actions .btn { white-space: normal; }
.fxr .entity-link { font-size: inherit; }
.choice-row { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); padding-right: 8px; }
.choice-row > .row { flex: 1; width: auto; border: 0; }
.choice-row > .btn { flex: none; }
.team-sections { position: relative; margin-top: 0; }
.dashboard-sections { margin-bottom: 1px; }
.squad-metric { flex: none; display: flex; align-items: center; justify-content: center; text-align: right; font-variant-numeric: tabular-nums; }
.squad-metric.alt { align-items: flex-end; flex-direction: column; gap: 1px; max-width: 67px; }
.squad-metric.alt small, .squad-metric.value small { color: var(--mute); font-size: 8px; line-height: 1.1; }
.squad-metric.alt b { max-width: 67px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.squad-metric.condition { flex-direction: column; gap: 3px; min-width: 40px; font-size: 12px; }
.squad-metric.condition .mbar { width: 38px; height: 4px; }
.squad-metric.value { flex-direction: column; align-items: flex-end; gap: 1px; }
.squad-metric.value b { font-size: 11px; white-space: nowrap; }
.player-main > .mood { flex: none; font-size: 10px; }
.player-main > .mood svg { width: 18px; height: 18px; }
.chev { color: var(--mute); font-size: 17px; flex: none; }
.pos { flex: none; width: 30px; text-align: center; padding: 2.5px 0; border-radius: 5px; background: var(--night); border: 1px solid var(--line); font-family: var(--f-disp); font-weight: 700; font-size: 11px; letter-spacing: .03em; }
.season-avg { flex: none; min-width: 27px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--cyan); text-align: center; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.no { flex: none; width: 20px; text-align: center; font-family: var(--f-disp); font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums; }
.rb { flex: none; display: flex; }
.rd { flex: none; width: 18.5px; text-align: center; color: var(--mute); font-family: var(--f-disp); font-weight: 700; }
.xitag { flex: none; font-weight: 800; font-size: 9px; color: var(--amber); letter-spacing: .05em; }
.ovr { flex: none; min-width: 33.5px; padding: 3.5px 5px; border-radius: 6.5px; text-align: center; font-family: var(--f-disp); font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--night); }
.ovr.o4 { background: var(--amber); } .ovr.o3 { background: var(--good); } .ovr.o2 { background: #B9CBC6; } .ovr.o1 { background: #6D8288; color: var(--chalk); }
.stat { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.stat small { color: var(--mute); font-size: 9px; }
.rt { flex: none; min-width: 32px; text-align: center; font-family: var(--f-disp); font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.tag { font-style: normal; font-size: 8.5px; font-weight: 700; padding: 1px 4px; border-radius: 3.5px; background: var(--stand2); color: var(--mute); letter-spacing: .04em; vertical-align: 1px; }
.tag.bad { background: rgba(240,96,93,.18); color: var(--bad); } .tag.warn { background: rgba(242,193,78,.16); color: var(--warn); } .tag.good { background: rgba(91,211,138,.16); color: var(--good); }
.ncat { flex: none; width: 55.5px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--mute); }
.ncat.c-inbox { color: var(--amber); } .ncat.c-match { color: var(--good); } .ncat.c-transfer { color: #8EC5FF; }
.news.unread b { color: var(--chalk); }
.news.unread::before { content: ''; width: 5px; height: 5px; border-radius: 2.5px; background: var(--amber); flex: none; margin-left: -3.5px; }
.res { flex: none; min-width: 35.5px; text-align: center; font-family: var(--f-disp); font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; padding: 2px 5px; border-radius: 5px; }
.res.rW { background: rgba(91,211,138,.2); color: var(--good); } .res.rL { background: rgba(240,96,93,.18); color: var(--bad); } .res.rD { background: var(--stand2); }
.fxr { gap: 6.5px; font-size: 12px; }
.grade { flex: none; width: 25px; height: 25px; border-radius: 12.5px; display: grid; place-items: center; font-family: var(--f-disp); font-weight: 800; font-size: 14.5px; color: var(--night); }
.grade.gA { background: var(--amber); } .grade.gB { background: var(--good); } .grade.gC { background: #B9CBC6; } .grade.gD { background: #6D8288; color: var(--chalk); }

/* ---------- controls ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 6.5px; }
.btns.col { flex-direction: column; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8.5px 12px; border-radius: 8.5px; background: var(--stand2); border: 1px solid var(--line); font-weight: 600; font-size: 12px; min-height: 35.5px; }
.btn.sm { min-height: 27px; padding: 4px 8.5px; font-size: 11px; }
.btn.pri { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); font-weight: 700; }
.btn.ghost { background: transparent; }
.btn.bad { border-color: var(--bad); color: var(--bad); }
.btn.wide { width: 100%; }
.btn.big { min-height: 45.5px; font-family: var(--f-disp); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { padding: 5px 10px; border-radius: 13.5px; background: var(--stand); border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--mute); }
.chip.on { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.chip.static { color: var(--chalk); }
.sortbar { display: flex; align-items: center; gap: 3.5px; overflow-x: auto; scrollbar-width: none; font-size: 11px; }
.sortbar::-webkit-scrollbar { display: none; }
.sortbar span { margin-right: 3.5px; flex: none; }
.sortbar button { flex: none; padding: 3.5px 6.5px; border-radius: 5px; color: var(--mute); font-weight: 600; }
.sortbar button.on { color: var(--chalk); background: var(--stand2); }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; padding: 7.5px 10px; font-weight: 600; font-size: 12px; color: var(--mute); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--chalk); border-color: var(--amber); }
.seg { display: flex; background: var(--night); border: 1px solid var(--line); border-radius: 8.5px; padding: 2.5px; gap: 2.5px; }
.seg button { flex: 1; padding: 6px 3.5px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--mute); text-align: center; min-width: 0; }
.seg button.on { background: var(--stand2); color: var(--chalk); box-shadow: inset 0 0 0 1px var(--amber); }
.comp-seg { flex-wrap: wrap; }
.comp-seg button { flex: 1 1 30%; }
.seg.wide { width: 100%; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
select, input[type=text], input[type=search], input[type=password], textarea { width: 100%; padding: 7.5px 8.5px; border-radius: 7.5px; border: 1px solid var(--line); background: var(--night); color: var(--chalk); min-height: 33.5px; }
textarea.code { font-family: ui-monospace, Menlo, monospace; font-size: 9px; word-break: break-all; resize: vertical; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8.5px; }
.transfer-result-sort { margin: 8px 0; }
.stepper { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 5px; align-items: center; }
.stepper b { min-width: 0; overflow-wrap: anywhere; text-align: center; font-family: var(--f-disp); font-size: clamp(14px, 4.4vw, 20px); font-weight: 800; font-variant-numeric: tabular-nums; }
.stepper .btn { min-width: 35.5px; padding: 6.5px; touch-action: manipulation; }

/* ---------- bars & meters ---------- */
.bar { display: block; height: 5px; border-radius: 2.5px; background: var(--night); overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: var(--amber); border-radius: 2.5px; }
.bar.good i { background: var(--good); } .bar.warn i { background: var(--warn); } .bar.bad i { background: var(--bad); }
.mbar { flex: none; width: 28.5px; height: 4px; border-radius: 2.5px; background: var(--night); overflow: hidden; }
.mbar i { display: block; height: 100%; }
.mbar.good i { background: var(--good); } .mbar.warn i { background: var(--warn); } .mbar.bad i { background: var(--bad); }
.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8.5px; }
.meters small { color: var(--mute); display: block; margin-bottom: 3.5px; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.famrow { display: grid; grid-template-columns: auto 1fr auto; gap: 8.5px; align-items: center; font-size: 11px; color: var(--mute); }
.famrow b { color: var(--chalk); font-variant-numeric: tabular-nums; }
.stars { display: inline-flex; gap: 1px; }
.st { width: 10px; height: 10px; display: inline-block; background: var(--line); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.st.on { background: var(--amber); }
.st.half { background: linear-gradient(90deg, var(--amber) 50%, var(--line) 50%); }
.form { display: inline-flex; gap: 2px; }
.form i { width: 14.5px; height: 14.5px; border-radius: 3.5px; display: inline-grid; place-items: center; font-style: normal; font-size: 8.5px; font-weight: 800; color: var(--night); }
.form .fW { background: var(--good); } .form .fD { background: #9FB2B0; } .form .fL { background: var(--bad); }

/* ---------- player sheet ---------- */
.phead { display: flex; gap: 10px; align-items: flex-start; padding-right: 25px; }
.pnum { flex: none; width: 42px; height: 47px; border-radius: 8.5px 8.5px 13.5px 13.5px; display: grid; place-items: center; background: var(--k1); font-family: var(--f-disp); font-weight: 800; font-size: 22px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.25); }
.pclub { margin: 3.5px 0 0; display: flex; align-items: center; gap: 5px; font-size: 11px; flex-wrap: wrap; }
.pov { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2.5px; }
.pov .ovr { font-size: 18.5px; min-width: 43.5px; padding: 5px; }
.pov small { color: var(--mute); font-size: 8.5px; text-transform: uppercase; letter-spacing: .08em; }
.attrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.attrs > div { min-width: 0; }
.at { display: flex; justify-content: space-between; gap: 3.5px; padding: 2.5px 0; border-bottom: 1px dashed rgba(255,255,255,.06); font-size: 11px; }
.at span { color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at b { font-family: var(--f-disp); font-weight: 800; font-variant-numeric: tabular-nums; }
.at .at-value { display: inline-flex; align-items: center; gap: 4px; overflow: visible; }
.dev-note { margin: 0 0 5px; color: var(--mute); font-size: 10px; }
.dev-delta { color: var(--good); font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dev-delta.down, .dev-change.down, .dev-ca.down, .dev-dashboard .down { color: var(--bad); }
.dev-dashboard { margin-top: 10px; }
.dev-dashboard .sec-h { margin-top: 0; }
.dev-dashboard .kv { margin-bottom: 8px; }
.dev-dashboard .up { color: var(--good); }
.dev-week { border-top: 1px solid var(--line); }
.dev-week summary { display: flex; align-items: center; gap: 8px; min-height: 38px; cursor: pointer; list-style: none; }
.dev-week summary::-webkit-details-marker { display: none; }
.dev-week summary b { font-size: 11px; }
.dev-week summary span { flex: 1; color: var(--mute); font-size: 10px; }
.dev-week summary i { color: var(--mute); font-style: normal; transition: transform .15s; }
.dev-week[open] summary i { transform: rotate(90deg); }
.dev-week-body { padding: 2px 0 8px; }
.dev-report-row { display: grid; grid-template-columns: minmax(80px, .8fr) minmax(0, 2fr) auto; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,.06); font-size: 10px; }
.dev-report-row .entity-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.dev-changes { display: flex; flex-wrap: wrap; gap: 3px; }
.dev-change { color: var(--good); font-size: 9px; }
.dev-ca { color: var(--mute); font-size: 9px; white-space: nowrap; }
.a4 { color: var(--amber); } .a3 { color: var(--good); } .a2 { color: var(--chalk); } .a1 { color: var(--bad); }
@media (max-width: 319px) { .attrs { grid-template-columns: 1fr 1fr; } }

/* ---------- tactics pitch ---------- */
.tpitch { position: relative; width: 100%; aspect-ratio: 68 / 88; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: repeating-linear-gradient(180deg, var(--turf) 0 9.09%, var(--turf2) 9.09% 18.18%); }
.tpitch.oop { filter: saturate(.8) brightness(.92); }
.tp-lines { position: absolute; inset: 6.5px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 2px; }
.tp-lines::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid rgba(255,255,255,.55); }
.tp-lines::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; }
.tpitch::before, .tpitch::after { content: ''; position: absolute; left: 50%; width: 56%; height: 15%; transform: translateX(-50%); border: 1.5px solid rgba(255,255,255,.55); }
.tpitch::before { top: 6.5px; border-top: 0; }
.tpitch::after { bottom: 6.5px; border-bottom: 0; }
.tok { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: 60.5px; z-index: 2; transition: left .35s ease, top .35s ease; }
.tk-c { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; background: var(--amber); color: var(--amber-ink); font-family: var(--f-disp); font-weight: 800; font-size: 13.5px; box-shadow: 0 2px 5px rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.85); }
.tk-c .tk-pos { color: inherit; font-size: inherit; text-shadow: none; }
.tok.f2 .tk-c { background: var(--warn); }
.tok.f3 .tk-c { background: var(--bad); color: #fff; }
.swap-toolbar { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.swap-toolbar .btn { flex: none; }
.swap-toolbar span { color: var(--mute); font-size: 10px; line-height: 1.4; }
.tk-pos { color: #fff; font-size: 8px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 2px #000; }
.tok.swap-picked .tk-c { outline: 3px solid #fff; outline-offset: 3px; }
.tk-n { margin-top: 2px; max-width: 60.5px; padding: 0 3.5px; border-radius: 3.5px; background: rgba(8,16,22,.78); font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-r { font-size: 8px; color: #E9F1EC; opacity: .85; white-space: nowrap; max-width: 64px; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.tpitch.oop .tk-c { background: #9AD1D4; }
@media (prefers-reduced-motion: reduce) { .tok { transition: none; } .fab.match { animation: none; } }

/* ---------- training week ---------- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3.5px; }
.week div { background: var(--stand); border: 1px solid var(--line); border-radius: 6.5px; padding: 5px 2.5px; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.week small { color: var(--mute); font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; }
.week b { font-size: 9px; line-height: 1.15; }
.week .m { border-color: var(--amber); } .week .m b { color: var(--amber); }
.week .r b { color: var(--mute); }

/* ---------- table ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--stand); }
.tbl { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.tbl th { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 700; padding: 6.5px 4px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .l { text-align: left; }
.tbl td:first-child { width: 22px; color: var(--mute); box-shadow: inset 2.5px 0 0 transparent; }
.tbl tr.z1 td:first-child { box-shadow: inset 2.5px 0 0 var(--amber); }
.tbl tr.z2 td:first-child { box-shadow: inset 2.5px 0 0 #8EC5FF; }
.tbl tr.z3 td:first-child { box-shadow: inset 2.5px 0 0 var(--good); }
.tbl tr.z4 td:first-child { box-shadow: inset 2.5px 0 0 var(--bad); }
.tc { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 10px; color: var(--mute); }
.lz::before { content: ''; display: inline-block; width: 8.5px; height: 8.5px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.lz.z1::before { background: var(--amber); } .lz.z2::before { background: #8EC5FF; } .lz.z3::before { background: var(--good); } .lz.z4::before { background: var(--bad); }
@media (max-width: 336px) { .hide-s { display: none; } }

/* ---------- finance chart ---------- */
.spark { width: 100%; height: 75.5px; display: block; }
.spark .line { fill: none; stroke: var(--amber); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark .area { fill: rgba(255,181,71,.12); stroke: none; }
.spark-l { display: flex; justify-content: space-between; font-size: 9px; color: var(--mute); font-variant-numeric: tabular-nums; }

/* ---------- club page ---------- */
.clubhead { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r); background: linear-gradient(120deg, color-mix(in srgb, var(--k1) 30%, var(--stand)) 0%, var(--stand) 70%); border: 1px solid var(--line); }
.clubhead .h1 { margin: 0; }

/* ---------- prematch ---------- */
.xi { display: grid; grid-template-columns: repeat(auto-fill, minmax(77.5px, 1fr)); gap: 5px; }
.xi span { background: var(--stand2); border-radius: 6.5px; padding: 5px 6.5px; font-size: 11px; font-weight: 600; display: flex; gap: 5px; align-items: baseline; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--chalk); font-family: var(--f-body); letter-spacing: 0; }
.xi em { font-style: normal; font-family: var(--f-disp); color: var(--amber); font-size: 10px; }
.xi span.warn { box-shadow: inset 0 0 0 1px var(--warn); }
.warns { margin: 0; padding-left: 15px; color: var(--warn); font-size: 11px; }
.press .q { font-family: var(--f-disp); font-size: 16px; font-weight: 600; line-height: 1.2; margin: 0; }

/* ---------- live match ---------- */
.app.full { overflow-y: auto; }
.mscr { height: 100%; display: flex; flex-direction: column; gap: 6.5px; padding-block: 6.5px; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); background: radial-gradient(120% 60% at 50% 0%, #17303D 0%, var(--night) 60%); }
.sb { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6.5px; align-items: center; background: var(--stand); border: 1px solid var(--line); border-radius: 10px; padding: 6.5px 8.5px; flex: none; }
.sb-t { display: flex; align-items: center; gap: 5px; min-width: 0; }
.sb-t b { font-family: var(--f-disp); font-weight: 700; font-size: 12.5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-t.r { justify-content: flex-end; text-align: right; }
.sb-m { display: flex; flex-direction: column; align-items: center; }
.sb-m b { font-family: var(--f-disp); font-weight: 800; font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; padding: 2px 8.5px; border-radius: 6.5px; background: var(--night); }
.sb-m span { font-size: 10px; color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.poss { flex: none; display: flex; flex-direction: column; gap: 2.5px; }
.pbar { display: block; height: 3.5px; background: var(--line); border-radius: 2px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--amber); transition: width .6s; }
.poss small { text-align: center; color: var(--mute); font-size: 9px; font-variant-numeric: tabular-nums; }
.pitchwrap { flex: 1; min-height: 168px; display: flex; align-items: stretch; justify-content: stretch; overflow: hidden; border-radius: 10px; }
#pitch { display: block; border-radius: 8.5px; box-shadow: 0 8.5px 25px rgba(0,0,0,.45); max-width: 100%; }
.feed { flex: none; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; height: 128px; overflow: hidden; }
.feed li span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.feed li { display: flex; gap: 6.5px; font-size: 11px; padding: 2.5px 6.5px; border-radius: 5px; background: rgba(19,36,47,.7); animation: feedIn .3s ease; }
.feed li:nth-child(n+4) { opacity: .55; }
.feed li b { flex: none; width: 23.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.feed .fd-goal { background: rgba(255,181,71,.18); color: var(--amber); font-weight: 600; }
.feed .fd-red, .feed .fd-inj { color: var(--bad); }
.feed .fd-yellow { color: var(--warn); }
.feed .fd-chance { color: var(--chalk); }
.feed .fd-tac { color: #8EC5FF; }
@keyframes feedIn { from { transform: translateY(-3.5px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .feed li { animation: none; } }
.mctl { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3.5px; }
.mctl button { padding: 8.5px 0; border-radius: 7.5px; background: var(--stand); border: 1px solid var(--line); font-size: 9.5px; font-weight: 700; text-align: center; letter-spacing: .02em; }
.mctl button:first-child { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.ftbar { flex: none; }
.live-watch { flex: none; min-width: 0; }
.live-watch-heading { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; font-size: 9px; margin-bottom: 3px; }
.live-watch-heading span { color: var(--mute); }
.live-watch-heading em { margin-left: 5px; font-style: normal; }
.live-watch-players { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.live-watch-player { min-width: 0; padding: 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--stand); }
.live-watch-player:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.live-watch-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.live-watch-name > b { font-size: 8px; color: var(--mute); }
.live-health { display: grid; gap: 2px; min-width: 51px; text-align: right; font-variant-numeric: tabular-nums; }
.live-health > b { font-size: 11px; line-height: 1.1; }
.live-fatigue { font-size: 9px; line-height: 1.1; white-space: nowrap; }
.live-condition-bar { display: block; height: 3px; background: var(--line); overflow: hidden; border-radius: 2px; }
.live-condition-bar i { display: block; height: 100%; background: currentColor; }
.live-watch-player .live-health { min-width: 0; text-align: left; margin-top: 3px; }
.live-watch-player .live-health > b { font-size: 10px; }
.live-watch-player .live-fatigue { font-size: 8px; }
.live-xi-player { width: 100%; min-height: 44px; gap: 8px; }
.live-xi-player .grow { min-width: 0; }
.live-xi-player .grow > b { display: block; overflow-wrap: anywhere; }
.live-xi-player .grow > small { display: block; color: var(--mute); font-size: 10px; }
.live-xi-player.swap-picked, .live-xi-gap.swap-picked { box-shadow: inset 0 0 0 2px var(--amber); }
.live-xi-gap { min-height: 44px; }
.tok.live-gap-token { border-style: dashed; opacity: .85; }
@media (max-width: 350px) {
  .live-watch-players { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 700px) {
  .mscr { gap: 4px; }
  .mscr .feed { height: 58px; }
  .live-watch-players { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .live-watch-player { padding: 3px 2px; }
  .live-watch-heading { font-size: 8px; }
  .mctl button { padding: 7px 0; }
}
.cmp { display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; text-align: center; padding: 4px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cmp span { color: var(--mute); font-size: 11px; }
.cmp.head b { font-family: var(--f-disp); text-transform: uppercase; font-size: 11px; }

/* ---------- sheets & toast ---------- */
#layer { position: fixed; inset: 0; z-index: 30; }
.scrim { position: absolute; inset: 0; background: rgba(4,10,14,.62); animation: fade 180ms ease-out; }
.sheet { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; max-height: 88%; overflow-y: auto; background: var(--stand); border: 1px solid var(--line); border-bottom: 0; border-radius: 15px 15px 0 0; padding-block: 6.5px calc(15px + env(safe-area-inset-bottom, 0px)); padding-left: max(13.5px, env(safe-area-inset-left, 0px)); padding-right: max(13.5px, env(safe-area-inset-right, 0px)); animation: up 180ms var(--motion-ease); box-shadow: 0 -8.5px 33.5px rgba(0,0,0,.5); }
.sh-body { display: flex; flex-direction: column; gap: 8.5px; }
.grab { width: 33.5px; height: 3.5px; border-radius: 2px; background: var(--line); margin: 0 auto 6.5px; }
.sh-x { position: absolute; top: 6.5px; right: max(8.5px, env(safe-area-inset-right, 0px)); width: 30px; height: 30px; border-radius: 15px; font-size: 20px; line-height: 1; color: var(--mute); display: grid; place-items: center; }
.sh-t { margin: 0; padding-right: 30px; font-family: var(--f-disp); font-size: 19.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; text-wrap: balance; }
.sh-t small { font-family: var(--f-body); font-size: 10px; color: var(--mute); text-transform: none; font-weight: 500; letter-spacing: 0; }
@keyframes up { from { transform: translate(-50%,12px); opacity: 0; } to { transform: translate(-50%,0); opacity: 1; } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet, .scrim { animation: none; } }
.toast { position: fixed; left: 50%; bottom: calc(111px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8.5px); z-index: 40; max-width: min(440px, calc(100% - 27px)); padding: 8.5px 12px; border-radius: 8.5px; background: var(--chalk); color: var(--night); font-weight: 600; font-size: 12px; box-shadow: 0 6.5px 20px rgba(0,0,0,.4); opacity: 0; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- start / review ---------- */
.start { display: flex; flex-direction: column; gap: 12px; padding-block: 15px 23.5px; padding-left: max(13.5px, env(safe-area-inset-left, 0px)); padding-right: max(13.5px, env(safe-area-inset-right, 0px)); min-height: 100%; background: radial-gradient(90% 40% at 50% 0%, rgba(255,181,71,.16) 0%, transparent 70%), var(--night); }
.st-hero { padding: 15px 2px 5px; display: flex; flex-direction: column; gap: 5px; }
.st-hero p { margin: 0; color: var(--mute); font-size: 12.5px; max-width: 36ch; }
.logo { margin: 0; font-family: var(--f-disp); font-size: clamp(45.5px, 18vw, 69px); font-weight: 800; line-height: .86; text-transform: uppercase; letter-spacing: -.005em; color: var(--chalk); text-shadow: 0 0 33.5px rgba(255,181,71,.25); }
.logo small { font-size: 18.5px; color: var(--mute); letter-spacing: .04em; }
.logo::first-line { color: var(--amber); }
.clubs { display: flex; flex-direction: column; gap: 5px; }
.club { display: flex; align-items: center; gap: 10px; padding: 8.5px 10px; border-radius: var(--r); background: linear-gradient(90deg, color-mix(in srgb, var(--k1) 22%, var(--stand)) 0%, var(--stand) 45%); border: 1px solid var(--line); }
.club b { font-family: var(--f-disp); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.club.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.diff { flex: none; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2.5px 6px; border-radius: 5px; background: var(--night); }
.diff.d1 { color: var(--good); } .diff.d2 { color: var(--chalk); } .diff.d3 { color: var(--warn); } .diff.d4 { color: var(--bad); }
.st-go { position: sticky; bottom: 0; padding-top: 8.5px; background: linear-gradient(transparent, var(--night) 40%); }

/* ---------- admin ---------- */
input[type=number], input[type=color] { width: 100%; padding: 7.5px 8.5px; border-radius: 7.5px; border: 1px solid var(--line); background: var(--night); color: var(--chalk); min-height: 33.5px; font-variant-numeric: tabular-nums; }
input[type=color] { padding: 3.5px; }
input[type=range] { width: 100%; accent-color: var(--amber); }
.field label b { color: var(--amber); font-variant-numeric: tabular-nums; }
.adattrs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 10px; }
.adattrs label { display: flex; align-items: center; justify-content: space-between; gap: 6.5px; font-size: 11px; color: var(--mute); }
.adattrs input { width: 54px; min-height: 28.5px; padding: 3.5px 5px; text-align: center; }
.tgl { display: flex; align-items: center; gap: 8.5px; font-size: 12px; padding: 3.5px 0; }
.tgl input { width: 17px; height: 17px; accent-color: var(--amber); flex: none; }
.aitest { padding: 8.5px 10px; border-radius: 8.5px; font-size: 11px; line-height: 1.5; background: rgba(91,211,138,.1); border: 1px solid rgba(91,211,138,.35); overflow-wrap: anywhere; }
.aitest.bad { background: rgba(240,96,93,.1); border-color: rgba(240,96,93,.4); }
.field label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.list > p.muted { padding: 10px; }

/* ---------- manager portraits ---------- */
.av { display: block; object-fit: contain; object-position: center bottom; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--stand2), var(--night)); border: 2px solid var(--line); aspect-ratio: 1; max-width: 100%; }
.av-sm { width: 43.5px; height: 43.5px; flex: none; }
.av-hero { width: 80.5px; height: 80.5px; border-color: var(--amber); margin-bottom: 5px; }
.av-hero.sad { filter: grayscale(.85); border-color: var(--line); }
.avpick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6.5px; }
.avopt { display: flex; flex-direction: column; align-items: center; gap: 3.5px; padding: 5px 2px 6.5px; border-radius: var(--r); background: var(--stand); border: 1px solid var(--line); min-width: 0; }
.avopt .av { width: 100%; height: auto; border-width: 1px; }
.avopt span { font-size: 9px; font-weight: 700; color: var(--mute); white-space: nowrap; }
.avopt.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.avopt.on .av { border-color: var(--amber); }
.avopt.on span { color: var(--amber); }
.mgrstrip { display: flex; align-items: center; gap: 10px; padding: 6.5px 10px; border-radius: var(--r); background: var(--stand); border: 1px solid var(--line); text-align: left; }
.clubhead .av-sm { margin-left: -15px; align-self: flex-end; }

/* ===================== Theme v2: header, tabs, bottom bar, dashboard ===================== */
.app { background: transparent; }
.top { background: transparent; border-bottom: 0; padding-block: 10px 3.5px; }
.brand { display: flex; align-items: center; gap: 8.5px; font-weight: 800; font-size: 17.5px; letter-spacing: -.01em; }
.brand svg { width: 28.5px; height: 28.5px; flex: none; }
.top-icons { display: flex; align-items: center; gap: 12px; }
.iconbtn { position: relative; width: 33.5px; height: 33.5px; display: grid; place-items: center; border-radius: 50%; }
.iconbtn svg { width: 22px; height: 22px; fill: none; stroke: var(--chalk); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn .dot { position: absolute; top: 5px; right: 6px; width: 7.5px; height: 7.5px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--night); }
.top .av { width: 37px; height: 37px; border: 2px solid rgba(255,255,255,.85); }
.tabs2 { display: grid; grid-template-columns: repeat(3, 1fr); padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); flex: none; border-bottom: 1px solid rgba(255,255,255,.06); }
.tabs2 button { position: relative; padding: 7.5px 2px 8.5px; text-align: center; font-size: 12px; font-weight: 600; color: var(--mute); white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.06); }
.tabs2 button:nth-child(n+4) { border-bottom: 0; }
.tabs2 button.on { color: var(--chalk); }
.tabs2 button.on::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2.5px; border-radius: 2.5px; background: var(--chalk); }
.subbar { display: flex; justify-content: space-between; align-items: center; gap: 8.5px; padding-block: 8.5px 2px; padding-left: max(13.5px, env(safe-area-inset-left, 0px)); padding-right: max(13.5px, env(safe-area-inset-right, 0px)); flex: none; font-size: 11px; color: var(--mute); }
.subbar > button, .subbar > span { display: flex; align-items: center; gap: 6.5px; min-width: 0; }
.subbar b { color: var(--chalk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subbar svg.cal { width: 17px; height: 17px; fill: none; stroke: var(--mute); stroke-width: 1.8; flex: none; }
.world-alert { position: fixed; z-index: 70; top: calc(env(safe-area-inset-top, 0px) + 7px); left: 50%; display: flex; align-items: center; gap: 8px; width: min(464px, calc(100% - 18px)); min-height: 46px; padding: 8px 11px; border: 1px solid rgba(45,226,238,.38); border-radius: 13px; background: linear-gradient(115deg, rgba(63,23,87,.98), rgba(34,8,47,.98)); box-shadow: 0 9px 28px rgba(0,0,0,.42), 0 0 18px rgba(45,226,238,.1); text-align: left; opacity: 0; transform: translate(-50%, -145%); transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease; }
.world-alert[hidden] { display: none; }
.world-alert.world-alert-in { opacity: 1; transform: translate(-50%, 0); animation: world-alert-drop 280ms cubic-bezier(.2,.8,.2,1) both; }
.world-alert.world-alert-out { opacity: 0; transform: translate(-50%, -145%); }
@keyframes world-alert-drop { from { opacity: 0; transform: translate(-50%, -145%); } to { opacity: 1; transform: translate(-50%, 0); } }
.world-alert b { flex: none; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 6px; border-radius: 6px; background: rgba(45,226,238,.13); color: var(--amber); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.world-alert span { flex: 1; min-width: 0; overflow: hidden; color: var(--chalk); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.world-alert i { flex: none; color: var(--mute); font-size: 17px; font-style: normal; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .world-alert { transition: none; animation: none !important; } }
.bottombar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8.5px; margin: 5px max(10px, env(safe-area-inset-left, 0px)) calc(8.5px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right, 0px)); padding: 8.5px 8.5px 8.5px 13.5px; border-radius: 18.5px; background: var(--stand); border: 1px solid rgba(255,255,255,.06); }
.bb-sum { display: flex; align-items: center; gap: 8.5px; font-size: 12px; font-weight: 700; min-width: 0; }
.bb-sum svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--chalk); stroke-width: 1.7; }
.bb-sum span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta { flex: none; display: inline-flex; align-items: center; gap: 6.5px; padding: 10px 15px 10px 18.5px; border-radius: 25px; background: linear-gradient(180deg, #4AF0F7, #22CFE6); color: var(--amber-ink); font-weight: 800; font-size: 15px; box-shadow: 0 5px 17px rgba(45,226,238,.25); transition: transform .12s; }
.cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cta:active { transform: scale(.97); }
.cta.match { background: linear-gradient(180deg, #7DF59E, #2BD46A); }
.spacer { height: 6.5px; }

/* type: rounded, mixed case display; small labels stay uppercase */
.h1, .sec-h h2, .card h3, .gcard b, .btn.big, .sh-t, .club b, .sb-t b, .vs-names, .top-club b, .cmp.head b { text-transform: none; letter-spacing: -.01em; }
.h1 { font-size: 23.5px; font-weight: 800; }
.sec-h h2, .card h3 { font-size: 17.5px; font-weight: 800; }
.gcard b { font-size: 13.5px; font-weight: 800; }
.sh-t { font-size: 18.5px; font-weight: 800; }
.club b { font-size: 14.5px; font-weight: 800; }
.vs-names { font-size: 13.5px; font-weight: 800; }
.card, .tile, .list, .kv, .gcard, .banner, .tablewrap, .clubhead, .club, .mgrstrip { border-color: rgba(255,255,255,.07); }
.card, .list { border-radius: var(--r); }
.btn { border-radius: 10px; }
.btn.pri { background: linear-gradient(180deg, #4AF0F7, #22CFE6); border-color: transparent; }
.chip.on, .seg button.on { box-shadow: none; }
.seg button.on { background: var(--chalk); color: var(--amber-ink); }
.tabs button.on { border-color: var(--chalk); }
.eyebrow { color: var(--amber); }
.tile.hot b, .banner.open b, .link { color: var(--amber); }

/* gradient heroes (match cards, reports) */
.hero, .gcard-hero { background: var(--grad); border: 0; box-shadow: 0 12px 33.5px rgba(123,63,228,.35); }
.hero::after { background: radial-gradient(80% 120% at 85% 0%, rgba(255,255,255,.18), transparent 55%), radial-gradient(70% 90% at 0% 100%, rgba(20,0,40,.25), transparent 60%); }
.hero .eyebrow { color: #fff; opacity: .9; }
.hero .vs-mid b, .hero .vs-mid small, .hero .vs-meta, .hero .scorers { color: rgba(255,255,255,.85); }
.ha { background: rgba(14,4,32,.35); }

/* form chips */
.form { gap: 5px; }
.form i { width: 23.5px; height: 23.5px; border-radius: 6.5px; font-size: 11px; color: #fff; }
.form .fW { background: var(--good); } .form .fD { background: var(--draw); } .form .fL { background: var(--bad); }

/* dashboard */
.dash-h { display: flex; justify-content: space-between; align-items: baseline; }
.clubcard { position: relative; overflow: hidden; border-radius: 20px; padding: 15px 13.5px 13.5px; background: var(--grad); box-shadow: 0 12px 33.5px rgba(123,63,228,.35); display: flex; flex-direction: column; gap: 12px; }
.clubcard::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(255,255,255,.22), transparent 60%), radial-gradient(50% 70% at 70% 100%, rgba(255,90,220,.25), transparent 60%); pointer-events: none; }
.clubcard > * { position: relative; }
.cc-top { display: flex; gap: 12px; align-items: center; }
.cc-badge { width: 64px; height: 64px; border-radius: 13.5px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 5px 13.5px rgba(0,0,0,.18); }
.cc-name { flex: 1; min-width: 0; }
.cc-name b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; }
.cc-name small { color: rgba(255,255,255,.85); font-size: 11.5px; }
.cc-link { align-self: flex-start; font-weight: 700; font-size: 11px; white-space: nowrap; display: flex; align-items: center; gap: 3.5px; }
.cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); padding: 10px 0; }
.cc-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cc-stats div + div { border-left: 1px solid rgba(255,255,255,.3); }
.cc-stats small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.cc-stats b { font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cc-form { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; font-weight: 600; }
.cc-conf { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 13.5px; border-radius: 25px; background: rgba(20,4,40,.42); font-weight: 700; font-size: 12px; }
.cc-conf .bar { height: 8.5px; border: 0; background: rgba(255,255,255,.18); border-radius: 5px; }
.cc-conf .bar i { background: linear-gradient(90deg, #2BD46A, #5CF08F); border-radius: 5px; }
.cc-conf b { font-size: 17px; }
.dcard { background: var(--stand); border: 1px solid rgba(255,255,255,.06); border-radius: var(--r); padding: 13.5px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dcard-h { display: flex; justify-content: space-between; align-items: center; gap: 8.5px; }
.dcard-h h2 { margin: 0; font-size: 17.5px; font-weight: 800; }
.dcard-h small { display: block; color: var(--mute); font-size: 11.5px; }
.pill { padding: 5px 12px; border-radius: 17px; background: rgba(192,43,217,.28); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pill.good { background: var(--good); color: #062812; display: inline-flex; gap: 5px; align-items: center; }
.nm { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6.5px; }
.nm-team { display: flex; align-items: center; gap: 8.5px; font-weight: 800; font-size: 13.5px; min-width: 0; }
.nm-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-team.r { flex-direction: row-reverse; text-align: right; }
.nm-mid { text-align: center; color: var(--mute); font-size: 11px; line-height: 1.5; }
.nm-mid b { display: block; font-size: 12.5px; color: var(--mute); font-weight: 600; }
.nm-form { display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: var(--mute); }
.ptable { width: 100%; border-collapse: collapse; font-size: 12px; }
.ptable th { text-transform: uppercase; text-align: left; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--mute); padding: 5px 3.5px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ptable td { padding: 6.5px 3.5px; border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap; }
.ptable td:first-child { font-weight: 700; overflow: hidden; text-overflow: ellipsis; max-width: 92.5px; }
.ptable td.ppos { color: var(--mute); }
.hb { display: flex; align-items: center; gap: 6.5px; }
.hb .bar { width: 54px; height: 6.5px; border: 0; background: rgba(255,255,255,.12); border-radius: 4px; flex: none; }
.hb .bar i { border-radius: 4px; }
.hb b { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mood { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.mood svg { width: 18.5px; height: 18.5px; flex: none; }
.mood.good { color: var(--good); } .mood.warn { color: var(--warn); } .mood.bad { color: var(--bad); }
.dlink { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12.5px; padding-top: 3.5px; }
.fin { display: grid; grid-template-columns: 1fr 1fr; }
.fin div { padding: 8.5px 5px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255,255,255,.08); min-width: 0; }
.fin div:nth-child(even) { border-left: 1px solid rgba(255,255,255,.08); padding-left: 12px; }
.fin small { color: var(--mute); font-size: 11.5px; }
.fin b { font-size: 18.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.profit { display: flex; align-items: center; gap: 6.5px; font-weight: 700; color: var(--good); border-top: 1px solid rgba(255,255,255,.08); padding-top: 8.5px; }
.profit.neg { color: var(--bad); }
.profit svg { width: 18.5px; height: 18.5px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ptable select { width: auto; min-height: 30px; padding: 5px 8.5px; border-radius: 8.5px; background: transparent; border-color: rgba(255,255,255,.4); font-weight: 700; }
.logo { text-transform: none; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; letter-spacing: -.02em; line-height: 1.05; padding-bottom: .08em; }
.logo::first-line { color: transparent; }
.logo small { -webkit-text-fill-color: var(--mute); }
.start { background: radial-gradient(90% 40% at 50% 0%, rgba(123,63,228,.35) 0%, transparent 70%), var(--night); }
.mscr { background: radial-gradient(120% 60% at 50% 0%, #3E1257 0%, var(--night) 60%); }
.mctl button:first-child { background: var(--chalk); color: var(--amber-ink); border-color: var(--chalk); }
.sheet { background: var(--stand); border-color: rgba(255,255,255,.08); }
.toast { bottom: calc(80.5px + env(safe-area-inset-bottom, 0px)); }
.nm-cond { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 12px; font-size: 11px; color: var(--mute); }
.nm-cond .warnc { color: var(--warn); font-weight: 700; }
.notes { margin: 0; padding-left: 15px; font-size: 11.5px; color: var(--mute); display: flex; flex-direction: column; gap: 3.5px; }
.notes li.warn { color: var(--warn); }
.fxt { flex: none; width: 62px; font-size: 9.5px; color: var(--mute); line-height: 1.25; }
.fxt em { display: block; font-style: normal; font-weight: 800; color: var(--amber); font-size: 8.5px; letter-spacing: .06em; }
.mcond { flex: none; text-align: center; font-size: 10px; color: var(--mute); margin-top: -3.5px; }
.dcard-h select { width: auto; flex: none; min-height: 30px; padding: 5px 8.5px; border-radius: 8.5px; background: transparent; border-color: rgba(255,255,255,.4); font-weight: 700; font-size: 11.5px; }
.dcard-h > div { min-width: 0; }
.kv .form { flex-wrap: wrap; gap: 3.5px; }
.kv .form i { width: 18.5px; height: 18.5px; font-size: 9px; border-radius: 5px; }

/* compact dashboard */
.clubcard { padding: 12px 12px 12px; gap: 9px; border-radius: 18px; }
.cc-badge { width: 52px; height: 52px; border-radius: 12px; }
.cc-name b { font-size: 18px; }
.cc-stats { padding: 7px 0; }
.cc-stats b { font-size: 24px; }
.cc-conf { padding: 7px 12px; }
.cc-conf b { font-size: 15px; }
.dcard { padding: 12px; gap: 9px; }
.dcard-h h2 { font-size: 16px; }
.nm-form { padding-top: 8px; }
.ptable td { padding: 5px 4px; }
.top { padding-block: 8px 2px; }
.top .av { width: 34px; height: 34px; }
.tabs2 button { padding: 6px 2px 7px; }
.subbar { padding-block: 6px 0; }
.main { gap: 10px; padding-block: 10px; }
.h1 { font-size: 20px; }
.bottombar { padding-block: 6px; }
.cta { padding: 8px 14px 8px 18px; font-size: 15px; }
.tbl td { padding-block: 4px; }

/* player page: rating remarks, attribute hexagon, actions */
.pov em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--chalk); margin-bottom: 3px; white-space: nowrap; }
.hex { display: block; width: 100%; max-width: 340px; margin: 0 auto; }
.hex .hx-ring { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; }
.hex .hx-shape { fill: rgba(45,226,238,.28); stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; }
.hex .hx-shape.est { stroke-dasharray: 5 4; fill: rgba(45,226,238,.14); }
.hex text { fill: var(--mute); font-size: 11px; font-weight: 600; font-family: var(--f-body); }
.hex text tspan { fill: var(--chalk); font-weight: 800; }
.back { align-self: flex-start; padding: 2px 0; }
.notes li.good { color: var(--good); }
.kv b .muted { font-style: normal; font-size: 11px; font-weight: 600; }
.kv b .link { font: inherit; color: var(--amber); text-align: left; }

/* ---------- cinematic title ---------- */
.title-screen { position: relative; height: 100%; min-height: 0; overflow: hidden; isolation: isolate; background: #0b111d; color: #fff; }
.title-photo, .title-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-photo { object-fit: cover; object-position: 50% 60%; }
.title-shade { background: linear-gradient(180deg, rgba(4,9,17,.32), transparent 38%, transparent 62%, rgba(3,8,12,.82)); }
.title-wordmark { position: absolute; top: clamp(38px, 8.5vh, 88px); left: 0; right: 0; margin: 0; text-align: center; text-shadow: 0 2px 20px rgba(0,0,0,.2); }
.title-wordmark span { display: block; font-size: clamp(38px, 10vw, 50px); font-weight: 800; letter-spacing: -.055em; line-height: 1.1; }
.title-wordmark small { display: block; margin-top: 10px; padding-left: .42em; font-size: 11px; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; }
.title-menu { position: absolute; left: 28px; right: 28px; bottom: max(30px, env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.title-play, .title-options { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.title-play { position: relative; background: #fff; color: #10151c; box-shadow: 0 5px 24px rgba(0,0,0,.12); }
.title-play svg { position: absolute; right: 18px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.title-options { border: 1px solid rgba(255,255,255,.45); background: rgba(6,12,18,.18); backdrop-filter: blur(8px); }
.title-save { margin: 3px 0 0; color: rgba(255,255,255,.7); text-align: center; font-size: 10px; }
@media (max-height: 550px) { .title-wordmark { top: 24px; } .title-menu { bottom: 14px; gap: 7px; } .title-play, .title-options { min-height: 40px; } }

.brain-modes .grow small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
.fitrow { display: grid; grid-template-columns: 1fr 70px auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06); }
.fitrow span { display: flex; flex-direction: column; min-width: 0; }
.fitrow small { color: var(--mute); font-size: 10.5px; }
/* commentary bar: newest line full width in the team's colour; goals flash */
.feed li.tc { border-left: 4px solid var(--tc); }
.feed li.fd-main { min-height: 52px; align-items: center; padding: 8px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 700; line-height: 1.25; background: rgba(48,14,66,.95); color: var(--chalk); opacity: 1; }
.feed li.fd-main.tc { background: var(--tc); color: var(--tf); border-left: 0; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.feed li.fd-main b { color: inherit; opacity: .8; width: 30px; font-size: 13px; }
.feed li.fd-main span { -webkit-line-clamp: 2; }
.feed li.fd-main.blink { animation: goalBlink .5s steps(2, jump-none) 8; font-size: 16px; }
@keyframes goalBlink { 0% { background: var(--tc); color: var(--tf); } 100% { background: #FFFFFF; color: #10061A; } }
@media (prefers-reduced-motion: reduce) { .feed li.fd-main.blink { animation: none; } }
.predbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.08); }
.predbar i { display: block; height: 100%; }
.predlbl { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin: 4px 0 6px; }
/* admin test season report */
.tbl.lab th, .tbl.lab td { white-space: nowrap; padding: 6px 6px; }
.tbl.lab td:first-child { width: auto; text-align: left; color: inherit; }
/* day-by-day calendar (dayrun.js) */
.dayrun { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: rgba(14, 4, 32, .55); }
.dr-card { width: 100%; max-width: 420px; background: var(--stand); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px 14px; box-shadow: 0 -10px 40px rgba(0,0,0,.4); margin-bottom: 64px; }
.dr-cal { width: 118px; margin: 0 auto 8px; border-radius: 14px; overflow: hidden; background: var(--chalk); color: var(--amber-ink); text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.dr-cal.flip { animation: drflip .32s ease-out; }
.dr-mon { display: block; background: var(--grad); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 0; }
.dr-day { display: block; font-size: 44px; line-height: 1.05; font-weight: 800; padding-top: 4px; }
.dr-wd { display: block; font-size: 11px; font-weight: 600; padding-bottom: 7px; color: #4B2565; }
.dr-phase { text-align: center; color: var(--mute); margin: 0 0 10px; font-size: 11.5px; }
.dr-h { margin: 6px 0 8px; font-size: 13px; }
.dr-feed { list-style: none; margin: 0 0 12px; padding: 0; min-height: 64px; }
.dr-feed li { font-size: 11.5px; padding: 4px 0; border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-feed li b { color: var(--amber); margin-right: 4px; }
.dayrun .btns { display: flex; gap: 8px; margin-top: 12px; }
.dayrun .btns .btn { flex: 1; }
@keyframes drflip { from { transform: rotateX(70deg) translateY(-6px); opacity: .3; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dr-cal.flip { animation: none; } }

/* scouting files (2026.10.21.11) */
.attrs b.unk, .pov b.unk { color: var(--mute); font-weight: 600; }
.attrs b.est { font-style: italic; opacity: .78; }
.sfile { display: grid; gap: 12px; }
.sf-tab { justify-self: start; padding: 4px 10px; border-radius: 8px 8px 0 0; background: #E9DFC6; color: #4A3F28; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: -12px; }
.sf-cover { position: relative; padding: 14px; border-radius: 0 10px 10px 10px; background: #F6F0E1; color: #2B261B; border: 1px solid #E2D6B8; }
.sf-cover p { margin: 2px 0; font-size: 13px; }
.sf-cover dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 0; }
.sf-cover dt { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.sf-cover dd { margin: 0; font-size: 12px; font-weight: 700; }
.sf-stamp { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border: 2px solid #B23A3A; border-radius: 4px; color: #B23A3A; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transform: rotate(6deg); }
.sf-know small { display: block; margin-top: 4px; }
.fsec { border-top: 1px dashed rgba(127,127,127,.35); padding-top: 10px; }
.fsec h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.fsec h4 small { font-weight: 500; opacity: .7; }
.sf-verdict { display: flex; align-items: center; gap: 12px; }
.sf-verdict small { display: block; opacity: .75; }
.sf-verdict .r { margin-left: auto; text-align: right; }
.lock { margin: 0; padding: 10px; border-radius: 8px; background: rgba(127,127,127,.1); font-size: 13px; opacity: .8; }
.seg.wrap { flex-wrap: wrap; }
.grade.g\? { background: rgba(127,127,127,.35); }

/* deals (2026.10.21.12) */
.dstages { display: flex; gap: 3px; margin: 10px 0 6px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.dstages li { flex: 1 0 auto; min-width: 46px; padding: 6px 4px 4px; border-top: 3px solid rgba(127,127,127,.3); font-size: 10px; font-weight: 600; text-align: center; opacity: .6; }
.dstages li.ok { border-color: var(--good); opacity: 1; }
.dstages li.now { border-color: var(--amber); opacity: 1; }
.dstages li.off { border-color: #F0605D; opacity: 1; }
.dstatus { margin: 4px 0 8px; font-weight: 700; }
.dstatus.warn { color: var(--amber); } .dstatus.good { color: var(--good); } .dstatus.bad { color: #F0605D; }
.dealsheet h5 { margin: 10px 0 6px; font-size: 12px; }
.dealsheet h5 small { font-weight: 500; opacity: .7; }
.memo-v { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; background: rgba(127,127,127,.12); }
.memo-v.v-proceed b { color: var(--good); } .memo-v.v-drop b { color: #F0605D; } .memo-v.v-monitor b { color: var(--amber); }
.row.deal.need { box-shadow: inset 3px 0 0 var(--amber); }
.row.deal.won small { color: var(--good); } .row.deal.lost small { opacity: .7; }
.row.tl { padding-top: 6px; padding-bottom: 6px; }
.row.tl b { font-weight: 500; font-size: 13px; }
.row.tl-you b { font-weight: 700; } .row.tl-fail b { color: #F0605D; } .row.tl-done b { color: var(--good); }
.btns.col { flex-direction: column; }

/* social feed (2026.10.21.14) */
.nviews { margin-bottom: 12px; }
.feed-s { display: grid; gap: 1px; border-radius: 12px; overflow: hidden; background: rgba(127,127,127,.18); }
.spost { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 12px; background: var(--stand); cursor: pointer; }
.spost.full { cursor: default; background: transparent; padding: 10px 0; }
.sav { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sc, #666); color: #10061A; font-size: 12px; font-weight: 800; overflow: hidden; }
.sbody header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 13px; }
.sbody header span { opacity: .6; font-size: 12px; }
.sbody .tick { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #1D9BF0; color: #fff; font-size: 9px; font-style: normal; }
.sbody p { margin: 4px 0 6px; font-size: 14px; line-height: 1.4; }
.sbody footer { display: flex; gap: 14px; font-size: 12px; opacity: .7; }
.sbody footer .rel { margin-left: auto; }
.sreplies { margin-left: 18px; padding-left: 12px; border-left: 2px solid rgba(127,127,127,.25); }
.preq { padding: 10px 0; border-top: 1px dashed rgba(127,127,127,.3); }
.preq p { margin: 0 0 4px; }
.preq .btn { display: grid; text-align: left; }
.preq .btn small { font-weight: 500; opacity: .75; }

/* deadline day (2026.10.21.16) */
.dr-cal.dl { background: linear-gradient(160deg, #7A0F2E, #2A0638); color: #fff; }
.dr-cal.dl .dr-day { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dr-cal.dl .dr-mon { color: #FFD2DD; text-transform: uppercase; letter-spacing: .08em; }
.banner.dl { border-color: #F0605D; box-shadow: 0 0 0 1px rgba(240,96,93,.4) inset; }
.banner.dl b { color: #FF8A8A; }
.dr-cal.dl .dr-wd { color: #FFD2DD; opacity: 1; }
.aiq { margin: 6px 0 8px; padding: 8px 12px; border-left: 3px solid var(--amber); background: rgba(127,127,127,.1); border-radius: 0 8px 8px 0; font-style: italic; }

/* Assistant's daily club briefing */
.assistant-compact { display: grid; gap: 5px; padding: 10px 12px; border-top: 3px solid var(--amber); }
.brief-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.brief-top h2 { margin: 0; font-size: 13px; }
.brief-top .btn { min-height: 32px; flex-shrink: 0; padding: 5px 10px; font-size: 11px; }
.brief-counts { font-size: 11px; line-height: 18px; white-space: nowrap; }
.brief-preview { display: block; width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 20px; color: var(--mute); }
.brief-preview .entity-link { display: inline; font-size: inherit; }
.assistant-report .dcard-h small { display: block; margin-top: 4px; opacity: .65; }
.brief-summary { font-size: 14px; line-height: 1.6; margin: 12px 0; }
.brief-priority { display: grid; gap: 5px; width: 100%; padding: 12px; border: 1px solid #F5C51855; border-radius: 12px; background: #F5C5180B; text-align: left; }
.brief-priority > small { color: var(--warn); }
.brief-priority > span, .brief-department > p { font-size: 12px; line-height: 1.5; opacity: .8; }
.assistant-report .lbl { margin: 12px 0 7px; font-size: 11px; }
.assistant-report .chips { flex-wrap: wrap; overflow: visible; gap: 6px; }
.assistant-report .chip { white-space: normal; text-align: left; font-size: 11px; min-height: 36px; padding: 8px 10px; }
.brief-attention .chip { border-color: #F5C51866; }
.brief-healthy .chip { border-color: #2BD46A55; }
.brief-details { margin-top: 14px; font-size: 12px; }
.brief-details summary { cursor: pointer; padding: 8px 0; }
.brief-department { display: grid; gap: 6px; width: 100%; text-align: left; padding: 12px 0; border: 0; border-bottom: 1px solid #FFFFFF12; background: transparent; }
.brief-department b { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 13px; }
.brief-department small, .brief-department .link { font-size: 11px; }
.brief-department p { margin: 0; }
.brief-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.brief-footer > small { flex: 1; min-width: 150px; opacity: .6; font-size: 10px; }
.brief-footer .link { font-size: 11px; min-height: 32px; }

/* Rulebook shape rehearsal */
.shape-controls { display: flex; gap: 6px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.shape-controls select { flex: 1; min-width: 140px; width: auto; }
.shape-controls .btn { min-height: 36px; padding: 7px 10px; font-size: 11px; }
.shape-stage { position: relative; border-radius: 14px; overflow: hidden; background: #123d30; }
#shapePitch { display: block; width: 100%; height: min(50vh, 460px); min-height: 280px; touch-action: none; }
.shape-caption { position: absolute; bottom: 0; width: 100%; padding: 5px 8px; background: #102b24e8; color: #e4eee9; font-size: 10px; text-align: center; pointer-events: none; }
.shape-help { font-size: 10px; line-height: 1.5; margin: 8px 0; }
.shape-readout { font-size: 12px; }
.shape-readout p { margin: 6px 0; font-size: 11px; }
.shape-readout small { font-size: 10px; opacity: .75; line-height: 1.5; }

/* Shared UI motion: immediate press, short release, and quiet view changes. */
:root { --motion-press: 80ms; --motion-enter: 160ms; --motion-ease: cubic-bezier(.2,.8,.2,1); }
button:not(.tok) { touch-action: manipulation; transition: filter var(--motion-press) ease, background-color 120ms ease, border-color 120ms ease, transform var(--motion-press) ease; }
button:not(.tok):not(:disabled):active { filter: brightness(.86); transition-duration: 0s; }
.btn:not(:disabled):active, .cta:not(:disabled):active, .chip:not(:disabled):active, .iconbtn:not(:disabled):active, .sh-x:not(:disabled):active { transform: translateY(1px); }
@media (hover:hover) and (pointer:fine) {
  .row.act:not(:disabled):hover { background: rgba(255,255,255,.04); }
  button:not(.tok):not(:disabled):hover { filter: brightness(1.1); }
  button:not(.tok):not(:disabled):active { filter: brightness(.86); }
}
.ui-enter { animation: uiEnter var(--motion-enter) var(--motion-ease); }
@keyframes uiEnter { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sheet-exit { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.sheet-exit .sheet, .sheet-exit .scrim { animation: none; }
.toast { transition: opacity 160ms ease, transform 160ms var(--motion-ease); }
@media (prefers-reduced-motion:reduce) {
  button:not(.tok), .tok, .toast, .pbar i { transition: none; }
  .ui-enter, .sheet, .scrim, .feed li, .dr-cal.flip { animation: none; }
  .btn:not(:disabled):active, .cta:not(:disabled):active, .chip:not(:disabled):active, .iconbtn:not(:disabled):active, .sh-x:not(:disabled):active { transform: none; }
}

/* Live match views share one viewport; changing tabs never replaces the canvas. */
.match-tabs { position: relative; flex: none; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8.5px; background: var(--night); }
.match-tabs button { flex: 1; min-width: 0; min-height: 30px; border: 0; border-radius: 6px; background: transparent; padding: 5px 2px; color: var(--mute); font-size: 10px; font-weight: 600; }
.match-tabs button.on { background: var(--stand2); color: var(--chalk); box-shadow: inset 0 0 0 1px var(--amber); }
.match-ends { flex: none; margin: 0; text-align: center; font-size: 10px; color: var(--mute); }
.match-viewport { flex: 1; min-height: 0; min-width: 0; position: relative; display: flex; overflow: hidden; }
.match-view-panel { flex: 1; min-width: 0; min-height: 0; width: 100%; }
.match-view-panel[hidden] { display: none !important; }
.match-data-panel { overflow: auto; overscroll-behavior: contain; padding: 4px 2px 8px; }
.match-team { margin-bottom: 14px; min-width: 0; }
.match-team h3 { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 8px 0 4px; font-size: 13px; }
.match-team h3 small { color: var(--mute); font-size: 10px; font-weight: 500; }
.match-team .muted { font-size: 10px; }
/* Both teams stay alongside each other even on phones. */
.match-lineup-hint { margin: 0 0 5px; color: var(--mute); font-size: 10px; }
.match-lineups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.match-lineups .match-team h3 { flex-wrap: nowrap; font-size: 11px; margin: 3px 0; }
.match-lineups .match-team h3 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-lineups .match-team > .muted { margin: 0 0 5px; font-size: 9px; }
.match-lineups .lbl { margin: 7px 0 3px; font-size: 9px; }
.match-lineups .list { border-radius: 6px; }
.match-lineup-player, .match-lineups .match-empty { width: 100%; height: 28px; min-height: 28px; padding: 3px; gap: 3px; text-align: left; border-radius: 0; }
.match-lineup-player .pos, .match-lineups .match-empty .pos { width: 20px; padding: 2px 0; font-size: 8px; border-radius: 3px; }
.match-player-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; }
.match-player-captain, .match-player-injury, .match-player-state { flex: none; font-size: 8px; white-space: nowrap; }
.match-player-captain { text-decoration: none; color: var(--mute); }
.match-player-cards:empty, .match-player-injury:empty { display: none; }
.match-player-cards { flex: none; font-size: 12px; line-height: 1; }
.match-lineup-player .live-health { flex: none; display: block; min-width: 25px; text-align: right; margin: 0; }
.match-lineup-player .live-health > b { font-size: 9px; }
.match-lineup-player .live-fatigue, .match-lineup-player .live-condition-bar { display: none; }
.match-team-pitch { height: 330px; aspect-ratio: auto; margin: 4px 0; }
.match-team-pitch .tk-c { background: var(--team-color) !important; color: var(--team-ink); font-size: 11px; }
.match-stats { background: var(--stand); border: 1px solid var(--line); border-radius: 8px; padding: 9px; }
.mscr .mctl { grid-template-columns: repeat(4,minmax(0,1fr)); }
/* Larger touch targets for the match controls. */
.mscr .feed li > span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mscr .mctl { gap: 5px; }
.mscr .mctl button { min-height: 44px; padding: 6px 2px; font-size: 11px; }
@media(min-width:700px){ .match-formations { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }

/* Substitution decisions show live condition and mood for starters and bench. */
.live-sub-player { gap: 7px; min-height: 48px; }
.live-sub-info { min-width: 0; }
.live-sub-info > b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.live-sub-info > small { display: block; color: var(--mute); font-size: 10px; line-height: 1.5; }
.live-morale { white-space: nowrap; }
.match-lineup-player > .live-morale { flex: none; font-size: 11px; line-height: 1; }
.live-sub-out { margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--stand); }
.live-sub-player .live-health { flex: none; }
.live-sub-player:disabled { opacity: 1; }

.world-alert-story { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; }
.world-alert-close { flex: none; color: var(--mute); font-size: 17px; padding: 3px 5px; line-height: 1; }

/* ---------- newspaper stories (newspaper.js) ---------- */
:root { --paper: #EFE7D6; --paper-ink: #17130F; --paper-mute: #5B5247; --f-paper: 'Playfair Display', Georgia, 'Times New Roman', serif; --f-tab: 'Oswald', 'Arial Narrow', Impact, sans-serif; }
.paper { --acc: #1F3A68; --acc-ink: #fff; display: block; background: var(--paper); color: var(--paper-ink); border-radius: 6px; padding: 12px 14px 10px; box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.25); text-align: left; }
.paper.p-club { --acc: #8E1B1B; } .paper.p-match { --acc: #E3B43A; --acc-ink: #17130F; } .paper.p-transfer { --acc: #2E5E3A; } .paper.p-life { --acc: #C4502E; } .paper.p-league { --acc: #1F3A68; }
.paper .mast { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--paper-ink); box-shadow: 0 3px 0 -1px var(--acc); }
.paper .mast b { font-family: var(--f-paper); font-weight: 800; font-size: 21px; letter-spacing: -.01em; line-height: 1; font-variant: small-caps; }
.paper .mast small { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-mute); text-align: right; line-height: 1.3; }
.paper .psec { display: inline-block; margin: 10px 0 8px; padding: 3px 8px; background: var(--acc); color: var(--acc-ink); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.paper .pimg { position: relative; margin: 0 0 9px; aspect-ratio: 16 / 9; overflow: hidden; background: #2b2620; border-radius: 2px; }
.paper .pimg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) sepia(.28) contrast(1.06); }
.paper .pimg::after { content: ''; position: absolute; inset: 0; background: var(--tint); mix-blend-mode: color; opacity: .3; pointer-events: none; }
.paper .phead { margin: 0; font-family: var(--f-paper); font-weight: 800; font-size: 27px; line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.paper.p-match .phead { font-family: var(--f-tab); font-weight: 700; text-transform: uppercase; font-size: 30px; letter-spacing: 0; line-height: .98; }
.paper.p-life .phead { font-style: italic; }
.paper .pstand { margin: 6px 0 0; font-family: var(--f-paper); font-size: 14px; line-height: 1.3; color: var(--paper-ink); }
.paper .pscore { display: flex; align-items: stretch; margin-top: 10px; font-family: var(--f-tab); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }
.paper .pscore span { flex: 1; padding: 6px 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paper .pscore b { flex: none; padding: 6px 12px; background: var(--paper-ink); color: var(--paper); font-size: 15px; }
.paper .pfoot { margin-top: 9px; padding-top: 6px; border-top: 1px solid rgba(23,19,15,.25); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-mute); }
.paper.in-sheet { margin: -2px 0 10px; box-shadow: none; }
.lead-story { display: block; margin: 4px 0 12px; cursor: pointer; border-radius: 6px; }
.lead-story:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.row.story .grow b { font-family: var(--f-paper); font-weight: 700; font-size: 15px; line-height: 1.15; }
.row.story .grow small:not(.pmini):not(.muted) { color: var(--chalk); opacity: .82; }
.pmini { display: block; margin-bottom: 2px; font-family: var(--f-paper); font-variant: small-caps; font-weight: 800; font-size: 11px; letter-spacing: .02em; color: #9FB4E0; }
.pmini.p-club { color: #F08A8A; } .pmini.p-match { color: #F2C65A; } .pmini.p-transfer { color: #7FD39A; } .pmini.p-life { color: #F39A78; } .pmini.p-league { color: #9FB4E0; }
@media (max-width: 360px) { .paper .mast small { display: none; } .paper .phead { font-size: 24px; } .paper.p-match .phead { font-size: 26px; } }
/* Admin players dashboard */
.dash-kv { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dash-kv .dash-sub { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500; }
.dash-chart { width: 100%; height: auto; display: block; margin-top: 10px; }
.dash-chart .dash-grid { stroke: var(--line); stroke-width: 1; }
.dash-chart .dash-ax { fill: var(--mute); font-size: 11px; font-family: var(--f-body); }
.dash-chart .dash-bar path { fill: var(--amber); }
.dash-chart .dash-bar:hover path { fill: var(--chalk); }