:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --type-body: var(--text-base);
  --type-page-title: var(--text-xl);
  --type-section-title: var(--text-lg);
  --bg: var(--surface-bg);
  --panel: var(--surface-panel);
  --panel-2: var(--surface-card);
  --line: var(--surface-border-solid);
  --text: #eff7ed;
  --muted: #afc0cb;
  --accent: var(--color-accent);
  --accent-light: var(--color-accent-light);
  --accent-ink: var(--color-accent-ink);
  --muted-gold: #c4b48c;
  --good: var(--color-pos);
  --zone-up: var(--color-pos);   /* the table bands and the legend read these three, nothing else */
  --zone-play: #6fb7ff;
  --zone-down: var(--color-neg);
  --bad: var(--color-neg);
  --bad-text: var(--color-neg-text);
  --warn: var(--color-warn);
  --wood: #6b4a22;
  --wood-dark: #3a2610;
  --wood-edge: #a8843f;
  --row: #112d36;
  --row-2: #15333b;
  --row-hl: #23463d;   /* "my row" / "selected row": a soft tint, never a saturated fill; the accent bar marks it */
  --font-ui: var(--font-main);
  --pitch: #1f7a3f;
  --pitch-2: #1b6d38;
  --pitch-line: rgba(255, 255, 255, 0.55);
  --radius: var(--radius-md);
  --shadow: var(--shadow-md);
  font-family: var(--font-ui);
  color-scheme: dark;
}

* { box-sizing: border-box; font-style: normal; }
html, body { margin: 0; color: var(--text); font-size: var(--type-body); line-height: 1.65; letter-spacing: normal; font-weight: 400; }
body {
  background: linear-gradient(rgba(248, 240, 220, 0.42), rgba(248, 240, 220, 0.42)),
    var(--bg) url("/assets/torcida-guache.webp") center / cover no-repeat;
  min-height: 100vh;
}
/* The fixed backdrop repaints on every scroll frame: only large pointer screens get it; phones get the lighter copy, scrolling with the page. */
@media (min-width: 1101px) and (hover: hover) { body { background-attachment: fixed; } }
@media (max-width: 760px) {
  body { background-image: linear-gradient(rgba(248, 240, 220, 0.42), rgba(248, 240, 220, 0.42)), url("/assets/torcida-guache-sm.webp"); }
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; letter-spacing: normal; }
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0 0 0.65em; line-height: 1.3; font-family: var(--font-ui); }
h1 { font-size: 2rem; font-weight: 600; }
h2 { font-size: 1.45rem; font-weight: 600; }
.board > .main > h1:first-child { font-size: var(--type-page-title); }
.board > .main > .card h2 { font-size: var(--type-section-title); }
h3 { font-size: 1.05rem; color: var(--muted); font-weight: 600; letter-spacing: normal; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad-text); }
.warn { color: var(--warn); }
.num { font-variant-numeric: tabular-nums; text-align: center; }
.team-name { text-align: center; vertical-align: middle; }
.hidden { display: none !important; }

/* --- Buttons & forms --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border-radius: 8px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 230, 170, 0.12), rgba(0, 0, 0, 0.18)), url("/assets/tex-wood.jpg") center / 260px, var(--wood);
  background-blend-mode: normal, multiply, normal; border-color: var(--wood-edge); color: var(--text);
  cursor: pointer; font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem; box-shadow: 0 2px 0 var(--wood-dark), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.btn:hover { border-color: var(--accent); filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.96); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.6); box-shadow: none; transform: none; }   /* clearly off, not a ghost variant */
.btn.primary { background: linear-gradient(180deg, #c79a45, #8d6426); color: #fff4d6; border-color: #e7c57a; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
.btn.small { min-height: 40px; padding: var(--space-1) var(--space-3); font-size: 0.9rem; }
.btn.ghost { background: rgba(0, 0, 0, 0.18); box-shadow: none; }
/* Destructive or money-spending confirmation. */
.btn.danger { background: linear-gradient(180deg, #b24a33, #7a2b1c); color: #fff1ea; border-color: #e0876f; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
.btn.danger:hover { border-color: #ffb199; }
label.field { display: grid; gap: 4px; margin-bottom: 12px; color: var(--muted); font-size: 0.9rem; }
.invite-field { display: grid; gap: 4px; margin-bottom: 12px; color: var(--muted); font-size: 0.9rem; }
.invite-field input { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; }
.invite-help { margin: 0; font-size: 0.85rem; }
input, select, textarea {
  min-height: 44px; background: #141c0c; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); width: 100%;
}
textarea { min-height: 7rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.78; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent-light); }
.field-error, .error { color: var(--bad-text); }

/* --- Layout -------------------------------------------------------------------------------- */
.shell { width: 100%; max-width: none; margin: 0 auto; padding: 16px clamp(32px, 7vw, 180px) 40px; display: grid; gap: 18px; min-width: 0; }
.stadium-app > .board > .main,
.board > .main,
.main {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  min-width: 0;
}
.stadium-app > .board > .main:has(.dense-table-wrap, .table-wide, .table-wide-wrap),
.board > .main:has(.dense-table-wrap, .table-wide, .table-wide-wrap) {
  max-width: 1320px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 700; font-size: 1.4rem; text-decoration: none; max-width: 100%; }
.brand:hover { text-decoration: none; filter: brightness(1.1); }
.brand-logo { display: block; width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; border-radius: 8px; box-shadow: 0 0 0 1px rgba(168, 132, 63, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45); }
/* The logo plate (login card and club bar): beige, rounded, thin wooden border. Padding and radius scale with the logo height (--logo-h), so
   both places have the same plate, only bigger or smaller. The login one follows the screen's height so the form always fits. */
.logo-plate { --logo-h: 56px; display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin-inline: auto; text-decoration: none;
  padding: calc(var(--logo-h) * 0.12) calc(var(--logo-h) * 0.45); background: #efe6cf; border: 2px solid var(--wood-edge); border-radius: calc(var(--logo-h) * 0.2);
  box-shadow: inset 0 0 0 1px rgba(60, 40, 16, 0.25); }
a.logo-plate:hover { filter: brightness(1.04); text-decoration: none; }
.logo-plate-img { display: block; width: auto; max-width: 100%; height: var(--logo-h); object-fit: contain; }
.brand-large { margin-bottom: 16px; }
.brand-large .logo-plate { --logo-h: clamp(80px, 16vh, 150px); }
/* The menu's centre: the logo plate, as tall as the tiles beside it, with a brown outline. */
.menu-logo { --logo-h: 60px; align-self: start; min-width: 0; width: auto; max-width: none; margin-inline: 0; justify-self: stretch; border: 3px solid var(--wood-dark); box-shadow: 0 0 0 2px rgba(168, 132, 63, 0.55), 0 4px 10px rgba(0, 0, 0, 0.45); }
@media (max-width: 1100px) { .menu-logo { --logo-h: 48px; padding-inline: 6px; } }   /* the tiles shrink here: so does the logo, to the same height */
@media (max-width: 560px) { .menu-logo { --logo-h: 34px; padding-inline: 3px; border-width: 2px; } }

/* Top menu: a wooden band with five painted tiles; each section's pages listed below its tile. */
.mainmenu {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 10px 14px 12px; border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(120, 82, 34, 0.55), rgba(70, 46, 16, 0.75)), url("/assets/tex-wood.jpg") center / cover;
  border: 3px solid var(--wood-dark); box-shadow: 0 0 0 2px rgba(168, 132, 63, 0.55), 0 10px 30px rgba(0, 0, 0, 0.55);
}
.menu-group { position: relative; min-width: 0; }
.menu-tile {
  display: grid; justify-items: center; gap: 0; padding: 4px 6px 6px; border-radius: 8px; color: var(--text); text-decoration: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)), url("/assets/tex-tile.jpg") center / cover;
  border: 2px solid #2c3a17; box-shadow: inset 0 0 0 2px rgba(214, 190, 120, 0.35), 0 4px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.menu-tile:hover { text-decoration: none; transform: translateY(-2px); filter: brightness(1.1); }
.menu-tile img { width: 64px; height: 46px; object-fit: contain; margin-top: -2px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.45)); }
.menu-title { position: relative; font-family: var(--font-ui); font-weight: 700; font-size: 1.1rem; line-height: 1.15; text-align: center; overflow-wrap: normal; hyphens: auto; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.caret { display: none; }   /* only when the tile works as a drop-down (narrow screens) */
.tile-count { position: absolute; top: -6px; right: -18px; display: none; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 6px; font-size: 0.75rem; line-height: 1.5; }
.menu-group.current .menu-tile { background: linear-gradient(180deg, rgba(255, 240, 200, 0.05), rgba(60, 36, 8, 0.45)), url("/assets/tex-tile-active.jpg") center / cover; border-color: var(--wood-dark); }
.menu-list {
  box-sizing: border-box; overflow-wrap: normal; hyphens: auto; list-style: none; margin: 8px 0 0; padding: 6px 8px;
  font-family: var(--font-ui); font-size: 1rem; line-height: 1.5; border-radius: 4px; border: 2px solid transparent;
}
.menu-list li { padding-left: 0.85em; text-indent: -0.85em; }
.menu-list li::before { content: "•"; color: var(--muted); margin-right: 0.35em; }
.menu-list a { color: var(--text); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); }
.menu-list a:hover { color: #fff6dc; text-decoration: underline; }
.menu-list .count { margin-left: 6px; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 7px; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700; }
/* The current section: a drop-down box with the page highlighted (as in the mockup). */
.menu-group.current .menu-list, .menu-group.open .menu-list {
  padding: 4px; background: rgba(46, 32, 22, 0.94); border: 2px solid #1e140a; border-radius: 4px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
}
.menu-group.current .menu-list li::before, .menu-group.open .menu-list li::before { content: none; }
.menu-group.current .menu-list li, .menu-group.open .menu-list li { padding-left: 0; text-indent: 0; }
.menu-group.current .menu-list a, .menu-group.open .menu-list a { display: flex; align-items: center; padding: 3px 8px; border-radius: 2px; }
.menu-group .menu-list a.active { background: linear-gradient(90deg, #4f6a2a, #3b5121); color: #fff6dc; text-decoration: none; }
/* Tablets and small laptops: the tiles stay in one row, the page lists open as drop-downs. */
@media (max-width: 1100px) {
  .mainmenu { gap: 8px; padding: 8px 10px 10px; }
  .menu-tile img { width: 48px; height: 34px; }
  .menu-title { font-size: 0.95rem; }
  .caret { display: inline; font-size: 0.8em; }
  .tile-count { display: inline-block; }
  .tile-count[hidden] { display: none; }
  .menu-list, .menu-group.current .menu-list { display: none; }
  .menu-group.open .menu-list { display: block; position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: max-content; min-width: min(230px, calc(100vw - 24px)); max-width: calc(100vw - 24px); margin: 0; font-size: 1.05rem; line-height: 1.6; }
  .menu-group:nth-child(n+4).open .menu-list { left: auto; right: 0; }
}

/* Club bar under the menu. */
.topbar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
header.topbar {
  margin: 0; padding: 8px 16px; border-radius: 8px; background: rgba(28, 22, 12, 0.82); border: 2px solid var(--wood-dark);
  box-shadow: 0 0 0 1px rgba(168, 132, 63, 0.45), 0 6px 16px rgba(0, 0, 0, 0.4);
}
.topbar .club { font-family: var(--font-ui); font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.club-identity { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.club-details { min-width: 0; overflow-wrap: anywhere; }
header.topbar { gap: 8px 16px; }
.club-chips .chip { font-size: 0.88rem; padding: 3px 10px; }
/* Bar: club on the left, the search in the middle of the bar whatever the two sides hold, cash, fans and the account links on the right. */
.topbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; min-width: 0; }
.topbar-actions .club-chips { flex-wrap: nowrap; gap: 6px; }
.topbar-actions .club-chips .chip { font-size: 0.82rem; padding: 2px 8px; white-space: nowrap; }
.topbar-actions .user-links { gap: 4px 8px; font-size: 0.9rem; }
/* Bar: the logo with the search right beside it on the left, the shield and the name of the club in the middle of the bar whatever the two sides hold,
   cash, fans and the account links on the right. Narrower than a wide laptop the wrapper disappears (its logo and search are items of the bar) and
   the search takes its own full-width row, as on a phone. */
.topbar-left { display: contents; }
header.topbar { min-width: 0; }   /* a long club name is cut inside the bar, it never widens it */
@media (max-width: 1099px) { header.topbar .topbar-left > .search { flex: 1 1 100%; max-width: none; order: 5; } }
@media (min-width: 1100px) {
  header.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px 16px; }
  header.topbar > .admin-controls { grid-column: 1 / -1; justify-self: end; }
  header.topbar > .topbar-left { grid-column: 1; display: flex; align-items: center; gap: 14px; justify-self: start; width: 100%; min-width: 0; }
  header.topbar > .topbar-left > .search { flex: 1 1 14rem; max-width: 22rem; }
  header.topbar > .club-identity { grid-column: 2; justify-self: center; max-width: 24rem; }
  header.topbar > .topbar-actions { grid-column: 3; justify-self: end; }
}
/* Header search: a combobox with a drop-down list; full width on its own row on phones. */
.search { position: relative; flex: 1 1 14rem; max-width: 22rem; min-width: 0; }
.search input { width: 100%; box-sizing: border-box; }
.search-results { position: absolute; z-index: 45; top: calc(100% + 4px); left: 0; right: 0; min-width: min(20rem, calc(100vw - 24px)); max-height: min(60vh, 24rem); overflow-y: auto; margin: 0; padding: 4px;
  list-style: none; background: #1a2410; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.search-results[hidden] { display: none; }
.search-head { padding: 6px 8px 2px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.search-option { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.search-option.active { background: rgba(226, 182, 90, 0.22); outline: 1px solid var(--accent); }
.search-sub { font-size: 0.85rem; }
.search-note { padding: 8px; font-size: 0.9rem; color: var(--muted); }
.search-note.empty { color: var(--text); }
@media (max-width: 760px) { .search { flex-basis: 100%; max-width: none; order: 5; } .search-results { max-height: 50vh; } }
.user-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.95rem; }
.user-links a { color: var(--muted); padding: 4px 2px; }
.user-links a:hover, .user-links a.active { color: var(--text); text-decoration: underline; }
.admin-controls { align-items: center; padding: 2px 8px; border: 1px dashed rgba(226, 182, 90, 0.5); border-radius: 8px; }
.admin-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; font-size: 0.85rem; }
.site-footer a { color: var(--muted); padding: 6px 4px; }
.site-footer a:hover { color: var(--text); }

/* The board: the page itself, a painted green panel in a rough wooden frame. */
.board {
  padding: 20px 22px 26px; border-radius: 12px; min-width: 0;
  background: linear-gradient(180deg, rgba(30, 40, 18, 0.55), rgba(18, 26, 10, 0.75)), url("/assets/tex-panel.jpg") center / 600px;
  border: 4px solid #2b2410; box-shadow: 0 0 0 2px rgba(120, 104, 52, 0.7), inset 0 0 40px rgba(0, 0, 0, 0.45), 0 14px 40px rgba(0, 0, 0, 0.6);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: rgba(20, 28, 12, 0.85); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 12px; font-size: 0.9rem; }
.chip b { color: var(--accent); font-variant-numeric: tabular-nums; }
.tabular-num { font-variant-numeric: tabular-nums; }

.grid { display: grid; gap: 16px; min-width: 0; }
.grid > * { min-width: 0; }
.summary-grid > * > :not(h1, h2, h3) { text-align: left; }
.summary-grid > * > :is(h1, h2, h3) { text-align: left; font-size: var(--text-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.summary-grid .stat { text-align: left; font-variant-numeric: tabular-nums; }
.summary-grid .stat small, .summary-grid .stat .unit { font-size: var(--text-sm, 0.8125rem); color: var(--muted); font-weight: 500; }
.summary-grid .cash-flow-row { justify-content: flex-start; }
/* Fit the available space, including grids nested inside another card. */
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(24rem, calc((100% - 16px) / 2))), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(18rem, calc((100% - 32px) / 3))), 1fr)); }
.grid.cols-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.grid.cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.card {
  background: linear-gradient(180deg, rgba(22, 32, 13, 0.82), rgba(16, 24, 9, 0.9)), url("/assets/tex-card.jpg") center / 500px;
  border: 2px solid #3d3c1c; border-radius: var(--radius-sm); padding: var(--space-4); width: 100%; min-width: 0; overflow-x: auto; overflow-wrap: anywhere;   /* a wide table scrolls inside its card */
  box-shadow: inset 0 0 0 1px rgba(190, 170, 100, 0.12), 0 4px 14px rgba(0, 0, 0, 0.35);
}
.card > :is(h1, h2, h3):first-child { margin-top: 0; }
.board > .main > .card:first-child, .board > .main > h1:first-child { margin-top: 0; }
.stat { font-size: 1.6rem; font-weight: 800; }
.stat small { font-size: 0.9rem; color: var(--muted); font-weight: 500; }

/* --- Tables --------------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.squad-table { table-layout: fixed; font-size: clamp(16px, 1.05vw, 20px); }
/* Narrow screens: no fixed layout and no attribute columns (they live in the player's drawer). */
@media (max-width: 1000px) {
  .squad-table { table-layout: auto; font-size: 0.95rem; }
  .squad-table .skill-col { display: none; }
  .squad-table :is(th, td) { padding: 8px 6px; }
}
.squad-table :is(th, td) { text-align: center; vertical-align: middle; padding: 9px 3px; white-space: normal; overflow-wrap: anywhere; }
.squad-table :is(th, td).player-col { padding-left: 8px; }
.squad-table th { font-size: clamp(13px, 0.85vw, 16px); letter-spacing: normal; padding-inline: 1px; white-space: nowrap; overflow-wrap: normal; }
.squad-table .stars { font-size: 0.9em; letter-spacing: 0; }
.squad-table .skill { min-width: 0; padding: 0; }
.squad-positions { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.squad-positions .pos { min-width: 0; padding: 1px 4px; font-size: 0.85em; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
/* Tables: every cell, header included, is centred; only the player-name column (marked .player-col by tables.mjs) is left-aligned. */
th, td { padding: 8px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.35); text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
table :is(th, td).player-col, table :is(th, td).email-col { text-align: left; }
th, td.num, td .badge, td .stars { white-space: nowrap; }
td.wrap { white-space: normal; overflow-wrap: anywhere; }
table { font-size: 0.95rem; }
/* Columns that leave on narrower screens; .only-sm shows their content inline instead. */
.only-sm { display: none; }
@media (max-width: 1200px) { .hide-md { display: none !important; } }
@media (max-width: 760px) { .hide-sm { display: none !important; } .only-sm { display: block; font-size: 0.85rem; } }
.table-wrap { overflow-x: auto; background:
  linear-gradient(90deg, rgba(22, 32, 13, 1) 30%, transparent) left / 24px 100% no-repeat local,
  linear-gradient(270deg, rgba(22, 32, 13, 1) 30%, transparent) right / 24px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.45), transparent) left / 12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.45), transparent) right / 12px 100% no-repeat scroll; }
/* My bids: status and raise button in one cell, the button pinned to the right edge, the status cut short (ellipsis) before the button shrinks. */
.cut-name { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a name is cut only when it is longer than this: the column takes what the name needs */
.bid-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.bid-status { flex: 1 1 5.5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bid-status .badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.bid-action .btn { flex: none; white-space: nowrap; }
.table-legend { font-size: 0.85rem; margin: 0 0 10px; }
.club-list :is(th, td) { padding: 8px 6px; }
.club-list td:not(.num) { white-space: normal; overflow-wrap: normal; }
/* The club cell of a standings table is a real table cell (it used to be display:flex inline, which took it out of the table: its own box, its own 1px offset, so the row rule broke
   there). The crest and the name are laid out by .team-with-crest inside it, so every cell of the row shares one top, one bottom and one continuous rule. */
.club-list td.align-club { padding-left: 0.5rem; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; position: sticky; top: 0; background: #1b2510; }
tbody tr:nth-child(odd) td { background: var(--row); }
tbody tr:nth-child(even) td { background: var(--row-2); }
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--text); }
tbody tr.me td { background: var(--row-hl); }
tbody tr.me td:first-child { box-shadow: inset 3px 0 var(--accent); }
tbody tr:hover td { background: #3a4a26; }
tr.clickable { cursor: pointer; }
tr.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.zone-up { --zone-color: var(--zone-up); }
.zone-play { --zone-color: var(--zone-play); }
.zone-down { --zone-color: var(--zone-down); }
:is(.zone-up, .zone-play, .zone-down) td:first-child { box-shadow: inset 3px 0 var(--zone-color); }
/* The legend under the table: the same colour as the band, as a small bar before the (translated) name. */
/* The league's two pickers: side by side where there is room, stacked on a phone. */
.league-pickers { display: flex; flex-wrap: nowrap; gap: 8px 12px; align-items: end; }   /* Division and Group on one row, on phones too */
.league-pickers .field { margin: 0; flex: 1 1 0; min-width: 0; }
.league-pickers select { width: 100%; min-height: 44px; }
#cup-region option.mine { font-weight: 700; }   /* the manager's own region, in bold in the list */
.cup-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.cup-heading h1 { margin: 0; overflow-wrap: anywhere; }
.podium-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 1.1rem; }
.cup-podium h3 { margin: 12px 0 6px; }
@media (max-width: 520px) { .league-pickers { width: 100%; } }
.zone-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; font-size: 0.9rem; color: var(--muted); }
.zone-legend li { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; }
.zone-swatch { flex: none; width: 14px; height: 14px; border-radius: 3px; background: var(--zone-color); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
/* High-contrast / forced-colours modes and printing replace or drop backgrounds and shadows: the band colours are the information here, so they stay. */
.zone-swatch, :is(.zone-up, .zone-play, .zone-down) td:first-child { forced-color-adjust: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.zone-up td { background-image: linear-gradient(90deg, rgba(110, 170, 60, 0.28), transparent 70%); }
.zone-down td { background-image: linear-gradient(90deg, rgba(150, 50, 30, 0.45), rgba(110, 36, 20, 0.25)); }
.zone-icon { display: inline-block; margin-left: 4px; font-size: 0.65rem; line-height: 1; vertical-align: middle; color: var(--zone-color); }
.club-list .pos-cell { white-space: nowrap; width: 44px; min-width: 44px; text-align: center; }

.stars { color: var(--accent); letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: #5a5a34; }
/* Half star: the glyph itself painted half gold, half off (an overlay clipped to 50% drifted with letter-spacing). */
.stars .half {
  display: inline-block; letter-spacing: 0; margin-right: 1px; color: transparent;
  background: linear-gradient(90deg, var(--accent) 50%, #5a5a34 50%); -webkit-background-clip: text; background-clip: text;
}
.squad-table .stars .half { margin-right: 0; }
.pos { display: inline-block; min-width: 34px; text-align: center; padding: 1px 6px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 700; background: #29453a; }
.pos.gk { background: #7b5a00; } .pos.d { background: #1f4f7a; } .pos.m { background: #2e6b3e; } .pos.f { background: #7a2b2b; }
.skill { display: inline-block; min-width: 24px; text-align: center; border-radius: 5px; padding: 0 4px; font-weight: 600; }
.skill.s1 { color: #ff8d8d; } .skill.s2 { color: #ffc27a; } .skill.s3 { color: var(--text); } .skill.s4 { color: #8ee6a7; } .skill.s5 { color: var(--accent); }
.badge { display: inline-block; font-size: 0.9rem; padding: 1px 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.badge.bad { border-color: var(--bad); color: var(--bad-text); }
.badge.good { border-color: var(--good); color: var(--good); }
.badge.warn { border-color: var(--warn); color: var(--warn); }
/* Empty state of a card or list: one sentence and the action that fills it. */
.empty { display: grid; gap: 10px; justify-items: start; padding: 6px 0; }
.empty p { margin: 0; }
/* Vertical rhythm for a page: cards stacked in the main column. */
.stack > * + * { margin-top: 16px; }
/* Keyboard focus on everything clickable, not only inputs. */
.menu-tile:focus-visible, .menu-list a:focus-visible, a.news-item:focus-visible, .tabs a.tab:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Auth ----------------------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth .card { width: min(560px, 100%); box-shadow: var(--shadow); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tabs button, .tabs a.tab { white-space: nowrap; }
.tabs button { flex: 1 1 auto; padding: 9px 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.2); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; }
.tabs button.active { background: linear-gradient(180deg, #c79a45, #8d6426); color: #fff4d6; border-color: #e7c57a; }
.tabs a.tab { padding: 6px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; text-decoration: none; color: inherit; background: rgba(0, 0, 0, 0.2); }
.tabs a.tab.active { background: linear-gradient(180deg, #c79a45, #8d6426); color: #fff4d6; border-color: #e7c57a; }
.card > .tabs { margin: 12px 0 0; flex-wrap: wrap; }
.error { color: var(--bad-text); min-height: 1.4em; font-size: 0.9rem; }

/* --- Tactics ---------------------------------------------------------------------------- */
.tactics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.85fr); gap: 24px; align-items: start; }
.tactics > * { min-width: 0; }
.pitch {
  container-type: inline-size;
  position: relative; aspect-ratio: 68 / 92; width: 100%; max-width: 640px; margin: 0 auto; border-radius: 12px;
  background: repeating-linear-gradient(0deg, rgba(20, 55, 18, 0.26) 0 10%, rgba(100, 123, 42, 0.15) 10% 20%), url('/assets/tex-tile.jpg') center / cover;
  border: 4px solid var(--wood-edge); box-shadow: inset 0 0 0 2px rgba(243, 232, 204, 0.3), inset 0 0 36px rgba(25, 34, 15, 0.35), var(--shadow); overflow: hidden; user-select: none;
}
.pitch-tag { position: absolute; left: 50%; top: 53.5%; transform: translate(-50%, -50%); white-space: nowrap; padding: 1px 10px; border-radius: 999px; background: rgba(20, 16, 8, 0.78); color: #fff6dc; font-size: 0.85rem; pointer-events: none; }   /* the middle of the pitch, under the players (they paint over it when the middle is taken) */
.bench-title { max-width: 640px; margin: 14px auto 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.orders-card { margin-top: 16px; }
/* The orders card now sits in the narrower right column: the sentence wraps (the "nowrap" row of the wide screens would crush its selects). */
.orders-card .order-form, .orders-card .order-params { flex-wrap: wrap; }
.orders-card .order-form select { min-width: 7rem; }
.orders-card .order-form input { min-width: 4.5rem; }
.subs-tag { font-size: 0.9rem; font-weight: 400; }
.tactics-status { font-size: 0.9rem; }
.pitch .marking { position: absolute; border: 2px solid var(--pitch-line); pointer-events: none; }
.pitch .halfway { left: 0; right: 0; top: 50%; border-width: 2px 0 0; }
.pitch .circle { left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.pitch .box-top { left: 22%; right: 22%; top: 0; height: 15%; border-top: 0; }
.pitch .box-bottom { left: 22%; right: 22%; bottom: 0; height: 15%; border-bottom: 0; }
.slot {
  position: absolute; width: 19%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px;
  font-size: 0.9rem; text-align: center; cursor: pointer;
}
.slot .shirt {
  width: clamp(58px, 17cqw, 94px); height: clamp(58px, 17cqw, 94px);
  border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: clamp(16px, 4.5cqw, 26px);
  background: rgba(0, 0, 0, 0.25); border: 2px dashed rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.75);
}
.slot.filled .shirt { background: var(--accent); color: var(--accent-ink); border: 2px solid #fff; }
.slot.filled.gk .shirt { background: #ff9f1c; }
/* The portrait fills the disc (its size follows the fluid shirt); the shirt number sits on its edge. */
.slot.filled .shirt { position: relative; padding: 0; }
.slot .shirt .avatar { width: 100%; height: 100%; border: 0; }
.slot .shirt-number { position: absolute; right: -4px; bottom: -4px; min-width: 1.6em; padding: 0 4px; border-radius: 999px; font-size: 0.7em; line-height: 1.5;
  background: var(--avatar-bg, var(--accent-ink)); color: var(--avatar-ink, var(--accent-light)); border: 1px solid var(--avatar-ink, var(--accent)); }
.player-row .person { display: flex; max-width: 100%; }
.slot.empty .shirt {
  padding: 2px;
  font-size: clamp(14px, 4cqw, 23px);
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
}
.slot .label { background: rgba(0, 0, 0, 0.55); padding: 1px 6px; border-radius: var(--radius-sm); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.over .shirt, .bench-slot.over, .player-row.over { outline: 3px solid #fff; outline-offset: 2px; }
.slot.selected .shirt, .player-row.selected { outline: 3px solid var(--accent); outline-offset: 2px; }
.slot.empty:not(.over) { opacity: 0.55; }
.slot.empty:hover { opacity: 1; }
.mood { font-size: 0.9rem; font-weight: 700; }
.mood.m0 { color: #c8ffd9; } .mood.m1 { color: #fff3a0; } .mood.m2 { color: #ffd27a; } .mood.m3 { color: #ffab7a; } .mood.m4 { color: #ff8d8d; }
.bench { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 640px; margin: 14px auto 0; }
.bench-slot { overflow-wrap: anywhere; min-height: 64px; border: 2px dashed var(--line); border-radius: 8px; display: grid; place-items: center; text-align: center; font-size: 0.9rem; padding: 4px; cursor: pointer; }
.bench-slot.filled { border-style: solid; background: var(--panel-2); }
.player-list { max-height: 60vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.player-row { display: grid; grid-template-columns: calc(var(--position-count, 2) * 2.6rem + 8px) minmax(0, 1fr) auto auto; gap: 14px; align-items: center; height: 64px; padding: 7px 10px; border-bottom: 1px solid var(--line); cursor: grab; background: var(--panel); }
.player-positions { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; white-space: nowrap; }
.player-positions .pos { flex-shrink: 0; }
.player-row .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phones: the name column was ~60 px (nothing left for the name once a status icon came); tighter columns give it room, the icons keep theirs. */
@media (max-width: 560px) {
  .player-row { grid-template-columns: calc(var(--position-count, 2) * 2.05rem + 2px) minmax(0, 1fr) auto auto; gap: 8px; padding: 7px 6px; }
  .player-row .avatar { --avatar-size: 26px !important; }
  .player-row .person { gap: 6px; }
  .player-row .stars { font-size: 0.7rem; letter-spacing: 0; }
}
.player-row:hover { background: var(--panel-2); }
.player-row.used { opacity: 0.45; }
.tactic-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.order-form, .order-params { align-items: center; justify-content: flex-start; }
.order-form { gap: 10px; margin-bottom: 16px; overflow-wrap: normal; white-space: nowrap; }   /* keep "Quando", "sai", "entra" whole */
.order-form select { width: auto; min-width: 0; max-width: min(100%, 14rem); flex: 0 1 auto; }
.order-params { min-width: 0; max-width: 100%; }
.order-form .btn { align-self: center; min-height: 44px; flex: none; }
.inline-pick { flex-wrap: nowrap; align-items: center; }
.inline-pick > :is(select, input) { width: auto; min-width: 0; max-width: min(100%, 22rem); flex: 1 1 auto; }
.inline-pick > .btn { flex: none; white-space: nowrap; }
.sell-guaranteed { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.9rem; cursor: pointer; }
.sell-guaranteed input { width: auto; margin: 0; }
.market-filters { align-items: center; }
.market-filters > :is(input, select) { width: auto; min-width: 0; max-width: min(100%, 22rem); flex: 1 1 110px; }
.market-filters > select { flex-basis: 190px; width: auto; max-width: min(100%, 22rem); }
@media (min-width: 900px) {
  .market-filters { flex-wrap: nowrap; }
  .order-form, .order-params { flex-wrap: nowrap; }
  .order-form { gap: 8px; }
  .order-params { flex: 0 1 auto; }
}

/* --- Match --------------------------------------------------------------------------- */
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px; text-align: center; padding: 20px; }
.match-date { font-size: 0.9rem; margin-bottom: 4px; }
.match-date[hidden] { display: none; }
.match-date .date-short { display: none; }
.match-date { white-space: nowrap; }
@media (max-width: 560px) { .match-date .date-long { display: none; } .match-date .date-short { display: inline; } }
.scoreboard .team { font-size: 1.2rem; font-weight: 800; }
.scoreboard .score { font-size: 2.6rem; font-weight: 900; letter-spacing: 0.08em; color: var(--accent); font-variant-numeric: tabular-nums; }
.timeline { display: grid; gap: 8px; }
.event { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 9px 12px; border-radius: 8px; background: var(--panel-2); border-left: 4px solid transparent; }
.event.home { border-left-color: #6fb7ff; }
.event.away { border-left-color: #ff9f6f; }
.event.goal { background: rgba(244, 196, 48, 0.16); border-left-color: var(--accent); font-weight: 600; }
.event .min { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.event .lines p { margin: 0 0 2px; }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; font-size: 0.9rem; }
.bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line); }
.bar span:first-child { background: #6fb7ff; }
.bar span:last-child { background: #ff9f6f; }
.live-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.clock { font-size: 1.1rem; font-weight: 800; color: var(--accent); min-width: 56px; }

/* --- Youth --------------------------------------------------------------------------- */
.candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 14px; }
.skills-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; font-size: 0.9rem; }
.skills-grid div { display: flex; justify-content: space-between; }

/* --- Drawer / toasts ------------------------------------------------------------------ */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); background: #1a2410 url("/assets/tex-card.jpg") center / 500px; border-left: 1px solid var(--line); box-shadow: var(--shadow); padding: 20px; overflow-y: auto; z-index: 20; }
.drawer:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.main:focus, .modal:focus { outline: none; }   /* focus lands here by script (new page, new dialog), not by a control */
.backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 19; }
#toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 30; }
.toast { background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--good); padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); max-width: 360px; }
.toast.error { border-left-color: var(--bad); }
.toast.warn { border-left-color: var(--warn); }
.loading { color: var(--muted); padding: 30px; text-align: center; }

@media (max-width: 1100px) {
  .tactics { grid-template-columns: 1fr; }
  .grid.cols-3-2, .grid.cols-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .shell { padding: 8px 8px 30px; gap: 10px; }
  .mainmenu { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 8px 6px; }
  .menu-tile { padding: 2px 2px 4px; }
  .menu-tile img { width: 34px; height: 26px; }
  .menu-title { font-size: 0.66rem; line-height: 1.1; letter-spacing: -0.01em; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  .table-legend { display: none; }
  .tile-count { right: -10px; top: -8px; }
  .menu-group:nth-child(n+3).open .menu-list { left: auto; right: 0; }
  header.topbar { padding: 8px 10px; }
  .topbar .club { font-size: 1.05rem; }
  .club-chips { gap: 6px; }
  .club-chips .chip { font-size: 0.8rem; padding: 2px 8px; }
  .board { padding: 14px 10px 20px; }
  .bench-slot { overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; }
  /* Phones: table cells never wrap (the table scrolls inside its card instead); only .wrap cells do. */
  table :is(th, td), .squad-table :is(th, td) { white-space: nowrap; overflow-wrap: normal; }
  td.wrap, .squad-table td.wrap { white-space: normal; overflow-wrap: anywhere; }
  .squad-positions, .pos { flex-wrap: nowrap; white-space: nowrap; }
  .grid.cols-2, .grid.cols-3, .grid.cols-3-2, .grid.cols-1-2, .tactic-controls { grid-template-columns: 1fr; }
  .slot { font-size: 0.9rem; }
}

/* Stadium */


/* News */
.news { display: grid; gap: var(--space-1, 4px); }
.news-item { display: flex; gap: var(--space-3, 12px); align-items: flex-start; padding: 10px var(--space-2, 8px); border-radius: var(--radius-md, 8px); }
.news-item.unread { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.news-item.selected { background: color-mix(in srgb, var(--accent) 18%, var(--surface-card, var(--panel-2))); outline: 1px solid var(--surface-border-soft, var(--line)); }
.news-icon { font-size: 1.2rem; line-height: 1.4; }

/* Messages and chat */
.thread {
  display: flex; flex-direction: column; gap: var(--space-2, 8px); max-height: 55vh; overflow-y: auto; padding: var(--space-3, 12px);
  background: var(--surface-card-raised, rgba(14, 20, 8, 0.75)); border: 1px solid var(--line); border-radius: var(--radius-md, 8px);
}
.bubble { align-self: flex-start; max-width: 75%; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); padding: var(--space-2, 8px) var(--space-3, 12px); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); }
.chat-line {
  padding: 6px 10px; border-radius: var(--radius-sm); background: rgba(30, 42, 18, 0.45);
  border-left: 3px solid var(--wood-edge); overflow-wrap: anywhere; font-size: 0.95rem; line-height: 1.45;
}
.chat-line:hover { background: rgba(38, 54, 23, 0.65); }
.chat-line b { color: var(--accent-light); }
.chat-input-bar { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
textarea { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; margin-bottom: 8px; }


/* Dialogs */
.modal { position: fixed; z-index: 60; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  overflow-y: auto; background: #1a2410 url("/assets/tex-card.jpg") center / 500px; border: 2px solid var(--wood-edge); border-radius: 8px; padding: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.modal label.field { display: block; margin-top: 10px; }
.modal select, .modal textarea, .modal input { width: 100%; box-sizing: border-box; }
.report-btn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 0.9rem; }
.report-btn:hover { color: var(--bad-text); }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }

/* Training */
tbody tr.selected td { background: var(--row-hl); }
tbody tr.selected td:first-child { box-shadow: inset 3px 0 var(--accent); }
select.changed { border-color: var(--accent); }
.training-batch select { width: auto; min-width: 0; max-width: 220px; }
.training-batch { flex-wrap: wrap; }
.training-table { table-layout: fixed; width: 100%; }
.training-table :is(th, td) { text-align: center; vertical-align: middle; }
.training-table th.col-fixed-1, .training-table td.player-cell { text-align: left; }
.training-table input[type="checkbox"] { width: auto; margin: 0; vertical-align: middle; }
.training-table select { text-align: center; max-width: 9rem; text-overflow: ellipsis; }
/* The long things in the squad table are cut with an ellipsis (the whole text is in the title) so the table fits its card: the player's name and status, the skills that went up or down. */
.training-table :is(th, td) { padding-inline: 8px; }
.training-table .player-cell .name-status { max-width: 16rem; }
.training-table .player-cell .person { display: inline-flex; width: 100%; gap: 8px; }
.training-table .player-cell .avatar { flex: 0 0 auto; --avatar-size: 30px; }
.training-table tbody tr { height: 44px; }
.training-table tbody td { border-bottom: 1px solid rgba(130, 178, 154, 0.1); }
.training-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
.training-table select { min-height: 36px; padding: 4px 8px; font-size: 13px; }
.training-table thead th {
  height: 34px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.training-table :is(th, td):nth-child(1) { width: 25%; }
.training-table :is(th, td):nth-child(2) { width: 12%; }
.training-table :is(th, td):nth-child(3) { width: 7%; }
.training-table :is(th, td):nth-child(4) { width: 8%; }
.training-table :is(th, td):nth-child(5) { width: 16%; }
.training-table td.player-cell { width: 25%; }
.training-table .player-cell .person > :last-child { min-width: 0; }
.training-mobile-list { display: none; }
.skill-delta { display: inline-block; max-width: 6.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
td select { width: auto; }
.training-programs-card table { table-layout: fixed; width: 100%; max-width: 820px; }
.training-programs-card td:first-child { width: 160px; max-width: 180px; text-align: left; padding-left: 8px; white-space: nowrap; }
.training-programs-card td.wrap { text-align: left; padding-left: 16px; color: var(--muted); }

/* Dense management tables (Treino, Liga, Mercado) */
.dense-table-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.dense-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--text-sm, 0.8125rem);
}
table.dense-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 34px;
  background: #152414;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.dense-table tbody tr {
  height: 34px;
}
table.dense-table :is(th, td) {
  padding: 4px 6px;
  vertical-align: middle;
}
table.dense-table :is(th, td).num,
table.dense-table :is(th, td).attr-cell {
  width: 44px;
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.dense-table :is(th, td).skill-col {
  width: 34px;
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
table.dense-table :is(th, td).pos-cell,
table.dense-table :is(th, td).pos,
table.dense-table :is(th, td).action-cell {
  width: 38px;
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
table.dense-table :is(th, td).score-cell {
  width: 76px;
  min-width: 64px;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
table.dense-table thead th.team-name,
table.dense-table tbody td.team-name {
  width: auto;
  text-align: left;
}
table.dense-table thead th.team-home,
table.dense-table tbody td.team-home {
  text-align: left;
}
table.dense-table thead th.team-away,
table.dense-table tbody td.team-away {
  text-align: right;
}
/* The national team's called-up table: the position and star columns were narrower than their content, so the
   badges and stars ran into the age and the club (a two-position player showed "MC OMC 24y" glued together). */
table.dense-table.national-squad-table :is(th, td).pos-cell {
  width: 5.6rem;
}
table.dense-table.national-squad-table :is(th, td).age-cell {
  width: 4.6rem;
  white-space: nowrap;
}
table.dense-table.national-squad-table :is(th, td).rec-cell {
  width: 5rem;
  min-width: 5rem;
  text-align: center;
  white-space: nowrap;
}
table.dense-table.national-squad-table td.team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  table.dense-table.national-squad-table :is(th, td).age-cell { display: none; }
}
/* Regional teams ranking: four columns fit the card, no sideways scroll, and the coach is just the club's name. */
.national-ranking-card .dense-table-wrap { overflow-x: hidden; }
table.dense-table.national-ranking-table :is(th, td).pos-cell { width: 2rem; }
table.dense-table.national-ranking-table :is(th, td).rank-cell { width: 4rem; }
table.dense-table.national-ranking-table :is(th, td).coach-cell { width: 6rem; }
table.dense-table.national-ranking-table td.team-name,
table.dense-table.national-ranking-table td.coach-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  table.dense-table.national-ranking-table :is(th, td) { padding-inline: 4px; }
  table.dense-table.national-ranking-table :is(th, td).coach-cell { width: 5.4rem; }
}

table.dense-table .crest,
table.dense-table .flag,
.dense-table-wrap .crest,
.dense-table-wrap .flag {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  --s: 24px;
  --flag-w: 24px;
  --flag-h: 16px;
}

table.dense-table .team-with-crest,
table.dense-table .team-with-flag,
.dense-table-wrap .team-with-crest,
.dense-table-wrap .team-with-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

table.dense-table td.team-home .team-with-crest,
table.dense-table td.team-home .team-with-flag,
.dense-table-wrap td.team-home .team-with-crest,
.dense-table-wrap td.team-home .team-with-flag {
  flex-direction: row;
  justify-content: flex-start;
}

table.dense-table td.team-away .team-with-crest,
table.dense-table td.team-away .team-with-flag,
.dense-table-wrap td.team-away .team-with-crest,
.dense-table-wrap td.team-away .team-with-flag {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

table.dense-table .team-with-crest .team-label,
table.dense-table .team-with-flag .team-label,
.dense-table-wrap .team-with-crest .team-label,
.dense-table-wrap .team-with-flag .team-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.dense-table td.team-away .team-label,
.dense-table-wrap td.team-away .team-label {
  text-align: right;
}
table.dense-table th.col-fixed-1,
table.dense-table td.col-fixed-1 {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
  white-space: nowrap;
}
table.dense-table thead th.col-fixed-1 {
  z-index: 3;
  background: #152414;
}
table.dense-table tbody tr:nth-child(odd) td.col-fixed-1 {
  background: var(--row);
}
table.dense-table tbody tr:nth-child(even) td.col-fixed-1 {
  background: var(--row-2);
}
table.dense-table tbody tr.selected td.col-fixed-1,
table.dense-table tbody tr:hover td.col-fixed-1 {
  background: var(--row-hl);
}
table.dense-table th.col-fixed-1::after,
table.dense-table td.col-fixed-1::after {
  content: '';
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 5px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35), transparent);
}
table.dense-table .person {
  max-width: 14rem;
}
table.dense-table .person > :last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  table.dense-table .person {
    max-width: 9rem;
  }
}
table.staff-table {
  table-layout: fixed;
  width: 100%;
}
table.staff-table :is(th, td):nth-child(1) { width: 180px; min-width: 160px; }
table.staff-table :is(th, td):nth-child(2) { width: 50px; min-width: 45px; text-align: center; }
table.staff-table :is(th, td):nth-child(n+3):nth-child(-n+9) { width: 44px; min-width: 40px; text-align: center; }
table.staff-table :is(th, td):nth-child(10) { width: 110px; min-width: 95px; text-align: right; }
table.staff-table :is(th, td):nth-child(11) { width: 120px; min-width: 105px; text-align: center; }
table.staff-table :is(th, td):nth-child(12) { width: 80px; min-width: 75px; text-align: center; }
.staff-table .col-fixed-1 {
  min-width: 130px;
  max-width: 200px;
}
@media (max-width: 760px) {
  .staff-table .col-fixed-1 {
    min-width: 110px;
    max-width: 150px;
  }
}

/* Cup layout contract: max-width for match cards, eliminate void between teams and score */
/* Regional cup: the summary, the run, the podium and the results are one column, as wide as each other (680 px) and with the same edges. */
.stadium-app .board .card.cup-strip,
.stadium-app .board .card.cup-results-card,
.stadium-app .board .card.cup-run-card,
.stadium-app .board .card.cup-podium,
.stadium-app .board .card.intl-ranking-card,
.cup-strip,
.cup-results-card,
.cup-run-card,
.cup-podium,
.intl-ranking-card {
  max-width: 680px;
  margin-inline: auto;
}
.intl-ranking-card table.dense-table :is(th, td):last-child {
  width: 120px;
}
.intl-ranking-card table.dense-table {
  table-layout: fixed;
}
.stadium-app .board .card.national-ranking-card table.dense-table :is(th, td):nth-child(3),
.national-ranking-card table.dense-table :is(th, td):nth-child(3) {
  width: 76px;
}

/* Market table layout at 1600px */
table.dense-table.market-table {
  table-layout: fixed;
  width: 100%;
}
table.dense-table.market-table :is(th, td):first-child {
  width: auto;
  min-width: 160px;
}
table.dense-table.market-table :is(th, td):nth-child(2) {
  width: 120px;
  min-width: 120px;
  text-align: center;
  white-space: nowrap;
}
table.dense-table.market-table td:nth-child(2) .market-positions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
table.dense-table.market-table :is(th, td):nth-child(3) {
  width: 72px;
  min-width: 72px;
  text-align: center;
  white-space: nowrap;
}
table.dense-table.market-table :is(th, td):nth-child(4) {
  width: 54px;
  min-width: 54px;
  text-align: center;
}
table.dense-table.market-table :is(th, td):nth-child(5) {
  width: 72px;
  min-width: 72px;
  text-align: right;
}
table.dense-table.market-table :is(th, td).market-col-seller,
table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(6) {
  width: 80px;
  max-width: 90px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.dense-table.market-table :is(th, td).market-col-price,
table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(7) {
  width: 130px;
  min-width: 120px;
  text-align: right;
  white-space: nowrap;
}
table.dense-table.market-table :is(th, td).market-col-bids,
table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(8) {
  width: 55px;
  min-width: 50px;
  text-align: center;
}
table.dense-table.market-table :is(th, td).market-col-ends,
table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(9) {
  width: 80px;
  min-width: 75px;
  text-align: right;
  white-space: nowrap;
}
table.dense-table.market-scouting-table :is(th, td).market-col-club,
table.dense-table.market-scouting-table :is(th, td):nth-child(6) {
  width: 200px;
  max-width: 210px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.dense-table.market-scouting-table :is(th, td).market-col-agent-price,
table.dense-table.market-scouting-table :is(th, td):nth-child(7) {
  width: 135px;
  min-width: 125px;
  text-align: right;
  white-space: nowrap;
}
table.dense-table.market-table :is(th, td):last-child {
  width: 115px;
  min-width: 105px;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 760px) {
  table.dense-table.market-table {
    min-width: 580px;
  }
}
.gm-market-stats.market-strip {
  max-width: 820px;
  margin-inline: auto;
}
.cup-results-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  justify-content: space-between;
  margin-bottom: var(--space-3, 12px);
}
.cup-results-topbar h2 {
  margin: 0;
  white-space: nowrap;
}
.cup-results-topbar select {
  width: auto;
  max-width: min(100%, 16rem);
}

@media (max-width: 760px) {
  .training-table { display: none; }
  .training-mobile-list { display: grid; gap: 8px; padding-bottom: 84px; }
  .training-player-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
  }
  .training-mobile-player,
  .training-mobile-positions,
  .training-mobile-results { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .training-mobile-player .person { display: inline-flex; gap: 8px; min-width: 0; }
  .training-mobile-player .person > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .training-mobile-player .avatar { flex: 0 0 auto; --avatar-size: 34px; }
  .training-mobile-age { color: var(--muted); font-size: .78rem; white-space: nowrap; }
  .training-mobile-positions { justify-content: flex-start; }
  .training-mobile-positions .stars { margin-left: auto; }
  .training-mobile-program { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
  .training-mobile-program select { width: 100%; min-width: 0; min-height: 38px; }
  .training-mobile-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); color: var(--muted); font-size: .75rem; }
  .training-mobile-results > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Page-specific financial details and painted stadium. */
.finance-amount { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.cash-flow { display: grid; gap: 10px; margin-top: 18px; }
.cash-flow-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cash-flow-row > :last-child { font-variant-numeric: tabular-nums; }
.cash-split { display: grid; gap: 10px; margin: 8px 0 12px; }
.cash-split .cash-available { border-bottom: 0; padding-top: 2px; font-size: 1.15rem; }
.cash-hint { font-size: 0.9rem; margin: 6px 0 0; }
/* Finances: full-width cash overview followed by weekly flow and season ledger. */
.finance-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: stretch; }
.finance-columns > * { min-width: 0; }
.finance-columns > .fin-cash { grid-column: 1 / -1; }
.finance-columns > .fin-wallet { grid-column: 1 / -1; }   /* the history table needs the whole width */
@media (max-width: 1190px) { .finance-columns { grid-template-columns: minmax(0, 1fr); } }
.academy-upgrade { margin-top: 12px; }
.stadium-art { margin: 18px 0; border: 4px solid var(--wood-edge); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow); }
.stadium-art img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; }
/* Illustrated sponsor combobox. */
.sponsor-contract, .sponsor-new { overflow: visible; }   /* the brand picker's list opens over the card edge */
.sponsor-top.grid.cols-2 { align-items: stretch; }   /* contract and goals side by side, both as tall as the taller one */
.deadline-left { color: var(--bad-text); font-weight: 600; }
.sponsor-top .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* the four goal selects: two above, two below, at every width (auto-fit made four in a row on a wide screen) */
@media (max-width: 760px) { .sponsor-top .grid.cols-2 { grid-template-columns: minmax(0, 1fr); } }
#auto-renew { width: auto; flex: 0 0 auto; }
.sponsor-picker { position: relative; width: 100%; min-width: 0; }
.sponsor-trigger { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #141c0c; border: 1px solid var(--wood-edge); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.sponsor-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sponsor-trigger > span:not(.sponsor-logo) { overflow-wrap: anywhere; }
.sponsor-caret { margin-left: auto; }
.sponsor-logo { display: inline-block; flex: 0 0 60px; width: 60px; height: 60px; border-radius: 8px; background: #e0d1b2 url('/assets/sponsor-logos-guache.webp') 0 0 / 400% 500% no-repeat; }
.sponsor-options { position: absolute; z-index: 45; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; max-height: min(420px, 55vh); overflow-y: auto; border: 2px solid var(--wood-edge); border-radius: 8px; background: #1a2410; box-shadow: var(--shadow); }
.sponsor-options[hidden] { display: none; }
.sponsor-option { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.sponsor-option.highlighted, .sponsor-option:hover { background: var(--panel-2); }
.sponsor-option[aria-selected="true"] { box-shadow: inset 3px 0 var(--accent); }
.sponsor-current { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }


/* Stat Cards & Outcome Badges */
.stat-card { display: flex; flex-direction: column; }
.stat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.stat-header h3 { margin: 0; }
.stat-footer { margin: 6px 0 0; font-size: 0.88rem; color: var(--muted); }

.outcome-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 800; font-size: 0.78rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.outcome-badge.win { background: #2f6b28; color: #d4ffd0; border: 1px solid var(--good); }
.outcome-badge.draw { background: #5c4416; color: #ffebaa; border: 1px solid var(--warn); }
.outcome-badge.loss { background: #61221b; color: #ffd2cb; border: 1px solid var(--bad); }
.placar-box { font-weight: 800; color: #fff6dc; }

/* Stadium Hero Card */
.stadium-hero-card {
  border-radius: 8px;
  border: 3px solid var(--wood-dark);
  box-shadow: 0 0 0 2px rgba(168, 132, 63, 0.55), 0 10px 28px rgba(0, 0, 0, 0.55);
  position: relative; overflow: hidden;
}
.stadium-hero-media { position: relative; width: 100%; overflow: hidden; }
.stadium-hero-media > img { width: 100%; height: auto; max-height: 380px; object-fit: cover; display: block; }
.stadium-hero-media > img[hidden] { display: none; }
/* The canvas: the one box of the complex. As wide as the card but never taller than the window (the whole picture stays visible, without crop),
   centred when the window is the limit; the scene fills it and the layer of buttons covers exactly the same area. */
.stadium-canvas { position: relative; width: min(100%, calc((100vh - 130px) * 16 / 9)); min-width: min(100%, 320px); margin-inline: auto; }
.stadium-canvas[hidden] { display: none; }
/* The layered complex: a 16:9 box that keeps its place from the first paint; each layer sits at its rectangle of the canvas (percentages). */
.aerial { position: relative; width: 100%; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; }
.aerial img { position: absolute; display: block; max-width: none; }
.aerial-base { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aerial-layer { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); }
/* The name, the seats and the works above the picture (nothing is drawn over the art). */
.stadium-hero-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 12px 16px; background: rgba(20, 16, 8, 0.55); border-bottom: 1px solid rgba(168, 132, 63, 0.35); }
.stadium-hero-caption h2 { margin: 0; color: #fff6dc; }
.stadium-hero-caption p { margin: 0; }
/* The facilities as buttons over the picture: a layer the size of the scene, each button at its rectangle (percentages of the canvas). Transparent until
   hovered or focused; then a thin edge and a light tint (the art stays visible) and the label "Name · Level". */
.hotspots { position: absolute; inset: 0; z-index: 3; }
.hotspot { position: relative; font: inherit; color: #fff6dc; background: transparent; cursor: pointer; padding: 0; }
.hotspot.on-image { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); border: 2px solid transparent; border-radius: var(--radius-md); transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  /* The aura that says "clickable": a thin white ring with a dark hairline outside it (so it reads on light grass and road as well as on dark ground) and a soft white halo. Nothing inside the area: the art stays clean. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 2px rgba(20, 16, 8, 0.32), 0 0 18px 4px rgba(255, 255, 255, 0.34); }
.hotspot.on-image:hover, .hotspot.on-image:focus-visible { border-color: var(--accent-light); background: rgba(245, 214, 138, 0.12); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 3px rgba(20, 16, 8, 0.4), 0 0 30px 9px rgba(255, 255, 255, 0.5); }
.hotspot:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }
.hotspot-label { padding: 3px 10px; border: 1px solid var(--accent); border-radius: 999px; background: rgba(20, 16, 8, 0.9); color: #fff6dc; font-size: 0.85rem; line-height: 1.25; text-shadow: none; }
.hotspot.on-image .hotspot-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 96%; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.hotspot.on-image:hover .hotspot-label, .hotspot.on-image:focus-visible .hotspot-label, .hotspot.on-image.building .hotspot-label { opacity: 1; }
.hotspot.building { border-style: dashed; border-color: var(--warn); background: rgba(236, 170, 69, 0.14); }
.hotspot-site { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--warn); color: var(--color-accent-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
/* The facilities with no rectangle (irrigation and heating act on the pitch), and all of them when there is no art: a compact row under the picture. */
.facility-extras { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(168, 132, 63, 0.35); }
.facility-extras:empty { display: none; }
@media (min-width: 761px) { .facility-extras.on-picture { display: none; } }   /* every button is on the picture: the row under it is for phones only */
.hotspot.compact { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(20, 28, 12, 0.5); }
.hotspot.compact:hover { border-color: var(--accent-light); background: rgba(245, 214, 138, 0.12); }
.hotspot.compact .hotspot-label { position: static; padding: 0; border: 0; background: none; font-size: 0.9rem; }
.hotspot.compact.building { border-style: dashed; }
.hotspot.compact .hotspot-site { position: static; width: 26px; height: 26px; flex: none; }
.hotspot.compact .hotspot-site svg { width: 18px; height: 18px; }
/* Phones and touch screens have no hover: the picture shows a small level badge on each facility (a tap opens the dialog) and the full "Name · Level"
   lines are in the list under it. */
.hotspot-tag { display: none; }
.hotspot.compact.mobile-only { display: none; }
.facility-extras.no-art .hotspot.compact.mobile-only { display: inline-flex; }
@media (max-width: 760px), (hover: none) {
  .hotspot.on-image .hotspot-label { display: none; }
  .hotspot.on-image { border-color: rgba(245, 214, 138, 0.35); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 2px rgba(20, 16, 8, 0.32), 0 0 9px 2px rgba(255, 255, 255, 0.3); }
  .hotspot.on-image .hotspot-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; padding: 1px 2px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: rgba(20, 16, 8, 0.92); color: #fff6dc; line-height: 1.1; text-align: center; pointer-events: none; }
  .hotspot.on-image .hotspot-tag b { font-size: 0.56rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hotspot.on-image .hotspot-tag small { font-size: 0.56rem; color: var(--accent-light); white-space: nowrap; }
  .hotspot.compact.mobile-only { display: inline-flex; }
  .hotspot-site { width: 22px; height: 22px; left: 3px; top: 3px; }
  .hotspot-site svg { width: 16px; height: 16px; }
}
.stadium-hero-badge { display: flex; align-items: center; gap: 6px; }
.stadium-rename { pointer-events: auto; min-height: 0; padding: 2px 8px; font-size: 0.8rem; line-height: 1.4; }
.club-stadium { margin: 2px 0 0; color: var(--accent); font-weight: 600; }
.seats-building { display: grid; gap: 4px; margin: 4px 0 8px; font-size: 0.95rem; }
.seats-progress { display: block; width: 100%; height: 14px; margin: 6px 0 10px; accent-color: var(--accent); }
.seats-reduce { margin-top: 8px; }
/* The bowl: the same kind of button as a facility, with a quieter standing aura (the rest of the rules are the facilities'). */
.hotspot.bowl.on-image { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 2px rgba(20, 16, 8, 0.22), 0 0 14px 3px rgba(255, 255, 255, 0.2); }
.hotspot.bowl.on-image:hover, .hotspot.bowl.on-image:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 3px rgba(20, 16, 8, 0.4), 0 0 30px 9px rgba(255, 255, 255, 0.5); }

/* --- $GMS wallet (Finances) ------------------------------------------------------------------- */
.cash-actions { justify-content: center; margin-top: 14px; }
.cash-actions .btn { min-height: 44px; }
.wallet-line { margin-top: 12px; font-size: 0.9rem; overflow-wrap: anywhere; }
.summary-grid .wallet-line { text-align: center; }
.treasury-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.treasury-row:last-child { border-bottom: 0; }

/* --- Beginner Tutorial Spotlight & Coach-Marks (GM SPORTS) --- */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.tutorial-spotlight {
  position: fixed;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(10, 15, 8, 0.78);
  pointer-events: none;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
  z-index: 9998;
}

.tutorial-spotlight-ring {
  position: absolute;
  inset: -6px;
  border: 2px solid var(--accent, #f5d68a);
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 16px rgba(245, 214, 138, 0.6), inset 0 0 12px rgba(245, 214, 138, 0.3);
  animation: tutorial-pulse 2s infinite ease-in-out;
}

@keyframes tutorial-pulse {
  0% {
    transform: scale(0.99);
    box-shadow: 0 0 8px rgba(245, 214, 138, 0.5), inset 0 0 6px rgba(245, 214, 138, 0.2);
    border-color: rgba(245, 214, 138, 0.75);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(245, 214, 138, 0.9), inset 0 0 14px rgba(245, 214, 138, 0.4);
    border-color: #fff6dc;
  }
  100% {
    transform: scale(0.99);
    box-shadow: 0 0 8px rgba(245, 214, 138, 0.5), inset 0 0 6px rgba(245, 214, 138, 0.2);
    border-color: rgba(245, 214, 138, 0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-spotlight, .tutorial-card {
    transition: none !important;
  }
  .tutorial-spotlight-ring {
    animation: none !important;
  }
}

.tutorial-card {
  position: fixed;
  pointer-events: auto;
  z-index: 10000;
  width: min(440px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(28, 38, 18, 0.98), rgba(18, 24, 10, 0.99)), url("/assets/tex-card.jpg") center / 500px;
  border: 3px solid var(--wood-edge);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 0 0 2px rgba(120, 104, 52, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.6), 0 20px 48px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text);
  outline: none;
  transition: top 0.25s ease, left 0.25s ease;
}

.tutorial-card.centered {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 0 0 9999px rgba(10, 15, 8, 0.78), 0 0 0 2px rgba(120, 104, 52, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.6), 0 24px 60px rgba(0, 0, 0, 0.95);
}

.tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.tutorial-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tutorial-step-badge {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.tutorial-close-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
}
.tutorial-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.tutorial-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tutorial-title {
  margin: 0;
  font-size: 1.2rem;
  color: #fff6dc;
  line-height: 1.3;
}
.tutorial-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}
.tutorial-progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0;
}
.tutorial-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.tutorial-dot.active {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(226, 182, 90, 0.8);
  transform: scale(1.25);
}
.tutorial-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.tutorial-footer-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 760px) {
  .tutorial-card {
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 48vh;
    overflow-y: auto;
    transform: none !important;
    border-radius: var(--radius-md);
    padding: 14px 16px;
  }
  .tutorial-card.centered {
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
  }
  .tutorial-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .tutorial-footer-nav {
    justify-content: space-between;
    width: 100%;
  }
}

/* Novidades / Changelog */
.site-footer { display: flex; justify-content: center; gap: 10px; }
.novidades-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.novidades-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 6px var(--good);
  flex-shrink: 0;
}
.changelog-container {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.changelog-header {
  margin-bottom: 4px;
}
.changelog-header h1 {
  margin: 0 0 6px;
  font-size: 1.8rem;
  color: var(--text);
}
.changelog-header p.muted {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}
.changelog-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.changelog-date-heading {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  margin: 14px 0 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  text-transform: capitalize;
}
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.changelog-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius);
}
.changelog-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.changelog-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.changelog-card-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.92;
}
.changelog-actions {
  margin-top: 10px;
  display: flex;
}
@media (max-width: 760px) {
  .changelog-container { gap: 12px; }
  .changelog-header h1 { font-size: 1.5rem; }
  .changelog-card { padding: 12px 14px; }
  .changelog-card-title { font-size: 0.95rem; }
  .changelog-card-text { font-size: 0.9rem; }
}

/* --- Dashboard: next match, result rows ---------------------------------------------------------- */
.stack-page > * + *, .main > .card + .card, .main > .card + section, .main > section + section, .main > section + .card { margin-top: 16px; }
.next-match-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.next-match-head h2 { margin: 0; }
.next-match-when { margin: 0 0 6px; font-size: 0.95rem; overflow-wrap: anywhere; }
.next-match-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 12px; text-align: center; padding: 6px 0 14px; }
.next-team { font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }
.next-team .muted { font-size: 0.9rem; font-weight: 400; }
.next-vs { font-size: 1.1rem; color: var(--muted); align-self: center; }
.next-match-actions { align-items: center; justify-content: center; }
.start-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; border-color: var(--accent); }
.start-card h2 { margin: 0 0 4px; }
.start-card p { margin: 0; }
.start-link { text-align: center; margin-top: 16px; font-size: 0.9rem; }
.club-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(226, 182, 90, 0.55); text-underline-offset: 3px; }
.club-link:hover, .club-link:focus-visible { color: var(--accent-light); }
.club-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.news-more { white-space: nowrap; font-size: 0.9rem; }
a.placar-box { color: inherit; text-decoration: none; }
a.placar-box:hover { text-decoration: underline; }
.me-name { color: var(--accent-light); }
.results { display: grid; gap: 6px; }
.result-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.18); color: var(--text); text-decoration: none; }
.result-row:hover { background: rgba(0, 0, 0, 0.3); }
/* A match row: [name] [crest] [score] [crest] [name]. Names hug their crest (12 px), crests hug the score (7 px): the same on both sides. */
.result-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; column-gap: 0; flex: 1 1 16rem; min-width: 0; }
.rt-name-home { justify-self: end; text-align: right; }
.rt-name-away { justify-self: start; text-align: left; }
.rt-mark { display: flex; }
.rt-mark-home { margin-left: 12px; }
.rt-mark-away { margin-right: 12px; }
.result-mid { margin: 0 7px; text-align: center; white-space: nowrap; align-self: center; }
.result-pens { display: block; font-size: 0.8rem; }
.stat-header a.muted { font-size: 0.85rem; }
.stat-header a.muted:hover { color: var(--text); }

/* --- Player drawer -------------------------------------------------------------------------------- */
.mini-stats { margin: 10px 0 14px; }
.drawer-sep { border: 0; border-top: 1px dashed rgba(168, 132, 63, 0.35); margin: 18px 0 4px; }
.drawer select, .squad-training-select { width: auto; max-width: min(100%, 22rem); min-height: 40px; }

/* --- Money dialog ---------------------------------------------------------------------------------- */
.money-preview { margin: 6px 0 0; font-weight: 700; color: var(--accent-light); min-height: 1.4em; }
.money-preview.bad { color: var(--bad-text); }

/* Character portraits (src/avatar.mjs): guache layers stacked over a parchment disc. */
.avatar { position: relative; display: inline-block; flex: none; width: var(--avatar-size); height: var(--avatar-size); overflow: hidden; vertical-align: middle;
  border-radius: 50%; border: 1px solid var(--wood-edge);
  /* --avatar-bg (src/position-color.mjs) is the player's position colour; without it, the parchment disc. A soft highlight sits on top either way. */
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%), var(--avatar-bg, linear-gradient(#efe2bf, #cdb98a)); }
.avatar-busto { border-radius: var(--radius); border-width: 2px; }
.avatar-stack { position: absolute; display: block; }
/* The portrait art covers most of the disc, so the position colour also shows as a ring over its edge (the same colour, never the whole row). */
.avatar[style*="--avatar-bg"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 max(3px, 9%) var(--avatar-bg); }
.avatar-stack img { position: absolute; display: block; max-width: none; user-select: none; pointer-events: none; }
/* A name with its status icons: always one line, the icons on the right with a fixed gap, only the name gives way (ellipsis). */
.name-status { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.name-status-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-icons { flex: none; display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.status-icon { flex: none; font-weight: 700; font-size: 0.95em; line-height: 1; }
.status-icon.injury { color: var(--bad); } .status-icon.banned { color: var(--warn); }
.slot .label .name-status, .bench-slot .name-status { justify-content: center; }
.person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.person > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.profile-head { display: flex; align-items: center; gap: 18px; }
.profile-head h1, .profile-head h2 { margin: 0; }
@media (max-width: 560px) { .profile-head { gap: 12px; } .profile-head .avatar-busto { --avatar-size: 96px !important; } }

/* --- Club crest (component) and the crest editor ------------------------------------------------------------ */
/* Every crest sits in the SAME square box whatever it shows (a 512x512 PNG or the generated shield), so names line up. Phones scale
   all boxes by the same factor (--crest-k), never to another shape. */
:root { --crest-k: 1; }
.crest { --box: calc(var(--s, 34px) * var(--crest-k)); display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--box); height: var(--box); vertical-align: middle; }
.crest-xs { --s: 22px; } .crest-sm { --s: 34px; } .crest-md { --s: 46px; } .crest-lg { --s: 84px; } .crest-xl { --s: 96px; }
.crest-img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The generated shield fills about what a drawn crest does inside its square (a 512 px PNG keeps margins around the shield). */
.crest-fallback { display: flex; align-items: center; justify-content: center; width: 72%; height: 84%; color: var(--crest-ink, #fff); font-weight: 700; line-height: 1; letter-spacing: 0.02em; font-size: calc(var(--box) * 0.27);
  background: var(--crest-bg, #8d8d8d); clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); padding-bottom: 12%; }
.crest-xs .crest-fallback { font-size: 0; }
.team-with-crest { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; vertical-align: middle; }
/* Nation flags (3:2). The box is reserved from the first paint; a missing SVG becomes a badge with the country code in the same box. */
.flag { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--flag-w, 24px); height: var(--flag-h, 16px); vertical-align: middle;
  border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, 0.25); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
/* The hairline border is drawn over the picture, so the picture keeps the exact 3:2 box. */
.flag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); pointer-events: none; }
.flag-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.flag-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text); font-weight: 700; line-height: 1; letter-spacing: 0.02em;
  font-size: max(8px, calc(var(--flag-h, 16px) * 0.5)); background: rgba(255, 255, 255, 0.1); }
/* Region choice (sign-up): native radios laid over their cards, at least 44 px tall, one or two columns. */
.region-picker { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.region-picker legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.region-help { margin: 0 0 8px; font-size: 0.9rem; }
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.region-option { position: relative; display: block; }
.region-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.region-card { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(20, 28, 12, 0.5); }
.region-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.region-radio:checked + .region-card { border-color: var(--accent-light); background: rgba(120, 160, 40, 0.25); box-shadow: inset 0 0 0 1px var(--accent-light); }
.region-radio:focus-visible + .region-card { outline: 3px solid var(--accent-light); outline-offset: 2px; }
.region-option:hover .region-card { border-color: var(--accent-light); }
.region-error:empty { display: none; }
.verify-resend { display: grid; gap: 8px; justify-items: center; margin: 12px 0; }
.verify-resend .btn { min-height: 44px; }
.verify-status:empty { display: none; }
.verify-status { text-align: center; margin: 0; }
.verify-inline { margin-top: 4px; }
.team-with-flag { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; vertical-align: middle; }
.page-title-flag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.page-title-flag h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.team-label { min-width: 0; overflow-wrap: anywhere; }
/* In tables and match rows a long name takes at most two lines, so rows keep one height whatever the crest or the name. */
.club-list .team-label, .result-teams .team-label, .team-with-flag .team-label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A flag's name breaks between words (never inside one); in a scrolling table-wrap it stays on one line and the table scrolls, as every team column does. */
.team-with-flag .team-label { white-space: normal; overflow-wrap: break-word; }
.table-wrap .team-with-flag .team-label { display: block; white-space: nowrap; overflow: visible; }
.next-team .team-with-crest { flex-direction: column; gap: 8px; }
.scoreboard .team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scoreboard > :nth-child(2) { align-self: center; }
@media (max-width: 560px) {
  :root { --crest-k: 0.8; }   /* phones: every box shrinks by the same factor, staying square */
  /* Phones keep the one-line row of wide screens, [name] [crest] [score] [crest] [name]: the crests and the score share one axis (centred on the
     row) and a long name takes up to two lines beside them without moving them. Tighter gaps and a slightly smaller name give it the room. */
  .result-row { gap: 6px 8px; }
  .result-teams { flex: 1 1 100%; }
  .result-teams .team-label { font-size: 0.9rem; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
  .rt-mark-home { margin-left: 8px; }
  .rt-mark-away { margin-right: 8px; }
  .result-mid { margin: 0 6px; }
}
.club-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.crest-account { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.search-option { flex-direction: row; align-items: center; gap: 10px; min-height: 46px; }
.search-text { display: flex; flex-direction: column; min-width: 0; }

.crest-landing-now { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.crest-final { display: block; width: min(256px, 100%); height: auto; background: var(--crest-paper); border: 2px solid var(--wood-edge); border-radius: 8px; padding: 8px; }
.crest-price b { color: var(--accent-light); }
.warn-text { color: var(--warn); }
.crest-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; padding: 0; list-style: none; }
.crest-steps li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.crest-steps li.current { color: var(--text); font-weight: 700; }
.crest-steps li.done { color: var(--good); }
.crest-step-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; font-size: 0.85rem; }
.crest-steps li.current .crest-step-n { background: var(--accent); color: #1a1208; border-color: var(--accent); }
.crest-layout { display: grid; grid-template-columns: minmax(0, 512px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 8px; }
.crest-layout > * { min-width: 0; }
.crest-stage { position: relative; width: 100%; max-width: 512px; aspect-ratio: 1; background: var(--crest-paper); border: 2px solid var(--wood-edge); border-radius: 8px; overflow: hidden; }
.crest-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.crest-overlay { touch-action: auto; }
.crest-overlay.draggable { touch-action: none; cursor: grab; }
.crest-overlay.bucket { cursor: crosshair; }
.crest-overlay:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.crest-grid { display: grid; gap: var(--space-2, 8px); margin-top: var(--space-2, 8px); }
.crest-grid-outlines { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.crest-grid-shapes { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); max-height: 17rem; overflow-y: auto; padding: 2px; }
.crest-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; min-height: 44px; min-width: 44px; background: var(--crest-paper); color: var(--crest-ink); border: 2px solid var(--wood-edge); border-radius: 8px; cursor: pointer; }
.crest-thumb img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.crest-thumb-name { font-size: 0.75rem; line-height: 1.2; text-align: center; }
.crest-thumb[aria-pressed="true"] { outline: 3px solid var(--accent); }
.crest-thumb:disabled { opacity: 0.45; cursor: not-allowed; }
.crest-thumb:focus-visible, .crest-swatch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.crest-placed { margin: var(--space-2, 8px) 0; min-height: 2rem; }
.crest-placed button[aria-pressed="true"] { outline: 2px solid var(--accent); }
.crest-palette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2, 8px); margin-bottom: 10px; }
.crest-swatch { aspect-ratio: 1; min-height: 44px; min-width: 44px; background-color: var(--swatch); background-image: url('/assets/crest/guache-fosco-tile.webp'); background-size: 104px 104px; background-blend-mode: soft-light; border: 2px solid rgba(0, 0, 0, 0.55); border-radius: 8px; cursor: pointer; }   /* the same colours, with the gouache grain over them (soft-light: neutral at 128) */
.crest-swatch[aria-checked="true"] { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px #fff6dc inset; }
.crest-nav { margin-top: var(--space-4, 16px); }
@media (max-width: 900px) { .crest-layout { grid-template-columns: minmax(0, 1fr); } .crest-stage { margin-inline: auto; } }

/* PT | EN segmented control: two 44 px touch targets, the current language filled. */
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, 0.25); }
.lang-btn { min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; }
.lang-btn + .lang-btn { border-left: 1px solid var(--line); }
.lang-btn:hover { color: var(--text); }
.lang-btn[aria-pressed="true"] { background: linear-gradient(180deg, #c79a45, #8d6426); color: #fff4d6; cursor: default; }
.lang-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Modern Tactical Pitch — the club dashboard is the tactical home screen. */
.dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-content: start; }
.dashboard > .start-card { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.dashboard > .start-card .start-card-text { min-width: 0; }
.dashboard > .start-card .chips { flex-shrink: 0; }
.dashboard > .dash-matchday { grid-column: span 8; min-height: 250px; display: flex; flex-direction: column; justify-content: center; padding: var(--space-6); border-color: color-mix(in srgb, var(--accent) 45%, #3d3c1c); background:
  linear-gradient(90deg, rgba(16, 24, 9, 0.96) 8%, rgba(16, 24, 9, 0.78) 58%, rgba(16, 24, 9, 0.58)),
  url('/assets/estadio-ilustrado.jpg') center 46% / cover,
  var(--panel); }
.dashboard .next-match-head { margin-bottom: var(--space-4); }
.dashboard .next-match-head h2 { font-size: clamp(1.25rem, 1.1rem + 0.65vw, 1.7rem); }
.dashboard .next-match-when { display: inline-flex; align-self: flex-start; margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid rgba(245, 214, 138, 0.45); border-radius: 999px; background: rgba(20, 28, 12, 0.7); }
.dashboard .next-match-teams { align-items: center; gap: var(--space-4); padding: var(--space-2) 0 var(--space-4); }
.dashboard .next-team { font-size: clamp(1.15rem, 1rem + 0.65vw, 1.7rem); }
.dashboard .next-team .team-with-crest { justify-content: center; }
.dashboard .next-match-actions { justify-content: flex-start; }
.dashboard > .dash-metrics { grid-column: span 4; grid-template-columns: 1fr; gap: var(--space-2); }
.dashboard .stat-card { justify-content: center; padding: var(--space-3) var(--space-4); }
.dashboard .stat-header { margin-bottom: var(--space-1); }
.dashboard .stat { font-size: clamp(1.4rem, 1.2rem + 0.75vw, 1.9rem); line-height: 1.1; }
.dashboard .stat-footer { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0 0; font-size: 0.82rem; }
.dashboard > .dash-matches { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.dashboard .dash-matches > .card { padding: var(--space-3); }
/* The end of the page: the news (left) and the squad's best (right), tops aligned, each as tall as its own content. */
.dashboard > .dash-bottom { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-3); }
.dashboard > .start-link { grid-column: 1 / -1; }
/* Squad highlights: Name | Pos | Rec. Fixed columns for Pos and Rec, so a long name is cut with an ellipsis instead of pushing them. */
.dash-squad table { width: 100%; table-layout: fixed; }
.dash-squad th:nth-child(2), .dash-squad td:nth-child(2) { width: 4.75rem; text-align: center; }
.dash-squad th:nth-child(3), .dash-squad td:nth-child(3) { width: 6.5rem; }
.dash-squad .squad-name { overflow: hidden; }
.dash-squad .squad-name .person { max-width: 100%; }
.dash-squad .squad-name .person > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard .result-row { min-width: 0; }
@media (max-width: 760px) {
  .dashboard > .start-card { flex-direction: column; align-items: stretch; }
  .dashboard > .start-card .chips { flex-wrap: wrap; }
  .dashboard { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .dashboard > .dash-matchday, .dashboard > .dash-metrics, .dashboard > .dash-bottom,
  .dashboard > .dash-matches { grid-column: 1; }
  .dashboard > .dash-bottom { grid-template-columns: minmax(0, 1fr); }   /* news first, then the squad */
  .dashboard > .dash-matchday { min-height: 220px; padding: var(--space-4); }
  .dashboard > .dash-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard .stat-card { padding: var(--space-2); }
  .dashboard .stat-header { display: block; }
  .dashboard .stat-header a { display: inline-block; margin-top: var(--space-1); }
  .dashboard > .dash-matches { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dashboard > .dash-metrics { grid-template-columns: minmax(0, 1fr); }
  .dashboard .stat-card { padding: var(--space-3); }
  /* Phones: tighter cells and narrower Pos / Rec columns, so the three columns fit a 360-390 px card without sideways scrolling. */
  .dash-squad :is(th, td) { padding-inline: 6px; }
  .dash-squad th:nth-child(2), .dash-squad td:nth-child(2) { width: 3.25rem; }
  .dash-squad th:nth-child(3), .dash-squad td:nth-child(3) { width: 4.6rem; }
  .dash-squad .stars { font-size: 0.85em; }
  /* Both crests on the same top line whatever the length of the names (centring each team made a two-line name push its crest down). */
  .dashboard .next-match-teams { gap: var(--space-2); align-items: start; }
  .dashboard .next-vs { align-self: start; padding-top: 1.25rem; }
  .dashboard .next-team { font-size: 1rem; }
}
.auth .lang-switch { display: flex; width: max-content; margin: 12px auto 0; }
/* Footer: the language switch sits exactly in the middle, Privacy to its left and What's new to its right. */
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 14px; }
.site-footer > a:first-child { justify-self: end; }
.site-footer > .novidades-link { justify-self: start; }
.site-footer > .lang-switch { justify-self: center; }
.site-footer { padding: 4px 12px; background: rgba(0, 0, 0, 0.5); border-radius: var(--radius-md); }   /* the links sit on the busy background: a dark strip keeps them readable */
.site-footer a { color: var(--text); opacity: 0.85; }

/* Squad: the wage bill next to the filter tabs. */
.gm-metric.squad-wage { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0.6rem; width: fit-content; max-width: 100%; }   /* Wage, the amount and /week on one line */
.squad-wage .gm-metric-label, .squad-wage small { white-space: nowrap; }
.gm-squad > h1 { margin: 0 0 var(--space-3, 12px); }
.youth-prefs { align-items: flex-end; }
.youth-prefs .field { margin-bottom: 0; }
.youth-prefs .btn { height: 44px; min-height: 44px; padding-block: 0; padding-inline: 18px; font-size: var(--type-body); }   /* the Save button is as tall and as big as the selects beside it */

/* --- Live broadcast of a match (#/partida/<id>/ao-vivo) ------------------------------------------------------------------ */
.live-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.live-top h1 { margin: 0; }
.live-board { display: grid; gap: 14px; }
/* Wide screens: the board (score, clock, controls) on the left and the list of events beside it, both in view; narrower: one under the other. */
.live-layout { display: grid; gap: 14px; align-items: start; }
@media (min-width: 1000px) { .live-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .live-feed-card { margin-top: 0; } .live-feed { max-height: min(68vh, 620px); min-height: 360px; } }
.live-scoreline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.live-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.live-team-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.live-center { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 7.5rem; }
.live-clock { font-size: 2.3rem; font-weight: 800; line-height: 1.05; color: var(--accent); font-variant-numeric: tabular-nums; }
.live-score { display: flex; align-items: baseline; gap: 0.5rem; font-size: 3.6rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; color: #fff6dc; }
.live-dash { color: var(--muted); font-weight: 400; }
.live-status { padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; color: var(--muted); }
.live-status.live { color: #ffb0a0; border-color: #c4544a; }
.live-status.live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #e0443a; vertical-align: 0.05em; animation: live-dot 1.4s ease-in-out infinite; }
.live-status.end { color: var(--accent-light); border-color: var(--accent); }
@keyframes live-dot { 50% { opacity: 0.25; } }
.live-bar { padding: 0 2px; min-height: 44px; display: flex; align-items: center; }
.live-progress { width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.live-progress::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--line) var(--p, 0%)); }
.live-progress::-moz-range-track { height: 8px; border-radius: 999px; background: var(--line); }
.live-progress::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent); }
.live-progress::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; border: 2px solid #fff6dc; background: var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.live-progress::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff6dc; background: var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.live-progress:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; border-radius: var(--radius-sm); }
.live-controls { justify-content: center; }
.live-controls .btn { min-height: 44px; min-width: 44px; }
.live-play { min-width: 8.5rem; min-height: 44px; }
.live-play[hidden], .live-sheet[hidden] { display: none; }
.live-speeds { display: inline-flex; gap: 6px; }
.live-speed { min-height: 44px; min-width: 44px; padding: 0 12px; }
.live-speed[aria-pressed="true"] { border-color: var(--accent-light); background: rgba(245, 214, 138, 0.18); color: var(--accent-light); }
.live-end { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; padding-top: 4px; border-top: 1px solid var(--line); }
.live-end[hidden] { display: none; }
.live-final { margin: 0; font-size: 1.15rem; font-weight: 700; text-align: center; }
.live-feed-card { padding: 8px; }
.live-feed { display: grid; align-content: start; gap: 8px; max-height: min(58vh, 540px); min-height: 220px; overflow-y: auto; padding: 4px; overscroll-behavior: contain; }
.live-feed:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }
.live-empty { margin: 8px; }
.live-event { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-radius: 8px; background: var(--panel-2); border-left: 4px solid transparent; }
.live-event.home { border-left-color: #6fb7ff; }
.live-event.away { border-left-color: #ff9f6f; }
.live-min { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-body p { margin: 0 0 2px; overflow-wrap: anywhere; }
.live-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-bottom: 2px; font-size: 0.85rem; }
.live-kind { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.live-card { display: inline-block; width: 9px; height: 13px; border-radius: 2px; }
.live-kind.yellow .live-card { background: #f4c430; }
.live-kind.red .live-card { background: #e0443a; }
.live-kind.injury { color: #ffb0a0; border-color: #c4544a; }
.live-kind.order, .live-kind.sub { color: #9fd3ff; border-color: #4d86b3; }
.live-kind.half, .live-kind.kickoff, .live-kind.stoppage { color: var(--accent-light); border-color: var(--accent); }
.live-event.goal { padding: 14px 12px; background: rgba(244, 196, 48, 0.18); border-left-color: var(--accent); }
.live-event.goal .live-min { font-size: 1.15rem; color: var(--accent-light); }
.live-event.goal .live-body p { font-size: 1.12rem; font-weight: 700; color: #fff6dc; }
.live-event.goal .live-kind { color: var(--color-accent-ink); background: var(--accent); border-color: var(--accent); }
.live-event.fresh { animation: live-fresh 1.6s ease-out; }
@keyframes live-fresh { from { box-shadow: 0 0 0 2px rgba(255, 246, 220, 0.85); background-color: rgba(245, 214, 138, 0.28); } to { box-shadow: 0 0 0 0 rgba(255, 246, 220, 0); } }
@media (prefers-reduced-motion: reduce) {
  .live-event.fresh, .live-status.live::before { animation: none; }
  .live-feed { scroll-behavior: auto; }
}
@media (max-width: 520px) {
  .live-scoreline { gap: 6px; }
  .live-center { min-width: 5.6rem; }
  .live-clock { font-size: 1.8rem; }
  .live-score { font-size: 2.7rem; gap: 0.35rem; }
  .live-team-name { font-size: 0.9rem; }
  .live-event { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 8px; padding: 8px 10px; }
  .live-event.goal .live-body p { font-size: 1rem; }
  .live-top { margin-bottom: 8px; }
  .live-top h1 { font-size: 1.5rem; }
  .live-top .live-sheet { display: none; }   /* the match sheet is offered when it ends */
  .live-team .crest-lg { --s: 52px; }
  .live-board { gap: 10px; }
  .live-controls { gap: 8px; flex-wrap: wrap; }
  .live-controls .btn { flex: 1 1 auto; min-height: 44px; min-width: 44px; }
  .live-speeds { display: inline-flex; gap: 6px; }
  .live-speeds .btn { min-width: 44px; min-height: 44px; }
  .live-play { flex: 2 1 8rem; min-width: 0; min-height: 44px; }
  .live-feed { max-height: 52vh; min-height: 200px; }
}
/* The "Ao vivo" chip of the big next-match card (shown only inside the match's window). */
.live-chip[hidden] { display: none; }
.live-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid #c4544a; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #ffb0a0; text-decoration: none; white-space: nowrap; }
.live-chip i { width: 8px; height: 8px; border-radius: 50%; background: #e0443a; animation: live-dot 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-chip i { animation: none; } }

/* --- Manual (#/manual) ------------------------------------------------------------------------------------------------- */
/* The footer: "Manual" and "Privacidade" together, in the first cell of the footer grid. */
.site-footer > .footer-start { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 14px; }
.manual-page { max-width: 1040px; margin: 0 auto; }
.manual-page.public { padding: 16px 12px 32px; }
.manual-card { padding: clamp(16px, 3vw, 28px); overflow: visible; }   /* .card scrolls sideways (overflow-x): that would take the index out of sticky */
.manual-head h1 { margin: 0 0 8px; }
.manual-intro { margin: 0 0 8px; max-width: 72ch; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.manual-provisional { display: inline-block; margin: 0 0 8px; }
.manual-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; margin-top: 16px; align-items: start; }
.manual-index { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.18); }
.manual-index-title { margin: 0; font-size: 0.95rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.manual-index summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.manual-index summary::-webkit-details-marker { display: none; }
.manual-index summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s ease; margin-right: 4px; }
.manual-index details[open] > summary::after { transform: rotate(-135deg); }
.manual-index summary:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; border-radius: var(--radius-sm); }
.manual-index details[open] > summary { margin-bottom: 6px; }
.manual-index ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.manual-index ol { max-height: 60vh; overflow-y: auto; }   /* a phone: the open list scrolls inside itself */
.manual-index a { display: block; padding: 7px 8px; border-radius: var(--radius-sm); min-height: 24px; overflow-wrap: anywhere; }
.manual-index a:hover { background: rgba(255, 255, 255, 0.07); }
.manual-index a:focus-visible, .manual-body :is(a, section):focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }
.manual-body { min-width: 0; max-width: 72ch; }
.manual-section { margin: 0 0 28px; scroll-margin-top: 16px; outline: none; }
.manual-section h2 { margin: 0 0 10px; font-size: 1.35rem; line-height: 1.25; }
.manual-section p { margin: 0 0 12px; line-height: 1.65; font-size: 1.02rem; overflow-wrap: break-word; }
.manual-terms { margin: 0; display: grid; gap: 12px; }
.manual-terms > div { padding-left: 12px; border-left: 3px solid var(--line); }
.manual-terms dt { font-weight: 700; margin: 0 0 2px; font-size: 1.02rem; }
.manual-terms dd { margin: 0; line-height: 1.6; font-size: 1.02rem; overflow-wrap: break-word; }
.manual-back { margin: 24px 0 8px; }
@media (min-width: 900px) {
  .manual-layout { grid-template-columns: 15rem minmax(0, 1fr); }
  .manual-index { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }   /* 22 sections: the column scrolls inside itself */
  .manual-index ol { max-height: none; overflow: visible; }
  .manual-index summary { pointer-events: none; cursor: default; }   /* open for good beside the text */
  .manual-index summary::after { display: none; }
}

/* The upgrade pop-up of a facility: the level now, an arrow down, the level it becomes (each with its weekly upkeep). */
.upgrade-steps { display: grid; justify-items: start; gap: 2px; margin: 10px 0; }
.upgrade-step { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.upgrade-step.next { color: var(--accent-light); }
.upgrade-arrow { display: inline-flex; padding-left: 14px; color: var(--muted); }

/* A dialog's title and its close button stay on one row, however long the title ("Modernizar Centro de treinamento"): the title wraps inside its own space. */
.modal > .topbar { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
.modal > .topbar h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.modal > .topbar .btn { flex: none; }
.ends-left { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* League tab: the round title with its kickoff beside it; it wraps under the title on a narrow card. */
.round-bar { flex-wrap: nowrap; }
.round-bar .btn { flex: none; }
.round-title { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; text-align: center; }
.round-title h2 { margin: 0; }

/* Calendar (Partidas): the two tables (upcoming, season) share ONE column template, so they line up one above the other:
   [round / competition: fixed, centred] [home: 1fr, packed against the centre] [x / score: fixed, centred] [away: 1fr, packed against the centre]. Fixed layout, no horizontal scroll at any width. */
.stadium-app .board .main table.club-fixtures-table { table-layout: fixed; width: 100%; min-width: 0; }
.stadium-app .board .main table.club-fixtures-table :is(th, td).col-fixed-1 { width: 7.5rem; min-width: 0; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.stadium-app .board .main table.club-fixtures-table :is(th, td).score-cell { width: 5.5rem; min-width: 0; text-align: center; white-space: normal; line-height: 1.2; }   /* "1-1 (6-7 pên.)" wraps under the score instead of running into the names */
/* The matchup is mirrored around the centre: HOME is right-aligned (crest, then the name right beside the x / score), AWAY is left-aligned (the name right beside the x / score, then the crest);
   the headers follow. The name box shrinks only (flex 0 1 auto), so crest and name stay together at the centre and a long name ends in an ellipsis. */
.stadium-app .board .main table.club-fixtures-table :is(th, td).team-home { width: auto; text-align: right; }
.stadium-app .board .main table.club-fixtures-table :is(th, td).team-away { width: auto; text-align: left; }
.stadium-app .board .main table.club-fixtures-table td.team-home .team-with-crest { flex-direction: row; justify-content: flex-end; }
.stadium-app .board .main table.club-fixtures-table td.team-away .team-with-crest { flex-direction: row-reverse; justify-content: flex-end; }
.stadium-app .board .main table.club-fixtures-table td.team-home .team-label { flex: 0 1 auto; text-align: right; }
.stadium-app .board .main table.club-fixtures-table td.team-away .team-label { flex: 0 1 auto; text-align: left; }
.stadium-app .board .main table.club-fixtures-table td.team-home, .stadium-app .board .main table.club-fixtures-table td.team-away { overflow: hidden; }
/* The 5th column: date and time of the game ("sex., 30/10 · 22:00"), fixed width, right-aligned, tabular figures, never wrapping. Empty when the API has no date. The short date under the
   label (.fixture-when) is for phones only. */
.stadium-app .board .main table.club-fixtures-table :is(th, td).col-date { width: 9rem; min-width: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stadium-app .board .main table.club-fixtures-table td.col-date { color: var(--muted); font-size: .82rem; }
.stadium-app .board .main table.club-fixtures-table .fixture-when { display: none; }
@media (max-width: 760px) {
  .stadium-app .board .main table.club-fixtures-table :is(th, td).col-date { display: none; }
  .stadium-app .board .main table.club-fixtures-table .fixture-when { display: block; margin-top: 1px; color: var(--muted); font-size: .6rem; line-height: 1.15; white-space: nowrap; }
  .stadium-app .board .main table.club-fixtures-table .fixture-when .round-kickoff { font-size: inherit; }
}
@media (max-width: 760px) {
  /* Narrow: the same cut in both tables (smaller side columns, crests and header type) so the names get the room; the names still end in an ellipsis, never a horizontal scroll. */
  .stadium-app .board .main table.club-fixtures-table :is(th, td) { padding-inline: 3px; }
  .stadium-app .board .main table.club-fixtures-table thead th { font-size: .62rem; letter-spacing: 0; }
  .stadium-app .board .main table.club-fixtures-table :is(th, td).col-fixed-1 { width: 4.1rem; font-size: .8rem; }
  .stadium-app .board .main table.club-fixtures-table thead th.col-fixed-1 { font-size: .55rem; padding-inline: 1px; white-space: nowrap; }
  .stadium-app .board .main table.club-fixtures-table :is(th, td).score-cell { width: 3.4rem; }
  .stadium-app .board .main table.club-fixtures-table .team-with-crest { gap: 4px; }
  .stadium-app .board .main table.club-fixtures-table .crest { flex-basis: 20px; width: 20px; height: 20px; --s: 20px; }
}

/* League standings: no horizontal scroll. Fixed layout; # and the eight numbers are narrow fixed columns (tabular figures, small side padding, title and figure on one centre line),
   the club column takes what is left and cuts its name with an ellipsis. On a phone GA and GD are hidden (head, body and colgroup alike). */
.stadium-app .board .main table.league-standings-table { table-layout: fixed; width: 100%; min-width: 0; }
.league-standings-table col.c-pos { width: 3.6rem; }
.league-standings-table col.c-num { width: 2.6rem; }
.stadium-app .board .main table.league-standings-table :is(th, td) { padding-inline: 4px; }
.stadium-app .board .main table.league-standings-table :is(th, td).num { width: auto; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.stadium-app .board .main table.league-standings-table :is(th, td).pos-cell { width: auto; min-width: 0; text-align: center; white-space: nowrap; }
.stadium-app .board .main table.league-standings-table :is(th, td).team-name { text-align: left; overflow: hidden; }
.stadium-app .board .main table.league-standings-table td.team-name .team-with-crest { display: flex; max-width: 100%; }
.stadium-app .board .main table.league-standings-table td.team-name .team-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: unset; }
@media (max-width: 640px) {
  .league-standings-table col.c-pos { width: 2.3rem; }
  .league-standings-table col.c-num { width: 1.7rem; }
  .stadium-app .board .main .card:has(> .table-wrap > .league-standings-table) { padding-inline: 6px; }
  .stadium-app .board .main table.league-standings-table .crest { flex-basis: 18px; width: 18px; height: 18px; --s: 18px; }
  .stadium-app .board .main table.league-standings-table .team-with-crest { gap: 4px; }
  .stadium-app .board .main table.league-standings-table td.align-club { padding-left: 3px; }
  .stadium-app .board .main table.league-standings-table .zone-icon { margin-left: 1px; }
  .league-standings-table :is(col.ga, col.gd) { display: none; }
  .stadium-app .board .main table.league-standings-table :is(th, td):is(:nth-child(8), :nth-child(9)) { display: none; }
  .stadium-app .board .main table.league-standings-table :is(th, td) { padding-inline: 2px; font-size: .8rem; }
}
.rankings { align-items: stretch; }
.rankings > .card { display: flex; flex-direction: column; }
.rankings > .card > .table-wrap { flex: 1; }
.rankings table :is(th, td):nth-child(1) { width: 9%; }
.rankings table :is(th, td):nth-child(2) { width: 35%; }
.rankings table :is(th, td):nth-child(3) { width: 36%; }
.rankings table :is(th, td):nth-child(4) { width: 20%; }

/* Challenge a manager: the suggestions are a popover anchored to the field (the wrapper is position: relative; the list is absolute, top: 100% + 4px, as wide as the field, above the neighbouring cards).
   The card must not clip it nor grow a scroll bar for it (.card scrolls sideways by default, which also clips vertically), so this one card lets its content overflow. */
.card.qm-challenge-card { overflow: visible; position: relative; z-index: 2; }
.qm-typeahead-wrap .qm-suggestions.opens-up { top: auto; bottom: calc(100% + 4px); }
.qm-typeahead-wrap { position: relative; flex: 1 1 16rem; min-width: 0; max-width: min(100%, 22rem); }
.card.qm-challenge-card .inline-pick { flex-wrap: wrap; }   /* on a phone the field takes its own row and the send button goes under it */
.qm-typeahead-wrap .qm-suggestions { left: 0; right: 0; width: auto; min-width: 0; max-width: 100%; max-height: min(55vh, 24rem); overscroll-behavior: contain; }

/* Scout players (Mercado > Observar): fixed layout, the table is exactly as wide as its card and the button can never leave it.
   PLAYER takes what is left (avatar + name, the name ends in an ellipsis); POS, AGE and REC are short and equal; CLUB is medium (ellipsis); AGENT PRICE has room for
   its figure; the last column is the button's. Short columns: title and data centred on one line; PLAYER and CLUB left; price right. On a phone AGE and CLUB go and the price
   moves above the button. */
.stadium-app .board .main table.market-scouting-table { table-layout: fixed; width: 100%; min-width: 0; }
.market-scouting-table col.c-short { width: 6.2rem; }
.market-scouting-table col.c-club { width: 8.5rem; }
.market-scouting-table col.c-price { width: 9rem; }
.market-scouting-table col.c-action { width: 9.25rem; }
.stadium-app .board .main table.market-scouting-table :is(th, td) { width: auto; min-width: 0; padding-inline: 6px; max-width: none; }
.stadium-app .board .main table.market-scouting-table :is(th, td).col-fixed-1 { text-align: left; overflow: hidden; }
.stadium-app .board .main table.market-scouting-table td.col-fixed-1 .person { display: flex; min-width: 0; max-width: 100%; }
.stadium-app .board .main table.market-scouting-table td.col-fixed-1 .person > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stadium-app .board .main table.market-scouting-table :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4)) { text-align: center; font-variant-numeric: tabular-nums; }
.stadium-app .board .main table.market-scouting-table :is(th, td).market-col-club { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stadium-app .board .main table.market-scouting-table :is(th, td).market-col-agent-price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stadium-app .board .main table.market-scouting-table :is(th, td).market-col-action { text-align: center; white-space: normal; }
.stadium-app .board .main table.market-scouting-table .market-offer-cell { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.stadium-app .board .main table.market-scouting-table .market-offer-cell .btn { max-width: 100%; white-space: nowrap; }
.stadium-app .board .main table.market-scouting-table .market-positions { flex-wrap: wrap; }
@media (max-width: 760px) {
  .market-scouting-table :is(col.c-age, col.c-club, col.c-price) { display: none; }
  .market-scouting-table col.c-short { width: 2.7rem; }
  .market-scouting-table col.c-rec { width: 3.1rem; }
  .market-scouting-table col.c-action { width: 5.6rem; }
  .stadium-app .board .main .card:has(> .table-wrap > .market-scouting-table) { padding-inline: 6px; }
  .stadium-app .board .main table.market-scouting-table td.col-fixed-1 .avatar { --avatar-size: 24px !important; }
  .stadium-app .board .main table.market-scouting-table td.col-fixed-1 .person { gap: 5px; }
  .stadium-app .board .main table.market-scouting-table :is(th, td) { padding-inline: 3px; }
  .stadium-app .board .main table.market-scouting-table .stars { font-size: .62rem; letter-spacing: 0; }
  .stadium-app .board .main table.market-scouting-table .market-offer-price { font-size: .64rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .stadium-app .board .main table.market-scouting-table :is(th, td).market-col-action { padding-inline: 1px; overflow: hidden; }
  .stadium-app .board .main table.market-scouting-table .market-offer-cell .btn { font-size: .72rem; padding-inline: 6px; min-height: 36px; }
}
.stadium-app .board .main table.market-scouting-table :is(th, td):nth-child(2) { padding-inline: 2px; }
.stadium-app .board .main table.market-scouting-table .market-positions { gap: 2px; }

.stadium-app .board .main table.dense-table.market-table :is(th, td).col-fixed-1 { text-align: left; overflow: hidden; }
.stadium-app .board .main table.dense-table.market-table td.col-fixed-1 .person { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.stadium-app .board .main table.dense-table.market-table td.col-fixed-1 .person > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stadium-app .board .main table.dense-table.market-table td.col-fixed-1 .cut-name { max-width: 100%; min-width: 0; overflow: hidden; }

@media (max-width: 760px) {
  .stadium-app .board .main table.dense-table.market-table :is(th, td) { padding-inline: 4px; }
  .stadium-app .board .main table.dense-table.market-table :is(th, td):first-child {
    width: 125px;
    min-width: 115px;
    max-width: 135px;
    border-right: 1px solid rgba(130, 178, 154, 0.25);
  }
  .stadium-app .board .main table.dense-table.market-table thead th.col-fixed-1 {
    background: #153331;
    z-index: 4;
  }
  .stadium-app .board .main table.dense-table.market-table tbody tr:nth-child(odd) td.col-fixed-1 {
    background: #0f2725;
  }
  .stadium-app .board .main table.dense-table.market-table tbody tr:nth-child(even) td.col-fixed-1 {
    background: #0b1f1e;
  }
  .stadium-app .board .main table.dense-table.market-table td.col-fixed-1 .avatar { --avatar-size: 24px !important; }
  .stadium-app .board .main table.dense-table.market-table td.col-fixed-1 .person { gap: 5px; }
  .stadium-app .board .main table.dense-table.market-table :is(th, td):nth-child(2) { width: 58px; min-width: 54px; }
  .stadium-app .board .main table.dense-table.market-table :is(th, td):nth-child(4) { width: 46px; min-width: 44px; }
  .stadium-app .board .main table.dense-table.market-table .stars { font-size: .62rem; letter-spacing: 0; }
  .stadium-app .board .main table.dense-table.market-table :is(th, td).market-col-price,
  .stadium-app .board .main table.dense-table.market-table:not(.market-scouting-table) :is(th, td):nth-child(7) {
    width: 105px;
    min-width: 100px;
    font-size: 0.8rem;
  }
  .stadium-app .board .main table.dense-table.market-table :is(th, td):last-child {
    width: 90px;
    min-width: 85px;
    padding-inline: 4px;
    overflow: visible;
  }
  .stadium-app .board .main table.dense-table.market-table .btn.small {
    min-height: 32px;
    padding: 3px 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    width: 100%;
  }
}