:root {
  --bg:      #000000;
  --fg:      #AAAAAA;
  --cyan:    #55FFFF;
  --white:   #FFFFFF;
  --yellow:  #FFFF55;
  --green:   #55FF55;
  --red:       #CC0000;
  --red-light: #FF5555;
  --magenta: #FF55FF;
  --blue:        #5555FF;
  --dark-blue:   #0040A1;
  --dark-cyan:   #00AAAA;
  --dark-yellow: #AA5500;
  --dark-grey:   #555555;
}

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

html {
  /* Reserve scrollbar gutter on both sides so #app stays centered
     relative to the viewport whether or not a scrollbar is showing. */
  scrollbar-gutter: stable both-edges;
}

html, body {
  height: 100%;
  background: #161812;
  color: var(--fg);
  font-family: "Press Start 2P", "Courier New", Courier, monospace;
  font-size: 12px;
  line-height: 1.6;
}

/* Sliding Manager90s watermark backdrop — shared with the landing page. A
   fixed, full-viewport layer behind all game content (#app sits at
   z-index:1). pointer-events:none so it never intercepts clicks. */
.cm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.cm-backdrop-scroll {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  opacity: 0.05;
  color: #d8cfa0;
  font-family: "Press Start 2P", monospace;
  font-size: 18px;
  line-height: 54px;
  letter-spacing: 3px;
  white-space: nowrap;
  /* In-game the drift is deliberately very slow (one row over 3 min) so the
     motion stays subliminal and never tires the eyes during long sessions.
     The landing page uses its own faster 6s loop. */
  animation: cm-mwm 180s linear infinite;
}
@keyframes cm-mwm { from { transform: translateY(0); } to { transform: translateY(-54px); } }

#app {
  position: relative;
  z-index: 1;
  /* Flex-column centering so every screen is auto-centered horizontally,
     regardless of its own width. Wide screens (squad/tactics/fixtures at
     960px) and narrow ones (Box-wrapped menus at 720px) both sit centered
     in the viewport. No max-width cap here — screens size themselves. */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  padding-bottom: 48px; /* room for fixed status bar */
  min-height: 100%;
}

h1, h2, h3 {
  color: var(--white);
  font-weight: normal;
  text-transform: uppercase;
}

a {
  color: var(--cyan);
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--white);
  text-decoration: underline;
}

.highlight {
  color: var(--yellow);
}

.success {
  color: var(--green);
}

.error {
  color: var(--red);
}

.muted {
  color: var(--dark-grey);
}

table {
  width: 100%;
  border-collapse: collapse;
  color: var(--fg);
}

th {
  color: var(--cyan);
  text-align: left;
  border-bottom: 1px solid var(--dark-grey);
  padding: 2px 8px;
}

td {
  padding: 2px 8px;
}

tr:hover {
  background: #0a0a2a;
}

::selection {
  background: var(--dark-cyan);
  color: var(--white);
}

:focus:not(:focus-visible) { outline: none; }
/* Container divs use tabindex="0" purely to receive keyboard events for
   navigation — they aren't form controls, so the browser's :focus-visible
   ring (which fires on Space/Tab) just draws an ugly box around the whole
   screen. Suppress it; real inputs/buttons still keep their focus ring. */
div[tabindex]:focus,
div[tabindex]:focus-visible { outline: none; }

/* ── Box ─────────────────────────────────────────── */

.cm-box {
  /* Preserve the narrow-screen width that the old #app 720px cap
     used to provide. Screens wrapped in Box (menus, forms, dialogs)
     keep their familiar size instead of collapsing to content width
     now that #app no longer constrains them. */
  width: min(720px, 98vw);
  margin-bottom: 8px;
}

.cm-box-title {
  /* Chunky beveled box matching the landing page logo box (.cm-logo-box):
     flat blue fill, inset light/dark bevel, hard black outline. */
  background: #3a3ad6;
  color: var(--white);
  text-align: center;
  padding: 9px 20px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 18px;
  border: none;
  box-shadow: inset 4px 4px 0 #7b7bf2, inset -5px -5px 0 #1c1c8c;
  outline: 3px solid #06070a;
  width: fit-content;
  margin: 0 auto 0 auto;
}

.cm-box-body {
  padding: 2px;
  margin-top: 8px;
}

/* ── DataTable ───────────────────────────────────── */

.cm-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--fg);
  outline: none;
}

.cm-table-head {
  display: flex;
  color: var(--cyan);
  border-bottom: 1px solid var(--dark-grey);
  padding: 2px 0;
}

.cm-table-row {
  display: flex;
  padding: 1px 0;
  cursor: pointer;
}

.cm-table-row:hover {
  background: #0a0a2a;
}

.cm-table-row--selected {
  background: var(--fg);
  color: var(--bg);
}

.cm-table-row--selected:hover {
  background: var(--white);
}

.cm-table-cell {
  overflow: hidden;
  white-space: nowrap;
  padding: 0 4px;
}

/* ── StatusBar ───────────────────────────────────── */

.cm-status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--dark-cyan);
  color: var(--bg);
  padding: 2px 12px;
  font-weight: bold;
  z-index: 100;
}

.cm-status-left,
.cm-status-right {
  white-space: nowrap;
  overflow: hidden;
}

/* New-build notice (updateCheck.js) — sits just above the status bar. */
.cm-update-banner {
  position: fixed;
  bottom: 26px;
  right: 8px;
  background: var(--yellow, #fefe54);
  color: #000;
  padding: 4px 10px;
  font-weight: bold;
  cursor: pointer;
  z-index: 101;
}

/* ── MenuItem ────────────────────────────────────── */

.cm-menu {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  outline: none;
  padding: 8px;
}

.cm-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  padding: 4px 8px;
}

/* ── Bar variant (start screen — grey bars, black text) ── */

.cm-menu--bar .cm-menu-item {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white);
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #262626;
  border-bottom: 2px solid #262626;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #B8B8B8, inset -1px -1px 0 #404040;
  text-shadow: 0 -1px 0 #000000;
  justify-content: flex-start;
  padding: 6px 10px;
  font-size: 14px;
}


.cm-menu--bar .cm-menu-item--selected {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white);
}

/* ── Button variant (game hub — blue buttons, yellow text) ── */

.cm-menu--button .cm-menu-item {
  background: #4444CC;
  color: var(--yellow);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-top: 4px solid #8888EE;
  border-left: 4px solid #8888EE;
  border-right: 4px solid #000044;
  border-bottom: 4px solid #000044;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #6666DD, inset -1px -1px 0 #222288;
  aspect-ratio: 1;
  line-height: 1.2;
  font-size: 15px;
  position: relative;
  z-index: 0;
}

/* ════════════════════════════════════════════════════════════════════
   MAIN MENU (start screen) — DOS-window redesign (Claude Design
   "Manager90s Main Menu"). A title bar + two columns (brand/logo + last-save
   SAVE SLOT card on the left, the menu on the right) + a status bar.
   Built in app.js startScreen(). Press Start 2P for chrome, VT323 for data.
   ════════════════════════════════════════════════════════════════════ */
@keyframes cm-mm-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes cm-mm-flick { 0%,97%{opacity:1} 98%{opacity:.78} 100%{opacity:1} }

.cm-mm-screen {
  position: relative;
  width: 1024px;
  max-width: 100%;
  background: #0b0c08;
  outline: 3px solid #06070a;
  box-shadow: inset 3px 3px 0 #1c2030, inset -4px -4px 0 #05060a, 0 0 50px rgba(43,208,208,0.10);
  overflow: hidden;
  font-family: "Press Start 2P", "Courier New", Courier, monospace;
  color: #fff;
  animation: cm-mm-flick 5s linear infinite;
}

/* TITLE BAR */
.cm-mm-titlebar {
  display: flex; align-items: center;
  background: #2e5fe0;
  box-shadow: inset 2px 2px 0 #7ea2ff, inset -3px -3px 0 #16306f;
  outline: 2px solid #06070a;
}
.cm-mm-title-id { display: flex; align-items: center; gap: 9px; padding: 9px 12px; flex: 1; }
.cm-mm-title-id span { font-size: 11px; letter-spacing: 1px; color: #fff; }
.cm-mm-title-dot {
  width: 13px; height: 13px; background: #cf9a26;
  box-shadow: inset 2px 2px 0 #e7c463, inset -2px -2px 0 #8a6512;
}
.cm-mm-title-btns { display: flex; gap: 4px; padding: 6px; }
.cm-mm-tb {
  width: 26px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: #cdd2e0; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #8a8fa0;
  color: #06070a; font-size: 9px;
}
.cm-mm-tb-close { background: #d4202a; box-shadow: inset 2px 2px 0 #ff5a52, inset -2px -2px 0 #8c0f0f; color: #fff; }
.cm-mm-tb { cursor: pointer; }
.cm-mm-tb:hover { filter: brightness(1.12); }

/* Resizable (desktop only) — drag the bottom-right corner to grow the window.
   JS pins min-width/min-height to the default rendered size, so it can only
   grow, never shrink below default. */
.cm-mm-resizable { resize: both; }
.cm-mm-resizable.cm-mm-screen--max { resize: none; }

/* Maximized — fill the viewport (drop the 1024px cap, grow to full height). */
.cm-mm-screen--max { width: 100%; max-width: none; min-height: calc(100vh - 16px); display: flex; flex-direction: column; }
.cm-mm-screen--max .cm-mm-body { flex: 1 1 auto; }
.cm-mm-screen--max .cm-mm-right { justify-content: flex-start; }

/* BODY */
.cm-mm-body { display: flex; gap: 26px; padding: 30px 30px 0; align-items: stretch; }
.cm-mm-left { flex: 0 0 396px; display: flex; flex-direction: column; gap: 20px; }
.cm-mm-right { flex: 1 1 auto; display: flex; flex-direction: column; gap: 13px; padding-top: 2px; }

/* LOGO LOCKUP */
.cm-mm-lockup { display: flex; align-items: flex-end; gap: 10px; }
.cm-mm-logo {
  background: #3a3ad6;
  box-shadow: inset 4px 4px 0 #7b7bf2, inset -5px -5px 0 #1c1c8c;
  outline: 3px solid #06070a; padding: 14px 18px;
  font-size: 38px; line-height: 1; letter-spacing: 2px; color: #fff;
  text-shadow: 3px 3px 0 #06070a;
}
.cm-mm-ext {
  background: #11131a;
  box-shadow: inset 2px 2px 0 #2bd0d0, inset -2px -2px 0 #0a4a4a;
  outline: 3px solid #06070a; padding: 9px;
  font-size: 15px; line-height: 1; letter-spacing: 1px; color: #2bd0d0;
}

/* SAVE SLOT CARD */
.cm-mm-card {
  flex: 1 1 auto; display: flex; flex-direction: column;
  background: #0c0e13; outline: 3px solid #06070a; box-shadow: inset 2px 2px 0 #1c2030;
}
.cm-mm-card--clickable { cursor: pointer; }
.cm-mm-card--clickable:hover { box-shadow: inset 2px 2px 0 #1c2030, 0 0 0 2px rgba(126,162,255,0.35); }
.cm-mm-card-head {
  display: flex; align-items: center; justify-content: space-between;
  background: #cf9a26; box-shadow: inset 2px 2px 0 #e7c463, inset -2px -2px 0 #8a6512;
  padding: 9px 13px;
}
.cm-mm-card-head span { font-size: 11px; letter-spacing: 2px; color: #0c0e13; }
.cm-mm-card-stamp { font-size: 9px !important; letter-spacing: 1px; }
.cm-mm-card-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 15px 17px; }

.cm-mm-club { display: flex; align-items: center; gap: 13px; }
.cm-mm-crest {
  flex: 0 0 auto; width: 52px; height: 52px;
  background: #2e5fe0; box-shadow: inset 3px 3px 0 #7ea2ff, inset -3px -3px 0 #16306f;
  outline: 2px solid #06070a;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
}
.cm-mm-club-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cm-mm-club-name { font-size: 15px; letter-spacing: 1px; color: #fff; word-break: break-word; }
.cm-mm-club-mgr { font-family: "VT323", monospace; font-size: 20px; letter-spacing: 1px; color: #8a8f7a; }

.cm-mm-meta {
  font-family: "VT323", monospace; font-size: 19px; letter-spacing: 1px; color: #e8e3c8;
  background: #11131a; outline: 2px solid #06070a; padding: 9px 12px;
}

.cm-mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cm-mm-stat {
  background: #11131a; outline: 2px solid #06070a; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.cm-mm-stat--row { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
.cm-mm-stat-lbl { font-size: 8px; letter-spacing: 1px; color: #7ea2ff; }
.cm-mm-stat-val { font-family: "VT323", monospace; font-size: 24px; line-height: 1; color: #fff; }
.cm-mm-stat-sub { font-family: "VT323", monospace; font-size: 16px; line-height: 1; letter-spacing: 1px; color: #8a8f7a; }

.cm-mm-form { display: flex; align-items: center; gap: 10px; }
.cm-mm-form-lbl { font-size: 8px; letter-spacing: 1px; color: #8a8f7a; }
.cm-mm-form-cells { display: flex; gap: 5px; }
.cm-mm-fc {
  width: 21px; height: 21px; display: flex; align-items: center; justify-content: center;
  font-size: 9px; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.22);
}
.cm-mm-fc-w { background: #00AA33; color: #06120a; }
.cm-mm-fc-d { background: #cf9a26; color: #0c0e13; }
.cm-mm-fc-l { background: #d4202a; color: #fff; }
.cm-mm-fc-x { background: #11131a; color: #3c4250; outline: 1px solid #1c2030; box-shadow: none; }

.cm-mm-card-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 48px 20px; text-align: center;
}
.cm-mm-empty-1 { font-size: 13px; letter-spacing: 2px; color: #5a6276; }
.cm-mm-empty-2 { font-family: "VT323", monospace; font-size: 22px; line-height: 1.25; color: #8a8f7a; }

/* SAVE BROWSER (continueScreen, rendered in the same DOS window) */
.cm-mm-pane { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 13px; padding: 26px 30px 4px; }
.cm-mm-savelist { display: flex; flex-direction: column; gap: 10px; max-height: 58vh; overflow-y: auto; padding: 1px; }
.cm-mm-saverow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
.cm-mm-saveload {
  text-align: left; cursor: pointer; min-width: 0;
  font-family: "Press Start 2P", "Courier New", Courier, monospace;
  border: none; outline: 2px solid #06070a; background: #16171c;
  box-shadow: inset 3px 3px 0 #2b2f3e, inset -4px -4px 0 #05060a;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.cm-mm-saveload:hover { filter: brightness(1.15); }
.cm-mm-saveload-name { font-size: 13px; letter-spacing: 1px; color: #fff; line-height: 1.35; word-break: break-word; }
.cm-mm-saveload-sub { font-family: "VT323", monospace; font-size: 17px; letter-spacing: 1px; color: #8a8f7a; }
.cm-mm-saveact {
  font-family: "Press Start 2P", "Courier New", Courier, monospace;
  font-size: 10px; letter-spacing: 1px; color: #fff; cursor: pointer;
  border: none; outline: 2px solid #06070a; padding: 0 16px;
  background: #2e5fe0; box-shadow: inset 3px 3px 0 #7ea2ff, inset -4px -4px 0 #16306f;
}
.cm-mm-saveact--del { background: #d4202a; box-shadow: inset 3px 3px 0 #ff5a52, inset -4px -4px 0 #8c0f0f; }
.cm-mm-saveact:hover { filter: brightness(1.12); }

.cm-mm-foot { display: flex; gap: 13px; margin-top: 4px; }
.cm-mm-footbtn {
  flex: 1 1 0; text-align: center; cursor: pointer;
  font-family: "Press Start 2P", "Courier New", Courier, monospace;
  font-size: 12px; letter-spacing: 1px; color: #fff;
  border: none; outline: 2px solid #06070a; padding: 16px 10px;
  background: #2e5fe0; box-shadow: inset 3px 3px 0 #7ea2ff, inset -4px -4px 0 #16306f;
}
.cm-mm-footbtn:hover { filter: brightness(1.1); }
.cm-mm-footbtn--alt { background: #16171c; box-shadow: inset 3px 3px 0 #2b2f3e, inset -4px -4px 0 #05060a; }

/* single-button rows (cloud "local saves" list — upload only, no side action) */
.cm-mm-saverow--solo { grid-template-columns: minmax(0, 1fr); }

/* form fields used by the Cloud Saves sign-in / verify views */
.cm-mm-field-label { font-size: 11px; letter-spacing: 1px; color: #cdd2e0; }
.cm-mm-field-hint { font-family: "VT323", monospace; font-size: 18px; letter-spacing: 1px; color: #8a8f7a; }
.cm-mm-input {
  font-family: "VT323", monospace; font-size: 24px; letter-spacing: 1px; color: #fff;
  background: #11131a; border: none; outline: 2px solid #06070a;
  box-shadow: inset 2px 2px 0 #05060a; padding: 10px 12px; width: 100%;
}
.cm-mm-input:focus { outline-color: #2bd0d0; }

/* multi-line text field + checkbox row (Report Bug form) */
.cm-mm-textarea {
  font-family: "VT323", monospace; font-size: 20px; line-height: 1.35; letter-spacing: 1px; color: #fff;
  background: #11131a; border: none; outline: 2px solid #06070a;
  box-shadow: inset 2px 2px 0 #05060a; padding: 10px 12px; width: 100%;
  resize: vertical; min-height: 120px;
}
.cm-mm-textarea:focus { outline-color: #2bd0d0; }
.cm-mm-check { display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: "VT323", monospace; font-size: 18px; letter-spacing: 1px; color: #cdd2e0; }
.cm-mm-check input { width: 18px; height: 18px; accent-color: #2e5fe0; cursor: pointer; flex: 0 0 auto; }

/* bug-report inbox (admin) */
.cm-bug-meta { font-family: "VT323", monospace; font-size: 16px; letter-spacing: 1px; color: #8a8f7a; }
.cm-bug-text {
  font-family: "VT323", monospace; font-size: 18px; line-height: 1.4; letter-spacing: 1px;
  color: #e8e3c8; white-space: pre-wrap; word-break: break-word; margin-top: 6px;
}

/* mIRC chat room — a classic Win9x mIRC client living inside the DOS window:
   the Manager90s blue title bar reads as the window caption, the pane is the grey
   client area, and the log/input are sunken white boxes like the real thing. */
.cm-irc-pane { background: #c0c0c0; }                 /* Win95 client area */
.cm-irc-fontstack, .cm-irc-list, .cm-irc-input, .cm-irc-nickinput {
  font-family: "Lucida Console", "DejaVu Sans Mono", "Consolas", "Courier New", monospace;
}
.cm-irc-uifont, .cm-irc-mini, .cm-irc-send, .cm-irc-bar-lbl {
  font-family: Tahoma, "Segoe UI", Geneva, sans-serif;
}

.cm-irc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-irc-bar-lbl { font-size: 12px; letter-spacing: 0; color: #000; flex: 0 0 auto; }

/* Sunken white field (nick + message input) */
.cm-irc-nickinput, .cm-irc-input {
  font-size: 15px; color: #000; background: #fff;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
  padding: 5px 8px; min-width: 0;
}
.cm-irc-nickinput { flex: 1 1 140px; }
.cm-irc-nickinput:focus, .cm-irc-input:focus { outline: 1px dotted #404040; outline-offset: -3px; }
.cm-irc-input { flex: 1 1 0; }
.cm-irc-input:disabled { color: #808080; background: #d8d8d8; }

/* Raised grey Win95 buttons (RANDOM / SEND) */
.cm-irc-mini, .cm-irc-send {
  cursor: pointer; color: #000; background: #c0c0c0; flex: 0 0 auto;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
}
.cm-irc-mini { font-size: 11px; padding: 5px 10px; }
.cm-irc-send { font-size: 13px; padding: 6px 22px; }
.cm-irc-mini:active, .cm-irc-send:active { border-color: #404040 #fff #fff #404040; }
.cm-irc-send:disabled { color: #808080; cursor: default; border-color: #fff #404040 #404040 #fff; }

/* The white message log */
.cm-irc-list {
  display: flex; flex-direction: column; gap: 0;
  height: 52vh; overflow-y: auto;
  background: #fff; color: #101010;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
  padding: 4px 6px;
  font-size: 15px; line-height: 1.45; letter-spacing: 0;
}
.cm-irc-line { display: flex; align-items: baseline; gap: 5px; word-break: break-word; padding: 1px 0; }
.cm-irc-time { color: #707070; flex: 0 0 auto; }
.cm-irc-nick { font-weight: bold; flex: 0 0 auto; }
.cm-irc-nick::before { content: "<"; color: #000; font-weight: normal; }
.cm-irc-nick::after  { content: ">"; color: #000; font-weight: normal; }
.cm-irc-text { color: #101010; min-width: 0; }
.cm-irc-sys, .cm-irc-sys .cm-irc-text { color: #1a7a1a; font-style: italic; }  /* server/info lines, mIRC green */
.cm-irc-del {
  margin-left: auto; flex: 0 0 auto; cursor: pointer;
  font-family: Tahoma, "Segoe UI", sans-serif; font-size: 10px; color: #fff;
  background: #b51212; border: 1px solid; border-color: #e06a6a #6e0606 #6e0606 #e06a6a;
  padding: 0 5px;
}
.cm-irc-del:active { border-color: #6e0606 #e06a6a #e06a6a #6e0606; }

.cm-irc-row { display: flex; gap: 8px; margin-top: 2px; }

@media (max-width: 760px) {
  .cm-mm-pane { padding: 18px 16px 4px; }
  .cm-mm-savelist { max-height: none; }
  .cm-irc-list { height: 46vh; }
}

/* No ambient CRT flicker while you sit and watch the chat (see mircScreen). */
.cm-mm-screen--noflick { animation: none; }

/* MENU */
.cm-mm-menu-lbl { font-size: 11px; letter-spacing: 3px; color: #8a8f7a; padding-bottom: 3px; }

.cm-mm-item {
  position: relative;
  font-family: "Press Start 2P", "Courier New", Courier, monospace;
  border: none; outline: 2px solid #06070a; text-align: left; cursor: pointer;
}
.cm-mm-item--sel { outline: 3px solid #f5e000; box-shadow: 0 0 16px rgba(245,224,0,0.45); z-index: 1; }
.cm-mm-item--disabled { cursor: not-allowed; opacity: 0.5; }

.cm-mm-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.cm-mm-btn-main { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.cm-mm-btn-title { font-size: 16px; letter-spacing: 1px; color: #fff; }
.cm-mm-btn-sub { font-family: "VT323", monospace; font-size: 19px; letter-spacing: 1px; color: #bcd0ff; }

.cm-mm-btn--primary {
  background: #00AA33; box-shadow: inset 3px 3px 0 #33CC5E, inset -5px -5px 0 #006633; padding: 24px 22px;
}
.cm-mm-btn--primary .cm-mm-btn-title { font-size: 19px; color: #06120a; }
.cm-mm-btn--primary .cm-mm-btn-sub { color: #0a3d1c; }
.cm-mm-btn--primary.cm-mm-item--disabled { background: #1d3b27; }
.cm-mm-btn-arrow { font-size: 22px; color: #06120a; }
.cm-mm-btn--primary.cm-mm-item--disabled .cm-mm-btn-arrow,
.cm-mm-btn--primary.cm-mm-item--disabled .cm-mm-btn-title { color: #5a6276; }

.cm-mm-btn--blue {
  background: #2e5fe0; box-shadow: inset 3px 3px 0 #7ea2ff, inset -4px -4px 0 #16306f; padding: 19px 22px;
}
.cm-mm-btn--blue .cm-mm-btn-title { font-size: 16px; }

.cm-mm-btn--saves {
  background: #16171c; box-shadow: inset 3px 3px 0 #2b2f3e, inset -4px -4px 0 #05060a; padding: 17px 22px;
}
.cm-mm-btn--saves .cm-mm-btn-title { font-size: 15px; color: #cf9a26; }
.cm-mm-btn--saves .cm-mm-btn-sub { color: #8a8f7a; }

.cm-mm-util { display: flex; gap: 13px; }
.cm-mm-btn--util, .cm-mm-btn--exit {
  flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 10px;
  justify-content: flex-start; padding: 16px 15px; height: 100%;
}
.cm-mm-btn--util { background: #16171c; box-shadow: inset 3px 3px 0 #2b2f3e, inset -4px -4px 0 #05060a; }
.cm-mm-btn--exit { background: #d4202a; box-shadow: inset 3px 3px 0 #ff5a52, inset -4px -4px 0 #8c0f0f; }
.cm-mm-btn--util .cm-mm-btn-title, .cm-mm-btn--exit .cm-mm-btn-title { font-size: 13px; }
.cm-mm-btn--util .cm-mm-btn-sub { color: #8a8f7a; line-height: 1.15; }
.cm-mm-util-ok { color: #39ff7a !important; }
.cm-mm-btn--exit .cm-mm-btn-sub { color: #ffd0cd; }

.cm-mm-btn:hover { filter: brightness(1.1); }
.cm-mm-item--disabled:hover { filter: none; }

/* STATUS BAR */
.cm-mm-status {
  margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 3px solid #1c2030; padding: 14px 30px;
}
.cm-mm-hints { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cm-mm-hint { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: 1px; color: #8a8f7a; }
.cm-mm-keys { display: inline-flex; gap: 3px; }
.cm-mm-key { padding: 3px 6px; background: #16171c; outline: 2px solid #06070a; color: #cdd2e0; }
.cm-mm-ver { font-family: "VT323", monospace; font-size: 18px; letter-spacing: 1px; color: #5a6276; }
.cm-mm-caret {
  display: inline-block; width: 10px; height: 15px; background: #2bd0d0;
  margin-left: 8px; vertical-align: -2px; animation: cm-mm-blink 1s steps(1) infinite;
}

/* Mobile — stack the two columns (zoom is forced 100% on phones, so this
   @media gate fires correctly here). */
@media (max-width: 760px) {
  .cm-mm-body { flex-direction: column; gap: 18px; padding: 18px 16px 0; }
  .cm-mm-left { flex: 1 1 auto; }
  .cm-mm-status { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 16px; }
  .cm-mm-logo { font-size: 30px; padding: 12px 14px; }
  /* No window resize on phones (resizable class isn't added there anyway). */
  .cm-mm-resizable { resize: none; }
  /* Utility row holds 4 buttons (Cloud / Help / mIRC / Exit) — a single
     non-wrapping flex row overflows the phone and clips EXIT, so wrap to 2×2. */
  .cm-mm-util { flex-wrap: wrap; }
  .cm-mm-util .cm-mm-btn--util,
  .cm-mm-util .cm-mm-btn--exit { flex: 1 1 calc(50% - 7px); min-width: 0; }
}

.cm-menu--button .cm-menu-item:hover {
  background: #5555DD;
}

.cm-menu--button .cm-menu-item--wide {
  aspect-ratio: auto;
}

.cm-menu--button .cm-menu-item--selected {
  background: #6666EE;
  color: var(--yellow);
}

.cm-menu--button .cm-menu-item.is-disabled,
.cm-menu--button .cm-menu-item.is-disabled:hover,
.cm-menu--button .cm-menu-item.is-disabled.cm-menu-item--selected {
  background: #BBBBBB;
  color: #EEEEEE;
  cursor: not-allowed;
  border-top-color: #DDDDDD;
  border-left-color: #DDDDDD;
  border-right-color: #888888;
  border-bottom-color: #888888;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #CCCCCC, inset -1px -1px 0 #999999;
  pointer-events: none;
}

/* ── Form (text input) ───────────────────────────── */

.cm-form {
  padding: 12px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-form-label {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.cm-form-input {
  background: #000044;
  color: var(--yellow);
  font-family: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border-top: 2px solid #111166;
  border-left: 2px solid #111166;
  border-right: 2px solid #6666DD;
  border-bottom: 2px solid #6666DD;
  outline: none;
}

.cm-form-input:focus {
  background: #000088;
  color: var(--white);
}

/* ── Saving toast ────────────────────────────────── */

.cm-saving-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
  padding: 16px;
  pointer-events: all;
}

.cm-saving-bar {
  background: linear-gradient(to bottom, #4444CC 0%, #2222AA 100%);
  color: var(--white);
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 2px;
  text-align: center;
  padding: 12px 32px;
  min-width: 320px;
  max-width: 90vw;
  border-top: 3px solid #8888EE;
  border-left: 3px solid #8888EE;
  border-right: 3px solid #000044;
  border-bottom: 3px solid #000044;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #5555CC, inset -1px -1px 0 #222277;
  text-shadow: 0 -1px 0 #000000;
}

/* Upload progress bar (inside .cm-saving-bar) */
.cm-progress-track {
  margin: 12px 0 8px;
  height: 18px;
  background: #06070a;
  border: 2px solid #000044;
  box-shadow: inset 1px 1px 0 #000000;
  overflow: hidden;
}
.cm-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to bottom, #33CC5E 0%, #00AA33 100%);
  box-shadow: inset 1px 1px 0 #5fe08a;
  transition: width 0.15s linear;
}
.cm-progress-text {
  font-size: 13px;
  letter-spacing: 1px;
  text-shadow: none;
}

/* ── Save Game menu ──────────────────────────────── */

.cm-savegame {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-savegame-row {
  display: flex;
  gap: 8px;
}

.cm-savegame-row--center {
  justify-content: center;
}

.cm-savegame-row--center .cm-sg-btn {
  flex: 0 1 50%;
}

.cm-savegame-note {
  margin-top: 4px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1.4;
  color: #A2A2A2;
  text-align: center;
}

.cm-sg-btn {
  flex: 1;
  font-family: inherit;
  font-weight: bold;
  color: var(--white);
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #262626;
  border-bottom: 2px solid #262626;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #B8B8B8, inset -1px -1px 0 #404040;
  text-shadow: 0 -1px 0 #000000;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

/* ── Save list (Continue Season) ─────────────────── */

.cm-save-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cm-save-row {
  display: flex;
  gap: 6px;
}

.cm-save-load,
.cm-save-rename,
.cm-save-delete {
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  padding: 6px 10px;
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #262626;
  border-bottom: 2px solid #262626;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #B8B8B8, inset -1px -1px 0 #404040;
  text-shadow: 0 -1px 0 #000000;
  color: var(--white);
}

.cm-save-load {
  flex: 1;
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  text-align: left;
  line-height: 1.4;
}

.cm-save-load-sub {
  font-weight: normal;
  font-size: 10px;
  color: var(--cyan);
  margin-top: 2px;
  letter-spacing: 1px;
  text-shadow: none;
}

.cm-save-rename {
  background: linear-gradient(to bottom, #4D7FBF 0%, #2E5790 100%);
  border-top-color: #7FA8DD;
  border-left-color: #7FA8DD;
  border-right-color: #1A2F50;
  border-bottom-color: #1A2F50;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #6E9BD6, inset -1px -1px 0 #1A3560;
  letter-spacing: 2px;
}

.cm-save-delete {
  background: var(--red);
  border-top-color: var(--red-light);
  border-left-color: var(--red-light);
  border-right-color: #550000;
  border-bottom-color: #550000;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #EE3333, inset -1px -1px 0 #880000;
  letter-spacing: 2px;
}

/* ── Name prompt (First Name / Surname) ──────────── */

.cm-name-prompt-host {
  margin-top: 10px;
  padding: 4px 8px;
}

.cm-name-prompt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 16px;
}

.cm-name-label {
  color: var(--cyan);
  text-transform: none;
}

.cm-name-input {
  background: transparent;
  color: #FF8800;
  font-family: inherit;
  font-size: 16px;
  border: none;
  outline: none;
  padding: 0;
  caret-color: #FF8800;
  flex: 1;
  min-width: 0;
}

/* ── Team Choice ─────────────────────────────────── */

.cm-team-choice { padding: 4px; }

.cm-team-heading {
  background: #DD0000;
  color: var(--white);
  text-align: left;
  padding: 3px 10px;
  font-weight: bold;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 6px;
  border-top: 2px solid #FF6666;
  border-left: 2px solid #FF6666;
  border-right: 2px solid #660000;
  border-bottom: 2px solid #660000;
}

.cm-team-body {
  padding: 16px;
  text-align: center;
  color: var(--white);
}

.cm-team-choice .cm-menu {
  gap: 2px 6px;
  padding: 4px;
  background: #005500;
}

.cm-team-choice .cm-menu--bar .cm-menu-item {
  background: linear-gradient(to bottom, #00BB00 0%, #007700 100%);
  color: var(--white);
  border-top: 2px solid #55FF55;
  border-left: 2px solid #55FF55;
  border-right: 2px solid #002200;
  border-bottom: 2px solid #002200;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #33CC33, inset -1px -1px 0 #004400;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
}

.cm-team-choice .cm-menu--bar .cm-menu-item:hover {
  background: #00CC00;
}

.cm-team-choice .cm-menu--bar .cm-menu-item--selected {
  background: var(--white);
  color: #000000;
}

.cm-team-choice .cm-menu-item--empty,
.cm-winb .cm-menu-item--empty {
  visibility: hidden;
  pointer-events: none;
}

.cm-more-btn {
  display: block;
  width: calc(100% - 8px);
  margin: 4px;
  padding: 4px 8px;
  background: #3333AA;
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  border-top: 3px solid #8888EE;
  border-left: 3px solid #8888EE;
  border-right: 3px solid #000044;
  border-bottom: 3px solid #000044;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #5555CC, inset -1px -1px 0 #222277;
  cursor: pointer;
}

.cm-more-btn:hover { filter: brightness(1.2); }

/* ── Season start splash ─────────────────────────── */

.cm-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
}

.cm-splash-message {
  color: var(--yellow);
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 0 16px;
  text-shadow: 0 -1px 0 #000000, 1px 1px 0 #000000;
}

@media (max-width: 600px) {
  .cm-splash-message { font-size: 16px; }
}

/* ── Advance button ────────────────────────────────
   Shared explicit "Advance" control for full-screen message-only
   popups (season / deadline splashes, cup draws, Match of the Week,
   national-squad announcements, transfer news). Replaces the old
   "CLICK MOUSE" / "CLICK TO CONTINUE" hint text. */
.cm-advance-btn {
  display: inline-block;
  margin-top: 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white);
  min-width: 120px;
  padding: 8px 24px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000000;
  border-top: 3px solid #8888FF;
  border-left: 3px solid #8888FF;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
  box-shadow: 1px 1px 0 #000000;
  cursor: pointer;
}
.cm-advance-btn:hover,
.cm-advance-btn:focus { outline: none; filter: brightness(1.15); }

/* ── Game Environment (creation progress) ────────── */

.cm-gameenv {
  width: min(720px, 98vw);
  padding: 8px;
}

.cm-gameenv-heading {
  background: #DD0000;
  color: var(--white);
  text-align: center;
  padding: 6px 8px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 8px;
  border-top: 2px solid #FF6666;
  border-left: 2px solid #FF6666;
  border-right: 2px solid #660000;
  border-bottom: 2px solid #660000;
  box-shadow: 1px 1px 0 #000000;
}

.cm-gameenv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.cm-gameenv-tile {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 11px;
  line-height: 1.3;
  padding: 10px 6px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top: 2px solid #8888EE;
  border-left: 2px solid #8888EE;
  border-right: 2px solid #000044;
  border-bottom: 2px solid #000044;
  box-shadow: 1px 1px 0 #000000;
  text-shadow: 0 -1px 0 #000000;
}

.cm-gameenv-tile--active {
  background: linear-gradient(to bottom, #FFAA33 0%, #CC6600 100%);
  border-top-color: #FFCC88;
  border-left-color: #FFCC88;
  border-right-color: #552200;
  border-bottom-color: #552200;
  color: var(--white);
}

.cm-gameenv-progress {
  margin-top: 6px;
}

.cm-gameenv-progress-label {
  text-align: center;
  color: #000000;
  background: linear-gradient(to bottom, #BBBBBB 0%, #888888 100%);
  font-weight: bold;
  letter-spacing: 3px;
  padding: 2px 8px;
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #333333;
  border-bottom: 2px solid #333333;
  box-shadow: 1px 1px 0 #000000;
  margin-bottom: 4px;
}

.cm-gameenv-progress-bar {
  background: #222222;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  border-right: 2px solid #666666;
  border-bottom: 2px solid #666666;
  height: 16px;
  padding: 2px;
}

.cm-gameenv-progress-fill {
  height: 100%;
  background: #DDDDDD;
  width: 0;
  transition: width 0.3s ease;
}

/* ── Confirm (centered overlay) ──────────────────── */

.cm-confirm-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  padding: 16px;
}

.cm-confirm-box {
  background: #3333AA;
  border-top: 3px solid #6666DD;
  border-left: 3px solid #6666DD;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  max-width: 90vw;
}

.cm-confirm-box .cm-form-input {
  width: 100%;
  box-sizing: border-box;
}

.cm-confirm-label {
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  text-align: center;
}

.cm-confirm-actions {
  display: flex;
  gap: 16px;
}

.cm-confirm-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  background: var(--red);
  color: var(--yellow);
  min-width: 44px;
  min-height: 32px;
  padding: 4px 14px;
  border-top: 3px solid var(--red-light);
  border-left: 3px solid var(--red-light);
  border-right: 3px solid #550000;
  border-bottom: 3px solid #550000;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #EE3333, inset -1px -1px 0 #880000;
  cursor: pointer;
  text-transform: uppercase;
}

.cm-confirm-btn:hover,
.cm-confirm-btn:focus { filter: brightness(1.15); outline: none; }

.cm-confirm-overlay--top {
  align-items: flex-start;
  padding-top: 12px;
  background: transparent;
}

/* "X leaves club" transient — re-uses cm-bid-overlay--full but
   centered vertically (the bid overlay is normally top-anchored). */
.cm-staff-leaves {
  align-items: center;
  padding-top: 0;
}

/* ── Squad-news dialog (e.g. injury reports) ───────────────
   Green board with a club-coloured banner. Banner background is set
   inline so each club's primary kit colour shows through; banner text is
   solid black, body text yellow with a black shadow, both uppercase. */
.cm-news-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
  z-index: 220;
  padding: 18vh 16px 16px;
  animation: cm-news-fade-in 80ms ease-out;
}
.cm-news-overlay.is-closing {
  opacity: 0;
  transition: opacity 80ms ease-in;
}
@keyframes cm-news-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Monthly Awards variant: hug the top of the viewport. Shown inside the
   post-week chain with #app hidden, so the transparent overlay reveals the
   Manager90s watermark backdrop behind it (not the CM93 splash art). */
.cm-news-overlay--mawards {
  padding: 8px 16px 16px;
}

.cm-news-box {
  background: #00a241;
  border-top:    3px solid #33cc66;
  border-left:   3px solid #33cc66;
  border-right:  3px solid #006622;
  border-bottom: 3px solid #006622;
  /* min() caps: a plain min-width beats max-width when they conflict
     and would push the board past a phone viewport. */
  min-width: min(360px, calc(100vw - 38px));
  max-width: 90vw;
  box-shadow: 2px 2px 0 #000000;
}

.cm-news-banner {
  background: #AA5500;                 /* overridden inline with club primary */
  color: #000000;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 2px 6px;
  margin-top: 5px;
}

/* JOB NEWS variant — generic appointment popup, no club-coloured
   banner. White background, black text, matches the DOS CM93
   "JOB NEWS" announcement that fires after a board hire. */
.cm-news-banner--job {
  background: #FFFFFF;
  color: #000000;
}

.cm-news-text {
  color: #e3e260;
  text-shadow: 1px 1px 0 #000000;
  padding: 14px 16px 10px 16px;
  text-transform: uppercase;
  line-height: 1.6;
  /* Exactly 550px on desktop, viewport-capped on phones — the old
     min-width:550px overrode every max-width up the chain and shoved
     the OK button off-screen. */
  width: min(550px, calc(100vw - 44px));
}

.cm-news-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 12px 12px 12px;
}

.cm-news-ok {
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  background: var(--red);
  color: var(--yellow);
  min-width: 56px;
  min-height: 32px;
  padding: 4px 14px;
  border-top:    3px solid var(--red-light);
  border-left:   3px solid var(--red-light);
  border-right:  3px solid #550000;
  border-bottom: 3px solid #550000;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #EE3333, inset -1px -1px 0 #880000;
  cursor: pointer;
  text-transform: uppercase;
}
.cm-news-ok:hover,
.cm-news-ok:focus { filter: brightness(1.15); outline: none; }

/* ── Cup draw popup overlay (Mr Clutch Cup / FA Cup user-involved draw)
   Mirrors the Cambridge v Leyton screenshot — red header, yellow tie,
   green week info. Transparent so the Manager90s watermark backdrop shows
   through: the popup hides #app and mounts on <body>, so only the
   boss93 wallpaper (not the underlying results/hub UI) sits behind the
   text. Matches the National-squads announcement chrome. */
.cm-cupdraw-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  z-index: 220;
  animation: cm-news-fade-in 80ms ease-out;
  cursor: pointer;
}
.cm-cupdraw-box {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 20px 32px;
  text-shadow: 2px 2px 0 #000000;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.6;
}
.cm-cupdraw-title { color: var(--red);    margin-bottom: 6px; }
.cm-cupdraw-tie   { color: var(--yellow); margin-bottom: 6px; }
.cm-cupdraw-week  { color: var(--green); }

/* ── Transfer-deadline splash ──────────────────────────────────────
   Full-screen heads-up shown entering deadline week ("is this week")
   and the tick the window closes ("has now passed"). Mirrors the
   season-start splash: transparent so the Manager90s watermark backdrop
   shows through (the splash hides #app and mounts on <body>), centred
   yellow message, "ADVANCE" button. */
.cm-deadline-overlay {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: transparent;
  z-index: 220;
  animation: cm-news-fade-in 80ms ease-out;
  cursor: pointer;
}
.cm-deadline-message {
  color: var(--yellow);
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 0 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 -1px 0 #000000, 2px 2px 0 #000000;
}
@media (max-width: 600px) {
  .cm-deadline-message { font-size: 16px; }
}

/* ── Match of the Week popup ───────────────────────────────────────
   End-of-week recap, fired after the transfer-news panel. Mirrors the
   cup-draw popup chrome (full-screen wash, picture background, click to
   dismiss); colour scheme is red / yellow / orange. */
.cm-motw-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  z-index: 220;
  animation: cm-news-fade-in 80ms ease-out;
  cursor: pointer;
}
.cm-motw-box {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 20px 32px;
  text-shadow: 2px 2px 0 #000000;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.6;
}
.cm-motw-title { color: var(--red);         margin-bottom: 6px; }
.cm-motw-line  { color: var(--yellow);      margin-bottom: 6px; }
.cm-motw-comp  { color: var(--dark-yellow); }

/* ── Cup bracket screen — list of pairings per round ── */
.cm-cupbracket {
  display: flex; flex-direction: column; gap: 0;
  padding: 6px;
  /* min() cap — a plain 600px min-width overrides max-width and shoves
     the away side off a phone screen. */
  min-width: min(600px, calc(100vw - 12px));
  max-width: 90vw;
}
.cm-cupbracket:focus { outline: none; }
/* Fixed-height ties area so a half-full last page doesn't reflow the
   nav bar up. Sized to hold one full page of CUP_BRACKET_PAGE_SIZE rows
   at the current row height (~28 px including borders + 2 px gap). */
.cm-cupbracket-ties {
  display: flex; flex-direction: column; gap: 0;
  min-height: calc(12 * 30px);
}
/* Red round label with a thin blue outline, mixed-case text — matches the
   "3rd Round Replays" / "Quarter Finals" tab in the original DOS UI. */
.cm-cupbracket-round {
  background: var(--red);
  color: #FFFFFF;
  font-weight: bold;
  font-size: 16px;
  padding: 4px 12px;
  margin: 2px 0 8px 0;
  align-self: flex-start;
  letter-spacing: 1px;
  border-top:    2px solid #EE6666;
  border-left:   2px solid #EE6666;
  border-right:  2px solid #4444AA;
  border-bottom: 2px solid #4444AA;
}
.cm-cupbracket-row {
  display: grid;
  /* outer-AG | home-box | v | away-box | outer-AG */
  grid-template-columns: 22px minmax(0, 1fr) 110px minmax(0, 1fr) 22px;
  gap: 4px;
  margin-bottom: 2px;
  align-items: stretch;
}
/* Drop the outer AG gutters on rounds that never show aggregate digits
   (bracket viewer; matchDay/results on single-leg rounds) so the team
   boxes can claim the freed width. */
.cm-cupbracket-row--noag {
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
}
.cm-cupbracket-side {
  background: linear-gradient(to bottom, #999999 0%, #555555 100%);
  color: #FFFFFF;
  padding: 8px 14px;
  font-size: 15px;
  display: flex; align-items: center; gap: 10px;
  text-transform: uppercase;
  font-weight: bold;
  border-top:    2px solid #BBBBBB;
  border-left:   2px solid #BBBBBB;
  border-right:  2px solid #333333;
  border-bottom: 2px solid #333333;
}
.cm-cupbracket-name {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: normal;
}
.cm-cupbracket-tag {
  color: var(--yellow);
  font-size: 14px;
  font-weight: bold;
}
/* AG digit (1st-leg score pre-L2 → aggregate post-L2). Sits OUTSIDE
   the gray team boxes, in the row's edge gutters — same chrome-free
   floating-digit style the original DOS UI used at the bracket
   extremes, just in white instead of red (cf. shortlist 'R' chip). */
.cm-cupbracket-ag {
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}
.cm-cupbracket-v {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to bottom, #999999 0%, #555555 100%);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 0;
  border-top:    2px solid #BBBBBB;
  border-left:   2px solid #BBBBBB;
  border-right:  2px solid #333333;
  border-bottom: 2px solid #333333;
}
/* Decision marker (P = pens, A = away-goals). Sits on the winning
   side of the score box so the score itself stays perfectly centred
   and the reader can see at a glance who advanced. Aggregate-decided
   ties show no marker (the AG digits in the outer gutters say it). */
.cm-cupbracket-v-pen {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--yellow);
  letter-spacing: 0;
}
.cm-cupbracket-v-pen--home { left:  7px; }
.cm-cupbracket-v-pen--away { right: 4px; }
/* User team highlight — only the user's own side turns yellow.
   Opponent + the 'v' block stay neutral. */
.cm-cupbracket-side--mine,
.cm-cupbracket-side--mine .cm-cupbracket-tag {
  color: var(--yellow);
}
/* Placeholder row — invisible but keeps the same vertical footprint as
   a real row so partial pages don't lift the nav bar. */
.cm-cupbracket-row--filler {
  visibility: hidden;
}
.cm-cupbracket-row--filler::before {
  content: '\00a0';
  display: block;
  /* Match a real row's content height (text + 2 borders + padding).
     grid-column 1/-1 → span every column so the pad doesn't collapse
     into the 22px AG gutter. */
  grid-column: 1 / -1;
  padding: 8px 14px;
  font-size: 15px;
  border-top:    2px solid transparent;
  border-bottom: 2px solid transparent;
  font-weight: bold;
}
/* European-cup variant — flips the bracket palette to match the
   DOS CM93 UEFA / Cup Winners / European screens:
   - round/leg label: white box, black text, "Nth Round, 1st Legs" wording
   - team sides: pale silver-blue gradient, dark blue team name, yellow
     country tag (FOREIGN already used a flag; same chrome here)
   - 'v' separator: same pale gradient, white 'v'. */
.cm-cupbracket--euro .cm-cupbracket-round {
  background: #FFFFFF;
  color: #000000;
  border-top-color:    #FFFFFF;
  border-left-color:   #FFFFFF;
  border-right-color:  #888888;
  border-bottom-color: #888888;
}
.cm-cupbracket--euro .cm-cupbracket-side {
  background: #c3c3c3;
  color: #0040A1;
  font-weight: normal;
  border-top-color:    #C8C8C8;
  border-left-color:   #C8C8C8;
  border-right-color:  #555555;
  border-bottom-color: #555555;
}
.cm-cupbracket--euro .cm-cupbracket-tag {
  font-weight: normal;
}
.cm-cupbracket--euro .cm-cupbracket-tag {
  color: var(--yellow);
}
.cm-cupbracket--euro .cm-cupbracket-v {
  background: #c3c3c3;
  color: #FFFFFF;
  border-top-color:    #C8C8C8;
  border-left-color:   #C8C8C8;
  border-right-color:  #555555;
  border-bottom-color: #555555;
}
/* Domestic-club highlight (English clubs in this campaign): light-blue
   team name so the home nation pops against the foreign teams. Only the
   name swaps — the country tag stays yellow (matches the foreign tag
   colour so the column reads cleanly across the bracket). Stacks under
   `--mine`, which takes the yellow accent below. */
.cm-cupbracket--euro .cm-cupbracket-side--domestic .cm-cupbracket-name {
  color: #2082C3;
}
/* User-team highlight: keep the yellow accent like the domestic bracket,
   override both the name (normally dark blue) and the country tag. Listed
   AFTER `--domestic` so a user-managed English club stays yellow, not
   light blue. */
.cm-cupbracket--euro .cm-cupbracket-side--mine,
.cm-cupbracket--euro .cm-cupbracket-side--mine .cm-cupbracket-name,
.cm-cupbracket--euro .cm-cupbracket-side--mine .cm-cupbracket-tag {
  color: var(--yellow);
}

/* Playoffs bracket variant — matches the DOS CM93 end-of-season playoff
   screen: white round-label box ("Semi Finals, 1st Legs"), uniform blue
   team rows (no gray gradient — the playoffs use a flat blue chrome to
   stand apart from the FA / Coca-Cola brackets), white team names, yellow
   DIV1/DIV2/DIV3 division tags. */
.cm-cupbracket--playoffs .cm-cupbracket-round {
  background: #FFFFFF;
  color: #000000;
  border-top-color:    #FFFFFF;
  border-left-color:   #FFFFFF;
  border-right-color:  #888888;
  border-bottom-color: #888888;
}
.cm-cupbracket--playoffs .cm-cupbracket-side {
  background: #2082C3;
  color: #FFFFFF;
  border-top-color:    #FFFFFF;
  border-left-color:   #FFFFFF;
  border-right-color:  #000000;
  border-bottom-color: #000000;
}
.cm-cupbracket--playoffs .cm-cupbracket-tag {
  color: var(--yellow);
}
.cm-cupbracket--playoffs .cm-cupbracket-v {
  background: #2082C3;
  color: #FFFFFF;
  border-top-color:    #FFFFFF;
  border-left-color:   #FFFFFF;
  border-right-color:  #000000;
  border-bottom-color: #000000;
}
.cm-cupbracket--playoffs .cm-cupbracket-side--mine,
.cm-cupbracket--playoffs .cm-cupbracket-side--mine .cm-cupbracket-name,
.cm-cupbracket--playoffs .cm-cupbracket-side--mine .cm-cupbracket-tag {
  color: var(--yellow);
}

/* Friendly variant — pre-season friendlies share the bracket layout
   but flip the palette: white "Friendly Match" banner, green team
   tiles with yellow names + white division tags, green "v".
   Single-tie page, so the ties area shrinks to one row (the default
   min-height: calc(12 * 30px) would float ADVANCE way down the page). */
.cm-cupbracket--friendly .cm-cupbracket-ties {
  min-height: 0;
}
.cm-cupbracket--friendly .cm-cupbracket-round {
  background: #FFFFFF;
  color: #000000;
  border-top-color:    #FFFFFF;
  border-left-color:   #FFFFFF;
  border-right-color:  #888888;
  border-bottom-color: #888888;
}
.cm-cupbracket--friendly .cm-cupbracket-side {
  background: #008833;
  color: var(--yellow, #FFFF55);
  font-weight: bold;
  border-top-color:    #22AA55;
  border-left-color:   #22AA55;
  border-right-color:  #004411;
  border-bottom-color: #004411;
}
.cm-cupbracket--friendly .cm-cupbracket-side--home .cm-cupbracket-name {
  color: var(--yellow, #FFFF55);
  font-weight: bold;
}
.cm-cupbracket--friendly .cm-cupbracket-side--away .cm-cupbracket-name {
  color: #FFFFFF;
  font-weight: bold;
}
.cm-cupbracket--friendly .cm-cupbracket-tag {
  color: #FFFFFF;
}
.cm-cupbracket--friendly .cm-cupbracket-v {
  background: #008833;
  color: #FFFFFF;
  border-top-color:    #22AA55;
  border-left-color:   #22AA55;
  border-right-color:  #004411;
  border-bottom-color: #004411;
}
/* User-team highlight on a friendly tile — keep both name and tag
   readable on the green; brighten the tag from white to yellow to
   match the rest of the cup-bracket --mine treatment. */
.cm-cupbracket--friendly .cm-cupbracket-side--mine .cm-cupbracket-name,
.cm-cupbracket--friendly .cm-cupbracket-side--mine .cm-cupbracket-tag {
  color: var(--yellow, #FFFF55);
}

/* Charity Shield variant — same green-tile chrome as --friendly, but
   the home team isn't unconditionally yellow (the friendly default).
   Both sides stay white; only the user's team flips to yellow via the
   standard --mine selector. Sized for a single-tie page like --friendly. */
.cm-cupbracket--charity .cm-cupbracket-ties { min-height: 0; }
.cm-cupbracket--charity .cm-cupbracket-round {
  background: #FFFFFF; color: #000000;
  border-top-color:    #FFFFFF;
  border-left-color:   #FFFFFF;
  border-right-color:  #888888;
  border-bottom-color: #888888;
}
.cm-cupbracket--charity .cm-cupbracket-side {
  background: #008833; color: #FFFFFF; font-weight: bold;
  border-top-color:    #22AA55;
  border-left-color:   #22AA55;
  border-right-color:  #004411;
  border-bottom-color: #004411;
}
.cm-cupbracket--charity .cm-cupbracket-name { color: #FFFFFF; font-weight: bold; }
.cm-cupbracket--charity .cm-cupbracket-tag  { color: #FFFFFF; }
.cm-cupbracket--charity .cm-cupbracket-v {
  background: #008833; color: #FFFFFF; font-weight: bold;
  border-top-color:    #22AA55;
  border-left-color:   #22AA55;
  border-right-color:  #004411;
  border-bottom-color: #004411;
}
.cm-cupbracket--charity .cm-cupbracket-side--mine .cm-cupbracket-name,
.cm-cupbracket--charity .cm-cupbracket-side--mine .cm-cupbracket-tag {
  color: var(--yellow, #FFFF55);
}

/* Anglo-Italian Cup — English Section variant. Green tile + white team
   names, yellow ENG country code. Group letters A..F render in a 14px
   left rail outside the tile column, stamped via `row.dataset.group`. */
.cm-cupbracket--anglo .cm-cupbracket-round {
  background: #FFFFFF; color: #000000;
  border-top-color: #FFFFFF; border-left-color: #FFFFFF;
  border-right-color: #888888; border-bottom-color: #888888;
}
.cm-cupbracket--anglo .cm-cupbracket-ties { padding-left: 18px; }
.cm-cupbracket--anglo .cm-cupbracket-row  { position: relative; }
.cm-cupbracket--anglo .cm-cupbracket-row::before {
  content: attr(data-group);
  position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 14px; text-align: center;
  font-weight: bold; color: #FFFFFF; letter-spacing: 0;
  text-transform: uppercase;
}
.cm-cupbracket--anglo .cm-cupbracket-side {
  background: #008833; color: #FFFFFF; font-weight: bold;
  border-top-color:    #22AA55;
  border-left-color:   #22AA55;
  border-right-color:  #004411;
  border-bottom-color: #004411;
}
.cm-cupbracket--anglo .cm-cupbracket-name { color: #FFFFFF; }
.cm-cupbracket--anglo .cm-cupbracket-tag  {
  color: var(--yellow, #FFFF55); font-weight: bold;
}
.cm-cupbracket--anglo .cm-cupbracket-v {
  background: #008833; color: #FFFFFF; font-weight: bold;
  border-top-color:    #22AA55;
  border-left-color:   #22AA55;
  border-right-color:  #004411;
  border-bottom-color: #004411;
}
.cm-cupbracket--anglo .cm-cupbracket-side--mine .cm-cupbracket-name,
.cm-cupbracket--anglo .cm-cupbracket-side--mine .cm-cupbracket-tag {
  color: var(--yellow, #FFFF55);
}

/* Anglo-Italian Cup — International Stage / SF / Final variant. Royal
   purple tile + white team names + yellow country code. Same left-rail
   mechanism as --anglo (A / B for mirror group on Intl rows; empty on
   SF / Final). */
.cm-cupbracket--anglo-intl .cm-cupbracket-round {
  background: #FFFFFF; color: #000000;
  border-top-color: #FFFFFF; border-left-color: #FFFFFF;
  border-right-color: #888888; border-bottom-color: #888888;
}
.cm-cupbracket--anglo-intl .cm-cupbracket-ties { padding-left: 18px; }
.cm-cupbracket--anglo-intl .cm-cupbracket-row  { position: relative; }
.cm-cupbracket--anglo-intl .cm-cupbracket-row::before {
  content: attr(data-group);
  position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 14px; text-align: center;
  font-weight: bold; color: #FFFFFF; letter-spacing: 0;
  text-transform: uppercase;
}
.cm-cupbracket--anglo-intl .cm-cupbracket-side {
  background: #6A1A8A; color: #FFFFFF; font-weight: bold;
  border-top-color:    #9942B5;
  border-left-color:   #9942B5;
  border-right-color:  #2D0A40;
  border-bottom-color: #2D0A40;
}
.cm-cupbracket--anglo-intl .cm-cupbracket-name { color: #FFFFFF; }
.cm-cupbracket--anglo-intl .cm-cupbracket-tag  {
  color: var(--yellow, #FFFF55); font-weight: bold;
}
.cm-cupbracket--anglo-intl .cm-cupbracket-v {
  background: #6A1A8A; color: #FFFFFF; font-weight: bold;
  border-top-color:    #9942B5;
  border-left-color:   #9942B5;
  border-right-color:  #2D0A40;
  border-bottom-color: #2D0A40;
}
.cm-cupbracket--anglo-intl .cm-cupbracket-side--mine .cm-cupbracket-name,
.cm-cupbracket--anglo-intl .cm-cupbracket-side--mine .cm-cupbracket-tag {
  color: var(--yellow, #FFFF55);
}

/* Anglo-Italian Cup — Group Tables paginated views. Inherits the shared
   .cm-grouptable look; this just adds inter-table spacing for the
   stacked 3-up (English Section) and 2-up (International Stage) pages.  */
.cm-cupbracket--anglo-groups .cm-grouptable + .cm-grouptable {
  margin-top: 8px;
}
.cm-cupbracket--anglo-groups .cm-grouptable-label {
  letter-spacing: 1px;
}

/* Group Tables — top-level cup-selector menu. 2-up top row, 1 centered
   button below (Exit | European Cup / Anglo-Ital Cup centred).         */
.cm-groupmenu {
  display: flex; flex-direction: column;
  padding: 16px 12px;
}

/* Bottom nav bar reuses .cm-ltable-actions / .cm-ltable-btn from the
   league-table screen so the cup bracket gets the same -ROUND / EXIT /
   +ROUND look without needing a parallel ruleset. */

/* ── Group Tables (European Cup) ─────────────────────
   Matches the DOS CM93 group-stage screen: white "GROUP X" label bar,
   blue TEAM header + red stat headers, dark-blue data cells, green
   highlight for the user's club. */
.cm-grouptable {
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 8px;
}
.cm-grouptable-label {
  background: #FFFFFF;
  color: #000000;
  font-weight: bold;
  font-size: 14px;
  padding: 4px 12px;
  margin: 4px 0 2px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  align-self: stretch;
  border-top:    2px solid #FFFFFF;
  border-left:   2px solid #FFFFFF;
  border-right:  2px solid #888888;
  border-bottom: 2px solid #888888;
}
/* 8 columns: TEAM (flex) | P W D L F A PTS (fixed). */
.cm-grouptable-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(6, 44px) 56px;
  gap: 2px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 2px;
}
/* Stat cells (P/W/D/L/F/A/PTS): dark-blue with light/dark bevel. */
.cm-grouptable-row > span {
  background: var(--dark-blue);
  color: #FFFFFF;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top:    2px solid #4D85D0;
  border-left:   2px solid #4D85D0;
  border-right:  2px solid #001A55;
  border-bottom: 2px solid #001A55;
}
/* Team-name cell (first column): grey embossed bar matching the Premier
   -division team-name bar (.cm-ltable-grid--premier .cm-ltable-name). */
.cm-grouptable-row > span:first-child {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  border-top-color:    #DDDDDD;
  border-left-color:   #DDDDDD;
  border-right-color:  #262626;
  border-bottom-color: #262626;
  box-shadow: inset 1px 1px 0 #B8B8B8, inset -1px -1px 0 #404040;
}
.cm-grouptable-row > span:first-child {
  justify-content: flex-start;
}
/* Header row: TEAM column in lighter blue, stat columns in red. */
.cm-grouptable-row--head > span {
  text-shadow: none;
  box-shadow: none;
}
.cm-grouptable-row--head > span:first-child {
  background: #2082C3;
  border-top-color:    #55AAEE;
  border-left-color:   #55AAEE;
  border-right-color:  #003355;
  border-bottom-color: #003355;
}
.cm-grouptable-row--head > span:not(:first-child) {
  background: var(--red);
  color: #FFFFFF;
  border-top-color:    #FF5555;
  border-left-color:   #FF5555;
  border-right-color:  #550000;
  border-bottom-color: #550000;
}
/* User's club row — matches the league-table user highlight: green
   gradient background, white text, light/dark green bevel. Wins over
   the default dark-blue cell. */
.cm-grouptable-row--mine > span {
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%);
  color: var(--white);
  text-shadow: none;
  border-top-color:    #AAFFAA;
  border-left-color:   #AAFFAA;
  border-right-color:  #003300;
  border-bottom-color: #003300;
  box-shadow: inset 1px 1px 0 #77EE77, inset -1px -1px 0 #226622;
}

/* ── European Seedings ──────────────────────────────── */
.cm-euroseed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 8px;
}
.cm-euroseed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px;
  gap: 4px;
  background: linear-gradient(to bottom, #999999 0%, #555555 100%);
  color: #FFFFFF;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  border-top:    2px solid #BBBBBB;
  border-left:   2px solid #BBBBBB;
  border-right:  2px solid #333333;
  border-bottom: 2px solid #333333;
}
.cm-euroseed-name {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-euroseed-country {
  color: var(--yellow);
  text-align: right;
  white-space: nowrap;
}

/* ── Team confirm overlay (Exit / Team / Another Team) ── */

.cm-team-confirm {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  /* min-width wins over max-width when they conflict, so a plain 480px
     overflows a phone viewport and the overlay clips both sides (Exit
     off-screen left, team bar off-screen right). Cap it to the viewport
     minus the overlay's 16px padding on each side. */
  min-width: min(480px, calc(100vw - 32px));
  max-width: 90vw;
  padding: 0;
}

.cm-team-confirm-title {
  align-self: center;
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white);
  font-weight: bold;
  padding: 4px 18px;
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
  text-shadow: 0 -1px 0 #000000;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.cm-team-confirm .cm-menu {
  padding: 0;
  gap: 6px;
  background: transparent;
}

/* ── 4-column division team chooser (Club Details → Another Team) ── */

.cm-team-choice--top {
  position: fixed;
  /* Full viewport height (was `0 0 auto 0`, which sized to content and so
     couldn't scroll — long division lists pushed the EXIT button and the
     bottom divisions off-screen with no way to reach them). A full-height
     scroll container fixes that; padding-bottom clears the fixed status
     bar so the last row + EXIT aren't hidden behind it. */
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 52px;
  z-index: 150;
  background: transparent;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cm-team-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  width: min(960px, 96vw);
}

.cm-team-headers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.cm-team-header {
  background: var(--red, #C03030);
  color: var(--yellow, #FFFF55);
  font-weight: bold;
  text-align: left;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
}

.cm-team-grid .cm-menu {
  padding: 0;
  gap: 2px;
  background: transparent;
  margin-top: 2px;
}

.cm-team-grid .cm-menu--bar .cm-menu-item {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
  box-shadow: none;
  color: var(--white);
  padding: 2px 8px;
  min-height: 0;
}

.cm-team-grid .cm-menu--bar .cm-menu-item--selected {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white);
}

.cm-menu-item--mine,
.cm-team-grid .cm-menu--bar .cm-menu-item--mine {
  color: var(--yellow, #FFFF55) !important;
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%) !important;
}

.cm-team-exit {
  background: var(--red);
  color: var(--yellow);
  font-weight: bold;
  text-align: center;
  padding: 6px 12px;
  margin-top: 6px;
  cursor: pointer;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  text-shadow: 0 -1px 0 #000;
  outline: none;
}

.cm-team-exit:hover,
.cm-team-exit:focus { filter: brightness(1.15); }

/* ── Squad Screen ───────────────────────────────── */

.cm-squad {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  width: min(960px, 98vw);
  margin: 0 auto;
  font-weight: bold;
  position: relative;
}

/* "Appl" badge — top-right of the squad root when the club is vacant.
   Positioned absolutely so it sits beside the team-name title chip
   without disturbing the existing column layout. */
.cm-squad-appl {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--red);
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  letter-spacing: 2px;
  font-size: 16px;
  font-weight: bold;
  padding: 4px 14px;
  cursor: pointer;
  border-top: 2px solid #FF6666;
  border-left: 2px solid #FF6666;
  border-right: 2px solid #440000;
  border-bottom: 2px solid #440000;
  user-select: none;
}
.cm-squad-appl:hover { filter: brightness(1.15); }

.cm-squad-title {
  align-self: flex-start;
  background: var(--yellow, #FFFF55);
  color: #000;
  padding: 4px 18px;
  border-top: 2px solid #FFFFAA;
  border-left: 2px solid #FFFFAA;
  border-right: 2px solid #886600;
  border-bottom: 2px solid #886600;
  letter-spacing: 2px;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cm-squad-tabs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cm-squad-tab {
  background: linear-gradient(to bottom, #BBBBBB 0%, #707070 100%);
  color: var(--white, #fff);
  text-shadow: 0 -1px 0 #000;
  padding: 4px 10px;
  text-align: center;
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #262626;
  border-bottom: 2px solid #262626;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cm-squad-body {
  display: flex;
  gap: 1px;
  align-items: stretch;
  background: transparent;
}

.cm-squad-list {
  display: flex;
  flex: 1;
  gap: 2px;
  padding: 0;
  background: transparent;
  margin-top: 5px;
}

.cm-squad-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cm-squad-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: stretch;
  gap: 1px;
  padding: 0;
}

.cm-squad-row--right {
  grid-template-columns: 1fr auto 36px;
}

.cm-squad-tag {
  background: var(--red, #C03030);
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  color: var(--white, #fff);
  font-weight: bold;
  text-align: center;
  min-height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1;
}

.cm-squad-tag--assigned {
  background: #FFFFFF;
  color: var(--red, #C03030);
  text-shadow: none;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #888888;
  border-bottom-color: #888888;
  /* Assigned tags are drag handles: claim the touch gesture for our touch-
     drag shim instead of letting it scroll the squad list. */
  touch-action: none;
  /* Signal that the number badge is grabbable (drag to reposition). */
  cursor: pointer;
}

/* Touch-drag drop-target highlight on a player row (mirrors the native
   dragover hover the desktop path gets for free). Covers both the main Squad
   layout (.cm-squad-name) and the by-position DEFS/MIDS/ATTS one (.cm-sqp-name). */
.cm-squad-row--drop-over .cm-squad-name,
.cm-squad-row--drop-over .cm-sqp-name {
  background: linear-gradient(to bottom, #6666EE 0%, #3333CC 100%);
  border-top-color: #9999FF;
  border-left-color: #9999FF;
}

.cm-squad-name {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white, #fff);
  /* text-shadow: 0 -1px 0 #000; */
  padding: 1px 25px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 11px;
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}

.cm-squad-name--alt {
  background: linear-gradient(to bottom, #C4C4C4 0%, #A0A0A0 100%);
  border-top-color: #DDDDDD;
  border-left-color: #DDDDDD;
}

.cm-squad-name {
  position: relative;
}

.cm-squad-name--unhappy::before,
.cm-sqp-name--unhappy::before,
.cm-penalty-name--unhappy::before {
  content: 'U';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--yellow, #FFFF55);
  font-weight: bold;
  letter-spacing: 0;
  pointer-events: none;
}

.cm-squad-name--freeagent::before,
.cm-sqp-name--freeagent::before,
.cm-penalty-name--freeagent::before {
  content: 'C';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--yellow, #FFFF55);
  font-weight: bold;
  letter-spacing: 0;
  pointer-events: none;
}

.cm-squad-name--loanin,
.cm-sqp-name--loanin {
  color: var(--yellow, #FFFF55);
}

/* Home-grown / regen tint — players minted by the NEW SEASON pass
   (reserve promotions, NL pull-up squads). Visual cue for academy
   graduates vs preset / signed seniors. */
.cm-squad-name--regen,
.cm-sqp-name--regen {
  color: #134e89;
}

.cm-squad-name--loan::before,
.cm-sqp-name--loan::before,
.cm-penalty-name--loan::before {
  content: 'L';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: var(--yellow, #FFFF55);
  font-weight: bold;
  letter-spacing: 0;
  pointer-events: none;
}

.cm-sqp-name,
.cm-penalty-name {
  position: relative;
}

.cm-squad-pos {
  background: var(--yellow, #FFFF55);
  color: var(--red, #C03030);
  padding: 1px 6px;
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: normal;
  font-size: 11px;
  min-width: 120px;
  width: 120px;
  text-align: left;
  white-space: nowrap;
  border-top: 2px solid #FFFFAA;
  border-left: 2px solid #FFFFAA;
  border-right: 2px solid #886600;
  border-bottom: 2px solid #886600;
}

.cm-squad-nums {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 2px;
  margin-top: 5px;
}

.cm-squad-num {
  background: #FFFFFF;
  color: #000;
  padding: 2px 0;
  text-align: center;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
  letter-spacing: 1px;
  text-transform: uppercase;
  /* Drag handle for the touch-drag shim — claim the touch gesture. */
  touch-action: none;
}

/* Shirt number not yet assigned to any player — flag it in red. */
.cm-squad-num--unassigned {
  color: #CC0000;
}

.cm-squad-num--alt {
  background: #4444CC;
  color: var(--white, #fff);
}

.cm-squad-num--selected {
  background: #000;
  color: #fff;
  border-top-color: #444;
  border-left-color: #444;
  border-right-color: #000;
  border-bottom-color: #000;
}

.cm-squad-num--alt.cm-squad-num--swp-active {
  background: #FFFFFF;
  color: #4444CC;
}

.cm-squad-stats {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  margin-bottom: 5px;
}

.cm-squad-stats--other {
  margin-top: 5px;
}

.cm-squad-stat {
  color: var(--white, #fff);
  padding: 3px 0;
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
}

.cm-squad-stat--blue {
  background: #4488CC;
  border-top: 2px solid #77BBEE;
  border-left: 2px solid #77BBEE;
  border-right: 2px solid #225588;
  border-bottom: 2px solid #225588;
}

.cm-squad-stat--green {
  background: #006633;
  border-top: 2px solid #339966;
  border-left: 2px solid #339966;
  border-right: 2px solid #003300;
  border-bottom: 2px solid #003300;
}

.cm-squad-stat--other {
  background: #00AA55;
  color: var(--yellow, #FFFF55);
  font-size: 15px;
  padding: 6px 0;
  border-top: 2px solid #55DD88;
  border-left: 2px solid #55DD88;
  border-right: 2px solid #006633;
  border-bottom: 2px solid #006633;
}

.cm-squad-actions {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2px;
  margin-top: 0;
}

.cm-squad-action {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  text-shadow: 0 -1px 0 #000;
  padding: 10px 0;
  text-align: center;
  font-size: 18px;
  letter-spacing: 3px;
  border-top: 3px solid #8888FF;
  border-left: 3px solid #8888FF;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
  cursor: pointer;
}

/* Pre-match DONE replacement when fewer than 11 starters are picked.
   Mirrors the DOS warning bar — solid red with white label, sized to
   fit the longer "Too few picked" text in the same wide slot. */
.cm-squad-action.cm-squad-action--locked {
  background: var(--red, #C03030);
  border-top-color: #EE6666;
  border-left-color: #EE6666;
  border-right-color: #550000;
  border-bottom-color: #550000;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: not-allowed;
}

/* ── Reserve INFO popup ──────────────────────────── */
/* Small centered scouting card opened from the Reserves screen. The
   title sits on a white bar (DOS draws the player name in black on
   gray); the body is a 2-column green grid with yellow labels and
   yellow values, matching the "INFO ON <NAME>" overlay in the
   original. */
.cm-reserve-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.cm-reserve-info-box {
  width: min(600px, 96vw);
  border-top: 2px solid #66CC88;
  border-left: 2px solid #66CC88;
  border-right: 2px solid #003300;
  border-bottom: 2px solid #003300;
  font-weight: bold;
  letter-spacing: 1px;
}

.cm-reserve-info-title {
  background: #FFFFFF;
  color: #000;
  text-align: center;
  padding: 4px 10px;
  font-size: 14px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.cm-reserve-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #00AA55;
}

.cm-reserve-info-key,
.cm-reserve-info-val {
  background: #00AA55;
  color: var(--yellow, #FFFF55);
  padding: 6px 10px;
  border-top: 1px solid #006633;
  border-left: 1px solid #55DD88;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Staff Screen ────────────────────────────────── */

.cm-staff-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.cm-staff-header .cm-squad-title {
  margin-bottom: 0;
}

.cm-staff-sack {
  background: #006633;
  color: var(--white, #fff);
  padding: 4px 16px;
  border-top: 2px solid #339966;
  border-left: 2px solid #339966;
  border-right: 2px solid #003300;
  border-bottom: 2px solid #003300;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
}

.cm-staff-sack:hover { filter: brightness(1.08); }

.cm-staff-sack.is-armed {
  background: var(--white, #fff);
  color: #006633;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
}

/* When the SACK action is armed (class set on the staff body), sackable
   cards get a pointer cursor + subtle hover lift so the user knows what
   to click next. Scout entries are wrapped individually so the three
   scouts in the single scouts card are picked separately. */
.cm-staff-body.is-armed .cm-staff-card.is-sackable { cursor: pointer; }
.cm-staff-body.is-armed .cm-staff-card.is-sackable:hover { filter: brightness(1.08); }
.cm-staff-body.is-armed .cm-staff-scout-entry { cursor: pointer; }
.cm-staff-body.is-armed .cm-staff-scout-entry:hover { filter: brightness(1.12); }

.cm-staff-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 5px;
  margin-bottom: 5px;
  align-items: stretch;
}

.cm-staff-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cm-staff-col--right {
  gap: 14px;
}

.cm-staff-done {
  margin-top: auto;
}

/* Each card is a single table with a thick black outer border. The header
   ("MANAGER"), the name strip ("B B") and every data row are flush: each
   has its own 3D bevel, and bevels butt up against each other to form the
   continuous look of the CM93 box. Data rows split into two separately-
   beveled cells so a vertical divider appears between label and value. */
.cm-staff-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 2px solid #000;
}

.cm-staff-card-head {
  color: #000;
  background: #FFFFFF;
  text-align: center;
  padding: 2px 0;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
}

.cm-staff-subname {
  text-align: center;
  padding: 2px 0;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
}

.cm-staff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.cm-staff-label,
.cm-staff-value {
  padding: 2px 10px;
  letter-spacing: 1px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
}

/* Blue manager card */
.cm-staff-card--blue .cm-staff-subname,
.cm-staff-card--blue .cm-staff-label,
.cm-staff-card--blue .cm-staff-value {
  background: #4488CC;
  color: var(--white, #fff);
  border-top: 2px solid #77BBEE;
  border-left: 2px solid #77BBEE;
  border-right: 2px solid #225588;
  border-bottom: 2px solid #225588;
}

/* Green team-coach card */
.cm-staff-card--green .cm-staff-subname,
.cm-staff-card--green .cm-staff-label,
.cm-staff-card--green .cm-staff-value,
.cm-staff-card--green .cm-staff-vacancy-line {
  background: #006633;
  color: var(--white, #fff);
  border-top: 2px solid #339966;
  border-left: 2px solid #339966;
  border-right: 2px solid #003300;
  border-bottom: 2px solid #003300;
}

/* "THE COACH IS / TEMPORARY MANAGER" caretaker placeholder. */
.cm-staff-vacancy-line {
  text-align: center;
  padding: 8px 6px;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
}

/* Grey cards (scouts, physio, youth) — default white text on light grey */
.cm-staff-card--grey .cm-staff-subname,
.cm-staff-card--grey .cm-staff-label,
.cm-staff-card--grey .cm-staff-value {
  background: linear-gradient(to bottom, #CACACA 0%, #9A9A9A 100%);
  color: var(--white, #fff);
  border-top: 2px solid #E0E0E0;
  border-left: 2px solid #E0E0E0;
  border-right: 2px solid #606060;
  border-bottom: 2px solid #606060;
}

/* League Scouts override: scout names in darker CM93 blue */
.cm-staff-card--scouts .cm-staff-subname {
  color: #1F3AA8;
}

.cm-staff-empty {
  padding: 8px;
  text-align: center;
  color: var(--white, #fff);
  opacity: 0.7;
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
}

/* ── Squad By Position (DEFS / MIDS / ATTS) ──────── */

/* Each .cm-sqp-row is a single element with its own grid so clicks/drops
   anywhere along a row (tag, name, or stats) fire one handler. The header
   row and every player row share identical track sizing to line up. */
.cm-sqp-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 5px;
}

.cm-sqp-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cm-sqp-row {
  display: grid;
  grid-template-columns: 40px 260px 1fr;
  gap: 2px;
}

.cm-sqp-head-label {
  grid-column: 1 / span 2; /* cover both the tag col + name col */
  background: #FFFFFF;
  color: #000;
  padding: 2px 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
  display: flex;
  align-items: center;
}

/* Sortable headers are clickable; no visual cue for the active column. */
.cm-sqp-sortable { cursor: pointer; user-select: none; }

.cm-sqp-head-stats {
  display: grid;
  gap: 2px;
  background: #886600; /* shows through as separator lines between yellow cells */
}

.cm-sqp-head-stat {
  background: var(--yellow, #FFFF55);
  color: #000;
  padding: 2px 0;
  text-align: center;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-top: 1px solid #FFFFAA;
  border-left: 1px solid #FFFFAA;
}

.cm-sqp-tag {
  background: var(--red, #C03030);
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  color: var(--white, #fff);
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 1px;
  min-height: 18px;
}

.cm-sqp-tag.cm-squad-tag--assigned {
  background: #FFFFFF;
  color: var(--red, #C03030);
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #888888;
  border-bottom-color: #888888;
}

.cm-sqp-name {
  position: relative;
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white, #fff);
  padding: 1px 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 12px;
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  display: flex;
  align-items: center;
}

.cm-sqp-stats {
  display: grid;
  gap: 2px;
  background: #111166; /* thin dark lines between blue stat cells */
}

.cm-sqp-stat {
  background: #3333AA;
  color: var(--white, #fff);
  padding: 2px 0;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #5555CC;
  border-left: 1px solid #5555CC;
}

.cm-sqp-stat--hi {
  color: var(--yellow, #FFFF55);
}

/* ── Player Detail Screen ───────────────────────── */

.cm-player-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: min(720px, 98vw);
  margin: 0 auto;
  padding: 4px;
  font-weight: normal;
}

.cm-player-header {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

.cm-player-header .cm-player-tabs { margin-left: auto; }

.cm-player-name {
  background: var(--red, #C03030);
  color: var(--white, #fff);
  padding: 6px 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 15px;
  border-top: 3px solid #EE6666;
  border-left: 3px solid #EE6666;
  border-right: 3px solid #550000;
  border-bottom: 3px solid #550000;
  text-shadow: 0 -1px 0 #000;
  display: flex;
  align-items: center;
}

/* Foreign players (entered via Players Abroad) render the name bar in the
   same blue palette as the screen chrome — the DOS build used this flat
   blue to signal "not one of your kit-coloured players". */
.cm-player-name--foreign {
  background: #3333AA;
  border-top-color: #8888EE;
  border-left-color: #8888EE;
  border-right-color: #000044;
  border-bottom-color: #000044;
}

/* Debug toggle — manager tool exposing the hidden CA/PA so the user can
   plan training. Own players only (see playerDetailScreen). Sits in the
   header right after the name bar. */
.cm-player-debug-toggle {
  background: #444;
  color: var(--yellow, #FFFF55);
  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  padding: 3px 10px;
  font: inherit;
  letter-spacing: 1px;
  cursor: pointer;
}

.cm-player-debug-panel {
  display: flex;
  gap: 14px;
  background: #1a1a1a;
  color: var(--white, #fff);
  padding: 4px 10px;
  letter-spacing: 1px;
}

.cm-player-debug-panel b {
  color: var(--yellow, #FFFF55);
  margin-left: 4px;
}

/* ── FM-style scout star row (Ability / Potential) ──
   A star row reuses the surrounding grid cells verbatim (player-info cells
   on the factfile, scoutreport cells on the Scout Report screen) — same
   padding, borders and height as every other row. Only the value cell
   differs: it centres the stars. The factfile rolls an out-of-season
   report's date through this cell. */
.cm-stars-cell,
.cm-scoutreport-cell--stars {
  display: flex;
  align-items: center;
}
/* Stars: five discrete glyphs (full / half / empty) so a half is always
   exactly 50% of one glyph regardless of font metrics. Uses a glyph-bearing
   fallback font (Press Start 2P has no ★). Scaled up via transform (which
   doesn't enlarge the layout box) so they fill the cell WITHOUT growing the
   standard row height. */
.cm-stars {
  display: inline-flex;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  transform: scale(1.4);
  transform-origin: left center;
}
/* Scout report grid has roomier cells than the factfile — give the stars
   a larger base font there (still scaled by the shared transform). */
.cm-scoutreport-cell--stars .cm-stars { font-size: 20px; }
.cm-star {
  display: inline-block;
}
.cm-star--full { color: #FFB020; }             /* gold — filled */
.cm-star--empty { color: #1B3A7A; }            /* dim blue — factfile cells */
.cm-scoutreport-cell--stars .cm-star--empty { color: #00461C; }  /* dim green */
/* Half: one glyph painted gold on the left, dim on the right, clipped to
   the star shape. The split sits at 41% (not 50%) of the glyph box because
   the ★ ink sits slightly left of centre and a centred cut reads as more
   than half — tune the two 41%s together if needed. */
.cm-star--half {
  color: transparent;
  background-image: linear-gradient(90deg, #FFB020 41%, #1B3A7A 41%);
  -webkit-background-clip: text;
  background-clip: text;
}
.cm-scoutreport-cell--stars .cm-star--half {
  background-image: linear-gradient(90deg, #FFB020 41%, #00461C 41%);
}

.cm-player-tabs {
  display: flex;
  gap: 0;
}

.cm-player-tab {
  padding: 6px 10px;
  font-weight: normal;
  letter-spacing: 1px;
  text-indent: 1px;
  text-align: center;
  line-height: 1;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cm-player-tab--green {
  background: #00AA33;
  color: var(--white, #fff);
  border-top: 2px solid #33DD66;
  border-left: 2px solid #33DD66;
  border-right: 2px solid #005500;
  border-bottom: 2px solid #005500;
  text-shadow: none !important;
}

.cm-player-tab--red {
  background: var(--red, #C03030);
  color: var(--white, #fff);
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  text-shadow: 0 -1px 0 #000;
}

/* ADD tab when the player is on the user's shortlist — yellow label so
   the manager can see at a glance "I'm tracking this one". Two-class
   selector so we beat .cm-player-tab--green's white color. */
.cm-player-tab.cm-player-tab--on {
  color: var(--yellow, #FFFF55);
}

/* STA/BUY locked during the pre-match Squad overlay — desaturated so
   the manager can see at a glance the tab won't open during match prep. */
.cm-player-tab.cm-player-tab--locked {
  filter: grayscale(0.7) brightness(0.7);
  cursor: not-allowed;
}

.cm-player-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cm-player-info-box {
  background: #112266;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cm-player-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

.cm-player-info-label,
.cm-player-info-value {
  background: #3366CC;
  color: var(--white, #fff);
  text-transform: uppercase;
  padding: 0 14px;
  border-top: 2px solid #6699EE;
  border-left: 2px solid #6699EE;
  border-right: 2px solid #112266;
  border-bottom: 2px solid #112266;
  line-height: 1.5;
  font-size: 11px;
  font-family: inherit;
  letter-spacing: 2px;
}

.cm-player-info-value {
  text-align: left;
  white-space: nowrap;
}

.cm-player-info-label {
  text-align: left;
}

.cm-player-avail {
  display: flex;
  flex-direction: column;
  background: #00AA33;
  border-top: 3px solid #33DD66;
  border-left: 3px solid #33DD66;
  border-right: 3px solid #005500;
  border-bottom: 3px solid #005500;
  font-family: inherit;
  font-weight: normal;
  font-size: 11px;
}

.cm-player-avail-title {
  background: var(--yellow, #FFFF55);
  color: #000;
  padding: 2px 0;
  letter-spacing: 2px;
  width: 100%;
  text-align: center;
}

.cm-player-avail-status {
  color: var(--white, #fff);
  padding: 2px 0;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: none !important;
}

.cm-player-seasons {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 4px;
  background: transparent;
  padding: 0;
}

.cm-player-season-block--this { grid-column: 1; grid-row: 1; }
.cm-player-season-block--last { grid-column: 2; grid-row: 1 / span 2; }
.cm-player-seasons .cm-player-morale { grid-column: 1; grid-row: 2; }

.cm-player-season-block {
  background: #00AA33;
  border-top: 3px solid #33DD66;
  border-left: 3px solid #33DD66;
  border-right: 3px solid #005500;
  border-bottom: 3px solid #005500;
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.cm-player-stat-header {
  background: #FFFFFF;
  color: #000;
  padding: 2px 8px;
  text-align: center;
  letter-spacing: 2px;
  font-family: inherit;
  font-weight: normal;
  font-size: 11px;
}

.cm-player-stat-cols {
  display: grid;
  gap: 2px;
  width: 100%;
  flex: 1;
}

.cm-player-stat-cols--two { grid-template-columns: 1fr 1fr; }
.cm-player-stat-cols--one { grid-template-columns: 1fr;     }

.cm-player-stat-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
}

.cm-player-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  width: 100%;
  background: transparent;
  color: #000;
  font-family: inherit;
  font-weight: normal;
  font-size: 11px;
  letter-spacing: 1px;
  flex: 1;
}

.cm-player-stat-row > span {
  background: var(--yellow, #FFFF55);
  padding: 1px 8px;
  border-top: 1px solid #FFFFAA;
  border-left: 1px solid #FFFFAA;
  border-right: 1px solid #886600;
  border-bottom: 1px solid #886600;
}

.cm-player-stat-row > span:first-child  { text-align: left; }
.cm-player-stat-row > span:last-child   { text-align: left; }

.cm-player-morale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #2A2A2A;
  padding: 2px;
  font-family: inherit;
  font-weight: normal;
  font-size: 11px;
  letter-spacing: 2px;
  margin-top: 3px;
}

.cm-player-morale > span {
  background: #909090;
  color: var(--white, #fff);
  padding: 1px 10px;
  border-top: 2px solid #B8B8B8;
  border-left: 2px solid #B8B8B8;
  border-right: 2px solid #606060;
  border-bottom: 2px solid #606060;
}

.cm-player-future {
  display: flex;
  flex-direction: column;
  background: #2222AA;
  border-top: 3px solid #5555DD;
  border-left: 3px solid #5555DD;
  border-right: 3px solid #000066;
  border-bottom: 3px solid #000066;
  font-family: inherit;
  font-weight: normal;
  font-size: 11px;
}

.cm-player-future-header {
  position: relative;
  width: 100%;
}

.cm-player-future-title {
  background: var(--white, #fff);
  color: #000;
  padding: 2px 0;
  letter-spacing: 2px;
  width: 100%;
  text-align: center;
}

.cm-player-future--targeted .cm-player-future-title {
  background: var(--yellow, #FFFF55);
  color: #000;
}

.cm-player-future-indicator {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red, #CC0000);
  font-weight: bold;
  line-height: 1;
  animation: cm-future-flash 1.2s steps(1, end) infinite;
}

@keyframes cm-future-flash {
  0%, 49.99%   { visibility: visible; }
  50%, 100%    { visibility: hidden; }
}

.cm-player-future-text {
  color: var(--yellow, #FFFF55);
  padding: 2px 0;
  letter-spacing: 1px;
  text-align: center;
}

.cm-player-future--targeted .cm-player-future-text {
  color: var(--white, #fff);
}

/* ── Club Info Screen ──────────────────────────── */

.cm-clubinfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(720px, 98vw);
  margin: 0 auto;
  padding: 4px;
  font-weight: normal;
  font-size: 11px;
}

.cm-clubinfo-header {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.cm-clubinfo-title {
  background: var(--yellow, #FFFF55);
  color: #000;
  padding: 6px 14px;
  letter-spacing: 1px;
  font-size: 15px;
  border-top: 3px solid #FFFFAA;
  border-left: 3px solid #FFFFAA;
  border-right: 3px solid #886600;
  border-bottom: 3px solid #886600;
  text-align: left;
  align-self: flex-start;
}

.cm-clubinfo-header {
  justify-content: space-between;
}

.cm-clubinfo-btns {
  display: flex;
  gap: 4px;
}

.cm-clubinfo-btn {
  background: var(--red, #C03030);
  color: var(--white, #fff);
  padding: 6px 10px;
  letter-spacing: 1px;
  font-size: 13px;
  min-width: 50px;
  text-align: center;
  border-top: 3px solid #EE6666;
  border-left: 3px solid #EE6666;
  border-right: 3px solid #550000;
  border-bottom: 3px solid #550000;
  text-shadow: 0 -1px 0 #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-clubinfo-row {
  display: grid;
  gap: 6px;
}

.cm-clubinfo-row--top {
  grid-template-columns: 1fr 1fr;
}

.cm-clubinfo-box {
  background: #112266;
  border-top: 3px solid #6699EE;
  border-left: 3px solid #6699EE;
  border-right: 3px solid #000033;
  border-bottom: 3px solid #000033;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px;
}

/* THIS SEASON box uses the green frame (matches player detail's stats block) */
.cm-clubinfo-box--season {
  background: #00AA33;
  border-top-color: #33DD66;
  border-left-color: #33DD66;
  border-right-color: #005500;
  border-bottom-color: #005500;
}

.cm-clubinfo-hdr {
  text-align: center;
  letter-spacing: 2px;
  padding: 2px 0;
}

/* Small section headers (GENERAL / CUP ROUNDS): WHITE bar, BLACK text */
.cm-clubinfo-hdr--yellow {
  background: var(--white, #fff);
  color: #000;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
}

/* Full-width section headers (LEAGUE RECORD / THIS SEASON): RED bar, WHITE text */
.cm-clubinfo-hdr--white {
  background: var(--red, #C03030);
  color: var(--white, #fff);
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  text-shadow: 0 -1px 0 #000;
}

/* GENERAL panel rows: label/value grid, blue background, yellow label, white value */
.cm-clubinfo-prow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

.cm-clubinfo-plabel,
.cm-clubinfo-pvalue {
  background: #3366CC;
  padding: 1px 10px;
  border-top: 2px solid #6699EE;
  border-left: 2px solid #6699EE;
  border-right: 2px solid #112266;
  border-bottom: 2px solid #112266;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.5;
}

.cm-clubinfo-plabel {
  color: var(--white, #fff);
  text-align: left;
}

.cm-clubinfo-pvalue {
  color: var(--white, #fff);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CUP ROUNDS: stacked rows — cup name in white, status (WON / WINNERS / ROUND) in yellow */
.cm-clubinfo-cup-line {
  background: #3366CC;
  border-top: 2px solid #6699EE;
  border-left: 2px solid #6699EE;
  border-right: 2px solid #112266;
  border-bottom: 2px solid #112266;
  padding: 1px 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
}

.cm-clubinfo-cup-line--name {
  color: var(--white, #fff);
}

.cm-clubinfo-cup-line--status {
  color: var(--yellow, #FFFF55);
}

/* LEAGUE RECORD: 9-column grid (DIV POS PLD WON DRN LST FOR AGG PTS) */
.cm-clubinfo-lg {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cm-clubinfo-lg-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
}

.cm-clubinfo-lg-cell {
  padding: 1px 2px;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.6;
  border-top: 2px solid var(--row-light, #6699EE);
  border-left: 2px solid var(--row-light, #6699EE);
  border-right: 2px solid var(--row-dark, #112266);
  border-bottom: 2px solid var(--row-dark, #112266);
}

.cm-clubinfo-lg-row--head .cm-clubinfo-lg-cell {
  background: var(--yellow, #FFFF55);
  color: #000;
  border-top-color: #FFFFAA;
  border-left-color: #FFFFAA;
  border-right-color: #886600;
  border-bottom-color: #886600;
}

.cm-clubinfo-lg-row--head .cm-clubinfo-lg-cell--white {
  background: var(--white, #fff);
  border-top-color: #fff;
  border-left-color: #fff;
  border-right-color: #777;
  border-bottom-color: #777;
}

.cm-clubinfo-lg-row--data .cm-clubinfo-lg-cell {
  background: #3366CC;
  color: var(--white, #fff);
}

/* THIS SEASON rows: label + value, BLACK text on YELLOW chiseled cells */
.cm-clubinfo-srow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

.cm-clubinfo-slabel,
.cm-clubinfo-svalue {
  background: var(--yellow, #FFFF55);
  color: #000;
  padding: 1px 10px;
  border-top: 2px solid #FFFFAA;
  border-left: 2px solid #FFFFAA;
  border-right: 2px solid #886600;
  border-bottom: 2px solid #886600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: left;
}

.cm-clubinfo-svalue {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-clubinfo-done {
  background: #2244AA;
  color: var(--white, #fff);
  text-align: center;
  letter-spacing: 4px;
  padding: 6px 0;
  font-size: 14px;
  border-top: 3px solid #6699EE;
  border-left: 3px solid #6699EE;
  border-right: 3px solid #000033;
  border-bottom: 3px solid #000033;
  cursor: pointer;
}

/* ── Manual (HELP) ─────────────────────────────── */

.cm-help-index {
  margin-bottom: 6px;
}

.cm-help-page {
  display: flex;
  flex-direction: column;
}

.cm-help-chapter-title {
  background: #2244AA;
  color: var(--white, #fff);
  text-align: center;
  letter-spacing: 2px;
  padding: 6px 12px;
  font-size: 14px;
  border-top: 3px solid #6699EE;
  border-left: 3px solid #6699EE;
  border-right: 3px solid #000033;
  border-bottom: 3px solid #000033;
  margin-bottom: 6px;
}

.cm-help-body {
  max-height: 58vh;
  overflow-y: auto;
  padding: 4px 10px;
  color: var(--fg, #AAAAAA);
  font-size: 13px;
  line-height: 1.5;
}

.cm-help-p {
  margin: 0 0 10px 0;
}

.cm-help-h {
  color: var(--yellow, #FFFF55);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  margin: 12px 0 6px 0;
}

.cm-help-ul {
  margin: 0 0 10px 0;
  padding-left: 18px;
  list-style: none;
}

.cm-help-ul li {
  position: relative;
  margin-bottom: 5px;
}

.cm-help-ul li::before {
  content: '\00BB';
  color: var(--cyan, #55FFFF);
  position: absolute;
  left: -16px;
}

.cm-help-note {
  color: var(--cyan, #55FFFF);
  border-left: 3px solid #2244AA;
  padding: 4px 0 4px 10px;
  margin: 0 0 12px 0;
  font-size: 12px;
}

/* ── Club History Screen ──────────────────────── */

.cm-clubhist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(720px, 98vw);
  margin: 0 auto;
  padding: 4px;
  font-weight: normal;
  font-size: 11px;
}

.cm-clubhist-title {
  background: #00AA33;
  color: var(--white, #fff);
  padding: 6px 14px;
  letter-spacing: 1px;
  font-size: 15px;
  border-top: 3px solid #33DD66;
  border-left: 3px solid #33DD66;
  border-right: 3px solid #005500;
  border-bottom: 3px solid #005500;
  text-align: left;
  align-self: flex-start;
}

.cm-clubhist-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cm-clubhist-section-hdr {
  background: var(--white, #fff);
  color: #000;
  text-align: left;
  padding: 2px 8px;
  letter-spacing: 2px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
}

.cm-clubhist-lg,
.cm-clubhist-other {
  display: grid;
  gap: 1px;
  background: #112266;
}

/* YEAR cell width matches the LEAGUE table's YEAR column (1.0fr out of
   the league's 8.9fr total). The two ACHIEVEMENT columns split the rest. */
.cm-clubhist-other {
  grid-template-columns: 1.0fr 3.45fr 1.0fr 3.45fr;
}

/* Records screen grid (re-uses .cm-clubhist-cell tones). Column templates
   live here (not inline) so the mobile media query can override them. */
.cm-clubhist-recs {
  display: grid;
  grid-template-columns: 3.4fr 2.8fr 0.9fr;
  gap: 1px;
  background: #112266;
}

.cm-clubhist-recs--transfer { grid-template-columns: 1fr 1fr; }

/* Records-screen section headers: centered, light gray bg, white text. */
.cm-clubhist-section-hdr--recs {
  background: linear-gradient(to bottom, #C4C4C4 0%, #A0A0A0 100%);
  color: var(--white, #fff);
  text-align: center;
  text-shadow: 0 -1px 0 #000;
  border-top-color: #DDDDDD;
  border-left-color: #DDDDDD;
  border-right-color: #404040;
  border-bottom-color: #404040;
}

/* Dark-blue variant for RECORD / YEAR / RECORD FEE PAID / RECOUPED
   sub-headers in the records screen. Two-class selector to win the
   cascade against .cm-clubhist-cell--head (which is defined later). */
.cm-clubhist-cell.cm-clubhist-cell--head-dark {
  background: #112266;
  color: var(--white, #fff);
  border-top-color: #3344AA;
  border-left-color: #3344AA;
  border-right-color: #000022;
  border-bottom-color: #000022;
}

/* Achievement label column (BEST LEAGUE PLACING, BIGGEST VICTORY, etc.) */
.cm-clubhist-cell--ach {
  text-align: left;
  padding-left: 10px;
}

/* Transfer-record cell wraps to two lines (player name + buying club) */
.cm-clubhist-cell--multiline {
  white-space: normal;
  text-align: left;
  padding: 2px 8px;
}

/* Transfer-record cells (4 cells: 2 columns × 2 rows of data). Both
   rows use the darker gray gradient (.cm-clubhist-cell--gray-dk) for
   contrast with the RECS section's light-gray section header.
   Two-class selector wins the cascade against .cm-clubhist-cell--gray-dk's
   white color rule (defined later in this file). */
.cm-clubhist-cell.cm-clubhist-cell--tx {
  text-align: left;
  padding: 2px 10px;
  letter-spacing: 1px;
  color: var(--yellow, #FFFF55);
}

.cm-clubhist-cell {
  padding: 1px 4px;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.6;
  min-height: 22px;
  border-top: 2px solid var(--cell-light, rgba(255,255,255,0.35));
  border-left: 2px solid var(--cell-light, rgba(255,255,255,0.35));
  border-right: 2px solid var(--cell-dark, rgba(0,0,0,0.35));
  border-bottom: 2px solid var(--cell-dark, rgba(0,0,0,0.35));
  color: var(--white, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column tones — match the colored columns in the DOS layout */
.cm-clubhist-cell--year {
  background: #3366CC;
  border-top-color: #6699EE;
  border-left-color: #6699EE;
  border-right-color: #112266;
  border-bottom-color: #112266;
}

.cm-clubhist-cell--div {
  background: #00AA33;
  color: var(--yellow, #FFFF55);
  border-top-color: #33DD66;
  border-left-color: #33DD66;
  border-right-color: #005500;
  border-bottom-color: #005500;
}

.cm-clubhist-cell--gray {
  background: #999999;
  border-top-color: #CCCCCC;
  border-left-color: #CCCCCC;
  border-right-color: #555555;
  border-bottom-color: #555555;
}

/* Match the FA Premier award-row grey gradients (.cm-award--premier
   .cm-award-name + --alt) so the zebra reads like the league table. */
.cm-clubhist-cell--gray-lt {
  background: linear-gradient(to bottom, #C4C4C4 0%, #A0A0A0 100%);
  color: var(--white, #fff);
  border-top-color: #DDDDDD;
  border-left-color: #DDDDDD;
  border-right-color: #404040;
  border-bottom-color: #404040;
}

.cm-clubhist-cell--gray-dk {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white, #fff);
  border-top-color: #BBBBBB;
  border-left-color: #BBBBBB;
  border-right-color: #404040;
  border-bottom-color: #404040;
}

/* Transfer-record cells (–tx) on top of –gray-dk: yellow text override.
   Multi-class selector to beat .cm-clubhist-cell--gray-dk's white. */
.cm-clubhist-cell--gray-dk.cm-clubhist-cell--tx {
  color: var(--yellow, #FFFF55);
}

.cm-clubhist-cell--cup {
  background: #DD6600;
  border-top-color: #FF9933;
  border-left-color: #FF9933;
  border-right-color: #663300;
  border-bottom-color: #663300;
}

.cm-clubhist-cell--cup-red {
  background: var(--red, #C03030);
  color: var(--yellow, #FFFF55);
  border-top-color: #EE6666;
  border-left-color: #EE6666;
  border-right-color: #550000;
  border-bottom-color: #550000;
}

.cm-clubhist-cell--white {
  background: #DDDDDD;
  color: #000;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #777777;
  border-bottom-color: #777777;
}

/* Header row across the whole table uses one unified blue, regardless
   of the column tone below (which only applies to data rows). */
.cm-clubhist-cell--head {
  font-weight: normal;
  background: #0284C7;
  color: var(--white, #fff);
  border-top-color: #38BDF8;
  border-left-color: #38BDF8;
  border-right-color: #0C4A6E;
  border-bottom-color: #0C4A6E;
}

/* ── Manager History Screen ─────────────────────────
   Reuses the palette pinned across cm-clubhist / cm-clubinfo so this
   screen reads as part of the same family:
     • CYAN  #0284C7 — section column headers + Bght/Sold tabs
       (same as .cm-clubhist-cell--head)
     • GRAY  light gradient — league-record data cells
       (same as .cm-clubhist-cell--gray-lt)
     • BLUE  #3366CC — cup-record rows
       (same as .cm-clubhist-cell--year / .cm-clubinfo-plabel)
     • GREEN #00AA33 — general-stats rows
       (same as .cm-clubhist-cell--div)
     • YELLOW #FFFF55 / WHITE bars — section headers
     • RED / BLUE buttons reuse .cm-ltable-btn--dir / --exit. */
.cm-mgrhist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(720px, 98vw);
  margin: 0 auto;
  padding: 4px;
  font-weight: normal;
  font-size: 11px;
}

.cm-mgrhist-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
}

.cm-mgrhist-title {
  flex: 1 1 auto;
  background: var(--white, #fff);
  color: #000;
  padding: 6px 14px;
  letter-spacing: 1px;
  font-size: 14px;
  text-align: left;
  border-top: 3px solid #FFFFFF;
  border-left: 3px solid #FFFFFF;
  border-right: 3px solid #777777;
  border-bottom: 3px solid #777777;
}

.cm-mgrhist-tabs {
  display: flex;
  gap: 4px;
}

.cm-mgrhist-tab {
  background: #0284C7;
  color: var(--white, #fff);
  padding: 6px 10px;
  min-width: 56px;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: center;
  border-top: 3px solid #38BDF8;
  border-left: 3px solid #38BDF8;
  border-right: 3px solid #0C4A6E;
  border-bottom: 3px solid #0C4A6E;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.cm-mgrhist-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Visually separate the three stacked sections (LEAGUE / CUP / GENERAL
   STATS) so each reads as a distinct panel — matches the spacing in
   the DOS screenshot. */
.cm-mgrhist-section + .cm-mgrhist-section {
  margin-top: 8px;
}

.cm-mgrhist-sect-hdr {
  background: var(--white, #fff);
  color: #000;
  padding: 3px 8px;
  letter-spacing: 2px;
  font-size: 12px;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #777777;
  border-bottom: 2px solid #777777;
}

/* GENERAL STATS gets the yellow section header (matches the DOS screenshot). */
.cm-mgrhist-sect-hdr--yellow {
  background: var(--yellow, #FFFF55);
  border-top-color: #FFFFAA;
  border-left-color: #FFFFAA;
  border-right-color: #886600;
  border-bottom-color: #886600;
}

/* LEAGUE RECORD — 9-column grid (DIV POS PLD WON DRN LST FOR AGG PTS). */
.cm-mgrhist-lg {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cm-mgrhist-lg-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
}

.cm-mgrhist-lg-cell {
  padding: 2px 0;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.5;
  border-top: 2px solid;
  border-left: 2px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

/* Column-header cell: cyan, white text. Matches cm-clubhist-cell--head. */
.cm-mgrhist-lg-cell--head {
  background: #0284C7;
  color: var(--white, #fff);
  border-top-color: #38BDF8;
  border-left-color: #38BDF8;
  border-right-color: #0C4A6E;
  border-bottom-color: #0C4A6E;
}

/* Data cell: light gray gradient, white text. Matches cm-clubhist-cell--gray-lt. */
.cm-mgrhist-lg-cell--data {
  background: linear-gradient(to bottom, #C4C4C4 0%, #A0A0A0 100%);
  color: var(--white, #fff);
  border-top-color: #DDDDDD;
  border-left-color: #DDDDDD;
  border-right-color: #404040;
  border-bottom-color: #404040;
}

/* CUP RECORD — two-column rows: label + value, blue background. */
.cm-mgrhist-cup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

.cm-mgrhist-cup-label,
.cm-mgrhist-cup-value {
  background: #3366CC;
  color: var(--white, #fff);
  padding: 2px 10px;
  letter-spacing: 2px;
  line-height: 1.5;
  border-top: 2px solid #6699EE;
  border-left: 2px solid #6699EE;
  border-right: 2px solid #112266;
  border-bottom: 2px solid #112266;
}

.cm-mgrhist-cup-label { text-align: left; }
.cm-mgrhist-cup-value { text-align: left; }

/* GENERAL STATS — green band rows, white text label + value. */
.cm-mgrhist-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

.cm-mgrhist-stat-label,
.cm-mgrhist-stat-value {
  background: #00AA33;
  color: var(--white, #fff);
  padding: 2px 10px;
  letter-spacing: 2px;
  line-height: 1.5;
  border-top: 2px solid #33DD66;
  border-left: 2px solid #33DD66;
  border-right: 2px solid #005500;
  border-bottom: 2px solid #005500;
}

.cm-mgrhist-stat-label { text-align: left; }
.cm-mgrhist-stat-value { text-align: left; }

/* Yellow tab variant — shown on the Bght / Sold sub-views (the Stats
   view uses the cyan default). Inert tabs (Misc until its data layer
   ships) lose pointer + hover hint. */
.cm-mgrhist-tab--yellow {
  background: var(--yellow, #FFFF55);
  color: #000;
  border-top-color: #FFFFAA;
  border-left-color: #FFFFAA;
  border-right-color: #886600;
  border-bottom-color: #886600;
}

.cm-mgrhist-tab--inert {
  opacity: 0.85;
  cursor: default;
}

/* Bght / Sold sub-view: gray section header bar with white text — same
   role as the section header on the Stats view, repalettable so the
   transfer panels read as their own visual block. */
.cm-mgrhist-sect-hdr--gray {
  background: linear-gradient(to bottom, #A0A0A0 0%, #6E6E6E 100%);
  color: var(--white, #fff);
  border-top-color: #BBBBBB;
  border-left-color: #BBBBBB;
  border-right-color: #404040;
  border-bottom-color: #404040;
}

/* Bght / Sold player list — two columns, each entry stacks
   YELLOW name + RED origin/fee line. Background gray matches the
   league-record data row palette so the page reads as one family. */
.cm-mgrhist-players-sect {
  background: linear-gradient(to bottom, #C4C4C4 0%, #A0A0A0 100%);
  padding: 4px 6px 8px;
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}

.cm-mgrhist-players-sect .cm-mgrhist-sect-hdr--gray {
  margin: -4px -6px 6px;
}

.cm-mgrhist-players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 4px;
}

.cm-mgrhist-player {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.cm-mgrhist-player-name {
  color: var(--yellow, #FFFF55);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cm-mgrhist-player-origin {
  color: var(--red, #C03030);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cm-mgrhist-empty {
  padding: 8px;
  text-align: center;
  color: #444;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Player History Screen ─────────────────────── */

.cm-player-history {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: min(720px, 98vw);
  margin: 0 auto;
  padding: 4px;
  font-weight: normal;
}

.cm-ph-title {
  align-self: flex-start;
  background: var(--red, #C03030);
  color: var(--white, #fff);
  padding: 6px 14px;
  letter-spacing: 2px;
  font-size: 15px;
  text-align: left;
  border-top: 3px solid #EE6666;
  border-left: 3px solid #EE6666;
  border-right: 3px solid #550000;
  border-bottom: 3px solid #550000;
  text-shadow: 0 -1px 0 #000;
}

.cm-ph-banner {
  background: var(--yellow, #FFFF55);
  color: #000;
  padding: 2px 8px;
  letter-spacing: 2px;
  text-align: left;
  font-size: 11px;
}

.cm-ph-body {
  display: grid;
  /* minmax(0,·): a grid track's default min is min-content, so one long
     nowrap club name would blow the track (and the page) wide open. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 3px;
}

.cm-ph-table {
  display: flex;
  background: #000;
  gap: 1px;
  font-size: 11px;
  letter-spacing: 1px;
  min-height: 260px;
}

.cm-ph-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 1px;
  background: #000;
}

/* flex-basis 0 (not auto): with nowrap cells, basis:auto sizes the
   column to its longest name and shoves AP/GL/AV R off the table —
   basis 0 caps it at the leftover space so the ellipsis clips instead. */
.cm-ph-col--club { flex: 1 1 0; min-width: 0; }
.cm-ph-col--year { width: 56px; }
.cm-ph-col--ap   { width: 44px; }
.cm-ph-col--gl   { width: 44px; }
.cm-ph-col--avr  { width: 64px; }

.cm-ph-col-head {
  background: #AAAAAA;
  color: var(--white, #fff);
  text-align: center;
  padding: 2px 0;
  letter-spacing: 2px;
}

.cm-ph-cell {
  padding: 2px 6px;
  text-align: center;
  min-height: 16px;
  color: var(--white, #fff);
  text-shadow: none !important;
}

.cm-ph-col--year .cm-ph-cell { background: #00AA33; color: var(--yellow, #FFFF55); }
.cm-ph-col--ap   .cm-ph-cell { background: #C03030; }
.cm-ph-col--gl   .cm-ph-cell { background: #C03030; }
.cm-ph-col--avr  .cm-ph-cell { background: #E08020; }

.cm-ph-col--club .cm-ph-cell {
  background: #112266;
  color: var(--white, #fff);
  text-align: left;
  /* Each column is an independent vertical strip — a club name folding
     to two lines grows only its own column and desyncs every row after
     it from YEAR/AP/GL/AV R. Never wrap; clip with an ellipsis. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-ph-col--club .cm-ph-cell--odd         { background: #4466CC; }

.cm-ph-filler { flex: 1 1 auto; min-height: 0; }
.cm-ph-col--year .cm-ph-filler { background: #00AA33; }
.cm-ph-col--ap   .cm-ph-filler { background: #C03030; }
.cm-ph-col--gl   .cm-ph-filler { background: #C03030; }
.cm-ph-col--avr  .cm-ph-filler { background: #E08020; }
.cm-ph-col--club .cm-ph-filler              { background: #112266; }
.cm-ph-col--club .cm-ph-filler--odd         { background: #4466CC; }

.cm-ph-totals {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
}

.cm-ph-total {
  display: flex;
  flex-direction: column;
  background: #AAAAAA;
  border-top: 2px solid #CCCCCC;
  border-left: 2px solid #CCCCCC;
  border-right: 2px solid #666666;
  border-bottom: 2px solid #666666;
  font-size: 11px;
  letter-spacing: 2px;
}

.cm-ph-total-label {
  color: var(--white, #fff);
  text-align: center;
  padding: 2px 0;
  line-height: 1.2;
}

.cm-ph-total-value {
  background: #fff;
  color: #000;
  text-align: center;
  padding: 4px 0;
  font-size: 20px;
  letter-spacing: 3px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: none !important;
}

.cm-ph-actions {
  display: grid;
  gap: 2px;
}

.cm-ph-actions--split {
  grid-template-columns: 1fr 2fr;
}

.cm-ph-exit {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  text-shadow: 0 -1px 0 #000;
  padding: 10px 0;
  text-align: center;
  font-size: 18px;
  letter-spacing: 3px;
  border-top: 3px solid #8888FF;
  border-left: 3px solid #8888FF;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
  cursor: pointer;
}

.cm-ph-more {
  background: linear-gradient(to bottom, #6688EE 0%, #4466CC 100%);
  border-top: 3px solid #99BBFF;
  border-left: 3px solid #99BBFF;
  border-right: 3px solid #224488;
  border-bottom: 3px solid #224488;
}

/* ── Fixtures Screen ────────────────────────────── */

.cm-fixtures {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  width: min(960px, 98vw);
  margin: 0 auto;
  font-weight: bold;
}

.cm-fixtures-title {
  align-self: center;
  background: var(--red, #C03030);
  color: var(--white, #fff);
  padding: 4px 18px;
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  letter-spacing: 2px;
  font-size: 16px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
}

.cm-fixtures-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.cm-fixtures-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cm-fixtures-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2px;
  align-items: stretch;
}

.cm-fixtures-comp {
  background: var(--red, #C03030);
  color: var(--yellow, #FFFF55);
  padding: 1px 6px;
  letter-spacing: 1px;
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  font-size: 12px;
}

/* Cup ticker variant: inverted colours from league (yellow bg + red font),
   matching the original DOS CM93 fixture list. */
.cm-fixtures-comp--cup {
  background: var(--yellow, #FFFF55);
  color: var(--red, #C03030);
  border-top-color: #FFFFAA;
  border-left-color: #FFFFAA;
  border-right-color: #777722;
  border-bottom-color: #777722;
}

/* European-cup ticker variant: white bg + black font, distinct from the
   yellow/red domestic cup look. EC / CW / UE share the same chrome. */
.cm-fixtures-comp--euro {
  background: #FFFFFF;
  color: #000000;
  border-top-color:    #FFFFFF;
  border-left-color:   #FFFFFF;
  border-right-color:  #888888;
  border-bottom-color: #888888;
}

/* Anglo-Italian Cup ticker variant: light-blue bg + black font. */
.cm-fixtures-comp--anglo {
  background: #5BAFD6;
  color: #000000;
  border-top-color:    #9ED1E8;
  border-left-color:   #9ED1E8;
  border-right-color:  #2A6D8A;
  border-bottom-color: #2A6D8A;
}

.cm-fixtures-name {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  padding: 1px 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-fixtures-name--alt {
  background: linear-gradient(to bottom, #6677FF 0%, #4455DD 100%);
  border-top-color: #99AAFF;
  border-left-color: #99AAFF;
}

.cm-fixtures-name--next {
  background: linear-gradient(to bottom, #66EE88 0%, #00AA55 100%);
  color: var(--white, #fff);
  border-top-color: #AAFFAA;
  border-left-color: #AAFFAA;
  border-right-color: #005500;
  border-bottom-color: #005500;
}

.cm-fixtures-venue {
  background: var(--yellow, #FFFF55);
  color: #00AA55;
  padding: 1px 6px;
  letter-spacing: 1px;
  border-top: 2px solid #FFFFAA;
  border-left: 2px solid #FFFFAA;
  border-right: 2px solid #886600;
  border-bottom: 2px solid #886600;
  font-size: 12px;
  min-width: 16px;
  text-align: center;
}

.cm-squad-tab--active {
  background: linear-gradient(to bottom, #FFFFAA 0%, #DDAA22 100%);
  color: #000;
  text-shadow: none;
}

/* ── Tactics Screen ─────────────────────────────── */

.cm-tct {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 6px;
  padding: 6px;
  width: min(960px, 98vw);
  margin: 0 auto;
  font-weight: bold;
}

.cm-tct-pitch {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #008833;
  padding: 4px;
  border-top: 3px solid #22AA55;
  border-left: 3px solid #22AA55;
  border-right: 3px solid #004411;
  border-bottom: 3px solid #004411;
}

.cm-tct-style {
  background: #FFFFFF;
  color: #000;
  padding: 3px 10px;
  letter-spacing: 2px;
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  border: none;
  margin-bottom: 4px;
}

.cm-tct-field {
  position: relative;
  flex: 1;
  min-height: 420px;
  background: #008833;
  border: none;
}

.cm-tct-fshirt {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 42px;
  cursor: grab;
  z-index: 2;
  /* Drag handle for the touch-drag shim — claim the touch gesture so a
     drag on the pitch doesn't scroll/zoom the page. */
  touch-action: none;
}

/* The shirt's visible body is an inner <svg> + number <span>. A touch landing
   on the SVG would make the SVG (touch-action:auto) the hit-target, defeating
   the handle's touch-action:none and letting the pitch scroll instead — the
   shirt then can't be dragged at all. Disabling pointer-events on the children
   makes the .cm-tct-fshirt div the hit-target for both touch and mouse drag. */
.cm-tct-fshirt > * {
  pointer-events: none;
}

.cm-tct-fshirt:active {
  cursor: grabbing;
}

.cm-tct-fshirt--over {
  outline: 2px dashed #FFFF55;
  outline-offset: 1px;
}

.cm-tct-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  height: 40px;
  box-sizing: border-box;
  border: 2px dashed transparent;
  color: transparent;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
  line-height: 40px;
  pointer-events: none;
  z-index: 1;
}

.cm-tct-field--dragging .cm-tct-zone {
  pointer-events: auto;
  border-color: rgba(255, 255, 85, 0.6);
  color: rgba(255, 255, 85, 0.75);
  background: rgba(0, 0, 0, 0.18);
}

.cm-tct-zone--over {
  border-color: #FFFF55 !important;
  background: rgba(255, 255, 85, 0.35) !important;
  color: #FFFF55 !important;
}

.cm-tct-field-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cm-tct-fshirt-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.cm-tct-fshirt-body {
  fill: var(--red, #C03030);
  stroke: #2A0000;
  stroke-width: 1;
  stroke-linejoin: miter;
}

.cm-tct-fshirt-trim {
  fill: #FFFFFF;
  stroke: none;
}

.cm-tct-fshirt--gk .cm-tct-fshirt-body {
  fill: var(--yellow, #FFFF55);
  stroke: #664400;
}

.cm-tct-fshirt-num {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #2A0000;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  letter-spacing: 0;
  line-height: 1;
}

.cm-tct-fshirt--gk .cm-tct-fshirt-num {
  color: #000;
}

.cm-tct-roster {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cm-tct-title {
  background: var(--red, #C03030);
  color: var(--white, #fff);
  padding: 4px 12px;
  text-align: center;
  letter-spacing: 2px;
  font-size: 15px;
  text-transform: uppercase;
  border-top: 3px solid #EE6666;
  border-left: 3px solid #EE6666;
  border-right: 3px solid #550000;
  border-bottom: 3px solid #550000;
  text-shadow: 0 -1px 0 #000;
}

/* Mobile-only club name banner; shown above the pitch on phones (see the
   stacked layout in the max-width media query). Desktop uses the in-roster
   title instead. */
.cm-tct-title--mobile { display: none; }

.cm-tct-toprow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.cm-tct-topbtn {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  text-align: center;
  padding: 4px 0;
  font-size: 11px;
  letter-spacing: 1px;
  text-shadow: 0 -1px 0 #000;
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
}

.cm-tct-topbtn--active {
  background: #FFFFFF;
  color: #000;
  text-shadow: none;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #888888;
  border-bottom-color: #888888;
}

/* Shown but inert (e.g. WIN BONUS during a live match — can't be set mid-game). */
.cm-tct-topbtn--disabled {
  filter: grayscale(0.7) brightness(0.7);
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.cm-tct-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.cm-tct-list-row {
  display: grid;
  grid-template-columns: 40px 1fr 96px;
  gap: 1px;
  position: relative;
}

.cm-tct-cpt {
  display: none;
  position: absolute;
  right: 99px;
  top: 50%;
  transform: translateY(-50%);
  background: red;
  color: black;
  padding: 5px 4px;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
  z-index: 2;
  cursor: grab;
  /* Drag handle for the touch-drag shim. */
  touch-action: none;
}

.cm-tct-cpt:active { cursor: grabbing; }

.cm-tct-cpt--on { display: block; }

.cm-tct-list-row--cpt-over .cm-tct-name {
  outline: 2px dashed #FFFF55;
  outline-offset: -2px;
}

.cm-tct-shirt {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  text-align: center;
  padding: 2px 0;
  font-size: 11px;
  letter-spacing: 1px;
  text-shadow: 0 -1px 0 #000;
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
}

.cm-tct-shirt--selected {
  background: #FFFFFF;
  color: #3333CC;
  text-shadow: none;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #888888;
  border-bottom-color: #888888;
}

.cm-tct-name {
  background: #A0A0A0;
  color: #fff;
  padding: 2px 20px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-top: 2px solid #C8C8C8;
  border-left: 2px solid #C8C8C8;
  border-right: 2px solid #505050;
  border-bottom: 2px solid #505050;
  min-height: 14px;
  position: relative;
}

/* Clickable name (opens the player detail screen). */
.cm-tct-name--link { cursor: pointer; }
.cm-tct-name--link:hover { filter: brightness(1.12); }

/* Status tags pinned to the right edge of the name box (BKD / INJ / SNT). */
.cm-tct-name-status {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  letter-spacing: 1px;
  text-decoration: none;
  pointer-events: none;
}
.cm-tct-name-status--red { color: #FF2A2A; }
.cm-tct-name-status--yel { color: #FFE000; }

/* Reserve player surfaced in the senior tactics roster — tinted yellow
   to mark him as a youth-pool callup rather than a regular signing. */
.cm-tct-name--reserve {
  color: var(--yellow, #FFFF55);
}

/* Player subbed (or sent) off during a live match — kept in his slot row for
   reference, dimmed and struck through with a red line. */
.cm-tct-name--off {
  color: #b0b0b0;
  text-decoration: line-through;
  text-decoration-color: #E02020;
  text-decoration-thickness: 2px;
}

.cm-tct-act {
  text-align: center;
  padding: 2px 4px;
  font-size: 11px;
  letter-spacing: 1px;
}

.cm-tct-act--purple,
.cm-tct-act--cyan {
  background: #7744AA;
  color: #22CCCC;
  border-top: 2px solid #AA77DD;
  border-left: 2px solid #AA77DD;
  border-right: 2px solid #331166;
  border-bottom: 2px solid #331166;
  text-shadow: none;
}

.cm-tct-act--orange {
  background: #DD7711;
  color: #fff;
  border-top: 2px solid #FFAA44;
  border-left: 2px solid #FFAA44;
  border-right: 2px solid #663300;
  border-bottom: 2px solid #663300;
}

.cm-tct-act--white {
  background: #FFFFFF;
  color: #000;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
}

.cm-tct-act--active {
  background: #22CCCC;
  color: #7744AA;
  border-top-color: #66EEEE;
  border-left-color: #66EEEE;
  border-right-color: #006666;
  border-bottom-color: #006666;
}

.cm-tct-act--orange.cm-tct-act--active {
  background: #FFFFFF;
  color: #DD7711;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #888888;
  border-bottom-color: #888888;
}

.cm-tct-sarr, .cm-tct-varr {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

.cm-tct-sarr {
  width: 32px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.cm-tct-sarr--l { left: -26px; }
.cm-tct-sarr--r { right: -26px; }

.cm-tct-varr {
  width: 14px;
  height: 34px;
  left: 50%;
  transform: translateX(-50%);
}
.cm-tct-varr--up { top: -30px; }
.cm-tct-varr--dn { bottom: -30px; }

.cm-tct-sarr polygon, .cm-tct-varr polygon {
  fill: #FFDD44;
  stroke: #886600;
  stroke-width: 0.5;
}

.cm-winb,
.cm-newst,
.cm-newfm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  min-width: 460px;
}

/* Mobile: the 460px min-width forces horizontal scroll on a phone. Gate via a
   JS-added class (the app's CSS zoom makes @media width queries no-op on real
   devices) and let the picker shrink to the viewport. */
.cm-winb--mobile,
.cm-newst--mobile,
.cm-newfm--mobile {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.cm-winb--mobile .cm-menu,
.cm-newst--mobile .cm-menu,
.cm-newfm--mobile .cm-menu {
  padding: 4px;
  gap: 6px;
}

/* Narrow columns can't hold labels like "Counter-Attack" at the desktop 14px,
   so they wrap to two lines. Shrink the font and tighten padding so each label
   sits on a single line; keep the tap target tall via min-height. */
.cm-winb--mobile .cm-menu--bar .cm-menu-item,
.cm-newst--mobile .cm-menu--bar .cm-menu-item,
.cm-newfm--mobile .cm-menu--bar .cm-menu-item {
  min-height: 40px;
  font-size: 11px;
  padding: 6px 4px;
  white-space: nowrap;
  justify-content: center;
  letter-spacing: -0.2px;
}

.cm-winb-team {
  align-self: flex-start;
  background: var(--red, #C03030);
  color: var(--white, #fff);
  padding: 3px 14px;
  letter-spacing: 2px;
  font-size: 14px;
  text-transform: uppercase;
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  text-shadow: 0 -1px 0 #000;
}

.cm-winb-info {
  color: #22CCCC;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: capitalize;
  font-size: 13px;
  line-height: 1.6;
}

.cm-tct-done-wrap {
  width: min(960px, 98vw);
  margin: 3px auto 0;
  padding: 0 6px;
}

.cm-tct-done {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  padding: 10px 0;
  text-align: center;
  font-size: 18px;
  letter-spacing: 3px;
  text-shadow: 0 -1px 0 #000;
  border-top: 3px solid #8888FF;
  border-left: 3px solid #8888FF;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
  cursor: pointer;
}

/* ── Penalty Takers Screen ──────────────────────── */

.cm-penalty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  width: min(960px, 98vw);
  margin: 0 auto;
  font-weight: bold;
}

/* Title and team chip are direct flex-column children of .cm-penalty.
   Title centers (row 1); team chip left-aligns on its own row below. */
.cm-penalty-team,
.cm-penalty-title {
  padding: 4px 20px;
  font-size: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  border-width: 2px;
  border-style: solid;
  line-height: 1.2;
  color: var(--white, #fff);
}

.cm-penalty-title {
  align-self: center;
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  letter-spacing: 3px;
  text-shadow: 0 -1px 0 #000;
  border-top-color: #8888FF;
  border-left-color: #8888FF;
  border-right-color: #111166;
  border-bottom-color: #111166;
}

.cm-penalty-team {
  align-self: flex-start;
  background: var(--red, #CC0000);
  letter-spacing: 2px;
  border-top-color: #FFDD33;
  border-left-color: #FFDD33;
  border-right-color: #660000;
  border-bottom-color: #660000;
}

.cm-penalty-body {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 4px;
  /* Stretch columns so the options column matches the player-list height
     and its buttons can distribute the vertical space evenly via flex. */
  align-items: stretch;
}

.cm-penalty-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cm-penalty-head {
  display: grid;
  grid-template-columns: 1fr 68px;
  gap: 1px;
  background: #55FFFF;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 3px 0;
  font-weight: bold;
  white-space: nowrap;
  margin-bottom: 4px;
}

.cm-penalty-head > div {
  padding: 0 10px;
  white-space: nowrap;
}

.cm-penalty-head-stat { text-align: center; padding: 0; }

.cm-penalty-row {
  display: grid;
  grid-template-columns: 1fr 68px;
  gap: 1px;
  cursor: pointer;
}

.cm-penalty-name {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white, #fff);
  padding: 1px 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 12px;
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.cm-penalty-name--selected {
  /* Inverted: gray text on white background (opposite of the unselected
     row which is white text on gray). */
  background: var(--white, #fff);
  color: #6E6E6E;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #888888;
  border-bottom-color: #888888;
}

.cm-penalty-stat {
  background: #00AA00;
  color: var(--white, #fff);
  text-align: center;
  padding: 1px 0;
  border-top: 2px solid #33DD33;
  border-left: 2px solid #33DD33;
  border-right: 2px solid #003300;
  border-bottom: 2px solid #003300;
  letter-spacing: 1px;
  font-weight: bold;
}

.cm-penalty-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.cm-penalty-opt-head {
  display: block;
  text-align: center;
  grid-template-columns: none;
  padding: 2px 10px;
}

.cm-penalty-opt {
  background: linear-gradient(to bottom, #DD2222 0%, #AA0000 100%);
  color: var(--white, #fff);
  text-align: center;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.3;
  font-weight: bold;
  border-top: 2px solid #FFDD33;
  border-left: 2px solid #FFDD33;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  cursor: pointer;
  user-select: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cm-penalty-opt:hover { background: linear-gradient(to bottom, #EE3333 0%, #CC1111 100%); }

.cm-penalty-done {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  text-align: center;
  padding: 8px 0;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  border-top: 3px solid #8888FF;
  border-left: 3px solid #8888FF;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
  cursor: pointer;
}

/* ── League Tables Screen ────────────────────────── */

.cm-box--ltable {
  width: min(900px, 98vw);
}

.cm-ltable {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  width: 100%;
  outline: none;
}

/* 14 columns total: stripe | team name | PL | W D L F A | W D L F A | PT.
   PL and PT get slightly more room; stat columns are all equal fr so the
   grid fills the full Box width (same 720px as the main hub menu). */
.cm-ltable-grid {
  display: grid;
  grid-template-columns:
    14px
    minmax(180px, 6.5fr)
    repeat(11, 1fr)
    1.3fr;
  row-gap: 1px;
  column-gap: 2px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.cm-ltable-title {
  grid-column: 1 / span 2;
  background: var(--red);
  color: var(--white);
  padding: 4px 6px;
  margin-bottom: 6px;
  margin-right: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid #FF5555;
  border-left: 2px solid #FF5555;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
}

.cm-ltable-head {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  padding: 4px 0;
  margin-bottom: 6px;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid #DDDDDD;
  border-bottom: 2px solid #262626;
}

/* PT header inherits the grey gradient from .cm-ltable-head.
   The red emphasis only applies to the PT data cells below. */


/* Team-name bars: alternating light/dark blue (zebra). */
.cm-ltable-name {
  background: #3333AA;
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  padding: 3px 10px;
  margin-right: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  display: flex;
  align-items: center;
}

.cm-ltable-name--alt {
  background: #000066;
}

/* Premier division keeps the original grey embossed bar look
   (no zebra striping). */
.cm-ltable-grid--premier .cm-ltable-name,
.cm-ltable-grid--premier .cm-ltable-name--alt {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #262626;
  border-bottom: 2px solid #262626;
  box-shadow: inset 1px 1px 0 #B8B8B8, inset -1px -1px 0 #404040;
  padding: 2px 8px;
}

/* User's team highlight — must win over --alt and --premier, so declared last. */
.cm-ltable-name--mine,
.cm-ltable-name--mine.cm-ltable-name--alt,
.cm-ltable-grid--premier .cm-ltable-name--mine {
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%);
  color: var(--white);
  text-shadow: none;
  border-top-color: #AAFFAA;
  border-left-color: #AAFFAA;
  border-right-color: #003300;
  border-bottom-color: #003300;
  box-shadow: inset 1px 1px 0 #77EE77, inset -1px -1px 0 #226622;
}

/* Stats: transparent background, yellow text. */
.cm-ltable-cell {
  background: transparent;
  color: var(--yellow);
  text-align: center;
  padding: 2px 0;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-shadow: 0 0 black;
}

.cm-ltable-cell--pt {
  background: var(--red);
  color: var(--white);
}

/* PL value is cyan; W/D/L/F/A stay yellow. */
.cm-ltable-cell--pl {
  color: var(--cyan);
}

/* Away W/D/L/F/A values are white to contrast with home (yellow). */
.cm-ltable-cell--away {
  color: var(--white);
}

/* Zone stripes (left column) — champion / promoted / playoff / relegated.
   When a team has mathematically clinched (or won the playoff Final), the
   stripe carries a C/P/R letter — black on yellow/green/orange, white on
   red — sized to fit the 14px column. */
.cm-ltable-stripe {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
}
.cm-ltable-zone--champion  { background: var(--yellow); }
.cm-ltable-zone--promoted  { background: var(--green); }
.cm-ltable-zone--playoff   { background: #FF8800; }
.cm-ltable-zone--relegated { background: var(--red); }
.cm-ltable-stripe--tag-C,
.cm-ltable-stripe--tag-P { color: #000; }
.cm-ltable-stripe--tag-R { color: var(--white); }

/* Thin horizontal divider on the first row of each new zone — only
   for the positive-direction transitions (champion / promoted / playoff).
   Relegation and "safe" zones have no divider line. */
.cm-ltable-row-start--champion { border-top: 2px solid var(--yellow); }
.cm-ltable-row-start--promoted { border-top: 2px solid var(--green); }
.cm-ltable-row-start--playoff  { border-top: 2px solid #FF8800; }

/* Row wrappers are invisible on desktop — display:contents lets their
   cells place straight into the 14-column grid as before. */
.cm-ltable-row {
  display: contents;
}

/* League table on phones: a pinned sticky cluster of stripe 14px |
   name 150px | PT 40px (PT pulled ahead of PL), at cumulative offsets
   incl. the 2px gaps; PL + the home/away stats scroll horizontally
   behind it. The header row rides in the same scroller: the division
   title covers stripe+name (166px), the PT heading pins over its
   column, and the scrollable headings start at 210px
   (14+2+150+2+40+2) — glued to their columns. */
@media (max-width: 600px) {
  .cm-ltable-grid {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cm-ltable-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
    width: max-content;
    min-width: 100%;
    margin-bottom: 1px;
  }
  .cm-ltable-row--head {
    margin-bottom: 6px;
  }
  .cm-ltable-stripe {
    order: -3;
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 14px;
    /* Transparent, exactly like desktop — mid-table rows show NO stripe;
       only the zone rows below get a colour. (A solid fill here, black or
       any blend, painted a visible bar on every non-zone row.) */
    background: transparent;
  }
  .cm-ltable-zone--champion  { background: var(--yellow); }
  .cm-ltable-zone--promoted  { background: var(--green); }
  .cm-ltable-zone--playoff   { background: #FF8800; }
  .cm-ltable-zone--relegated { background: var(--red); }
  .cm-ltable-cell {
    flex: 0 0 36px;
  }
  .cm-ltable-name {
    order: -2;
    position: sticky;
    left: 16px;
    z-index: 2;
    flex: 0 0 150px;
    margin-right: 0;
    font-size: 11px;
  }
  .cm-ltable-cell--pt {
    /* First of the scrollable columns (ahead of PL), not pinned. */
    order: -1;
    flex: 0 0 40px;
  }
  .cm-ltable-title {
    order: -2;
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 166px;
    margin-right: 0;
    margin-bottom: 0;
    font-size: 11px;
  }
  .cm-ltable-head {
    flex: 0 0 36px;
    margin-bottom: 0;
  }
  .cm-ltable-head--pt {
    order: -1;
    flex: 0 0 40px;
  }
}


.cm-ltable-actions {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2px;
  margin-top: 4px;
}

.cm-ltable-btn {
  padding: 8px 0;
  text-align: center;
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  text-shadow: 0 -1px 0 #000;
}

.cm-ltable-btn--dir {
  background: var(--red);
  color: var(--yellow);
  border-top: 3px solid #FF5555;
  border-left: 3px solid #FF5555;
  border-right: 3px solid #550000;
  border-bottom: 3px solid #550000;
}

.cm-ltable-btn--dir span {
  letter-spacing: 2px;
}

.cm-ltable-btn--exit {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white);
  border-top: 3px solid #8888FF;
  border-left: 3px solid #8888FF;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
}

.cm-ltable-btn:hover { filter: brightness(1.15); }
/* Shadowed look for disabled paging buttons (no more pages either way). */
.cm-ltable-btn:disabled,
.cm-ltable-btn[disabled] {
  opacity: 0.35;
  filter: grayscale(0.6);
  cursor: default;
  pointer-events: none;
}

/* ── Manager Scores ───────────────────────────────
   4-column grid: rank | manager name | club | pts.
   Header row spans 3 logical columns (rank cell stays blank). Reuses the
   cm-ltable button styles below for the bottom -DIV | EXIT | +DIV bar.
   Layout mirrors the DOS CM93 Tables/Awards screen: blue rank, blue/black
   alternating manager bars, green club bar, red+yellow points cell. */
.cm-mgrscores {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  outline: none;
}

.cm-mgrscores-grid {
  display: grid;
  grid-template-columns: 44px minmax(180px, 4fr) minmax(180px, 4fr) 1.6fr;
  row-gap: 1px;
  column-gap: 2px;
  width: 100%;
  box-sizing: border-box;
}

/* Header strip — three labels above the table. Rank column under the
   header is intentionally empty (matches the DOS layout). */
.cm-mgrscores-head {
  background: linear-gradient(to bottom, #3333AA 0%, #000066 100%);
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  padding: 4px 8px;
  margin-bottom: 4px;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 12px;
  display: flex;
  align-items: center;
  border-top: 2px solid #6666CC;
  border-left: 2px solid #6666CC;
  border-right: 2px solid #000033;
  border-bottom: 2px solid #000033;
}
.cm-mgrscores-head--title {
  grid-column: 1 / span 2;
  background: var(--white);
  color: #000;
  text-shadow: none;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #888888;
  border-bottom-color: #888888;
}
.cm-mgrscores-head--club { justify-content: flex-start; }
.cm-mgrscores-head--pts  { justify-content: flex-start; }

.cm-mgrscores-rank {
  background: linear-gradient(to bottom, #3333AA 0%, #000066 100%);
  color: var(--white);
  text-shadow: none;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
}

.cm-mgrscores-name {
  background: linear-gradient(to bottom, #BBBBBB 0%, #888888 100%);
  color: var(--white);
  text-shadow: none;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  display: flex;
  align-items: center;
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #555555;
}
.cm-mgrscores-name--alt {
  background: linear-gradient(to bottom, #999999 0%, #666666 100%);
  color: var(--white);
}
.cm-mgrscores .cm-mgrscores-name.cm-mgrscores-name--mine,
.cm-mgrscores .cm-mgrscores-name.cm-mgrscores-name--alt.cm-mgrscores-name--mine {
  background: #0284C7;
  color: var(--white);
  text-shadow: none;
  border-top: 1px solid #38BDF8;
  border-bottom: 1px solid #075985;
}

.cm-mgrscores-club {
  background: linear-gradient(to bottom, #33AA33 0%, #007700 100%);
  color: var(--white);
  text-shadow: none;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  display: flex;
  align-items: center;
  border-top: 1px solid #66CC66;
  border-bottom: 1px solid #003300;
}

.cm-mgrscores-pts {
  background: #dee31c;
  color: #e00404;
  text-shadow: none;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
  letter-spacing: 1px;
  border-top: 1px solid #FFFF88;
  border-bottom: 1px solid #886600;
}

/* ── Hall of Fame variant ─────────────────────────
   Reuses .cm-mgrscores-grid columns + heads, swaps row colours to the
   DOS Hall-of-Fame palette: red rank, light-grey manager bar, bright
   yellow club bar, orange pts cell. Single-page (no -DIV/+DIV paging) —
   the EXIT button is centred via .cm-mgrscores-actions--single. */
.cm-mgrscores--halloffame .cm-mgrscores-rank {
  background: var(--red);
  color: var(--white);
}

.cm-mgrscores--halloffame .cm-mgrscores-name,
.cm-mgrscores--halloffame .cm-mgrscores-name--alt {
  background: linear-gradient(to bottom, #BBBBBB 0%, #888888 100%);
  color: var(--white);
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #555555;
}

.cm-mgrscores--halloffame .cm-mgrscores-club {
  background: var(--yellow);
  color: #000;
  border-top: 1px solid #FFFFAA;
  border-bottom: 1px solid #8B7A00;
}

.cm-mgrscores--halloffame .cm-mgrscores-pts {
  background: #FF8800;
  color: #000;
  border-top: 1px solid #FFAA33;
  border-bottom: 1px solid #663300;
}

.cm-mgrscores-actions--single {
  grid-template-columns: 1fr;
}

/* ── Manager Salary variant ────────────────────────
   Same grid as Manager Rankings; only the rightmost cell changes — a
   green band with bold white text (e.g. "220K"), matching the DOS
   Tables/Awards Manager Salary screen. */
.cm-mgrscores--salary .cm-mgrscores-pts {
  background: linear-gradient(to bottom, #33AA33 0%, #007700 100%);
  color: var(--white);
  border-top: 1px solid #66CC66;
  border-bottom: 1px solid #003300;
  letter-spacing: 1px;
}

/* ── Team Form Guide ────────────────────────────── */
/* 6 columns: pos | team name | HOME (4 letters) | AWAY (4 letters) | LP | BOARD%.
   Mirrors the league-tables layout so we can share Box / button styles. */
.cm-formguide {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  outline: none;
}

.cm-formguide-grid {
  display: grid;
  grid-template-columns:
    32px
    minmax(160px, 6fr)
    2fr
    2fr
    1fr
    2.4fr;
  row-gap: 1px;
  column-gap: 2px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* Title bar spans the position + team-name columns. */
.cm-formguide-title {
  grid-column: 1 / span 2;
  background: var(--white);
  color: #000;
  padding: 4px 6px;
  margin-bottom: 6px;
  margin-right: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
}

.cm-formguide-head {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  padding: 4px 0;
  margin-bottom: 6px;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid #DDDDDD;
  border-bottom: 2px solid #262626;
}

.cm-formguide-pos {
  background: var(--yellow);
  color: #000;
  font-weight: bold;
  text-align: center;
  font-size: 13px;
  padding: 2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
}

.cm-formguide-name {
  background: #0284C7;
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  padding: 3px 10px;
  margin-right: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  display: flex;
  align-items: center;
}
.cm-formguide-name--alt { background: #000066; }
.cm-formguide-name--mine,
.cm-formguide-name--mine.cm-formguide-name--alt {
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%);
  color: var(--white);
  box-shadow: inset 1px 1px 0 #77EE77, inset -1px -1px 0 #226622;
}

/* Form letter blocks — red strip with mono-spaced letters. */
.cm-formguide-form {
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0;
  padding: 2px 4px;
  text-shadow: 0 -1px 0 #000;
}
.cm-formguide-letter {
  flex: 1;
  text-align: center;
}
.cm-formguide-letter--W { color: var(--yellow); }
.cm-formguide-letter--D { color: var(--yellow); }
.cm-formguide-letter--L { color: var(--yellow); }
.cm-formguide-letter--X { color: #882222; }

/* LP — orange chip showing current league position. */
.cm-formguide-lp {
  background: #FF8800;
  color: var(--white);
  font-weight: bold;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 -1px 0 #000;
}

/* BOARD % — green progress bar with centered percent text. */
.cm-formguide-board {
  position: relative;
  background: #003300;
  color: var(--white);
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cm-formguide-board-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%);
}
.cm-formguide-board-txt {
  position: relative;
  z-index: 1;
  color: var(--yellow);
}

/* ── Job News ────────────────────────────────────
   3 columns: team (blue) | manager surname (orange) | job status (green).
   Header row mirrors CM93's panel: white title strip over teams, red
   "MANAGER" chip, yellow "JOB" chip. -DIV/EXIT/+DIV footer reuses the
   shared cm-ltable-btn styles. */
.cm-jobnews {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  outline: none;
}

.cm-jobnews-grid {
  display: grid;
  grid-template-columns: minmax(180px, 3fr) 2fr 2fr;
  row-gap: 1px;
  column-gap: 2px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.cm-jobnews-title {
  background: var(--white);
  color: #000;
  padding: 4px 6px;
  margin-bottom: 6px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
}

.cm-jobnews-head {
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  padding: 4px 0;
  margin-bottom: 6px;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-jobnews-head--mgr {
  background: linear-gradient(to bottom, #DD3333 0%, #990000 100%);
  border-top: 2px solid #FF6666;
  border-bottom: 2px solid #440000;
}
.cm-jobnews-head--job {
  background: linear-gradient(to bottom, #E8C84A 0%, #B8980E 100%);
  color: #000;
  text-shadow: none;
  border-top: 2px solid #FFE988;
  border-bottom: 2px solid #553F00;
}

.cm-jobnews-team {
  background: #0284C7;
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  display: flex;
  align-items: center;
}
.cm-jobnews-team.cm-jobnews-cell--alt { background: #000066; }

/* Premier division swaps the blue zebra for a grey embossed bar with
   light/dark alternating shades. */
.cm-jobnews-grid--premier .cm-jobnews-team {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #262626;
  border-bottom: 2px solid #262626;
  box-shadow: inset 1px 1px 0 #B8B8B8, inset -1px -1px 0 #404040;
  padding: 2px 8px;
}
.cm-jobnews-grid--premier .cm-jobnews-team.cm-jobnews-cell--alt {
  background: linear-gradient(to bottom, #7A7A7A 0%, #4E4E4E 100%);
}

/* User's team highlight — must win over --alt and --premier, declared last. */
.cm-jobnews-team--mine,
.cm-jobnews-team--mine.cm-jobnews-cell--alt,
.cm-jobnews-grid--premier .cm-jobnews-team--mine {
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%);
  color: var(--white);
  border-top-color: #AAFFAA;
  border-left-color: #AAFFAA;
  border-right-color: #003300;
  border-bottom-color: #003300;
  box-shadow: inset 1px 1px 0 #77EE77, inset -1px -1px 0 #226622;
}

.cm-jobnews-mgr {
  background: #FF8800;
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 13px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Job column — single green tone for every active manager. The lone
   exception is AVAILABLE (vacancy), inverted to white-on-green so it
   reads at a glance against the otherwise-uniform column. */
.cm-jobnews-job {
  background: #00AA44;
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 13px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-jobnews-job--available {
  background: var(--white);
  color: #00AA44;
  text-shadow: none;
}

/* Row wrappers vanish on desktop — cells place into the grid above. */
.cm-jobnews-row {
  display: contents;
}

/* Job News on phones: horizontal touch-scroller with the team column
   pinned left (rows flip grid→flex; sticky can't travel in a grid
   area). JOB is sized so "UNDER THREAT" never clips; the title cell
   covers the pinned team column so MANAGER/JOB headings stay glued to
   their columns. */
@media (max-width: 600px) {
  .cm-jobnews-grid {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cm-jobnews-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
    width: max-content;
    min-width: 100%;
    margin-bottom: 1px;
  }
  .cm-jobnews-team,
  .cm-jobnews-title {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 150px;
    margin-bottom: 0;
    font-size: 11px;
  }
  .cm-jobnews-mgr,
  .cm-jobnews-head--mgr {
    flex: 0 0 116px;
    margin-bottom: 0;
    font-size: 11px;
  }
  .cm-jobnews-job,
  .cm-jobnews-head--job {
    flex: 0 0 150px;
    margin-bottom: 0;
    font-size: 11px;
  }
  .cm-jobnews-row--head {
    margin-bottom: 6px;
  }
}


/* ── Job Offer ───────────────────────────────────
   Popup shown when an AI club picks the user as their new manager.
   Yellow club chip, yellow "WANT YOU" line, cyan offer line, and a
   five-button bar (Accept / Negotiate / Refuse / League Table / Squad
   Details). The header (blue tag) comes from the Box wrapper. */
.cm-joboffer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  width: 100%;
}

.cm-joboffer-tag {
  align-self: flex-start;
  background: var(--yellow);
  color: #000;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: lowercase;
  padding: 4px 12px;
  border-top: 2px solid #FFFFAA;
  border-left: 2px solid #FFFFAA;
  border-right: 2px solid #886600;
  border-bottom: 2px solid #886600;
  margin-bottom: 6px;
  font-size: 14px;
}

.cm-joboffer-line {
  font-weight: bold;
  letter-spacing: 1px;
  text-align: left;
  /* Flush-left: body text's first glyph aligns with the yellow tag's
     left edge above it (matches the DOS CM93 popup layout). */
  padding: 4px 0;
  font-size: 14px;
  text-shadow: 0 -1px 0 #000;
}
.cm-joboffer-line--want  { color: var(--yellow); }
.cm-joboffer-line--offer { color: #5AC8FA; }

/* The MenuItem grid has 8px padding by default — drop it here so the
   button row's outer edges sit flush with the yellow tag and the body
   text above. */
.cm-joboffer .cm-menu { padding: 0; }


/* ── Job Candidates ──────────────────────────────
   Two-side list of applicants for a vacant club. Layout: a "Candidates"
   pink/magenta title strip over a 4-column grid (NAME | CLUB | NAME |
   CLUB) and a full-width blue EXIT bar at the bottom. */
.cm-candidates {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  outline: none;
}

.cm-candidates-title {
  align-self: flex-start;
  background: linear-gradient(to bottom, #C846C8 0%, #8E1E8E 100%);
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 14px;
  padding: 4px 16px;
  text-transform: uppercase;
  border-top: 2px solid #E090E0;
  border-left: 2px solid #E090E0;
  border-right: 2px solid #441044;
  border-bottom: 2px solid #441044;
  margin-bottom: 4px;
}

.cm-candidates-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr 1fr;
  row-gap: 1px;
  column-gap: 2px;
  width: 100%;
  box-sizing: border-box;
}

.cm-candidates-head {
  background: var(--white);
  color: var(--red);
  text-shadow: none;
  padding: 3px 6px;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 12px;
  display: flex;
  align-items: center;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #888888;
}

.cm-candidates-name {
  background: #008833;
  color: var(--yellow);
  text-shadow: 0 -1px 0 #000;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  min-height: 24px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.cm-candidates-name--mine {
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%);
  color: var(--white);
  box-shadow: inset 1px 1px 0 #77EE77, inset -1px -1px 0 #226622;
}

.cm-candidates-club {
  background: #0040A1;
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  min-height: 24px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.cm-candidates-exit {
  margin-top: 4px;
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  letter-spacing: 3px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 8px 0;
  cursor: pointer;
  border-top: 3px solid #8888FF;
  border-left: 3px solid #8888FF;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
  user-select: none;
}
.cm-candidates-exit:hover { filter: brightness(1.15); }


/* ── Average Gates ──────────────────────────────── */
/* 5 columns: pos | team name | AVERAGE | LP | BOARD%. */
.cm-avgates {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  outline: none;
}

.cm-avgates-grid {
  display: grid;
  grid-template-columns:
    32px
    minmax(180px, 6fr)
    3fr
    1fr
    2.4fr;
  row-gap: 1px;
  column-gap: 2px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.cm-avgates-title {
  grid-column: 1 / span 2;
  background: var(--white);
  color: #000;
  padding: 4px 6px;
  margin-bottom: 6px;
  margin-right: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
}

.cm-avgates-head {
  background: var(--red);
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  padding: 4px 0;
  margin-bottom: 6px;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid #FF5555;
  border-left: 2px solid #FF5555;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
}

.cm-avgates-pos {
  background: var(--yellow);
  color: #000;
  font-weight: bold;
  text-align: center;
  font-size: 13px;
  padding: 2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
}

.cm-avgates-name {
  background: #0284C7;
  color: var(--white);
  text-shadow: 0 -1px 0 #000;
  padding: 3px 10px;
  margin-right: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  display: flex;
  align-items: center;
}
.cm-avgates-name--alt { background: #015F8E; }
.cm-avgates-name--mine,
.cm-avgates-name--mine.cm-avgates-name--alt {
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%);
  color: var(--white);
  box-shadow: inset 1px 1px 0 #77EE77, inset -1px -1px 0 #226622;
}

.cm-avgates-avg {
  background: var(--dark-blue);
  color: var(--white);
  font-weight: bold;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 -1px 0 #000;
}

.cm-avgates-lp {
  background: #FF8800;
  color: var(--white);
  font-weight: bold;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 -1px 0 #000;
}

.cm-avgates-board {
  position: relative;
  background: #003300;
  color: var(--white);
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cm-avgates-board-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%);
}
.cm-avgates-board-txt {
  position: relative;
  z-index: 1;
  color: var(--yellow);
}

/* ── League Progress Graph ──────────────────────── */

.cm-box--leagprog .cm-box-title {
  background: var(--dark-yellow);
  color: var(--white);
  border-top-color: #FFAA55;
  border-left-color: #FFAA55;
  border-right-color: #552200;
  border-bottom-color: #552200;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #DD8833, inset -1px -1px 0 #441100;
}

.cm-leagprog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  outline: none;
}

.cm-leagprog-chart {
  width: 100%;
  padding: 4px;
}

.cm-leagprog-svg {
  width: 100%;
  height: auto;
  display: block;
}

.cm-leagprog-axis {
  fill: var(--white);
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
}

.cm-leagprog-empty {
  fill: #222;
  font-family: inherit;
  font-size: 12px;
}

/* ── Next League Fixtures ───────────────────────── */

.cm-box--nextleague .cm-box-title {
  background: var(--white);
  color: #000;
  text-align: left;
  margin: 0 0 0 4px;
  width: fit-content;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #888888;
  border-bottom-color: #888888;
  text-shadow: none;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #AAAAAA;
}

.cm-nextleague {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px;
  outline: none;
}

.cm-nextleague-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2px;
  background: #000;
  border: 2px solid #000;
}

.cm-nextleague-team,
.cm-nextleague-v {
  background: var(--blue);
  color: var(--white);
  padding: 6px 12px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
}

.cm-nextleague-team { font-weight: normal; }
.cm-nextleague-team--home { text-align: left; }
.cm-nextleague-team--away { text-align: left; }

.cm-nextleague-v {
  text-align: center;
  letter-spacing: 0;
  text-transform: lowercase;
  min-width: 66px;
  padding: 6px 36px;
}

.cm-nextleague-score {
  text-transform: none;
  letter-spacing: 1px;
  color: var(--white);
  padding: 6px 24px;
  min-width: 66px;
}

.cm-nextleague-team--mine { color: var(--yellow); }

/* ── New Picture (Background) ───────────────────── */

.cm-box--newpicture .cm-menu-item--wide {
  max-width: 33%;
}


.cm-nextleague-empty {
  grid-column: 1 / -1;
  background: var(--blue);
  color: var(--white);
  padding: 16px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
  text-shadow: 0 -1px 0 #000;
}

/* ── Transfer Status screen (STA) ──────────────── */

.cm-transfer-status {
  width: min(640px, 98vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 4px;
}

.cm-transfer-status--approach {
  width: min(760px, 98vw);
}

.cm-ts-title {
  background: #3333AA;
  color: var(--white);
  text-align: center;
  padding: 4px 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 16px;
  border-top: 3px solid #8888EE;
  border-left: 3px solid #8888EE;
  border-right: 3px solid #000044;
  border-bottom: 3px solid #000044;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #5555CC, inset -1px -1px 0 #222277;
  width: fit-content;
  margin: 0 auto 4px;
}

.cm-ts-body {
  padding: 6px 2px 2px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-ts-header { display: flex; }

.cm-ts-club {
  background: var(--red, #C03030);
  color: var(--white, #fff);
  padding: 4px 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 20px;
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  text-shadow: 0 -1px 0 #000;
}

.cm-ts-name {
  color: var(--yellow, #FFFF55);
  letter-spacing: 2px;
  font-size: 20px;
  text-shadow: 1px 0px 15px black;
}

.cm-ts-status {
  color: var(--cyan, #55FFFF);
  letter-spacing: 1px;
  font-size: 18px;
  padding: 2px 0 4px;
  text-shadow: 1px 0px 15px black;
}

.cm-rehab-line {
  color: var(--cyan, #55FFFF);
  letter-spacing: 1px;
  font-size: 15px;
  padding: 1px 0;
  text-shadow: 1px 0px 15px black;
}

.cm-ts-menu {
  padding: 0;
  gap: 4px;
  margin-top: 2px;
}

.cm-ts-message {
  color: var(--white, #fff);
  letter-spacing: 1px;
  font-size: 16px;
  padding: 6px 4px 2px;
  text-shadow: 1px 0px 15px black;
}

/* ── Scouts screen (Find Player > Scout Reports) ──
   Sits on top of the cm-transfer-status frame: four grey two-line
   action buttons across the top, then a red-headed 4-col table with
   one row per scout, then a full-width blue Done bar. */
.cm-scouts-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 2px;
}
.cm-scouts-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #008833;
  color: var(--white, #fff);
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
  padding: 6px 4px;
  cursor: pointer;
  border-top:    2px solid #22AA55;
  border-left:   2px solid #22AA55;
  border-right:  2px solid #004411;
  border-bottom: 2px solid #004411;
}
.cm-scouts-action:hover { filter: brightness(1.1); }

.cm-scouts-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.cm-scouts-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.7fr 1fr;
  gap: 2px;
  cursor: pointer;
}
.cm-scouts-row--head { cursor: default; }
.cm-scouts-cell {
  padding: 4px 10px;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: bold;
  /* Long names (e.g. PESCHISOLIDO) must clamp rather than overflow the
     column. min-width:0 lets the grid track shrink below content size. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white, #fff);
  border-top:    2px solid #DDDDDD;
  border-left:   2px solid #DDDDDD;
  border-right:  2px solid #444444;
  border-bottom: 2px solid #444444;
}
/* SCOUT cell mirrors the league-table name column — solid blue with
   zebra striping. --alt is added in JS on odd-index rows. */
.cm-scouts-cell--scout {
  background: #4488CC;
  color: var(--white, #fff);
  text-shadow: 0 -1px 0 #000;
  text-transform: uppercase;
}
.cm-scouts-cell--watch {
  background: #3333AA;
  color: var(--white, #fff);
  border-top-color:    #6666CC;
  border-left-color:   #6666CC;
  border-right-color:  #000044;
  border-bottom-color: #000044;
}
.cm-scouts-cell--link {
  cursor: pointer;
}
.cm-scouts-cell--link:hover {
  filter: brightness(1.25);
}
.cm-scouts-cell--report {
  background: #d6c326;
  color: #000;
  border: none;
}
.cm-scouts-cell--rep,
.cm-scouts-cell--report { text-transform: uppercase; }
/* Red column header strip. */
.cm-scouts-cell--head {
  background: var(--red, #CC0000);
  color: var(--white, #fff);
  border-top-color:    #FF6666;
  border-left-color:   #FF6666;
  border-right-color:  #550000;
  border-bottom-color: #550000;
}
/* Selected row — SCOUT cell inverts: white tile with blue text
   (swap of the flat-blue + white-text unselected rows). */
.cm-scouts-row.is-selected { cursor: default; }
.cm-scouts-row.is-selected .cm-scouts-cell--scout {
  background: linear-gradient(to bottom, #FFFFFF 0%, #C8C8C8 100%);
  color: #3333AA;
  text-shadow: none;
}
.cm-scouts-row.is-selected .cm-scouts-cell--rep {
  background: linear-gradient(to bottom, #B8B8B8 0%, #888888 100%);
}

.cm-scouts-done {
  margin-top: 6px;
  text-align: center;
  background: #3333AA;
  color: var(--white, #fff);
  font-weight: bold;
  letter-spacing: 3px;
  font-size: 16px;
  padding: 6px 16px;
  text-transform: capitalize;
  cursor: pointer;
  border-top:    3px solid #8888EE;
  border-left:   3px solid #8888EE;
  border-right:  3px solid #000044;
  border-bottom: 3px solid #000044;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #5555CC, inset -1px -1px 0 #222277;
}
.cm-scouts-done:hover { filter: brightness(1.1); }

/* ── Scout Report (one scout, one player) ──
   Yellow club tag, white banner strip, green key/value grid on the
   left, four red action buttons on the right, blue Done bar at the
   bottom. */
.cm-scoutreport-clubtag {
  background: var(--yellow, #FFFF55);
  color: #000;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 3px 12px;
  font-size: 14px;
  text-transform: capitalize;
  border-top:    2px solid #FFFFAA;
  border-left:   2px solid #FFFFAA;
  border-right:  2px solid #888800;
  border-bottom: 2px solid #888800;
}
.cm-scoutreport-banner {
  background: var(--white, #fff);
  color: #000;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 3px 10px;
  font-size: 13px;
  margin-top: 4px;
}
.cm-scoutreport-split {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 8px;
  margin-top: 4px;
}
.cm-scoutreport-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: linear-gradient(to bottom, #008833 0%, #005522 100%);
  padding: 4px;
  border-top:    2px solid #55DD88;
  border-left:   2px solid #55DD88;
  border-right:  2px solid #003311;
  border-bottom: 2px solid #003311;
  align-content: start;
}
.cm-scoutreport-cell {
  padding: 2px 6px;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: bold;
  color: var(--white, #fff);
}
.cm-scoutreport-cell--label { text-transform: uppercase; }
.cm-scoutreport-cell--value { text-transform: uppercase; color: var(--yellow, #FFFF55); }
/* OTHER SCOUTS blue strip + green body, span the full grid width. */
.cm-scoutreport-other-head {
  grid-column: 1 / -1;
  background: #3333AA;
  color: var(--white, #fff);
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 2px;
  padding: 3px 6px;
  margin-top: 2px;
  text-transform: uppercase;
  border-top:    2px solid #8888EE;
  border-left:   2px solid #8888EE;
  border-right:  2px solid #000044;
  border-bottom: 2px solid #000044;
}
.cm-scoutreport-other-body {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 3px 6px;
  color: var(--white, #fff);
  text-transform: uppercase;
}
.cm-scoutreport-approach-label {
  background: var(--cyan, #55FFFF);
  color: #000;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 3px 6px;
  margin-top: 2px;
  text-transform: uppercase;
}
.cm-scoutreport-approach-value {
  background: var(--cyan, #55FFFF);
  color: #000;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 3px 6px;
  margin-top: 2px;
  text-transform: uppercase;
}
.cm-scoutreport-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cm-scoutreport-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: var(--red, #CC0000);
  color: var(--white, #fff);
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 13px;
  padding: 6px 4px;
  cursor: pointer;
  border-top:    2px solid #FF8844;
  border-left:   2px solid #FF8844;
  border-right:  2px solid #663300;
  border-bottom: 2px solid #663300;
}
.cm-scoutreport-action:hover { filter: brightness(1.1); }

/* ── Arrange Friendly screen ──
   Mirrors the Scouts screen — reuses cm-scouts-* classes verbatim. The
   only friendlies-specific styling is the blue SEASON-STARTS strip
   below the table. Friendlies cells never wrap (long opponent names
   like "Bayern Munchen" get clipped with an ellipsis instead).
   Column widths differ from Scouts: tiny WK, wide OPPONENTS, medium
   OF, narrow VEN. */
.cm-friendlies .cm-scouts-row {
  grid-template-columns: 0.7fr 1.5fr 1fr 0.7fr;
}
.cm-friendlies .cm-scouts-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Approach (for friendly) confirm screen ──
   Reached by picking a club in the friendly opponent picker. Blue title
   chip, yellow club tag (mixed case, not uppercased), cyan italic ask
   line, two grey two-button row (Exit / Approach Them). A 2-second
   flash (.cm-fra-flash) shows the engine's accept/decline verdict over
   the body before navigating away. */
.cm-fra {
  width: min(540px, 96vw);
}
.cm-fra-body {
  gap: 14px;
}
.cm-fra-clubtag {
  background: var(--yellow, #FFFF55);
  color: #000;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 3px 14px;
  font-size: 16px;
  width: fit-content;
  border-top:    2px solid #FFFFAA;
  border-left:   2px solid #FFFFAA;
  border-right:  2px solid #888800;
  border-bottom: 2px solid #888800;
}
.cm-fra-ask {
  color: var(--cyan, #55FFFF);
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 18px;
  padding: 4px 0;
  text-shadow: 1px 1px 0 #000;
}
.cm-fra-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
}
/* Even-split variant — Set Venue has two equal-width buttons rather
   than the Approach screen's narrow-Exit / wide-Approach split. */
.cm-fra-actions--even {
  grid-template-columns: 1fr 1fr;
}
.cm-fra-action {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white);
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #262626;
  border-bottom: 2px solid #262626;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #B8B8B8, inset -1px -1px 0 #404040;
  text-shadow: 0 -1px 0 #000000;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: left;
  cursor: pointer;
}
.cm-fra-action:hover { filter: brightness(1.1); }
.cm-fra-flash {
  color: var(--yellow, #FFFF55);
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 16px;
  padding: 6px 0;
  text-shadow: 1px 1px 0 #000;
}

/* ── Select Friendly Opponent (Arrange Friendly > SELECT OPPONENTS) ──
   Blue title chip (cm-ts-title), red banner strip, 3-col team grid,
   then the shared -Scr | DONE | +Scr action bar at the bottom. */
.cm-fropp {
  width: min(760px, 98vw);
  margin: 0 auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.cm-fropp-banner {
  background: var(--red, #CC0000);
  color: var(--white, #fff);
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
  padding: 4px 12px;
  text-shadow: 0 -1px 0 #000;
  border-top:    2px solid #FF6666;
  border-left:   2px solid #FF6666;
  border-right:  2px solid #550000;
  border-bottom: 2px solid #550000;
  margin-bottom: 4px;
}
.cm-fropp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 4px;
}
.cm-fropp-cell {
  background: linear-gradient(to bottom, #888888 0%, #555555 100%);
  color: var(--white, #fff);
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 13px;
  padding: 3px 10px;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid #333333;
  border-right: 1px solid #333333;
  text-shadow: 0 -1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-fropp-cell:hover { color: var(--yellow, #FFFF55); }
.cm-fropp-cell--self {
  color: var(--yellow, #FFFF55);
  cursor: default;
}
.cm-fropp-cell--self:hover { color: var(--yellow, #FFFF55); }

/* Override the cm-news-actions-bar top margin — this picker packs the
   bar tight against the grid (transferNews leaves a 50px gap for the
   trailing column). */
.cm-fropp .cm-news-actions-bar {
  margin-top: 4px;
}

.cm-friendlies-seasonstrip {
  margin-top: 4px;
  background: #3333AA;
  color: var(--white, #fff);
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 14px;
  padding: 4px 12px;
  text-transform: uppercase;
  border-top:    2px solid #6666CC;
  border-left:   2px solid #6666CC;
  border-right:  2px solid #000022;
  border-bottom: 2px solid #000022;
}

.cm-ts-message--debug {
  color: var(--cyan, #55FFFF);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
}


.cm-ts-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 2px;
}

.cm-ts-confirm-label {
  color: var(--cyan, #55FFFF);
  letter-spacing: 2px;
  font-size: 14px;
  text-transform: uppercase;
  text-shadow: 1px 0px 15px black;
}

/* ── Asking Price screen ────────────────────────── */

.cm-asking-price {
  width: min(900px, 98vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 10px;
  /* Kill the mobile double-tap-to-zoom on this screen — rapid taps on the
     -/+ steppers and digit cells were being read as zoom gestures, so a
     bump felt unresponsive. */
  touch-action: manipulation;
}

.cm-ap-title {
  background: #3333AA;
  color: var(--white);
  text-align: center;
  padding: 6px 22px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 22px;
  border-top: 3px solid #8888EE;
  border-left: 3px solid #8888EE;
  border-right: 3px solid #000044;
  border-bottom: 3px solid #000044;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #5555CC, inset -1px -1px 0 #222277;
  width: fit-content;
  margin: 0 auto 4px;
}

.cm-ap-panel {
  background: #00AA33;
  border-top: 3px solid #33DD66;
  border-left: 3px solid #33DD66;
  border-right: 3px solid #005500;
  border-bottom: 3px solid #005500;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  overflow: hidden;
}

.cm-ap-notices {
  display: flex;
  flex-direction: column;
  /* Cap the log to ~13 lines (VALUED line + 12 bid/refusal rows) then
     scroll — long auctions used to grow the panel off-screen instead. */
  max-height: 260px;
  overflow-y: auto;
}

.cm-ap-header {
  background: var(--red, #C03030);
  color: var(--white, #fff);
  text-align: left;
  padding: 2px 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  text-shadow: 0 -1px 0 #000;
}

.cm-ap-notice {
  color: var(--white, #fff);
  padding: 6px 12px 2px;
  letter-spacing: 2px;
  font-size: 13px;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}

.cm-ap-notice + .cm-ap-notice {
  padding-top: 2px;
}

.cm-ap-notice--valued {
  color: var(--yellow, #FFFF55);
}

.cm-ap-notice--debug {
  color: var(--cyan, #55FFFF);
  font-style: italic;
}

.cm-ap-reroll {
  color: var(--yellow, #FFFF55);
  cursor: pointer;
  margin-left: 6px;
  text-decoration: underline;
}
.cm-ap-reroll:hover { filter: brightness(1.15); }

.cm-ap-bottom {
  display: grid;
  /* minmax(0,…) not the default 1fr (== minmax(auto,1fr)): the `auto`
     minimum refuses to shrink the asker column below its content's
     min-content, so a wide offer row (many digit cells + the fixed
     steppers) blows the column — and the whole panel — past the
     viewport. Capping the min at 0 lets the column hold the available
     width and the digit cells flex-shrink to fit inside it. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.cm-ap-factfile {
  background: #2222AA;
  color: var(--white, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 10px;
  border: 3px solid var(--white, #fff);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
}

.cm-ap-factfile:hover { filter: brightness(1.15); }

.cm-ap-asker {
  background: #909090;
  border-top: 3px solid #B8B8B8;
  border-left: 3px solid #B8B8B8;
  border-right: 3px solid #606060;
  border-bottom: 3px solid #606060;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
}

.cm-ap-ask-label {
  color: var(--yellow, #FFFF55);
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 18px;
  padding: 4px 0;
  border-bottom: 1px solid #606060;
  text-shadow: 1px 1px 0 #000;
}

.cm-ap-adjust {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  min-width: 0;
  border-bottom: 1px solid #606060;
}

.cm-ap-pm {
  background: transparent;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: bold;
  font-size: 26px;
  border: none;
  /* Don't shrink the +/- targets — only the digit cells flex down to fit.
     Horizontal padding stays modest so wider offers (more digit cells)
     keep room in the row instead of the steppers eating it. */
  flex: 0 0 auto;
  padding: 4px 18px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 1px 1px 0 #000;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cm-ap-pm:hover { color: var(--yellow, #FFFF55); }
.cm-ap-pm:focus { outline: none; }

.cm-ap-cells {
  display: flex;
  gap: 6px;
  /* Allow the cell strip to shrink within the asker column so a 5+ digit
     offer can't push the +/- steppers off the panel edge. */
  min-width: 0;
  flex: 0 1 auto;
}

.cm-ap-digit {
  /* 32px is the classic size when the row fits; flex-shrink lets each cell
     scale down (min-width:0 — single-char content) so the whole row stays
     inside its column no matter how many digits the offer needs. */
  flex: 0 1 32px;
  width: 32px;
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #888888;
  font-family: inherit;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0;
  border-top: 1px solid #404040;
  border-left: 1px solid #404040;
  border-right: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cm-ap-digit--selected {
  color: #000000;
}

.cm-ap-digit--k {
  cursor: default;
}

.cm-ap-done {
  background: #909090;
  color: var(--white, #fff);
  text-align: center;
  letter-spacing: 4px;
  padding: 4px 0;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}

.cm-ap-done:hover { color: var(--yellow, #FFFF55); }

/* ── Club Accounts dashboard ────────────────────── */

.cm-accounts {
  width: min(720px, 98vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 4px;
}

.cm-accounts-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 4px;
}
.cm-accounts-topbar .cm-accounts-title {
  grid-column: 2;
  margin: 0;
}
.cm-accounts-topbar .cm-accounts-top-btn {
  grid-column: 3;
  justify-self: end;
}

.cm-accounts-title {
  background: var(--red, #C03030);
  color: var(--white, #fff);
  text-align: center;
  padding: 4px 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 18px;
  border-top: 3px solid #EE6666;
  border-left: 3px solid #EE6666;
  border-right: 3px solid #550000;
  border-bottom: 3px solid #550000;
  text-shadow: 0 -1px 0 #000;
  width: fit-content;
  margin: 0 auto 4px;
}

.cm-accounts-top-btn {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  text-align: center;
  padding: 4px 12px;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
  cursor: pointer;
  user-select: none;
}
.cm-accounts-top-btn:hover { filter: brightness(1.1); }
.cm-accounts-top-btn.is-active {
  background: linear-gradient(to bottom, #FFCC55 0%, #CC9933 100%);
  color: #220000;
  text-shadow: none;
  border-top-color: #FFEEAA;
  border-left-color: #FFEEAA;
  border-right-color: #663300;
  border-bottom-color: #663300;
}

.cm-accounts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1px;
}

.cm-accounts-cell {
  padding: 2px 10px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white, #fff);
  text-align: left;
}

.cm-accounts-cell--label {
  background: #112266;
}
.cm-accounts-cell--income {
  background: #3366CC;
  padding-left: 22px;
}
.cm-accounts-cell--spending {
  background: var(--red, #C03030);
  padding-left: 22px;
}

.cm-accounts-cell--empty {
  background: transparent;
}

.cm-accounts-cell--gap {
  margin-bottom: 8px;
}

.cm-accounts-cell--head {
  background: var(--yellow, #FFFF55);
  color: #3a8c3a;
  font-weight: bold;
  text-align: left;
  border-top: 2px solid #FFFFAA;
  border-left: 2px solid #FFFFAA;
  border-right: 2px solid #886600;
  border-bottom: 2px solid #886600;
  margin-bottom: 8px;
}
.cm-accounts-cell--head.cm-accounts-cell--income,
.cm-accounts-cell--head.cm-accounts-cell--spending {
  padding-left: 22px;
}
.cm-accounts-cell--head.cm-accounts-cell--label {
  background: var(--red, #C03030);
  color: var(--white, #fff);
  text-align: left;
  text-shadow: 0 -1px 0 #000;
  border-top-color: #EE6666;
  border-left-color: #EE6666;
  border-right-color: #550000;
  border-bottom-color: #550000;
}

.cm-accounts-cell--total {
  background: #3a8c3a;
  color: var(--yellow, #FFFF55);
  font-weight: bold;
  margin-top: 8px;
}
.cm-accounts-cell--total.cm-accounts-cell--income {
  background: var(--white, #fff);
  color: #3366CC;
}
.cm-accounts-cell--total.cm-accounts-cell--spending {
  background: var(--white, #fff);
  color: var(--red, #C03030);
}

.cm-accounts-overdraft,
.cm-accounts-available {
  letter-spacing: 2px;
  font-size: 13px;
  padding: 4px 8px;
  text-transform: uppercase;
}

.cm-accounts-overdraft {
  background: #909090;
  color: var(--white, #fff);
  font-size: 12px;
  letter-spacing: 1px;
  border-top: 2px solid #B8B8B8;
  border-left: 2px solid #B8B8B8;
  border-right: 2px solid #606060;
  border-bottom: 2px solid #606060;
}

.cm-accounts-available {
  color: #3366CC;
  background: var(--white, #fff);
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
}
.cm-accounts-back {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  text-shadow: 0 -1px 0 #000;
  padding: 6px 0;
  text-align: center;
  letter-spacing: 3px;
  font-size: 16px;
  font-weight: bold;
  border-top: 3px solid #8888FF;
  border-left: 3px solid #8888FF;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
  cursor: pointer;
  text-transform: uppercase;
  margin-top: 6px;
}
.cm-accounts-back:hover { filter: brightness(1.1); }

/* ── Mobile adjustments ──────────────────────────── */

@media (max-width: 600px) {
  html, body { font-size: 10px; }

  .cm-box-title {
    font-size: 13px;
    padding: 7px 13px;
    letter-spacing: 2px;
  }

  .cm-menu {
    gap: 6px;
    padding: 6px;
  }

  .cm-menu-item { min-height: 36px; }

  .cm-menu--bar .cm-menu-item {
    padding: 6px 8px;
    font-size: 12px;
  }

  /* Hub menu: four narrow squares per row are cramped on a phone —
     re-grid to 2 boxes per row, with the double-width Continue button
     keeping a full row to itself. Item spans are inline
     `grid-column: span N` set by Menu.js, hence the !important. Squares
     at half-screen width would be huge, so let height come from a
     min-height instead of the desktop 1:1 ratio. */
  .cm-menu--button {
    grid-template-columns: repeat(2, 1fr);
  }

  .cm-menu--button .cm-menu-item {
    grid-column: auto !important;
    font-size: 13px;
    aspect-ratio: auto;
    min-height: 64px;
    border-width: 3px;
  }

  .cm-menu--button .cm-menu-item--wide {
    grid-column: 1 / -1 !important;
  }

  /* Team Choice bars: both choosers drop to 2 columns on phones (the
     New Game screen via responsive COLS, Another Team via stacked
     division sections), so an 11-char "Press Start 2P" name (~121px)
     fits a half-width bar at full size — no vw shrinking needed.
     overflow:hidden is the backstop for odd custom names. */
  .cm-team-choice .cm-menu--bar .cm-menu-item,
  .cm-team-grid .cm-menu--bar .cm-menu-item {
    font-size: 11px;
    letter-spacing: 0;
    padding: 2px 4px;
    overflow: hidden;
    justify-content: center;
  }

  .cm-team-header {
    font-size: 12px;
    letter-spacing: 0;
    padding: 3px 6px;
  }

  /* Stacked division headers (mobile Another Team chooser) — breathing
     room between one division's bars and the next header. */
  .cm-team-header--stack {
    margin-top: 8px;
  }

  .cm-status-bar {
    font-size: 10px;
    padding: 3px 8px;
  }

  .cm-confirm-box { min-width: 200px; padding: 12px; }
  .cm-confirm-label { font-size: 12px; }
  .cm-confirm-btn { font-size: 13px; min-width: 48px; min-height: 40px; }

  .cm-form-input { font-size: 12px; }

  /* Penalty takers (PEN): single-column treatment, like the stat lists
     (whose own rules sit further down, after their base CSS). The second
     column's duplicate NAME header goes, and OPTIONS moves below the
     list as a 2-up button grid (its desktop flex column relied on
     stretching next to the list). */
  .cm-penalty-body {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .cm-penalty-row--empty {
    display: none;
  }
  .cm-penalty-col:nth-child(2) .cm-penalty-head {
    display: none;
  }
  .cm-penalty-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-width: 0;
    margin-top: 6px;
    gap: 4px;
  }
  .cm-penalty-opt-head {
    grid-column: 1 / -1;
  }

  /* Scout Reports (and Arrange Friendly, which reuses cm-scouts-*):
     the four two-line action buttons go 2×2 instead of a cramped
     4-across row, and table cells stop wrapping — "V GOOD" folding to
     two lines made every row a different height. Smaller type +
     ellipsis keeps the 4 columns on one line each. */
  .cm-scouts-actions {
    grid-template-columns: 1fr 1fr;
  }
  .cm-scouts-action {
    font-size: 11px;
    letter-spacing: 0;
    padding: 5px 4px;
  }
  .cm-scouts-done {
    font-size: 13px;
    padding: 5px 12px;
  }
  /* Fixed widths sized to the longest content at the 10px mobile font
     (8-glyph SCOUT/APPROACH = 80px + padding/borders; "V GOOD" = 60px);
     WATCHING flexes with whatever is left. The Friendly screen's own
     .cm-friendlies row widths out-specify this and are untouched. */
  .cm-scouts-row {
    grid-template-columns: 92px 72px minmax(0, 1fr) 92px;
  }
  .cm-scouts-cell {
    padding: 4px 3px;
    font-size: 10px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Scout Report detail: the side-by-side green data grid + 130px
     action column can't share a phone — stack them, with the red
     action buttons as a 2×2 block under the grid. */
  .cm-scoutreport-split {
    grid-template-columns: 1fr;
  }
  .cm-scoutreport-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Player factfile: every box gets its own line. The two blue info
     boxes stack, and the seasons area drops its 2fr/1fr two-column
     placement (THIS SEASON / LAST SEASON / MORALE flow in DOM order). */
  .cm-player-info {
    grid-template-columns: 1fr;
  }
  /* The box's 2px navy padding frame is invisible against the dark
     backdrop, so the visible blue read as inset vs the other boxes'
     bright borders — drop it so all left edges line up visually. */
  .cm-player-info-box {
    padding: 0;
  }

  /* Full-width bottom action bars (EXIT / MORE / DONE / ±DIV) share a
     desktop 18px size that dwarfs a phone screen — step the family down
     to match the squad screen's 13px buttons. */
  .cm-ph-exit,
  .cm-tslist-exit,
  .cm-penalty-done,
  .cm-tct-done,
  .cm-ltable-btn,
  .cm-candidates-exit {
    font-size: 13px;
    letter-spacing: 2px;
    padding: 6px 0;
  }

  /* Team accounts. Topbar becomes a wrapping flex row so a long
     "<CLUB> ACCOUNTS" title can never collide with the FULL toggle —
     the button just drops to its own line on narrow phones. */
  .cm-accounts-topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
  }
  .cm-accounts-title {
    font-size: 13px;
    letter-spacing: 1px;
    padding: 4px 10px;
  }
  .cm-accounts-top-btn {
    font-size: 11px;
    letter-spacing: 1px;
    padding: 4px 8px;
  }
  /* Single value column: every item row only ever has income OR
     spending (the other cell carries --empty), so hide the empties and
     let both kinds share one column — blue/+ vs red/− still tells them
     apart. The ITEM heading spans the row (the INCOME/SPENDING heads
     go); the TOTALS row keeps both values, the spending one dropping to
     its own line in the value column. */
  .cm-accounts-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
  .cm-accounts-cell {
    font-size: 11px;
    letter-spacing: 0;
    padding: 2px 6px;
  }
  .cm-accounts-cell--income,
  .cm-accounts-cell--spending {
    padding-left: 10px;
  }
  .cm-accounts-cell--empty {
    display: none;
  }
  .cm-accounts-cell--head.cm-accounts-cell--label {
    grid-column: 1 / -1;
  }
  .cm-accounts-cell--head.cm-accounts-cell--income,
  .cm-accounts-cell--head.cm-accounts-cell--spending {
    display: none;
  }
  .cm-accounts-cell--total.cm-accounts-cell--spending {
    grid-column: 2;
  }

  /* Cup brackets (fixture previews / results / draw viewers): trim the
     desktop paddings + 110px score box so home | v | away genuinely fit
     three-up on a phone; the AG gutters narrow to match. The ties area
     drops its fixed 12-row height so short rounds don't leave a void. */
  .cm-cupbracket-row {
    grid-template-columns: 14px minmax(0, 1fr) 64px minmax(0, 1fr) 14px;
    gap: 2px;
  }
  .cm-cupbracket-row--noag {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  }
  .cm-cupbracket-side {
    padding: 6px 5px;
    font-size: min(10px, 2.7vw);
    gap: 3px;
  }
  /* Division/country tag scales with the viewport (user request): the
     narrower the phone, the smaller the secondary tag, freeing width
     for the team name ("TOTTENHAM" must beat "PREM" to the pixels).
     Applies to the European bracket's country tags too — the --euro
     variant only overrides colours, so this font-size cascades. */
  .cm-cupbracket-tag {
    font-size: min(8px, 2.1vw);
    white-space: nowrap;
  }
  /* 64px at 11px holds a "1 - 0" score, not just the pre-match "v". */
  .cm-cupbracket-v {
    font-size: 11px;
    padding: 6px 0;
  }
  .cm-cupbracket-ag {
    font-size: 13px;
  }
  .cm-cupbracket-round {
    font-size: 12px;
  }
  .cm-cupbracket-ties {
    min-height: 0;
  }
  /* Drop the page-padding filler rows on mobile so the ADVANCE bar sits
     directly under the actual ties (a half-full page no longer leaves a
     big gap before the button). Desktop keeps them to pin the bar at a
     fixed y across pages. */
  .cm-cupbracket-row--filler {
    display: none;
  }

  /* Shared ADVANCE button on full-screen popups. */
  .cm-advance-btn {
    font-size: 12px;
    letter-spacing: 2px;
    padding: 6px 16px;
    min-width: 100px;
    margin-top: 12px;
  }

  /* Fixtures list: the season is split chronologically across three
     columns on desktop — stack them (column 1 holds the earliest third,
     so DOM order IS chronological order). */
  .cm-fixtures-cols {
    grid-template-columns: 1fr;
  }

  /* Player history (HST): the side column of CAREER totals can't share
     a phone with the table — it moves up as a 2×2 row of boxes right
     after the FOOTBALL LEAGUE CAREER SINCE banner, with the history
     table full-width below. */
  .cm-ph-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .cm-ph-totals {
    order: -1;
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
  /* Compact totals: small one-line label, modest value — the desktop
     20px value sized them like hero tiles. */
  .cm-ph-total {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .cm-ph-total-label {
    padding: 1px 0;
  }
  .cm-ph-total-label br {
    display: none;
  }
  .cm-ph-total-label span:last-child:not(:first-child) {
    margin-left: 0.7em;
  }
  .cm-ph-total-value {
    font-size: 13px;
    letter-spacing: 2px;
    padding: 2px 0;
  }
  .cm-ph-table {
    min-height: 0;
  }

  /* STA/BUY/ADD/HST drop below the name bar as a row of small buttons
     (the header wraps; flex-basis 100% forces the tab strip onto its
     own line, killing the desktop margin-left:auto right-alignment). */
  .cm-player-header {
    flex-wrap: wrap;
    gap: 4px;
  }
  .cm-player-header .cm-player-tabs {
    margin-left: 0;
    flex-basis: 100%;
  }
  .cm-player-tab {
    padding: 5px 12px;
    font-size: 12px;
    min-width: 36px;
  }
  .cm-player-seasons {
    grid-template-columns: 1fr;
  }
  .cm-player-season-block--this,
  .cm-player-season-block--last,
  .cm-player-seasons .cm-player-morale {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ── Squad + SquadByPos mobile layout ─────────────
   Kicks in on narrow viewports (phones and small tablets). Bumped
   past the general 600px breakpoint because even 700–800px viewports
   can't comfortably fit the two-column squad layout or the full
   11-column stat grid. */
@media (max-width: 900px) {
  /* Squad: stack the two player columns into one. */
  .cm-squad-list {
    flex-direction: column !important;
  }

  /* Stacked single column: the blank rows that pad each desktop column
     to 13 (squad + reserves) would show as dead space mid-list. */
  .cm-squad-row--empty {
    display: none;
  }

  /* Narrow screens: the desktop 120px pos column starves the name bar
     and long surnames wrap to a second line. The widest pos string
     ("MA RLC", 6 glyphs at 11px + 2px tracking) needs 78px of content,
     so 96px covers it incl. padding/borders; give the freed width to
     the name and trim its 25px side padding (left keeps room for the
     U/C/L status letter at left:6px). nowrap + hidden is the backstop
     for extreme generated surnames. */
  .cm-squad-pos {
    min-width: 0;
    width: 96px;
  }
  .cm-squad-name {
    padding: 1px 6px 1px 22px;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Other-team stat strip (GOAL/DISP/AV R/M/O/M/TEAM): the desktop 15px
     buttons wrap their labels and dwarf the row — match the own-team
     strip's scale and keep every label on one line. */
  .cm-squad-stat--other {
    font-size: 11px;
    padding: 4px 0;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
  }

  /* Shirt-number strip: 15 fixed columns squeeze to ~24px on a phone
     and clip "GK"/"SWP". auto-fit keeps one row while everything fits
     (36px holds "SWP" at the mobile 10px base font) and wraps the tail
     onto a second row only when it doesn't. */
  .cm-squad-nums {
    grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
  }

  /* DONE/DEFS/MIDS/ATTS: the desktop 18px buttons dwarf a phone squad
     list. DEFS/MIDS/ATTS sit in 1fr slots (~75px on a phone) so they
     take a smaller size than DONE, whose 2fr slot (or full-width bar on
     other-team squads) can carry 13px. The locked "Too few picked"
     warning packs 14 glyphs into the wide slot — smaller again. */
  .cm-squad-action {
    font-size: 11px;
    letter-spacing: 1px;
    padding: 8px 0;
  }
  .cm-squad-action--wide,
  .cm-squad-action:only-child {
    font-size: 13px;
    letter-spacing: 2px;
  }
  .cm-squad-action.cm-squad-action--locked {
    font-size: 10px;
    letter-spacing: 0;
  }

  /* Normalize right-column rows to match the left layout
     (tag | name | pos). Children are appended as (name, pos, tag),
     so use `order` to reshuffle auto-placement. */
  .cm-squad-row--right {
    grid-template-columns: 36px 1fr auto;
  }
  .cm-squad-row--right .cm-squad-tag  { order: 1; }
  .cm-squad-row--right .cm-squad-name { order: 2; }
  .cm-squad-row--right .cm-squad-pos  { order: 3; }

  /* Squad tabs: 7 tabs in a single row is too tight. Let them wrap
     and shrink padding/letter-spacing. */
  /* All 7 tabs (TRNS/STAF/LEAG/FIXT/ACCS/INFO/RSRV) in one compact row
     instead of two chunky rows of four — each button is far narrower. */
  .cm-squad-tabs {
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .cm-squad-tab {
    padding: 5px 0;
    letter-spacing: 0;
    font-size: 10px;
  }

  /* SquadByPos on narrow screens: rather than hide skill columns, turn the
     table into a horizontal touch-scroller (same pattern as the transfer /
     news lists). The shirt-tag + name cluster pins to the left while every
     skill column stays visible and slides underneath. */
  .cm-sqp-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cm-sqp-row {
    display: flex;       /* override the desktop grid so sticky can travel */
    gap: 0;
    width: max-content;
    min-width: 100%;
  }
  /* Pinned left cluster: shirt tag (36px) + name (128px). */
  .cm-sqp-tag {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 36px;
  }
  .cm-sqp-name {
    position: sticky;
    left: 36px;
    z-index: 2;
    flex: 0 0 156px;
    padding: 1px 8px 1px 22px;
  }
  /* Header label covers the same pinned width as tag + name (36 + 156). */
  .cm-sqp-head-label {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 192px;
  }
  /* Skill columns: fixed-width flex cells that scroll under the cluster. */
  .cm-sqp-head-stats,
  .cm-sqp-stats {
    display: flex;
    flex: 0 0 auto;
  }
  .cm-sqp-head-stat,
  .cm-sqp-stat {
    flex: 0 0 34px;
  }
}

/* ── Tactics mobile layout ─────────────────────────────
   Side-by-side pitch + roster is unusable below ~760px (each column gets
   ~half a phone's width). Stack the pitch above the roster and shrink the
   pitch shirts + their side arrows so the edge lanes don't clip on a
   narrow pitch. Desktop/tablet-landscape (wider) keep the 2-column grid. */
@media (max-width: 760px) {
  .cm-tct {
    grid-template-columns: 1fr;
    width: min(520px, 98vw);
  }
  /* Club name on top of the stacked layout; suppress the in-roster copy. */
  .cm-tct-title--mobile { display: block; grid-column: 1 / -1; }
  .cm-tct-roster .cm-tct-title { display: none; }
  .cm-tct-field { min-height: 58vh; }
  .cm-tct-fshirt { width: 52px; height: 34px; }
  .cm-tct-fshirt-num { font-size: 11px; }
  .cm-tct-sarr { width: 26px; height: 13px; }
  .cm-tct-sarr--l { left: -20px; }
  .cm-tct-sarr--r { right: -20px; }
  .cm-tct-varr { width: 11px; height: 28px; }
  .cm-tct-varr--up { top: -24px; }
  .cm-tct-varr--dn { bottom: -24px; }
  .cm-tct-done-wrap { width: min(520px, 98vw); }
}

/* ── Club Transfers screen (Trns tab on Squad) ───────── */

.cm-transfers {
  width: min(760px, 98vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 4px;
  gap: 6px;
}

.cm-transfers-header { margin-bottom: 18px; }
.cm-transfers-done   { margin-top:    18px; }

.cm-transfers-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cm-transfers-title {
  background: #444;
  color: var(--white, #fff);
  text-transform: capitalize;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 18px;
  padding: 6px 28px;
  border-top: 3px solid #888;
  border-left: 3px solid #888;
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
}

.cm-transfers-loans {
  position: absolute;
  right: 0;
  background: var(--red, #C03030);
  color: var(--white, #fff);
  font-weight: bold;
  font-size: 18px;
  text-transform: capitalize;
  letter-spacing: 1px;
  padding: 5px 16px;
  border-top: 2px solid var(--red-light, #EE6666);
  border-left: 2px solid var(--red-light, #EE6666);
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
}

.cm-transfers-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cm-transfers-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cm-transfers-col-head {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white, #fff);
  letter-spacing: 2px;
  font-weight: bold;
  padding: 4px 10px;
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #444444;
  border-bottom: 2px solid #444444;
  text-shadow: 0 -1px 0 #000;
}

.cm-transfers-row {
  display: flex;
  flex-direction: column;
  padding: 2px 4px 4px;
}

.cm-transfers-name {
  color: var(--yellow, #FFFF55);
  letter-spacing: 1px;
  text-shadow: 1px 0px 15px black;
}

.cm-transfers-sub {
  color: var(--cyan, #55FFFF);
  letter-spacing: 1px;
  font-size: 13px;
  text-shadow: 1px 0px 15px black;
}

.cm-transfers-empty {
  color: var(--cyan, #55FFFF);
  letter-spacing: 1px;
  padding: 2px 4px 4px;
  text-shadow: 1px 0px 15px black;
}

.cm-transfers-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.cm-transfers-total {
  letter-spacing: 2px;
  padding: 4px 4px 2px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-shadow: 1px 0px 15px black;
}

.cm-transfers-total-label {
  color: var(--white, #fff);
}

.cm-transfers-total-value {
  color: var(--red-light, #FF5555);
}

.cm-transfers-done {
  align-self: stretch;
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  font-weight: bold;
  text-align: center;
  letter-spacing: 3px;
  padding: 6px 12px;
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
  cursor: pointer;
}

.cm-transfers-done:hover { filter: brightness(1.15); }

.cm-transfers-name,
.cm-transfers-sub {
  cursor: pointer;
}
.cm-transfers-name:hover,
.cm-transfers-sub:hover { filter: brightness(1.2); }

/* ── Players Loaned Out screen (LOANS button on Transfers) ──
   Title banner | kit-coloured club chip | table (PLAYER | ON LOAN TO |
   AP | GL | AV R | BACK) | Done. Column blocks are colour-coded the DOS
   way: green name, blue club, light-blue stats. */
.cm-loans {
  width: min(880px, 98vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 4px;
  gap: 10px;
}

.cm-loans-title {
  align-self: center;
  background: #0040A1;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: capitalize;
  padding: 6px 36px;
  border-top: 3px solid #5FA0FF;
  border-left: 3px solid #5FA0FF;
  border-right: 3px solid #001A4D;
  border-bottom: 3px solid #001A4D;
}

.cm-loans-club {
  align-self: flex-start;
  background: #444;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
  padding: 4px 18px;
  border-top: 3px solid #888;
  border-left: 3px solid #888;
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
}

.cm-loans-table {
  display: flex;
  flex-direction: column;
}

.cm-loans-head,
.cm-loans-row {
  display: grid;
  grid-template-columns: 2.4fr 2.4fr 0.7fr 0.7fr 1fr 1.4fr;
}

.cm-loans-h {
  background: var(--red, #C03030);
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 4px 10px;
  border: 1px solid #7A1C1C;
}
.cm-loans-h--stat { text-align: center; }

.cm-loans-cell {
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 4px 10px;
  min-height: 1.4em;
  line-height: 1.4;
  border: 1px solid rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-loans-cell--name { background: #117711; cursor: pointer; }
.cm-loans-cell--club { background: #0040A1; cursor: pointer; }
.cm-loans-cell--stat { background: #2F7FC7; text-align: center; }

.cm-loans-cell--name:hover,
.cm-loans-cell--club:hover { filter: brightness(1.25); }

.cm-loans-done {
  align-self: stretch;
  background: #0040A1;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 3px;
  text-align: center;
  padding: 6px 12px;
  border-top: 3px solid #5FA0FF;
  border-left: 3px solid #5FA0FF;
  border-right: 3px solid #001A4D;
  border-bottom: 3px solid #001A4D;
  cursor: pointer;
}
.cm-loans-done:hover { filter: brightness(1.15); }

/* Club Transfers + Loans on phones. Lives after the base rules above to
   win the source-order tie (the main mobile block sits earlier).
   Transfers: PLAYERS IN above PLAYERS OUT instead of two cramped
   columns (totals stack the same way). Loans: the 6-column table
   becomes a horizontal touch-scroller with PLAYER pinned left — same
   pattern as the shortlist tables (rows flip grid→flex because sticky
   can't travel inside its own grid area). */
@media (max-width: 600px) {
  .cm-transfers-body,
  .cm-transfers-totals {
    grid-template-columns: 1fr;
  }

  .cm-loans-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cm-loans-head,
  .cm-loans-row {
    display: flex;
    width: max-content;
    min-width: 100%;
  }
  .cm-loans-h,
  .cm-loans-cell {
    flex: 0 0 auto;
    padding: 4px 6px;
    font-size: 11px;
    letter-spacing: 0;
  }
  .cm-loans-h--name,
  .cm-loans-cell--name {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 150px;
  }
  .cm-loans-h--club,
  .cm-loans-cell--club {
    width: 156px;
  }
  /* AP / GL / AV R / BACK — widths match the widest content ("16
     WEEKS", "AV R", two-digit stats) at the 11px font. */
  .cm-loans-h--stat,
  .cm-loans-cell--stat {
    width: 62px;
    text-align: center;
  }
  .cm-loans-h--stat:last-child,
  .cm-loans-cell--stat:last-child {
    width: 110px;
  }
  /* The PLAYER header cell is red like the others but must mask
     scrolling content when pinned — it already has an opaque
     background, as do the green name cells. */
  .cm-loans-done {
    font-size: 13px;
    letter-spacing: 2px;
    padding: 6px 8px;
  }
}

/* ── Short List Screen (Find Player > Shortlist) ─────────
   Columns: NAME | POS | CLUB | AP | GL | AV R | VALUE
   Name is yellow when the player would accept a move (playerInterest
   interested=true), white otherwise. Stat columns are green; the VALUE
   column gets a filled green background to match the DOS screen. */
.cm-shortlist {
  width: min(960px, 98vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 4px;
  outline: none;
}

.cm-shortlist-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.cm-shortlist-title {
  grid-column: 2;
  background: #3333AA;
  color: var(--white);
  text-align: center;
  padding: 3px 22px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  border-top: 3px solid #8888EE;
  border-left: 3px solid #8888EE;
  border-right: 3px solid #000044;
  border-bottom: 3px solid #000044;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #5555CC, inset -1px -1px 0 #222277;
  justify-self: center;
}

.cm-shortlist-top-actions {
  grid-column: 3;
  display: flex;
  gap: 4px;
  justify-self: end;
}

.cm-shortlist-top-btn {
  background: linear-gradient(to bottom, #BBBBBB 0%, #888888 100%);
  color: var(--white);
  padding: 4px 14px;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 13px;
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #333333;
  border-bottom: 2px solid #333333;
  text-shadow: 0 -1px 0 #000;
  cursor: default;
}

.cm-shortlist-header {
  display: flex;
  margin-bottom: 10px;
}

/* Club tag on the shortlist screen: smaller than the Approach-screen
   equivalent — padding/fontsize reduced so it matches the DOS proportion. */
.cm-shortlist-header .cm-ts-club {
  padding: 2px 8px;
  font-size: 13px;
  letter-spacing: 1px;
}

.cm-shortlist-table {
  display: flex;
  flex-direction: column;
}

.cm-shortlist-row {
  display: grid;
  /* NAME POS CLUB AP+GL AVR VALUE — AP and GL share one cell. */
  grid-template-columns: 2.2fr 0.7fr 2.1fr 1.3fr 0.9fr 1.4fr;
  gap: 2px;
  margin-bottom: 1px;
}

/* The R chip floats outside the row's grid as an absolutely-positioned
   element, sitting in the gutter to the left of the NAME column. The
   grid layout itself (and column widths) never changes; the chip only
   appears when the table root carries .cm-shortlist--rec. */
.cm-shortlist-row { position: relative; }
.cm-shortlist-cell--rec { display: none; }
/* Specificity needs to beat the alternating-row gradient rule
   (`.cm-shortlist-row:not(.cm-shortlist-row--head):nth-of-type(odd)
   .cm-shortlist-cell` = 0,4,0). Mirror the same `:not(--head)` chain
   plus the chained `cell.cell--rec` to land at 0,5,0. */
.cm-shortlist--rec .cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell.cm-shortlist-cell--rec {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -26px;
  top: 1px;
  bottom: 1px;
  width: 22px;
  padding: 0;
  background: var(--red, #CC0000);
  color: var(--white, #FFFFFF);
  border-top: 2px solid #FF6666;
  border-left: 2px solid #FF6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  box-shadow: none;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 0 -1px 0 #000;
}
.cm-shortlist--rec .cm-shortlist-row--head .cm-shortlist-cell.cm-shortlist-cell--rec {
  display: none;
}
/* Empty rec cells (rows the active scout didn't flag) render nothing —
   no red box hanging in the gutter for non-recommendations. */
.cm-shortlist--rec .cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell.cm-shortlist-cell--rec:empty {
  display: none;
}

/* Bottom strip: red R chip + green/yellow strip mirroring the VALUE
   column palette. */
.cm-shortlist-rec-footer {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.cm-shortlist-rec-footer-flag {
  background: var(--red, #CC0000);
  color: var(--white, #FFFFFF);
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  width: 32px;
  padding: 4px 0;
  border-top: 2px solid #FF6666;
  border-left: 2px solid #FF6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
  text-shadow: 0 -1px 0 #000;
}
.cm-shortlist-rec-footer-text {
  flex: 1;
  background: linear-gradient(to bottom, #00BB00 0%, #007700 100%);
  color: var(--yellow, #FFFF55);
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  padding: 4px 0;
  font-size: 13px;
  border-top: 2px solid #55FF55;
  border-left: 2px solid #55FF55;
  border-right: 2px solid #002200;
  border-bottom: 2px solid #002200;
  text-shadow: 0 -1px 0 #000;
}

/* REC button styling — same grey base as other top-buttons but turns
   into a clickable cursor (top-buttons default to cursor:default). */
.cm-shortlist-top-btn--rec { cursor: pointer; }
.cm-shortlist-top-btn--rec:hover { filter: brightness(1.15); }
.cm-shortlist-top-btn--rec.is-disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Two-value cell (AP + GL): two <span>s centered in each half. */
.cm-shortlist-cell--apgl {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
  padding-left: 4px;
  padding-right: 4px;
}
.cm-shortlist-dual-a,
.cm-shortlist-dual-b {
  flex: 1 1 0;
  text-align: center;
}

.cm-shortlist-cell {
  padding: 3px 14px;
  color: var(--white);
  font-size: 13px;
  letter-spacing: 1px;
  text-shadow: 0 -1px 0 #000;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Header row — white bg + blue text + gap to the first data row. */
.cm-shortlist-row--head {
  margin-bottom: 10px;
}
.cm-shortlist-row--head .cm-shortlist-cell {
  background: var(--white);
  color: var(--blue, #3333AA);
  text-shadow: none;
  font-weight: bold;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
}

/* Data rows — alternating grey gradients matched to the squad-player rows
   (.cm-squad-name / --alt), so the NAME column here reads the same as
   the squad screen. Even rows = darker, odd rows = lighter. */
.cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}
.cm-shortlist-row:not(.cm-shortlist-row--head):nth-of-type(odd) .cm-shortlist-cell {
  background: linear-gradient(to bottom, #C4C4C4 0%, #A0A0A0 100%);
  border-top-color: #DDDDDD;
  border-left-color: #DDDDDD;
  border-right-color: #555555;
  border-bottom-color: #555555;
}

/* Per-column backgrounds override the row default. POS = baby blue,
   CLUB = light blue, AP/GL/AV R = dark blue, VALUE = bright green. */
.cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell--pos,
.cm-shortlist-row:not(.cm-shortlist-row--head):nth-of-type(odd) .cm-shortlist-cell--pos {
  background: #AADDFF;
  color: #112266;
  text-shadow: none;
  font-weight: bold;
  border-top-color: #DDEEFF;
  border-left-color: #DDEEFF;
  border-right-color: #4477AA;
  border-bottom-color: #4477AA;
}

.cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell--club,
.cm-shortlist-row:not(.cm-shortlist-row--head):nth-of-type(odd) .cm-shortlist-cell--club {
  background: #4477DD;
  color: var(--white);
  border-top-color: #88AAEE;
  border-left-color: #88AAEE;
  border-right-color: #112266;
  border-bottom-color: #112266;
}

.cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell--apgl,
.cm-shortlist-row:not(.cm-shortlist-row--head):nth-of-type(odd) .cm-shortlist-cell--apgl,
.cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell--avr,
.cm-shortlist-row:not(.cm-shortlist-row--head):nth-of-type(odd) .cm-shortlist-cell--avr {
  background: #112266;
  color: var(--white);
  border-top-color: #3355AA;
  border-left-color: #3355AA;
  border-right-color: #000022;
  border-bottom-color: #000022;
}

/* VALUE: filled green + yellow text — the team-choice button combo.
   The row's default `text-shadow` muddies the yellow/white contrast
   (DOS rendered it pixel-flat), so clear it on the NAME + VALUE cells. */
.cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell--value,
.cm-shortlist-row:not(.cm-shortlist-row--head):nth-of-type(odd) .cm-shortlist-cell--value {
  background: linear-gradient(to bottom, #00BB00 0%, #007700 100%);
  color: var(--yellow);
  text-shadow: none;
  border-top-color: #55FF55;
  border-left-color: #55FF55;
  border-right-color: #002200;
  border-bottom-color: #002200;
}

.cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell--name {
  text-shadow: none;
}

/* NAME coloring: yellow when interested, white otherwise. */
.cm-shortlist-cell--name-interested {
  color: var(--yellow) !important;
}

/* Selection — light blue bar across the name/default cells; the colored
   columns keep their theming since they're the row's identity. */
.cm-shortlist-row--selected .cm-shortlist-cell--name {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white);
}

.cm-shortlist-row:not(.cm-shortlist-row--head):hover .cm-shortlist-cell {
  filter: brightness(1.15);
}

/* Clickable cells (NAME, CLUB) get a pointer cursor so the affordance is
   obvious — other cells are just row-selection targets. */
.cm-shortlist-cell--link {
  cursor: pointer;
}
.cm-shortlist-cell--link:hover {
  filter: brightness(1.25);
}

/* Bottom DEL | EXIT row. */
.cm-shortlist-actions {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 4px;
  margin-top: 25px;
}

.cm-shortlist-action {
  background: #3333AA;
  color: var(--white);
  text-align: center;
  padding: 6px;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 14px;
  border-top: 3px solid #8888EE;
  border-left: 3px solid #8888EE;
  border-right: 3px solid #000044;
  border-bottom: 3px solid #000044;
  cursor: pointer;
}

.cm-shortlist-action:hover { filter: brightness(1.15); }

/* DEL uses a lighter CGA blue than EXIT (DOS reference). */
.cm-shortlist-action--del {
  background: #4477DD;
  border-top-color: #99BBFF;
  border-left-color: #99BBFF;
  border-right-color: #113377;
  border-bottom-color: #113377;
}

/* DEL armed: invert the blue button — white fill, blue text — so it
   reads as "selected" while the next row click removes that player. */
.cm-shortlist-action--del.cm-shortlist-action--active {
  background: var(--white, #FFFFFF);
  color: #4477DD;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #888888;
  border-bottom-color: #888888;
}

/* Players Abroad — same scaffold as Short List, with a page counter
   ("1/9") stacked above the REC button and the bottom row reversed so
   EXIT takes the wide slot and +SCR the narrow one (DOS reference). */
.cm-shortlist-top-actions--foreign {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.cm-shortlist-top-pages {
  background: var(--white);
  color: var(--blue, #3333AA);
  text-align: center;
  padding: 1px 8px;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 1px;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
}

.cm-shortlist-actions--foreign {
  grid-template-columns: 4fr 1fr;
}

.cm-shortlist-action--scr {
  background: #AA6600;
  border-top-color: #EEAA55;
  border-left-color: #EEAA55;
  border-right-color: #442200;
  border-bottom-color: #442200;
}

.cm-shortlist-actions--foreign .cm-shortlist-action--exit {
  background: var(--red, #CC0000);
  color: var(--white, #FFFFFF);
  border-top-color: var(--red-light, #FF5555);
  border-left-color: var(--red-light, #FF5555);
  border-right-color: #660000;
  border-bottom-color: #660000;
}

/* Old Reports — scout report archive. Reuses the Short List scaffold;
   only the column template, empty state and pager differ. Columns:
   NAME / AGE / POS / ABI POT (stars) / DATE (CLUB dropped for star room). */
.cm-shortlist--reports .cm-shortlist-row {
  grid-template-columns: 2.7fr 0.85fr 1fr 2.6fr 1.3fr;
}

/* AGE — dark-blue numeric cell, matching the AV R / AP GL treatment. */
.cm-shortlist--reports .cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell--age {
  background: #112266;
  color: var(--white);
  border-top-color: #3355AA;
  border-left-color: #3355AA;
  border-right-color: #000022;
  border-bottom-color: #000022;
}

/* ABI POT — two star groups in the dual (AP GL) cell. */
.cm-shortlist--reports .cm-shortlist-cell--apgl { gap: 16px; }
.cm-shortlist--reports .cm-shortlist-cell--apgl .cm-stars {
  transform-origin: center;
}
.cm-shortlist--reports .cm-shortlist-cell--apgl .cm-shortlist-dual-a,
.cm-shortlist--reports .cm-shortlist-cell--apgl .cm-shortlist-dual-b {
  justify-content: center;
}

/* Robust half-star for this table. The shared factfile half uses a
   background-clip:text gradient that clips by the glyph's advance box; the
   ★ sits off-centre in the no-Courier-New fallback font, so a "half" reads
   as a thin sliver. Here each star is a fixed-width, centre-aligned box and
   the half overlays a gold copy clipped to the left 50% via clip-path —
   font-metric independent, so a half always reads as a clean half. */
.cm-shortlist--reports .cm-star {
  position: relative;
  display: inline-block;
  width: 0.6em;
  text-align: center;
}
.cm-shortlist--reports .cm-star--empty { color: #2E4C8F; }
.cm-shortlist--reports .cm-star--half {
  color: #2E4C8F;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.cm-shortlist--reports .cm-star--half::before {
  content: '★';
  position: absolute;
  inset: 0;
  text-align: center;
  color: #FFB020;
  -webkit-text-fill-color: #FFB020;
  clip-path: inset(0 50% 0 0);
}

.cm-shortlist-empty {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white);
  text-align: center;
  padding: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 -1px 0 #000;
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}

.cm-oldrep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 25px;
}

.cm-oldrep-nav {
  flex: 0 0 auto;
  padding-left: 22px;
  padding-right: 22px;
}

.cm-oldrep-pageinfo {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--blue, #3333AA);
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 13px;
  border-top: 3px solid #FFFFFF;
  border-left: 3px solid #FFFFFF;
  border-right: 3px solid #888888;
  border-bottom: 3px solid #888888;
}

.cm-oldrep-actions .cm-shortlist-action--exit {
  flex: 1 1 100%;
}

.cm-shortlist-action.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Shortlist-family tables (Short List / Transfer List / Foreign Players /
   Player Search / Old Reports) on phones: six columns can't share ~370px,
   so the table becomes a horizontal touch-scroller. Rows flip from grid
   to flex with fixed-width cells (sticky needs a flex row: a grid item's
   containing block is its own grid AREA, so sticky could never travel).
   The NAME cell pins to the left edge — its gradient is opaque, so the
   other columns slide underneath; the header row lives in the same
   scroller, so every column heading stays glued to its column. Must sit
   after the base rules above to win the source-order tie. */
@media (max-width: 600px) {
  .cm-shortlist-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cm-shortlist-row,
  .cm-shortlist--reports .cm-shortlist-row {
    display: flex;
    width: max-content;
    min-width: 100%;
  }
  .cm-shortlist-cell {
    flex: 0 0 auto;
    padding: 3px 8px;
    font-size: 11px;
    letter-spacing: 0;
  }
  .cm-shortlist-cell--name {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 128px;
  }
  .cm-shortlist-cell--pos   { width: 56px;  text-align: center; }
  .cm-shortlist-cell--club  { width: 124px; }
  .cm-shortlist-cell--apgl  { width: 84px;  }
  .cm-shortlist-cell--avr   { width: 64px;  text-align: center; }
  .cm-shortlist-cell--value { width: 100px; }
  .cm-shortlist-cell--age   { width: 56px;  text-align: center; }
  /* Old Reports star pairs need a wider dual cell. */
  .cm-shortlist--reports .cm-shortlist-cell--apgl { width: 132px; }

  /* The REC chip normally floats in the gutter left of the table
     (left:-26px), which a scroll container would clip. Pin it inside
     the row over the NAME cell's left edge instead, riding the same
     sticky offset. */
  .cm-shortlist--rec .cm-shortlist-row:not(.cm-shortlist-row--head) .cm-shortlist-cell.cm-shortlist-cell--rec {
    position: sticky;
    left: 0;
    top: auto;
    bottom: auto;
    z-index: 3;
    width: 18px;
    flex: 0 0 18px;
    margin-right: -18px;
    font-size: 11px;
  }
}

/* ── Transfer News Panel ─────────────────────────────
   4-column rolling panel shown at the end of each weekly tick.
   Top bar: WEEK chip (left, grey), centered blue "Transfer News" title.
   Table: red-bar header, data rows interleaving blue (FROM) / magenta (TO)
   and a green-backed FEE cell. */
.cm-news {
  width: min(900px, 98vw);
  margin: 0 auto;
  padding: 6px;
  outline: none;
}

.cm-news-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.cm-news-week {
  background: linear-gradient(to bottom, #BBBBBB 0%, #888888 100%);
  color: var(--white);
  padding: 3px 14px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  white-space: nowrap;   /* keep "Week NN" on one line */
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #333333;
  border-bottom: 2px solid #333333;
  text-shadow: 0 -1px 0 #000;
  justify-self: start;
}

.cm-news-title {
  grid-column: 2;
  background: #3333AA;
  color: var(--white);
  padding: 3px 22px;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 13px;
  text-transform: uppercase;
  border-top: 3px solid #8888EE;
  border-left: 3px solid #8888EE;
  border-right: 3px solid #000044;
  border-bottom: 3px solid #000044;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #5555CC, inset -1px -1px 0 #222277;
  justify-self: center;
}

.cm-news-row {
  display: grid;
  /* PLAYER | FROM | TO | FEE — fee narrowest. */
  grid-template-columns: 2.4fr 2.2fr 2.2fr 1.2fr;
  gap: 2px;
  margin-bottom: 1px;
}

.cm-news-cell {
  padding: 3px 14px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  color: var(--white);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cm-news-row--head {
  margin-bottom: 10px;
}
.cm-news-row--head .cm-news-cell {
  background: var(--red, #C03030);
  color: var(--white);
  font-weight: bold;
  border-top: 2px solid #FF6666;
  border-left: 2px solid #FF6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
}

/* Data cells: NAME grey, FROM blue, TO magenta, FEE green — matches the
   DOS Transfer News panel. */
.cm-news-row:not(.cm-news-row--head) .cm-news-cell--player {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}

.cm-news-row:not(.cm-news-row--head) .cm-news-cell--from {
  background: #2244AA;
  border-top: 2px solid #4466CC;
  border-left: 2px solid #4466CC;
  border-right: 2px solid #111133;
  border-bottom: 2px solid #111133;
}

.cm-news-row:not(.cm-news-row--head) .cm-news-cell--to {
  background: #8822AA;
  border-top: 2px solid #BB55DD;
  border-left: 2px solid #BB55DD;
  border-right: 2px solid #330022;
  border-bottom: 2px solid #330022;
}

.cm-news-cell--link {
  cursor: pointer;
}
.cm-news-cell--link:hover {
  filter: brightness(1.2);
}

/* Transfer News on phones: same treatment as the shortlist tables —
   horizontal touch-scroller (head + body share .cm-news-scroll), rows
   flip grid→flex (sticky can't travel inside a grid area), PLAYER pins
   left with its opaque gradient while FROM/TO/FEE slide underneath. */
@media (max-width: 600px) {
  .cm-news-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cm-news-row {
    display: flex;
    width: max-content;
    min-width: 100%;
  }
  .cm-news-cell {
    flex: 0 0 auto;
    padding: 3px 8px;
    font-size: 11px;
    letter-spacing: 0;
  }
  .cm-news-cell--player,
  /* The sortable-header rule pins position:relative at (0,3,0) for its
     sort triangle; out-specify it so the PLAYER heading sticks too. */
  .cm-news-row--head .cm-news-cell--sortable.cm-news-cell--player {
    position: sticky;
    left: 0;
    z-index: 2;
    /* 160px = 12-glyph "SURNAME F" name at 11px + padding + borders. */
    width: 160px;
  }
  .cm-news-cell--from { width: 140px; }
  .cm-news-cell--to   { width: 140px; }
  .cm-news-cell--fee  { width: 96px;  }
}

/* Clickable sort headers — pointer + a CSS triangle showing the direction.
   Pure-border triangle so it doesn't depend on the pixel font having an
   arrow glyph. Extra right padding reserves room for it. */
.cm-news-row--head .cm-news-cell--sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 22px;
}
.cm-news-row--head .cm-news-cell--sortable:hover {
  filter: brightness(1.15);
}
.cm-news-cell--sorted-asc::after,
.cm-news-cell--sorted-desc::after {
  content: '';
  position: absolute;
  right: 7px;
  top: 50%;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.cm-news-cell--sorted-asc::after  { border-bottom: 6px solid var(--white); }
.cm-news-cell--sorted-desc::after { border-top: 6px solid var(--white); }

.cm-news-row:not(.cm-news-row--head) .cm-news-cell--fee {
  background: linear-gradient(to bottom, #00BB00 0%, #007700 100%);
  color: var(--yellow);
  font-weight: bold;
  border-top: 2px solid #55FF55;
  border-left: 2px solid #55FF55;
  border-right: 2px solid #002200;
  border-bottom: 2px solid #002200;
}

.cm-news-footer {
  margin-top: 18px;
  text-align: center;
  color: var(--yellow);
  letter-spacing: 2px;
  font-size: 13px;
  cursor: pointer;
}

/* Bottom action row on the Transfer News browser — -SCR | DONE | +SCR.
   Reuses the blue .cm-shortlist-action button look from Short List for
   DONE; the two SCR buttons override to a light-blue tint. */
.cm-news-actions-bar {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  gap: 4px;
  margin-top: 50px;
}

.cm-news-actions-bar .cm-news-scr {
  background: #4488CC;
  color: #fff;
  text-shadow: none;
  border-top-color: #77AADD;
  border-left-color: #77AADD;
  border-right-color: #1F4466;
  border-bottom-color: #1F4466;
}

.cm-news-actions-bar .cm-news-scr.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* WEEK chip + +/- step buttons cluster (top-left of the topbar). */
.cm-news-week-cluster {
  display: flex;
  align-items: stretch;
  gap: 4px;
  justify-self: start;
}

.cm-news-week-step {
  background: linear-gradient(to bottom, #BBBBBB 0%, #888888 100%);
  color: var(--white);
  padding: 0 8px;
  font-weight: bold;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid #DDDDDD;
  border-left: 2px solid #DDDDDD;
  border-right: 2px solid #333333;
  border-bottom: 2px solid #333333;
  text-shadow: 0 -1px 0 #000;
  cursor: pointer;
  user-select: none;
}

.cm-news-week-step:hover { filter: brightness(1.15); }

.cm-news-week-step.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* The Find Player menu drops the cm-menu container padding so the bars
   span flush to the body edges, then bumps each item's left padding to
   line the label up with the DONCASTER club tag (which uses 14px tag
   padding). Labels stay left-aligned (default flex-start for bar). The
   top margin gives the club tag breathing room above the button grid. */
.cm-find-player .cm-menu {
  padding: 0;
  margin-top: 18px;
}

/* The 7 non-Exit bars match the darker toggle-item grey used in the
   Normal Search screens, so Find Player and the search steps share a
   palette. Only EXIT departs from that grey (see below). */
.cm-find-player .cm-menu--bar .cm-menu-item {
  /* Center labels (override the bar default flex-start). Short labels like
     "Shortlist"/"Exit" read as left-aligned next to the longer two-word
     ones that fill the bar, so center every label for consistency. */
  justify-content: center;
  padding-left: 14px;
  padding-right: 14px;
  background: linear-gradient(to bottom, #777777 0%, #4E4E4E 100%);
  border-top-color: #BBBBBB;
  border-left-color: #BBBBBB;
  border-right-color: #1A1A1A;
  border-bottom-color: #1A1A1A;
}

/* EXIT (first item) is always rendered as a lighter grey action bar and
   never picks up the blue selected highlight. */
.cm-find-player .cm-menu--bar .cm-menu-item:first-child,
.cm-find-player .cm-menu--bar .cm-menu-item:first-child.cm-menu-item--selected {
  background: linear-gradient(to bottom, #BBBBBB 0%, #888888 100%);
  border-top-color: #DDDDDD;
  border-left-color: #DDDDDD;
  border-right-color: #333333;
  border-bottom-color: #333333;
  color: var(--white);
}

/* Disabled bars — used for scout-only entries (Shortlist, Scout Search,
   Scout Reports) when the user is between jobs. Flattens the gradient,
   dims the label, and blocks the blue selected highlight so keyboard
   navigation past the item is visually obvious. */
.cm-find-player .cm-menu--bar .cm-menu-item.is-disabled,
.cm-find-player .cm-menu--bar .cm-menu-item.is-disabled:hover,
.cm-find-player .cm-menu--bar .cm-menu-item.is-disabled.cm-menu-item--selected {
  background: linear-gradient(to bottom, #555555 0%, #3A3A3A 100%);
  color: #888888;
  text-shadow: 0 -1px 0 #1A1A1A;
  border-top-color: #777777;
  border-left-color: #777777;
  border-right-color: #1A1A1A;
  border-bottom-color: #1A1A1A;
  cursor: not-allowed;
}

/* ── Normal Search options (Find Player > Normal Search) ───────
   Multi-step filter screens. Centered blue title chip, yellow section
   label, 2-col grid of grey toggle bars; selected items flip to a
   light-blue gradient. Last odd item can be marked centered. */
.cm-search {
  width: min(640px, 96vw);
  margin: 0 auto;
  padding: 6px;
  outline: none;
}

.cm-search-titlebar {
  text-align: center;
  margin-bottom: 10px;
}

.cm-search-title {
  display: inline-block;
  background: #3333AA;
  color: var(--white);
  padding: 3px 28px;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
  text-transform: none;
  border-top: 3px solid #8888EE;
  border-left: 3px solid #8888EE;
  border-right: 3px solid #000044;
  border-bottom: 3px solid #000044;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #5555CC, inset -1px -1px 0 #222277;
}

.cm-search-section {
  background: #00AA55;
  color: var(--yellow, #FFFF55);
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
  padding: 4px 14px;
  margin-bottom: 10px;
  display: inline-block;
  border-top: 2px solid #55DD88;
  border-left: 2px solid #55DD88;
  border-right: 2px solid #006633;
  border-bottom: 2px solid #006633;
}

/* Red section header used by the Scout Search > Select Scout step. */
.cm-search-section--red {
  background: var(--red, #CC0000);
  color: #000;
  border-top-color: #FF6666;
  border-left-color: #FF6666;
  border-right-color: #550000;
  border-bottom-color: #550000;
}

.cm-search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 6px;
}

.cm-search-item {
  background: linear-gradient(to bottom, #777777 0%, #4E4E4E 100%);
  color: var(--white);
  padding: 6px 14px;
  font-size: 14px;
  letter-spacing: 1px;
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #1A1A1A;
  border-bottom: 2px solid #1A1A1A;
  text-shadow: 0 -1px 0 #000;
  cursor: pointer;
  user-select: none;
}

.cm-search-item:hover { filter: brightness(1.15); }

.cm-search-item--action {
  background: linear-gradient(to bottom, #BBBBBB 0%, #888888 100%);
  border-top-color: #DDDDDD;
  border-left-color: #DDDDDD;
  border-right-color: #333333;
  border-bottom-color: #333333;
}

.cm-search-item--on {
  background: linear-gradient(to bottom, #99CCFF 0%, #5588DD 100%);
  border-top-color: #CCEEFF;
  border-left-color: #CCEEFF;
  border-right-color: #224477;
  border-bottom-color: #224477;
}

.cm-search-item--centered {
  grid-column: 1 / span 2;
  justify-self: center;
  width: calc(50% - 2px);
}

/* Youth-scout label colour on the Select Scout step. Background stays
   the same dark grey as other scout entries — only the text changes. */
.cm-search-item--youth {
  color: var(--yellow, #FFFF55);
}

/* Phones: filter options never sit side by side — one per line. The
   Exit/Continue action bars (interleaved with the toggles in DOM order
   for the desktop 2-column layout) lift to the top via `order`, so the
   single column reads Exit, Continue, then the filters.
   Same one-per-line treatment for the Transfer Status (STA) menus and
   their .cm-ts-menu siblings — their per-item widths are inline
   `grid-column: span 6` styles from Menu.js, hence the !important. */
@media (max-width: 600px) {
  .cm-search-grid {
    grid-template-columns: 1fr;
  }
  /* Toggles sort by the screen-assigned logical rank (--mob-order);
     Exit/Continue always lead. */
  .cm-search-item {
    order: var(--mob-order, 0);
  }
  .cm-search-item--action {
    order: -1;
  }
  .cm-search-item--centered {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
  .cm-ts-menu .cm-menu-item {
    grid-column: 1 / -1 !important;
  }
}

/* ── Staff Search results table (Own Search) ─────────────
   Paginated list of candidate staff. Mirrors the DOS CM93 "New <Club>
   <Role>" panel: blue title strip, 5-column table (NAME / CLUB / YR /
   CHARACTER / REP) with click-to-appoint rows, bottom -SCR / EXIT /
   +SCR pagination bar. */
.cm-staffsearch {
  width: min(720px, 96vw);
  margin: 0 auto;
  padding: 6px;
  outline: none;
}

.cm-staffsearch-titlebar { text-align: center; margin-bottom: 8px; }

.cm-staffsearch-table {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 50px 1.4fr 1fr;
  gap: 1px;
  background: #000;
  border: 2px solid #000;
}

.cm-staffsearch-cell {
  background: #1B2D6E;
  color: var(--white, #fff);
  padding: 2px 8px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-staffsearch-row--header { display: contents; }

.cm-staffsearch-row--header > .cm-staffsearch-cell {
  background: var(--white, #fff);
  color: #000;
  font-weight: bold;
  text-align: center;
}

.cm-staffsearch-row--data { display: contents; cursor: pointer; }
.cm-staffsearch-row--data:hover > .cm-staffsearch-cell { filter: brightness(1.35); }

/* NAME column: alternating red / orange rows, white text. The
   `--odd` / `--even` classes are assigned in JS at row creation
   (counting *data* rows only — the header div is excluded). */
.cm-staffsearch-cell--name { background: var(--red, #C03030); color: var(--white, #fff); font-weight: bold; }
.cm-staffsearch-row--even > .cm-staffsearch-cell--name { background: #DD7722; }

/* CLUB column: CM93 light-blue cells (the shade re-used by player
   info / league tables) with white text. Each row can override via
   inline style to paint with the candidate's club kit. */
.cm-staffsearch-cell--club { background: #3366CC; color: var(--white, #fff); font-weight: bold; }

/* AGE + CHARACTER: dark-blue cells with white text (CM93 default). */
.cm-staffsearch-cell--age,
.cm-staffsearch-cell--char { background: #1B2D6E; color: var(--white, #fff); }
.cm-staffsearch-cell--age,
.cm-staffsearch-cell--rep { text-align: center; }

/* REP column: green cell, yellow text. */
.cm-staffsearch-cell--rep { background: #006633; color: var(--yellow, #FFFF55); font-weight: bold; }

.cm-staffsearch-empty {
  background: #1B2D6E;
  color: var(--white, #fff);
  padding: 16px;
  text-align: center;
  letter-spacing: 2px;
}

.cm-staffsearch-bottom {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 4px;
  margin-top: 6px;
}

.cm-staffsearch-btn {
  background: linear-gradient(to bottom, #DD8822 0%, #AA5500 100%);
  color: var(--white, #fff);
  padding: 8px 16px;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 14px;
  border-top: 2px solid #FFCC66;
  border-left: 2px solid #FFCC66;
  border-right: 2px solid #663300;
  border-bottom: 2px solid #663300;
  text-shadow: 0 -1px 0 #000;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  user-select: none;
}
.cm-staffsearch-btn:hover { filter: brightness(1.12); }
.cm-staffsearch-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.cm-staffsearch-btn--exit {
  background: var(--red, #C03030);
  color: var(--yellow, #FFFF55);
  border-top-color: #EE6666;
  border-left-color: #EE6666;
  border-right-color: #550000;
  border-bottom-color: #550000;
}

/* ── Player Approach toast ─────────────────────────────────
   Shown after Allow Approach: "<Surname> is keen on the move" /
   "HE SIGNS FOR <CLUB>" / etc. */
.cm-approach-toast {
  position: fixed;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  background: #001144;
  color: var(--yellow, #FFFF55);
  font-weight: bold;
  letter-spacing: 2px;
  padding: 8px 22px;
  font-size: 14px;
  border-top: 3px solid #5577CC;
  border-left: 3px solid #5577CC;
  border-right: 3px solid #000022;
  border-bottom: 3px solid #000022;
  z-index: 250;
  text-shadow: 0 -1px 0 #000;
}

/* ── Transfer Fee auction screen ──────────────────────────
   Mirrors the CM93 DOS layout: red "FEE NEGOTIATIONS" header above a
   dark-green log box; bottom row has the FACTFILE button (left) and
   the asking-price stepper + DONE (right). The overlay covers the
   hub fully so the auction reads as a takeover screen. */
/* Sell-side fee auction reuses the buy-side .cm-asking-price /
   .cm-ap-* styles so both screens render identically. The overlay
   is the only screen-specific bit — full-screen takeover with the
   game-world background, anchored to the top of the viewport. */
.cm-feeauction-overlay {
  position: fixed;
  inset: 0;
  /* Opaque boss93-dark fill (matches the body wallpaper colour) so the hub
     underneath is masked without painting the original CM93 splash art.
     This overlay mounts over a visible #app, so it can't be transparent. */
  background: #161812;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
  z-index: 250;
  overflow: auto;
}
.cm-feeauction { /* width handled by .cm-asking-price */ }

/* ── Bid warning dialog (<AI> bid … on your shortlist) ───── */
.cm-bid-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
}

/* Full-screen variant — used by the Player Approach + Transfer Fee
   flows so the hub underneath is fully hidden, matching the contract
   renewal UI's behaviour. The body background image shows through so
   the screen still reads as part of the game world. The dialog itself
   sits anchored to the top of the screen rather than vertically
   centered, matching the DOS layout. */
.cm-bid-overlay--full {
  /* Opaque boss93-dark fill (matches the body wallpaper colour) so the hub
     underneath is fully masked without the original CM93 splash art. This
     overlay mounts over a visible #app at many sites, so it can't be
     transparent (that would let the hub show through). */
  background: #161812;
  z-index: 250;
  align-items: flex-start;
  padding-top: 40px;
}

.cm-bid-box {
  background: transparent;
  padding: 4px;
  display: flex;
  flex-direction: column;
  width: min(520px, 92vw);
}

.cm-bid-title {
  align-self: center;
  background: #3333AA;
  color: var(--white);
  padding: 3px 22px;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
  border-top: 3px solid #8888EE;
  border-left: 3px solid #8888EE;
  border-right: 3px solid #000044;
  border-bottom: 3px solid #000044;
  box-shadow: 1px 1px 0 #000000, inset 1px 1px 0 #5555CC, inset -1px -1px 0 #222277;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.cm-bid-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px 2px;
}

.cm-bid-club {
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 13px;
  letter-spacing: 1px;
}

.cm-bid-line {
  font-size: 15px;
  letter-spacing: 1px;
  text-shadow: 1px 0 15px #000;
  padding: 1px 0;
}

.cm-bid-line--yellow { color: var(--yellow); }
.cm-bid-line--cyan   { color: var(--cyan); }

/* "<bidder> refused" footer message that flashes inside the dialog
   for 2 s after Refuse Approach, before the screen tears down. */
.cm-bid-refused-note {
  margin-top: 6px;
  color: var(--white, #FFFFFF);
  font-size: 14px;
  letter-spacing: 1px;
  text-shadow: 1px 0 12px #000;
  align-self: flex-start;
}
/* Yellow variant — used by the staff Appoint dialog so the refusal
   line matches the title-screen takeover palette. */
.cm-bid-refused-note--yellow { color: var(--yellow, #FFFF55); }

.cm-bid-menu {
  margin-top: 8px;
  gap: 4px;
  /* Drop the inherited .cm-menu padding so the buttons line up with
     the text rows above (which have no left padding). */
  padding-left: 0;
  padding-right: 0;
}

/* ── Team Stat List (Goalscorers / Discipline / AV R / MOM) ── */

.cm-tslist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  width: min(960px, 98vw);
  margin: 0 auto;
  font-weight: bold;
}

.cm-tslist-title {
  align-self: center;
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  padding: 4px 24px;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
}

.cm-tslist-team {
  align-self: flex-start;
  background: var(--red, #CC0000);
  color: var(--white, #fff);
  padding: 4px 20px;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-top: 2px solid #FFDD33;
  border-left: 2px solid #FFDD33;
  border-right: 2px solid #660000;
  border-bottom: 2px solid #660000;
}

.cm-tslist-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cm-tslist-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cm-tslist-row {
  display: grid;
  grid-template-columns: 36px 1fr 62px;
  gap: 1px;
}

.cm-tslist-rank {
  background: #00AA55;
  color: var(--yellow, #FFFF55);
  text-align: center;
  padding: 1px 0;
  letter-spacing: 1px;
  font-size: 12px;
  border-top: 2px solid #55DD88;
  border-left: 2px solid #55DD88;
  border-right: 2px solid #006633;
  border-bottom: 2px solid #006633;
}

.cm-tslist-name {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white, #fff);
  padding: 1px 10px 1px 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}

/* Alternating lighter row, mirroring .cm-squad-name--alt and the
   transfer-listing zebra so the name column reads consistently. */
.cm-tslist-name--alt {
  background: linear-gradient(to bottom, #C4C4C4 0%, #A0A0A0 100%);
  border-top-color: #DDDDDD;
  border-left-color: #DDDDDD;
}

.cm-tslist-stat {
  background: var(--red, #CC0000);
  color: var(--white, #fff);
  text-align: center;
  padding: 2px 0;
  letter-spacing: 1px;
  font-size: 12px;
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
}

/* ── Award Table (Top Goalscorers / Worst Discipline / ...) ── */

.cm-award {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  width: min(960px, 98vw);
  margin: 0 auto;
  font-weight: bold;
}

.cm-award-title {
  align-self: center;
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  padding: 4px 24px;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
}

/* Brown/orange division chip — left-aligned, black text. */
.cm-award-div {
  align-self: flex-start;
  background: #C8841C;
  color: #000;
  padding: 4px 20px;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-top: 2px solid #FFCC55;
  border-left: 2px solid #FFCC55;
  border-right: 2px solid #553300;
  border-bottom: 2px solid #553300;
}

.cm-award-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cm-award-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cm-award-row {
  display: grid;
  grid-template-columns: 36px 1fr 62px;
  gap: 1px;
}

.cm-award-rank {
  background: #00AA55;
  color: var(--yellow, #FFFF55);
  text-align: center;
  padding: 1px 0;
  letter-spacing: 1px;
  font-size: 12px;
  border-top: 2px solid #55DD88;
  border-left: 2px solid #55DD88;
  border-right: 2px solid #006633;
  border-bottom: 2px solid #006633;
}

/* Default (Divisions 1–3): alternating light/dark blue, mirroring the
   league-table zebra so the name column reads like the parent screen. */
.cm-award-name {
  background: #3333AA;
  color: var(--white, #fff);
  padding: 1px 10px 1px 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  border-top: 2px solid #6666CC;
  border-left: 2px solid #6666CC;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
  display: flex;
  align-items: center;
}

.cm-award-name--alt {
  background: #000066;
  border-top-color: #3333AA;
  border-left-color: #3333AA;
}

/* FA Premier (division 0): grey gradients matching the league-table
   premier rows (no zebra colour swap, only light/dark gradient). */
.cm-award--premier .cm-award-name {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white, #fff);
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}

.cm-award--premier .cm-award-name--alt {
  background: linear-gradient(to bottom, #C4C4C4 0%, #A0A0A0 100%);
  border-top-color: #DDDDDD;
  border-left-color: #DDDDDD;
}

/* Highlight rows for players belonging to the user's club (or loaned in). */
.cm-award-name.cm-award-name--mine,
.cm-award--premier .cm-award-name.cm-award-name--mine {
  background: #00AA55;
  color: var(--white, #fff);
  border-top-color: #44CC88;
  border-left-color: #44CC88;
  border-right-color: #006633;
  border-bottom-color: #006633;
}

.cm-award-stat {
  background: var(--red, #CC0000);
  color: var(--white, #fff);
  text-align: center;
  padding: 2px 0;
  letter-spacing: 1px;
  font-size: 12px;
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
}

.cm-award-actions {
  margin-top: 4px;
}

.cm-tslist-exit {
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white, #fff);
  text-align: center;
  padding: 8px 0;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  border-top: 3px solid #8888FF;
  border-left: 3px solid #8888FF;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
  cursor: pointer;
  margin-top: 4px;
}

/* Empty-state bar for the stat lists — desktop renders its 30 blank
   padded slots instead, so this only shows on phones (where the blank
   rows are hidden and a no-entries list would otherwise be bare). */
.cm-tslist-none {
  display: none;
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: var(--white, #fff);
  text-align: center;
  padding: 4px 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  border-top: 2px solid #BBBBBB;
  border-left: 2px solid #BBBBBB;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}

/* Stat lists (GLS/DSP/AVR/MOM + division award tables) on phones: two
   15-row columns side by side squeeze the names — run a single
   continuous column instead, and drop the blank rows that pad each
   desktop column so they don't leave a gap mid-list. Lives here (not in
   the main mobile block) because the base rules above come later in the
   file and would win the source-order tie. */
@media (max-width: 600px) {
  .cm-tslist-body,
  .cm-award-body {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .cm-tslist-row--empty,
  .cm-award-row--empty {
    display: none;
  }
  .cm-tslist-none {
    display: block;
  }
}

/* ── Match Report Screen ────────────────────────── */

.cm-box--mreport {
  width: min(960px, 98vw);
}

.cm-mreport {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  font-weight: bold;
}
.cm-mreport:focus { outline: none; }

/* Header: two side wrappers, one per team. Each wraps a content-hugging
 * team chip with the score in a column whose width and internal
 * alignment matches the rating cell below — so the score's units digit
 * sits at the same x as every rating's units digit. */
.cm-mreport-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cm-mreport-side-head {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 1px;
  align-items: center;
}

.cm-mreport-team {
  padding: 4px 32px;
  letter-spacing: 2px;
  font-size: 20px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  text-align: center;
  border: none;
  justify-self: start;
}

.cm-mreport-team--home {
  background: var(--yellow, #FFFF55);
  color: #000;
  text-shadow: none;
}

.cm-mreport-team--away {
  background: var(--red, #C03030);
  color: var(--white, #fff);
}

/* Mirror the rating cell's two-column split so the score's units digit
 * aligns with the rating glyph below. The half-glyph offset is larger
 * here because the score uses a 20px font (vs. 13px for ratings) — a
 * square pixel font scales its glyph width with font-size. */
.cm-mreport-score {
  display: grid;
  grid-template-columns: calc(50% + 10px) 1fr;
  align-items: center;
  letter-spacing: 1px;
}

.cm-mreport-score-num {
  color: var(--white, #fff);
  font-size: 20px;
  text-align: right;
  padding-right: 0;
}

/* Half-time strip — light-blue chip with white text, under the home name. */
.cm-mreport-ht {
  align-self: flex-start;
  background: #4488CC;
  color: var(--white, #fff);
  padding: 1px 10px;
  letter-spacing: 2px;
  font-size: 12px;
  border-top: 2px solid #77BBEE;
  border-left: 2px solid #77BBEE;
  border-right: 2px solid #225588;
  border-bottom: 2px solid #225588;
}

.cm-mreport-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cm-mreport-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Player row: shirt / name / rating. Shirt + rating cells are sized to
 * match the CM93 Match Statistics layout (chunky shirt chip, wide rating
 * chip with a fixed slot for goals so the rating glyph never shifts).
 * Rows alternate orange/red shirt and light/dark gray name; the rating
 * cell is a single solid green. */
.cm-mreport-row {
  display: grid;
  grid-template-columns: 64px 1fr 90px;
  gap: 1px;
  align-items: stretch;
}

.cm-mreport-shirt {
  background: var(--red, #C03030);
  color: var(--white, #fff);
  text-align: center;
  font-size: 11px;
  padding: 2px 0;
  letter-spacing: 1px;
  border-top: 2px solid #EE6666;
  border-left: 2px solid #EE6666;
  border-right: 2px solid #550000;
  border-bottom: 2px solid #550000;
}

/* Odd rows: orange shirt chip (matches the CM93 alternation). */
.cm-mreport-shirt--alt {
  background: #CC6600;
  border-top-color: #FFAA44;
  border-left-color: #FFAA44;
  border-right-color: #663300;
  border-bottom-color: #663300;
}

.cm-mreport-name {
  background: #888888;
  color: var(--white, #fff);
  padding: 2px 8px 2px 22px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 11px;
  border-top: 2px solid #AAAAAA;
  border-left: 2px solid #AAAAAA;
  border-right: 2px solid #444444;
  border-bottom: 2px solid #444444;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-mreport-name--alt {
  background: #B0B0B0;
  border-top-color: #D0D0D0;
  border-left-color: #D0D0D0;
  border-right-color: #606060;
  border-bottom-color: #606060;
}

/* Substitutes (12 / 14 / GK) — same gray chip, yellow name text. */
.cm-mreport-name--sub { color: var(--yellow, #FFFF55); }

/* Reserve player called up from the youth pool — tinted blue so the
   report makes the source obvious at a glance. */
.cm-mreport-name--reserve { color: #1133AA; }

/* MOM row: white chip with black text, mirroring the original. */
.cm-mreport-name--mom {
  background: var(--white, #fff);
  color: #000;
  text-shadow: none;
  border-top-color: #FFFFFF;
  border-left-color: #FFFFFF;
  border-right-color: #888888;
  border-bottom-color: #888888;
}

.cm-mreport-itag {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: bold;
  padding: 0 2px;
}

.cm-mreport-tag--cap { color: var(--yellow, #FFFF55); }
.cm-mreport-tag--bk  { color: var(--yellow, #FFFF55); }
.cm-mreport-tag--so  { color: #AA0000; }
.cm-mreport-tag--ij  { color: #AA0000; }

/* MOM row uses a white name chip — yellow C / BK tags need an outline
 * to keep them readable against it. */
.cm-mreport-name--mom .cm-mreport-tag--cap,
.cm-mreport-name--mom .cm-mreport-tag--bk {
  text-shadow: 0 0 black;
}

/* Rating cell: solid CM93 green, two columns. The rating glyph right-
 * aligns in the left column, but the column boundary sits half a char
 * past the cell's geometric centre so the *units* digit lands dead-
 * centre — "9" alone and the "0" of "10" both sit on the cell's middle
 * x. The goal count begins at a fixed x in the right column with the
 * exact same glyph metrics as the rating, only painted yellow. */
.cm-mreport-stat {
  background: #00AA55;
  color: var(--white, #fff);
  font-size: 13px;
  letter-spacing: 1px;
  border-top: 2px solid #66DD99;
  border-left: 2px solid #66DD99;
  border-right: 2px solid #006633;
  border-bottom: 2px solid #006633;
  display: grid;
  grid-template-columns: calc(50% + 7px) 1fr;
  align-items: center;
  padding: 2px 0;
}

.cm-mreport-stat--empty .cm-mreport-rating { color: #DDDDDD; }

.cm-mreport-rating {
  text-align: right;
  padding-right: 0;
}

.cm-mreport-goals {
  text-align: left;
  padding-left: 8px;
  color: var(--yellow, #FFFF55);
}

/* Footer block under each column — defence/mid/attack/attempts/attendance */
.cm-mreport-foot {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
}

.cm-mreport-foot-row {
  /* Fixed 3-col grid so the centre dash lands at the same x on every
   * row regardless of label length, sized so the dash is visually next
   * to the value (right-hand) rather than floating mid-row. */
  display: grid;
  grid-template-columns: 1fr 16px 56px;
  gap: 6px;
  background: #3333AA;
  color: var(--white, #fff);
  padding: 2px 10px;
  letter-spacing: 2px;
  font-size: 11px;
  border-top: 2px solid #6666CC;
  border-left: 2px solid #6666CC;
  border-right: 2px solid #000044;
  border-bottom: 2px solid #000044;
}

/* ATTENDANCE — light-blue pop-out row, white text. Mirrors the HT chip. */
.cm-mreport-foot-row--att {
  background: #4488CC;
  color: var(--white, #fff);
  border-top-color: #77BBEE;
  border-left-color: #77BBEE;
  border-right-color: #225588;
  border-bottom-color: #225588;
}

.cm-mreport-foot-label { text-transform: uppercase; text-align: left; }
.cm-mreport-foot-dash  { text-align: center; opacity: 0.6; }
.cm-mreport-foot-value { text-align: right; }

/* ── Mobile match report ────────────────────────────────────────────
   Toggled by matchReportScreen's isMobile gate (root.classList.add
   'cm-mreport--mobile') — deliberately NOT an @media rule: this app's CSS
   `zoom` distorts width media queries, so the JS gate is the source of
   truth. The teams are already stacked vertically (full width each) by the
   JS branch; here we only shrink the desktop-sized header chips, player
   rows and footer so nothing overflows a phone. Desktop is untouched. */
.cm-mreport--mobile .cm-mreport-team {
  padding: 4px 12px;
  font-size: 14px;
  letter-spacing: 1px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-mreport--mobile .cm-mreport-side-head { grid-template-columns: 1fr 56px; }
.cm-mreport--mobile .cm-mreport-score { grid-template-columns: calc(50% + 7px) 1fr; }
.cm-mreport--mobile .cm-mreport-score-num { font-size: 15px; }
.cm-mreport--mobile .cm-mreport-row { grid-template-columns: 40px 1fr 58px; }
.cm-mreport--mobile .cm-mreport-shirt {
  font-size: 9px;
  letter-spacing: 0;
  padding: 2px 0;
}
.cm-mreport--mobile .cm-mreport-name {
  padding: 2px 6px 2px 8px;
  font-size: 9px;
  letter-spacing: 0;
  gap: 4px;
}
.cm-mreport--mobile .cm-mreport-itag { font-size: 8px; letter-spacing: 0; }
.cm-mreport--mobile .cm-mreport-stat {
  font-size: 11px;
  letter-spacing: 0;
  grid-template-columns: calc(50% + 5px) 1fr;
}
.cm-mreport--mobile .cm-mreport-goals { padding-left: 4px; }
.cm-mreport--mobile .cm-mreport-foot-row {
  grid-template-columns: 1fr 14px 46px;
  gap: 4px;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 2px 6px;
}

/* ── Past Winners Screen ────────────────────────────
   Two-pane layout: data table (left) + competition selector (right),
   full-width DONE bar below. Matches the DOS Past Winners screen: yellow
   header bar, yellow column heads, blue year column, green winner/runner
   cells (alternating shades), red selector buttons with orange for the
   currently-selected competition. */
.cm-box--pastwin .cm-box-body { padding: 4px 6px; }

.cm-pastwin {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(820px, 98vw);
  margin: 0 auto;
  outline: none;
}

.cm-pastwin-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 6px;
  align-items: stretch;
}

.cm-pastwin-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cm-pastwin-header {
  background: var(--white, #FFFFFF);
  color: #000;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 12px;
  padding: 3px 8px;
  text-transform: uppercase;
  border-top:    2px solid #FFFFFF;
  border-left:   2px solid #FFFFFF;
  border-right:  2px solid #777777;
  border-bottom: 2px solid #777777;
}

.cm-pastwin-grid {
  display: grid;
  grid-template-columns: 0.7fr 2.2fr 2.2fr;
  gap: 1px;
  background: #112266;
  margin-top: 2px;
}

.cm-pastwin-cell {
  padding: 2px 8px;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.5;
  min-height: 20px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top:    2px solid rgba(255,255,255,0.35);
  border-left:   2px solid rgba(255,255,255,0.35);
  border-right:  2px solid rgba(0,0,0,0.35);
  border-bottom: 2px solid rgba(0,0,0,0.35);
}

.cm-pastwin-cell--head {
  background: var(--yellow, #FFFF55);
  color: #000;
  text-align: center;
  border-top-color: #FFFFAA;
  border-left-color: #FFFFAA;
  border-right-color: #888833;
  border-bottom-color: #888833;
}

.cm-pastwin-cell--year {
  background: #3366CC;
  color: var(--white, #FFFFFF);
  text-align: center;
  border-top-color: #6699EE;
  border-left-color: #6699EE;
  border-right-color: #112266;
  border-bottom-color: #112266;
}

.cm-pastwin-cell--team {
  background: #00AA33;
  color: var(--white, #FFFFFF);
  text-align: left;
  border-top-color: #33DD66;
  border-left-color: #33DD66;
  border-right-color: #005500;
  border-bottom-color: #005500;
}

.cm-pastwin-cell--team.cm-pastwin-cell--alt {
  background: #008822;
  border-top-color: #22BB55;
  border-left-color: #22BB55;
  border-right-color: #003311;
  border-bottom-color: #003311;
}

.cm-pastwin-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cm-pastwin-sidebtn {
  flex: 1 1 0;
  min-height: 0;
  background: var(--red, #CC0000);
  color: var(--white, #fff);
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  padding: 4px 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: pre-line;
  line-height: 1.15;
  border-top:    2px solid #FF5555;
  border-left:   2px solid #FF5555;
  border-right:  2px solid #550000;
  border-bottom: 2px solid #550000;
}

.cm-pastwin-sidebtn:hover { filter: brightness(1.1); }
.cm-pastwin-sidebtn:focus { outline: none; filter: brightness(1.15); }

.cm-pastwin-sidebtn--sel {
  background: #DD6600;
  border-top-color: #FF9933;
  border-left-color: #FF9933;
  border-right-color: #663300;
  border-bottom-color: #663300;
}

.cm-pastwin-done {
  margin-top: 2px;
}

/* ── Monthly Awards ───────────────────────────────
   Three stacked panels (Manager / Senior Player / Young Player), each
   with one row per division (FA Premier, Div 1, Div 2, Div 3). The DOS
   layout uses a 4-column grid per panel:
     division-label | name | pts-or-rating | club
   plus a 3-column header strip:
     panel-title | pts/avr | club. */
.cm-mawards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  width: min(820px, 98vw);
  font-weight: bold;
  outline: none;
}

.cm-mawards-title {
  align-self: center;
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white);
  padding: 4px 32px;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  border-top: 2px solid #8888FF;
  border-left: 2px solid #8888FF;
  border-right: 2px solid #111166;
  border-bottom: 2px solid #111166;
}

.cm-mawards-panel {
  display: grid;
  grid-template-columns: 160px minmax(180px, 1fr) 88px 1fr;
  column-gap: 2px;
  row-gap: 2px;
}

.cm-mawards-head,
.cm-mawards-head--val,
.cm-mawards-head--club {
  background: var(--white);
  color: #000;
  padding: 3px 10px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
  display: flex;
  align-items: center;
}

.cm-mawards-head {
  grid-column: 1 / span 2;
  letter-spacing: 1px;
}

.cm-mawards-head--val {
  background: var(--yellow);
  justify-content: center;
}

.cm-mawards-head--club {
  background: var(--yellow);
  justify-content: flex-start;
}

/* Division-label cell: division name in division-specific colour text on
   the gray DOS background. */
.cm-mawards-divtag {
  background: linear-gradient(to bottom, #BBBBBB 0%, #888888 100%);
  color: #FFFFFF;
  padding: 3px 10px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #555555;
}

/* Name / value / club cells — division-specific palettes. */
.cm-mawards-name,
.cm-mawards-val,
.cm-mawards-club {
  padding: 3px 10px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.cm-mawards-val {
  justify-content: center;
  background: #DD6600;
  color: var(--white);
}

.cm-mawards-club {
  background: var(--red);
  color: var(--white);
}

/* All division name bars share the same sky-blue palette. Compound
   selectors (no space) since both classes sit on the same div. */
.cm-mawards-name.cm-mawards-row--div0,
.cm-mawards-name.cm-mawards-row--div1,
.cm-mawards-name.cm-mawards-row--div2,
.cm-mawards-name.cm-mawards-row--div3 {
  background: #0284C7;
  color: var(--white);
}

/* User-club highlight on the name cell. */
.cm-mawards-name--mine {
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%) !important;
  color: var(--white);
}

/* Empty name cell (no winner for this division) — overrides the division
   palette above. Compound on each div class so specificity beats the
   div0/1/2/3 rules. */
.cm-mawards-name.cm-mawards-empty,
.cm-mawards-name.cm-mawards-row--div0.cm-mawards-empty,
.cm-mawards-name.cm-mawards-row--div1.cm-mawards-empty,
.cm-mawards-name.cm-mawards-row--div2.cm-mawards-empty,
.cm-mawards-name.cm-mawards-row--div3.cm-mawards-empty {
  background: #0284C7;
  color: var(--white);
}

.cm-mawards-note {
  align-self: center;
  color: var(--yellow);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 8px;
  text-align: center;
}

/* Empty-state layout: stretch the body to fill most of the viewport so
   the note sits in the middle, with the EXIT bar pinned to the bottom.
   Vertical breathing room mirrors the DOS feel where the screen filled
   the frame even when nothing was on it. */
.cm-mawards.cm-mawards--empty {
  min-height: 70vh;
  justify-content: center;
}

.cm-mawards.cm-mawards--empty .cm-mawards-note {
  margin: auto 0;
  font-size: 14px;
  letter-spacing: 2px;
}

.cm-mawards.cm-mawards--empty .cm-ltable-actions {
  margin-top: auto;
}

.cm-mawards-done {
  margin-top: 4px;
  background: linear-gradient(to bottom, #5555FF 0%, #3333CC 100%);
  color: var(--white);
  text-align: center;
  padding: 8px 0;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  border-top: 3px solid #8888FF;
  border-left: 3px solid #8888FF;
  border-right: 3px solid #111166;
  border-bottom: 3px solid #111166;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  width: 100%;
}

.cm-mawards-done:focus { outline: none; filter: brightness(1.1); }

/* ── International Squad screen ─────────────────────────────────────
   Two NAME | CLUB columns of 11 rows each (22-man squad). Red header
   strip across all four columns; country tag in the top-left painted
   with the national palette; user-club players highlighted green in
   both cells. Wide blue EXIT bar at the bottom. */
.cm-ntsquad {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 0 0;
  outline: none;
}

.cm-ntsquad-tag {
  align-self: flex-start;
  background: #0040A1;     /* overridden inline per-country */
  color: #FFFFFF;
  padding: 4px 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: none;
  font-size: 14px;
  border-top:    2px solid #6688CC;
  border-left:   2px solid #6688CC;
  border-right:  2px solid #001144;
  border-bottom: 2px solid #001144;
  box-shadow: 1px 1px 0 #000;
  min-width: 130px;
  text-align: center;
}

.cm-ntsquad-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(170px, 1.4fr) minmax(180px, 1.1fr) minmax(170px, 1.4fr);
  column-gap: 6px;
  row-gap: 2px;
}

.cm-ntsquad-head {
  background: var(--red);
  color: var(--white);
  padding: 3px 8px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  font-size: 12px;
  border-top:    2px solid #FF5555;
  border-left:   2px solid #FF5555;
  border-right:  2px solid #550000;
  border-bottom: 2px solid #550000;
  margin-bottom: 4px;
}

.cm-ntsquad-name {
  background: linear-gradient(to bottom, #9E9E9E 0%, #6E6E6E 100%);
  color: #FFFFFF;
  padding: 2px 8px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top:    2px solid #DDDDDD;
  border-left:   2px solid #DDDDDD;
  border-right:  2px solid #262626;
  border-bottom: 2px solid #262626;
}

.cm-ntsquad-club {
  background: #0040A1;       /* overridden inline per-country */
  color: #FFFFFF;
  padding: 2px 8px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 -1px 0 #000;
  border-top:    2px solid #6688CC;
  border-left:   2px solid #6688CC;
  border-right:  2px solid #001144;
  border-bottom: 2px solid #001144;
}

.cm-ntsquad-name--mine {
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%);
  color: #FFFFFF;
  border-top-color: #AAFFAA;
  border-left-color: #AAFFAA;
  border-right-color: #003300;
  border-bottom-color: #003300;
}

.cm-ntsquad-exit {
  margin-top: 10px;
  background: #0040A1;
  color: #FFFFFF;
  padding: 6px 0;
  font-weight: bold;
  letter-spacing: 3px;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  border-top:    3px solid #6688CC;
  border-left:   3px solid #6688CC;
  border-right:  3px solid #001144;
  border-bottom: 3px solid #001144;
  cursor: pointer;
  user-select: none;
}
.cm-ntsquad-exit:hover { filter: brightness(1.1); }

/* ── Yearly Awards (NEW SEASON, step 1) ─────────────────────────── */
.cm-ya {
  width: min(960px, 96vw);
  margin: 24px auto;
  outline: none;
  /* Transparent: the Manager90s watermark backdrop shows through behind the
     award sections (was the original CM93 splash art). */
  padding: 16px;
  border: 2px solid #000;
}
.cm-ya-section {
  background: #888;
  border: 2px solid #000;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr;
}
.cm-ya-row {
  display: grid;
  grid-template-columns: 180px 1fr 110px 1fr;
  border-top: 1px solid #000;
}
.cm-ya-row:first-child { border-top: none; }
.cm-ya-row--head {
  background: #FFFFFF;
  color: #000000;
  font-weight: bold;
  text-transform: uppercase;
}
.cm-ya-cell {
  padding: 4px 8px;
  font-size: 12px;
  letter-spacing: 1px;
}
.cm-ya-cell--head {
  color: #000;
  font-weight: bold;
}
.cm-ya-cell--div {
  color: #DDDDDD;
  text-transform: uppercase;
}
.cm-ya-cell--name {
  background: var(--dark-blue);
  color: var(--white);
  text-transform: uppercase;
}
.cm-ya-cell--val {
  background: #CC5500;
  color: var(--white);
  text-align: center;
}
.cm-ya-cell--club {
  background: var(--red);
  color: var(--white);
  text-transform: uppercase;
}
.cm-ya-cell--title {
  background: #FFFFFF;
  color: #000;
}
.cm-ya-row--user .cm-ya-cell--name {
  background: linear-gradient(to bottom, #55DD55 0%, #00AA00 100%);
}
.cm-ya-done {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: var(--dark-blue);
  color: var(--white);
  border-top:    3px solid #6688CC;
  border-left:   3px solid #6688CC;
  border-right:  3px solid #001144;
  border-bottom: 3px solid #001144;
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 4px;
  padding: 10px 0;
  text-shadow: 0 -1px 0 #000;
  cursor: pointer;
  text-transform: uppercase;
}
.cm-ya-done:hover { filter: brightness(1.1); }

/* ── Game Environment progress UI (NEW SEASON, step 2) ──────────── */
.cm-genv {
  width: min(720px, 94vw);
  margin: 32px auto;
  background: #888;
  border: 3px solid #FFFFFF;
  padding: 16px;
  outline: none;
}
.cm-genv-title {
  background: var(--red);
  color: var(--white);
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 14px;
  padding: 10px 6px;
  border: 2px solid #000;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  line-height: 1.4;
}
.cm-genv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.cm-genv-tile {
  background: var(--dark-blue);
  color: var(--white);
  text-align: center;
  padding: 14px 6px;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-top:    2px solid #6688CC;
  border-left:   2px solid #6688CC;
  border-right:  2px solid #001144;
  border-bottom: 2px solid #001144;
  text-shadow: 0 -1px 0 #000;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-genv-tile--active {
  background: #CC5500;
  border-top-color:    #FFAA55;
  border-left-color:   #FFAA55;
  border-right-color:  #441100;
  border-bottom-color: #441100;
}
.cm-genv-tile--done {
  /* Same blue as the default tile — completed stages don't visually
     distinguish themselves, only the active one does. Matches the
     screenshot's "all blue except the orange current" pattern. */
}
.cm-genv-progress-label {
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  margin-top: 8px;
}
.cm-genv-progress-track {
  background: #CCCCCC;
  height: 16px;
  border-top:    2px solid #555555;
  border-left:   2px solid #555555;
  border-right:  2px solid #EEEEEE;
  border-bottom: 2px solid #EEEEEE;
  overflow: hidden;
  margin-top: 4px;
}
.cm-genv-progress-fill {
  background: #FFFFFF;
  height: 100%;
  width: 0%;
  transition: width 0.3s ease-out;
}

/* ── AI Transfer Log (debug screen) ── */
.cm-box--txlog { width: 100%; }   /* fill #app (respects its 8px padding) instead of 98vw, which overflowed */
.cm-txlog { display: flex; flex-direction: column; gap: 3px; padding: 4px; font-size: 13px; outline: none; min-width: 0; max-width: 100%; }
.cm-txlog-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.cm-txlog-count { color: var(--yellow, #FFFF55); }
.cm-txlog-btns { display: flex; gap: 6px; }
.cm-txlog-clear, .cm-txlog-reload, .cm-txlog-done {
  font: inherit; color: #FFFFFF; font-weight: bold;
  border: 1px solid #FFFFFF; padding: 1px 10px; cursor: pointer;
}
.cm-txlog-clear  { background: #8B0000; }
.cm-txlog-clear:hover  { background: #B00000; }
.cm-txlog-reload { background: #0040A1; }
.cm-txlog-reload:hover { background: #0055CC; }
.cm-txlog-done   { background: #1F7A1F; }
.cm-txlog-done:hover   { background: #2A9A2A; }
.cm-txlog-list { max-height: 72vh; overflow-y: auto; overflow-x: auto; }
.cm-txlog-row {
  display: grid;
  /* Flexible columns use min 0 so they shrink (cells ellipsis) instead of
     forcing the grid wider than the screen; only the fixed columns set the
     floor. overflow-x on the list is the final safety on heavy zoom. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 95px minmax(0, 2.2fr) 170px;
  gap: 10px; padding: 1px 6px; white-space: nowrap;
}
.cm-txlog-row--head {
  position: sticky; top: 0; background: #000000;
  color: var(--cyan, #55FFFF); border-bottom: 1px solid #555555; z-index: 1;
}
.cm-txlog-row--debt { color: var(--red, #FF5555); }
.cm-txlog-c { overflow: hidden; text-overflow: ellipsis; }
.cm-txlog-c--fee, .cm-txlog-c--cash { text-align: right; }
.cm-txlog-empty { padding: 12px 4px; color: #AAAAAA; }

/* ── Table headers never wrap ─────────────────────────
   A column heading splitting onto a second line breaks the DOS look and
   throws off the header row height (most visible on narrow/mobile
   widths). One blanket rule for every table-header class; sits at the
   end of the file so it wins source-order ties. Long labels clip per
   each table's own overflow rules instead of wrapping. */
.cm-table-head,
.cm-grouptable-row--head > span,
.cm-team-header,
.cm-sqp-head-label,
.cm-sqp-head-stat,
.cm-clubinfo-lg-row--head .cm-clubinfo-lg-cell,
.cm-clubhist-cell--head,
.cm-clubhist-cell--head-dark,
.cm-mgrhist-lg-cell--head,
.cm-ph-col-head,
.cm-penalty-head > div,
.cm-ltable-head,
.cm-mgrscores-head,
.cm-candidates-head,
.cm-avgates-head,
.cm-scouts-cell--head,
.cm-accounts-cell--head,
.cm-transfers-col-head,
.cm-shortlist-row--head .cm-shortlist-cell,
.cm-news-row--head .cm-news-cell,
.cm-staffsearch-row--header > .cm-staffsearch-cell,
.cm-mreport-head,
.cm-mreport-side-head,
.cm-pastwin-header,
.cm-pastwin-cell--head,
.cm-mawards-head,
.cm-ntsquad-head,
.cm-ya-cell--head,
.cm-txlog-row--head .cm-txlog-c,
.cm-tslist-rank,
.cm-award-rank {
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   Mobile fixes (batch). Appended last so they win over the base
   rules. Covers: monthly awards, transfer/wage negotiation panels,
   league fixtures/results rows (also used by the advance-results
   screen), the advance/EXIT action buttons, and the cup penalty /
   away-goal / aggregate indicators.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* ── Monthly awards ("Prémio do mês") ──────────────────────────
     The 4-column panel grid (160 + 180 + 88 + 1fr) overflowed a phone,
     and the fixed popup overlay had no scroll, so the DONE button sat
     off-screen. Make the overlay scrollable and compress the grid. */
  .cm-news-overlay--mawards {
    overflow-y: auto;
    padding-top: 6px;
  }
  .cm-mawards { width: 100%; gap: 3px; padding: 2px; }
  .cm-mawards-title { font-size: 12px; padding: 3px 12px; letter-spacing: 1px; }
  .cm-mawards-panel {
    grid-template-columns: 58px minmax(0, 1fr) 42px minmax(0, 1fr);
    column-gap: 1px;
    row-gap: 1px;
  }
  .cm-mawards-head,
  .cm-mawards-head--val,
  .cm-mawards-head--club,
  .cm-mawards-divtag,
  .cm-mawards-name,
  .cm-mawards-val,
  .cm-mawards-club {
    font-size: 9px;
    letter-spacing: 0;
    padding: 2px 4px;
  }
  .cm-mawards-done { font-size: 14px; padding: 6px 0; letter-spacing: 2px; }

  /* ── Transfer / wage negotiation panels ────────────────────────
     .cm-ap-bottom was a fixed 2-up grid, so the player factfile sat
     beside the offer controls and squeezed the negotiation. Stack, and
     push the factfile BELOW the offer (- / +) controls (it's appended
     first in the DOM, so reorder it). */
  .cm-ap-bottom { grid-template-columns: minmax(0, 1fr); }
  .cm-ap-factfile { order: 1; }

  /* The -/+ steppers were transparent, borderless and small — hard to
     hit and visually undefined on a phone. Give them a real button box
     and a ≥48px tap target; enlarge the digit cells to match. */
  .cm-ap-pm {
    background: linear-gradient(to bottom, #4a4a4a 0%, #2c2c2c 100%);
    border-top: 2px solid #707070;
    border-left: 2px solid #707070;
    border-right: 2px solid #111111;
    border-bottom: 2px solid #111111;
    min-height: 48px;
    /* Slimmer than desktop so the +/- pair leaves room for 5+ digit cells
       on a full-width phone column; the cells flex-shrink to take up the
       rest. ≥44px wide keeps a comfortable tap target. */
    padding: 4px 12px;
  }
  .cm-ap-pm:active {
    background: linear-gradient(to bottom, #2c2c2c 0%, #4a4a4a 100%);
    color: var(--yellow, #FFFF55);
  }
  .cm-ap-digit {
    min-height: 46px;
    flex-basis: 38px;
    width: 38px;
    font-size: 26px;
  }

  /* ── League fixtures + results rows (cm-nextleague) ─────────────
     No responsive rule existed: 16px type + 66px score min-width +
     wide padding overflowed and clipped team names. Shrink to fit and
     ellipsis the names instead of pushing the score off-screen. Shared
     by the league fixtures view, league results view, AND the
     advance-results screen. */
  .cm-nextleague-team,
  .cm-nextleague-v {
    font-size: 11px;
    letter-spacing: 0;
    padding: 5px 6px;
  }
  .cm-nextleague-team {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cm-nextleague-v,
  .cm-nextleague-score { min-width: 0; padding: 5px 8px; }

  /* ── Advance / EXIT action row (cm-ltable) ──────────────────────
     The 18px/3px-tracking buttons were oversized for a phone's
     -PAGE | EXIT | +PAGE (and -DIV | ADVANCE | +DIV) row, the middle
     button was 2× the sides, and "- PAGE" wrapped to two lines (making
     all three tall). Narrow the middle, slim the buttons, and keep the
     side labels on one line. */
  .cm-ltable-actions { grid-template-columns: 1fr 1.4fr 1fr; }
  .cm-ltable-btn {
    font-size: 12px;
    letter-spacing: 1px;
    padding: 7px 2px;
    white-space: nowrap;
  }
  .cm-ltable-btn--dir span { letter-spacing: 1px; }

  /* ── Cup penalty / away-goal badge (P / A) ─────────────────────
     The 12px absolute glyph overlapped the shrunken 64px score box. */
  .cm-cupbracket-v-pen { font-size: 8px; }
  .cm-cupbracket-v-pen--home { left: 2px; }
  .cm-cupbracket-v-pen--away { right: 2px; }

  /* ── Match-report cup strips (HT / ON PENALTIES / AGG / AWAY GOALS) ─
     Reused .cm-mreport-ht with 2px letter-spacing wrapped badly for the
     longer cup lines ("<CLUB> WIN 4-2 ON PENALTIES"). */
  .cm-mreport-ht {
    font-size: 10px;
    letter-spacing: 0;
    padding: 1px 6px;
  }

  /* ── Staff screen: stack the two columns into one ──────────────
     The 2-up grid overflowed — each card's min-content forced its track
     wider than half the viewport, so the right column (Team/Club/Youth
     coaches + youth scouts) was clipped off the right edge. One column
     gives every card the full width. */
  .cm-staff-body { grid-template-columns: 1fr; }

  /* ── Staff hire/search table: horizontal scroller ──────────────
     5 columns (NAME/CLUB/YR/CHARACTER/REP). Keep the table a grid but
     size every column to its content so nothing is clipped (fixed widths
     still cut off "REBELLIOUS"/"V Good"/the headers), and let it scroll.
     Rows stay display:contents so the cells share the grid's columns and
     stay aligned across rows. */
  .cm-staffsearch-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: repeat(5, max-content);
  }
  /* Shrink the -SCR / EXIT / +SCR action bar — desktop buttons dwarfed
     the phone. */
  .cm-staffsearch-btn { font-size: 11px; padding: 6px 6px; letter-spacing: 1px; }

  /* ── Transfer News ─────────────────────────────────────────────
     Tighten the gap before the ADVANCE button (footer + advance-btn top
     margins were stacking) and keep the Week chip compact on one line. */
  .cm-news-footer { margin-top: 0; }
  .cm-news-topbar { margin-bottom: 6px; }
  .cm-news-week { font-size: 10px; padding: 3px 8px; letter-spacing: 0; }

  /* -SCR | DONE | +SCR action bar (Transfer News / friendly picker): the
     desktop 50px top margin left a big gap, and the 14px buttons were
     oversized (the narrow side columns also wrapped "- Scr" onto two
     lines). Tighten the gap and shrink the buttons. */
  .cm-news-actions-bar {
    margin-top: 12px;
    /* DONE was 4× the side buttons (1fr 4fr 1fr) — dial it back so it's
       not an oversized slab on a phone. */
    grid-template-columns: 1fr 2fr 1fr;
  }
  .cm-news-actions-bar .cm-shortlist-action {
    font-size: 12px;
    padding: 6px 2px;
    letter-spacing: 1px;
  }

  /* ── Club Info page: stack GENERAL + CUP ROUNDS ────────────────
     The 2-up grid clipped the GENERAL values (MANAGER Y…, CASH 224…).
     One column gives both boxes full width. */
  .cm-clubinfo-row--top { grid-template-columns: 1fr; }

  /* ── Club Info league record: horizontal scroller ──────────────
     9 equal columns (DIV/POS/PLD/WON/DRN/LST/FOR/AGG/PTS) squeezed PTS
     off the right edge. Flip the rows to fixed-width flex cells and let
     the table scroll. DIV/POS (the first two) are wider than the
     numeric columns. */
  .cm-clubinfo-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cm-clubinfo-lg-row {
    display: flex;
    gap: 1px;
    width: max-content;
    min-width: 100%;
  }
  .cm-clubinfo-lg-cell { flex: 0 0 auto; width: 44px; }
  .cm-clubinfo-lg-cell:nth-child(1),
  .cm-clubinfo-lg-cell:nth-child(2) { width: 56px; }

  /* ── Club Records tables: horizontal scroller ──────────────────
     The 3-col achievement grids (ACHIEVEMENT/RECORD/YEAR) and the 2-col
     transfer grid crammed/clipped values on a phone. Size each column to
     its content (cells are already nowrap) so nothing is cut off, and let
     the table scroll. (--transfer rule comes after so it wins.) */
  .cm-clubhist-recs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: max-content max-content max-content;
  }
  .cm-clubhist-recs--transfer {
    grid-template-columns: max-content max-content;
  }

  /* ── National squad: single NAME|CLUB column ───────────────────
     The desktop 4-column grid (two player columns) has a ~700px min-width
     that overflows a phone. One player column fits. The builder emits the
     squad in sequential order on mobile so the reflow stays in order. */
  .cm-ntsquad-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  }

  /* ── Cup group tables (European Cup + Anglo-Italian) ───────────
     8 columns (TEAM P W D L F A PTS) overflow a phone. Same treatment
     as the league table: scroll the table, pin the TEAM column. The
     GROUP heading is a sibling above the table, so it stays put. */
  .cm-grouptable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cm-grouptable-row {
    display: flex;
    gap: 2px;
    width: max-content;
    min-width: 100%;
  }
  .cm-grouptable-row > span {
    font-size: 11px;
    padding: 4px 2px;
  }
  .cm-grouptable-row > span:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 130px;
    padding-left: 8px;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cm-grouptable-row > span:not(:first-child) {
    flex: 0 0 38px;
  }

  /* ── Euro Seedings ─────────────────────────────────────────────
     Stack the two side-by-side seed columns into one so each row spans
     the full width and the club name shows in full (the 2-up grid clipped
     every name). Country is trimmed to a 3-letter code in JS — show it at
     a smaller size in a narrower column so the name gets even more room. */
  .cm-euroseed-grid { grid-template-columns: 1fr; }
  .cm-euroseed-country { font-size: 10px; }
  .cm-euroseed-row { grid-template-columns: minmax(0, 1fr) 34px; }

  /* ── View Tables: horizontal scrollers with a pinned name column ──
     Form Guide / Average Gates / Manager Scores / Rankings / Salary /
     Hall of Fame are wide flat grids. Give each fixed-px columns, scroll
     the grid, and pin the first two columns (pos|rank + name) plus the
     title header (which spans those two columns). Other columns slide. */

  /* Full header labels on one line, with horizontal padding + a smaller
     font so each sits clearly inside its column. Without this the labels
     filled their red cells edge-to-edge and read as one merged blob
     ("AVERAGELPBOARD %"). */
  .cm-formguide-head,
  .cm-avgates-head,
  .cm-mgrscores-head {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    letter-spacing: 0;
    padding: 4px 5px;
  }
  /* Title cell (spans the pinned pos+name cluster) clips cleanly on the
     right rather than overflowing into the data columns. */
  .cm-formguide-title,
  .cm-avgates-title,
  .cm-mgrscores-head--title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Manager Scores / Rankings / Salary / Hall of Fame: RANK | NAME | CLUB | PTS.
     CLUB + PTS widened (full club names; Rankings' "VERY GOOD" REP labels)
     so the table reliably overflows a phone and actually slides, with the
     rank + name columns pinned. */
  .cm-mgrscores-grid {
    grid-template-columns: 30px 164px 150px 120px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Data font was 13px — too big on a phone (and Rankings' "VERY GOOD"
     style REP labels crammed). Step it down. */
  .cm-mgrscores-rank,
  .cm-mgrscores-name,
  .cm-mgrscores-club,
  .cm-mgrscores-pts { font-size: 11px; }
  .cm-mgrscores-rank { position: sticky; left: 0;  z-index: 2; padding: 3px 2px; }
  /* Wider name column + tighter padding so full manager names aren't cut. */
  .cm-mgrscores-name { position: sticky; left: 32px; z-index: 2; padding: 3px 6px; }
  .cm-mgrscores-head--title { position: sticky; left: 0; z-index: 2; }

  /* Form Guide: POS | NAME | HOME | AWAY | LP | BOARD (board widened so
     the "BOARD %" header fits on one line). */
  .cm-formguide-grid {
    grid-template-columns: 26px 120px 78px 78px 28px 82px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cm-formguide-pos  { position: sticky; left: 0;  z-index: 2; }
  .cm-formguide-name { position: sticky; left: 28px; z-index: 2; margin-right: 0; }
  .cm-formguide-title { position: sticky; left: 0; z-index: 2; }

  /* Average Gates: POS | NAME | AVG | LP | BOARD (AVERAGE + BOARD % headers
     widened to fit on one line). */
  .cm-avgates-grid {
    grid-template-columns: 26px 134px 82px 28px 82px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cm-avgates-pos  { position: sticky; left: 0;  z-index: 2; }
  .cm-avgates-name { position: sticky; left: 28px; z-index: 2; margin-right: 0; }
  .cm-avgates-title { position: sticky; left: 0; z-index: 2; }
}

/* ── Interactive Live Match ─────────────────────────────────────────
 * CM93 minute-by-minute match screen: TIME counter, blue commentary
 * banner, team scorelines, Attacking/Defending + CHANCES, and the
 * DEF/MID/ATT vertical possession bars. The Manager90s watermark backdrop
 * (.cm-backdrop) shows through (the box itself is transparent). */
.cm-live {
  width: min(880px, 98vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 12px 16px;
  font-weight: bold;
  min-height: 460px;
  cursor: pointer;
  user-select: none;
}
.cm-live:focus { outline: none; }

.cm-live-hud {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
/* Division + stadium bars stretch to ~30% into the away team's box. */
.cm-live-fixinfo { display: flex; flex-direction: column; gap: 6px; width: 65%; }
.cm-live-fixinfo-line {
  background: var(--white);
  color: var(--dark-blue, #0040A1);
  padding: 4px 12px;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* TIME panel: black readout, thick bright-blue border, thin yellow outer
 * line — with the count inset in a grey-bordered black window (CGA look). */
.cm-live-time {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #000;
  border: 5px solid #1F82C5;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #E8C828;
  padding: 9px 16px;
}
.cm-live-time-label { color: #E8D44A; font-size: 18px; letter-spacing: 2px; }
.cm-live-time-num {
  color: #E81E1E;
  font-size: 26px;
  letter-spacing: 4px;
  background: #000;
  border: 3px solid #B0B0B0;
  padding: 2px 10px;
}
/* TIME box + two-leg aggregate stacked on the right of the HUD. */
.cm-live-timewrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cm-live-agg {
  color: #5ccf5c;
  font-size: 12px;
  letter-spacing: 2px;
  padding-left: 6px;
}

.cm-live-banner {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 0;          /* no side padding → comment left-aligns with the team chips */
  background: transparent;
}
.cm-live-banner-line {
  color: var(--dark-blue, #0040A1);
  background: var(--white);
  /* Left-anchored, and never wrap onto a new line (a long comment just
   * extends to the right on a single line). */
  align-self: flex-start;
  white-space: nowrap;
  max-width: 100%;
  padding: 8px 12px 8px 15px;
  font-size: 25px;
  letter-spacing: 1px;
  line-height: 1.3;
}
.cm-live-banner--goal .cm-live-banner-line { color: var(--dark-blue, #0040A1); }
.cm-live-banner--big .cm-live-banner-line:first-child {
  background: var(--yellow, #FFFF55);
  color: #000;
  font-size: 29px;
}
/* Card lines fill the team-coloured box like a normal comment; the card phrase
 * just shows in the card's colour (yellow/red, set inline — black on a kit that
 * clashes), same weight as the rest of the line. */

/* Idle half indicator — renders exactly like a match comment (padding,
 * font, box) in the home club's colours, which are set inline. */

.cm-live-scores {
  display: grid;
  /* minmax(0,1fr) (not bare 1fr, whose min-width:auto lets a long name blow the
     column out and shove the score off-screen) so the name chip shrinks and
     ellipsises instead — which is what the abbreviation overflow check reads. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.cm-live-team {
  display: flex;
  justify-content: space-between;   /* name hugs the left, score the right edge of its half */
  gap: 24px;
  align-items: center;
}
/* Name box hugs the club name (doesn't fill the column). */
.cm-live-team-name {
  background: var(--white);
  color: #000;
  padding: 11px 18px;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cm-live-team--away .cm-live-team-name { background: var(--red, #CC0000); color: var(--white); }
.cm-live-team-score {
  background: transparent;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  min-width: 32px;
  flex: none;
}

.cm-live-phase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cm-live-phase-side {
  display: flex; flex-direction: column; gap: 3px;
  border: 2px solid transparent;
  padding: 4px 6px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* Attacking-side box glow is a mobile-only cue (see .cm-live--mobile rule);
   on desktop only the "Attacking..." font turns yellow, no box highlight. */
.cm-live-phase-mode { color: var(--cyan, #55FFFF); font-size: 14px; letter-spacing: 1px; }
.cm-live-phase-mode.is-attacking { color: var(--yellow, #FFFF55); }
.cm-live-phase-ch { color: var(--white); font-size: 13px; letter-spacing: 1px; }
.cm-live-ch-num { color: #4bb6ff; }

.cm-live-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  padding: 0 8px;
}
/* The three DEF/MID/ATT bars of one team sit close together; the wide
 * grid gap above keeps the two teams' clusters clearly apart. */
.cm-live-bars-group {
  display: flex;
  gap: 50px;
}
.cm-live-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cm-live-bar {
  width: 32px;
  height: 120px;
  background: #000;
  border: 2px solid white;
  display: flex;
  align-items: flex-end;
}
.cm-live-bar-fill {
  width: 100%;
  background: #1F82C5;
  transition: height 0.3s ease;
}
.cm-live-bar-label { color: var(--yellow, #FFFF55); font-size: 12px; letter-spacing: 1px; transition: color 0.3s ease; }
/* Temporary green/red tint after a rating-changing incident (sub, red card,
   tactical change); settles back to yellow after ~5 game minutes. */
.cm-live-bar-label.is-up   { color: var(--green, #55FF55); }
.cm-live-bar-label.is-down { color: var(--red-light, #FF5555); }

/* Before kickoff (Start Match not yet pressed) there's no live state to show:
   the bar frames stay (white outline), but they're empty/transparent inside —
   no black backing, no blue fill — and the Attacking/Defending label is hidden. */
.cm-live--prestart .cm-live-bar { background: transparent; }
.cm-live--prestart .cm-live-bar-fill { background: transparent; }
.cm-live--prestart .cm-live-phase-mode { visibility: hidden; }

/* Playback controls (slower / pause / faster). */
.cm-live-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cm-live-ctrl {
  font-family: inherit; font-weight: bold; font-size: 12px;
  background: #2a2a4a; color: var(--white);
  border-top: 2px solid #6666AA; border-left: 2px solid #6666AA;
  border-right: 2px solid #111133; border-bottom: 2px solid #111133;
  padding: 6px 12px; cursor: pointer; letter-spacing: 1px;
}
.cm-live-ctrl:hover, .cm-live-ctrl:focus { outline: none; filter: brightness(1.2); }
.cm-live-ctrl--pause { min-width: 96px; }
.cm-live-ctrl--pause.is-paused { background: var(--dark-yellow, #AA5500); color: #000; }
.cm-live-speed { color: var(--yellow, #FFFF55); font-size: 13px; letter-spacing: 1px; min-width: 36px; text-align: center; }
.cm-live-speed--turbo { color: #2BD0D0; }
.cm-live-ctrl--log.is-active { background: var(--dark-yellow, #AA5500); color: #000; }
.cm-live-ctrl:disabled { opacity: 0.35; cursor: default; filter: none; }
/* TURBO checkbox — fast-forward the whole match (commentary included) to 3×. */
.cm-live-turbo {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.cm-live-turbo-box {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 16px; height: 16px; flex: none; background: #06070a;
  border: 2px solid #c47a1a; cursor: pointer; position: relative;
}
.cm-live-turbo-box:checked { background: var(--dark-yellow, #AA5500); }
.cm-live-turbo-box:checked::after {
  content: '✓'; position: absolute; inset: -3px 0 0 1px;
  color: #000; font-size: 13px; line-height: 16px; text-align: center;
}
.cm-live-turbo-cap { color: #e8c81e; font-size: 10px; letter-spacing: 2px; }

/* ── Match-control deck (desktop) — Claude Design "Match Report Desktop".
   The loose control row is wrapped in a bordered panel: a MATCH CONTROL title
   strip (with the tap-for-tactics hint on its right), a transport group with a
   SPEED readout box, a divider, and the LOG toggle. Scoped to .cm-live-deck so
   mobile keeps its own ADMIN/DEBUG panel. Bars + TIME box are untouched. */
.cm-live-deck { border: 3px solid #1c2030; background: #0d0f15; margin-top: 2px; }
.cm-live-deck-head {
  display: flex; align-items: center; justify-content: space-between;
  background: #1c2030; padding: 7px 14px;
}
.cm-live-deck-title { color: #8b93a7; font-size: 10px; letter-spacing: 2px; }
.cm-live-deck .cm-live-hint {
  text-align: right; opacity: 1; color: #9aa3b5;
  font-size: 12px; letter-spacing: 1px; min-height: 14px;
}
.cm-live-deck-body { display: flex; align-items: stretch; }
.cm-live-transport { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cm-live-deck .cm-live-controls { justify-content: flex-start; gap: 12px; flex-wrap: nowrap; }
.cm-live-deck .cm-live-ctrl {
  background: #26284f; color: #cdd2e0;
  border: 2px solid #565a9e; padding: 10px 14px;
}
.cm-live-deck .cm-live-ctrl--pause.is-paused { background: var(--dark-yellow, #AA5500); color: #000; }
.cm-live-speedbox {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  margin-left: 4px; padding: 5px 16px; background: #06070a; border: 2px solid #2BD0D0;
}
.cm-live-speedbox-cap { color: #2BD0D0; font-size: 8px; letter-spacing: 1px; }
.cm-live-deck .cm-live-speed { color: var(--yellow, #FFFF55); font-size: 18px; min-width: 0; }
.cm-live-deck-divider { width: 3px; background: #1c2030; flex: none; }
.cm-live-deck-util { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.cm-live-deck .cm-live-ctrl--log {
  background: #2a2410; color: #e8c81e; border: 2px solid #c47a1a; padding: 10px 20px;
}
.cm-live-deck .cm-live-ctrl--log.is-active { background: var(--dark-yellow, #AA5500); color: #000; }

/* Match-comment log — collapsed by default, expands on the LOG control. Styled
   to the Claude Design "Match Report Desktop" mock: a cyan-bordered box with a
   pixel-font title and VT323 lines (yellow minute + light text). The COPY/CLEAR
   buttons and team-colour chip stay for bug-reporting; the kind column is hidden. */
.cm-live-log { display: none; margin: 10px 0 0; width: 100%; box-sizing: border-box;
  border: 3px solid #2BD0D0; background: #06070a; }
.cm-live-log.is-open { display: block; }
.cm-live-log-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px;
  background: #06070a; }
.cm-live-log-title { color: #2BD0D0; font-size: 11px; letter-spacing: 2px; font-weight: bold; flex: 1; }
.cm-live-log-copy { font-family: inherit; font-weight: bold; font-size: 10px; letter-spacing: 1px;
  background: #11313a; color: #9fe7e7; border: 1px solid #2BD0D0; padding: 3px 8px; cursor: pointer; }
.cm-live-log-copy:hover { filter: brightness(1.2); }
.cm-live-log-body { max-height: 240px; overflow-y: auto; padding: 4px 0 8px;
  font-family: "VT323", monospace; font-size: 20px; }
.cm-live-log-row { display: flex; align-items: baseline; gap: 12px; padding: 1px 14px; line-height: 1.1; }
.cm-live-log-row:nth-child(odd) { background: rgba(255,255,255,0.03); }
.cm-live-log-min { color: #E8C81E; min-width: 40px; text-align: left; flex: none; }
.cm-live-log-tag { min-width: 92px; max-width: 92px; flex: none; padding: 0 6px; font-size: 15px;
  letter-spacing: 0.5px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 2px; text-transform: uppercase; line-height: 1.35; }
.cm-live-log-tag:not(.is-home):not(.is-away) { color: #6b7286; }
.cm-live-log-kind { display: none; }
.cm-live-log-text { color: #CDD2E0; flex: 1; }
.cm-live--mobile .cm-live-log-body { max-height: 200px; }
.cm-live--mobile .cm-live-log-tag { min-width: 70px; max-width: 70px; }

.cm-live-hint { text-align: center; color: var(--fg); font-size: 11px; letter-spacing: 1px; opacity: 0.7; }

.cm-live-actions { display: flex; justify-content: center; margin-top: 6px; }
/* Reserve the START / ADVANCE / DONE slot above the control deck so the deck
   never jumps up when no button is showing (open play). Mobile uses
   display:contents so the button keeps its prior full-width flow. */
.cm-live-acthost { min-height: 64px; }
.cm-live--mobile .cm-live-acthost { display: contents; min-height: 0; }

/* CM93 "Tactical move" menu: blue title, red team box, 2-col grey grid. */
/* Live "Tactical move" menu — full-screen opaque overlay that reuses the STA
   (cm-transfer-status) frame so the match underneath is fully covered, on a
   solid boss93-dark fill. */
.cm-live-menu-overlay {
  position: fixed; inset: 0; z-index: 240;
  /* Opaque boss93-dark fill so the live match underneath is masked without
     the original CM93 splash art (mounts over a visible #app, so it can't
     be transparent). */
  background: #161812;
  display: flex; align-items: center; justify-content: flex-start;
  flex-direction: column;
  padding: 2vh 16px 16px; overflow-y: auto;
}
/* The overlay's own Manager90s watermark (the body-level .cm-backdrop is masked by
   the live match below). Sits over the solid fill; content renders above it. */
.cm-live-menu-overlay .cm-live-menu-watermark { z-index: 0; }
.cm-live-menu-overlay .cm-transfer-status { position: relative; z-index: 1; }

/* Live Tactical-move menu on mobile: left-align the title and zero the body's
   side padding so the title, team name and the (single-column) buttons all
   share one left edge. JS-gated class (not @media) for zoom reliability; the
   !important overrides MenuItem's inline `grid-column: span 6`. */
/* Fit the panel inside the overlay's 16px side padding — min(640px,98vw)
   otherwise overflows it, pushing the full-width buttons to the screen edge. */
.cm-ts--live-mobile { width: 100%; }
.cm-ts--live-mobile .cm-ts-title { margin: 0 0 6px; text-align: left; padding: 4px 10px; }
.cm-ts--live-mobile .cm-ts-body { padding: 6px 0 2px; }
.cm-ts--live-mobile .cm-ts-menu .cm-menu-item { grid-column: 1 / -1 !important; }

/* In-match tactics panel: squad list with swap-to-substitute. */
.cm-tactchange { width: min(520px, 96vw); }
.cm-tactchange-title {
  background: #E02020; color: #fff; text-align: center;
  padding: 5px; font-size: 20px; letter-spacing: 2px; text-transform: uppercase;
}
.cm-tactchange-top { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.cm-tactchange-note { color: #FFE000; text-align: center; font-size: 12px; padding: 2px 0 6px; }
.cm-tactchange-list { display: flex; flex-direction: column; gap: 2px; max-height: 56vh; overflow-y: auto; }
.cm-tactchange-row {
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px;
  background: #8a8a8a; color: #000; cursor: pointer; font-weight: bold; letter-spacing: 1px;
}
.cm-tactchange-row .cm-tactchange-shirt {
  background: #1F82C5; color: #fff; text-align: center; padding: 7px 0; font-size: 15px;
}
.cm-tactchange-row .cm-tactchange-name { font-size: 16px; text-transform: uppercase; }
.cm-tactchange-row--sub .cm-tactchange-shirt { background: #C77B16; }
.cm-tactchange-row.is-selected { background: #FFE000; }
.cm-tactchange-row.is-used { opacity: 0.4; cursor: default; }
.cm-tactchange-row:not(.is-used):hover { filter: brightness(1.1); }
.cm-tactchange-done { margin-top: 8px; }

/* Live tactical overlays (Tactical move, subs, formation, stats…) */
.cm-live-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 240;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.cm-live-overlay-card {
  width: min(440px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  background: #1a1a3a;
  border-top: 3px solid #8888EE;
  border-left: 3px solid #8888EE;
  border-right: 3px solid #000044;
  border-bottom: 3px solid #000044;
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.cm-live-overlay-title {
  background: #3333AA; color: var(--white);
  text-align: center; padding: 5px; font-size: 16px;
  letter-spacing: 2px; text-transform: uppercase;
}
.cm-live-overlay-note { color: var(--yellow, #FFFF55); text-align: center; font-size: 12px; padding: 2px 0 4px; }
.cm-live-overlay-body { display: flex; flex-direction: column; gap: 5px; }
.cm-live-opt {
  font-family: inherit; font-weight: bold; font-size: 14px;
  background: #5555AA; color: var(--white);
  border-top: 2px solid #8888EE; border-left: 2px solid #8888EE;
  border-right: 2px solid #222255; border-bottom: 2px solid #222255;
  padding: 8px 12px; cursor: pointer; text-align: left; letter-spacing: 1px;
}
.cm-live-opt:hover, .cm-live-opt:focus { outline: none; filter: brightness(1.18); }

.cm-live-oppteam { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.cm-live-oppteam-row { color: var(--white); font-size: 13px; letter-spacing: 1px; padding: 2px 4px; }
.cm-live-oppteam-row:nth-child(odd) { background: rgba(255,255,255,0.06); }

.cm-live-stats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.cm-live-stats-row {
  display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center;
  padding: 3px 4px;
}
.cm-live-stats-row:nth-child(odd) { background: rgba(255,255,255,0.06); }
.cm-live-stats-h { color: var(--yellow, #FFFF55); text-align: left; font-size: 14px; }
.cm-live-stats-a { color: var(--red-light, #FF5555); text-align: right; font-size: 14px; }
.cm-live-stats-l { color: var(--fg); text-align: center; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }

@media (max-width: 560px) {
  .cm-live-fixinfo-line { font-size: 13px; }
  .cm-live-time-num { font-size: 18px; }
  .cm-live-banner-line { font-size: 18px; padding: 4px 10px; }
  .cm-live-banner--big .cm-live-banner-line:first-child { font-size: 21px; }
  .cm-live-banner { min-height: 84px; }
  .cm-live-team-name { font-size: 18px; }
  .cm-live-team-score { font-size: 18px; }
  .cm-live-team { grid-template-columns: 1fr 40px; }
  .cm-live-bar { height: 92px; width: 26px; }
  .cm-live-bars { gap: 34px; }
  .cm-live-bars-group { gap: 5px; }
}

/* ── Mobile live match HUD (JS-gated) ───────────────────────────────
   Toggled by liveMatchScreen (root.classList.add 'cm-live--mobile') — NOT an
   @media rule, because this app's CSS `zoom` distorts width media queries and
   silently no-ops the block above on a real phone. Two-class specificity +
   later source order means these win wherever both apply. */
/* No own backdrop: the Manager90s watermark (.cm-backdrop, a body-level
   position:fixed element) shows through the transparent .cm-live--mobile,
   exactly like desktop. It pins to the viewport on mobile on its own, so the
   mobile live screen needs no backdrop of its own. */

/* Mobile header: division bar (home kit colours, as desktop) on the left, the
   standard CGA TIME box (yellow TIME / red digits / blue-yellow border) on the
   right — same colours as desktop, just shrunk to fit a phone. */
.cm-live--mobile .cm-live-hud { flex-direction: column; align-items: stretch; gap: 6px; }
.cm-live--mobile .cm-live-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cm-live--mobile .cm-live-toprow .cm-live-fixinfo-line {
  padding: 4px 10px;
  font-size: 14px;
  letter-spacing: 1px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
/* A long division / competition label normally stays truncated with an ellipsis
   (the old format). Every 30s JS adds .is-sliding for ONE slow pass that reveals
   the tail and returns, then removes it — so it only catches the eye now and
   then, gently. The inner span (wider than the bar) is what moves; JS sets the
   --slide distance only when it actually overflows. Inline on desktop so the
   label still wraps there. */
.cm-live-fixinfo-text { display: inline; }
.cm-live--mobile .cm-live-toprow .cm-live-fixinfo-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
/* During a pass: drop the ellipsis clamp so the full text can slide. */
.cm-live--mobile .cm-live-toprow .cm-live-fixinfo-line.is-sliding .cm-live-fixinfo-text {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  animation: cm-fixinfo-slide 11s ease-in-out 1;
  will-change: transform;
}
@keyframes cm-fixinfo-slide {
  0%, 12%   { transform: translateX(0); }
  42%, 58%  { transform: translateX(var(--slide, 0)); }
  88%, 100% { transform: translateX(0); }
}
.cm-live--mobile .cm-live-time {
  gap: 8px;
  padding: 4px 10px;
  border-width: 3px;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #E8C828;
}
.cm-live--mobile .cm-live-time-label { font-size: 12px; letter-spacing: 1px; }
.cm-live--mobile .cm-live-time-num { font-size: 15px; letter-spacing: 2px; padding: 1px 6px; border-width: 2px; }
.cm-live--mobile .cm-live-agg { font-size: 10px; }

/* Stack the scoreline: away team box BELOW home, each row name-left /
   score-right (kills the desktop 120px name↔score gap that overflowed). */
.cm-live--mobile .cm-live-scores { grid-template-columns: minmax(0, 1fr); gap: 9px; }
.cm-live--mobile .cm-live-team { gap: 12px; align-items: center; }
/* Kit-coloured name box (bg/fg/border set inline in JS from the kit). The
   scoreline has the full row width here, so — like the Claude Design mobile
   mock — the name WRAPS to its full form (BROMSGROVE ROVERS) instead of being
   abbreviated; the JS abbreviation pass is desktop-only (see liveMatchScreen). */
.cm-live--mobile .cm-live-team-name {
  font-size: 14px; padding: 9px 14px; border: 3px solid;
  white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word;
}
.cm-live--mobile .cm-live-team-score { font-size: 22px; }
/* Connector rule between the name box and the score. */
.cm-live--mobile .cm-live-team-line { flex: 1 1 auto; min-width: 8px; height: 3px; background: #1c2030; }

/* Match commentary: smaller, and allowed to WRAP (desktop keeps it on one
   line, but on a phone a long line would overflow the framed box). */
.cm-live--mobile .cm-live-banner-line {
  font-size: 14px;
  padding: 14px 16px;
  white-space: normal;
  line-height: 1.4;
  /* Filled comment box: bg + font are set per-comment in JS — the team's kit
     colours (darker bg / lighter font) for real commentary, or neutral
     black/white for the no-comment states; the border + thick left stripe track
     the font colour (currentColor). The black/white fallback here matches the
     default neutral. */
  align-self: stretch;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  color: #ffffff;
  background: #000000;
  border: 3px solid currentColor;
  border-left-width: 12px;
}
/* Comment box stays one fixed size — no --big growth. */
.cm-live--mobile .cm-live-banner--big .cm-live-banner-line:first-child { font-size: 14px; }
.cm-live--mobile .cm-live-bar { height: 92px; width: 26px; }
.cm-live--mobile .cm-live-bars { gap: 30px; }
.cm-live--mobile .cm-live-bars-group { gap: 5px; }

/* ── Mobile structural panels (match the reference mockup) ──────────────
   Only LAYOUT changes — inner element colours (kit chips, TIME box, bars,
   buttons) are unchanged. */

/* Commentary banner — flush with the root's left edge (no extra inset), and a
   FIXED height so a short FULL TIME / HALF TIME card (or a 1-line comment)
   doesn't resize the box vs a longer wrapped comment and shift everything
   below. Content is vertically centred; the rare over-long comment is clipped. */
.cm-live--mobile .cm-live-banner {
  min-height: 76px;
  overflow: hidden;
  padding: 0;
}

/* Stats panel: two team columns; each has a kit-square header (■ NAME), the
   status line, CHANCES, then its DEF/MID/ATT bars. Flush left (no inset). */
.cm-live--mobile .cm-live-statspanel {
  padding: 0;
  border: 3px solid #1c2030;
  background: #11131a;
}
/* One framed box split into two columns by a central divider. */
.cm-live--mobile .cm-live-statspanel .cm-live-phase { gap: 0; }
/* The framed statspanel supplies the borders here, so drop the desktop
   all-around frame and signal "attacking" with the background tint alone. */
.cm-live--mobile .cm-live-phase-side { gap: 5px; padding: 12px 11px; border: 0; }
.cm-live--mobile .cm-live-phase-side:first-child { border-right: 3px solid #1c2030; }
.cm-live--mobile .cm-live-phase-side.is-attacking {
  background: rgba(255, 255, 85, 0.10);
  border: 2px solid var(--yellow, #FFFF55);
}
/* Keep the central divider on the (attacking) left column. */
.cm-live--mobile .cm-live-phase-side:first-child.is-attacking { border-right-color: var(--yellow, #FFFF55); }
.cm-live--mobile .cm-live-phase-head { display: flex; align-items: center; gap: 8px; }
.cm-live--mobile .cm-live-phase-sq { width: 12px; height: 18px; flex: none; }
/* Name in the team's own kit colour (set inline in JS). Clamped to one line in
   the narrow column — a long name is abbreviated in JS (BROMSGROVE ROVERS →
   BROMSGROVE R.) and ellipsised here as a final guard, so it never wraps. */
.cm-live--mobile .cm-live-phase-team {
  font-size: 11px; letter-spacing: 1px;
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Press Start 2P is wide — shrink the column text so "Attacking..." /
   "CHANCES : n" fit the half-width column without being clipped. */
.cm-live--mobile .cm-live-statspanel .cm-live-phase-mode { font-size: 11px; letter-spacing: 0; }
.cm-live--mobile .cm-live-statspanel .cm-live-phase-ch { font-size: 11px; letter-spacing: 0; }
.cm-live--mobile .cm-live-statspanel .cm-live-bars-group { margin-top: 4px; }

/* Controls panel: ADMIN / DEBUG header, the buttons row, then a footer with
   the speed readout (left) and the tactics hint (right). */
/* Primary game action (START GAME / ADVANCE / DONE): full-width block. Keeps
   the standard blue advance-button palette — NOT the mockup's green. */
.cm-live--mobile .cm-live-actions { display: block; margin: 0; }
.cm-live--mobile .cm-live-actions .cm-advance-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px 6px;
  font-size: 14px;
  letter-spacing: 2px;
}
/* Mobile MATCH CONTROL deck (Claude Design "Match Report" mobile mock): the
   transport buttons stack into a full-width row, then a SPEED readout sits
   beside the LOG toggle. Reuses the desktop .cm-live-deck chrome. */
.cm-live-deck--mobile .cm-live-deck-head { padding: 6px 10px; }
.cm-live--mobile .cm-live-deck-title { font-size: 8px; }
.cm-live--mobile .cm-live-deck .cm-live-hint {
  font-family: "VT323", monospace; font-size: 16px; letter-spacing: 1px; min-height: 16px;
}
.cm-live-deck--mobile .cm-live-deck-body { flex-direction: column; gap: 8px; padding: 10px; }
.cm-live-deck--mobile .cm-live-controls { gap: 8px; }
.cm-live-deck--mobile .cm-live-controls .cm-live-ctrl {
  flex: 1; padding: 11px 4px; font-size: 9px;
  background: #2a2865; border-color: #4f4caa; color: #cdd2e0;
}
/* Play/Pause is the amber accent button in the mobile mock. */
.cm-live-deck--mobile .cm-live-controls .cm-live-ctrl--pause {
  background: #c47a1a; border-color: #e0a347; color: #0c0e13; min-width: 0;
}
.cm-live-deck-row2 { display: flex; gap: 8px; align-items: stretch; }
.cm-live-deck--mobile .cm-live-speedbox {
  flex: 1; flex-direction: row; gap: 9px; align-items: center; margin: 0; padding: 6px 12px;
}
.cm-live-deck--mobile .cm-live-speed { font-size: 11px; }
.cm-live-deck--mobile .cm-live-ctrl--log { flex: 0 0 auto; padding: 9px 18px; font-size: 9px; }
.cm-live-deck--mobile .cm-live-turbo { flex: 0 0 auto; justify-content: center; padding: 0 10px; border: 2px solid #c47a1a; background: #06070a; }
.cm-live-deck--mobile .cm-live-turbo-cap { font-size: 9px; }