:root { --green:#2e8b57; --ink:#0d1f16; --panel:rgba(10,28,19,.88); --line:rgba(255,255,255,.18); --accent:#ffd166; --red:#e63946; --blue:#2f7de1; --text:#f4fff8; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:#16603a; color:var(--text); font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; overflow:hidden; overscroll-behavior:none; touch-action:none; -webkit-tap-highlight-color:transparent; }
#app { position:fixed; inset:0; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#pitch { position:absolute; inset:0; width:100%; height:100%; display:block; }
.screen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; overflow:auto; touch-action:pan-y; background:rgba(5,20,12,.55); }
.screen[hidden], #hud[hidden], #touch[hidden], #overlay[hidden] { display:none; }
.screen.behind { visibility:hidden; }
.overlay { background:rgba(5,20,12,.7); z-index:5; }
.panel { width:min(720px,100%); max-height:100%; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,.5); backdrop-filter:blur(6px); }
.panel.small { width:min(420px,100%); }
.panel.menu { width:min(440px,100%); text-align:center; }
h1,h2,h3 { margin:.2em 0 .5em; line-height:1.15; }
.logo { font-size:clamp(2rem,6vw,3rem); letter-spacing:.02em; }
.tagline,.note,.foot,small { color:#bfe3cc; }
.note { margin:.5em 0; }
.foot { font-size:.85rem; margin-top:14px; min-height:1.2em; }
.stack { display:flex; flex-direction:column; gap:10px; }
.row { display:flex; gap:10px; margin-top:16px; align-items:center; }
.row.wrap { flex-wrap:wrap; } .row > .btn.primary { margin-left:auto; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.cols.tight { gap:10px; margin-bottom:10px; }
.btn { font:inherit; font-weight:600; color:var(--text); background:rgba(255,255,255,.1); border:1px solid var(--line); border-radius:12px; padding:12px 18px; cursor:pointer; min-height:44px; touch-action:manipulation; transition:transform .06s, background .15s; }
.btn:hover { background:rgba(255,255,255,.18); }
.btn:active { transform:scale(.97); }
.btn.primary { background:var(--accent); color:#1b2a10; border-color:transparent; }
.btn.primary:hover { background:#ffdf8a; }
.btn.danger { background:#7a1f28; border-color:#c0505a; }
.btn.ghost { background:transparent; }
.btn.small { padding:6px 12px; min-height:34px; font-size:.9rem; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
:focus-visible { outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px rgba(255,209,102,.8); }
.field { display:flex; flex-direction:column; gap:4px; margin:6px 0; }
.flabel { font-size:.85rem; color:#bfe3cc; }
select,input[type=text],input[type=password] { font:inherit; color:var(--text); background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:10px; padding:9px 10px; min-height:40px; max-width:100%; }
select option { color:#000; }
input[type=range] { width:100%; accent-color:var(--accent); min-height:32px; }
.check { display:flex; gap:10px; align-items:center; min-height:40px; }
.check input { width:20px; height:20px; accent-color:var(--accent); }
.error { color:#ff9aa2; min-height:1.2em; margin:.3em 0; }
.prow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:12px; margin:8px 0; }
.prow .card { flex-basis:100%; font-size:.85rem; }
.ctable { width:100%; border-collapse:collapse; }
.ctable th { text-align:left; font-weight:500; color:#bfe3cc; padding:3px 8px 3px 0; }
.ctable td { padding:3px 0; font-weight:600; }
.keybtn.capturing { background:var(--accent); color:#000; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tab { font:inherit; background:transparent; border:1px solid var(--line); color:var(--text); padding:8px 14px; border-radius:999px; cursor:pointer; }
.tab.on { background:var(--accent); color:#000; }
.live { background:rgba(0,0,0,.4); padding:8px; border-radius:8px; font-size:.85rem; min-height:3em; white-space:pre-wrap; }
.conn.online { color:#7ee081; } .conn.reconnecting { color:var(--accent); } .conn.unavailable { color:#ff9aa2; }
.joinrow { display:flex; gap:8px; } .joinrow .code { flex:1; text-transform:uppercase; letter-spacing:.3em; text-align:center; font-weight:700; font-size:1.2rem; }
.team { border:2px solid; border-radius:12px; padding:8px 12px; } .team ul { list-style:none; margin:0; padding:0; min-height:3em; }
.bigscore { display:flex; justify-content:center; gap:20px; align-items:baseline; font-size:1.2rem; margin:8px 0; } .bigscore b { font-size:2.6rem; }
.scorers,.hist,.lb { margin:.4em 0; padding-left:1.2em; } .scorers { list-style:none; padding:0; text-align:center; }
.stats { width:100%; text-align:center; border-collapse:collapse; margin:10px 0; } .stats th { color:#bfe3cc; font-weight:500; } .stats td { font-weight:700; width:25%; }
.spinner { width:36px; height:36px; margin:16px auto; border:4px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
#hud { position:absolute; inset:0; pointer-events:none; z-index:2; }
.scorebar { position:absolute; top:calc(8px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; background:rgba(0,0,0,.6); padding:6px 16px; border-radius:999px; font-weight:700; white-space:nowrap; }
.scorebar .score { font-size:1.6rem; min-width:1.2ch; text-align:center; }
.scorebar .mid { display:flex; flex-direction:column; align-items:center; font-size:.85rem; line-height:1.1; min-width:90px; } .clock { font-size:1.15rem; font-variant-numeric:tabular-nums; } .half { font-size:.7rem; color:#bfe3cc; font-weight:500; }
.status { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:12px; font-size:.8rem; background:rgba(0,0,0,.5); border-radius:8px; padding:2px 8px; display:flex; gap:8px; } .status[hidden] { display:none; }
.connind.online { color:#7ee081; } .connind.reconnecting { color:var(--accent); } .connind.unavailable { color:#ff9aa2; }
.pausebtn { pointer-events:auto; position:absolute; top:calc(8px + env(safe-area-inset-top)); right:12px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,.55); color:#fff; font-size:1.1rem; cursor:pointer; }
.banner { position:absolute; left:50%; top:30%; transform:translate(-50%,0) scale(.9); font-size:clamp(1.6rem,6vw,3.4rem); font-weight:800; text-shadow:0 4px 18px rgba(0,0,0,.7); opacity:0; transition:opacity .2s, transform .2s; text-align:center; padding:0 12px; }
.banner.on { opacity:1; transform:translate(-50%,0) scale(1); } .banner.goal { color:var(--accent); font-size:clamp(2.4rem,9vw,5rem); }
#toasts { position:absolute; bottom:calc(12px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; z-index:20; width:min(520px,94vw); pointer-events:none; }
.toast { background:rgba(0,0,0,.85); border:1px solid var(--line); padding:10px 14px; border-radius:12px; transition:opacity .5s; pointer-events:auto; text-align:center; } .toast.warn { border-color:var(--accent); } .toast.out { opacity:0; }
#touch { position:absolute; inset:0; z-index:3; pointer-events:none; }
.stick-zone { position:absolute; left:0; bottom:0; width:50%; height:65%; pointer-events:auto; touch-action:none; }
.stick { position:absolute; left:40px; bottom:40px; width:110px; height:110px; border-radius:50%; border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); }
.stick-knob { position:absolute; left:30px; top:30px; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.45); }
.tbtns { position:absolute; right:14px; bottom:18px; display:grid; grid-template-columns:repeat(3,64px); gap:10px; pointer-events:auto; touch-action:none; }
.tbtn { width:64px; height:64px; border-radius:50%; border:2px solid rgba(255,255,255,.4); background:rgba(0,0,0,.4); color:#fff; font-size:.7rem; font-weight:700; touch-action:none; user-select:none; }
.tbtn.big { grid-column:2/4; grid-row:1/3; width:100%; height:100%; min-height:110px; border-radius:50%; font-size:.95rem; background:rgba(255,209,102,.35); } .tbtn.down { background:rgba(255,255,255,.55); }
.noscript { position:absolute; inset:0; display:grid; place-items:center; }
@media (max-height:520px) { .panel { padding:12px 16px; } .btn { padding:8px 14px; min-height:38px; } .logo { font-size:1.6rem; } .scorebar { transform:translateX(-50%) scale(.85); } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* ---- career / tournaments / kits */
.row2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; } .row2 .btn { padding:10px 8px; font-size:.9rem; }
.kitprev { vertical-align:middle; flex:none; } .kitbig { display:flex; gap:12px; align-items:center; }
.tline { display:inline-flex; gap:6px; align-items:center; }
.clubs { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin:8px 0; }
.club { display:flex; align-items:center; gap:8px; font:inherit; color:var(--text); background:rgba(255,255,255,.07); border:2px solid var(--line); border-radius:12px; padding:8px 10px; cursor:pointer; text-align:left; min-height:44px; }
.club span { flex:1; } .club small { color:#bfe3cc; } .club.on { border-color:var(--accent); background:rgba(255,209,102,.18); }
.matchcard { border:1px solid var(--line); border-radius:14px; padding:10px 14px; margin:8px 0; background:rgba(255,255,255,.05); }
.mlabel { color:#bfe3cc; font-size:.85rem; text-align:center; } .mteams { display:flex; gap:12px; align-items:center; justify-content:space-around; text-align:center; flex-wrap:wrap; }
.mteams > div { display:flex; flex-direction:column; align-items:center; gap:2px; } .mteams .me b { color:var(--accent); } .vs { font-weight:800; opacity:.7; }
.league { width:100%; border-collapse:collapse; font-size:.85rem; } .league th { color:#bfe3cc; font-weight:500; text-align:center; padding:2px 4px; } .league td { text-align:center; padding:3px 4px; border-top:1px solid rgba(255,255,255,.08); }
.league .club { text-align:left; border:0; background:none; display:table-cell; padding:3px 4px; min-height:0; } .league tr.me { background:rgba(255,209,102,.18); font-weight:700; } .league .pts { font-weight:800; }
.hist li.w { color:#8dffa6; } .hist li.l { color:#ff9aa2; } .hist { list-style:none; padding:0; margin:.3em 0; font-size:.85rem; }
.urow { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:4px 0; } .good { color:#8dffa6; } .bigline { font-size:1.4rem; font-weight:700; margin:.3em 0; }
.bracket { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; } .bround { min-width:170px; } .bround h4 { margin:.2em 0; color:#bfe3cc; }
.tie { display:flex; flex-direction:column; gap:1px; border:1px solid var(--line); border-radius:8px; padding:4px 8px; margin:6px 0; font-size:.82rem; } .tie.me { border-color:var(--accent); } .tie .win { font-weight:800; } .tie b, .tie small { text-align:center; color:#bfe3cc; }
input[type=color] { width:64px; height:40px; padding:2px; border-radius:8px; border:1px solid var(--line); background:rgba(0,0,0,.3); }
/* ---- match polish: ticker, replay, rotate hint, touch layout */
.ticker { position:absolute; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(8px); max-width:min(640px,92vw); background:rgba(0,0,0,.65); padding:6px 16px; border-radius:999px; font-size:.95rem; opacity:0; transition:opacity .25s, transform .25s; text-align:center; pointer-events:none; }
.ticker.on { opacity:1; transform:translateX(-50%); }
.replaybar { position:absolute; top:calc(64px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; gap:12px; align-items:center; background:rgba(180,20,30,.9); padding:6px 14px; border-radius:999px; pointer-events:auto; }
.replaybar[hidden] { display:none; } .replaybar b { letter-spacing:.2em; } .rbar { width:120px; height:6px; background:rgba(255,255,255,.3); border-radius:3px; overflow:hidden; } .rbar i { display:block; height:100%; width:0; background:#fff; }
.fsbtn { right:64px; }
#rotate { position:absolute; inset:0; z-index:30; background:rgba(5,20,12,.92); display:flex; align-items:center; justify-content:center; gap:12px; font-size:1.2rem; text-align:center; padding:24px; } #rotate[hidden] { display:none; } #rotate span { font-size:2rem; }
#touch .stick-zone { width:46%; } #touch.lefty .stick-zone { left:auto; right:0; } #touch.lefty .tbtns { right:auto; left:14px; }
.stick { width:calc(110px * var(--tscale,1)); height:calc(110px * var(--tscale,1)); }
.stick-knob { width:calc(50px * var(--tscale,1)); height:calc(50px * var(--tscale,1)); left:calc(30px * var(--tscale,1)); top:calc(30px * var(--tscale,1)); }
.tbtns { grid-template-columns:repeat(3,calc(58px * var(--tscale,1))); grid-auto-rows:calc(58px * var(--tscale,1)); gap:8px; }
.tbtn { width:100%; height:100%; font-size:.66rem; padding:0; } .tbtn.small { opacity:.85; } .tbtn.big { grid-column:2/4; grid-row:1/3; font-size:.9rem; }
@media (max-height:480px) { .scorebar { top:4px; padding:3px 12px; } .banner { top:22%; } .ticker { bottom:calc(4px + env(safe-area-inset-bottom)); font-size:.8rem; padding:3px 12px; } }

/* compact 4x3 touch button grid + toasts at the top so they never cover the ticker or the thumbs */
.tbtns { grid-template-columns:repeat(4,calc(58px * var(--tscale,1))); grid-template-rows:repeat(3,calc(58px * var(--tscale,1))); grid-auto-rows:calc(58px * var(--tscale,1)); }
.tbtn.big { grid-column:3/5; grid-row:1/3; min-height:0; }
.tbtn[data-key=pass] { grid-column:1; grid-row:1; } .tbtn[data-key=through] { grid-column:2; grid-row:1; }
.tbtn[data-key=tackle] { grid-column:1; grid-row:2; } .tbtn[data-key=slide] { grid-column:2; grid-row:2; }
.tbtn[data-key=switch] { grid-column:1; grid-row:3; } .tbtn[data-key=lob] { grid-column:2; grid-row:3; } .tbtn[data-key=sprint] { grid-column:3; grid-row:3; }
#toasts { top:calc(64px + env(safe-area-inset-top)); bottom:auto; }
.toast { pointer-events:none; } .toast.update, .toast.update button { pointer-events:auto; }

/* ---- Phase 4/5: added time, event feed, shoot-out tally, team management, richer results ---- */
.added { font-size:.75rem; color:#ffd166; font-variant-numeric:tabular-nums; }
.feed { position:absolute; top:calc(62px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:4px; pointer-events:none; }
.feed li { background:rgba(0,0,0,.68); padding:3px 12px 3px 10px; border-radius:6px; font-size:.82rem; border-left:5px solid #9ad; animation:feedin .25s ease-out; }
.feed li.yellow { border-left-color:#ffd400; } .feed li.red { border-left-color:#e8261d; } .feed li.flag { border-left-color:#ff8a3d; } .feed li.sub { border-left-color:#4ade80; } .feed li.inj { border-left-color:#f472b6; }
@keyframes feedin { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.shootout { position:absolute; bottom:calc(56px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); background:rgba(0,0,0,.7); padding:8px 14px; border-radius:10px; }
.sorow { display:flex; align-items:center; gap:6px; font-size:.85rem; } .sorow span { min-width:110px; font-weight:700; }
.sorow i { width:12px; height:12px; border-radius:50%; border:2px solid #888; display:inline-block; } .sorow i.hit { background:#4ade80; border-color:#4ade80; } .sorow i.miss { background:#e8261d; border-color:#e8261d; }
.tm { width:min(980px,96vw); max-height:92vh; overflow:auto; }
.tm .tabs { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; } .tm .tabs .btn.on { background:#2e8b57; border-color:#4ade80; }
.tm table { width:100%; border-collapse:collapse; font-size:.88rem; } .tm td, .tm th { padding:4px 6px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; }
.tm tr.pick { cursor:pointer; } .tm tr.pick:hover, .tm tr.pick:focus { background:rgba(255,255,255,.08); outline:none; } .tm tr.sel { background:rgba(74,222,128,.22); }
.tm tr.dim { opacity:.45; } .tm .st { display:inline-block; width:60px; height:6px; background:#333; border-radius:3px; vertical-align:middle; } .tm .st i { display:block; height:100%; border-radius:3px; }
.tm .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:720px) { .tm .grid2 { grid-template-columns:1fr; } }
.tm .mini { width:100%; max-width:360px; aspect-ratio:105/68; background:#2e8b57; border:2px solid #fff; border-radius:4px; position:relative; }
.tm .mini b { position:absolute; transform:translate(-50%,-50%); background:#fff; color:#123; border-radius:50%; width:22px; height:22px; font-size:.7rem; display:grid; place-items:center; }
.timeline { list-style:none; padding:0; margin:6px 0; max-height:180px; overflow:auto; font-size:.85rem; columns:2; } .timeline li { break-inside:avoid; padding:2px 0; }
@media (max-width:640px) { .timeline { columns:1; } }
.ratings { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; font-size:.82rem; } .ratings span b { float:right; }
.chip { display:inline-block; width:8px; height:11px; border-radius:2px; vertical-align:-1px; margin-right:4px; } .chip.y { background:#ffd400; } .chip.r { background:#e8261d; }
.tm > .row:last-child { position:sticky; bottom:-1px; background:linear-gradient(transparent, rgba(10,24,18,.96) 30%); padding-top:12px; margin-top:8px; }

/* =====================================================================================================================
   Hub: full-screen menus (no floating dialogs). Night-match stadium, royal-blue broadcast panels, club-colour stripe.
   ===================================================================================================================== */
@font-face { font-family:'Barlow'; font-weight:400; font-display:swap; src:url(fonts/barlow-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:500; font-display:swap; src:url(fonts/barlow-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:600; font-display:swap; src:url(fonts/barlow-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:600; font-display:swap; src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:700; font-display:swap; src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:800; font-display:swap; src:url(fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); }
:root { --navy:#061a45; --royal:#1450b4; --royal2:#0e3c8f; --pane:rgba(9,36,94,.9); --steel:#dfe5ee; --cyan:#38c4ff; --gold:#f3c437; --club:#e23b3b;
  --cond:'Barlow Condensed','Arial Narrow','Roboto Condensed',sans-serif; --body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif; }
.screen:has(> .hub) { padding:0; background:transparent; }
.hub { position:absolute; inset:0; display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto; font-family:var(--body); color:#f2f6ff; text-align:left;
  background:
    radial-gradient(ellipse 30% 22% at 12% 6%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(ellipse 30% 22% at 88% 6%, rgba(255,255,255,.2), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #041233 0%, #0a2a6a 46%, rgba(10,42,106,.88) 74%, rgba(6,60,30,.55) 100%); }
.hub button { font-family:var(--body); }
/* header: crest, club name, system chip; the club colour is the stripe under it */
.hub-top { display:flex; align-items:center; gap:16px; padding:10px 22px 10px; background:linear-gradient(90deg, rgba(20,80,180,.95), rgba(14,60,143,.9) 60%, rgba(14,60,143,.55));
  border-bottom:5px solid var(--club); box-shadow:0 2px 0 rgba(255,255,255,.25); }
.hub-top .crestwrap { flex:0 0 auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.hub-top .ttl { min-width:0; flex:1; }
.hub-top h1 { font-family:var(--cond); font-weight:800; font-size:clamp(1.6rem,3.6vw,2.6rem); letter-spacing:.02em; text-transform:uppercase; margin:0; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 0 rgba(0,0,0,.35); }
.hub-top .ttl p { margin:4px 0 0; color:#c9d8f5; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hub-sys { display:flex; align-items:center; gap:8px; background:rgba(3,16,46,.75); border:1px solid rgba(255,255,255,.25); padding:5px 8px 5px 12px; font-size:.82rem; color:#dbe6fb; }
.hub-sys .dot { width:9px; height:9px; border-radius:50%; background:#8a96ad; } .hub-sys .dot.ok { background:#4ade80; }
.hub .btn.mini { min-height:30px; padding:3px 10px; font-size:.8rem; border-radius:3px; background:rgba(255,255,255,.08); }
/* tab rail: steel bar, the active tab is royal blue */
.hub-tabs { display:flex; background:var(--steel); margin:0 22px; box-shadow:0 2px 0 rgba(0,0,0,.25); overflow-x:auto; scrollbar-width:none; }
.hub-tabs .tab { flex:1 1 0; min-width:max-content; border:0; border-radius:0; background:transparent; color:#25324d; font-family:var(--cond); font-weight:700; font-size:1.08rem; padding:8px 18px; text-align:center; cursor:pointer; border-right:1px solid rgba(0,0,0,.08); }
.hub-tabs .tab:hover { background:rgba(20,80,180,.12); }
.hub-tabs .tab.on { background:var(--royal); color:#fff; box-shadow:inset 0 -3px 0 var(--cyan); }
/* broadcast ticker: the one moving element */
.hub-ticker { margin:6px 22px 0; background:rgba(2,12,36,.85); border-left:4px solid var(--club); overflow:hidden; white-space:nowrap; height:28px; display:flex; align-items:center; font-family:var(--cond); font-weight:600; font-size:1rem; letter-spacing:.01em; }
.hub-ticker .track { display:inline-flex; gap:80px; padding-left:100%; animation:ticker 38s linear infinite; }
@keyframes ticker { to { transform:translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .hub-ticker .track { animation:none; padding-left:12px; } .hub-ticker .track span + span { display:none; } }
/* body */
.hub-body { min-height:0; overflow:auto; padding:10px 22px 10px; }
.hub-hints { display:flex; gap:22px; align-items:center; padding:7px 22px; background:linear-gradient(90deg, rgba(4,40,52,.95), rgba(4,40,52,.75)); border-top:1px solid rgba(255,255,255,.15); font-size:.86rem; color:#d5e6ee; }
.hub-hints .hint b { display:inline-block; min-width:22px; padding:0 6px; margin-right:6px; background:#e8eef6; color:#142033; border-radius:3px; font-family:var(--cond); font-weight:700; text-align:center; }
/* panels with title bars */
.hp { background:var(--pane); border:1px solid rgba(120,170,255,.28); display:flex; flex-direction:column; min-width:0; min-height:0; }
.hp > h2 { margin:0; padding:4px 10px; font-family:var(--cond); font-weight:700; font-size:1.05rem; background:linear-gradient(180deg, var(--royal), var(--royal2)); border-bottom:1px solid rgba(255,255,255,.2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp .hpb { padding:6px 10px; min-height:0; overflow:auto; flex:1; }
.hp .empty { color:#b9c9e8; font-size:.9rem; margin:.2em 0 .6em; }
/* home dashboard grid */
.dash { display:grid; gap:8px; height:100%; grid-template-columns:minmax(0,2.15fr) minmax(150px,.9fr) minmax(0,1.55fr); grid-template-rows:minmax(0,1.2fr) minmax(118px,.85fr) minmax(138px,1fr) auto;
  grid-template-areas:"feature tiles standings" "feature scorers standings" "calendar calendar next" "launch launch launch"; }
.dash .feature { grid-area:feature; } .dash .tiles { grid-area:tiles; } .dash .standings { grid-area:standings; } .dash .scorers { grid-area:scorers; }
.dash .calendar { grid-area:calendar; } .dash .next { grid-area:next; } .dash .launchrow { grid-area:launch; }
.feature { position:relative; overflow:hidden; background:linear-gradient(115deg, color-mix(in srgb, var(--club) 55%, #06205a) 0%, #0b2d72 55%, #082256 100%); }
.feature .art { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:22px; padding:10px; background:radial-gradient(circle at 50% 60%, rgba(255,255,255,.16), transparent 62%); }
.feature .art .v { font-family:var(--cond); font-weight:800; font-size:2rem; color:rgba(255,255,255,.75); }
.feature .art .ball { font-size:3rem; filter:grayscale(.2); }
.feature .story { background:linear-gradient(0deg, rgba(3,14,40,.96), rgba(3,14,40,.82)); padding:10px 14px 12px; border-top:2px solid var(--gold); }
.feature .story h3 { margin:0 0 4px; font-family:var(--cond); font-weight:700; font-size:1.3rem; color:var(--gold); line-height:1.1; }
.feature .story p { margin:0; font-size:.98rem; line-height:1.45; max-width:62ch; }
.feature .story .btn { margin-top:8px; }
.feature .pager { position:absolute; top:8px; right:8px; display:flex; gap:4px; }
.feature .pager button { width:26px; height:24px; border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.45); color:#fff; font-family:var(--cond); font-weight:700; cursor:pointer; padding:0; }
.feature .pager button.on { background:#f2f6ff; color:#0b1f4a; }
.tiles { display:flex; flex-direction:column; gap:8px; background:transparent; border:0; }
.tile { flex:1; background:var(--pane); border:1px solid rgba(120,170,255,.28); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; padding:6px; min-height:0; text-align:center; }
.tile > :nth-child(2) { margin-top:auto; } .tile > :last-child { margin-bottom:auto; }
.tile h4 { align-self:stretch; margin:-6px -6px 4px; padding:3px 8px; font-family:var(--cond); font-weight:700; font-size:.98rem; background:linear-gradient(180deg, var(--royal), var(--royal2)); }
.tile small { color:#c3d3ef; font-size:.8rem; }
.ring { width:72px; height:72px; flex:0 0 auto; } .ring .bg { fill:none; stroke:rgba(255,255,255,.15); stroke-width:7; } .ring .fg { fill:none; stroke:var(--cyan); stroke-width:7; stroke-linecap:round; }
.ring text { fill:#fff; font-family:var(--cond); font-weight:800; font-size:20px; }
.form { display:flex; gap:4px; } .form i { font-style:normal; width:24px; height:24px; display:grid; place-items:center; font-family:var(--cond); font-weight:800; font-size:.9rem; }
.form i.W { background:#16a34a; } .form i.D { background:#64748b; } .form i.L { background:#dc2626; }
table.st { width:100%; border-collapse:collapse; font-family:var(--cond); font-weight:600; font-size:1.02rem; }
table.st td { padding:3px 6px; border-bottom:1px solid rgba(255,255,255,.07); white-space:nowrap; }
table.st tr:nth-child(odd) td { background:rgba(255,255,255,.035); }
table.st .pos { width:2.2em; text-align:center; color:#c3d3ef; } table.st .cr { width:26px; padding:1px 2px; } table.st .cr svg { display:block; }
table.st .nm { overflow:hidden; text-overflow:ellipsis; max-width:0; width:100%; text-transform:uppercase; letter-spacing:.01em; }
table.st .pts { text-align:right; font-weight:800; }
table.st tr.me td { background:rgba(56,196,255,.24); } table.st tr.top .pos { color:var(--gold); } table.st tr.down .pos { color:#ff8c8c; }
.calendar .cal { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:3px; height:100%; }
.calendar .day { display:flex; flex-direction:column; background:rgba(255,255,255,.06); min-width:0; }
.calendar .dh { font-family:var(--cond); font-weight:700; font-size:.92rem; text-align:center; padding:2px; background:rgba(223,229,238,.88); color:#1c2a45; }
.calendar .day.now .dh { background:var(--cyan); color:#062040; } .calendar .day.cup .dh { background:#e9d8a6; }
.calendar .dbody { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; position:relative; padding:3px; }
.calendar .ha { position:absolute; top:3px; left:3px; font-family:var(--cond); font-weight:800; font-size:.75rem; background:#d9dfe8; color:#1c2a45; padding:0 4px; }
.calendar .day.done { opacity:.7; } .calendar .res { font-family:var(--cond); font-weight:700; color:#fff; }
.calendar.quick .qrow { display:flex; align-items:center; gap:22px; height:100%; }
.calendar.quick .qrow > div { display:flex; flex-direction:column; } .calendar.quick b { font-family:var(--cond); font-weight:800; font-size:1.6rem; line-height:1; } .calendar.quick .btn { margin-left:auto; }
.next .nlabel { text-align:center; font-family:var(--cond); font-weight:600; color:#c9d8f5; font-size:.95rem; }
.next .nteams { display:flex; align-items:center; justify-content:space-around; margin:4px 0; }
.next .nteams > div { display:flex; flex-direction:row; align-items:center; gap:8px; font-family:var(--cond); font-weight:800; font-size:1.5rem; }
.next .nteams .me b { color:var(--gold); } .next .v { font-family:var(--cond); font-weight:800; font-size:1.3rem; opacity:.7; }
.next .row { margin-top:2px; justify-content:center; } .next .row .btn { margin-left:0; }
.launchrow { flex-direction:row; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; background:transparent; border:0; }
.hub .btn.launch { display:flex; flex-direction:column; align-items:flex-start; gap:0; text-align:left; border-radius:0; padding:8px 12px; min-height:56px; background:linear-gradient(180deg, rgba(20,80,180,.92), rgba(10,44,110,.92)); border:1px solid rgba(140,190,255,.35); border-left:4px solid rgba(255,255,255,.35); }
.hub .btn.launch .lt { font-family:var(--cond); font-weight:700; font-size:1.18rem; line-height:1.1; } .hub .btn.launch small { color:#c3d3ef; font-weight:500; font-size:.8rem; }
.hub .btn.launch.primary { border-left-color:var(--gold); background:linear-gradient(180deg, #1d63d4, #0f449f); color:#fff; }
.hub .btn.launch:hover, .hub .btn.launch:focus-visible { border-left-color:var(--cyan); background:linear-gradient(180deg, #2470e6, #134fb4); }
/* the hub's controls: square broadcast buttons, cyan focus */
.hub .btn { border-radius:3px; font-weight:600; }
.hub .btn.primary { background:var(--gold); color:#14203a; }
.hub :focus-visible { outline:3px solid var(--cyan); outline-offset:1px; box-shadow:0 0 0 5px rgba(56,196,255,.35); }
/* every existing screen becomes a full-width page inside the hub (not a floating dialog) */
.hub-body .panel { width:100%; max-width:none; max-height:none; min-height:100%; overflow:visible; margin:0; border-radius:0; box-shadow:none; backdrop-filter:none; text-align:left;
  background:var(--pane); border:1px solid rgba(120,170,255,.28); padding:0 16px 14px; }
.hub-body .panel > h2:first-child { margin:0 -16px 12px; padding:6px 16px; font-family:var(--cond); font-weight:700; font-size:1.25rem; background:linear-gradient(180deg, var(--royal), var(--royal2)); border-bottom:1px solid rgba(255,255,255,.2); }
.hub-body h3 { font-family:var(--cond); font-weight:700; font-size:1.15rem; }
.hub-body .tabs .tab { border-radius:0; font-family:var(--cond); font-weight:700; } .hub-body .tabs .tab.on { background:var(--royal); color:#fff; border-color:var(--cyan); }
.hub-body .note, .hub-body small, .hub-body .flabel { color:#c3d3ef; }
.hub-body select, .hub-body input[type=text], .hub-body input[type=password] { border-radius:2px; background:rgba(2,12,36,.7); border-color:rgba(140,190,255,.35); }
.hub-body .panel .cols { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
/* play page */
.playgrid { display:grid; gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); }
.playgrid .big { grid-row:span 2; } .playgrid .hp p { margin:0 0 12px; max-width:52ch; line-height:1.45; }
.playgrid .big .hpb { background:linear-gradient(160deg, color-mix(in srgb, var(--club) 40%, transparent), transparent 70%); }
.playgrid .big p { font-size:1.08rem; }
/* in-match frame: scoreboard header */
.hub.match .hub-top.score { justify-content:center; gap:28px; }
.hub.match .side { display:flex; align-items:center; gap:10px; flex:1; font-family:var(--cond); font-weight:800; font-size:clamp(1.2rem,2.6vw,1.9rem); text-transform:uppercase; min-width:0; }
.hub.match .side.r { justify-content:flex-end; }
.hub.match .sc { display:flex; flex-direction:column; align-items:center; } .hub.match .sc strong { font-family:var(--cond); font-weight:800; font-size:clamp(2rem,4.5vw,3rem); line-height:1; background:rgba(2,12,36,.75); padding:2px 18px; }
.hub.match .sc small { color:#c9d8f5; margin-top:2px; }
.hub.match .hub-tabs { margin-top:0; }
.hub.match .hub-body .panel { min-height:0; }
.hub.match { background:linear-gradient(180deg, rgba(4,18,51,.94), rgba(10,42,106,.9) 70%, rgba(10,42,106,.8)); }
.overlay:has(> .hub) { padding:0; background:transparent; }
/* small screens: dashboard stacks; landscape phones keep two columns */
@media (max-width:900px) {
  .dash { height:auto; grid-template-columns:1fr 1fr; grid-template-rows:none; grid-template-areas:"feature feature" "tiles standings" "scorers next" "calendar calendar" "launch launch"; }
  .dash .feature { min-height:260px; } .launchrow { grid-template-columns:repeat(3,minmax(0,1fr)); } .playgrid { grid-template-columns:1fr 1fr; }
  .hub-sys > span:not(.dot) { display:none; }
}
@media (max-height:520px) {
  .hub-top { padding:4px 14px; } .hub-top .crestwrap svg { width:40px; height:40px; } .hub-top h1 { font-size:1.4rem; } .hub-top .ttl p { display:none; }
  .hub-tabs, .hub-ticker { margin-left:14px; margin-right:14px; } .hub-tabs .tab { padding:5px 12px; font-size:.95rem; } .hub-ticker { height:22px; font-size:.85rem; }
  .hub-body { padding:6px 14px; } .hub-hints { padding:4px 14px; font-size:.75rem; } .dash { height:auto; grid-template-rows:none; }
}
@media (max-width:560px) { .dash { grid-template-columns:1fr; grid-template-areas:"feature" "next" "standings" "tiles" "scorers" "calendar" "launch"; } .launchrow { grid-template-columns:1fr 1fr; } .playgrid { grid-template-columns:1fr; } .calendar .cal { grid-template-columns:repeat(5,minmax(0,1fr)); } }

/* toasts sit above the hint bar, clear of the header and tabs */
#app:has(.hub) #toasts { top:auto; left:auto; right:16px; transform:none; width:auto; max-width:min(460px,60vw); align-items:flex-end; bottom:calc(4px + env(safe-area-inset-bottom)); }
#app:has(.hub) .toast { border-radius:3px; padding:5px 12px; background:rgba(2,12,36,.94); border-color:rgba(140,190,255,.45); }

.tile.season .srow { display:flex; align-items:center; gap:10px; margin:auto 0; } .tile.season .scol { display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; }
.tile.season .ring { width:66px; height:66px; }
.dash .scorers table.st td { padding:2px 6px; }
.next .nteams { margin:0; } .next .nteams svg { width:40px; height:40px; }

.dash .scorers table.st { font-size:.96rem; } .dash .scorers table.st td { padding:1px 6px; }
/* a page's action row (Back / Kick Off / Save...) stays visible at the bottom of the frame */
.hub-body .panel > .row:last-child { position:sticky; bottom:-14px; z-index:2; margin:14px -16px -14px; padding:10px 16px; background:linear-gradient(0deg, rgba(6,26,69,.98), rgba(6,26,69,.9)); border-top:1px solid rgba(140,190,255,.3); }
.hub-body .prow, .hub-body .team, .hub-body .matchcard, .hub-body .clubs .club { border-radius:2px; }
.hub-body .panel { display:flex; flex-direction:column; } .hub-body .panel > .row:last-child { margin-top:auto; }

.hub.match { grid-template-rows:auto auto minmax(0,1fr) auto; }
.hub.match:not(:has(.hub-tabs)) { grid-template-rows:auto minmax(0,1fr) auto; }
.pausegrid { display:grid; grid-template-columns:minmax(260px,360px) minmax(0,1fr); gap:8px; height:100%; }
.pausegrid > .panel { min-height:0; }
.pausegrid .live { background:none; padding:0; white-space:normal; font-size:inherit; min-height:0; border-radius:0; }
.pausegrid table.st td:first-child, .pausegrid table.st td:last-child { width:4.5em; text-align:center; font-weight:800; }
.pausegrid table.st td:nth-child(2) { text-align:center; color:#c3d3ef; }
.pausegrid .gl { list-style:none; margin:8px 0 0; padding:0; font-family:var(--cond); font-weight:600; font-size:1.02rem; columns:2; }
@media (max-width:760px) { .pausegrid { grid-template-columns:1fr; } }

.pausegrid > .panel > .stack { gap:6px; } .pausegrid > .panel > .stack .btn { text-align:left; padding-left:16px; }

/* results page: three panels side by side */
.panel.result .resgrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); gap:8px; flex:1; min-height:0; }
.panel.result .resgrid .hp { min-height:0; }
.panel.result .scorers { text-align:left; margin:0 0 6px; font-family:var(--cond); font-weight:700; font-size:1.08rem; }
.panel.result .timeline { columns:1; max-height:none; margin:0; font-size:.92rem; }
.panel.result table.st td:first-child, .panel.result table.st td:last-child { width:4.5em; text-align:center; font-weight:800; }
.panel.result table.st th { text-align:center; font-weight:600; color:#c3d3ef; padding:3px 6px; border-bottom:1px solid rgba(255,255,255,.07); }
.panel.result .ratings { grid-template-columns:1fr; gap:10px; font-size:.95rem; }
.panel.result .ratings .rt { display:flex; justify-content:space-between; padding:2px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.panel.result .ratings b.hi { color:#4ade80; } .panel.result .ratings b.lo { color:#ff8c8c; }
@media (max-width:900px) { .panel.result .resgrid { grid-template-columns:1fr 1fr; } .panel.result .resgrid .ratings { grid-column:span 2; } }
@media (max-width:560px) { .panel.result .resgrid { grid-template-columns:1fr; } .panel.result .resgrid .ratings { grid-column:auto; } }

/* short landscape screens (phones): two columns, compact story art, the page scrolls */
@media (max-height:520px) and (min-width:640px) {
  .dash { height:auto; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); grid-template-rows:none; grid-auto-rows:auto;
    grid-template-areas:"feature next" "feature standings" "tiles scorers" "calendar calendar" "launch launch"; }
  .dash .feature { min-height:0; } .feature .art { padding:6px; gap:12px; } .feature .art svg { width:64px; height:64px; }
  .feature .story { padding:6px 10px 8px; } .feature .story h3 { font-size:1.1rem; } .feature .story p { font-size:.88rem; }
  .dash .standings .hpb { max-height:150px; } .launchrow { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hub .btn.launch { min-height:44px; padding:5px 10px; } .hub .btn.launch small { display:none; }
  .panel.result .resgrid { grid-template-columns:1fr 1fr; } .panel.result .resgrid .ratings { grid-column:span 2; }
  .hub.match .hub-top.score { padding:3px 14px; } .hub.match .sc strong { font-size:1.6rem; }
}
@media (max-width:560px) { .hub-sys { display:none; } .hub-top { padding:8px 14px; } .hub-tabs, .hub-ticker { margin-left:10px; margin-right:10px; } .hub-body { padding:8px 10px; } .hub-hints { gap:12px; white-space:nowrap; overflow:hidden; padding:6px 10px; } }

/* ---- rating tiers (shared): green 80+, lime 70s, amber 60s, red below ---- */
.r, .v { font-style:normal; font-family:var(--cond); font-weight:800; }
em.r { display:inline-block; min-width:2.2em; text-align:center; padding:0 4px; color:#081a3a; }
em.r.a { background:#4ade80; } em.r.b { background:#bef264; } em.r.c { background:#fcd34d; } em.r.d { background:#fb923c; }
td.v.a { color:#4ade80; } td.v.b { color:#d9f99d; } td.v.c { color:#fcd34d; } td.v.d { color:#fdba74; }

/* ---- pre-match line-up: vertical tactics board (own goal at the bottom) + setup column ---- */
.panel.lineup .lugrid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr); gap:8px; flex:1; min-height:0; }
.lucol { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; min-height:0; }
.boardwrap .hpb { display:flex; flex-direction:column; gap:6px; }
.board { position:relative; flex:1; min-height:320px; background:repeating-linear-gradient(90deg, #2a8a52 0 9%, #258049 9% 18%); border:2px solid rgba(255,255,255,.85); overflow:hidden; }
.board .pitchlines i { position:absolute; border:2px solid rgba(255,255,255,.7); }
.board .pitchlines .half { left:0; right:0; top:50%; height:0; border-width:2px 0 0; }
.board .pitchlines .circle { left:50%; top:50%; width:18%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; }
.board .pitchlines .box { left:22%; right:22%; height:15%; } .board .pitchlines .box.top { top:-2px; } .board .pitchlines .box.bottom { bottom:-2px; }
.board .pchip { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:1px; background:none; border:0; padding:2px 4px; cursor:pointer; color:#fff; font-family:var(--cond); min-width:64px; }
.board .pchip .shirt { width:34px; height:34px; display:grid; place-items:center; font-weight:800; font-size:1rem; background:var(--k1); color:var(--k2); border:2px solid rgba(255,255,255,.9); border-radius:6px 6px 10px 10px; box-shadow:0 2px 4px rgba(0,0,0,.4); }
.board .pchip .cn { font-weight:700; font-size:.95rem; background:rgba(3,14,40,.8); padding:0 5px; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board .pchip .cp { font-size:.78rem; font-weight:600; color:#dbeafe; text-shadow:0 1px 2px #000; }
.board .pchip.fit1 .cp { color:#fcd34d; } .board .pchip.fit0 .cp { color:#fca5a5; }
.board .pchip.sel .shirt, .board .pchip:focus-visible .shirt { outline:3px solid var(--cyan); outline-offset:2px; }
.board .pchip:focus-visible { outline:none; box-shadow:none; }
.benchlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.benchlist .brow { width:100%; display:grid; grid-template-columns:2.2em minmax(0,1fr) 3em 2.6em; gap:6px; align-items:center; text-align:left; background:rgba(255,255,255,.05); border:1px solid transparent; color:#fff; padding:4px 6px; cursor:pointer; font-family:var(--cond); font-weight:600; font-size:1rem; }
.benchlist .brow span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .benchlist .brow small { color:#c3d3ef; }
.benchlist .brow.sel { border-color:var(--cyan); background:rgba(56,196,255,.2); }
.oppp .opp { display:grid; grid-template-columns:auto minmax(0,1fr) 70px; gap:10px; align-items:center; } .oppp .opp b { font-family:var(--cond); font-weight:800; font-size:1.15rem; display:block; }
.minib { position:relative; width:70px; height:90px; background:#257d47; border:1px solid rgba(255,255,255,.7); } .minib i { position:absolute; width:7px; height:7px; border-radius:50%; background:#f87171; transform:translate(-50%,-50%); }
/* ---- squad: table + player card ---- */
.panel.squad .sqpick { margin:0 0 8px; } .panel.squad .sqpick select { min-width:200px; }
.sqgrid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr); gap:8px; flex:1; min-height:0; }
table.squadt th { font-family:var(--cond); font-weight:700; color:#c3d3ef; text-align:center; padding:3px 4px; position:sticky; top:-6px; background:#0b2a66; }
table.squadt td { text-align:center; padding:3px 4px; } table.squadt td.nm { text-align:left; text-transform:none; }
table.squadt tr.pick { cursor:pointer; } table.squadt tr.pick:hover td { background:rgba(255,255,255,.08); } table.squadt tr.sel td { background:rgba(56,196,255,.25); }
table.squadt tr:focus-visible { outline:2px solid var(--cyan); outline-offset:-2px; } table.squadt tr.sub td { opacity:.8; } table.squadt .xi { color:var(--gold); font-size:.8rem; }
.pcard .phead { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; }
.pcard .big { display:flex; flex-direction:column; align-items:center; background:linear-gradient(180deg, var(--gold), #c99a18); color:#14203a; padding:4px 10px; font-family:var(--cond); }
.pcard .big b { font-size:2.2rem; font-weight:800; line-height:1; } .pcard .big small { color:#14203a; font-weight:700; }
.pcard h3 { margin:0; font-size:1.4rem; } .pcard .note { margin:2px 0; font-size:.86rem; }
.pcard .traits { display:flex; flex-wrap:wrap; gap:4px; } .pcard .traits span { font-size:.78rem; background:rgba(56,196,255,.18); border:1px solid rgba(56,196,255,.4); padding:0 6px; }
.pcard .face { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin:10px 0; }
.pcard .face div { text-align:center; background:rgba(255,255,255,.06); padding:3px 0; border-bottom:3px solid; } .pcard .face b { font-family:var(--cond); font-weight:800; font-size:1.4rem; display:block; line-height:1.05; } .pcard .face small { font-family:var(--cond); font-weight:700; color:#c3d3ef; }
.pcard .face .a { border-color:#4ade80; } .pcard .face .b { border-color:#bef264; } .pcard .face .c { border-color:#fcd34d; } .pcard .face .d { border-color:#fb923c; }
.pcard .attrs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .pcard .attrs h4 { margin:0 0 4px; font-family:var(--cond); font-size:1rem; color:var(--gold); }
.pcard .ab { display:grid; grid-template-columns:minmax(0,1fr) 34px 22px; gap:4px; align-items:center; font-size:.8rem; padding:1px 0; }
.pcard .ab span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#dbe6fb; } .pcard .ab b { font-family:var(--cond); text-align:right; }
.pcard .ab i { height:5px; background:linear-gradient(90deg, currentColor var(--v), rgba(255,255,255,.12) var(--v)); }
.pcard .ab i.a { color:#4ade80; } .pcard .ab i.b { color:#bef264; } .pcard .ab i.c { color:#fcd34d; } .pcard .ab i.d { color:#fb923c; }
/* ---- history ---- */
.hsum { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0 0 8px; }
.hsum > div { background:var(--pane); border:1px solid rgba(120,170,255,.28); padding:6px 10px; } .hsum b { font-family:var(--cond); font-weight:800; font-size:1.8rem; display:block; line-height:1; }
.hsum .W b { color:#4ade80; } .hsum .L b { color:#f87171; }
table.histt th { text-align:left; font-family:var(--cond); color:#c3d3ef; padding:3px 6px; } table.histt td.nm { max-width:none; width:auto; text-transform:none; }
table.histt td.when { color:#c3d3ef; font-family:var(--body); font-size:.85rem; font-weight:500; } table.histt td.sc { white-space:normal; font-family:var(--body); font-weight:500; font-size:.88rem; }
i.res { font-style:normal; display:inline-grid; place-items:center; width:22px; height:22px; font-family:var(--cond); font-weight:800; } i.res.W { background:#16a34a; } i.res.D { background:#64748b; } i.res.L { background:#dc2626; }
@media (max-width:900px) { .panel.lineup .lugrid, .sqgrid { grid-template-columns:1fr; } .pcard .attrs { grid-template-columns:1fr 1fr; } .hsum { grid-template-columns:repeat(3,1fr); } }
@media (max-height:520px) { .board { min-height:260px; } }
/* line-up and squad pages fit the screen; long lists scroll inside their panels */
.hub-body .panel.lineup, .hub-body .panel.squad { height:100%; min-height:0; overflow:hidden; }
.panel.lineup .lugrid, .panel.squad .sqgrid { min-height:0; }
.lucol .hp, .sqgrid .hp { min-height:0; } .lucol .hp .hpb, .sqgrid .hp .hpb { overflow:auto; }
.boardwrap .hpb { overflow:hidden; } .board { min-height:0; }
.board .pchip .cn { display:block; color:#fff; }
.panel.lineup .lugrid, .panel.squad .sqgrid { grid-template-rows:minmax(0,1fr); } .lucol { min-height:0; overflow:hidden; }
@media (max-width:900px) { .hub-body .panel.lineup, .hub-body .panel.squad { height:auto; overflow:visible; } .panel.lineup .lugrid, .panel.squad .sqgrid { grid-template-rows:none; } .board { min-height:420px; } .lucol .hp .hpb, .sqgrid .hp .hpb { max-height:none; } }
.lucol > .hp:first-child .hpb { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.lucol > .hp:first-child .field { margin:0; } .lucol > .hp:first-child select { width:100%; min-height:34px; padding:5px 6px; }
.oppp .opp { grid-template-columns:auto minmax(0,1fr) 44px; } .oppp .minib { width:44px; height:56px; } .oppp .minib i { width:5px; height:5px; }
.oppp .hpb { padding:4px 10px; } .oppp .opp svg { width:34px; height:34px; }

/* landscape board: own goal on the left, attacking right */
.board .pitchlines .half { left:50%; right:auto; top:0; bottom:0; width:0; height:auto; border-width:0 0 0 2px; }
.board .pitchlines .box { top:24%; bottom:24%; left:auto; right:auto; width:13%; height:auto; } .board .pitchlines .box.left { left:-2px; } .board .pitchlines .box.right { right:-2px; }
.board .pitchlines .box.top, .board .pitchlines .box.bottom { display:none; }
.oppp .minib { width:64px; height:44px; }
.board .pchip { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:4px; row-gap:0; align-items:center; min-width:0; padding:1px 2px; text-align:left; }
.board .pchip .shirt { grid-row:span 2; width:28px; height:28px; font-size:.9rem; }
.board .pchip .cn { font-size:.86rem; line-height:1.15; padding:0 4px; max-width:84px; }
.board .pchip .cp { font-size:.72rem; line-height:1.1; padding-left:2px; }
table.squadt th.nm { text-align:left; }

/* ---- broadcast presentation: walk-out intro, half-time card, lower thirds ---- */
.intro { position:absolute; inset:0; pointer-events:auto; display:grid; grid-template-rows:auto 1fr auto; padding:calc(14px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(3,12,34,.55), rgba(3,12,34,.15) 30%, rgba(3,12,34,.15) 70%, rgba(3,12,34,.6)); font-family:var(--body); color:#fff; opacity:0; transition:opacity .35s; }
.intro.on { opacity:1; } .intro.out { opacity:0; }
.intro .ibar { justify-self:center; display:flex; gap:14px; align-items:baseline; background:rgba(3,14,40,.88); border-bottom:3px solid var(--gold); padding:6px 18px; font-family:var(--cond); }
.intro .ibar b { font-weight:800; font-size:1.3rem; text-transform:uppercase; letter-spacing:.03em; } .intro .ibar span { color:#c9d8f5; }
.intro .isheets { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:18px; align-items:center; }
.intro .isheet { background:rgba(4,20,56,.9); border-top:4px solid var(--k); max-width:330px; transform:translateX(-30px); opacity:0; transition:transform .6s ease-out .25s, opacity .6s .25s; }
.intro .isheet.r { justify-self:end; transform:translateX(30px); } .intro.on .isheet { transform:none; opacity:1; }
.intro .isheet header { display:flex; align-items:center; gap:10px; padding:8px 12px; background:linear-gradient(90deg, color-mix(in srgb, var(--k) 45%, #0b2a66), #0b2a66); }
.intro .isheet header b { display:block; font-family:var(--cond); font-weight:800; font-size:1.35rem; text-transform:uppercase; line-height:1; } .intro .isheet header small { color:#c9d8f5; }
.intro .isheet ol { list-style:none; margin:0; padding:4px 0; font-family:var(--cond); font-weight:600; font-size:1rem; }
.intro .isheet li { display:grid; grid-template-columns:2.2em 1fr auto; gap:6px; padding:2px 12px; } .intro .isheet li:nth-child(odd) { background:rgba(255,255,255,.04); }
.intro .isheet li i { font-style:normal; color:var(--gold); text-align:right; } .intro .isheet li em { font-style:normal; color:#9fb4d9; font-size:.85rem; }
.intro .ivs { display:flex; align-items:center; gap:14px; opacity:0; transform:scale(.85); transition:opacity .5s .1s, transform .5s .1s; } .intro.on .ivs { opacity:1; transform:none; }
.intro .ivs strong { font-family:var(--cond); font-weight:800; font-size:2.4rem; }
.intro .iskip { justify-self:end; background:rgba(3,14,40,.85); color:#fff; border:1px solid rgba(255,255,255,.35); padding:6px 14px; font-family:var(--cond); font-weight:700; cursor:pointer; }
@media (max-height:520px) { .intro .isheet ol { font-size:.82rem; } .intro .isheet li { padding:0 10px; } .intro .ivs svg { width:46px; height:46px; } .intro .isheet header { padding:4px 10px; } }
@media (max-width:700px) { .intro .isheets { grid-template-columns:1fr 1fr; } .intro .ivs { display:none; } }
.htcard { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(460px,92vw); background:rgba(4,20,56,.94); border-top:4px solid var(--gold); color:#fff; font-family:var(--body); pointer-events:none; }
.htcard header { padding:6px 14px; font-family:var(--cond); font-weight:800; font-size:1.3rem; text-transform:uppercase; background:linear-gradient(180deg, var(--royal), var(--royal2)); }
.htcard .hts { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:10px 14px; font-family:var(--cond); font-weight:800; font-size:1.15rem; text-transform:uppercase; }
.htcard .hts > div { display:flex; align-items:center; gap:8px; } .htcard .hts .r { justify-content:flex-end; } .htcard .hts strong { font-size:2rem; }
.htcard ul { list-style:none; margin:0; padding:0 14px 6px; columns:2; font-family:var(--cond); font-weight:600; } .htcard ul .r { text-align:right; }
.htcard table { width:calc(100% - 28px); margin:0 14px 8px; border-collapse:collapse; font-family:var(--cond); font-weight:700; }
.htcard td, .htcard th { padding:2px 4px; border-bottom:1px solid rgba(255,255,255,.08); } .htcard td { width:4em; text-align:center; } .htcard th { color:#c3d3ef; font-weight:600; }
.htcard footer { padding:6px 14px 8px; color:#c9d8f5; font-size:.9rem; }
.lower { position:absolute; left:18px; bottom:calc(64px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:10px; background:rgba(4,20,56,.94); border-left:5px solid var(--k); padding:6px 14px 6px 8px; color:#fff;
  transform:translateX(-120%); transition:transform .45s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.lower.on { transform:none; } .lower b { display:block; font-family:var(--cond); font-weight:800; font-size:1.3rem; letter-spacing:.02em; } .lower small { color:#c9d8f5; }
@media (prefers-reduced-motion: reduce) { .intro, .intro .isheet, .intro .ivs, .lower { transition:none; } }
#hud.intro-on > :not(.intro) { visibility:hidden; }

/* ---- compact broadcast HUD: no oversized overlays; the pitch stays the focus ---- */
#hud .banner { top:calc(52px + env(safe-area-inset-top)); font-family:var(--cond); font-weight:700; font-size:clamp(.92rem,1.5vw,1.1rem); letter-spacing:.04em; text-transform:uppercase;
  background:rgba(4,20,56,.92); color:#fff; border-left:4px solid var(--cyan); padding:4px 14px; border-radius:2px; text-shadow:none; transform:translate(-50%,-6px); white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis; }
#hud .banner.on { transform:translate(-50%,0); }
#hud .banner.goal { font-size:clamp(.92rem,1.5vw,1.1rem); color:#14203a; background:var(--gold); border-left-color:#fff; }
#hud .scorebar.flash { animation:sbflash .9s ease-out; }
@keyframes sbflash { 0% { box-shadow:0 0 0 0 rgba(243,196,55,.9); } 100% { box-shadow:0 0 0 14px rgba(243,196,55,0); } }
@media (prefers-reduced-motion: reduce) { #hud .scorebar.flash { animation:none; } }
/* player panels: bottom corners; on touch screens they sit at the top corners, clear of the stick and buttons */
.ppanel { position:absolute; bottom:calc(12px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; align-items:center;
  max-width:min(270px,38vw); background:rgba(4,20,56,.86); border-top:3px solid var(--k); padding:4px 10px 5px 6px; font-family:var(--body); pointer-events:none; }
.ppanel.l { left:calc(12px + env(safe-area-inset-left)); } .ppanel.r { right:calc(12px + env(safe-area-inset-right)); }
.ppanel[hidden] { display:none; }
.ppanel .pn { grid-row:span 2; font-style:normal; font-family:var(--cond); font-weight:800; font-size:1.25rem; min-width:1.8em; text-align:center; background:var(--k); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); padding:1px 4px; }
.ppanel .pt { min-width:0; } .ppanel .pt b { display:block; font-family:var(--cond); font-weight:700; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ppanel .pt small { display:block; color:#c3d3ef; font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ppanel .ps { grid-column:2; height:3px; background:rgba(255,255,255,.18); margin-top:3px; } .ppanel .ps i { display:block; height:100%; background:#4ade80; }
#app:has(#touch:not([hidden])) .ppanel { bottom:auto; top:calc(52px + env(safe-area-inset-top)); max-width:min(220px,30vw); }
#app:has(#touch:not([hidden])) #hud .banner { top:calc(96px + env(safe-area-inset-top)); }
@media (max-height:480px) { .ppanel .pt small { display:none; } .ppanel { padding:2px 8px 3px 4px; } }
/* on touch screens the goal caption sits at the top-left under the player panel, never over the stick or buttons */
#app:has(#touch:not([hidden])) .lower { bottom:auto; top:calc(110px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)); padding:4px 10px 4px 6px; }
#app:has(#touch:not([hidden])) .lower b { font-size:1rem; } #app:has(#touch:not([hidden])) .lower svg { width:28px; height:28px; }
/* in a match, toasts sit just above the commentary line instead of under the scoreboard */
#app:has(#hud:not([hidden])) #toasts { top:auto; bottom:calc(52px + env(safe-area-inset-bottom)); }
#app:has(#hud:not([hidden]) ):has(#touch:not([hidden])) #toasts { bottom:auto; top:calc(140px + env(safe-area-inset-top)); }

/* ---- manager career ---- */
.mgrgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:8px; }
.mtiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:6px; }
.mtile { background:rgba(255,255,255,.05); padding:6px 8px; display:flex; flex-direction:column; } .mtile b { font-family:var(--cond); font-weight:800; font-size:1.45rem; line-height:1.1; } .mtile small { color:#c3d3ef; font-size:.78rem; }
.mopts { margin-top:6px; } .nextm .nteams { display:flex; justify-content:space-around; align-items:center; margin:6px 0; } .nextm .nteams > div { display:flex; align-items:center; gap:8px; font-family:var(--cond); font-weight:800; font-size:1.2rem; }
.inbox { list-style:none; margin:0; padding:0; } .inbox li { padding:4px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.92rem; } .inbox li.att { border-left:3px solid var(--gold); padding-left:6px; }
.inbox li small { color:#9fb4d9; } .inbox.big li { padding:6px 0; }
.tablewrap { overflow:auto; max-height:min(56vh,520px); } table.mt th { position:sticky; top:0; background:#0b2a66; font-family:var(--cond); color:#c3d3ef; padding:3px 5px; text-align:left; }
table.mt td { padding:2px 5px; } table.mt td.nm { text-transform:none; max-width:none; width:auto; } table.mt tr.xi td { background:rgba(56,196,255,.1); } table.mt tr.inj td { color:#fca5a5; } table.mt tr.sc td { background:rgba(243,196,55,.08); }
table.mt input[type=checkbox] { width:18px; height:18px; } .star { background:none; border:0; color:var(--gold); font-size:1.1rem; cursor:pointer; }
table.st td.neg { color:#fca5a5; } table.st tr.up td { box-shadow:inset 3px 0 0 #4ade80; } table.st tr.dn td { box-shadow:inset 3px 0 0 #f87171; }
.note.warn { color:#fcd34d; } .note.good { color:#4ade80; } .btn.danger { border-color:rgba(248,113,113,.6); color:#fecaca; }
.simbar { height:14px; background:rgba(255,255,255,.12); margin:20px 0 8px; } .simbar i { display:block; height:100%; background:var(--cyan); transition:width .2s; }
.clublist { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:4px; max-height:52vh; overflow:auto; }
.clubpick { display:grid; grid-template-columns:auto auto 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; padding:4px 6px; background:rgba(255,255,255,.04); cursor:pointer; }
.clubpick input { grid-row:span 2; } .clubpick svg { grid-row:span 2; } .clubpick small { grid-column:3; color:#9fb4d9; font-size:.75rem; } .clubpick:has(input:checked) { background:rgba(56,196,255,.2); }

/* about */
.aboutcard { background:rgba(255,255,255,.05); border-left:4px solid var(--gold); padding:10px 16px; max-width:620px; }
.aboutcard h3 { margin:0; font-size:1.5rem; } .aboutcard dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; margin:10px 0 0; }
.aboutcard dt { color:#9fb4d9; font-family:var(--cond); font-weight:700; } .aboutcard dd { margin:0; } .aboutcard a { color:var(--cyan); }
.offers { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:6px; } .offers .btn { margin-top:6px; }
.hp h3 { margin:4px 0 2px; font-family:var(--cond); font-size:1.05rem; color:#c9d8f5; }

/* training ground */
.drills { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:8px; }
.drill { background:rgba(255,255,255,.05); border-top:3px solid rgba(255,255,255,.2); padding:8px 10px; display:flex; flex-direction:column; gap:4px; }
.drill.gold { border-top-color:#f3c437; } .drill.silver { border-top-color:#cbd5e1; } .drill.bronze { border-top-color:#d08a4f; }
.drill header { display:flex; justify-content:space-between; align-items:center; font-family:var(--cond); font-size:1.2rem; } .drill .medal { font-size:1.4rem; }
.drill p { margin:0; } .drill .small { font-size:.8rem; color:#c3d3ef; } .drill footer { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.drillhud { position:absolute; left:calc(12px + env(safe-area-inset-left)); top:calc(52px + env(safe-area-inset-top)); width:min(330px,40vw); background:rgba(4,20,56,.9); border-left:4px solid var(--gold); padding:6px 10px; pointer-events:none; font-size:.85rem; }
.drillhud b { font-family:var(--cond); font-size:1.1rem; text-transform:uppercase; } .drillhud .dscore { display:flex; align-items:baseline; gap:8px; } .drillhud .dscore strong { font-family:var(--cond); font-size:2rem; }
.drillhud p { margin:2px 0; } .drillhud .dnote { color:var(--gold); font-style:normal; font-weight:700; }
.drillres { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(380px,90vw); background:rgba(4,20,56,.96); border-top:4px solid var(--gold); padding:12px 16px; text-align:center; pointer-events:auto; }
.drillres .big { font-size:3.2rem; } .drillres .row { justify-content:center; }
#app:has(#touch:not([hidden])) .drillhud { top:calc(110px + env(safe-area-inset-top)); width:min(260px,34vw); font-size:.75rem; }

/* support / ads */
.supportcard { background:rgba(255,255,255,.05); border-left:4px solid var(--gold); padding:10px 16px; max-width:620px; } .supportcard h3 { margin:0 0 4px; } .supportcard ul { margin:4px 0 8px 18px; padding:0; }
.supportcard .price { font-family:var(--cond); font-size:2rem; font-weight:800; margin:0; } .supportcard input[type=email] { max-width:320px; }
.btn.support { border-color:rgba(243,196,55,.7); color:#fde68a; } .supporter { color:var(--gold); font-size:1.2rem; padding:0 4px; }
.adslot { grid-column:1/-1; background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.18); padding:6px 10px; min-height:60px; } .adslot .adtag { display:block; color:#9fb4d9; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.supkits { margin-top:8px; } .btn.locked { opacity:.55; }