/* Layout: CM 01/02-era desktop shell — navy backdrop, bevelled grey menu bar, club-coloured title strip, dense grey data panels. Single committed look. */
:root {
  --navy: #16223f;
  --navy-2: #22335c;
  --steel: #4d5f86;
  --steel-2: #6b7ca3;
  --panel: #d4d1cb;
  --panel-2: #c4c0b8;
  --row: #eceae5;
  --row-alt: #e0ddd6;
  --ink: #141414;
  --muted: #555c66;
  --link: #0b2e7a;
  --sel: #0a246a;
  --sel-ink: #ffffff;
  --hi: #ffd34d;
  --good: #1d7a2c;
  --bad: #b3261e;
  --warn: #b26a00;
  --bevel-l: #f4f2ee;
  --bevel-d: #807c74;
  --font: Tahoma, Verdana, "Segoe UI", "DejaVu Sans", sans-serif;
  --font-num: Tahoma, Verdana, "Segoe UI", sans-serif;
  --font-head: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
html, body { height: 100%; }
body {
  background: var(--navy) repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 6px);
  color: var(--ink); font: 12px/1.35 var(--font);
}
#app { min-height: 100%; display: flex; flex-direction: column; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 8px 24px; gap: 6px; max-width: 1280px; margin: 0 auto; box-sizing: border-box; }
a { color: var(--link); cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input { font: 12px var(--font); }
:focus-visible { outline: 2px dotted var(--hi); outline-offset: 1px; }

/* bevelled controls */
.btn, button {
  background: var(--panel); color: var(--ink); border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l);
  padding: 3px 10px; cursor: pointer; border-radius: 0; box-shadow: inset -1px -1px 0 #a9a59d;
}
button:active { border-color: var(--bevel-d) var(--bevel-l) var(--bevel-l) var(--bevel-d); box-shadow: inset 1px 1px 0 #a9a59d; }
button:disabled { color: #8a8780; cursor: default; }
button.primary { background: #2f6b3a; color: #fff; border-color: #5ea56b #173b1e #173b1e #5ea56b; box-shadow: none; font-weight: bold; }
button.danger { color: var(--bad); }
select, input[type=text], input[type=number] { background: #fff; color: var(--ink); border: 1px solid; border-color: var(--bevel-d) var(--bevel-l) var(--bevel-l) var(--bevel-d); padding: 2px 4px; }

/* top menu bar */
#top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; background: var(--panel); border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l); padding: 3px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
#top .menu { position: relative; }
#top .menu > button { font-weight: bold; min-height: 26px; }
#top .drop { position: absolute; top: 100%; left: 0; background: var(--panel); border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l); min-width: 210px; z-index: 30; box-shadow: 2px 2px 0 rgba(0,0,0,0.35); padding: 2px; display: flex; flex-direction: column; }
#top .drop a { padding: 4px 10px; color: var(--ink); }
#top .drop a:hover { background: var(--sel); color: var(--sel-ink); text-decoration: none; }
#top .drop .sep { height: 1px; background: var(--bevel-d); margin: 3px 2px; border-bottom: 1px solid var(--bevel-l); }
#top .spacer { flex: 1; }
#top .date { display: flex; align-items: center; padding: 0 10px; font-weight: bold; background: var(--navy-2); color: #fff; border: 1px solid; border-color: var(--bevel-d) var(--bevel-l) var(--bevel-l) var(--bevel-d); white-space: nowrap; }
#top #cont { background: #2f6b3a; color: #fff; font-weight: bold; padding: 3px 18px; border-color: #5ea56b #173b1e #173b1e #5ea56b; box-shadow: none; }
#top #cont::after { content: " \25B6"; }

/* title strip */
#titlebar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 2px solid rgba(0,0,0,0.45); font: bold 20px/1.1 var(--font-head); letter-spacing: 0.02em; text-transform: uppercase; min-height: 34px; }
#titlebar .sub { font: 12px var(--font); text-transform: none; letter-spacing: 0; opacity: 0.85; margin-left: auto; text-align: right; }

/* panels */
#view { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.panel { background: var(--panel); border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l); padding: 6px; min-width: 0; }
.panel > h3, .ph { margin: -6px -6px 6px; padding: 4px 8px; background: linear-gradient(var(--steel-2), var(--steel)); color: #fff; font: bold 12px var(--font); letter-spacing: 0.03em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.ph .r, .panel > h3 .r { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: normal; }
.cols { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }
.cols2 { display: grid; gap: 6px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.cols-side { display: grid; gap: 6px; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .cols2, .cols-side { grid-template-columns: minmax(0, 1fr); } }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.toolbar label { display: flex; gap: 4px; align-items: center; }
.muted { color: var(--muted); }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.big { font-size: 15px; font-weight: bold; }

/* tables */
.tw { overflow-x: auto; max-width: 100%; }
table.t { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
table.t th { background: var(--navy-2); color: #fff; font-weight: bold; text-align: left; padding: 3px 5px; white-space: nowrap; position: sticky; top: 0; cursor: default; }
table.t th.s { cursor: pointer; }
table.t th.s:hover { background: var(--steel); }
table.t td { padding: 2px 5px; white-space: nowrap; border-bottom: 1px solid #cbc7bf; }
table.t tr:nth-child(odd) td { background: var(--row); }
table.t tr:nth-child(even) td { background: var(--row-alt); }
table.t tr.me td { background: #f7e9a8; font-weight: bold; }
table.t tr.zone-up td:first-child { box-shadow: inset 3px 0 0 var(--good); }
table.t tr.zone-po td:first-child { box-shadow: inset 3px 0 0 #3a73c4; }
table.t tr.zone-down td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover td { background: var(--sel); color: var(--sel-ink); }
table.t tr.click:hover td a { color: var(--sel-ink); }
table.t td.n, table.t th.n { text-align: right; }
table.t td.c, table.t th.c { text-align: center; }
.form span { display: inline-block; width: 15px; text-align: center; color: #fff; font-size: 10px; font-weight: bold; margin-right: 1px; }
.form .W { background: var(--good); } .form .D { background: #7a7a7a; } .form .L { background: var(--bad); }
.tag { display: inline-block; padding: 0 4px; font-size: 10px; font-weight: bold; color: #fff; background: var(--steel); }
.tag.inj { background: var(--bad); } .tag.sus { background: #8b1a1a; } .tag.tl { background: var(--warn); } .tag.loan { background: #3a73c4; } .tag.ll { background: #6a4fb3; } .tag.cap { background: #b8860b; } .tag.set { background: #5f7f5f; }
.stags { display: inline-flex; flex-wrap: wrap; gap: 3px; } .stags span { font-size: 10px; padding: 0 4px; border: 1px solid var(--line, #999); background: rgba(0,0,0,.04); }
.stars { color: #9a6c00; letter-spacing: -1px; font-size: 13px; }
.stars .off { color: #b8b3a8; }
.bar { display: inline-block; height: 9px; width: 60px; background: #b9b5ad; vertical-align: middle; position: relative; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--good); }
.bar.low i { background: var(--warn); } .bar.vlow i { background: var(--bad); }

#view > .toolbar { background: var(--panel); padding: 4px 6px; margin: 0; border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l); }

/* inbox */
.inbox { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); gap: 6px; align-items: start; }
@media (max-width: 760px) { .inbox { grid-template-columns: minmax(0, 1fr); } }
.inbox .list { max-height: 70vh; overflow-y: auto; }
.inbox .list .m { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 1px 6px; padding: 4px 6px; border-bottom: 1px solid #c3bfb7; cursor: pointer; background: var(--row); }
.inbox .list .m:nth-child(even) { background: var(--row-alt); }
.inbox .list .m.unread .tt { font-weight: bold; }
.inbox .list .m.sel { background: var(--sel); color: var(--sel-ink); }
.inbox .list .m .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox .list .m .fr { grid-column: 2; font-size: 11px; opacity: 0.75; }
.msg-body { background: #fbfaf7; border: 1px solid; border-color: var(--bevel-d) var(--bevel-l) var(--bevel-l) var(--bevel-d); padding: 12px 14px; min-height: 200px; line-height: 1.55; max-width: 70ch; }
.msg-body h2 { margin: 0 0 4px; font: bold 16px var(--font); }
.msg-acts { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

/* player */
.pgrid { align-items: start; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.attrs { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 1px 6px; background: var(--row); padding: 4px 6px; border: 1px solid #b8b4ac; }
.attrs .h { grid-column: 1 / -1; font-weight: bold; color: var(--navy-2); border-bottom: 1px solid #b8b4ac; margin-bottom: 2px; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
.attrs .v { text-align: right; font-weight: bold; font-variant-numeric: tabular-nums; }
/* attribute colours (FM style): red for poor, through amber and yellow, to light and dark green for the best */
.a1, .a2, .a3, .a4, .a5 { border-radius: 3px; padding: 0 4px; }
.attrs .v.a1, .attrs .v.a2, .attrs .v.a3, .attrs .v.a4, .attrs .v.a5 { text-align: center; }
.a1 { background: #c0392b; color: #fff; } .a2 { background: #e67e22; color: #fff; } .a3 { background: #f1c40f; color: #222; } .a4 { background: #8bc34a; color: #10300a; } .a5 { background: #1e7d32; color: #fff; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: bold; }

/* tactics pitch */
.pitch { position: relative; width: 100%; max-width: 520px; aspect-ratio: 68 / 80; background: repeating-linear-gradient(0deg, #2f7a35 0 10%, #348a3b 10% 20%); border: 2px solid #e8e8e8; box-sizing: border-box; overflow: hidden; margin: 0 auto; }
.pitch::before { content: ""; position: absolute; left: 22%; right: 22%; top: -2px; height: 15%; border: 2px solid rgba(255,255,255,0.7); }
.pitch::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -2px; height: 15%; border: 2px solid rgba(255,255,255,0.7); }
.pitch .half { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,0.7); }
.pitch .circ { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,0.7); border-radius: 50%; transform: translate(-50%, -50%); }
.slot { position: absolute; transform: translate(-50%, -50%); width: 25%; max-width: 128px; text-align: center; cursor: pointer; z-index: 2; }
.slot .shirt { display: block; margin: 0 auto 2px; width: 28px; height: 22px; border: 2px solid #111; font: bold 11px/18px var(--font); color: #111; background: #fff; }
.slot .nm { display: block; background: rgba(10,20,40,0.82); color: #fff; padding: 1px 3px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .cd { display: block; font-size: 10px; color: #e6f2e6; }
.slot.f-ok .shirt { border-color: #0d5c13; } .slot.f-mid .shirt { border-color: #c98a00; } .slot.f-bad .shirt { border-color: #c4271c; }
.slot.selp .nm { background: var(--hi); color: #111; }
.slot.empty .nm { background: rgba(160,0,0,0.85); }
.bench { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px; margin-top: 6px; }
.bench .bs { background: var(--row); border: 1px solid #b4afa6; padding: 3px 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bench .bs.selp { background: var(--hi); }
.bench .bs b { color: var(--muted); font-weight: normal; margin-right: 4px; }
.instr { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 8px; align-items: center; }

/* match */
.scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; background: #000; border: 2px solid var(--bevel-d); }
.scoreboard .tm { padding: 8px 12px; font: bold 18px var(--font-head); text-transform: uppercase; display: flex; align-items: center; min-width: 0; overflow: hidden; }
.scoreboard .tm.h { justify-content: flex-end; text-align: right; }
.scoreboard .sc { background: #0d0d0d; color: var(--hi); font: bold 30px/1 var(--font-num); padding: 8px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.scoreboard .sc small { font: bold 12px var(--font); color: #fff; margin-top: 4px; }
.comm-now { background: #000; color: #fff; font: bold 17px/1.4 var(--font); padding: 14px 16px; min-height: 64px; border: 2px solid var(--bevel-d); border-top: 0; display: flex; align-items: center; }
.comm-now.goal { color: var(--hi); animation: goalflash 0.36s 9; }
@keyframes goalflash { 50% { background: #ffd34d; color: #111; } }
@keyframes flash { 50% { background: #3b3b00; } }
@media (prefers-reduced-motion: reduce) { .comm-now.goal { animation: none; } }
.comm-log { max-height: 260px; overflow-y: auto; background: #101826; color: #d7dde8; padding: 4px 8px; font-size: 12px; }
.comm-log div { padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.comm-log div b { color: var(--hi); }
.comm-log .m { display: inline-block; width: 32px; color: #8aa0c8; }
.lineup td.r { font-weight: bold; }
.statcmp { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 2px 8px; align-items: center; font-variant-numeric: tabular-nums; }
.statcmp .l { text-align: right; font-weight: bold; } .statcmp .rr { font-weight: bold; } .statcmp .k { text-align: center; color: var(--muted); }

/* modal & busy */
#modal { position: fixed; inset: 0; background: rgba(5,10,25,0.6); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
#modal .box { background: var(--panel); border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l); width: min(720px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: 4px 4px 0 rgba(0,0,0,0.5); }
#modal .box .ph { margin: 0; }
#modal .box .in { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
#busy { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--navy-2); color: #fff; padding: 8px 16px; border: 2px solid var(--steel-2); z-index: 60; font-weight: bold; }
#toast { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); top: calc(70px + env(safe-area-inset-top, 0px)); background: #fff8d6; border: 1px solid #b29a3a; padding: 6px 12px; z-index: 60; max-width: 320px; box-shadow: 2px 2px 0 rgba(0,0,0,0.3); }

/* start screen */
.start { display: grid; gap: 6px; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .start { grid-template-columns: minmax(0, 1fr); } }
.logo { font: bold 44px/0.95 var(--font-head); color: #fff; text-transform: uppercase; letter-spacing: 0.01em; padding: 18px 4px 6px; }
.logo small { display: block; font: bold 14px var(--font); color: var(--hi); letter-spacing: 0.25em; margin-top: 6px; }
.blurb { color: #c9d2e6; max-width: 70ch; padding: 0 4px 10px; line-height: 1.5; }
.chip { display: inline-block; width: 12px; height: 12px; border: 1px solid #000; vertical-align: middle; margin-right: 4px; }
.vs-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
@media (max-width: 640px) { .vs-cols { grid-template-columns: minmax(0, 1fr); } }

/* 2D match */
.mgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 6px; align-items: start; }
@media (max-width: 980px) { .mgrid { grid-template-columns: minmax(0, 1fr); } }
.mleft { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.pitchwrap { position: relative; border: 2px solid var(--bevel-d); background: #2f7d36; line-height: 0; }
.pitchwrap canvas { width: 100%; height: auto; display: block; }
.cliptag { position: absolute; top: 8px; left: 8px; background: rgba(10,20,40,0.85); color: var(--hi); font: bold 12px var(--font); padding: 3px 8px; letter-spacing: 0.08em; line-height: 1.3; }
.mctl { background: var(--panel); padding: 4px 6px; margin: 0; border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l); }
.mtabs { display: flex; flex-wrap: wrap; gap: 2px; margin: -6px -6px 6px; padding: 3px; background: linear-gradient(var(--steel-2), var(--steel)); }
.mtabs button { padding: 2px 8px; }
.mtabs button.on { background: var(--hi); font-weight: bold; }
.minip { width: 100%; height: auto; display: block; border: 1px solid var(--bevel-d); }
.shouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.shout { background: var(--row); border: 1px solid #b4afa6; padding: 6px 8px; cursor: pointer; line-height: 1.35; }
.mright .tw { max-height: 520px; overflow-y: auto; }

.cliptag.replay { background: #b8860b; }
.mctl label input[type=checkbox] { vertical-align: -2px; }

.pitch .ghost { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 26px; border: 2px dashed rgba(255,255,255,0.75); border-radius: 4px; color: #fff; font: bold 10px/22px var(--font); text-align: center; background: rgba(0,0,0,0.18); z-index: 1; display: block; opacity: 0; pointer-events: none; transition: opacity .12s; }
.pitch.dragging .ghost { opacity: 1; pointer-events: auto; z-index: 3; }
.pitch .ghost.dropover { background: rgba(255,214,77,0.55); color: #111; }
.slot.dropover .shirt, .bench .bs.dropover { outline: 3px solid var(--hi); }
body.tdrag .cols-side > .panel.dropover { outline: 3px dashed var(--hi); outline-offset: -3px; }
[draggable="true"] { cursor: grab; }
.minp { display: inline-flex; align-items: stretch; gap: 0; }
.minp input { width: 110px; text-align: right; }
.minp .step { display: inline-flex; flex-direction: column; margin-left: 2px; }
.minp .step button { padding: 0 6px; font-size: 9px; line-height: 11px; height: 13px; }

.inbox .list .m.needs, .inbox .list .m.needs:nth-child(even) { box-shadow: inset 4px 0 0 #d4a017; background: #fff3c4; }
.inbox .list .m.needs.sel { background: var(--sel); }
.tag.act { background: #d4a017; color: #111; }
.msg-acts button:first-child { font-weight: bold; }
.warnbox { border-left: 4px solid #d4a017; background: #fff7d6; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
ul.roundup { margin: 4px 0 0 18px; padding: 0; } ul.roundup li { margin: 2px 0; }
#modal .box.wide { width: min(1080px, 100%); }
.mteam { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 12px; }
.mteam .pitch { max-width: 460px; }
.mteam-side { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) { .mteam { grid-template-columns: 1fr; } }

.minp .cur { align-self: center; margin-right: 3px; font-weight: bold; }
.mpop { position: absolute; z-index: 80; background: var(--panel, #fff); border: 1px solid #555; box-shadow: 3px 3px 0 rgba(0,0,0,0.35); max-height: 300px; overflow-y: auto; font-variant-numeric: tabular-nums; }
.mpop .mo { padding: 3px 10px; cursor: pointer; text-align: right; white-space: nowrap; }
.mpop .mo:hover { background: var(--hi, #ffd34d); color: #111; }
.mpop .mo.cur { font-weight: bold; background: var(--sel, #0d2a6b); color: var(--sel-ink, #fff); }
.numin { width: 34px; text-align: center; }

.attrs .v { position: relative; } .attrs .v .arr { font-style: normal; font-size: 9px; position: absolute; right: calc(100% + 3px); top: 50%; transform: translateY(-50%); line-height: 1; } .arr.up { color: #0a9a18; } .arr.dn { color: #c4271c; }
.potm { margin-top: 6px; padding: 4px 8px; background: #fff7d6; border: 1px solid #d9c46a; }
.potm .star { color: #c99a00; font-size: 14px; }
.elsewhere td { padding: 2px 4px; }
.elsewhere tr.flash td { background: #fff3a8; }
.comm-log .else { color: #3a5a8a; }
.afrow { margin-top: 4px; align-items: center; flex-wrap: wrap; }
.afrow .lbl { font-weight: bold; margin-right: 2px; }
.afrow .af { display: inline-flex; align-items: center; gap: 3px; border: 1px solid #b9b9b9; padding: 1px 3px; background: #f4f4f4; }
.afrow .af .x { padding: 0 4px; min-width: 0; }
/* comparison */
.cmpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.cmph .nm { font-size: 15px; font-weight: bold; }
.cmpt td.k { color: #555; width: 40%; }
.cmpt td.n { text-align: right; width: 30%; }
.cmpt tr.grp td { background: #dde3ea; font-weight: bold; text-align: center; }
.cmpt td.cbet, .cmpt .v.cbet { font-weight: bold; background: #d6efd2; }
.cmpt .v { padding: 0 6px; }
.cmpres { max-height: 50vh; overflow-y: auto; margin-top: 6px; }
.cmpi { padding: 4px 6px; border-bottom: 1px solid #ddd; cursor: pointer; }
.cmpi:hover { background: #e8eef6; }
/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 6px; }
.cal .ch { background: #c9d1db; font-weight: bold; text-align: center; padding: 2px; }
.cal .cd { background: #fafafa; border: 1px solid #d3d3d3; min-height: 64px; padding: 2px 3px; font-size: 11px; overflow: hidden; }
.cal .cd.empty { background: transparent; border-color: transparent; }
.cal .cd.today { border: 2px solid #3a6ea5; }
.cal .cd.has { background: #fff; }
.cal .dn { font-weight: bold; color: #666; }
.cal .cfx { display: block; margin-top: 2px; padding: 1px 3px; background: #e5edf7; border-left: 3px solid #3a6ea5; cursor: pointer; color: #111; text-decoration: none; }
.cal .cfx.done { background: #eee; }
.cal .cfx .cmp { color: #555; font-size: 10px; }
.cal .cfx.comp-UCL, .cal .cfx.comp-UEL, .cal .cfx.comp-UECL { border-left-color: #1d3f8f; background: #e3e8fb; }
.cal .cfx.comp-FAC, .cal .cfx.comp-LC, .cal .cfx.comp-EFLT, .cal .cfx.comp-FAT, .cal .cfx.comp-CS { border-left-color: #a5702a; background: #f7efe1; }
.cal .cnote { margin-top: 2px; color: #8a3b12; font-size: 10px; }
@media (max-width: 700px) { .cal .cd { min-height: 48px; font-size: 10px; } .cmpgrid { grid-template-columns: 1fr; } }
/* groups, awards, euro */
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.tots { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
tr.cut td { border-bottom: 2px solid #3a6ea5; }
.warnbox.cong { background: #fff6e0; border-color: #e0b44a; }
.warnbox.cong ul { margin: 4px 0 0 18px; padding: 0; }
/* team report */
.trbar { position: relative; height: 10px; background: #e3e6ea; border: 1px solid #c3c8cf; }
.trbar i { position: absolute; left: 0; top: 0; bottom: 0; background: #7f93ad; }
.trbar i.good { background: #3f8f4a; } .trbar i.bad { background: #b9473a; }
.trbar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #111; }
.tag.trs { background: #3f8f4a; color: #fff; } .tag.trw { background: #b9473a; color: #fff; }
.trnotes { margin: 0 0 0 18px; padding: 0; } .trnotes li { margin: 3px 0; }
.radar { width: 100%; max-width: 380px; display: block; margin: 0 auto; }
.radlg { display: flex; gap: 14px; justify-content: center; font-size: 12px; }
.radlg i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: middle; }
.famline { background: #eef2f7; border: 1px solid #c9d3df; padding: 4px 8px; margin-bottom: 6px; }
.dlday { background: #b9473a; color: #fff; padding: 1px 6px; margin-left: 6px; font-weight: bold; }
button.mini { padding: 0 6px; font-size: 11px; min-width: 0; }
table.t tr.mine td { background: #fff1c9; }
table.t tr.seen td { background: #ece6f7; }
table.t tr.mine.seen td { background: #f5e6c0; }
.srchkey .key { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: 0 4px 0 10px; border: 1px solid #aaa; }
.srchkey .key.mine { background: #fff1c9; } .srchkey .key.seen { background: #ece6f7; }
.slot > * { pointer-events: none; }
.pitch .slot > .nm[data-p] { pointer-events: auto; cursor: pointer; }
.pitch .slot > .nm[data-p]:hover { text-decoration: underline; }
.fdot { display: inline-block; min-width: 24px; text-align: center; font-size: 10px; border-radius: 3px; margin-right: 1px; color: #fff; }
.fdot.g { background: #1e7d32; } .fdot.o { background: #c98a00; } .fdot.b { background: #b03a2e; }
tr.selrow td { background: var(--hi) !important; color: #111; }
.nextopp { padding: 5px 8px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toolbar.tight { margin: 2px 0 6px; gap: 4px; }
.msg-done { border-top: 1px dashed #b8b4ac; padding-top: 4px; margin-top: 8px; color: #1e5c22; }
/* use the space on big screens */
@media (min-width: 1500px) {
  #app { max-width: 1720px; }
  body, button, select, input { font-size: 13px; }
  .cols-side { grid-template-columns: minmax(320px, 460px) minmax(0, 1fr); }
  .inbox { grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); }
  .pitch { max-width: 600px; }
  .inbox .list { max-height: 76vh; }
}
@media (min-width: 1900px) {
  #app { max-width: 2000px; }
  body, button, select, input { font-size: 14px; }
  .cols-side { grid-template-columns: minmax(360px, 520px) minmax(0, 1fr); }
  .pitch { max-width: 680px; }
}
.issues { margin: 6px 0 10px 18px; padding: 0; } .issues li { margin: 2px 0; } .issues li.bad { color: var(--bad); font-weight: bold; } .issues li.warn { color: var(--warn); font-weight: bold; } .issues li.note { color: var(--muted); }
#timeskip { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 16px; z-index: 60; background: var(--panel); border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l); box-shadow: 0 4px 14px rgba(0,0,0,.35); padding: 6px 8px; max-width: min(520px, calc(100vw - 32px)); font-size: 12px; }
#timeskip .tsh { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
#timeskip .tsstrip { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 4px; }
#timeskip .tsd { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--row); border: 1px solid #b8b4ac; font-size: 10px; }
#timeskip .tsd.from { outline: 2px solid var(--steel); } #timeskip .tsd.to { outline: 2px solid var(--hi); background: #fff3c4; font-weight: bold; }
#timeskip .tsd.w { background: #2e8b3e; color: #fff; } #timeskip .tsd.l { background: #b03a2e; color: #fff; } #timeskip .tsd.dr { background: #8a8a8a; color: #fff; } #timeskip .tsd.fx { background: #22335c; color: #fff; }
#timeskip .tsd.key { box-shadow: inset 0 -3px 0 #d4a017; }
#timeskip .tslist { max-height: 120px; overflow-y: auto; border-top: 1px solid #b8b4ac; padding-top: 3px; }
#timeskip .tsnext { border-top: 1px solid #b8b4ac; margin-top: 3px; padding-top: 3px; font-weight: bold; }
.budgetbar { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 5px 8px; }
#ctxmenu { position: fixed; z-index: 80; min-width: 190px; background: var(--panel); border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l); box-shadow: 0 4px 12px rgba(0,0,0,.35); padding: 2px; }
#ctxmenu .cxh { padding: 4px 8px; font-weight: bold; background: var(--navy-2); color: #fff; margin-bottom: 2px; white-space: nowrap; }
#ctxmenu .cxh .muted { color: #c9d2e6; font-weight: normal; }
#ctxmenu .cxi { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 4px 10px; }
#ctxmenu .cxi:hover:not([disabled]) { background: var(--sel); color: var(--sel-ink); }
#ctxmenu .cxi[disabled] { color: #888; }
#ctxmenu .cxi.danger { color: var(--bad); }
#ctxmenu .cxs { border-top: 1px solid var(--bevel-d); margin: 2px 4px; }
.comm-log .adv { color: #6a3d00; background: #fff3c4; border-left: 3px solid #d4a017; padding-left: 4px; }
.toolbar.tabs { flex-wrap: wrap; gap: 3px; }
.toolbar.tabs button.on { background: var(--navy-2); color: #fff; }
.cols-side.wide-right { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
@media (max-width: 860px) { .cols-side.wide-right { grid-template-columns: minmax(0, 1fr); } }
tr.z-ch td:first-child { box-shadow: inset 4px 0 0 #1e7d32; } tr.z-rel td:first-child { box-shadow: inset 4px 0 0 #b03a2e; }
.key.zch { background: #1e7d32; } .key.zrel { background: #b03a2e; }
.z-po td:first-child { box-shadow: inset 4px 0 0 #c98a12; }
.key.zpo { background: #c98a12; }
/* match screen */
.mright2 { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.advpanel .advlog { max-height: 190px; overflow-y: auto; font-size: 12px; }
.advlog div { padding: 4px 2px; border-bottom: 1px solid var(--bevel-d); line-height: 1.35; }
.advlog div.new { animation: advin 1.2s ease-out; }
.advlog .m { display: inline-block; width: 30px; color: var(--muted, #667); font-weight: bold; }
@keyframes advin { from { background: #fff1c9; } to { background: transparent; } }
.mctl2 { background: var(--panel); padding: 4px 6px; border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l); display: flex; flex-direction: column; gap: 4px; }
.mctl2 .mrow { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 26px; white-space: nowrap; overflow-x: auto; }
.mctl2 .slot1 { min-width: 120px; }
.mctl2 .mrow button { flex: none; }
.mctl2 .subsn { margin-left: auto; } .mctl2 .ftnote { min-width: 0; }
.comm-now.red { color: #ff6b5e; }
.comm-now { transition: background-color 0.25s, color 0.25s; }
.comm-now.goal { outline: 3px solid #ffd34d; outline-offset: -3px; }
.comm-log .cl { padding-left: 6px; border-left: 4px solid transparent; }
.comm-log .cl0 { border-left-color: var(--k0bg); } .comm-log .cl1 { border-left-color: var(--k1bg); }
.comm-log .clgoal { background: rgba(255, 211, 77, 0.16); animation: goalrow 1.6s ease-out; }
.comm-log .clyc { background: rgba(240, 200, 30, 0.08); } .comm-log .clrc { background: rgba(220, 50, 40, 0.18); }
@keyframes goalrow { 0% { background: rgba(255, 211, 77, 0.75); } 100% { background: rgba(255, 211, 77, 0.16); } }
#liveScore.scflash { animation: scflash 0.36s 9; }
@keyframes scflash { 50% { background: #ffd34d; color: #111; } }
@media (prefers-reduced-motion: reduce) { .comm-log .clgoal, #liveScore.scflash, .advlog div.new { animation: none; } }
.ovgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 12px; }
.ovgrid .ovh { font-weight: bold; border-bottom: 3px solid; padding-bottom: 2px; }
.ov { padding: 2px 0; } .ov .m { color: var(--muted, #667); }
.ov .ic { display: inline-block; width: 16px; text-align: center; margin-right: 3px; }
.ov .ic.yc, .ov .ic.rc { width: 9px; height: 12px; margin: 0 6px 0 3px; vertical-align: -1px; border-radius: 1px; } .ov .ic.yc { background: #f2c811; } .ov .ic.rc { background: #d22; }
.ov .ic.sub { color: #2a7; font-weight: bold; } .ov .ic.inj { color: #d22; font-weight: bold; }
.ov .ovball { vertical-align: -2px; }
.ov.nog { opacity: 0.5; }

.crest { height: 1.15em; width: auto; vertical-align: -0.24em; margin-right: 4px; }
.crest.big { height: 46px; vertical-align: middle; margin: 0 10px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.crest.title { height: 1.6em; vertical-align: -0.4em; margin-right: 8px; }

.commpanel .comm-log { max-height: 340px; }

.pitch .ghost { width: 52px; height: 30px; line-height: 26px; }
/* dragging on the pitch: everyone else fades back so the place you're dropping on stands out */
body.tdrag .pitch .slot, .mtdrag .pitch .slot { opacity: 0.32; transition: opacity .12s; }
body.tdrag .pitch .slot.dragsrc, .mtdrag .pitch .slot.dragsrc { opacity: 0.6; }
body.tdrag .pitch .slot.dropover, .mtdrag .pitch .slot.dropover { opacity: 1; z-index: 4; }
.pitch .slot.dropover .shirt { outline: 3px solid var(--hi); box-shadow: 0 0 0 6px rgba(255,214,77,0.35); transform: scale(1.18); }
.pitch .slot.dropover .nm { background: var(--hi); color: #111; }
.pitch.dragging .ghost.dropover { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 5px rgba(255,214,77,0.35); }
/* the calendar while time moves on (FM style) */
#calrun { position: fixed; z-index: 60; box-sizing: border-box; background: var(--panel); border: 1px solid; border-color: var(--bevel-l) var(--bevel-d) var(--bevel-d) var(--bevel-l); box-shadow: 0 6px 18px rgba(0,0,0,.35); padding: 4px; font-size: 12px; }
#calrun .crg { display: grid; gap: 2px; }
#calrun .crd { position: relative; height: 40px; background: #fafafa; border: 1px solid #d6d6d6; padding: 2px 3px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; min-width: 0; }
#calrun .crd .n { font-size: 10px; color: #555; font-weight: bold; white-space: nowrap; }
#calrun .crd .l { font-size: 10px; font-weight: bold; color: #123; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#calrun .crd .mo { position: absolute; top: 1px; right: 3px; font-size: 9px; font-weight: bold; color: #3a6ea5; text-transform: uppercase; }
#calrun .crd.m1 { border-left: 2px solid #3a6ea5; }
#calrun .crd.past { background: #e9ecef; } #calrun .crd.past .n { color: #999; }
#calrun .crd.run { background: #dfe9f5; }
#calrun .crd.now { border: 2px solid #3a6ea5; background: #fff7d6; }
#calrun .crd.fx { border-bottom: 3px solid #3a6ea5; } #calrun .crd.w { border-bottom: 3px solid #1f8b3a; } #calrun .crd.l { border-bottom: 3px solid #c4271c; } #calrun .crd.dr { border-bottom: 3px solid #b38b00; }
#calrun .crd.ev .l { color: #7a4a00; }
#calrun .crf { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 0 2px; white-space: nowrap; min-width: 0; }
#calrun .crf .st { color: #444; }
#calrun .crl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #333; }
#calrun .crl .sep { margin: 0 6px; color: #999; }
#calrun .crn { color: #123; }
@media (max-width: 700px) { #calrun .crl { display: none; } }

.splitrow { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 12px; }
.splitrow input[type=range] { flex: 1; min-width: 120px; }
.splittxt { margin: 4px 0 6px; }

.abcard { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.abcard .abc { background: #f4f1ea; border: 1px solid #cfc9bd; padding: 6px 8px; text-align: center; }
.abcard .abl { font-size: 11px; font-weight: bold; text-transform: uppercase; color: #555; letter-spacing: .3px; }
.abcard .stars { font-size: 24px; letter-spacing: 0; display: block; line-height: 1.2; }
.abcard .abw { font-size: 12px; font-weight: bold; color: #123; }
.abtxt { margin: 6px 0 0; font-size: 12px; }

.leggrp { margin-bottom: 6px; }
.legt { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: .3px; padding: 1px 4px; margin-bottom: 2px; color: #fff; display: inline-block; }
.legt.t0 { background: #9a6c00; } .legt.t1 { background: #3a6ea5; } .legt.t2 { background: #6b7a8a; }
.legrow { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 1px 0; border-bottom: 1px dotted #d3cec4; }
.legrow .muted { text-align: right; }
.legstands { margin-top: 6px; font-size: 12px; }

.wpslot { color: #9a6c00; font-weight: bold; font-size: 11px; }

.stytag { display: inline-block; font-size: 10px; font-weight: bold; padding: 0 4px; margin: 0 2px 1px 0; background: #e3e9f2; color: #234; border: 1px solid #b9c6d8; border-radius: 2px; white-space: nowrap; }
.simbar { padding: 6px 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ssrow { margin: 4px 0; }

.tag.esc { background: #6a4c93; color: #fff; }

.tag.knock { background: #c77d12; color: #fff; } .tag.chron { background: #7a2d2d; color: #fff; }
.rivt { font-size: 11px; font-weight: bold; padding: 0 5px; border-radius: 2px; background: #d9d4c7; color: #333; }
.rivt.r4 { background: #e2b04a; color: #222; } .rivt.r5 { background: #d9772b; color: #fff; } .rivt.r6 { background: #b8372a; color: #fff; }
.grid3 { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }

.slvl { font-size: 11px; font-weight: bold; padding: 0 5px; border-radius: 2px; }
.slvl.l1 { background: #c8a27a; color: #2b1a0a; } .slvl.l2 { background: #c9ced6; color: #1d2633; } .slvl.l3 { background: #e3c04d; color: #2a2100; }

.apt { color: #b8860b; letter-spacing: 1px; }
/* in-match team screen */
.mteam { grid-template-columns: minmax(300px, 440px) 1fr; }
.mteam-side .tw { max-height: 34vh; overflow-y: auto; }
.mtbench td { white-space: nowrap; }
.mttabs button.on { background: var(--hi); font-weight: bold; }
.mtpend { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.mtpend button { margin-left: auto; }
.mtinfo { display: flex; gap: 12px; align-items: flex-start; background: var(--row); border: 1px solid #b4afa6; padding: 6px 8px; }
.mtinfo > div:first-child { flex: 1; min-width: 0; }
.mtinfo .pospitch { margin: 0 !important; }
.pitch .slot.pend .nm { background: #1d6b2c; }
.pitch .slot .cd .bad { color: #ffb3ad; font-weight: bold; } .pitch .slot .cd .warn { color: #ffe08a; }
@media (max-width: 760px) { .mtinfo { flex-direction: column; } }
/* pre-match line-ups */
.prepitch { display: block; width: 100%; max-width: 330px; margin: 6px auto; border-radius: 4px; }
.preinfo { min-height: 2.6em; font-size: 12px; }
/* batch selection */
.mselc { width: 22px; text-align: center; }
tr.mrow td { background: #fff1c9 !important; }
.mbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 6px; margin-bottom: 4px; background: #fff7dd; border: 1px solid #d9c27a; }
/* shootout */
.sotalk { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.sotalk button { text-align: left; white-space: normal; padding: 6px 8px; line-height: 1.3; }
/* match day */
.mombar { position: relative; height: 14px; margin: 3px 0 0; border: 1px solid #222; overflow: hidden; }
.mombar span { position: absolute; inset: 0; text-align: center; font: bold 9px/14px Tahoma, Verdana, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.mombar i { display: block; height: 100%; transition: width .8s; }
ul.stakes { margin: 4px 0 4px 18px; padding: 0; } ul.stakes li { margin: 2px 0; }
.shouts { display: inline-flex; gap: 3px; margin: 0 6px; }
tr.sorow { cursor: grab; } tr.sorow.dropover td { border-top: 3px solid var(--hi); } tr.sorow.dragsrc { opacity: .5; }

.totw-t{margin:10px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.75}
.totw-g{margin:2px 0 6px;line-height:1.5}
.totw-h{display:block;font-size:11px;font-weight:600;opacity:.7}
.totw-sub{line-height:1.6}
.totw-sub .pos{display:inline-block;min-width:34px;font-size:11px;font-weight:600;opacity:.75}
/* v65: clinched places in league tables */
.cltag { display: inline-block; min-width: 14px; text-align: center; font-size: 10px; font-weight: bold; padding: 0 3px; margin-left: 4px; border-radius: 2px; color: #fff; vertical-align: 1px; }
.cltag.clC { background: #c9a227; } .cltag.clP { background: #2e8b3e; } .cltag.clPl { background: #2f6db5; } .cltag.clR { background: #b8372a; }
.cliptag .clsrc { display: block; font-weight: normal; letter-spacing: 0; font-size: 10px; opacity: 0.8; text-transform: none; }
/* v67: key highlights only */
label:has(> select[data-act="hmode"]) { display: none; }

/* (v71) match controls: three equal buttons in a row */
.mctl2 .mbtns3 > button { flex: 1 1 0; min-width: 0; }
.mctl2 .mbtns3 > .slot1 { min-width: 0; }
.pstack { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pstack > .panel { margin: 0; }
.subin { color: #1a8a2a; font-weight: bold; font-size: 11px; } .subout { color: #c0392b; font-weight: bold; font-size: 11px; }

/* ===================================================================
   v61 fit to the window: on a desktop-sized window the game never scrolls
   as a whole page. The menu bar and title stay put, the screen fills the
   rest of the window, and long lists scroll inside their own panels.
   (Narrow windows and phones keep the old scrolling page.)
   =================================================================== */
body { margin: 0; }
@media (min-width: 1100px) and (min-height: 560px) {
  html, body { height: 100%; overflow: hidden; }
  #app { height: 100vh; height: 100dvh; min-height: 0; padding-block: 8px; }
  #view { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  #view > * { flex-shrink: 0; }

  /* a panel holding a list gives way first: the list scrolls inside the panel */
  #view > .panel.shrink, .fitcol > .panel.shrink { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
  .panel.shrink > *, .panel.grow > * { flex: none; }
  .panel.shrink > .tw { flex: 0 1 auto; min-height: 72px; overflow: auto; max-height: none !important; }

  /* the main block of a rearranged screen takes the rest of the height */
  #view > .fit { flex: 1 1 0; min-height: 0; }
  .fit > * { min-height: 0; min-width: 0; }
  .fitcol { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; overflow-y: auto; }
  .fitcol > * { flex-shrink: 0; }
  .fitcol > .panel.grow { flex: 1 1 0; }
  .panel.grow { display: flex; flex-direction: column; min-height: 0; }
  .panel.grow > .tw, .panel.grow > .gbody { flex: 1 1 0; min-height: 0; overflow: auto; max-height: none !important; }

  /* pitches sized to the room they have, height as well as width */
  .pitchbox { flex: 1 1 0; min-height: 0; min-width: 0; container-type: size; display: flex; justify-content: center; align-items: flex-start; }

  /* ---- live match ---- */
  body[data-view="match"] #titlebar { display: none; }
  .sbcomp { margin-right: auto; font: 12px var(--font); text-transform: none; opacity: 0.85; white-space: nowrap; padding-right: 12px; }
  .scoreboard .tm { padding-block: 6px; }
  .scoreboard .sc { padding-block: 6px; font-size: 28px; }
  .mgrid.fit { align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); }
  .mgrid.fit .mleft { min-height: 0; }
  .mgrid.fit .pitchwrap { box-sizing: border-box; width: calc(min(100cqw - 4px, (100cqh - 4px) * 1120 / 750) + 4px); }
  .mgrid.fit .comm-now { min-height: 0; height: 46px; padding: 6px 14px; font-size: 16px; box-sizing: border-box; overflow: hidden; }
  .mgrid.fit .mright2 { min-height: 0; }
  .mgrid.fit .mctl2 { flex: none; }
  .mgrid.fit .mctl2 .mrow { flex-wrap: wrap; white-space: normal; overflow: visible; }
  .mgrid.fit .mright { flex: 0 1 auto; min-height: 120px; overflow-y: auto; }
  .mgrid.fit .mright .tw { max-height: none; }
  .mgrid.fit .advpanel { flex: none; }
  .mgrid.fit .commpanel { flex: 1 1 140px; min-height: 120px; display: flex; flex-direction: column; }
  .mgrid.fit .commpanel .comm-log { flex: 1 1 0; min-height: 0; max-height: none; }

  /* ---- pre-match: home | report | away ---- */
  .pregrid { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(340px, 0.62fr) minmax(0, 1fr); }
  .pregrid > .panel { display: flex; flex-direction: column; }
  .pregrid > .panel > * { flex: none; }
  .pretm { flex: 1 1 0 !important; min-height: 0; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(250px, 46%); }
  .pretm .pitchbox .prepitch { margin: 0; max-width: none; width: min(100cqw, 100cqh * 200 / 262); height: auto; }
  .pretm > .tw, .pretm > p { min-height: 0; overflow: auto; align-self: start; max-height: 100%; }
  .pregrid .preinfo { min-height: 0; }
  .pretm .lineup td { padding-inline: 3px; }
  .pretm .lineup { table-layout: fixed; }
  .pretm .lineup td { overflow: hidden; text-overflow: ellipsis; }
  .pretm .lineup td:first-child { width: 22px; } .pretm .lineup td:nth-child(3) { width: 30%; } .pretm .lineup td:nth-child(4) { width: 84px; }
  .pretm .lineup .bar { width: 28px; }

  /* ---- tactics: pitch | instructions | squad ---- */
  .cols-side.tacfit { grid-template-columns: clamp(300px, calc((100dvh - 300px) * 0.86), 820px) minmax(280px, 360px) minmax(0, 1fr); align-items: stretch; }
  .tacfit .fpanel { display: flex; flex-direction: column; min-height: 0; }
  .tacfit .fpanel > * { flex: none; }
  .tacfit .fpanel > .pitchbox { flex: 1 1 0; }
  .tacfit .pitchbox > .pitch { width: min(100cqw, 100cqh * 68 / 80); max-width: none; margin: 0; }
  .famchip { margin-left: auto; cursor: help; }
  .nextopp { margin-bottom: 0; }

  /* ---- player profile: attributes and history on the left, personal on the right ---- */
  .plfit { display: grid; gap: 6px; grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); }
  .plfit > .fitcol { overflow-y: auto; }
  .pbot { flex: 1 1 0 !important; min-height: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: minmax(0, 1fr); }
  .pbot > .panel { min-height: 0; overflow-y: auto; }
  .pbot > .panel.grow { overflow: hidden; }
  .pstk { display: flex; flex-direction: column; gap: 6px; min-height: 0; } .pstk > .panel { margin: 0; } .pstk > .panel:last-child { flex: 1 1 auto; overflow-y: auto; }
  .kv4 dl.kv { display: grid; grid-template-columns: auto 1fr auto 1fr; column-gap: 10px; row-gap: 2px; } .kv4 dl.kv dt, .kv4 dl.kv dd { margin: 0; width: auto; float: none; }
  .posflex { display: flex; gap: 12px; align-items: flex-start; }
  .posflex .pospitch { margin: 0 !important; }
  .posflex .posside { min-width: 0; }

  /* ---- squad: first team on the left, loans and registration alongside ---- */
  .sqfit { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(360px, 30%); }

  /* ---- comparison: attributes three across ---- */
  .cmpfit { display: grid; gap: 6px; grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); }
  .cmp3 { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .cmp3 .cmpt td.k { width: auto; }
  .cmpfit .radar { max-height: 300px; }

  /* ---- club information: details and manager | key players | results | legends and honours ---- */
  .clubfit { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.15fr); }
  .clubfit > .fitcol { overflow: hidden; }
  #view > .clubfit.fit { flex: 0 1 auto; }
  .clubfit .honp { flex: 0 1 auto; min-height: 80px; overflow-y: auto; }
  /* a sticky table heading stays above bars and badges in the rows when the list scrolls */
  table.t th { z-index: 3; }
  /* ---- club information ---- */
  .cols.colsfit { align-items: start; }
  .colsfit > .panel { max-height: 100%; overflow-y: auto; box-sizing: border-box; }

  /* ---- cups: one row of rounds, each scrolling inside ---- */
  .cupnext { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
  .cols.cupfit { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(290px, 1fr); align-items: start; overflow-x: auto; }
  .cupfit > .cupr { max-height: 100%; display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; }
  .cupfit > .cupr > * { flex: none; }
  .cupfit > .cupr > .tw, .cupfit > .cupr > table { flex: 0 1 auto; min-height: 0; overflow: auto; max-height: none !important; }
  .cupfit > .cupr > table { display: block; }

  /* ---- team report: three columns ---- */
  .trfit { display: grid; gap: 6px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }

  /* ---- (v73) match report: both line-ups, then the stats and the three charts, all on one screen ---- */
  .repfit { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }
  .repfit > .fitcol { overflow: hidden; }
  .repfit .panel.grow { display: flex; flex-direction: column; min-height: 0; margin: 0; }
  .repfit .panel.grow > * { flex: none; }
  .repfit .rlu > .tw { flex: 1 1 0; min-height: 0; overflow: auto; max-height: none !important; }
  .repfit .rstat { margin: 0; }
  .repfit .panel.rchart > canvas { flex: 1 1 0; min-height: 60px; width: 100%; height: 0; object-fit: contain; }
  #view > .panel > .potm { margin-bottom: 0; }
}
.ov .glink { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; cursor: pointer; white-space: nowrap; }
.ov .glink:hover { color: var(--link); }
.attrs .v .arr.big { font-size: 8px; letter-spacing: -2px; }

/* (v73) instruction names explain themselves on hover */
.instr label.tiplbl { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
/* (v74) messages use the width of the panel */
.msg-body { max-width: none; }
/* (v74) Team of the Week: the pitch sits to the right of the lists */
.msg-body > svg[aria-label="Team of the week"] { float: right; width: 340px !important; max-width: 40% !important; margin: 0 0 10px 18px !important; }
.msg-body .totw-t { clear: none; }
.msg-body::after { content: ""; display: block; clear: both; }
.v74rep { display: inline-flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }

#matchBtns button.mini.on { background: var(--hi); font-weight: bold; }