/* ChampMan UI — faithful to the CM 01/02 look (SPEC-01 §3).
   GEOMETRY: the whole UI lives on a fixed 800x600 logical canvas
   (the original's resolution) and is scaled to the viewport by JS —
   every size below is a logical pixel MEASURED from the reference
   screenshots (1443x1078 game area / 1.8).
   COLOURS: chrome colours come from theme variables (js/themes.js);
   the "CM 01/02" theme is the measured faithful default. Data-driven
   colours (club/competition palette colours) are never themed.
   FONT: original uses a proprietary bitmap face; Trebuchet MS Bold
   is the closest system match until we cut our own font. */

:root {
  --world-bg: #000038;
  --screen-text: #ffffff;
  --side-bg: #000020;
  --side-date-bg: #00007b;
  --side-btn-bg: #000063;
  --side-btn-border: #2020b0;
  --side-btn-hover: #000d8a;
  --accent: #ffff00;
  --manager-text: #6ac3da;
  --tab-bg: #210063;
  --tab-border: #5030a0;
  --titlebar-club-bg: #ffffff;
  --titlebar-club-fg: rgb(0, 32, 96); /* Blue 1 — measured */
  --titlebar-world-bg: #d20000;
  --titlebar-world-fg: #ffffff;
  --ctl-bg: #848284;
  --ctl-fg: #000000;
  --strip-bg: #004100;
  --strip-border: #007800;
  --heading-band: rgba(255,255,255,.25);
  --row-hover: rgba(255,255,255,.08);
  --info: #7ce8e7;
  --warn: #ff9a00;
  --alert: #ff3030;
  --muted: #9a9a9a;
  --font: "Trebuchet MS", "DejaVu Sans", Verdana, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }
body { background: #000; }

/* fixed logical canvas, scaled by js */
#app {
  position: absolute;
  left: 50%; top: 50%;
  width: 800px; height: 600px;
  transform: translate(-50%, -50%) scale(1);
  display: flex;
  background: var(--world-bg);
  font-family: var(--font);
  font-weight: bold;
  font-size: 12px;
  color: var(--screen-text);
}

/* --- sidebar (90 logical px) ---------------------------------------- */

#sidebar {
  width: 90px;
  flex: none;
  background: var(--side-bg);
  display: flex;
  flex-direction: column;
  padding: 5px 4px;
  gap: 5px;
}

.side-date {
  background: var(--side-date-bg);
  color: var(--accent);
  text-align: center;
  font-size: 10px;
  padding: 8px 2px;
  border: 1px solid var(--side-btn-border);
}

.side-arrows { display: flex; gap: 3px; }
.side-arrow {
  flex: 1;
  background: var(--side-btn-bg);
  color: var(--accent);
  border: 1px solid var(--side-btn-border);
  font-size: 11px;
  padding: 5px 0;
  cursor: pointer;
}
.side-arrow:disabled { color: #666; cursor: default; }

.side-nav { display: flex; flex-direction: column; gap: 5px; }
.side-btn {
  background: var(--side-btn-bg);
  color: var(--screen-text);
  font-family: var(--font);
  font-weight: bold;
  font-size: 10px;
  border: 1px solid var(--side-btn-border);
  padding: 9px 2px;
  cursor: pointer;
  white-space: pre-line;
  overflow-wrap: break-word;
  min-height: 34px;
}
.side-btn:hover { background: var(--side-btn-hover); }
.side-btn:disabled { color: #667; cursor: default; }
.side-btn-manager { color: var(--manager-text); }

.side-news {
  margin-top: auto;
  color: #ff2020;
  font-size: 11px;
  text-align: center;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --- screen shell ---------------------------------------------------- */

#screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 10px 9px;
  gap: 0;
  overflow: hidden;
}

.titlebar {
  height: 58px;
  flex: none;
  border: 2px solid #888;
  display: flex;
  align-items: center;
  justify-content: center;
}
.titlebar-club { background: var(--titlebar-club-bg); }
.titlebar-club .titlebar-text {
  color: var(--titlebar-club-fg);
  font-size: 30px;
  text-shadow: 1px 1px 0 #b8c4d8;
}
.titlebar-world { background: linear-gradient(180deg, #ff0000, var(--titlebar-world-bg)); }
.titlebar-world .titlebar-text { color: var(--titlebar-world-fg); font-size: 30px; }
.titlebar-competition .titlebar-text { font-size: 30px; }

.tabstrip { display: flex; gap: 3px; margin-top: 13px; flex: none; }
.tab {
  flex: 1;
  height: 35px;
  background: var(--tab-bg);
  color: var(--screen-text);
  font-family: var(--font);
  font-weight: bold;
  font-size: 13px;
  border: 1px solid var(--tab-border);
  cursor: pointer;
}
.tab:hover { color: var(--accent); }
.tab-active { outline: 2px solid var(--accent); color: var(--accent); }

.screen-body {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  margin-top: 7px;
  gap: 4px;
}

.controls-row { display: flex; gap: 4px; flex: none; }
.ctl {
  height: 19px;
  background: var(--ctl-bg);
  color: var(--ctl-fg);
  border: 1px outset #ddd;
  font-family: var(--font);
  font-weight: bold;
  font-size: 11px;
  padding: 0 12px;
  cursor: pointer;
}
.ctl-spacer { flex: 1; }

.stat-heading {
  height: 35px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 20px;
  background: var(--heading-band);
}

.selection-strip { display: flex; gap: 2px; flex: none; }
.slot {
  flex: 1;
  height: 21px;
  text-align: center;
  line-height: 19px;
  background: var(--strip-bg);
  color: #fff;
  font-size: 10px;
  border: 1px solid var(--strip-border);
}
.slot-greyed { color: #1c5c1c; }
.slot-alert { color: #ff2020; }

.player-cols { display: flex; gap: 12px; }
.player-col { flex: 1; display: flex; flex-direction: column; }

.player-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 2px;
}
.player-row:hover { background: var(--row-hover); }
.slot-badge {
  width: 36px;
  height: 19px;
  background: #000084;
  flex: none;
  color: #00c000;   /* assigned slot label, original green */
  font-size: 10px;
  text-align: center;
  line-height: 19px;
}
.slot-badge-drop { outline: 2px dashed #ff2020; outline-offset: -2px; }
.slot { cursor: grab; }
.slot-assigned { color: #ffff00; }   /* assigned strip slots turn yellow */
.slot-greyed { cursor: default; }
.green-menu-sep { height: 6px; background: #008200; border-top: 1px solid #005800; }
.status-spacer { width: 36px; flex: none; }
.player-name { flex: 1; font-size: 15px; }
.player-loan { color: var(--manager-text); }
.player-stat { color: var(--accent); font-size: 12px; width: 74px; text-align: right; white-space: nowrap; }

.chip {
  width: 36px;
  height: 19px;
  flex: none;
  text-align: center;
  line-height: 19px;
  font-size: 10px;
  font-weight: bold;
}
.chip-purple { background: #5f3979; color: #fff; }
.chip-orange { background: #d36500; color: #fff; }
.chip-red    { background: #840000; color: #fff; }
.chip-grey   { background: #424142; color: #fff; }
.chip-white  { background: #fff; color: #000; }
.chip-blue   { background: #000084; color: #fff; }

.quicklinks { display: flex; gap: 3px; margin-top: 6px; flex: none; }
.quicklink {
  flex: 1;
  height: 32px;
  background: var(--tab-bg);
  color: var(--screen-text);
  font-family: var(--font);
  font-weight: bold;
  font-size: 13px;
  border: 1px solid var(--tab-border);
  cursor: pointer;
}
.quicklink:hover { color: var(--accent); }

.footer { display: flex; gap: 4px; margin-top: 6px; flex: none; }
.btn-big {
  height: 33px;
  background: var(--ctl-bg);
  border: 2px outset #ddd;
  font-family: var(--font);
  font-size: 16px;
  font-weight: bold;
  color: var(--ctl-fg);
  cursor: pointer;
}
.btn-big:first-child { flex: 3; }
.btn-big:last-child { flex: 1; }
.btn-big:disabled { color: #999; cursor: default; }

.stub { color: #aab; padding: 24px; text-align: center; font-size: 13px; }

/* --- league table ----------------------------------------------------- */

.league-table { display: flex; flex-direction: column; }
.lt-row { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 2px; }
.lt-row:not(.lt-head):hover { background: var(--row-hover); }
.lt-head { color: var(--accent); font-size: 11px; }
.lt-cell { text-align: center; }
.lt-c0 { width: 36px; }
.lt-c1 { flex: 1; text-align: left; font-size: 15px; }
.lt-c2, .lt-c3, .lt-c4, .lt-c5, .lt-c6, .lt-c7 { width: 40px; font-size: 13px; }
.lt-c8 { width: 36px; }
.lt-user { color: var(--accent); }

/* --- fixtures list ----------------------------------------------------- */

.fixture-list { display: flex; flex-direction: column; }
.fixture-row { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 2px; }
.fixture-row:hover { background: var(--row-hover); }
.fixture-date { width: 82px; height: 19px; line-height: 19px; background: #000084; color: #fff; text-align: center; font-size: 10px; flex: none; }
.fixture-opp { flex: 1; font-size: 15px; }
.fixture-ha { width: 16px; text-align: center; font-size: 13px; }
.fixture-comp { width: 64px; color: var(--accent); font-size: 11px; }
.fixture-row .chip { width: 40px; }

/* --- news inbox --------------------------------------------------------- */

.news-list { max-height: 200px; overflow: auto; display: flex; flex-direction: column; flex: none; }
.news-row { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 2px; cursor: pointer; }
.news-row:hover { background: var(--row-hover); }
.news-row-selected, .news-row-selected:hover { background: #840000; color: #fff; }
.news-date { width: 100px; height: 19px; line-height: 19px; background: #000084; color: #fff; text-align: center; font-size: 10px; flex: none; }
.news-headline { font-size: 14px; }
.news-detail { flex: 1; padding: 10px 16px; display: flex; flex-direction: column; gap: 10px; }
.news-detail-headline { text-align: center; color: var(--accent); font-size: 20px; }
.news-detail-body { font-size: 14px; line-height: 1.5; white-space: pre-line; }

/* --- green settings modal (original Game Settings style) --------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-green {
  background: #008200;
  border: 2px solid #00b400;
  min-width: 340px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font);
  font-weight: bold;
}
.modal-title { color: #fff; font-size: 15px; text-align: center; }
.modal-row { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 12px; }
.modal-row-label { width: 70px; }
.modal-choices { display: flex; gap: 4px; flex: 1; }
.modal-choice {
  flex: 1;
  height: 26px;
  background: #008e00;
  color: #fff;
  border: 1px solid #00a000;
  font-family: var(--font);
  font-weight: bold;
  font-size: 11px;
  cursor: pointer;
}
.modal-choice:hover { color: var(--accent); }
.modal-choice-active { outline: 2px solid var(--accent); color: var(--accent); }
.modal-buttons { display: flex; gap: 4px; margin-top: 2px; }
.modal-buttons .btn-big { flex: 1; }

/* --- player profile ------------------------------------------------------ */

.player-header {
  margin-top: 6px;
  flex: none;
  text-align: center;
  font-size: 13px;
  color: var(--screen-text);
}

.attr-grid { display: flex; gap: 16px; flex: none; }
.attr-col { flex: 1; display: flex; flex-direction: column; }
.attr-row { display: flex; align-items: center; height: 19px; }
.attr-label { flex: 1; font-size: 12px; }
.attr-value { width: 30px; text-align: right; font-size: 12px; }
.attr-plain { width: auto; color: var(--accent); }
.attr-v-white  { color: var(--screen-text); }
.attr-v-yellow { color: var(--accent); }
.attr-v-orange { color: var(--warn); }
.attr-v-red    { color: var(--alert); }

.player-position-prose {
  margin-top: auto;
  text-align: center;
  font-size: 15px;
  color: var(--accent);
  padding: 8px 0;
}

/* --- green dropdown menu (original two-tone stripes) --------------------- */

.green-menu {
  display: flex;
  flex-direction: column;
  min-width: 190px;
  border: 1px solid #005800;
}
.green-menu-item {
  background: #008200;
  color: #fff;
  border: none;
  font-family: var(--font);
  font-weight: bold;
  font-size: 12px;
  text-align: left;
  padding: 7px 12px;
  cursor: pointer;
}
.green-menu-alt { background: #008e00; }
.green-menu-item:hover { color: var(--accent); }

/* --- live match screen (SPEC-01 §10 LIVE MATCH ANATOMY, MEASURED) --------- */

/* stand-in for the original's dimmed stadium photograph */
.screen-match { background: #3d453d; }

.match-board { display: flex; gap: 10px; margin-top: 3px; flex: none; }
.match-panel {
  flex: 1;
  display: flex;
  align-items: center;
  height: 55px;
  padding: 0 12px 0 14px;
  color: #000;
  border: 2px outset #f0f0f0;
}
.match-club { font-size: 22px; }
.match-score {
  margin-left: auto;
  width: 37px;
  height: 37px;
  line-height: 33px;
  text-align: center;
  background: #e7e3e7;   /* MEASURED grey 3D score box */
  color: #000;
  font-size: 22px;
  border: 2px outset #fff;
}

.match-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.match-band {
  height: 36px;
  flex: none;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5a5d5a;   /* MEASURED translucent grey over photo */
  color: #ffff00;
  font-size: 16px;
}
.match-meta { display: flex; margin-top: 5px; flex: none; }
.match-meta-spacer { flex: 1; }
.match-chip {
  background: #757875;
  color: #7ce8e7;        /* MEASURED cyan chip text */
  font-size: 12px;
  padding: 3px 10px;
}
.match-scorers { display: flex; margin-top: 8px; flex: none; min-height: 22px; }
.match-scorers-side { flex: 1; display: flex; flex-direction: column; gap: 2px; padding-left: 36px; }
.match-scorers-away { padding-left: 14px; }
/* two fixed columns per side: name, then the minute (MEASURED) */
.match-scorer-line { display: flex; font-size: 13px; color: #fff; }
.match-scorer-line span:first-child { width: 215px; }
.match-scorer-min { color: #ffff00; }
.match-attendance { color: #7ce8e7; }

.match-banner {
  width: 607px;          /* MEASURED ~607x67 logical */
  min-height: 67px;
  flex: none;
  margin: 26px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
  font-size: 19px;
  padding: 4px 18px;
  border: 2px solid transparent;
}
.match-banner-flash { color: #fff; border-color: #0000c6; }

.match-spring { flex: 1; }

.match-poss {
  flex: none;
  display: flex;
  align-items: center;
  height: 33px;
  background: #757875;
  border: 2px outset #b0b0b0;
  padding: 0 6px;
  gap: 12px;
  margin: 0 50px;
}
.match-poss-label { color: #e7e3e7; font-size: 12px; padding-left: 26px; width: 130px; flex: none; }
.match-poss-bar { flex: 1; display: flex; height: 21px; border: 1px solid #4a4a4a; }
.match-poss-seg {
  flex: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 12px;
  overflow: hidden;
}

.match-officials {
  flex: none;
  display: flex;
  justify-content: space-between;
  color: #ffff00;
  font-size: 13px;
  margin: 14px 4px 10px;
}

.match-stadium {
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #848284;   /* MEASURED stadium bar grey */
  color: #fff;
  font-size: 16px;
  margin-top: 6px;
}

/* non-overview tabs: bottom bar carries the live commentary */
.match-stadium-commentary { font-size: 17px; }
.quicklink-active { color: var(--accent); outline: 1px solid var(--accent); }
.match-alt { padding-top: 8px; }

/* Match Stats tab (matchday-match-stats.png, MEASURED) */
.mstat { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.mstat-row { display: flex; align-items: center; height: 26px; flex: none; }
.mstat-box {
  width: 93px;
  flex: none;
  text-align: center;
  background: #000084;
  color: #7ce8e7;
  font-size: 15px;
  line-height: 24px;
  border: 1px solid #2a2aa0;
}
.mstat-label { flex: 1; text-align: center; color: #fff; font-size: 16px; }
.mstat-yellow { color: #ffff00; }
.mstat-red { color: #ff3030; }

/* Action Zones tab (matchday-action-zones.png) */
.zones-viewbtn { align-self: flex-start; width: 125px; flex: none; }
.zones-pitch {
  flex: 1;
  margin: 10px 80px 0;
  background: #157015;
  border: 2px solid #2a8a2a;
  display: flex;
  flex-direction: column;
  padding: 8px 4px 6px;
}
.zones-head { display: flex; align-items: center; flex: none; padding: 0 8px; }
.zones-overall {
  margin: 0 auto;
  background: #0b4d0b;
  color: #d0e8d0;
  font-size: 13px;
  padding: 2px 26px;
}
.zones-ball { color: #ffff00; font-size: 12px; }
.zones-thirds { flex: 1; display: flex; }
.zones-third {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.zones-third-line { border-right: 2px dashed #cccc00; }
.zones-pc { color: #ffff00; font-size: 22px; }
.zones-bar {
  width: 80%;
  height: 12px;
  background: #fff;
  border: 2px outset #ddd;
  align-self: center;
  margin-top: auto;
}
.zones-bar-fill { height: 100%; }
.zones-poss {
  flex: none;
  display: flex;
  height: 22px;
  margin: 10px 40px 4px;
  border: 2px outset #b0b0b0;
}

/* Match Report tab (matchday-report-*.png) */
.report-empty { margin-top: 24px; text-align: center; font-size: 15px; color: #fff; }
.report { flex: 1; overflow: auto; margin-top: 4px; }
.report-row { display: flex; min-height: 19px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.report-min { width: 84px; flex: none; color: #ffff00; font-size: 12px; padding-left: 26px; }
.report-text { color: #fff; font-size: 12px; }

/* Team Stats tabs (matchday-teamstats*.png) */
.tstat { flex: 1; display: flex; flex-direction: column; overflow: auto; }
.tstat-row { display: flex; align-items: center; height: 18px; flex: none; gap: 2px; }
.tstat-head { height: 20px; margin-bottom: 2px; }
.tstat-num {
  width: 34px;
  flex: none;
  text-align: center;
  background: #000084;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  border: 1px solid #2a2aa0;
}
.tstat-head .tstat-num { background: none; border: none; }
.tstat-name { flex: 1; font-size: 12px; color: #fff; padding-left: 8px; }
.tstat-name-head { display: flex; justify-content: flex-end; align-items: center; }
.tstat-pager { display: inline-flex; gap: 2px; margin-right: 6px; }
.tstat-pager .side-arrow { flex: none; padding: 0 6px; font-size: 9px; }
.tstat-card { width: 13px; flex: none; display: flex; align-items: center; }
.tstat-card-on::before {
  content: '';
  width: 8px;
  height: 12px;
  background: #ffff00;
  border-right: 2px solid #c00000;
}
.tstat-cell { width: 30px; flex: none; text-align: center; font-size: 11px; }
.tstat-h { background: #848284; color: #fff; font-size: 10px; line-height: 16px; border: 1px solid #a0a0a0; }
.tstat-y { color: #ffff00; }
.tstat-o { color: #ff9a00; }
.tstat-c { color: #7ce8e7; }
.tstat-sub .tstat-name { color: #9a9a9a; }

/* Player Ratings tab (matchday-player-ratings.png) */
.ratings { flex: 1; display: flex; gap: 24px; overflow: auto; }
.ratings-col { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ratings-row { display: flex; align-items: center; height: 18px; flex: none; gap: 6px; }
.ratings-name { flex: 1; font-size: 13px; color: #fff; }
.tstat-sub .ratings-name { color: #9a9a9a; }
.ratings-val { width: 30px; text-align: right; color: #7ce8e7; font-size: 13px; }

/* Latest Scores tab (matchday-latest-scores.png) */
.latest-head { display: flex; align-items: center; flex: none; margin-top: 8px; }
.latest-title { flex: 1; text-align: center; color: var(--accent); font-size: 20px; }
.latest-page {
  flex: none;
  background: #000084;
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid #2a2aa0;
}
.latest-list { flex: 1; display: flex; flex-direction: column; gap: 34px; margin-top: 26px; overflow: auto; }
.latest-row { display: flex; align-items: center; flex: none; padding: 0 10px; }
.latest-club { flex: 1; color: #7ce8e7; font-size: 18px; }
.latest-score { width: 80px; text-align: center; color: #ffff00; font-size: 18px; }
.latest-club-away { padding-left: 20px; }
.latest-half { width: 60px; text-align: right; color: #fff; font-size: 11px; }
.latest-user .latest-club, .latest-user .latest-score { color: #ffff00; }

/* live league table extras */
.lt-up { color: #ffff00; font-size: 9px; }
.lt-down { color: #ff3030; font-size: 9px; }

/* --- tactics screen (tactics-*.png) --------------------------------------- */

#screen { position: relative; }
.tactics-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--world-bg);
  display: flex;
  flex-direction: column;
  padding: 8px 10px 9px;
}
.tac-body { flex: 1; display: flex; gap: 12px; overflow: hidden; margin-top: 6px; }
.tac-left { flex: 1; display: flex; flex-direction: column; }
.tac-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.tac-row { display: flex; align-items: center; height: 19px; gap: 8px; flex: none; }
.tac-name { flex: 1; font-size: 12px; color: var(--screen-text); }
.tac-sub .tac-name { color: var(--muted); }
.tac-capt { color: var(--accent); font-size: 11px; margin-right: 10px; }
.tac-con { width: 44px; text-align: right; font-size: 12px; color: var(--screen-text); flex: none; }
.tac-con-low { color: var(--accent); }
.tac-right { width: 320px; flex: none; display: flex; flex-direction: column; }
.tac-right .tabstrip { height: 30px; }
.tac-right .tab { font-size: 11px; }
.tac-pitch {
  flex: 1;
  position: relative;
  background: #157015;
  border: 2px solid #2a8a2a;
  margin-top: 4px;
  overflow: hidden;
}
.tac-box { position: absolute; left: 22%; width: 56%; height: 15%; border: 1px solid #2a9a2a; }
.tac-box-top { top: 0; border-top: none; }
.tac-box-bottom { bottom: 0; border-bottom: none; }
.tac-halfway { position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #2a9a2a; }
.tac-circle {
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  border: 1px solid #2a9a2a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.tac-disc {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 11px;
  line-height: 24px;
  text-align: center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: none;
}
.tac-disc-gk { cursor: default; }
/* the selected ball parcel (yellow dashed, tactics-*-zone-*.png) */
.tac-zone {
  position: absolute;
  border: 2px dashed #ffff00;
  pointer-events: none;
}
/* movement-target arrows (tactics-overview.png) */
.tac-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tac-arrow-line {
  stroke: #e8ffe8;
  stroke-width: 2px;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.tac-arrow-head { fill: #e8ffe8; }
.tac-disc-gk { background: #00c000; }
.tac-disc-name {
  position: absolute;
  transform: translate(-50%, 13px);
  color: #fff;
  font-size: 9px;
  white-space: nowrap;
}

/* Team Instructions modal (tactics-team-instructions.png, MEASURED) */
.ti-modal {
  width: 550px;
  background: #0a5c0a;
  border: 2px solid #00b400;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 10px;
  font-family: var(--font);
  font-weight: bold;
}
.ti-title {
  height: 36px;
  background: #000;
  color: #fff;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0000c6;
}
.ti-grid { display: flex; flex-direction: column; gap: 3px; padding: 4px 6px; }
.ti-row { display: flex; align-items: center; height: 26px; gap: 2px; }
.ti-label { width: 190px; flex: none; color: #fff; font-size: 14px; }
.ti-opt {
  width: 83px;
  flex: none;
  background: none;
  border: 1px solid transparent;
  color: #00d000;
  font-family: var(--font);
  font-weight: bold;
  font-size: 13px;
  padding: 3px 0;
  cursor: pointer;
}
.ti-opt:hover { color: #7ce87c; }
.ti-on, .ti-on:hover { color: #ffff00; border-color: #ffff00; }
.ti-pick {
  width: 18px;
  height: 18px;
  flex: none;
  background: #000084;
  color: #fff;
  border: 1px solid #2a2aa0;
  font-size: 9px;
  cursor: pointer;
  margin-left: 83px;
}
.ti-pick-name { color: #ffff00; font-size: 13px; padding-left: 10px; }
.ti-footer { margin-top: 4px; }

/* sidebar match mode: minute counter box (yellow number, no ') */
.side-minute {
  background: #000075;   /* MEASURED */
  color: #ffff00;
  text-align: center;
  font-size: 20px;
  padding: 9px 2px;
  border: 1px solid var(--side-btn-border);
}

/* commentary speed menu: anchored beside the sidebar, ✓ on current */
.modal-overlay-clear { background: transparent; }
.green-menu-anchored {
  position: absolute;
  z-index: 10;
  max-height: 560px;   /* never taller than the canvas; scrolls instead */
  overflow-y: auto;
}
.green-menu-item { display: flex; gap: 4px; }
.green-menu-check { width: 16px; flex: none; }

/* --- interstitial fixture/result screens (SPEC-01 §10) -------------------- */

.inter-heading {
  flex: none;
  margin-top: 16px;
  text-align: center;
  color: var(--accent);
  font-size: 22px;
}
.inter-btn-row {
  flex: none;
  display: flex;
  justify-content: flex-end;
  margin: 22px 2px 6px;
}
.inter-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: auto;
}
.inter-row { flex: none; display: flex; align-items: center; height: 22px; gap: 10px; }
.inter-club { flex: 1; font-size: 16px; color: var(--screen-text); padding-left: 26px; }
.inter-club-user { color: var(--accent); }
.inter-mid { width: 64px; text-align: center; color: var(--info); font-size: 16px; flex: none; }

/* sortable list headers: click = ascending, again = descending */
.sort-h { cursor: pointer; user-select: none; }
.sort-h:hover { color: var(--accent); }
.sort-h.sort-active { color: var(--accent); }

/* --- training screen (training-*.png) -------------------------------------- */

.trn-bottom { margin-top: 6px; }
.trn-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 7px; }
.trn-row { display: flex; align-items: center; height: 21px; gap: 4px; flex: none; }
.trn-head { height: 19px; }
.trn-chip {
  width: 66px;
  height: 19px;
  flex: none;
  background: #000084;
  color: #fff;
  border: 1px solid #2a2aa0;
  font-family: var(--font);
  font-weight: bold;
  font-size: 10px;
  cursor: pointer;
}
.trn-head .trn-chip { background: none; border: none; cursor: default; }
.trn-inf {
  width: 36px;
  height: 19px;
  flex: none;
  text-align: center;
  line-height: 19px;
  font-size: 10px;
  background: #848284;
  color: #ffff00;
}
.trn-inf:empty { background: none; }
.trn-inf-inj { background: #840000; color: #fff; }
.trn-h { background: var(--ctl-bg); color: var(--ctl-fg); line-height: 19px; padding: 0 4px; font-size: 11px; }
.trn-head .trn-h.trn-c0 { width: 36px; flex: none; text-align: center; padding: 0; }
.trn-c1 { flex: 1; font-size: 13px; }
.trn-c2 { width: 64px; flex: none; color: var(--info); font-size: 12px; }
.trn-c3 { width: 32px; flex: none; color: var(--info); font-size: 12px; text-align: center; }
.trn-c4 { width: 88px; flex: none; color: var(--accent); font-size: 11px; text-align: center; }
.trn-c5 { width: 76px; flex: none; font-size: 12px; text-align: center; }
.trn-c6 { width: 44px; flex: none; color: var(--warn); font-size: 12px; text-align: right; }
.trn-c7 { width: 66px; flex: none; }
.trn-morale-superb { color: var(--accent); }
.trn-morale-good { color: #00c000; }
.trn-morale-low { color: var(--warn); }
.trn-morale-poor { color: var(--alert); }
.trn-name-input {
  background: #063a06;
  border: 1px solid #00b400;
  color: #ffff00;
  font-family: var(--font);
  font-weight: bold;
  font-size: 13px;
  padding: 2px 8px;
  width: 200px;
}
.trn-no-coaches { color: #d0e8d0; font-size: 13px; }

/* --- player & staff search (search-*.png) ---------------------------------- */

.titlebar { position: relative; }
.search-funds {
  position: absolute;
  right: 8px;
  top: 8px;
  background: var(--ctl-bg);
  color: #000063;
  border: 1px outset #ddd;
  font-size: 12px;
  padding: 2px 10px;
}
.search-caption-row { display: flex; align-items: center; flex: none; margin-top: 6px; min-height: 20px; }
.search-caption-pad { width: 120px; flex: none; }
.search-caption { flex: 1; text-align: center; color: var(--info); font-size: 12px; }
.search-pager { width: 180px; flex: none; display: flex; gap: 3px; align-items: center; justify-content: flex-end; }
.search-pg-btn {
  width: 24px;
  height: 18px;
  background: #000084;
  color: #fff;
  border: 1px solid #2a2aa0;
  font-size: 9px;
  cursor: pointer;
}
.search-pg-btn:disabled { color: #667; cursor: default; }
.search-pg-label { color: var(--info); font-size: 12px; padding: 0 4px; }
.search-heading { margin-top: 2px; flex: none; }
.search-list { margin-top: 4px; }
.search-sel { width: 36px; height: 19px; flex: none; }
.search-sel-box {
  background: #000084;
  border: 1px solid #2a2aa0;
  cursor: pointer;
}
.search-sel-on { background: #2a2ac0; outline: 1px solid var(--accent); outline-offset: -3px; }
.search-row { cursor: pointer; }
.search-row:hover { background: var(--row-hover); }
.search-row-sel { background: var(--row-hover); outline: 1px solid var(--accent); }
.search-c1 { flex: 1; font-size: 13px; }
.search-c2 { width: 140px; flex: none; color: var(--info); font-size: 13px; }
.search-c3 { width: 110px; flex: none; color: var(--accent); font-size: 13px; }
.search-c4 { width: 90px; flex: none; color: var(--warn); font-size: 12px; }
.search-c5 { width: 66px; flex: none; }
.search-rep { width: 78px; font-size: 9px; }
.trn-head .search-sel { background: none; border: none; }
.search-count { flex: none; text-align: center; color: var(--info); font-size: 20px; padding: 10px 0 4px; margin-top: auto; }

/* --- Find: global database search (find-*.png) ----------------------------- */

.find-searchbox {
  display: flex;
  align-items: center;
  background: var(--ctl-bg);
  border: 1px outset #ddd;
  height: 22px;
  padding: 0 4px 0 12px;
  gap: 10px;
}
.find-search-label { color: var(--ctl-fg); font-size: 12px; }
.find-input {
  width: 220px;
  height: 16px;
  border: 1px inset #999;
  background: #f4f4ee;
  color: #141420;
  font-family: var(--font);
  font-weight: bold;
  font-size: 12px;
  padding: 0 6px;
}
.find-list { margin-top: 8px; }
.find-row { height: 24px; }
.find-row:hover { background: var(--row-hover); }
.find-name { flex: 1; font-size: 15px; padding-left: 26px; }
.find-mid { width: 220px; flex: none; color: var(--accent); font-size: 14px; }
.find-right { width: 180px; flex: none; color: var(--warn); font-size: 14px; }

/* --- Set Role At Club (buying flow) ---------------------------------------- */

.role-list { display: flex; flex-direction: column; gap: 6px; padding: 18px 40px; }
.role-row {
  background: none;
  border: 1px solid transparent;
  color: var(--screen-text);
  font-family: var(--font);
  font-weight: bold;
  font-size: 15px;
  text-align: left;
  padding: 6px 12px;
  cursor: pointer;
}
.role-row:hover { color: var(--accent); }
.role-row-on { color: var(--accent); border-color: var(--accent); }
.role-row-off, .role-row-off:hover { color: var(--muted); cursor: default; }

/* compare players result */
/* graph-paper grid (compare-players-result-gridlines.png).
   Horizontal rules are the rows' own border-bottom so they can
   NEVER drift from the content; vertical rules are anchored to the
   same section boxes. Free-floating backdrop textures are banned
   on the scaled canvas (see CLAUDE.md). */
.cmp-grid, .cmp-pos-grid {
  border-top: 1px solid rgba(150, 150, 150, .35);
  background-image:
    repeating-linear-gradient(to right,
      rgba(150, 150, 150, .35) 0, rgba(150, 150, 150, .35) 1px,
      transparent 1px, transparent 40px);
}
.cmp-grid .attr-row, .cmp-pos-row {
  border-bottom: 1px solid rgba(150, 150, 150, .35);
}
.cmp-sub { flex: none; text-align: center; color: var(--accent); font-size: 18px; padding: 8px 0 12px; }
.cmp-grid { padding: 0 8px; }
.cmp-p1 { color: #00c000; }
.cmp-p2 { color: var(--alert); }
.cmp-same { color: var(--accent); }
.cmp-pair { color: var(--warn); font-size: 11px; }
.cmp-wide { width: auto; white-space: nowrap; }
.cmp-pos-grid { display: flex; gap: 40px; padding: 14px 60px 0; flex: none; }
.cmp-pos-col { flex: 1; display: flex; flex-direction: column; }
.cmp-pos-row { display: flex; height: 19px; }
.cmp-pos-label { flex: 1; text-align: right; padding-right: 24px; color: var(--screen-text); font-size: 13px; }
.cmp-pos-val { width: 60px; font-size: 13px; }
.cmp-na { color: var(--muted); }
.cmp-legend-title { flex: none; text-align: center; color: var(--screen-text); font-size: 13px; margin-top: auto; }
.cmp-legend-masked { flex: none; text-align: center; color: var(--warn); font-size: 12px; padding: 2px 0; }
.cmp-legend-row { flex: none; display: flex; justify-content: space-between; padding: 2px 40px; font-size: 13px; }
.cmp-positions { flex: none; text-align: center; color: var(--info); font-size: 20px; padding: 8px 0 4px; }

/* nations & clubs browser (nations-clubs-*.png): two-column
   row-major list — name | cyan nation code | orange division code */
.nc-list {
  flex: 1; overflow-y: auto; margin: 4px 0;
  display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-rows: 19px; column-gap: 24px; padding: 4px 16px;
  align-content: start;
}
.nc-row { display: flex; align-items: center; gap: 8px; }
.nc-row:hover .nc-name { color: var(--accent); }
.nc-name { flex: 1; color: var(--screen-text); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-row-user .nc-name { color: var(--accent); }
.nc-code { width: 44px; color: var(--info); font-size: 12px; }
.nc-div { width: 40px; color: var(--warn); font-size: 12px; }
.nc-empty { grid-column: 1 / -1; }
.nc-menu-item { display: flex; justify-content: space-between; gap: 18px; }
.nc-menu-arrow { padding-left: 8px; }

/* job information (glimpsed in nations-clubs-menu.png): manager |
   club cyan | nation yellow | division orange | purple security chip */
.job-list { padding: 4px 24px; }
.job-row { display: flex; align-items: center; gap: 10px; height: 24px; }
.job-name { width: 170px; color: var(--screen-text); font-size: 14px; }
.job-club { flex: 1; color: var(--info); font-size: 13px; }
.job-nation { width: 110px; color: var(--accent); font-size: 13px; }
.job-div { width: 56px; color: var(--warn); font-size: 13px; }
.job-chip {
  width: 128px; text-align: center; font-size: 12px; padding: 2px 0;
  color: #fff; background: rgb(110, 45, 110); /* MEASURED (dimmed SS) */
  border: 1px solid rgb(70, 0, 70);
}

/* squad transfers tab (club-transfers-in.png) */
.xfer-list { flex: 1; overflow-y: auto; padding: 6px 12px; }
.xfer-row { display: flex; align-items: center; gap: 14px; height: 25px; }
.xfer-row > .chip:first-child { width: 74px; }
.xfer-row > .chip:last-child { width: 80px; }
.xfer-name { flex: 1.2; color: var(--screen-text); font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xfer-club { flex: 1; color: var(--accent); font-size: 13px; }
.xfer-free { color: var(--accent); }

/* add manager flow (add-manager-*.png) */
.am-body { padding: 30px 60px; gap: 14px; display: flex; flex-direction: column; }
.am-field {
  display: flex; align-items: center; height: 52px; padding: 0 24px;
  border: 1px solid #2525c8; background: rgba(0, 0, 90, 0.35);
}
.am-field-off .am-label { color: var(--muted); }
.am-label { width: 220px; color: var(--screen-text); font-size: 17px; font-weight: bold; }
.am-colon { width: 20px; color: var(--screen-text); }
.am-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #fff; font-family: var(--font); font-size: 17px; font-weight: bold;
}
.am-list {
  flex: 1; overflow-y: auto; margin: 6px 0;
  display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-rows: 24px; column-gap: 28px; padding: 4px 20px;
  align-content: start;
}
.am-row { display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid transparent; padding: 0 6px; }
.am-row:hover .am-name { color: var(--accent); }
.am-row-sel { border-color: var(--accent); }
.am-name { flex: 1; color: var(--screen-text); font-size: 15px; font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-name-human { color: var(--accent); }
.am-code { width: 44px; color: var(--accent); font-size: 12px; }
.am-div { width: 40px; color: var(--warn); font-size: 12px; }

/* browse-mode squad: black Take Control in the title bar corner */
.take-control {
  position: absolute; right: 6px; top: 6px;
  background: #000; color: #fff; border: 1px solid #444;
  font-family: var(--font); font-weight: bold; font-size: 13px;
  padding: 4px 16px; cursor: pointer;
}

/* search filters: Attributes tab (search-filters-attributes.png) */
.fa-modal { min-width: 640px; }
.fa-tabs { margin-bottom: 6px; }
.fa-clear { width: 110px; }
.fa-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px;
  max-height: 380px; overflow-y: auto; }
.fa-row { display: flex; align-items: center; gap: 8px; height: 21px; }
.fa-label { flex: 1; color: #fff; font-size: 13px; }
.fa-step { width: 26px; height: 17px; background: #0a5a0a; color: #fff;
  border: 1px outset #1d7d1d; font-size: 12px; line-height: 1; cursor: pointer; }
.fa-step:active { border-style: inset; }
.fa-val { width: 26px; text-align: center; color: #35e435; font-size: 13px;
  cursor: pointer; }

/* past meetings (club-past-meetings.png) */
.pm-h2h { flex: none; padding: 8px 14px 2px; }
.pm-h2h-row { display: flex; align-items: center; gap: 6px; height: 24px; }
.pm-pos { width: 58px; flex: none; }
.pm-h2h-row > .chip:first-child { width: 58px; flex: none; }
.pm-club { flex: 1; color: var(--screen-text); font-size: 16px; font-weight: bold; }
.pm-club-user { color: var(--accent); }
.pm-cell { width: 56px; flex: none; text-align: center;
  color: var(--screen-text); font-size: 13px; }
.pm-cell-head { background: var(--ctl-bg); color: #000; font-size: 12px;
  border: 1px outset #ddd; height: 18px; line-height: 18px; }
.pm-h2h-row > .chip:last-child { width: 56px; flex: none; }
.pm-list { margin-top: 6px; }
.pm-comp { width: 110px; color: var(--warn); font-size: 13px; }
.pm-ha { width: 30px; color: var(--screen-text); font-size: 13px; }

/* last match review: the match screen after full time */
.lm-body { flex: 1; overflow-y: auto; }

/* club history (history-*.png): ruled list — the lines ride the
   row slots themselves (empty slots pad the page), never a free
   backdrop texture */
.ch-list { flex: 1; overflow-y: auto; padding: 2px 14px; }
.ch-row { display: flex; align-items: center; gap: 12px; height: 22px;
  border-bottom: 1px solid rgba(150, 150, 150, .3); }
.ch-row > .chip { width: 70px; flex: none; }
.ch-season { width: 80px; flex: none; color: var(--screen-text); font-size: 13px; }
.ch-text { color: var(--screen-text); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-row > .chip + .ch-text { color: var(--accent); }
.ch-value { flex: 1; text-align: left; color: var(--accent); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-row .ch-text:first-child { width: 260px; flex: none; }

/* startup flow */
.side-btn-danger { color: #ff4040; }
.sss-body { padding: 30px 20px; }
.sss-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sss-box {
  width: 330px; height: 62px; background: rgba(0, 0, 90, 0.55);
  border: 2px solid #2525c8; color: var(--screen-text);
  font-family: var(--font); font-weight: bold; font-size: 19px;
  cursor: pointer;
}
.sss-on { border-color: var(--accent); color: var(--accent); }

/* load database (web-native, Game Options) */
.ldb-body { padding: 20px 40px; gap: 4px; }
.ldb-line { color: var(--screen-text); font-size: 14px; line-height: 20px; }
.ldb-pick { margin: 16px auto 0; padding: 0 30px; max-width: 360px; }
.ldb-status { text-align: center; color: var(--info); font-size: 14px; padding-top: 10px; }
.ldb-bad { color: var(--alert); }
.ldb-loaded { color: var(--accent); padding-top: 16px; }

/* player profile: shared season-stats block (player-transfer.png) */
.pstat { flex: none; margin-top: auto; padding: 2px 8px; }
.pstat-row { display: flex; align-items: center; height: 20px; gap: 2px; }
.pstat-label { flex: 1; color: var(--screen-text); font-size: 13px; font-weight: bold; }
.pstat-title { color: var(--manager-text); display: flex; align-items: center; gap: 8px; }
.pstat-cell { width: 52px; flex: none; text-align: center; font-size: 12px; }
.pstat-h { background: var(--ctl-bg); color: #000; border: 1px outset #ddd;
  height: 17px; line-height: 17px; }
.pstat-v { color: var(--warn); }
.pstat-tot { color: var(--info); }
.pstat-avr { background: #5f3979; color: #fff; height: 17px; line-height: 17px; }
.pstat-avr-empty { background: #5f3979; }
/* transfer/contract/injury info rows */
.ptr-list { padding: 8px 14px 0; flex: none; }
.ptr-row { display: flex; gap: 12px; padding: 2px 0; border-bottom: 1px solid rgba(150,150,150,.3); }
.ptr-label { width: 180px; flex: none; color: var(--screen-text); font-size: 14px; font-weight: bold; }
.ptr-value { flex: 1; color: var(--warn); font-size: 14px; font-weight: bold; }
.ptr-future2 { color: var(--accent); }
.ptr-bad { color: var(--alert); }
/* playing career rows (player-history.png) */
.phist { flex: none; padding: 2px 8px; }
.phist-row { display: flex; align-items: center; height: 20px; gap: 2px; }
.phist-head { height: 17px; }
.phist-season { width: 64px; flex: none; text-align: center; font-size: 11px;
  background: #000084; color: #fff; height: 17px; line-height: 17px; }
.phist-head .phist-season, .phist-total .phist-season { background: transparent; }
.phist-current { background: #e8e8e8; color: #000063; }
.phist-club { flex: 1; color: var(--screen-text); font-size: 13px; padding-left: 8px; }
.phist-total .phist-club { color: var(--info); }
.phist-fee { width: 54px; flex: none; color: var(--manager-text); font-size: 12px; }

/* selected leagues (selected-leagues-*.png) */
.sl-strip { flex: none; display: flex; align-items: center; gap: 14px;
  background: rgba(90, 90, 90, .55); padding: 4px 10px; }
.sl-toggle { display: flex; align-items: center; gap: 6px; }
.sl-label { color: var(--screen-text); font-size: 13px; font-weight: bold; }
.sl-opt { color: var(--muted); font-size: 13px; font-weight: bold; padding: 1px 8px; }
.sl-on { color: var(--warn); border: 1px solid var(--accent); }
/* the buttons must never squeeze below their own label */
.sl-strip { gap: 10px; }
.sl-strip .ctl { flex: none; white-space: nowrap; }
.sl-list { padding: 6px 12px; }
.sl-row { height: 24px; gap: 10px; }
.sl-nation { width: 170px; flex: none; color: var(--screen-text);
  font-size: 15px; font-weight: bold; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.sl-off .sl-nation, .sl-off .sl-sel, .sl-off .sl-bg { color: var(--muted); }
.sl-sel, .sl-bg { width: 110px; flex: none; text-align: center;
  color: var(--muted); font-size: 12px; font-weight: bold; }
.sl-sel-on { color: var(--warn); border: 1px solid var(--accent); }
/* the note stays inside the row — right-aligned rest of the line */
.sl-note { flex: 1; min-width: 0; text-align: right;
  color: var(--muted); font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.sl-hint { color: var(--muted); font-size: 12px; padding: 8px 0 4px; }
.sl-ldb { align-self: flex-start; }
.sl-status { flex: 2; align-self: center; text-align: center;
  color: var(--warn); font-size: 13px; font-weight: bold; }

/* arrange friendly (arrange-friendly-select-date.png) */
.af-heading { display: flex; align-items: center; }
.af-heading > span:first-child { flex: 1; text-align: center; }
.af-pager { display: flex; align-items: center; gap: 3px;
  padding-right: 8px; }
.af-pg { background: #000084; color: var(--warn); border: 1px solid #4242c6;
  font-family: var(--font); font-weight: bold; font-size: 11px;
  height: 20px; padding: 0 6px; cursor: pointer; }
.af-pglabel { background: #313031; color: var(--warn); font-size: 12px;
  font-weight: bold; padding: 2px 10px; }
.af-list { padding: 4px 12px; }
.af-row { height: 26px; gap: 12px; }
.af-date { width: 118px; flex: none; text-align: center; background: #000084;
  color: #fff; font-size: 12px; font-weight: bold; height: 20px;
  line-height: 20px; }
.af-state { font-size: 15px; font-weight: bold; }
.af-on { color: var(--screen-text); cursor: pointer; }
.af-off { color: var(--muted); }
.af-sel { color: var(--warn); cursor: pointer; }
.af-opp { color: var(--screen-text); font-size: 15px; font-weight: bold;
  width: 260px; }
.af-ha { color: var(--info); font-size: 13px; font-weight: bold; width: 16px; }
.af-comp { color: var(--warn); font-size: 13px; font-weight: bold; }
.af-comp-frd { color: var(--info); }

/* choose friendly teams (choose-friendly-teams.png) */
.cft-grid { flex: 1; overflow-y: auto; display: grid;
  grid-template-columns: 1fr 1fr; align-content: start;
  column-gap: 24px; padding: 4px 16px; }
.cft-row { display: flex; align-items: center; height: 24px; gap: 8px; }
.cft-click { cursor: pointer; }
.cft-click:hover .cft-name { color: var(--accent); }
.cft-name { flex: 1; color: var(--screen-text); font-size: 15px;
  font-weight: bold; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.cft-nat { width: 34px; flex: none; color: var(--warn); font-size: 12px;
  font-weight: bold; }
.cft-div { width: 40px; flex: none; color: var(--accent); font-size: 12px;
  font-weight: bold; }
.cft-empty { grid-column: 1 / -1; color: var(--muted); padding: 16px; }
/* tour nation list: unavailable nations greyed (all-nations filter) */
.at-off .cft-name { color: var(--muted); }
.at-grid { padding-top: 8px; }
.at-controls { justify-content: flex-end; }

/* configure tournament green modal (configure-tournament.png) */
.cfg-modal { min-width: 560px; }
.cfg-title { background: #000; color: #fff; text-align: center;
  font-size: 18px; font-weight: bold; padding: 8px;
  border: 1px solid #4242c6; margin-bottom: 10px; }
.cfg-row { display: flex; align-items: center; gap: 8px; height: 34px; }
.cfg-label { width: 140px; flex: none; color: #fff; font-size: 15px;
  font-weight: bold; }
.cfg-name { background: transparent; border: none; outline: none;
  color: var(--warn); font-family: var(--font); font-size: 15px;
  font-weight: bold; width: 200px; border-bottom: 1px solid #00b400; }
.cfg-opt { background: transparent; border: 1px solid transparent;
  color: #b6e8b6; font-family: var(--font); font-size: 14px;
  font-weight: bold; padding: 3px 12px; cursor: pointer; width: 110px; }
.cfg-on { border-color: var(--warn); color: var(--warn); }
.cfg-foot { display: flex; gap: 4px; margin-top: 12px; }
.cfg-foot .btn-big:first-child { flex: 3; }
.cfg-foot .btn-big:last-child { flex: 1; }

/* tournament invited clubs (tournament-invited-clubs.png) */
.tc-list { padding: 10px 20px; }
.tc-row { height: 26px; gap: 12px; }
.tc-name { width: 220px; flex: none; color: var(--screen-text);
  font-size: 16px; font-weight: bold; }
.tc-nat { width: 130px; flex: none; color: var(--warn); font-size: 13px;
  font-weight: bold; }
.tc-comp { width: 130px; flex: none; color: var(--accent); font-size: 13px;
  font-weight: bold; }
.tc-status { flex: 1; color: var(--muted); font-size: 14px;
  font-weight: bold; }
.invite-club-red { background: #ce0000; color: #fff; border-color: #8a0000; }

/* competition history (competition-history-*.png) */
.chy-body { overflow: hidden; }
.chy-list { flex: 1; overflow-y: auto; padding: 4px 16px; }
.chy-row { display: flex; align-items: center; min-height: 25px; gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
.chy-label { width: 250px; flex: none; color: var(--screen-text);
  font-size: 14px; font-weight: bold; }
.chy-season { width: 70px; flex: none; text-align: center;
  background: #000084; color: #fff; font-size: 12px; font-weight: bold;
  height: 19px; line-height: 19px; }
.chy-value { flex: 1; color: var(--warn); font-size: 14px;
  font-weight: bold; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.chy-empty { color: var(--muted); padding: 16px; }

/* invite button above a browsed club's title (invite-club-squad-*.png) */
.invite-club { position: absolute; right: 6px; top: 6px;
  background: #fff; color: #000063; border: 1px solid #9c9a9c;
  font-family: var(--font); font-weight: bold; font-size: 13px;
  padding: 4px 16px; cursor: pointer; }
.fixture-comp-frd { color: var(--info); }

/* game credits */
.credits-body { padding: 30px 40px; gap: 6px; }
.credits-row { display: flex; gap: 16px; height: 24px; align-items: center; }
.credits-role { width: 220px; text-align: right; color: var(--info); font-size: 14px; }
.credits-text { flex: 1; color: var(--screen-text); font-size: 14px; }

/* exit note */
.exit-note { min-width: 320px; text-align: center; }

/* manager status (manager-status*.png) */
.mstatus-list { flex: 1; padding: 14px 30px; }
.mstatus-row { display: flex; align-items: center; height: 30px; gap: 12px; }
.mstatus-name { width: 240px; color: var(--accent); font-size: 17px; font-weight: bold; }
.mstatus-club { flex: 1; color: var(--screen-text); font-size: 17px; font-weight: bold; }
.mstatus-state { width: 180px; color: var(--muted); font-size: 17px; font-weight: bold; }

/* hall of fame (hall-of-fame-nations1.png) */
.hof-name { width: 200px; flex: none; color: var(--screen-text); font-size: 14px; }
.hof-club { flex: 1; color: var(--accent); font-size: 13px; }
.hof-when { color: var(--warn); font-size: 12px; padding-right: 10px; }
.hof-list .chip { width: 64px; }

/* competition awards tab (competition-awards-*.png) */
.award-season { flex: 1; text-align: center; color: var(--info); font-size: 15px; font-weight: bold; }
.award-name { width: 260px; flex: none; }

/* cup rounds view (knockout competitions) */
.cup-rounds { flex: 1; overflow-y: auto; padding: 6px 40px; }
.cup-stage { color: var(--accent); font-size: 16px; font-weight: bold; padding: 10px 0 4px; text-align: center; }
.cup-leg { color: var(--warn); font-size: 12px; text-align: center; padding: 2px 0; }
.cup-row { display: flex; align-items: center; gap: 12px; height: 22px; }
.cup-club { flex: 1; color: var(--screen-text); font-size: 14px; }
.cup-club:first-child { text-align: right; }
.cup-row > .chip { width: 64px; flex: none; }

/* job market: vacant seats + retirement */
.job-vacant-name { color: var(--muted); }
.job-chip-vacant { background: #424142; border-color: #2a2a2a; }
.job-apply { margin-left: 6px; }
.retired-record { text-align: center; color: var(--accent); font-size: 15px; padding-top: 24px; }

/* board confidence + meetings (board-confidence.png, board-request-modal.png) */
.board-prose { padding: 12px 24px; }
.board-par { color: var(--screen-text); font-size: 16px; line-height: 22px; margin-bottom: 22px; }
.board-ask { color: var(--screen-text); font-size: 16px; padding: 16px 24px 10px; }
.board-opts { padding-left: 96px; }
.board-opt { color: var(--screen-text); font-size: 16px; line-height: 22px;
  cursor: pointer; width: fit-content; }
.board-opt:hover { color: var(--accent); }
.board-opt-on { color: var(--accent); font-weight: bold; }
.board-opt-off, .board-opt-off:hover { color: var(--muted); cursor: default; }

/* manager stats rankings (manager-stats.png) */
.ms-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px 2px; }
.ms-viewbtn { width: 22px; height: 22px; background: #000084; color: #ffe400;
  border: 1px solid #4a4ac6; font-size: 11px; cursor: pointer; }
.ms-heading { flex: 1; text-align: center; color: var(--accent);
  font-size: 24px; font-weight: bold; padding-right: 32px; }
.ms-list { flex: 1; overflow-y: auto; padding: 4px 12px; }
.ms-row { display: flex; align-items: center; gap: 14px; height: 26px; }
.ms-row > .chip:first-child { width: 54px; }
.ms-row > .chip:last-child { width: 110px; }
.ms-name { flex: 1.1; color: var(--screen-text); font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-user { color: var(--accent); }
.ms-club { flex: 0.9; color: var(--accent); font-size: 13px; }

/* manager history (manager-history-*.png) */
.mh-list { flex: 1; overflow-y: auto; padding: 4px 12px; }
.mh-row { display: flex; align-items: center; gap: 12px; height: 22px; }
.mh-row > .chip { width: 70px; }
.mh-club { width: 110px; color: var(--screen-text); font-size: 13px; font-weight: bold; }
.mh-text { flex: 1; color: var(--accent); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-stats { flex: 1; padding: 6px 24px; }
.mh-stat-row { display: flex; height: 22px; align-items: center; }
.mh-stat-label { width: 300px; color: var(--screen-text); font-size: 14px; }
.mh-stat-value { color: var(--accent); font-size: 14px; }
.mh-role { flex: none; text-align: center; color: var(--info);
  font-size: 20px; padding: 4px 0; }
.tab:disabled { color: #7a7ab8; cursor: default; }

/* world transfer browser (transfers-browser.png) */
.wt-head { flex: none; display: flex; align-items: center; padding: 6px 12px 2px; }
.wt-year { flex: 1; text-align: center; color: var(--accent);
  font-size: 26px; font-weight: bold; }
.wt-steppers { display: flex; gap: 4px; }
.wt-step { width: 24px; height: 20px; background: #000084; color: #ffe400;
  border: 1px solid #4a4ac6; font-size: 11px; cursor: pointer; }
.wt-step:disabled { color: #5a5aa0; cursor: default; }
.wt-list { flex: 1; overflow-y: auto; padding: 4px 12px; }
.wt-row { display: flex; align-items: center; gap: 12px; height: 24px; }
.wt-row > .chip:first-child { width: 96px; }
.wt-row > .chip:last-child { width: 92px; }
.wt-name { flex: 1.1; color: var(--screen-text); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-from { flex: 0.9; color: var(--accent); font-size: 13px; }
.wt-to { flex: 0.9; color: var(--warn); font-size: 13px; }

/* holiday mode: a light "you're away" wash over the whole canvas;
   clicking anywhere on it asks "Return from holiday ?" */
.holiday-overlay {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(10, 10, 30, 0.42);
  cursor: pointer;
}

/* go on holiday settings (go-on-holiday-confirm.png): "Settings"
   heading, toggle rows — WHITE = on, grey = off, click to flip */
.holiday-settings { margin: 40px 0 0 30px; }
.holiday-title { color: var(--screen-text); font-size: 15px; font-weight: bold; margin-bottom: 18px; }
.holiday-toggle {
  color: var(--muted); font-size: 13px; line-height: 17px;
  padding-left: 16px; cursor: pointer; width: fit-content;
}
.holiday-toggle:hover { filter: brightness(1.25); }
.holiday-on { color: var(--screen-text); font-weight: bold; }
.holiday-gap { height: 17px; }

/* scout confirm + news filter label */
.scout-question {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--screen-text);
  font-size: 17px;
}
.news-filter-label { color: var(--screen-text); font-size: 12px; padding: 3px 10px 0 0; }

/* loan bid */
.loan-value { min-width: 150px; }
.loan-echo { color: var(--warn); font-size: 13px; min-width: 150px; }
.loan-toggles { display: flex; flex-direction: column; gap: 6px; padding: 20px 8px 0; }
.loan-toggle {
  background: none;
  border: none;
  color: var(--screen-text);
  font-family: var(--font);
  font-weight: bold;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.loan-toggle:hover { color: var(--accent); }

/* Set Transfer Status */
.status-sect { flex: none; color: var(--screen-text); font-size: 17px; padding: 16px 8px 2px; }
.status-list { padding: 4px 40px; gap: 2px; }
.status-row { padding: 3px 12px; }
.status-price { padding: 4px 8px 0; }
.status-auto { width: 64px; }

/* --- staff profile ---------------------------------------------------------- */

.staff-born {
  flex: none;
  text-align: center;
  color: var(--accent);
  font-size: 17px;
  padding: 10px 0 12px;
}
.staff-grid { padding: 0 8px; }
.staff-grid .attr-row { height: 22px; }
.staff-grid .attr-label { font-size: 13px; }
.staff-grid .attr-value { width: auto; min-width: 30px; font-size: 13px; }
.staff-style { color: var(--warn); }
.staff-prefs { flex: none; padding: 14px 8px 0; display: flex; flex-direction: column; gap: 4px; }
.staff-pref-row { display: flex; }
.staff-pref-label { width: 220px; flex: none; color: var(--screen-text); font-size: 14px; }
.staff-pref-value { color: var(--accent); font-size: 14px; }
.staff-role {
  margin-top: auto;
  text-align: center;
  color: var(--info);
  font-size: 20px;
  padding: 10px 0;
}

/* --- Action ▾ + transfer bid / contract offer (transfer-bid.png) ---------- */

.action-btn {
  position: absolute;
  right: 6px;
  top: 6px;
  background: #000063;
  color: #fff;
  border: 1px solid #2020b0;
  font-family: var(--font);
  font-weight: bold;
  font-size: 12px;
  padding: 3px 14px;
  cursor: pointer;
}
.action-btn:hover { color: var(--accent); }

.bid-prose {
  color: var(--screen-text);
  font-size: 15px;
  white-space: pre-line;
  padding: 10px 8px 14px;
  flex: none;
}
.bid-subhead { padding-top: 18px; }
.bid-grid { display: flex; flex-direction: column; gap: 5px; flex: none; padding: 0 8px; }
.bid-row { display: flex; align-items: center; gap: 4px; flex: none; min-height: 22px; }
.bid-label { width: 250px; flex: none; color: var(--screen-text); font-size: 15px; }
.bid-label-off { color: var(--muted); }
.bid-step {
  width: 26px;
  height: 20px;
  flex: none;
  background: #2233cc;
  color: #fff;
  border: 1px solid #4455ee;
  font-family: var(--font);
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
}
.bid-preset {
  width: 18px;
  height: 20px;
  flex: none;
  background: none;
  border: none;
  color: var(--screen-text);
  font-size: 9px;
  cursor: pointer;
}
.bid-value {
  min-width: 120px;
  text-align: center;
  color: var(--screen-text);
  font-size: 15px;
}
.bid-toggle {
  background: none;
  border: none;
  color: var(--screen-text);
  font-family: var(--font);
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
}
.bid-toggle:hover { color: var(--accent); }
.bid-step-pad { width: 26px; flex: none; }
.bid-pad-preset { width: 18px; flex: none; }
.bid-value { flex: none; width: 120px; }
.bid-exchange { margin-top: 18px; padding: 0 8px; }
.bid-exchange .ctl { min-width: 120px; }
.bid-total { margin-top: 10px; padding: 6px 8px; background: var(--heading-band); }
.bid-total-value { color: var(--accent); font-size: 17px; padding-left: 40px; }
.bid-request { color: var(--warn); font-size: 13px; padding-left: 10px; }
.bid-footnote { color: var(--warn); font-size: 12px; padding: 14px 8px 0; flex: none; }

/* --- label/value info rows (Next Match, Finances & Info Stats) ----------- */

.nm-comp {
  color: var(--warn);
  font-size: 17px;
  text-decoration: underline;
  margin: 10px 8px 14px;
  align-self: flex-start;
}
.kv-list { display: flex; flex-direction: column; gap: 3px; padding: 0 8px; overflow: auto; }
.kv-row { display: flex; flex: none; }
.kv-label { width: 240px; flex: none; color: var(--screen-text); font-size: 15px; }
.kv-label-wide { width: 330px; font-size: 13px; }
.kv-val { color: var(--accent); font-size: 13px; white-space: pre-line; padding-top: 1px; }
.kv-gap { height: 14px; flex: none; }

/* --- pre-match confirm ------------------------------------------------ */

.confirm-heading {
  height: 35px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 22px;
  background: var(--heading-band);
  margin-top: 8px;
}
.confirm-prose {
  font-size: 16px;
  padding: 14px 8px 0;
}
.footer .btn-big:first-child { flex: 3; }
.footer .btn-big:last-child { flex: 1; }