/* Inter, served from this server (no Google Fonts request: visitors' IPs stay here – GDPR) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Ko igra danas? – design tokens (light / dark), layout and components */
:root {
  --bg: #eef1f6;
  --card: #ffffff;
  --card-2: #f6f8fb;
  --ink: #0d1526;
  --ink-2: #334155;
  --muted: #6b7a90;
  --line: #e3e8ef;
  --navy: #0a1a33;
  --navy-2: #13284a;
  --brand: #1d4ed8;
  --brand-soft: #e6eeff;
  --accent: #f6c90e;
  --accent-ink: #0a1a33;
  --gold-soft: #fff8db;
  --green: #16a34a;
  --green-soft: #dcfce7;
  --red: #e11d48;
  --red-soft: #ffe4e8;
  --amber: #b45309;
  --amber-soft: #fef3c7;
  --indigo-soft: #e0e7ff;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(13, 21, 38, .05), 0 6px 20px -12px rgba(13, 21, 38, .22);
  --shadow-lg: 0 24px 60px -24px rgba(13, 21, 38, .45);
  --tabbar-h: 62px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070d19;
    --card: #111a2c;
    --card-2: #172238;
    --ink: #eef2f8;
    --ink-2: #c5cfdd;
    --muted: #8a97ab;
    --line: #22304a;
    --navy: #050b16;
    --navy-2: #121e35;
    --brand: #7aa2ff;
    --brand-soft: #1a2a4d;
    --gold-soft: #2a2410;
    --green-soft: #0f2e1d;
    --red-soft: #3a1220;
    --amber: #fbbf24;
    --amber-soft: #33270b;
    --indigo-soft: #232b55;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #070d19;
    --card: #111a2c;
    --card-2: #172238;
    --ink: #eef2f8;
    --ink-2: #c5cfdd;
    --muted: #8a97ab;
    --line: #22304a;
    --navy: #050b16;
    --navy-2: #121e35;
    --brand: #7aa2ff;
    --brand-soft: #1a2a4d;
    --gold-soft: #2a2410;
    --green-soft: #0f2e1d;
    --red-soft: #3a1220;
    --amber: #fbbf24;
    --amber-soft: #33270b;
    --indigo-soft: #232b55;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; }
a { color: var(--brand); }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 16px; }
button, .wk-row, [data-player] { transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; }
button:active, .wk-row:active { transform: scale(.97); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- header and tab bar ---- */
.top { background: var(--navy); color: #fff; padding: calc(10px + env(safe-area-inset-top, 0)) 0 6px; }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { width: 34px; height: 34px; flex: none; }
.brand-name { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; margin: 0; line-height: 1; }
.wordmark { display: block; height: 36px; width: auto; }
.brand-sub { font-size: .78rem; color: #9fb0cc; }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.install { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .8rem; height: 34px; padding: 0 12px; border-radius: 99px; }
.install svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.langs { display: flex; gap: 2px; background: rgba(255,255,255,.08); padding: 3px; border-radius: 99px; flex: none; }
.langs button { border: 0; background: none; color: #9fb0cc; font-size: .74rem; font-weight: 800; padding: 6px 9px; border-radius: 99px; letter-spacing: .02em; }
.langs button.on { background: #fff; color: var(--navy); }

.tabbar { position: sticky; top: 0; z-index: 30; background: var(--navy); padding: 4px 0 10px; box-shadow: 0 10px 24px -18px rgba(0,0,0,.6); }
.tabbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tabbar button { border: 0; background: none; color: #9fb0cc; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: 14px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.tabbar button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button.on { background: rgba(255,255,255,.1); color: #fff; }
.tabbar button.on svg { stroke: var(--accent); }

/* ---- country picker (only with more than one country) ---- */
.controls { margin: 14px 0 0; }
.controls:has(.picker[hidden]) { display: none; }
.picker { position: relative; }
.picker-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow); text-align: left; }
.flag { width: 30px; height: 21px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: none; }
.picker-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.picker-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.picker-name { font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }
.picker-panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow: hidden; }
.picker-panel input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; font: inherit; font-size: 1rem; outline: none; background: var(--card); color: var(--ink); }
.picker-panel ul { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 420px); overflow-y: auto; }
.picker-panel li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.picker-panel li:hover, .picker-panel li.on { background: var(--brand-soft); }
.picker-panel li.group { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; cursor: default; padding-top: 10px; }
.picker-panel li.group:hover { background: none; }

/* ---- segmented controls ---- */
.segmented { display: inline-flex; align-items: center; gap: 2px; background: var(--card-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.seg-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; padding: 0 6px 0 9px; }
.segmented button { border: 0; background: none; min-width: 38px; padding: 7px 12px; border-radius: 99px; font-weight: 700; font-size: .86rem; color: var(--ink-2); }
.segmented button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(13,21,38,.15); }
.segmented.small button { padding: 5px 10px; font-size: .8rem; }

/* ---- hero ---- */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
#hero-body { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hero-flag { width: 54px; height: 54px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 10px rgba(13,21,38,.18)); }
.hero-text { min-width: 0; }
.hero h1 { margin: 0; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.025em; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hchip { font-size: .76rem; font-weight: 700; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); padding: 3px 9px; border-radius: 99px; }
.hchip.live { color: #fff; background: var(--red); border-color: var(--red); }
.hchip.live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #fff; vertical-align: 1px; animation: pulse 1.4s infinite; }

/* ---- progress / error ---- */
.progress, .error { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin: 16px 0; text-align: center; }
.progress-bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), #60a5fa); transition: width .6s; }
.progress p { margin: 12px 0 0; font-weight: 600; }
.progress .hint { font-weight: 400; color: var(--muted); font-size: .9rem; }
.error p { margin: 0 0 12px; font-weight: 600; color: var(--ink-2); }
.btn { border: 0; background: var(--navy); color: #fff; padding: 11px 18px; border-radius: 14px; font-weight: 700; }
.btn.ghost { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; text-decoration: none; font-weight: 700; font-size: .82rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); padding: 7px 12px; border-radius: 99px; box-shadow: var(--shadow); }
.pill-btn svg { width: 17px; height: 17px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- section headings ---- */
.day h2, .group-pos h2, .rank h2 { display: flex; align-items: center; gap: 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 26px 4px 10px; font-weight: 800; }
.count { font-size: .72rem; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; letter-spacing: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 4px 10px; }
.sec-head h2 { font-size: 1.1rem; margin: 0; letter-spacing: -.02em; }
.sec-sub { margin: 2px 0 0; color: var(--muted); font-size: .8rem; font-weight: 600; }
.sec-note { margin: 0 4px 10px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.empty { color: var(--muted); margin: 6px 4px 0; }
.empty.small { margin: 6px 0 0; font-size: .9rem; }
.empty-box, .form-note { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; background: var(--card); border: 1px dashed var(--line); padding: 12px 14px; border-radius: var(--radius-sm); }
.form-note { margin: 14px 0 0; }
.plan-note { margin: 18px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--amber-soft); color: var(--amber); font-size: .88rem; font-weight: 600; }

/* ---- weekend plan (carousel) ---- */
.weekend { margin: 18px 0 2px; }
.wk-scroller { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 12px; scrollbar-width: none; overscroll-behavior-x: contain; }
.wk-scroller::-webkit-scrollbar { display: none; }
.wk-card { flex: 0 0 min(84%, 320px); scroll-snap-align: start; scroll-margin-left: 16px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 12px 6px; display: flex; flex-direction: column; }
.wk-card header { display: flex; align-items: baseline; gap: 6px; padding: 0 4px 8px; }
.wk-day { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wk-time { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; }
.wk-clash { margin-left: auto; align-self: center; font-style: normal; font-size: .7rem; font-weight: 800; color: var(--amber); background: var(--amber-soft); padding: 3px 8px; border-radius: 99px; }
.wk-clash::before { content: '⚡ '; }
.wk-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 10px; }
.wk-row:hover { background: var(--card-2); }
.wk-logos { display: grid; gap: 4px; grid-area: 1 / 1; }
.wk-logos img { width: 20px; height: 20px; object-fit: contain; }
.wk-teams { grid-area: 1 / 2; display: grid; gap: 4px; font-size: .88rem; font-weight: 600; min-width: 0; line-height: 20px; }
.wk-teams span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-who { display: flex; grid-area: 1 / 3; }
.wk-who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--card-2); border: 2px solid var(--card); margin-left: -10px; }
.wk-who img:first-child { margin-left: 0; }
.wk-who .wk-crest { border-radius: 0; border: 0; object-fit: contain; background: none; }
.wk-names { grid-area: 2 / 2 / 3 / 4; font-size: .76rem; font-weight: 700; color: var(--brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-names .b { margin-left: 4px; }

/* ---- match cards ---- */
.match { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 10px; position: relative; overflow: hidden; scroll-margin-top: calc(var(--tabbar-h) + 24px); }
.match.national { background: linear-gradient(135deg, var(--gold-soft), var(--card) 55%); }
.match.national::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.match.is-live { box-shadow: 0 0 0 1.5px var(--red), var(--shadow); }
.match.flash, .wk-card.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent), var(--shadow); } 100% { box-shadow: var(--shadow); } }
.when { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; padding-right: 12px; border-right: 1px solid var(--line); }
.time { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; }
.time.live-min { color: var(--red); }
.time.live-ht { color: var(--red); font-size: 1.05rem; }
.live-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .06em; color: var(--red); text-transform: uppercase; }
.live-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.tag { font-size: .68rem; font-weight: 700; color: var(--muted); background: var(--card-2); padding: 2px 7px; border-radius: 99px; }
.tag.live { color: var(--red); background: var(--red-soft); }
.tag.warn { color: var(--amber); background: var(--amber-soft); }
.league { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); font-weight: 600; flex-wrap: wrap; }
.league img { width: 16px; height: 16px; object-fit: contain; }
.badge { background: var(--accent); color: var(--accent-ink); font-size: .64rem; font-weight: 800; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; }
.badge.derby { background: var(--red-soft); color: var(--red); margin-left: 2px; }
.teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 9px 0 11px; }
.team { display: flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.team:last-child { flex-direction: row-reverse; text-align: right; }
.team .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg { display: none; }
.team img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.team.ours { font-weight: 800; }
.vs { color: var(--muted); font-size: .8rem; font-weight: 700; }
.score { font-weight: 800; font-size: 1.05rem; background: var(--navy); color: #fff; padding: 3px 11px; border-radius: 10px; }
.who { display: flex; flex-wrap: wrap; gap: 6px; }
.who:has(.badges) { flex-direction: column; align-items: flex-start; }
.chip { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; max-width: 100%; gap: 6px; background: var(--brand-soft); color: var(--ink); padding: 3px 10px 3px 3px; border-radius: 99px; font-size: .86rem; font-weight: 700; }
.chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #fff; }
.chip img.cl { width: 16px; height: 16px; border-radius: 0; object-fit: contain; background: none; flex: none; margin-left: -1px; }
.chip .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip small { color: var(--muted); font-weight: 700; font-size: .68rem; }
.chip.squad { background: var(--gold-soft); padding-left: 5px; }
.chip.squad img { border-radius: 0; object-fit: contain; width: 22px; height: 22px; background: none; }
.pl { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; max-width: 100%; }
.pl .chip { flex: none; }
.pl.on-pitch .chip img:not(.cl) { box-shadow: 0 0 0 2px #22c55e; }
.badges, .g-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.g-badges { grid-column: 2; display: flex; }
.b { font-style: normal; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--card-2); color: var(--ink-2); white-space: nowrap; line-height: 1.2; }
.b.ok { background: var(--green-soft); color: var(--green); }
.b.muted { color: var(--muted); }
.b.goal { background: var(--gold-soft); color: var(--ink); }
.b.warn { background: var(--amber-soft); color: var(--amber); }
.b.derby { background: var(--red-soft); color: var(--red); }
.b.card { position: relative; padding-left: 16px; }
.b.card::before { content: ''; position: absolute; left: 6px; top: 50%; width: 6px; height: 9px; border-radius: 1px; transform: translateY(-50%); }
.b.card.y::before { background: #facc15; }
.b.card.r::before { background: #dc2626; }

.yesterday, .idle { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px 14px; margin: 22px 0 8px; }
.yesterday summary, .idle summary { cursor: pointer; font-weight: 700; color: var(--ink-2); padding: 12px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.yesterday summary::-webkit-details-marker, .idle summary::-webkit-details-marker { display: none; }
.yesterday summary::after, .idle summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .2s; }
.yesterday[open] summary::after, .idle[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.yesterday .match { box-shadow: none; border: 1px solid var(--line); }
.idle ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.idle li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.club { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .86rem; font-weight: 600; }
.club img { width: 18px; height: 18px; object-fit: contain; }

/* ---- form ---- */
.form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.form-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--muted); }
.fboxes { display: flex; gap: 6px; flex-wrap: wrap; }
.fbox { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 54px; padding: 6px 7px; border-radius: 12px; background: var(--card-2); }
.fbox img { width: 18px; height: 18px; object-fit: contain; }
.fbox small { font-size: .64rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.fbox.dnp { opacity: .6; }
.rt { font-size: .76rem; font-weight: 800; padding: 2px 6px; border-radius: 7px; color: #fff; background: #94a3b8; }
.rt.top { background: #15803d; } .rt.good { background: #65a30d; } .rt.mid { background: #d97706; } .rt.low { background: #dc2626; }
.rt.none { background: var(--line); color: var(--ink-2); }
.dnp .rt { background: none; color: var(--muted); padding: 0; font-weight: 700; }
.form-sum { font-size: .8rem; color: var(--muted); font-weight: 600; }
.form-empty { font-size: .82rem; color: var(--muted); margin: 8px 0 0; }

/* ---- by player ---- */
.player { display: flex; gap: 14px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 10px; }
.photo { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: var(--card-2); flex: none; }
.p-main { min-width: 0; flex: 1; }
.p-name { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.p-name small { color: var(--muted); font-weight: 600; }
.games { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.games li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 4px 10px; align-items: center; font-size: .88rem; padding: 8px 10px; background: var(--card-2); border-radius: 12px; }
.games li.national { background: var(--gold-soft); }
.g-when { font-weight: 700; }
.g-opp { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.g-opp img { width: 18px; height: 18px; object-fit: contain; }
.g-opp small { color: var(--muted); }
.g-league { grid-column: 2; color: var(--muted); font-size: .76rem; }
.cand-intro { margin: -4px 4px 10px; color: var(--muted); font-size: .85rem; }
.cand-note { margin: 8px 0 0; font-size: .84rem; color: var(--ink-2); }
.cand-note a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.candidates .player { box-shadow: inset 0 0 0 1.5px var(--indigo-soft), var(--shadow); }
.cand-tag { font-style: normal; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #4f46e5; background: var(--indigo-soft); padding: 2px 6px; border-radius: 99px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cand-tag { color: #a5b4fc; }
}
:root[data-theme="dark"] .cand-tag { color: #a5b4fc; }


/* ---- line-up ---- */
.lineup-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 6px; }
.cand-toggle { font-size: .84rem; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lineup-note { margin: 8px 4px 12px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.lineup-note b { color: var(--ink-2); }
.pitch { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 8px; border-radius: var(--radius); overflow: hidden;
  background: repeating-linear-gradient(180deg, #1d8a4b 0 46px, #197d43 46px 92px); box-shadow: var(--shadow); }
.pitch::before { content: ''; position: absolute; inset: 10px; border: 2px solid rgba(255,255,255,.3); border-radius: 12px; pointer-events: none; }
.pitch::after { content: ''; position: absolute; left: 50%; top: 10px; width: 120px; height: 46px; transform: translateX(-50%); border: 2px solid rgba(255,255,255,.3); border-top: 0; pointer-events: none; }
.pitch-line { position: relative; display: flex; justify-content: space-evenly; gap: 4px; z-index: 1; }
.lp { display: flex; flex-direction: column; align-items: center; width: 84px; text-align: center; color: #fff; }
.lp-photo { position: relative; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.2); border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.lp-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; }
.lp-photo .rt { position: absolute; right: -10px; bottom: -4px; font-size: .68rem; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.lp-name { margin-top: 5px; font-size: .76rem; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.5); line-height: 1.15; }
.lp-club { font-size: .62rem; opacity: .85; line-height: 1.1; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp.empty .lp-photo { border-style: dashed; box-shadow: none; }
.lp.doubtful .lp-photo { border-color: #facc15; }
.lp-flag { position: absolute; left: -8px; top: -4px; font-style: normal; font-weight: 800; font-size: .7rem; background: #facc15; color: var(--navy); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.rank ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: r; }
.rank li { counter-increment: r; display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; background: var(--card); border-radius: var(--radius-sm); padding: 9px 12px; box-shadow: var(--shadow); }
.rank li::before { content: counter(r); color: var(--muted); font-weight: 800; font-size: .82rem; text-align: right; }
.rank li.in-xi { box-shadow: inset 3px 0 0 #22c55e, var(--shadow); }
.rank li img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.r-name { font-weight: 700; display: flex; flex-direction: column; min-width: 0; }
.r-name small { color: var(--muted); font-weight: 600; font-size: .76rem; }
.r-stats { color: var(--muted); font-size: .76rem; font-weight: 600; text-align: right; }
.st-tag { font-style: normal; font-size: .6rem; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 99px; background: var(--amber-soft); color: var(--amber); }
.st-tag.suspended { background: var(--red-soft); color: var(--red); }

/* ---- statistics ---- */
.subnav { position: sticky; top: var(--tabbar-h); z-index: 20; display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 12px 16px 8px; background: linear-gradient(var(--bg) 75%, transparent); scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav button { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-weight: 700; font-size: .8rem; padding: 7px 13px; border-radius: 99px; }
.stat-sec { margin-top: 20px; scroll-margin-top: calc(var(--tabbar-h) + 56px); }
.week-nav { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .82rem; color: var(--ink-2); }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 1.15rem; font-weight: 800; color: var(--ink); line-height: 1; }
.icon-btn:disabled { opacity: .35; }
.potw { position: relative; overflow: hidden; background: linear-gradient(135deg, #0a1a33, #1a3d7c); color: #fff; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.potw::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; background: var(--accent); opacity: .9; transform: rotate(45deg); }
.potw-top { position: relative; z-index: 1; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.potw-photo { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--accent); background: #fff; object-fit: cover; }
.potw-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.potw .club { color: #cbd5e1; }
.potw-line { font-size: .8rem; color: #e2e8f0; margin-top: 4px; }
.potw-rating { font-size: 1.6rem; font-weight: 800; padding: 6px 12px; border-radius: 14px; background: #64748b; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.potw-rating.top { background: #15803d; } .potw-rating.good { background: #65a30d; } .potw-rating.mid { background: #d97706; } .potw-rating.low { background: #dc2626; }
.potw-games { position: relative; z-index: 1; list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.15); display: grid; gap: 6px; font-size: .84rem; }
.potw-games li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.potw-games img { width: 18px; height: 18px; background: #fff; border-radius: 4px; }
.potw-games .rt { margin-left: auto; }
.potw-games .b.goal { background: rgba(246, 201, 14, .2); color: #fde68a; }
.share-btn { margin-top: 10px; width: 100%; background: var(--accent); color: var(--accent-ink); }
.potw-rest, .signals, .board ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.potw-rest li, .signals li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--card); border-radius: var(--radius-sm); padding: 9px 12px; box-shadow: var(--shadow); }
.potw-rest img, .signals img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.potw-rest span, .signals li > span:nth-child(2) { display: flex; flex-direction: column; font-weight: 700; min-width: 0; }
.potw-rest small, .signals small { color: var(--muted); font-weight: 600; font-size: .76rem; }
.signals li { grid-template-columns: 36px minmax(0, 1fr); }
.signals .sig-text { grid-column: 2; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.sig.bad { box-shadow: inset 3px 0 0 var(--red), var(--shadow); } .sig.warn { box-shadow: inset 3px 0 0 #d97706, var(--shadow); } .sig.good { box-shadow: inset 3px 0 0 var(--green), var(--shadow); }
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.board { background: var(--card); border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow); }
.board h3 { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.board ol { counter-reset: b; gap: 6px; }
.board li { counter-increment: b; display: grid; grid-template-columns: 16px 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .88rem; font-weight: 600; }
.board li::before { content: counter(b); color: var(--muted); font-size: .76rem; font-weight: 800; }
.board li img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.board li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li b { font-weight: 800; }
.board li:first-child b { color: var(--green); }
.cmp-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 10px; }
.cmp-pick select { width: 100%; font: inherit; font-size: .88rem; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }
.cmp-pick span { color: var(--muted); font-weight: 800; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; font-size: .88rem; }
.cmp td, .cmp th { padding: 8px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; }
.cmp tbody th { color: var(--muted); font-weight: 600; font-size: .76rem; }
.cmp td { font-weight: 700; width: 32%; }
.cmp td.win { color: var(--green); background: var(--green-soft); }
.cmp-head { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; }
.cmp-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.cmp-head small { color: var(--muted); font-weight: 600; font-size: .72rem; }
.table-wrap { overflow-x: auto; background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.season { width: 100%; border-collapse: collapse; font-size: .85rem; }
.season th, .season td { padding: 8px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.season tr:last-child th, .season tr:last-child td { border-bottom: 0; }
.season thead th { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.season tbody th { text-align: left; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.season tbody th img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--card-2); }

/* ---- form graph ---- */
.graph { background: var(--card-2); border-radius: var(--radius-sm); padding: 10px 8px 6px; margin-bottom: 10px; }
.graph svg { width: 100%; height: auto; display: block; }
.g-bar { fill: var(--brand-soft); } .g-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.g-grid { stroke: var(--line); stroke-dasharray: 3 3; } .g-axis, .g-label { font-size: 9px; fill: var(--muted); }
.g-dot { stroke: var(--card); stroke-width: 2; fill: #94a3b8; }
.g-dot.top { fill: #15803d; } .g-dot.good { fill: #65a30d; } .g-dot.mid { fill: #d97706; } .g-dot.low { fill: #dc2626; }
.graph-legend { margin: 2px 4px 0; font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.lg-line { width: 14px; height: 3px; background: var(--brand); border-radius: 2px; } .lg-bar { width: 10px; height: 10px; background: var(--brand-soft); border-radius: 2px; margin-left: 8px; }

/* ---- bottom sheets ---- */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(5, 11, 22, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; padding: 12px; animation: fade .2s ease; }
.sheet-box { position: relative; background: var(--card); border-radius: 26px; padding: 26px 20px calc(16px + env(safe-area-inset-bottom, 0)); width: min(440px, 100%); text-align: center; box-shadow: var(--shadow-lg); animation: rise .28s cubic-bezier(.2, .9, .3, 1.1); }
.sheet-box::before { content: ''; position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 99px; background: var(--line); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.sheet-icon { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 16px; }
.sheet-box h3 { margin: 0 0 12px; font-size: 1.15rem; }
.sheet-box ol { text-align: left; margin: 0 0 16px; padding-left: 22px; line-height: 1.9; font-weight: 500; }
.sheet-box .share { width: 20px; height: 20px; vertical-align: -4px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sheet-box .btn { width: 100%; padding: 13px; }
.player-box { text-align: left; width: min(560px, 100%); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }
.ps-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.ps-head > img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.ps-head h3 { margin: 0; letter-spacing: -.02em; }
.ps-head p { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: .88rem; }
.ps-head p img { width: 18px; height: 18px; object-fit: contain; }
.player-box h4 { margin: 8px 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ps-list { display: grid; gap: 8px; }
.ps-row { background: var(--card-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.ps-row.dnp { opacity: .75; }
.ps-top { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.ps-date { color: var(--muted); font-weight: 700; font-size: .78rem; white-space: nowrap; }
.ps-opp { display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; flex: 1; }
.ps-opp img { width: 18px; height: 18px; object-fit: contain; }
.ps-opp small { color: var(--muted); font-weight: 600; }
.ps-score { font-weight: 800; }
.ps-stats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.ps-stats .b { background: var(--card); }
.player-box .btn { width: 100%; margin-top: 12px; }
.player-box .btn.ghost { margin: 10px 0 0; }
[data-player] { cursor: pointer; }

.foot { color: var(--muted); font-size: .76rem; padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0)); margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; text-align: center; }

@media (hover: hover) {
  .match:hover, .player:hover, .rank li:hover, .potw-rest li:hover, .signals li:hover { box-shadow: 0 1px 2px rgba(13,21,38,.06), 0 12px 28px -14px rgba(13,21,38,.35); }
  .tabbar button:hover:not(.on) { color: #fff; }
}

@media (max-width: 560px) {
  .brand-sub { display: none; }
  .install span { display: none; }
  .install { width: 34px; padding: 0; justify-content: center; }
  .match { grid-template-columns: 52px minmax(0, 1fr); padding: 12px 12px 12px 10px; gap: 10px; }
  .when { padding-right: 8px; }
  .time { font-size: 1.1rem; }
  /* One row per team, its goals at the right end (like livescore apps) */
  .teams { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .team:last-child { flex-direction: row; text-align: left; }
  .team .tn { flex: 1; }
  .teams .vs, .teams .score { display: none; }
  .tg { display: block; min-width: 28px; text-align: center; font-size: 1rem; font-weight: 800; background: var(--navy); color: #fff; border-radius: 8px; padding: 1px 6px; }
  .games li { grid-template-columns: minmax(0, 1fr); }
  .g-league { grid-column: 1; }
  .pl:has(.badges .b) .chip small { display: none; }
  .b { padding: 2px 7px; font-size: .7rem; }
  .hero h1 { font-size: 1.3rem; }
  .hero-flag { width: 46px; height: 46px; }
  .lp { width: 66px; } .lp-photo { width: 44px; height: 44px; } .lp-club { display: none; }
  .rank li { grid-template-columns: 20px 32px minmax(0, 1fr) auto; } .r-stats { display: none; }
  .season th:nth-child(3), .season td:nth-child(3) { display: none; }
  .season th, .season td { padding: 8px 5px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg, :root:not([data-theme="light"]) .score { background: #2a3a5c; }
  :root:not([data-theme="light"]) .chip img, :root:not([data-theme="light"]) .potw-photo { background: #e8edf5; }
  :root:not([data-theme="light"]) .match.national { background: linear-gradient(135deg, #2a2410, var(--card) 60%); }
}
:root[data-theme="dark"] .tg, :root[data-theme="dark"] .score { background: #2a3a5c; }
:root[data-theme="dark"] .chip img, :root[data-theme="dark"] .potw-photo { background: #e8edf5; }
:root[data-theme="dark"] .match.national { background: linear-gradient(135deg, #2a2410, var(--card) 60%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (min-width: 760px) {
  .wk-scroller { flex-wrap: wrap; align-items: flex-start; overflow: visible; margin: 0; padding: 2px 0 12px; }
  .wk-card { flex: 1 1 260px; max-width: calc(50% - 5px); }
}
@media (min-width: 900px) { .wk-card { max-width: calc(33.333% - 7px); } }

/* ---- weighting switch ---- */
.weight-box { margin: 12px 0 4px; }
.switch-row { display: flex; align-items: flex-start; gap: 12px; background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 12px 14px; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { flex: none; position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--line); transition: background .2s; margin-top: 2px; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch-row input:checked + .switch { background: var(--green); }
.switch-row input:checked + .switch::after { transform: translateX(18px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch-row > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.switch-row small { color: var(--muted); font-size: .76rem; line-height: 1.4; }

/* ---- report ---- */
.report { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 14px; }
.rep-next { margin: 0; font-size: .88rem; color: var(--ink-2); padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); }
.rep-block h3, .sub-h { margin: 0 0 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.sub-h { margin: 16px 4px 8px; }
.rep-xi { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: .9rem; }
.rep-xi dt { color: var(--muted); font-weight: 700; font-size: .8rem; padding-top: 1px; }
.rep-xi dd { margin: 0; font-weight: 700; }
.rep-xi dd span { cursor: pointer; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rep-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .88rem; font-weight: 600; flex-wrap: wrap; }
.rep-list small { color: var(--muted); font-size: .76rem; font-weight: 600; }
.rep-none { margin: 0; color: var(--muted); font-size: .85rem; }

/* ---- load bars, duo lists ---- */
.bars, .duo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bars li, .duo li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--card); border-radius: var(--radius-sm); padding: 9px 12px; box-shadow: var(--shadow); }
.bars img, .duo img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.bars li { grid-template-columns: 36px minmax(0, 1fr); }
.bar-main { display: grid; gap: 4px; min-width: 0; }
.bar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bar { height: 7px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.bar span.medium { background: #d97706; } .bar span.high { background: var(--red); }
.bars small, .duo small { color: var(--muted); font-size: .76rem; font-weight: 600; }
.lvl { font-style: normal; font-size: .64rem; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: var(--green-soft); color: var(--green); }
.lvl.medium { background: var(--amber-soft); color: var(--amber); } .lvl.high { background: var(--red-soft); color: var(--red); }
.duo li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.duo small .rt { font-size: .68rem; padding: 1px 5px; }
.delta { font-size: .78rem; font-weight: 800; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.delta.up { background: var(--green-soft); color: var(--green); } .delta.down { background: var(--red-soft); color: var(--red); }

/* ---- pulse ---- */
.pulse { display: flex; align-items: flex-end; gap: 6px; height: 150px; background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 12px 12px 8px; }
.pulse-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.pulse-bar { width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--brand), #60a5fa); }
.pulse-val { font-size: .66rem; font-weight: 800; color: var(--ink-2); }
.pulse-lbl { font-size: .58rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.mix { display: flex; flex-wrap: wrap; gap: 6px; }
.mix-chip { display: inline-flex; align-items: baseline; gap: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; font-size: .84rem; font-weight: 700; flex-wrap: wrap; max-width: 100%; }
.mix-chip > b { color: var(--brand); }
.mix-who { flex-basis: 100%; color: var(--muted); font-size: .72rem; font-weight: 600; }

/* ---- radar ---- */
.radar { background: var(--card-2); border-radius: var(--radius-sm); padding: 8px 8px 10px; margin: 6px 0 10px; }
.radar svg { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.r-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.r-a { fill: rgba(29, 78, 216, .22); stroke: var(--brand); stroke-width: 2; }
.r-b { fill: rgba(246, 201, 14, .25); stroke: #d4a90a; stroke-width: 2; }
.r-lbl { font-size: 10px; font-weight: 700; fill: var(--muted); dominant-baseline: middle; }
.radar-legend { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: var(--ink-2); margin: 2px 0 6px; }
.lg-a, .lg-b { width: 12px; height: 12px; border-radius: 3px; background: rgba(29, 78, 216, .5); }
.lg-b { background: rgba(246, 201, 14, .7); margin-left: 10px; }
.radar-values { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; font-size: .78rem; }
.radar-values li { display: flex; justify-content: space-between; gap: 6px; color: var(--muted); font-weight: 600; }
.radar-values b { color: var(--ink); } .radar-values .vb { color: #b8860b; margin-left: 6px; }
.facts { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 4px; font-size: .82rem; color: var(--ink-2); }
.facts li { background: var(--card-2); padding: 7px 10px; border-radius: 10px; }
.cand-tag.former { color: #0f766e; background: #ccfbf1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cand-tag.former { color: #5eead4; background: #0f2f2c; }
}
:root[data-theme="dark"] .cand-tag.former { color: #5eead4; background: #0f2f2c; }

.former .player { box-shadow: inset 0 0 0 1.5px #ccfbf1, var(--shadow); }
.out-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.out-side .delta { font-size: .68rem; }
button.hchip { font: inherit; font-size: .76rem; cursor: pointer; }
.hchip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.filter-bar { display: flex; gap: 6px; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px 4px; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-bar button { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-weight: 700; font-size: .82rem; padding: 7px 12px; border-radius: 99px; }
.filter-bar button small { color: var(--muted); font-weight: 700; margin-left: 2px; }
.filter-bar button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.filter-bar button.on small { color: #9fb0cc; }
.next-banner { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(135deg, #0a1a33, #1a3d7c); color: #fff; box-shadow: var(--shadow); display: grid; gap: 6px; }
.nb-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.nb-teams { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; flex-wrap: wrap; }
.nb-teams img { width: 26px; height: 26px; object-fit: contain; }
.nb-teams b { color: #9fb0cc; }
.nb-when { font-size: .8rem; color: #cbd5e1; font-weight: 600; }
img.cflag, .club img.cflag { width: 18px !important; height: 13px !important; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); display: inline-block; vertical-align: -1px; margin-left: 2px; }
.nb-teams span { display: inline-flex; align-items: center; gap: 8px; }
.st-tag.risk { background: #fef9c3; color: #854d0e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-tag.risk { background: #3a3108; color: #fde047; }
}
:root[data-theme="dark"] .st-tag.risk { background: #3a3108; color: #fde047; }

.hl-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 0; background: #dc2626; color: #fff; font-weight: 800; font-size: .78rem; padding: 6px 12px 6px 9px; border-radius: 99px; }
.hl-btn svg { width: 14px; height: 14px; fill: currentColor; }
.ps-stats .hl-btn { margin: 0 0 0 auto; padding: 4px 10px 4px 7px; font-size: .72rem; }
.video-box { width: min(760px, 100%); text-align: left; }
.video-box h3 { font-size: 1rem; }
.video-wrap { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #000; margin-bottom: 12px; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#video-sheet { z-index: 60; }

/* compact weekend plan */
details.weekend { margin: 14px 0 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0; overflow: hidden; }
details.weekend > summary { list-style: none; cursor: pointer; padding: 11px 14px; display: grid; gap: 7px; }
details.weekend > summary::-webkit-details-marker { display: none; }
.wk-sum-title { display: flex; align-items: center; gap: 4px; font-size: .9rem; color: var(--ink-2); }
.wk-sum-title b { color: var(--ink); }
.wk-sum-title::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
details.weekend[open] .wk-sum-title::after { transform: rotate(-135deg); }
.wk-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wk-chips::-webkit-scrollbar { display: none; }
.wk-chip { flex: none; font-size: .74rem; font-weight: 700; color: var(--ink-2); background: var(--card-2); border-radius: 99px; padding: 3px 9px; }
.wk-chip.clash { background: var(--amber-soft); color: var(--amber); }
.wk-body { padding: 0 16px 12px; }
.wk-body .wk-scroller { margin: 0 -16px; }
.wk-cal { display: flex; justify-content: flex-end; }

/* today: live / up next / finished */
.tg-head { display: flex; align-items: center; gap: 8px; margin: 14px 4px 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; }
.tg-head span, .done-group summary span { font-size: .7rem; background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 0 7px; color: var(--ink-2); letter-spacing: 0; }
.tg-head.live { color: var(--red); }
.tg-head.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 1.4s infinite; }
.done-group { margin-top: 12px; }
.done-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 800; }
.done-group summary::-webkit-details-marker { display: none; }
.done-group summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-left: 2px; transition: transform .2s; }
.done-group[open] summary::after { transform: rotate(-135deg); }
.done-group .match { opacity: .92; }

/* suggest a player */
.suggest-btn { flex: none; border: 1px dashed var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .82rem; padding: 7px 12px; border-radius: 99px; }
.link-btn { border: 0; background: none; color: var(--brand); font-weight: 700; padding: 0; font-size: inherit; text-decoration: underline; }
.suggest-box { text-align: left; width: min(520px, 100%); max-height: 90vh; overflow-y: auto; }
.suggest-intro { margin: 0 0 12px; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.suggest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suggest-grid label { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.suggest-grid label.wide { grid-column: 1 / -1; }
.suggest-grid input, .suggest-grid textarea { font: inherit; font-size: .95rem; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--card-2); color: var(--ink); width: 100%; }
.suggest-grid textarea { resize: vertical; }
.suggest-grid input:focus, .suggest-grid textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent; }
.suggest-grid .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.suggest-msg { min-height: 1.2em; margin: 10px 2px 6px; font-size: .86rem; font-weight: 700; }
.suggest-msg.ok { color: var(--green); } .suggest-msg.error { color: var(--red); }
.suggest-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.suggest-actions .btn { width: 100%; margin: 0; }
#suggest-sheet { z-index: 55; }
@media (max-width: 420px) { .suggest-grid { grid-template-columns: 1fr; } }

/* news */
.news { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.news-item { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--card); border-radius: var(--radius-sm); padding: 9px 12px; box-shadow: var(--shadow); }
.news-icon { font-size: 1rem; text-align: center; }
.news-item img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.news-item img.crest { border-radius: 0; object-fit: contain; background: none; }
.news-body { display: flex; flex-direction: column; min-width: 0; font-size: .9rem; }
.news-body small { color: var(--ink-2); font-size: .8rem; font-weight: 600; }
.news-when { color: var(--muted); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.news-item.k-goal, .news-item.k-firstGoal { box-shadow: inset 3px 0 0 #16a34a, var(--shadow); }
.news-item.k-injury, .news-item.k-red, .news-item.k-suspension { box-shadow: inset 3px 0 0 var(--red), var(--shadow); }
.news-item.k-transfer, .news-item.k-debut { box-shadow: inset 3px 0 0 var(--brand), var(--shadow); }
.news-item.k-top { box-shadow: inset 3px 0 0 #f6c90e, var(--shadow); }
.hchip.news { background: var(--gold-soft); border-color: #f6c90e; }
.st-tag.injured { background: var(--red-soft); color: var(--red); }
/* squad banner */
.squad-banner { margin: 12px 0 0; padding: 14px 16px; border-radius: var(--radius); background: var(--card); box-shadow: inset 4px 0 0 #f6c90e, var(--shadow); display: grid; gap: 4px; font-size: .88rem; }
.squad-banner .nb-label { color: var(--amber); }
.squad-banner p { margin: 0; }
.sb-fit { color: var(--muted); font-weight: 600; font-size: .82rem; }
/* season by month */
.month-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; background: var(--card-2); border-radius: var(--radius-sm); padding: 10px 10px 6px; margin-bottom: 10px; overflow-x: auto; }
.mc-col { flex: 1; min-width: 34px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.mc-rt { min-height: 18px; } .mc-rt .rt { font-size: .64rem; padding: 1px 4px; }
.mc-bar { flex: 1; width: 100%; max-width: 26px; display: flex; align-items: flex-end; }
.mc-bar span { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--brand), #60a5fa); }
.mc-min { font-size: .6rem; color: var(--muted); font-weight: 700; }
.mc-lbl { font-size: .66rem; color: var(--ink-2); font-weight: 800; text-transform: uppercase; }

:root[data-theme="light"] { color-scheme: light; }
.theme-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #cbd5e1; display: grid; place-items: center; flex: none; }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.player-box .sheet-actions .btn.ghost { margin: 0; padding: 11px 8px; font-size: .86rem; }
.bell-btn { position: relative; }
.bell-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #e11d48; color: #fff; font-size: .62rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--navy); }
@media (max-width: 380px) { .langs button { padding: 6px 6px; } }
/* header on phones: never over the name */
.brand { flex: 1 1 auto; min-width: 0; }
.brand > div { min-width: 0; }
.brand-name { overflow: hidden; text-overflow: ellipsis; }
.top-actions { gap: 6px; }
/* wide screens: all three in a row, always in the same order */
.lang-menu { display: contents; }
.langs button[data-lang="bs"] { order: 1; } .langs button[data-lang="de"] { order: 2; } .langs button[data-lang="en"] { order: 3; }
@media (max-width: 560px) {
  .langs { position: relative; }
  .langs button { padding: 7px 10px; }
  /* phones: only the current language; the others drop down below it, nothing else moves */
  .lang-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; flex-direction: column; gap: 2px; padding: 4px; min-width: 100%;
    background: var(--navy-2); border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
  .langs.open .lang-menu { display: flex; }
  .theme-btn, .install { width: 34px; height: 34px; }
}
@media (max-width: 360px) { .brand-name { font-size: .95rem; } .wordmark { height: 30px; } }
.sheet-box { touch-action: pan-y; will-change: transform; }
.sheet-box::before { width: 44px; height: 5px; top: 8px; margin-left: -22px; }

/* dashboard (schedule) */
.dash { margin: 14px 0 0; }
.tiles { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.tiles::-webkit-scrollbar { display: none; }
.tile { flex: 0 0 auto; min-width: 150px; max-width: 220px; scroll-snap-align: start; text-align: left; display: grid; gap: 3px; padding: 11px 13px; border: 0; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); }
.tile-k { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.tile b { display: flex; align-items: center; gap: 6px; font-size: .98rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile b img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.tile b img.ph { border-radius: 50%; object-fit: cover; background: var(--card-2); }
.tile small { font-size: .74rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.tile small .rt { font-size: .66rem; padding: 1px 5px; }
.tile.live { background: linear-gradient(135deg, #e11d48, #be123c); color: #fff; }
.tile.live .tile-k, .tile.live small { color: #ffe4e8; }
.tile.live .tile-k::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 5px; vertical-align: 1px; animation: pulse 1.4s infinite; }
.tile.bih { background: linear-gradient(135deg, #0a1a33, #1a3d7c); color: #fff; }
.tile.bih .tile-k { color: var(--accent); } .tile.bih small { color: #cbd5e1; }
.day { scroll-margin-top: calc(var(--tabbar-h) + 12px); }

/* explanations folded behind "ⓘ How it works" */
details.info { margin: -2px 4px 10px; font-size: .78rem; }
details.info > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 700; padding: 2px 0; }
details.info > summary::-webkit-details-marker { display: none; }
details.info > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
details.info[open] > summary { color: var(--brand); }
details.info > p + p { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 2px; }
details.info > p:has(+ p) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
details.info > p { margin: 6px 0 2px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); color: var(--ink-2); line-height: 1.5; font-size: .8rem; border-left: 3px solid var(--brand); }
.weight-box details.info { margin: 6px 4px 0; }
.player-box details.info { margin: 0 0 10px; }
.lineup-note:empty { display: none; }
.tiles { scroll-padding: 0 16px; }
#hero-body { display: block; }
details.info.names { margin-top: 10px; }
.name-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.name-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.name-chip:not(:has(img)) { padding-left: 10px; }
.name-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.name-chip small { color: var(--muted); font-weight: 600; }
.cand-cta { margin: -4px 4px 10px; }
.cand-cta .link-btn { text-decoration: none; font-size: .82rem; font-weight: 800; }
.empty-box.small-note { font-size: .8rem; padding: 10px 12px; margin-bottom: 10px; }
.delta.neutral { background: var(--card-2); color: var(--muted); }

/* "ahead of" list in "outside the squad" */
button.delta { border: 0; font: inherit; font-size: .68rem; font-weight: 800; cursor: pointer; }
button.delta:disabled { cursor: default; }
.duo li.ahead-open { grid-template-rows: auto auto; }
.ahead-list { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 2px; }
.ahead-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 99px; font-size: .78rem; font-weight: 700; border: 1px solid var(--line); background: var(--card-2); }
.ahead-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.ahead-chip .rt { font-size: .64rem; padding: 1px 5px; }
.ahead-chip.below { border-color: rgba(22,163,74,.5); background: var(--green-soft); }
.ahead-chip.above { opacity: .75; }
.ahead-legend { flex-basis: 100%; margin: 2px 0 0; font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.ahead-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid var(--line); }
.ahead-legend .dot.below { background: var(--green-soft); border-color: rgba(22,163,74,.6); }
.ahead-legend .dot.above { background: var(--card-2); margin-left: 8px; }

/* news drop-down from the bell */
.news-panel { position: fixed; z-index: 45; top: calc(56px + env(safe-area-inset-top, 0)); right: 12px; left: 12px; max-width: 460px; margin-left: auto;
  max-height: 72vh; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; animation: rise .2s ease; }
.np-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.np-head b { font-size: 1rem; }
.np-body { overflow-y: auto; padding: 0 10px 12px; overscroll-behavior: contain; }
.np-body .news-item { box-shadow: none; border: 1px solid var(--line); }

/* player sheet: key figures and profile values */
.sum-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 2px 0 14px; background: var(--card-2); border-radius: 14px; overflow: hidden; font-size: .84rem; }
.sum-table th, .sum-table td { padding: 8px 4px; text-align: center; }
.sum-table thead th { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-top: 9px; padding-bottom: 4px; }
.sum-table tbody th { text-align: left; padding-left: 12px; font-size: .74rem; color: var(--ink-2); font-weight: 800; white-space: nowrap; }
.sum-table tbody td { font-weight: 800; color: var(--ink); }
.sum-table tbody tr + tr th, .sum-table tbody tr + tr td { border-top: 1px solid var(--line); }
.sum-table td small { color: var(--muted); font-weight: 600; font-size: .7rem; }
.sum-table .rt { font-size: .72rem; }
.radar-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.radar-values li.pv { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 8px; align-items: end; background: var(--card); border-radius: 12px; padding: 9px 10px; }
.pv-name { display: flex; flex-direction: column; font-size: .76rem; font-weight: 700; color: var(--ink-2); line-height: 1.25; min-width: 0; }
.pv-name small { font-size: .64rem; color: var(--muted); font-weight: 600; }
.pv-vals { display: flex; gap: 6px; align-items: baseline; }
.pv-vals .va { font-size: 1.05rem; color: var(--ink); } .pv-vals .vb { font-size: .9rem; color: #d4a90a; margin: 0; }
.pv-bar { grid-column: 1 / -1; position: relative; height: 5px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.pv-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--brand); }
.pv-bar span.b2 { top: auto; height: 2px; background: #d4a90a; }
@media (max-width: 360px) { .radar-values { grid-template-columns: 1fr; } }
.sum-table { table-layout: fixed; }
.sum-table thead th:first-child, .sum-table tbody th { width: 26%; }
dl.facts { margin: 4px 0 14px; display: grid; gap: 0; background: var(--card-2); border-radius: 14px; overflow: hidden; }
dl.facts > div { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; }
dl.facts > div + div { border-top: 1px solid var(--line); }
dl.facts dt { font-size: .74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
dl.facts dd { margin: 0; font-size: .84rem; font-weight: 600; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
dl.facts dd .rt { font-size: .7rem; }
.sum-table thead th { letter-spacing: 0; font-size: .6rem; padding-left: 2px; padding-right: 2px; }
.sum-table thead th:first-child, .sum-table tbody th { width: 25%; }
.rep-sub { margin: 10px 0 4px; font-size: .74rem; font-weight: 800; color: var(--amber); }

/* "outside the squad" cards */
.out-cards { display: grid; gap: 10px; }
.out-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.oc-top { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 14px 8px; cursor: pointer; }
.oc-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.oc-id { display: grid; gap: 4px; min-width: 0; }
.oc-name { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .78rem; font-weight: 600; color: var(--muted); }
.oc-meta .cand-tag { font-size: .56rem; }
.oc-form { display: grid; justify-items: center; gap: 2px; }
.oc-form .rt { font-size: 1.05rem; padding: 4px 9px; border-radius: 10px; }
.oc-form small { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.oc-stats { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px 74px; }
.oc-stats span { font-size: .72rem; font-weight: 700; color: var(--ink-2); background: var(--card-2); border-radius: 99px; padding: 3px 9px; }
.oc-ahead { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 70px 16px; gap: 10px; align-items: center; border: 0; border-top: 1px solid var(--line); background: none; padding: 10px 14px; text-align: left; color: var(--ink-2); }
.oc-ahead-text { font-size: .78rem; font-weight: 700; }
.oc-ahead.up .oc-ahead-text { color: var(--green); }
.oc-bar { height: 6px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.oc-bar span { display: block; height: 100%; border-radius: 99px; background: var(--muted); }
.oc-ahead.up .oc-bar span { background: var(--green); }
.oc-chev { font-size: .7rem; color: var(--muted); transition: transform .2s; }
.out-card.open .oc-chev { transform: rotate(180deg); }
.out-card .ahead-list { margin: 0; padding: 4px 14px 14px; border-top: 0; }
@media (max-width: 380px) { .oc-stats { padding-left: 14px; } }

/* common player cards in the statistics */
.pc-right { display: flex; align-items: center; }
.pc-body { padding: 0 14px 12px 74px; display: grid; gap: 6px; }
.pc-line { margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.pc-icon { font-size: .74rem; width: 14px; text-align: center; flex: none; }
.pc-line.bad .pc-icon { color: var(--red); } .pc-line.warn .pc-icon { color: #d97706; } .pc-line.good .pc-icon { color: var(--green); }
.lvl-badge { font-style: normal; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; border-radius: 99px; white-space: nowrap; background: var(--card-2); color: var(--ink-2); }
.lvl-badge.bad, .lvl-badge.load-high { background: var(--red-soft); color: var(--red); }
.lvl-badge.warn, .lvl-badge.load-medium { background: var(--amber-soft); color: var(--amber); }
.lvl-badge.good, .lvl-badge.load-low { background: var(--green-soft); color: var(--green); }
.lvl-badge.club { background: var(--brand-soft); color: var(--brand); } .lvl-badge.bih { background: var(--gold-soft); color: var(--amber); }
.pcard.lvl-bad { box-shadow: inset 3px 0 0 var(--red), var(--shadow); } .pcard.lvl-warn { box-shadow: inset 3px 0 0 #d97706, var(--shadow); } .pcard.lvl-good { box-shadow: inset 3px 0 0 var(--green), var(--shadow); }
.pc-bars { display: grid; gap: 7px; }
.pc-bar-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: .78rem; }
.pc-bar-label { font-weight: 700; color: var(--muted); }
.pc-bar { height: 7px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.pc-bar span { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.pc-bar-row.without .pc-bar span { background: var(--muted); }
.pc-bar-row.bih .pc-bar span { background: #d4a90a; }
.pc-bar-row.load-high .pc-bar span { background: var(--red); } .pc-bar-row.load-medium .pc-bar span { background: #d97706; } .pc-bar-row.load-low .pc-bar span { background: var(--green); }
.pc-bar-row b { font-weight: 800; color: var(--ink); min-width: 34px; text-align: right; }
.pc-bar-row b .rt { font-style: normal; font-size: .7rem; }
.pc-bar-row small { color: var(--muted); font-size: .68rem; font-weight: 600; white-space: nowrap; }
.pc-kpi { display: grid; justify-items: center; }
.pc-kpi b { font-size: 1.15rem; font-weight: 800; } .pc-kpi small { font-size: .56rem; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
.pc-kpi.up b { color: var(--green); } .pc-kpi.down b { color: var(--red); }
.oc-stats.inline { padding: 0; }
@media (max-width: 380px) { .pc-body { padding-left: 14px; } }
/* "how much ours play" */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.kpi { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 10px 12px; display: grid; gap: 2px; }
.kpi b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } .kpi b small { font-size: .78rem; color: var(--muted); }
.kpi span { font-size: .68rem; color: var(--muted); font-weight: 700; line-height: 1.25; }
.kpi.up b { color: var(--green); } .kpi.down b { color: var(--red); }
.pulse-col.now .pulse-bar { background: linear-gradient(#f6c90e, #eab308); }

/* player card: age/number, next match, minutes share, league, detail table */
.ps-tags { display: flex; gap: 6px; margin-top: 6px; }
.ps-tags span { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--card-2); color: var(--ink-2); }
.ps-next { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: center; background: var(--card-2); border-radius: 14px; padding: 10px 12px; margin: -4px 0 14px; border-left: 3px solid var(--accent, #f5c518); }
.ps-next.live { border-left-color: var(--red); }
.ps-next .pn-k { grid-column: 1 / -1; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.ps-next .pn-opp { display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; }
.ps-next .pn-opp img { width: 20px; height: 20px; object-fit: contain; }
.ps-next .pn-opp small { color: var(--muted); font-weight: 600; }
.ps-next .pn-when { font-weight: 700; font-size: .86rem; }
.ps-next .pn-lg { color: var(--muted); font-size: .76rem; font-weight: 600; }
.fact-bar { display: block; width: 100%; flex-basis: 100%; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 2px 0 6px; }
.fact-bar span { display: block; height: 100%; background: var(--blue, #6ea8fe); border-radius: inherit; }
dl.facts .opta { font-weight: 800; }
dl.facts .eff { font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--line); }
dl.facts .eff.up { color: var(--green); background: var(--green-soft); }
dl.facts .eff.down { color: var(--red); background: var(--red-soft); }
.det-table { width: 100%; border-collapse: collapse; font-size: .84rem; background: var(--card-2); border-radius: 14px; overflow: hidden; margin-bottom: 4px; table-layout: fixed; }
.det-table th, .det-table td { padding: 8px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.det-table th:first-child { text-align: left; font-weight: 600; color: var(--ink-2); width: 46%; }
.det-table thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.det-table tbody tr + tr { border-top: 1px solid var(--line); }
.det-table td { font-weight: 700; }
.det-table td:nth-child(3) { color: var(--muted); font-weight: 600; }

/* "no ratings yet": the reason under each name */
.name-chip.why { border-radius: 14px; padding: 4px 12px 4px 4px; }
.name-chip.why img { width: 30px; height: 30px; }
.name-chip .nc-txt { display: grid; line-height: 1.2; }
.name-chip .nc-txt small { font-size: .7rem; }
.name-chip.why.bad small { color: var(--red); }
.name-chip.why.warn small { color: var(--amber); }
.name-chip.why.info small { color: var(--muted); }

/* tap on the player's photo: full size */
.ps-photo { padding: 0; border: 0; background: none; border-radius: 50%; cursor: zoom-in; flex: none; }
.ps-photo img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--card-2); display: block; }
.photo-zoom { position: fixed; inset: 0; z-index: 200; background: rgba(3, 8, 18, .86); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; cursor: zoom-out; animation: fade .15s ease; }
.photo-zoom figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.photo-zoom img { width: min(78vw, 360px); aspect-ratio: 1; object-fit: cover; border-radius: 24px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.photo-zoom figcaption { display: grid; text-align: center; color: #fff; gap: 2px; }
.photo-zoom figcaption small { color: rgba(255, 255, 255, .7); font-weight: 600; }
@keyframes fade { from { opacity: 0; } }

/* TV: button on the match, sheet with every country */
.m-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.m-actions .hl-btn { margin: 0; }
.tv-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink-2); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.tv-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--card-2); }
.ps-next .tv-btn { justify-self: start; margin-top: 6px; }
.tv-box h3 { margin: 0 0 4px; }
.tv-match { margin: 0 0 12px; display: grid; gap: 2px; }
.tv-match small { color: var(--muted); font-weight: 600; }
.tv-region h4 { margin: 14px 0 6px; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.tv-region ul { list-style: none; margin: 0; padding: 0; background: var(--card-2); border-radius: 14px; overflow: hidden; }
.tv-region li { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; }
.tv-region li + li { border-top: 1px solid var(--line); }
.tv-region li.me { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tv-country { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .84rem; min-width: 0; }
.tv-country img { width: 20px; height: 14px; object-fit: cover; border-radius: 3px; flex: none; }
.tv-list { display: flex; flex-wrap: wrap; gap: 4px; }
.tv-ch { font-size: .74rem; font-weight: 700; color: var(--ink-2); background: var(--card); border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.tv-ch.exact { color: var(--accent-ink); background: var(--accent); }
.tv-legend { margin: 14px 0 4px; font-size: .74rem; color: var(--muted); line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- phones: tap targets, no zoom on inputs, narrow screens ---- */
@media (pointer: coarse) {
  select, input:not([type=checkbox]):not([type=radio]), textarea { font-size: 16px !important; }
  details.info > summary { padding: 8px 0; }
  .link-btn { padding: 8px 0; }
  .cand-note a { display: inline-block; padding: 6px 0; }
  .hl-btn { min-height: 32px; }
  input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--green); }
}
@media (max-width: 360px) {
  .potw-top { grid-template-columns: 60px minmax(0, 1fr); }
  .potw-photo { width: 60px; height: 60px; }
  .potw-rating { grid-column: 1 / -1; justify-self: start; font-size: 1.3rem; padding: 4px 12px; }
  .potw-name { font-size: 1.05rem; }
  .sum-table { font-size: .74rem; }
  .sum-table th, .sum-table td { padding-left: 3px; padding-right: 3px; }
  .sum-table .rt { padding: 1px 4px; }
  .sum-table { table-layout: fixed; }
  .sum-table thead th:first-child { width: 22%; }
  .sum-table thead th:nth-child(4), .sum-table thead th:nth-child(5) { width: 9%; }
  .sum-table th:last-child, .sum-table td:last-child { padding-right: 8px; }
  .sum-table thead th { font-size: .54rem; letter-spacing: 0; }
  .sum-table tbody th { padding-left: 8px; font-size: .68rem; white-space: normal; }
  .ps-head { gap: 10px; }
  .ps-photo img, .ps-head > img { width: 52px; height: 52px; }
  .fbox { min-width: 0; flex: 1 1 calc(20% - 6px); padding: 6px 2px; }
  .det-table th, .det-table td { padding: 7px 6px; }
  .season { font-size: .76rem; }
  .season th, .season td { padding: 7px 4px; }
  .season tbody th img { width: 22px; height: 22px; }
}
.ps-head p { flex-wrap: wrap; row-gap: 2px; }
.tv-box { text-align: left; width: min(560px, 100%); max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; } .tv-box h3, .tv-box .tv-match { text-align: center; }
.tv-none { font-size: .76rem; color: var(--muted); font-style: italic; }
@media (max-width: 360px) { .chip:has(img.cl) small { display: none; } }

/* line-up sheet */
.lu-box { text-align: left; width: min(560px, 100%); max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }
.lu-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; font-weight: 800; margin-top: 4px; }
.lu-head span:first-child { text-align: right; } .lu-head b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.lu-status { text-align: center; margin: 2px 0 10px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.live-tag { color: var(--red); }
.lu-tabs { display: flex; width: 100%; margin-bottom: 8px; }
.lu-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lu-tabs img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.lu-meta { margin: 0 2px 8px; font-size: .8rem; color: var(--muted); }
.lu-meta b { color: var(--ink); }
.lu-pitch { gap: 10px; padding: 16px 4px; }
.lu-pitch .lp { width: auto; flex: 1 1 0; min-width: 0; }
.lu-pitch .lp-photo { width: 42px; height: 42px; }
.lu-pitch .lp-name { font-size: .7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp.lu.ours .lp-photo { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(246, 201, 14, .45); }
.lp.lu.ours { cursor: pointer; }
.lu-no { position: absolute; left: -6px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--navy); color: #fff; font-size: .62rem; font-weight: 800; display: grid; place-items: center; }
.lu-evs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 0; }
.lu-evs i { font-style: normal; font-size: .6rem; font-weight: 800; line-height: 1.4; }
.lu-ev.own { filter: grayscale(1) brightness(.6); }
.lu-pitch .lu-ev:not(.goal), .lu-pitch .lu-sub { background: rgba(0,0,0,.45); color: #fff; padding: 0 4px; border-radius: 6px; }
.lu-sub.off { color: #fca5a5 !important; } .lu-sub.on { color: #86efac !important; }
.lu-card { display: inline-block; width: 8px; height: 11px; border-radius: 2px; } .lu-card.y { background: #facc15; } .lu-card.r { background: #ef4444; }
.lu-bench { list-style: none; margin: 0; padding: 0; background: var(--card-2); border-radius: 14px; overflow: hidden; }
.lu-bench li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 12px; font-size: .84rem; font-weight: 600; }
.lu-bench li + li { border-top: 1px solid var(--line); }
.lu-bench li .lu-no { position: static; }
.lu-bench li small { color: var(--muted); font-weight: 700; font-size: .68rem; }
.lu-bench li.ours { background: color-mix(in srgb, var(--accent) 14%, transparent); cursor: pointer; font-weight: 800; }
.lu-bench li.came-on span:nth-child(2) { color: var(--green); }
.lu-bench .lu-sub.on { color: var(--green) !important; }
.lu-box h4 { margin: 14px 0 6px; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.lu-fs li { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
.lu-fs-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lu-fs-name img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #fff; flex: none; }
.lu-fs-name small { color: var(--muted); }

/* legal page (/impressum) and its footer link */
.foot-legal { color: var(--muted); text-decoration: underline; flex-basis: 100%; }
.legal { max-width: 760px; padding: 18px 16px 48px; line-height: 1.6; }
.legal h1 { font-size: 1.35rem; margin: 26px 0 8px; letter-spacing: -.02em; }
.legal h2 { font-size: 1rem; margin: 18px 0 4px; }
.legal p, .legal li { color: var(--ink-2); font-size: .92rem; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--brand); }
.legal section + section { border-top: 1px solid var(--line); margin-top: 30px; }
.legal-langs { display: flex; gap: 8px; flex-wrap: wrap; }
.legal-langs a { padding: 6px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .84rem; }
.legal-facts { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 8px 14px; background: var(--card); border-radius: 14px; padding: 14px; margin: 10px 0; }
.legal-facts dt { font-weight: 700; color: var(--muted); font-size: .84rem; }
.legal-facts dd { margin: 0; font-size: .92rem; }
@media (max-width: 480px) { .legal-facts { grid-template-columns: 1fr; } .legal-facts dd { margin-bottom: 6px; } }
.legal-note { font-style: italic; color: var(--muted) !important; }
.legal-date { color: var(--muted) !important; font-size: .82rem !important; }
a.brand { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; }

/* push notifications row in the news drop-down */
.np-push { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.np-push .btn.small { padding: 8px 14px; }
.np-hint { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.4; flex-basis: 100%; }
.np-on { font-weight: 700; font-size: .84rem; color: var(--green); }
.np-topics { flex-basis: 100%; display: grid; gap: 4px; margin-top: 4px; }
.np-topics small { color: var(--muted); font-size: .74rem; font-weight: 700; }
.np-topics label { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; min-height: 30px; cursor: pointer; }
.np-topics input { width: 18px; height: 18px; accent-color: var(--green); }