/* UolDT identity (docs/ux.md, "Identity"): a sports-magazine "Álbum" base — cream paper, ink,
   condensed headlines, taped clippings, sticker cards — with the lineup as the coach's
   chalkboard ("Pizarra") and the match commentary as an AM radio. Loaded after app.css: it
   redefines the tokens and restyles the shared components. Screens should never hard-code
   colors; they use these tokens and classes. */

/* Fonts: served from /static/fonts (Latin subset, SIL OFL: fonts/OFL.txt). The layout preloads the
   three faces every page uses; `swap` shows the text at once in the fallback font. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/anton-400.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/barlow-condensed-600.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/barlow-condensed-700.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/static/fonts/barlow-condensed-800.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/barlow-400.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/barlow-600.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/barlow-700.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f2e8d5;
  --surface: #fffaf0;
  --surface-2: #f7eedb;
  --surface-3: #eadcc0;
  --line: #cdbd9f;
  --text: #17130f;
  --muted: #6b5f50;
  --ink: #17130f;
  /* [D] "Radio AM" orange: warm and retro, neutral between clubs. Text on it is ink. */
  --brand: #e0731f;
  --brand-2: #c75f12;
  --brand-ink: #17130f;
  --blue: #163f8f;
  --good: #1f7a3a;
  --warn: #c98a0b;
  /* Errors and losses: a dark burgundy, never the brand orange. */
  --bad: #8c1d2b;
  --bad-soft: #f3dfe0;
  --info: #163f8f;
  --gold: #c99a1e;
  --silver: #8f9aa3;
  --bronze: #a8632e;
  --tape: rgba(246, 214, 120, .78);
  --radius: 6px;
  --radius-s: 4px;
  --shadow: 4px 4px 0 var(--ink);
  --font: Barlow, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: Anton, "Barlow Condensed", Impact, sans-serif;
  --condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  color-scheme: light;
}

body {
  background-color: var(--bg); color: var(--text); font-family: var(--font);
  background-image: radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1.2px);
  background-size: 6px 6px;
}
a { color: var(--blue); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1; }
h2 { font-size: 1.35rem; }
small, .muted { color: var(--muted); }
:focus-visible { outline-color: var(--blue); }

/* ---------- Masthead and navigation ---------- */
.topbar { background: var(--brand); border-bottom: 5px solid var(--ink); backdrop-filter: none; }
.logo { color: var(--brand-ink); font-family: var(--display); font-weight: 400; font-size: 1.7rem; letter-spacing: .01em; }
.logo b { color: var(--brand-ink); }
.logo svg { display: none; }
.club-chip, .club-chip .meta { color: var(--brand-ink); }
.club-chip .meta { opacity: .85; font-family: var(--condensed); font-weight: 700; }
.club-chip .name { font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.icon-btn { color: var(--brand-ink); } .icon-btn:hover { background: rgba(0, 0, 0, .15); }
.icon-btn .dot { background: var(--ink); }
.topbar .button.secondary { background: #fff; color: var(--ink); border-color: var(--ink); }
.topbar select { background: #fff; color: var(--ink); border-color: var(--ink); }

.tabbar { background: var(--ink); border-top: 0; }
.tabbar a { color: #e9dcc2; font-family: var(--condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.tabbar a:hover { color: #fff; }
.tabbar a.active { color: #fff; box-shadow: inset 0 3px 0 var(--brand); }
@media (min-width: 900px) {
  .tabbar { top: 0; position: relative; justify-content: flex-start; padding: 0 max(1rem, calc((100vw - 1180px) / 2)); gap: 0; }
  .tabbar a { font-size: .95rem; padding: .65rem 1rem; border-bottom: 0; border-right: 1px solid #333; }
  .tabbar a.active { background: var(--bg); color: var(--ink); box-shadow: none; }
}
.tabbar a .dot { background: var(--brand); }
/* [D] Tab badges with a number (docs/design/navigation.md): Inicio (rows of "Hoy" that wait for an
   answer) and Mercado (offers and agents that wait). */
.tabbar a .count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: var(--ink); border: 2px solid var(--ink);
  font: 800 .72rem/16px var(--condensed); letter-spacing: 0; text-align: center; }
@media (min-width: 900px) { .tabbar a .count { position: static; margin-left: .15rem; } }

.subtabs a { background: transparent; border: 2px solid var(--ink); color: var(--ink); border-radius: 0; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.subtabs a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Paper cards ---------- */
.panel, .card {
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel > h2:first-child, .card > h2:first-child {
  color: var(--ink); font-family: var(--display); font-size: 1.25rem; letter-spacing: .02em;
  display: flex; align-items: center; gap: .6rem;
}
.panel > h2:first-child::after, .card > h2:first-child::after { content: ""; flex: 1; height: 3px; background: var(--ink); }
.card.highlight { background: #fff8ea; border-color: var(--ink); box-shadow: 6px 6px 0 var(--brand); }
.card.warn { box-shadow: 4px 4px 0 var(--warn); }
.card.bad { box-shadow: 4px 4px 0 var(--bad); }
.page-head h1 { display: flex; align-items: center; gap: .6rem; }
.page-head .sub { font-family: var(--condensed); font-weight: 600; font-size: 1rem; }

.kpi { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); }
.kpi .label { color: var(--muted); font-family: var(--condensed); font-weight: 800; letter-spacing: .08em; }
.stat { font-family: var(--display); font-weight: 400; font-size: 1.6rem; }

/* ---------- Buttons and forms ---------- */
button, .button, .btn {
  background: var(--brand); color: var(--brand-ink); border: 2px solid var(--ink); border-radius: var(--radius-s);
  box-shadow: 3px 3px 0 var(--ink); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
button:hover, .button:hover, .btn:hover { background: var(--brand-2); }
button:active, .button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
button.secondary, .button.secondary, .btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--ink); }
button.secondary:hover, .button.secondary:hover { background: var(--surface-2); }
button.danger, .btn-danger { background: var(--surface); color: var(--bad); border-color: var(--bad); box-shadow: 3px 3px 0 var(--bad); }
button.danger:hover { background: #fde8e8; }
button.link { box-shadow: none; border: 0; background: none; color: var(--blue); text-transform: none; letter-spacing: 0; font-family: var(--font); }
input, select, textarea { background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-s); }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22, 63, 143, .2); }
label { color: var(--ink); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.check { text-transform: none; letter-spacing: 0; font-family: var(--font); font-weight: 600; }
.segmented label { background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-s); text-transform: uppercase; letter-spacing: .04em; }
.segmented input:checked + label { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Tables ---------- */
th { color: #fff; background: var(--ink); font-family: var(--condensed); letter-spacing: .08em; border: 0; }
td { border-bottom: 1px solid var(--line); }
tr.me td { background: #ffe9a8; }

/* ---------- Badges, chips, meters, ratings ---------- */
.badge { background: var(--surface-3); color: var(--ink); border-radius: 3px; font-family: var(--condensed); letter-spacing: .04em; text-transform: uppercase; }
.badge.good { background: #d8eedc; color: var(--good); }
.badge.warn { background: #fbeccb; color: #8a5a00; }
/* A badge with a sentence: it wraps inside its card, in normal case. */
.badge.wrap { display: inline-block; max-width: 100%; white-space: normal; text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: .8rem; line-height: 1.3; padding: .2rem .5rem; overflow-wrap: anywhere; }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.chip { background: var(--surface-3); color: var(--ink); border-radius: 3px; font-family: var(--condensed); font-weight: 700; letter-spacing: .02em; }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.gold { background: linear-gradient(90deg, #b8860b, #f6d365, #b8860b); color: #2b1d00; }
.chip.silver { background: linear-gradient(90deg, #8f9aa3, #e6ebef, #8f9aa3); color: #1b2227; }
.chip.bronze { background: linear-gradient(90deg, #8a4f22, #e0a06e, #8a4f22); color: #1b0e05; }
.meter { background: var(--surface-3); border: 1px solid var(--line); }
.meter > i { background: var(--good); } .meter.mid > i { background: var(--warn); } .meter.low > i { background: var(--bad); }
.bar { background: var(--surface-3); border: 1px solid var(--ink); border-radius: 0; height: 10px; }
.bar > span { background: var(--brand); }
.rating { background: var(--surface-3); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; font-family: var(--display); font-weight: 400; }
.rating.bronze { background: linear-gradient(160deg, #e0a06e, #9a5b2f); color: #fff; border-color: var(--ink); }
.rating.silver { background: linear-gradient(160deg, #eef2f5, #9aa6b1); color: var(--ink); border-color: var(--ink); }
.rating.gold { background: linear-gradient(160deg, #fbe28a, #c99a1e); color: var(--ink); border-color: var(--ink); }
.rating.elite { background: linear-gradient(160deg, #fff4c2, #f2c94c 35%, #b38cff 70%, #44c7c0); color: var(--ink); border-color: var(--ink); }
.result { color: #fff; border: 2px solid var(--ink); border-radius: 3px; font-family: var(--display); font-weight: 400; }
.result.w { background: var(--good); } .result.d { background: var(--silver); color: var(--ink); } .result.l { background: var(--bad); }
.pos-tag { color: #fff; border-radius: 3px; font-family: var(--condensed); font-size: .8rem; letter-spacing: .05em; border: 2px solid var(--ink); }
:root { --pos-gk: #c98a0b; --pos-df: #163f8f; --pos-mf: #1f7a3a; --pos-fw: #8c1d2b; }
.live-pill { background: var(--brand); color: var(--brand-ink); border: 2px solid var(--ink); border-radius: 3px; font-family: var(--condensed); text-transform: uppercase; letter-spacing: .06em; }
.live-pill::before { background: #fff; }

/* ---------- Lists ---------- */
.prow { color: var(--ink); }
.prow + .prow { border-top-color: var(--line); }
.prow:hover { background: #fff3d6; }
.prow-name { font-family: var(--condensed); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; }
.group-title { color: var(--ink); font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: .05em; border-bottom: 3px solid var(--ink); padding-bottom: .2rem; margin-left: 0; margin-right: 0; }
.match-line { color: var(--ink); border-bottom-color: var(--line); }
.match-line:hover { background: #fff3d6; }
.match-line.mine { background: #ffe9a8; }
.match-line .mid { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.feed li { border-bottom-color: var(--line); }

/* "To do" items are clippings taped to the page. */
.todo li a, .todo li > div { position: relative; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 0; box-shadow: 2px 3px 0 rgba(0, 0, 0, .1); margin-top: .5rem; }
.todo li a::before { content: ""; position: absolute; top: -9px; left: 20px; width: 64px; height: 18px; background: var(--tape); transform: rotate(-4deg); }
.todo li a:hover { background: #fffaf0; }
.todo .ico { border-radius: 3px; border: 2px solid var(--ink); background: var(--surface-2); color: var(--ink); font-family: var(--display); }
.todo .ico.bad { background: var(--bad); color: #fff; }
.todo .ico.warn { background: #f6d378; color: var(--ink); }
.todo .ico.good { background: #cfe9d6; color: var(--ink); }

/* ---------- Matches ---------- */
.scorecard .team { font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.scorecard .score { font-family: var(--display); font-weight: 400; }
.scoreboard .score { font-size: 3.4rem; }
.progress { background: var(--surface-3); border: 1px solid var(--ink); border-radius: 0; height: 6px; }
.progress > i { background: var(--brand); }
.commentary li { border-bottom-color: var(--line); }
.commentary li .min { color: var(--brand); font-family: var(--display); font-weight: 400; }
.commentary li.goal { background: #ffe9a8; }
.commentary li.card { color: #8a5a00; } .commentary li.red { color: var(--bad); }
.statbar .bars { background: var(--surface-3); border: 1px solid var(--ink); border-radius: 0; }
.statbar .bars .h { background: var(--brand); } .statbar .bars .a { background: var(--blue); }

/* ---------- Lineup: the coach's chalkboard with magnets ---------- */
.lineup-pitch {
  border-radius: 6px; border: 10px solid #7a4f2c; box-shadow: 6px 6px 0 var(--ink), inset 0 0 40px rgba(0, 0, 0, .35);
  background-color: #1f3d30;
  background-image:
    radial-gradient(ellipse at 25% 15%, rgba(255, 255, 255, .08), transparent 50%),
    radial-gradient(ellipse at 75% 80%, rgba(255, 255, 255, .06), transparent 45%);
}
.lineup-pitch .lines, .lineup-pitch .half, .lineup-pitch .circle, .lineup-pitch .area, .lineup-pitch .small { border-color: rgba(244, 241, 232, .55); }
.lineup-pitch .p .kit { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, #f5cf55 45%, #b8860b); box-shadow: 0 4px 6px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .2); }
.lineup-pitch .p .kit .shirt, .lineup-pitch .p .kit img { transform: scale(.72); }
.lineup-pitch .p .name { background: #efe0b4; color: #3a2a10; border-radius: 0; transform: rotate(-2deg); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.lineup-pitch .p .role { color: rgba(244, 241, 232, .85); font-family: var(--condensed); }
.lineup-pitch .p.off .role { color: #f5cf55; }
.lineup-pitch .p.out .name { background: #f3b1b1; }
.jersey-empty { border-color: rgba(244, 241, 232, .8); }
.bench-item { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-s); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); text-transform: none; letter-spacing: 0; font-family: var(--font); }
.bench-item:hover { background: #fff3d6; }
.bench-item .info small { color: var(--muted); }
.jersey-empty.small { border-color: var(--line); color: var(--muted); }

/* ---------- Sheets, flash, misc ---------- */
dialog.sheet { background: var(--surface); color: var(--ink); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.sheet-head { background: var(--surface); border-bottom: 3px solid var(--ink); }
.pick { color: var(--ink); text-transform: none; letter-spacing: 0; font-family: var(--font); box-shadow: none; border: 1px solid transparent; background: transparent; }
.pick:hover { background: #fff3d6; }
.pick[aria-current="true"] { border-color: var(--ink); background: #ffe9a8; }
.actionbar { background: rgba(242, 232, 213, .96); border: 2px solid var(--ink); }
.flash { border-radius: 0; box-shadow: 4px 4px 0 var(--ink); font-family: var(--condensed); font-size: 1.05rem; }
.flash.ok { background: #fffaf0; border: 2px solid var(--ink); color: var(--good); }
.flash.error { background: #fffaf0; border: 2px solid var(--bad); color: var(--bad); }
.empty { color: var(--muted); }
.footer { color: var(--muted); }
.steps span { background: var(--surface-3); border: 1px solid var(--ink); border-radius: 0; } .steps span.on { background: var(--brand); }
.swatches label { border: 2px solid var(--ink); }
.shirt-tiles label { background: var(--surface); border: 2px solid var(--ink); }
.kit { filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .25)); }

/* ---------- Navigation, tabs and screen fixes ---------- */
/* One tab row for every section and every in-page switch: album index tabs on an ink rule.
   The row scrolls sideways on phones with the `.hscroll` hints (below). */
.subtabs {
  display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 2rem;
  margin: 0 -1rem 1rem; padding: .25rem 1rem 0; border-bottom: 3px solid var(--ink);
}
.subtabs a, .match-tabs > label {
  flex: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin: 0; padding: 0 .9rem;
  background: var(--surface-2); color: var(--ink); border: 2px solid var(--ink); border-bottom: 0;
  border-radius: var(--radius-s) var(--radius-s) 0 0; box-shadow: none;
  font-family: var(--condensed); font-weight: 800; font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.subtabs a:hover, .match-tabs > label:hover { background: var(--surface); text-decoration: none; }
.subtabs a.active { background: var(--ink); color: var(--surface); box-shadow: inset 0 4px 0 var(--brand); }
.subtabs .tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .72rem; letter-spacing: 0; }
/* In-page tabs (match, championship): the same tabs on the same rule. */
.match-tabs { row-gap: 0; column-gap: .3rem; }
.match-tabs > section { margin-top: 1rem; }
#mt-stats:checked + label, #mt-ratings:checked + label, #mt-feed:checked + label,
#ct-table:checked + label, #ct-fixture:checked + label, #ct-scorers:checked + label, #ct-social:checked + label {
  background: var(--ink); color: var(--surface); border-color: var(--ink); box-shadow: inset 0 4px 0 var(--brand);
}
.match-tabs > input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 480px) { .match-tabs:not(.ch-tabs) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ch-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .match-tabs > label { white-space: normal; text-align: center; justify-content: center; line-height: 1.05; padding: .3rem .4rem; font-size: .8rem; letter-spacing: .03em; } .ch-tabs > label { padding: .3rem .35rem; font-size: .78rem; } }

/* Topbar: a settings gear next to the bell, so "Ajustes" is one tap away everywhere. */
.icon-btn { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }

/* Toast: at the bottom, over the tab bar, so it never covers the page title. */
.flash { top: auto; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + .75rem); animation-name: toast-up; }
@media (min-width: 900px) { .flash { bottom: 1.25rem; } }
@keyframes toast-up { 0% { opacity: 0; transform: translate(-50%, 8px); } 6%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; visibility: hidden; } }

/* Lineup: magnets are buttons without the paper button look (no offset shadow, no press jump). */
.lineup-pitch .p, .lineup-pitch .p:hover, .lineup-pitch .p:active, .lineup-pitch .p:focus {
  box-shadow: none; background: none; border: 0; transform: translate(-50%, -50%);
}
.lineup-pitch .p:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-s); }
/* Hidden radios stay inside their row (they made the page scroll sideways at 390 px). */
.segmented { position: relative; }
.segmented input { left: 0; top: 0; width: 1px; height: 1px; }
.segmented label { min-height: 44px; display: inline-flex; align-items: center; }

/* Error pages: a taped clipping with a big number. */
.error-body { padding-bottom: 0; }
.error-page { display: grid; place-items: center; min-height: calc(100vh - 140px); padding: 2rem 1rem; }
.error-clip {
  position: relative; width: min(100%, 460px); text-align: center; padding: 2.2rem 1.5rem 1.8rem;
  background: var(--surface); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--brand); transform: rotate(-.6deg);
}
.error-clip::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; background: var(--tape); transform: translateX(-50%) rotate(-3deg); }
.error-clip h1 { margin: .7rem 0 .5rem; }
.error-code { margin: 0; font-family: var(--display); font-size: clamp(4.5rem, 22vw, 7rem); line-height: .9; color: var(--brand); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); }
.error-text { color: var(--muted); margin: 0 auto 1.4rem; max-width: 32ch; }
.error-art { width: 92px; height: 92px; display: block; margin: 0 auto .4rem; }
.error-art .pole { fill: var(--ink); }
.error-art .flag-a { fill: var(--brand); stroke: var(--ink); stroke-width: 2; }
.error-art .flag-b { fill: var(--ink); }
.error-art .box { fill: var(--brand-2); stroke: var(--ink); stroke-width: 3; }
.error-art .dial { fill: var(--surface-2); stroke: var(--ink); stroke-width: 3; }
.error-art .grill { fill: var(--ink); opacity: .8; }
.error-art .needle { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }

/* Dashboard: next match link, invite buttons and the first-steps checklist. */
.ux-more { font-family: var(--condensed); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; min-height: 44px; display: inline-flex; align-items: center; }
.ux-share { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.ux-share > * { flex: 1 1 10rem; justify-content: center; text-align: center; }
.ux-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ux-steps a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; min-height: 52px; padding: .5rem .75rem; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.ux-steps a:hover { background: var(--surface); text-decoration: none; border-color: var(--ink); }
.ux-steps b { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand); color: var(--brand-ink); border: 2px solid var(--ink); font-family: var(--display); font-weight: 400; }
.ux-steps i { font-style: normal; color: var(--muted); font-size: 1.3rem; }

/* Settings: one block per field, with room between them; the button under the field on phones. */
.set-rival { gap: .45rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px dashed var(--line); }
.set-link + .set-link { margin-top: -.4rem; }
.set-field { display: grid; gap: .5rem; }
.set-field input { width: 100%; min-width: 0; }
.set-field button { justify-self: start; min-width: 8rem; }
@media (min-width: 600px) { .set-field { grid-template-columns: minmax(0, 1fr) auto; } .set-field button { justify-self: stretch; } }

/* [D] City picker (components/city_picker.html): a search box and the matches as a list of
   radio rows, big enough to tap. */
.city-pick { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .45rem; }
.reg-names .city-pick { padding-top: 1rem; margin-top: 1rem; border-top: 1px dashed var(--line); }
.city-pick legend { padding: 0; margin-bottom: .3rem; font-size: .85rem; color: var(--ink); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.city-options { display: grid; gap: .3rem; }
.city-opt { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .55rem .7rem; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font-family: var(--font); font-size: .95rem; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; }
.city-opt input { flex: none; margin: 0; }
.city-opt span { min-width: 0; overflow-wrap: anywhere; }
.city-opt:has(input:checked) { border-color: var(--brand); background: var(--surface-2); font-weight: 700; }
.city-none span { color: var(--muted); }
.city-empty { margin: 0; font-size: .88rem; }
.club-city { white-space: normal; }

/* Sponsors: a wordmark when there is no logo, the terms as a small table, locked offers folded. */
.sponsor-wordmark { font-family: var(--display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.ux-terms { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; margin: .5rem 0 0; }
.ux-terms div { display: grid; }
.ux-terms dt { font-family: var(--condensed); font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ux-terms dd { margin: 0; font-weight: 700; }
.sponsor-card.locked { opacity: .75; box-shadow: 2px 2px 0 var(--line); }
.ux-fold > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .4rem; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

/* Market: the filters wrap (no hidden ones), and the per-player buttons are quiet. */
.market-filters { flex-wrap: wrap; overflow: visible; }
@media (max-width: 699px) { .market-filters { display: grid; grid-template-columns: 1fr 1fr; } .market-filters select { min-width: 0; width: 100%; } .market-clear { grid-column: 1 / -1; } }
.market-filters select { flex: 1 1 9.5rem; max-width: none; min-height: 44px; padding-left: .6rem; padding-right: 1.6rem; font-size: .82rem; text-overflow: ellipsis; border: 2px solid var(--ink); border-radius: var(--radius-s); font-family: var(--condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.market-toggle { min-height: 44px; border: 2px solid var(--ink); border-radius: var(--radius-s); font-family: var(--condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--surface); }
.market-toggle:has(input:checked) { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.market-go { border-radius: var(--radius-s); min-height: 44px; }
.market-btn { min-height: 44px; box-shadow: 2px 2px 0 var(--ink); }
.ux-sorted { font-family: var(--font); font-size: .8rem; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* Registration: the chosen kit and crest get the brand ring (not the old green). */
form[action="/registration"] .kit-tiles input:checked + label { border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--brand); background: var(--surface); color: var(--ink); }
form[action="/registration"] .kit-tiles label { min-height: 44px; }
/* Tribunal: bigger pips, easier to read and count. */
.trib-dots { gap: .4rem; }
.trib-dots i { width: 18px; height: 18px; border: 2px solid var(--ink); }
.trib-dots.yellow i { width: 16px; height: 22px; }
.day-picker > label { width: 44px; height: 44px; }
button.link { min-height: 44px; }

/* Squad legend: the real fitness bar and rating badge, small, as samples. */
.squad-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; font-size: .82rem; color: var(--muted); margin: .25rem 0 .5rem; }
.squad-legend > span { display: inline-flex; align-items: center; gap: .45rem; }
.squad-legend .meter { width: 44px; }
.squad-legend .rating { width: 30px; height: 30px; min-width: 30px; font-size: .9rem; display: inline-grid; place-items: center; }

/* Folder switches inside a page (messages): the same ink look as the tabs, smaller. */
.msg-folders { gap: .3rem; }
.msg-folders a { min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--radius-s); border: 2px solid var(--ink); background: var(--surface-2); color: var(--ink); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.msg-folders a.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* The club chip: the crest is the club's mark (no kit); the name gives way on phones. */
.club-chip .crest { width: 22px; }

/* Tap targets: 44 px for small round buttons. */
.help-q { width: 44px; height: 44px; border: 2px solid var(--ink); color: var(--ink); font-family: var(--display); font-size: 1.1rem; }
.help-q:hover { color: var(--brand-ink); background: var(--brand); border-color: var(--ink); }

/* Landing hero: a magazine cover. */
.hero h1 { font-family: var(--display); text-transform: uppercase; }
.hero h1 b { color: var(--brand); }
.hero ul:not(.commentary) li::before { color: var(--brand); }

/* Levels pyramid: higher levels are narrower, like the top of a pyramid. */
.pyramid { display: grid; gap: .9rem; justify-items: center; }
.pyramid-level { width: var(--w, 100%); min-width: min(100%, 320px); }
@media (max-width: 600px) { .pyramid-level { width: 100%; } }

/* ---------- Vitrina (palmarés) ---------- */
/* A museum case on the album page: a dark wooden cabinet lit from above, glass shelves, trophies drawn in SVG
   (components/trophy.html) with brass plaques, and empty pedestals as dashed silhouettes. Then the records wall:
   magazine clippings with big figures. */
:root {
  --wood: #6b4226; --wood-hi: #8f5f38; --wood-dark: #3a2312;
  --case-back: #2b1d14; --case-back-2: #160e09; --case-light: rgba(255, 228, 170, .42); --case-glow: rgba(255, 214, 130, .35);
  --case-label: #f1e2c2; --case-dim: rgba(241, 226, 194, .45);
  --glass: rgba(205, 232, 238, .22); --glass-edge: rgba(255, 255, 255, .85); --glint: rgba(255, 255, 255, .85);
  --gold-hi: #fff3c4; --gold-mid: #e4b437; --gold-lo: #8f6510;
  --silver-hi: #ffffff; --silver-mid: #c4cdd4; --silver-lo: #6f7b85;
  --bronze-hi: #f8cfa2; --bronze-mid: #c27b3d; --bronze-lo: #6f3b16;
  --brass-hi: #f3dc9a; --brass-lo: #b98f37; --brass-edge: #7d5c1c;
}
.museum { display: grid; gap: 1.2rem; margin-top: 1.2rem; min-width: 0; }
@media (min-width: 900px) { .museum { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; } }
.vitrina { min-width: 0; }
.vitrina-head { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .7rem; margin-bottom: .6rem; }
.vitrina-head h2 { margin: 0; font-size: clamp(1.7rem, 6.5vw, 2.3rem); line-height: 1; }
.vitrina-kicker { background: var(--tape); color: var(--ink); padding: .1rem .55rem; transform: rotate(-2deg); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.vitrina-count { margin-left: auto; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vitrina-case {
  position: relative; overflow: hidden; padding: 1rem .75rem .4rem;
  border: 12px solid var(--wood); border-radius: 3px; outline: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink), inset 0 0 0 2px var(--wood-dark), inset 0 14px 30px rgba(0, 0, 0, .6);
  background:
    radial-gradient(ellipse 30% 55% at 18% -8%, var(--case-light), transparent 70%),
    radial-gradient(ellipse 30% 55% at 50% -8%, var(--case-light), transparent 70%),
    radial-gradient(ellipse 30% 55% at 82% -8%, var(--case-light), transparent 70%),
    linear-gradient(180deg, var(--case-back), var(--case-back-2));
}
/* The front glass: two soft diagonal reflections. */
.vitrina-case::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .07) 34%, transparent 42%, transparent 64%, rgba(255, 255, 255, .05) 68%, transparent 74%); }
/* A strip of lamps along the top of the case. */
.vitrina-case::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: radial-gradient(circle, var(--gold-hi) 1.5px, transparent 2.5px) 0 0 / 22px 5px repeat-x, var(--wood-dark); }
.shelf-label { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .35rem; color: var(--case-label); font-family: var(--condensed); font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.shelf-label::after { content: ""; flex: 1; height: 1px; background: var(--case-dim); }
.records-wall .shelf-label { color: var(--ink); }
.records-wall .shelf-label::after { background: var(--ink); height: 2px; }
.shelf { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); column-gap: .4rem; row-gap: 1.3rem; }
.piece { position: relative; display: grid; grid-template-rows: 104px auto; justify-items: center; align-content: start; text-align: center; min-width: 0; }
/* The glass shelf under each trophy (pieces sit side by side, so the shelf looks continuous). */
.piece::before { content: ""; position: absolute; top: 104px; left: -.25rem; right: -.25rem; height: 7px; background: linear-gradient(180deg, var(--glass-edge), var(--glass) 45%, rgba(0, 0, 0, .3)); box-shadow: 0 9px 12px -7px rgba(0, 0, 0, .7); }
.vt-defs { position: absolute; width: 0; height: 0; }
.vt-art { align-self: end; display: block; height: 88px; width: auto; overflow: visible; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .55)) drop-shadow(0 0 12px var(--case-glow)); }
.vt-league { height: calc(74px + min(var(--lvl, 1), 4) * 7px); }
.vt-friendly, .vt-promotion { height: 82px; }
@media (min-width: 900px) {
  .shelf { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); column-gap: .6rem; }
  .piece { grid-template-rows: 124px auto; } .piece::before { top: 124px; }
  .vt-art { height: 104px; } .vt-league { height: calc(90px + min(var(--lvl, 1), 4) * 8px); } .vt-friendly, .vt-promotion { height: 96px; }
  .plaque { max-width: 170px; font-size: .8rem; } .plaque-name { font-size: .86rem; } .plaque-num { font-size: 1.05rem; }
}
#vt-gold .lo { stop-color: var(--gold-lo); } #vt-gold .hi { stop-color: var(--gold-hi); } #vt-gold .mid { stop-color: var(--gold-mid); }
#vt-silver .lo { stop-color: var(--silver-lo); } #vt-silver .hi { stop-color: var(--silver-hi); } #vt-silver .mid { stop-color: var(--silver-mid); }
#vt-bronze .lo { stop-color: var(--bronze-lo); } #vt-bronze .hi { stop-color: var(--bronze-hi); } #vt-bronze .mid { stop-color: var(--bronze-mid); }
.vt-gold { --metal: url(#vt-gold); --metal-line: var(--gold-lo); }
.vt-silver { --metal: url(#vt-silver); --metal-line: var(--silver-lo); }
.vt-bronze { --metal: url(#vt-bronze); --metal-line: var(--bronze-lo); }
.vt-art .m { fill: var(--metal); }
.vt-art .m-handle, .vt-art .m-edge { fill: none; stroke: var(--metal); stroke-width: 3.6; stroke-linecap: round; }
.vt-art .m-line { fill: none; stroke: var(--metal-line); stroke-width: 1.4; opacity: .6; }
.vt-art .m-engrave { fill: none; stroke: var(--metal-line); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vt-art .m-band { fill: var(--metal-line); }
.vt-art .glint { fill: none; stroke: var(--glint); stroke-width: 2; stroke-linecap: round; opacity: .75; }
.vt-art .ribbon { fill: var(--brand); } .vt-art .ribbon-2 { fill: var(--blue); }
.vt-art .plinth { fill: var(--wood-hi); } .vt-art .plinth-2 { fill: var(--wood-dark); }
/* The engraved brass plaque, with two screws. */
.plaque {
  margin-top: .55rem; width: 100%; max-width: 150px; padding: .3rem .45rem .35rem; border: 1px solid var(--brass-edge); border-radius: 2px;
  color: var(--ink); font-size: .74rem; line-height: 1.15; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); box-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  background:
    radial-gradient(circle at 5px 5px, var(--brass-edge) 1.3px, transparent 1.9px),
    radial-gradient(circle at calc(100% - 5px) 5px, var(--brass-edge) 1.3px, transparent 1.9px),
    linear-gradient(180deg, var(--brass-hi), var(--brass-lo));
}
.plaque-name { display: block; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
.plaque a { display: block; color: var(--ink); font-weight: 700; text-decoration: underline dotted; text-underline-offset: 2px; overflow-wrap: anywhere; padding: .1rem 0; }
.plaque a:hover { color: var(--wood-dark); text-decoration-style: solid; }
.plaque-num { display: block; font-family: var(--display); font-size: .92rem; letter-spacing: .02em; }
.plaque-hint { display: block; margin-top: .1rem; font-size: .72rem; }
/* Empty pedestals: a dashed silhouette and a plaque that says what it takes. */
.piece.ghost .vt-art { filter: none; opacity: .5; }
.piece.ghost .vt-art .m, .piece.ghost .vt-art .m-handle, .piece.ghost .vt-art .m-edge, .piece.ghost .vt-art .ribbon, .piece.ghost .vt-art .ribbon-2 { fill: none; stroke: var(--case-label); stroke-width: 1.3; stroke-dasharray: 3 2.5; }
.piece.ghost .vt-art .m-line, .piece.ghost .vt-art .m-engrave, .piece.ghost .vt-art .glint, .piece.ghost .vt-art .m-band { display: none; }
.piece.ghost .plaque { background: rgba(0, 0, 0, .25); border: 1px dashed var(--case-dim); color: var(--case-label); text-shadow: none; box-shadow: none; }
@media (max-width: 420px) { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plaque { font-size: .7rem; padding: .28rem .3rem; } .plaque-name { font-size: .72rem; } }
/* The records wall: clippings with big figures. */
.records-wall { min-width: 0; }
.records-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; font-size: clamp(1.4rem, 5vw, 1.8rem); }
.records-title::after { content: ""; flex: 1; height: 4px; background: var(--ink); }
.records-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem .8rem; }
@media (min-width: 900px) { .museum .records-grid { grid-template-columns: 1fr; } }
.record { position: relative; display: grid; gap: .15rem; padding: .9rem .9rem .75rem; background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow); transform: rotate(-.6deg); }
.record:nth-child(2n) { transform: rotate(.5deg); }
.record::before { content: ""; position: absolute; top: -9px; left: 50%; width: 58px; height: 16px; margin-left: -29px; background: var(--tape); transform: rotate(-3deg); }
.record-label { color: var(--muted); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.record-figure { font-family: var(--display); font-size: 3.1rem; line-height: .95; color: var(--brand-2); text-decoration: none; }
.record-figure small { margin-left: .35rem; font-family: var(--condensed); font-weight: 800; font-size: 1.1rem; color: var(--ink); text-transform: uppercase; }
a.record-figure:hover { color: var(--ink); }
.record-link { font-family: var(--condensed); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); overflow-wrap: anywhere; }
.record small a, .record-link a { color: var(--blue); }
.idols { margin: 0; padding: .3rem .8rem; background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow); }
/* Club idols (rules::idols): a museum plaque per stature, the highest first. */
.idol-group + .idol-group { border-top: 2px solid var(--ink); margin-top: .2rem; padding-top: .2rem; }
.idol-group-title { margin: .35rem 0 .1rem; font-family: var(--condensed); font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.idol-group ul { list-style: none; margin: 0; padding: 0; }
.idol { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-height: 44px; padding: .2rem 0; border-bottom: 1px dashed var(--line); }
.idol:last-child { border-bottom: 0; }
.idol a { flex: 1; min-width: 8rem; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idol.is-legend a { font-size: 1.15rem; }
.idol-line { font-family: var(--condensed); font-weight: 700; color: var(--muted); white-space: nowrap; }
.idol-line em { font-style: normal; }
/* The badge is an ink stamp in the stature's metal: gold legend, silver idol, bronze mainstay. */
.idol-badge {
  flex: none; display: inline-block; min-width: 5.6rem; padding: .12rem .45rem; border: 2px solid currentColor; border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--surface), inset 0 0 0 2px currentColor; text-align: center;
  font: 400 .8rem/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: rotate(-4deg);
}
.idol-badge.is-legend { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.idol-badge.is-idol { color: var(--silver-lo); }
.idol-badge.is-mainstay { color: var(--bronze); }
.idol-badge.is-new { animation: mo-ink var(--mo-party) var(--mo-spring) both; }
.idols-empty .empty { margin: .4rem 0; }
.idol-how { margin: 0 0 .3rem; }
.idol-how-row { display: grid; grid-template-columns: 6.4rem 1fr; gap: .6rem; align-items: start; padding: .35rem 0; border-top: 1px dashed var(--line); }
.idol-how dt, .idol-how dd { margin: 0; }
.idol-how dd { color: var(--muted); font-size: .92rem; }
@media (max-width: 420px) { .idol-how-row { grid-template-columns: 1fr; gap: .2rem; } }
/* The player page: his stature at a club. */
.pc-stature .idol-badge { min-width: 0; margin-right: .3rem; }

/* ---------- Crests and the kit studio (docs/ux.md "Kits" and "Crests") ---------- */
.crest { display: inline-block; flex: none; vertical-align: middle; height: auto; filter: drop-shadow(0 1px 1px rgba(23, 19, 15, .35)); }
.with-crest { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
/* The crest is sewn on the left chest, the sponsor printed on the chest: both look part of the fabric. */
.kit .kit-crest, .kit-preview .kit-big .kit-crest { position: absolute; left: 62.5%; top: 25.5%; width: 11%; height: auto; transform: translate(-50%, -50%); pointer-events: none; opacity: .97; filter: drop-shadow(0 .5px .6px rgba(0, 0, 0, .45)); }
.kit .sponsor, .kit-preview .kit-big .sponsor { opacity: .93; transform: translate(-50%, -50%) perspective(160px) rotateX(4deg); filter: contrast(.96) saturate(.95); }
/* Studio: a soft spotlight on cream paper with a floor shadow, for the big previews of the editors. */
.studio { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.08; padding: 6% 0 9%; border: 2px solid var(--ink); border-radius: var(--radius); background: radial-gradient(ellipse 58% 52% at 50% 40%, #fffdf8 0%, #f8efdc 50%, #e6d6b6 100%); box-shadow: var(--shadow); overflow: hidden; }
.studio::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 4.5%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(40, 25, 5, .3), transparent 70%); }
.studio .kit-big { position: relative; z-index: 1; width: 84%; max-width: 380px; aspect-ratio: 200 / 220; filter: drop-shadow(0 16px 18px rgba(40, 25, 5, .32)); }
.studio .kit-big > img:first-child { width: 100%; height: 100%; display: block; }
.studio .crest-big { position: relative; z-index: 1; width: 64%; max-width: 300px; height: auto; filter: drop-shadow(0 14px 16px rgba(40, 25, 5, .32)); }
.studio-label { position: absolute; z-index: 2; top: .6rem; left: .75rem; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--muted); }
.studio-mini { position: absolute; z-index: 2; right: .6rem; bottom: .6rem; display: flex; gap: .3rem; align-items: end; }
@media (min-width: 900px) { .kit-editor { grid-template-columns: minmax(400px, 46%) 1fr; } }
/* The preview stays in view while the options scroll: the column sticks on wide screens; on
   phones a small floating shirt appears once the big one is scrolled away. */
/* Only on screens tall enough for the whole card: on a short screen (or a big browser zoom)
   a sticky card would hide its own save buttons, so it scrolls with the page. */
@media (min-width: 900px) and (min-height: 640px) { .kit-editor .kit-preview { position: sticky; top: 4.75rem; max-height: calc(100vh - 5.5rem); overflow: auto; } }
/* Wide screens: the studio is never taller than the screen leaves room for, so the save
   buttons under it stay in view (on a wide, short screen the square studio pushed them out). */
@media (min-width: 900px) {
  .kit-editor .studio { aspect-ratio: auto; height: min(46vw * 1.08, 100vh - 21rem, 560px); min-height: 220px; padding: 0; }
  /* The crest card also carries the size samples. */
  #crest-form .studio { height: min(46vw * 1.08, 100vh - 29rem, 480px); }
  .kit-editor .studio .kit-big { width: auto; height: 80%; max-width: 84%; }
  #crest-form .studio .crest-big { width: auto; height: 74%; max-width: 64%; }
}
.kit-float { display: none !important; }
@media (max-width: 899px) {
  .kit-float.on { display: inline-block !important; position: fixed; z-index: 20; right: 12px; bottom: 88px; padding: 6px; border: 2px solid var(--ink); border-radius: var(--radius); background: #fffdf8; box-shadow: var(--shadow); box-sizing: content-box; }
}
/* The 3D viewer's close-up button: only once the 3D shirt shows. */
.studio .kit-zoom { position: absolute; z-index: 2; right: .6rem; bottom: .6rem; display: none; min-height: 36px; padding: .3rem .7rem; font-size: .8rem; }
.studio.kit3d-on .kit-zoom { display: inline-flex; }
/* Fabric picker: a close-up of each fabric in the shirt's main color (the same tiles as the kits). */
.fabric-swatch { display: block; width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: var(--radius-s); background-color: var(--kit, #b02a2a); background-size: 64px 64px; background-blend-mode: overlay; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), inset 0 -10px 14px rgba(0, 0, 0, .12); }
.fabric-swatch.smooth { background-image: url(/static/img/fabric/smooth-swatch.webp?v=3), linear-gradient(135deg, rgba(255, 255, 255, .28), transparent 55%); }
.fabric-swatch.mesh { background-image: url(/static/img/fabric/mesh-swatch.webp?v=3); background-size: 128px 128px; }
.fabric-swatch.pique { background-image: url(/static/img/fabric/pique-swatch.webp?v=3); background-size: 96px 96px; }
.fabric-swatch.jacquard { background-image: url(/static/img/fabric/jacquard-swatch.webp?v=3); }
.fabric-swatch.ribbed { background-image: url(/static/img/fabric/ribbed-swatch.webp?v=3); }
.fabric-swatch.twill { background-image: url(/static/img/fabric/twill-swatch.webp?v=3); }
/* Crest editor: the samples at the real size of each place, each with its name under it. */
.crest-sizes-title { margin: 0; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; color: var(--muted); text-align: center; }
.crest-sizes { display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: .6rem .9rem; margin: 0; padding: 0; list-style: none; }
.crest-sizes li { display: grid; justify-items: center; align-content: end; gap: .3rem; max-width: 5.5rem; }
.crest-sizes small { font-size: .72rem; line-height: 1.15; color: var(--muted); text-align: center; }
/* Club page: the kits showcase (read-only studios: the crest, then each kit with front and back). */
.showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
@media (min-width: 760px) { .showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.showcase-item { position: relative; margin: 0; display: grid; grid-template-rows: auto auto; align-content: start; gap: .45rem; min-width: 0; }
.showcase-studio { aspect-ratio: 1 / 1.1; padding: 6% 0 9%; box-shadow: 3px 3px 0 var(--ink); }
.showcase-studio .kit { width: 76%; height: auto; aspect-ratio: 200 / 220; filter: drop-shadow(0 12px 14px rgba(40, 25, 5, .3)); z-index: 1; }
.showcase-studio .kit .kit-img { height: 100%; }
.showcase-studio .crest-big { width: 62%; }
.showcase-back, .showcase-flip:checked ~ .studio .showcase-front { display: none; }
.showcase-flip:checked ~ .studio .showcase-back { display: inline-block; }
.showcase-flip { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.showcase-item figcaption { display: flex; flex-wrap: wrap; align-items: center; column-gap: .5rem; min-height: 44px; font-family: var(--condensed); text-transform: uppercase; letter-spacing: .03em; }
.showcase-item figcaption b { flex: 1 0 auto; font-weight: 800; }
.showcase-turn, .showcase-edit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; font-size: .85rem; font-weight: 700; color: var(--blue); white-space: nowrap; cursor: pointer; }
/* The manager's edit link: a round button on the corner of the studio. */
.showcase-edit { position: absolute; z-index: 2; top: .4rem; right: .4rem; width: 40px; min-height: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.1rem; text-decoration: none; }
.showcase-edit::after { content: ""; position: absolute; inset: -4px; }
/* The kit editor tabs: three equal tabs, the shirt over its name, so they fit on a phone. */
.kit-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kit-tabs .button { flex-direction: column; gap: .15rem; min-width: 0; padding: .4rem .3rem; font-size: .9rem; }
.showcase-turn .to-front, .showcase-flip:checked ~ figcaption .to-back { display: none; }
.showcase-flip:checked ~ figcaption .to-front { display: inline; }
.showcase-flip:focus-visible ~ figcaption .showcase-turn { outline: 2px solid var(--info); outline-offset: 2px; }
.crest-tiles label img { max-width: 52px; }
.crest-gallery-grid img { max-width: 120px; }
.crest-texts { display: grid; gap: .75rem; }
.crest-texts .check { display: flex; align-items: center; gap: .5rem; margin: 0; }
.crest-texts .check input { width: auto; min-height: 0; }
.crest-texts fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .4rem; min-width: 0; }
.crest-initials { display: grid; gap: .75rem; }
.crest-initials > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.crest-initials > div:first-child label { flex-basis: 100%; }
.crest-initials #crest-letters-hint { flex: 1 1 12rem; }
/* Phones: a shorter studio, and a small live preview that stays in view while typing. */
.crest-float { display: none; }
@media (max-width: 899px) {
  #crest-form .studio { aspect-ratio: auto; padding: 1.6rem 0 1rem; }
  #crest-form .studio .crest-big { width: 46%; max-width: 190px; }
  .crest-float.on { display: block; position: fixed; z-index: 20; right: 12px; bottom: 88px; width: 76px; height: auto; padding: 4px; border: 2px solid var(--ink); border-radius: var(--radius); background: #fffdf8; box-shadow: var(--shadow); }
}

.todo .ico.auto { background: #dbe4f5; color: var(--ink); }
.all-set h2 { color: #1f7a3a; }
.kit-category { margin: .25rem 0; }
.kit-category > summary { cursor: pointer; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .5rem 0; min-height: 44px; display: flex; align-items: center; gap: .4rem; }
.kit-tiles .preset { display: grid; place-items: center; padding: .3rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.kit-tiles .preset img { width: 100%; max-width: 64px; height: auto; }
.color-row .auto-color { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .4rem 0 0; font-size: .85rem; }
.color-row .auto-color input { width: auto; min-height: 0; }
/* A sponsor on a dark shirt is printed as a white silhouette, so dark wordmarks stay readable. */
.kit .sponsor.on-dark, .kit-preview .kit-big .sponsor.on-dark { filter: brightness(0) invert(1) drop-shadow(0 .5px .5px rgba(0, 0, 0, .35)); opacity: .95; }
/* Picker labels fit their tiles, also at 390 px. */
.kit-tiles label { font-family: var(--condensed); font-size: .7rem; line-height: 1.1; letter-spacing: .01em; overflow-wrap: anywhere; hyphens: auto; min-width: 0; }
.kit-tiles { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
/* The number builder: back, chest and shorts side by side; the suggested styles first. */
.kit-numbers h3 { font-family: var(--condensed); font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; margin: 1rem 0 .4rem; }
.number-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; align-items: end; margin: .5rem 0; }
.number-views figure { margin: 0; display: grid; justify-items: center; gap: .2rem; padding: .3rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.number-views img { width: 100%; height: auto; max-width: 150px; }
.number-views figcaption { font-family: var(--condensed); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.number-suggested .preset { gap: .15rem; font-family: var(--condensed); font-size: .7rem; line-height: 1.1; color: var(--muted); text-align: center; text-decoration: none; position: relative; min-width: 0; overflow-wrap: anywhere; }
.number-suggested .preset.on { border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--brand); color: var(--ink); }
.number-suggested .preset .badge { position: absolute; top: 2px; left: 2px; font-size: .6rem; padding: 0 .3rem; }
.number-width { border: 0; padding: 0; margin: .5rem 0; min-width: 0; }
.number-width legend { font-weight: 600; margin-bottom: .3rem; padding: 0; }
.number-width .segmented label { padding: .3rem .6rem; font-size: .8rem; }
.number-extras { display: grid; gap: .3rem; margin-top: .6rem; }
.number-extras .check input { width: auto; min-height: 0; }

/* ---------- AM radio and match pages ---------- */
/* The commentary is an AM radio: a wooden box with an ink outline (an album cut-out), a cream
   dial whose needle follows the minute, the newest line in big type and two brass knobs. */
:root { --radio-wood: #6b4226; --radio-wood-dark: #3b2414; --radio-dial: #f1dfb2; --radio-dial-ink: #5a3d17; --radio-text: #f7ecd2; --radio-gold: #e2b450; }
.match-radio {
  border-radius: var(--radius); border: 2px solid var(--ink); box-shadow: var(--shadow), inset 0 0 0 3px rgba(226, 180, 80, .35);
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px), linear-gradient(160deg, var(--radio-wood), var(--radio-wood-dark) 75%);
  padding: .7rem .85rem .8rem; gap: .6rem; margin: 0 0 1rem;
}
.match-radio::before, .match-radio::after { content: none; }
/* The stadium picture (static/js/match.js): a day match printed on the page, framed in ink. */
.match-stadium { border: 2px solid var(--ink); border-radius: var(--radius-s); }
.match-radio-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.match-radio-brand { color: var(--radio-gold); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.match-radio-onair { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .5rem; background: var(--brand); color: var(--brand-ink); border: 2px solid var(--ink); border-radius: 3px; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.match-radio-onair::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: match-blink .9s ease-in-out infinite alternate; }
.match-dial { background: linear-gradient(var(--radio-dial), #dcc38c); color: var(--radio-dial-ink); border: 2px solid var(--ink); border-radius: var(--radius-s); font-family: var(--condensed); height: 32px; }
.match-needle { background: var(--brand); box-shadow: 0 0 0 1px var(--ink); width: 4px; }
.match-radio-line { color: var(--radio-text); font-family: var(--font); font-size: 1.15rem; font-weight: 600; }
.match-radio-line b { color: var(--radio-gold); font-family: var(--display); font-weight: 400; font-size: 1.35rem; }
.match-radio-line.goal span { color: #fff; font-family: var(--condensed); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; text-shadow: none; }
.match-radio-line.red span { color: #f3b1b1; }
.match-radio-line.match-buildup-line span { color: var(--radio-gold); }
.match-grille { height: 26px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .5) 0 3px, transparent 3px 7px); border-radius: var(--radius-s); }
.match-grille i { width: 22px; height: 22px; border: 2px solid var(--ink); background: radial-gradient(circle at 35% 35%, #f6e2b0, #a77b1f 70%); }
@media (prefers-reduced-motion: reduce) { .match-radio-onair::before { animation: none; } }

/* The commentary list under the radio: a column of clippings. */
.match-feed .commentary li { grid-template-columns: 2.6rem 1.4rem 1fr; }
.match-feed .commentary li .min { color: var(--ink); font-family: var(--display); font-size: 1.05rem; }
.match-feed .commentary li.goal { background: #ffe9a8; box-shadow: inset 4px 0 0 var(--brand); }
.match-feed .commentary li.red { color: var(--bad); }
/* [D] The relato on paper: three voices, each with its ink (the relator orange, the
   comentarista blue, the stands magenta); on the radio, the same voices in light colours. */
.v-relator { --voice: var(--brand-2); }
.v-comentarista { --voice: var(--blue); }
.v-tribuna { --voice: #9d174d; }
.match-radio .v-relator, .match-radio-line.v-relator { --voice: var(--radio-gold); }
.match-radio .v-comentarista, .match-radio-line.v-comentarista { --voice: #a9d8ff; }
.match-radio .v-tribuna, .match-radio-line.v-tribuna { --voice: #f9b4d6; }
.match-booth { font-family: var(--condensed); font-size: .95rem; }
.mb-voice img { border-width: 3px; }
.mb-voice b { color: var(--ink); text-decoration: underline 3px var(--voice); text-underline-offset: 3px; }
.match-feed .commentary li.rl { border-left: 4px solid var(--voice); }
.match-feed .commentary li.v-comentarista, .match-feed .commentary li.v-tribuna { color: var(--text); font-size: .95em; }
.match-feed .commentary li.v-tribuna { font-style: italic; background: #fbeef4; }
.match-feed .commentary li.beat { color: var(--muted); font-style: italic; font-size: .9em; }
.match-feed .commentary li.goal-play { background: #ffe9a8; }
.match-feed .commentary li.cry .rl-body { font-family: var(--condensed); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; }
.rl-body a { color: inherit; text-decoration: underline; text-decoration-color: var(--voice); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.match-radio-line .rl-body { color: var(--radio-text); }
.match-radio-line a { color: inherit; }
.match-overlay.is-goal .match-overlay-card strong { overflow-wrap: anywhere; }
.match-radio-line.v-comentarista .rl-body { color: #d6ecff; font-weight: 500; }
.match-radio-line.v-tribuna .rl-body { color: #fde0ee; font-style: italic; font-weight: 500; }
.match-radio-line.beat .rl-body { color: var(--radio-gold); font-style: italic; }
.match-radio-line.goal .rl-who { font-size: 1rem; }
.match-radio-line .rl-name { color: var(--voice); }
.rl-shout { font-family: var(--display); font-style: normal; font-weight: 400; color: #fff; text-shadow: 3px 3px 0 var(--ink); }

/* Match tabs: the same ink tabs as the section sub-tabs; 44 px targets. */
.match-live .match-tabs { gap: .4rem; }
.match-tabs > label { min-height: 44px; display: inline-flex; align-items: center; padding: .4rem .9rem; border: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
#mt-stats:checked + label, #mt-ratings:checked + label, #mt-feed:checked + label { background: var(--ink); border-color: var(--ink); color: #fff; }
.match-tabs > input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Scoreboard and score cards: paper, names on up to two lines, only my club marked. */
.md-crumb { margin: 0 0 .75rem; font-family: var(--condensed); font-weight: 700; }
.scoreboard { background: var(--surface); }
.scorecard-link { display: block; color: inherit; text-decoration: none; }
.scorecard-link:hover { text-decoration: none; }
.scorecard a.team { color: var(--ink); text-decoration: none; }
.scorecard a.team:hover .team-name { text-decoration: underline; }
.scorecard .team span { white-space: normal; overflow: visible; }
.scorecard .team .team-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.1; overflow-wrap: anywhere; }
.scorecard .team .with-crest { flex-direction: column; gap: .2rem; }
.scoreboard .scorecard .team .team-name { display: block; -webkit-line-clamp: unset; overflow: visible; }
.scorecard .team.us .team-name > span, .match-line .us .ml-name > span { background: linear-gradient(transparent 55%, var(--tape) 55%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.md-kickoff { font-size: 1.4rem; }
.match-marks { font-family: var(--condensed); font-weight: 700; font-size: .95rem; }
.match-marks > div { display: grid; gap: .15rem; }
.match-marks a { color: var(--ink); }
.md-mvp { margin: .75rem 0 0; text-align: center; font-family: var(--condensed); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; }
.md-mvp a { color: var(--ink); }
.md-mvp small { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; }
.match-feed .match-radio { max-width: 760px; margin-left: auto; margin-right: auto; }
.md-prematch { margin-top: .9rem; display: grid; gap: .5rem; justify-items: center; text-align: center; }
.md-prematch p { margin: 0; }
.md-prematch .row { justify-content: center; }
.md-center { margin: .75rem 0; text-align: center; }
.md-card-head { margin-bottom: .75rem; }

/* Match lines: kit icons and names that wrap instead of being cut; no full-row highlight. */
.match-line { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem; }
.match-line.mine { background: none; font-weight: inherit; }
.match-line:hover { background: #fff3d6; }
.match-line .home, .match-line .away { display: flex; align-items: center; gap: .35rem; min-width: 0; white-space: normal; overflow: visible; }
.match-line .home { justify-content: flex-end; }
.match-line .kit { flex: none; }
.ml-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; line-height: 1.15; font-family: var(--condensed); font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.match-line .us .ml-name { font-weight: 800; }
.md-day { border-bottom: 1px solid var(--line); padding-top: .35rem; }
.md-day:last-child { border-bottom: 0; }
.md-day > small { display: block; text-align: center; color: var(--muted); font-family: var(--condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.md-day .match-line { border-bottom: 0; padding-top: .15rem; }

/* Stats: bars in the two kits' colors, under the team names. */
.md-stats-head { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; font-family: var(--condensed); font-size: 1rem; text-transform: uppercase; }
.md-stats-head .with-crest { min-width: 0; }
.md-stats-head b { overflow-wrap: anywhere; line-height: 1.1; }
.match-stats .statbar .label { color: var(--ink); font-family: var(--condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.match-stats .statbar .bars { height: 12px; gap: 2px; background: var(--surface-3); }
.match-stats .statbar .bars .h { background: var(--home, var(--brand)); box-shadow: inset 0 0 0 1px rgba(23, 19, 15, .3); }
.match-stats .statbar .bars .a { background: var(--away, var(--blue)); box-shadow: inset 0 0 0 1px rgba(23, 19, 15, .3); }
.md-luck { margin: 1rem 0 0; padding-top: .75rem; border-top: 2px dashed var(--line); text-align: center; font-family: var(--condensed); font-weight: 700; font-size: 1.05rem; }

/* Ratings: a numbered list, the man of the match on top in gold. */
.md-ratings { list-style: none; margin: 0; padding: 0; }
.md-ratings li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .5rem .25rem; border-bottom: 1px solid var(--line); border-left: 5px solid var(--home, var(--brand)); padding-left: .5rem; }
.md-ratings li.away { border-left-color: var(--away, var(--blue)); }
.md-ratings li.mvp { background: #fff3d6; }
.md-rank { font-family: var(--display); font-size: 1.1rem; text-align: center; }
.md-ratings li.mvp .md-rank { color: var(--gold); }
.md-who { display: grid; min-width: 0; }
.md-who a { color: var(--ink); }
.md-who b { font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.md-who small { color: var(--muted); }
.md-who small a { color: var(--muted); }
.md-rating { font-family: var(--display); font-size: 1.3rem; }

/* Lineup bench: long names wrap on two lines instead of "Lugar en el b…". */
.bench-item .info b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }
.match-momentum[hidden] { display: none; }

/* ---------- Links and feeds ---------- */
/* Names are links everywhere, but quiet: ink text, a hover underline in the brand color. */
.lk-quiet { color: inherit; text-decoration: none; }
.lk-quiet:hover, .lk-quiet:focus-visible { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 2px; }
td a, .rank-name, .player-row .who a { color: inherit; }
td a:hover, a.rank-name:hover { color: inherit; text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.rank-name { white-space: normal; }
div.player-row:hover { background: transparent; }
/* A feed row that leads somewhere: the whole row is the link, with a chevron. */
.feed li.unread { font-weight: 600; }
.feed-link { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; margin: -.6rem -.5rem; padding: .6rem .5rem; min-height: 44px; }
.feed-link > span:first-child { flex: 1; min-width: 0; }
.feed-link:hover { background: #fff3d6; text-decoration: none; }
.feed-go { flex: none; font-family: var(--display); font-size: 1.2rem; color: var(--brand-2); }
a.news-item { color: inherit; text-decoration: none; grid-template-columns: auto minmax(0, 1fr) auto; }
a.news-item:hover { background: #fff8ea; box-shadow: 4px 4px 0 var(--brand); }
a.news-item .feed-go { align-self: center; }
/* A small "?" next to a label; the tap area stays 44 px. */
.help-q.lk-help { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: .35rem; border-width: 1.5px; border-radius: 50%; font-family: var(--condensed); font-size: .75rem; font-weight: 800; line-height: 1; vertical-align: middle; box-shadow: none; flex: none; }
.help-q.lk-help::before { content: ""; position: absolute; inset: -12px; }
.md-stats-head .with-crest:last-child { text-align: right; justify-content: flex-end; }
.match-stats .statbar .bars span[style*="width: 0%"] { box-shadow: none; }

/* ---------- Sideways scroll (docs/ux.md "Sideways scroll"; static/js/hscroll.js) ----------
   One component for every row or table wider than the screen: `class="hscroll"`. The row snaps to
   its items and the next item peeks under a fade; hscroll.js wraps it in `.hscroll-wrap`, sets
   `more-l` / `more-r` when there is more on that side (fade + round chevron button) and scrolls the
   current item into view. Tables keep their first column (`table.sticky-2`: the first two) fixed. */
.hscroll {
  --hs-fade: 3rem;
  position: relative; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > :not(table) { scroll-snap-align: start; }
.hscroll-wrap { position: relative; min-width: 0; } /* min-width: a grid or flex parent must not grow to the row's full width */
/* Rows that bleed to the screen edges on phones keep the bleed on the wrapper, so the buttons sit at the edge. */
.hscroll-wrap:has(> .subtabs), .hscroll-wrap:has(> .match-ticker) { margin-inline: -1rem; }
.hscroll-wrap > .subtabs, .hscroll-wrap > .match-ticker { margin-inline: 0; }
/* Snap points respect the row's own side padding (else the first item snaps under the left edge). */
.hscroll-wrap > .match-ticker { scroll-padding-inline: 1rem; }
/* The fade leaves the cut item faintly visible: it says "there is more this way". */
.hscroll-wrap.more-r > .hscroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--hs-fade)), rgba(0, 0, 0, .2)); mask-image: linear-gradient(90deg, #000 calc(100% - var(--hs-fade)), rgba(0, 0, 0, .2)); }
.hscroll-wrap.more-l > .hscroll { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), #000 var(--hs-fade)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), #000 var(--hs-fade)); }
.hscroll-wrap.more-l.more-r > .hscroll { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), #000 var(--hs-fade), #000 calc(100% - var(--hs-fade)), rgba(0, 0, 0, .2)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), #000 var(--hs-fade), #000 calc(100% - var(--hs-fade)), rgba(0, 0, 0, .2)); }
/* Tables fade on the right only: on the left the fixed column shows a shadow instead. */
.hscroll-wrap.more-l > .hscroll:has(> table) { -webkit-mask-image: none; mask-image: none; }
.hscroll-wrap.more-l.more-r > .hscroll:has(> table) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--hs-fade)), rgba(0, 0, 0, .2)); mask-image: linear-gradient(90deg, #000 calc(100% - var(--hs-fade)), rgba(0, 0, 0, .2)); }
/* The chevron: a 44 px tap area with a small ink disc; only on a side with more. */
.hscroll-btn, .hscroll-btn:hover, .hscroll-btn:active, .hscroll-btn:focus {
  position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; margin: -22px 0 0; padding: 0;
  background: none; border: 0; box-shadow: none; transform: none; opacity: 0; pointer-events: none; transition: opacity .15s; cursor: pointer;
}
.hscroll-btn.prev { left: 0; }
.hscroll-btn.next { right: 0; }
.hscroll-btn::before { content: ""; grid-area: 1 / 1; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); box-shadow: 2px 2px 0 var(--brand); }
.hscroll-btn::after { content: ""; grid-area: 1 / 1; width: 8px; height: 8px; margin-left: -4px; border: solid var(--surface); border-width: 0 3px 3px 0; transform: rotate(-45deg); }
.hscroll-btn.prev::after { margin: 0 -4px 0 0; transform: rotate(135deg); }
.hscroll-wrap.more-l > .hscroll-btn.prev, .hscroll-wrap.more-r > .hscroll-btn.next { opacity: 1; pointer-events: auto; }
.hscroll-wrap.tall > .hscroll-btn { top: .35rem; margin-top: 0; }
/* On load the right chevron nudges twice, until the first scroll. */
.hscroll-wrap.nudge.more-r > .hscroll-btn.next { animation: hs-nudge .9s ease-in-out .4s 2; }
@keyframes hs-nudge { 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .hscroll-wrap.nudge.more-r > .hscroll-btn.next { animation: none; } .hscroll { scroll-behavior: auto; } }
/* Wide tables: the first column (or the first two) stays while the numbers scroll. */
.hscroll > table :is(th, td):first-child,
.hscroll > table.sticky-2 :is(th, td):nth-child(2) { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.hscroll > table th:first-child, .hscroll > table.sticky-2 th:nth-child(2) { background: var(--ink); }
.hscroll > table tr.me td:first-child, .hscroll > table.sticky-2 tr.me td:nth-child(2) { background: #ffe9a8; }
.hscroll > table.sticky-2 :is(th, td):first-child { width: 2rem; min-width: 2rem; max-width: 2rem; padding-inline: .4rem 0; }
.hscroll > table.sticky-2 :is(th, td):nth-child(2) { left: 2rem; }
.hscroll > table:not(.sticky-2) :is(th, td):first-child::after,
.hscroll > table.sticky-2 :is(th, td):nth-child(2)::after { content: ""; position: absolute; top: 0; bottom: 0; right: -8px; width: 8px; background: linear-gradient(90deg, rgba(23, 19, 15, .22), transparent); opacity: 0; transition: opacity .15s; pointer-events: none; }
.hscroll-wrap.more-l > .hscroll > table :is(th, td)::after { opacity: 1; }
@media (max-width: 699px) {
  /* The name column gets room for two short lines; the numbers never wrap. */
  .hscroll > table:not(.sticky-2) td:first-child, .hscroll > table.sticky-2 td:nth-child(2) { min-width: 8.5rem; }
  .hscroll > table td.num, .hscroll > table th.num { white-space: nowrap; }
}

/* Match goals: the minute and the ball stay together when a long name wraps. */
.match-marks .mm { white-space: nowrap; }

/* ---------- Tap targets on phones (docs/ux.md "Thumb first": 44 px) ----------
   Small links keep their look; an invisible ::after grows the tap area instead. */
.spread > h2 + a, a.ux-more, a.chip, a.plaque-champ, a.record-link { position: relative; }
.spread > h2 + a::after, a.ux-more::after, a.chip::after, a.plaque-champ::after, a.record-link::after { content: ""; position: absolute; inset: -12px -4px; }
a.spread { min-height: 44px; align-items: center; }
.match-ticker-row { min-height: 44px; }
details > summary { min-height: 44px; box-sizing: border-box; padding-block: .6rem; }
#crest-form .color-row button.swatch { position: relative; }
#crest-form .color-row button.swatch::after { content: ""; position: absolute; inset: -6px; }
.topbar .club-chip { min-height: 44px; }
/* Match lines on phones: club names a little smaller and cut only when one word is wider than the column. */
@media (max-width: 420px) { .ml-name { font-size: .92rem; overflow-wrap: break-word; } .match-line .mid { min-width: 2.75rem; } }
html { scroll-padding-top: 5rem; } /* anchors (/club#events) land below the sticky topbar */

/* [D] Crest editor: an uploaded image as the emblem. */
.crest-upload { display: grid; gap: .6rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line, #d8d2c4); }
.crest-upload h3 { margin: 0; font-size: 1rem; }
.crest-upload-row { display: flex; gap: .9rem; align-items: flex-start; }
.crest-upload-img { flex: none; width: 72px; height: 72px; object-fit: contain; padding: 4px; border: 1px solid var(--line, #d8d2c4); border-radius: var(--radius); background: repeating-conic-gradient(#ece7dc 0 25%, #fffdf8 0 50%) 0 0 / 12px 12px; }
.crest-upload-pick { display: grid; gap: .35rem; min-width: 0; justify-items: start; }
.crest-upload-pick label.button { position: relative; cursor: pointer; }
.crest-upload-pick input[type=file] { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; }
.crest-upload-pick label.button:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.crest-upload-rule { font-size: .8rem; color: #8a3b12; }
.crest-upload-sending { display: none; }
.crest-upload.sending .crest-upload-sending { display: block; }
.crest-upload.sending .crest-upload-img { opacity: .55; }
.crest-upload .flash { margin: 0; }
.crest-upload-options { display: grid; gap: .5rem; }
.crest-upload-options[hidden] { display: none; }
.crest-upload-options fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.crest-upload-options .check { display: flex; align-items: center; gap: .4rem; margin: 0; }
.crest-upload-options .check input { width: auto; min-height: 0; }
.crest-upload-options input[type=range] { width: 100%; max-width: 20rem; accent-color: var(--brand, #f97316); }
.crest-upload-scales { display: flex; justify-content: space-between; max-width: 20rem; font-size: .8rem; color: var(--muted, #6b6457); }
.admin-crest-image { width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius); background: repeating-conic-gradient(#ece7dc 0 25%, #fffdf8 0 50%) 0 0 / 12px 12px; }
.crest-upload [hidden] { display: none !important; }

/* [D] The DT (the club's manager) with his club: club pages, matches, tables. */
.dt-name { font-size: .85rem; font-weight: 500; color: var(--muted); }
.dt-name b { color: var(--text); font-weight: 700; }
.dt-name a { color: inherit; text-decoration: none; }
.dt-name a:hover b, .dt-name a:focus-visible b { text-decoration: underline; }
.scorecard .team .dt-name { font-size: .78rem; }
.dash-dt { margin: 0; font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.dash-dt > a { font-weight: 700; color: var(--text); text-decoration: none; }
/* In the table only on wide screens; on phones the club link has it as a tooltip. */
.tbl-dt { display: none; }
@media (min-width: 640px) { .tbl-dt { display: block; margin-left: 24px; font-size: .78rem; line-height: 1.2; } }

/* ---------- Native apps (body.native, docs/native-apps.md) ---------- */
/* The app draws the top bar, the tab bar and the screen title: no space for the web tab bar,
   the device edges (safe areas) on the sides and at the bottom, and no hover on touch. */
.native {
  --tabbar: 0px;
  -webkit-tap-highlight-color: transparent;
}
/* iOS: the web view runs under the title bar and the tab bar; with viewport-fit=cover the
   insets are those bars. Android lays the web view out between its bars: no insets there. */
.native-ios {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}
/* The app's title bar already shows the page name: the page heading stays for screen readers
   only. A heading with the club crest stays visible. */
.native .page-head h1:not(.with-crest) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.native a:hover { text-decoration: none; }
.native .subtabs a:not(.active):hover, .native .match-tabs > label:hover { background: var(--surface-2); }

/* ---------- Landing and sign-in pages (home/index.html, session/*.html) ---------- */
/* The landing is a magazine cover: a big headline, a match on the radio over a taped
   scoreboard, the real figures of the game, three steps, clippings and a page of stickers.
   The sign-in pages are a paper form next to an ink "dressing room" panel. */
:root { --board: #1f3d30; --chalk: rgba(244, 241, 232, .62); --chalk-hi: #f4f1e8; --sticker: #fffdf8; --on-ink: #f1e2c2; --on-ink-dim: rgba(241, 226, 194, .7); }
.lp-kicker { display: inline-block; margin: 0 0 .7rem; padding: .15rem .6rem; background: var(--tape); color: var(--ink); transform: rotate(-2deg); font-family: var(--condensed); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }

/* The cover. */
.lp-hero { display: grid; gap: 1.75rem; align-items: center; padding: .75rem 0 1.5rem; }
@media (min-width: 900px) { .lp-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; padding: 2.5rem 0 2.25rem; } }
.lp-title { margin: 0 0 1rem; font-size: clamp(2.9rem, 13.5vw, 5.4rem); line-height: 1.02; letter-spacing: 0; }
/* Capital accents (DIRIGÍ, GANÁ) need room above the line: never let them touch the line before. */
.lp-title b { display: block; margin-top: .12em; font-weight: 400; color: var(--brand); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.lp-intro { max-width: 34rem; margin: 0 0 1.4rem; font-size: 1.12rem; line-height: 1.5; }
.lp-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.lp-cta .button { min-height: 52px; padding: 0 1.4rem; font-size: 1.02rem; }
.button.lp-go { min-height: 56px; padding: 0 1.8rem; font-size: 1.2rem; box-shadow: 5px 5px 0 var(--ink); }
@media (max-width: 520px) { .lp-cta .button { flex: 1 1 100%; } }
.lp-free { display: flex; gap: .45rem; align-items: baseline; margin: 1rem 0 0; color: var(--muted); font-family: var(--condensed); font-weight: 700; font-size: 1.02rem; }
.lp-tick { color: var(--good); font-weight: 800; }

/* The sample match: a taped scoreboard and the AM radio under it. */
.lp-show { position: relative; display: grid; width: 100%; max-width: 520px; justify-self: center; padding: 0 .35rem; }
.lp-board { position: relative; z-index: 1; padding: 1rem 1rem 1.15rem; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--brand); transform: rotate(-1.2deg); }
.lp-board::before { content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 22px; margin-left: -46px; background: var(--tape); transform: rotate(-3deg); }
.lp-board-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .7rem; color: var(--muted); font-family: var(--condensed); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.lp-board .score { font-size: clamp(3rem, 14vw, 4.4rem); line-height: .9; }
.lp-board .team-name { font-size: 1rem; line-height: 1.05; }
.lp-dash { margin: 0 .15em; color: var(--muted); }
.lp-radio { margin: -.6rem .5rem 0; padding-top: 1.35rem; transform: rotate(.9deg); }
.lp-older { list-style: none; margin: -.2rem 0 0; padding: 0; display: grid; gap: .25rem; color: var(--radio-text); opacity: .72; font-size: .92rem; line-height: 1.3; }
.lp-older b { margin-right: .3rem; color: var(--radio-gold); font-family: var(--display); font-weight: 400; }

/* The figures of the game: a strip of big numbers. */
.lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: .25rem 0 2.5rem; overflow: hidden; background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow); }
.lp-stat { display: grid; align-content: center; gap: .1rem; padding: .85rem 1rem; border: 0 solid var(--ink); border-width: 0 2px 2px 0; margin: 0 -2px -2px 0; color: var(--ink); text-decoration: none; }
.lp-stat b { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1; color: var(--brand-2); }
.lp-stat span { font-family: var(--condensed); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
a.lp-stat:hover { background: var(--surface-2); text-decoration: none; }
.lp-stat-live { justify-items: start; gap: .4rem; }
.lp-stat-live span:last-child { color: var(--ink); font-size: 1rem; }
.lp-stat-next b { font-size: clamp(1.4rem, 5vw, 1.7rem); color: var(--ink); }

/* Sections: a kicker, a headline over an ink rule, a line of text. */
.lp-section { margin: 0 0 2.75rem; }
.lp-head { margin-bottom: 1.25rem; }
.lp-head h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; font-size: clamp(1.8rem, 7vw, 2.5rem); line-height: 1; }
@media (min-width: 760px) { .lp-head h2::after { content: ""; flex: 1; min-width: 2rem; height: 4px; background: var(--ink); } }
.lp-head p { margin: 0; max-width: 40rem; font-size: 1.05rem; }
.lp-head-row h2 .live-pill { font-size: .8rem; }

/* Three steps: numbered clippings. */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 1.1rem; }
@media (min-width: 760px) { .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-step { position: relative; display: grid; align-content: start; padding: 1.1rem 1rem 1rem; background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow); }
.lp-step:nth-child(2) { transform: rotate(.5deg); } .lp-step:nth-child(3) { transform: rotate(-.4deg); }
.lp-step-n { position: absolute; top: -.9rem; left: -.5rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-family: var(--display); font-size: 1.4rem; box-shadow: 2px 2px 0 var(--ink); }
.lp-step-art { display: flex; align-items: center; justify-content: center; gap: .6rem; height: 96px; margin-bottom: .75rem; background: var(--surface-2); border: 1px dashed var(--line); }
.lp-step h3 { margin: 0 0 .35rem; font-size: 1.35rem; line-height: 1.05; }
.lp-step p { margin: 0 0 .6rem; }
.lp-time { margin-top: auto; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-2); }
.lp-chalk { display: block; width: 120px; height: 80px; }
.lp-chalk .frame { fill: var(--wood); stroke: var(--ink); stroke-width: 2; }
.lp-chalk .board { fill: var(--board); }
.lp-chalk .lines { fill: none; stroke: var(--chalk); stroke-width: 1.2; }
.lp-chalk .dots circle { fill: var(--gold-mid); stroke: var(--ink); stroke-width: 1; }
.lp-chalk .arrow { fill: none; stroke: var(--chalk-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 2; }
.lp-result { flex-direction: column; gap: .3rem; }
.lp-result-score { font-family: var(--display); font-size: 2.6rem; line-height: 1; }
.lp-result-tags { display: flex; gap: .35rem; }

/* Features: clippings with an ink icon. */
.lp-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.lp-clip { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; align-content: start; padding: 1rem; background: var(--surface); border: 1px solid var(--line); box-shadow: 2px 3px 0 rgba(0, 0, 0, .1); }
.lp-clip::before { content: ""; position: absolute; top: -8px; left: 22px; width: 60px; height: 16px; background: var(--tape); transform: rotate(-4deg); }
.lp-clip:nth-child(even)::before { left: auto; right: 22px; transform: rotate(3deg); }
.lp-ico { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: var(--radius-s); background: var(--brand); box-shadow: 2px 2px 0 var(--ink); }
.lp-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-clip h3 { margin: 0 0 .25rem; font-size: 1.2rem; line-height: 1.05; }
.lp-clip p { margin: 0; color: var(--muted); }
@media (min-width: 900px) { .lp-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .lp-clip { padding: .85rem; column-gap: .75rem; } .lp-clip p { font-size: .95rem; line-height: 1.4; } .lp-ico { width: 42px; height: 42px; } .lp-step-art { height: 84px; } }

/* Stickers: one album page of club kits. */
.lp-stickers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .lp-stickers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.lp-sticker { position: relative; display: grid; justify-items: center; gap: .5rem; padding: 1.4rem .6rem .7rem; overflow: hidden; background: radial-gradient(ellipse 70% 55% at 50% 42%, var(--sticker), var(--surface-2) 75%); border: 2px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow); }
.lp-sticker:nth-child(odd) { transform: rotate(-1deg); } .lp-sticker:nth-child(even) { transform: rotate(1deg); }
.lp-sticker::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: linear-gradient(90deg, var(--c) 0 50%, var(--c2) 50%); border-bottom: 2px solid var(--ink); }
.lp-sticker::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .45) 45%, transparent 55%); }
.lp-sticker-n { position: absolute; top: 16px; left: 8px; display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--surface); font-family: var(--display); font-size: .85rem; }
.lp-sticker .kit { filter: drop-shadow(0 8px 8px rgba(40, 25, 5, .3)); }
.lp-sticker-name { display: flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; min-width: 0; padding: .35rem .4rem; background: var(--ink); color: var(--surface); font-family: var(--condensed); font-weight: 800; font-size: .88rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; text-align: left; }
.lp-sticker-name > span { overflow-wrap: anywhere; }

/* The press and the history clipping. */
.lp-pair { display: grid; gap: 1.5rem; margin: 0 0 2.75rem; }
@media (min-width: 900px) { .lp-pair { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } .lp-pair.lp-pair-one { grid-template-columns: minmax(0, 520px); justify-content: center; } }
.lp-press { padding: 1rem 1.1rem .6rem; background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow); }
.lp-press h2 { margin: 0 0 .1rem; padding-bottom: .3rem; font-size: 2rem; line-height: 1; border-bottom: 4px double var(--ink); }
.lp-press > p { margin: .4rem 0; font-family: var(--condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.lp-press .feed-link { margin: -.6rem 0; }
.lp-history { position: relative; padding: 1.4rem 1.2rem 1.1rem; background: var(--surface-3); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--brand); transform: rotate(-.8deg); }
.lp-history::before { content: ""; position: absolute; top: -10px; left: 50%; width: 80px; height: 20px; margin-left: -40px; background: var(--tape); transform: rotate(2deg); }
.lp-history-years { margin: 0; font-family: var(--display); font-size: 1.1rem; color: var(--brand-2); letter-spacing: .04em; }
.lp-history h2 { margin: .1rem 0 .5rem; font-size: 1.8rem; line-height: 1; }
.lp-history p:last-child { margin: 0; }

/* The last call: an ink band. */
.lp-final { display: grid; justify-items: center; gap: .4rem; margin: 0 -1rem; padding: 2.5rem 1.25rem 2.75rem; text-align: center; background: var(--ink); color: var(--on-ink); border-top: 6px solid var(--brand); }
.lp-final h2 { margin: 0; font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: .95; color: var(--brand); }
.lp-final p { max-width: 34rem; margin: 0 0 1rem; font-size: 1.08rem; }
.lp-final-next { display: block; margin-top: .4rem; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--on-ink-dim); }
.lp-final-next b { color: var(--on-ink); font-family: var(--display); font-weight: 400; font-size: 1.3rem; letter-spacing: .02em; }
.lp-final .button.lp-go { border-color: var(--surface); box-shadow: 5px 5px 0 var(--brand-2); }
@media (min-width: 900px) { .lp-final { margin: 0 0 1rem; border-radius: var(--radius); } }

/* Sign-in pages: the form card and the panel side by side on wide screens, the form first on phones. */
.au { display: grid; gap: 1.5rem; max-width: 980px; margin: 1rem auto 2rem; }
@media (min-width: 860px) { .au { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 2rem; margin-top: 2.25rem; } }
.au.au-one { max-width: 460px; grid-template-columns: minmax(0, 1fr); }
.au-card { padding: 1.4rem 1.25rem 1.25rem; }
.au-card h1 { margin: 0 0 .35rem; font-size: clamp(2.2rem, 9vw, 2.8rem); }
.au-card > .muted { margin-bottom: 1.2rem; }
.au-card .steps { margin-bottom: 1rem; }
.au-card input { min-height: 48px; font-size: 1rem; }
.au-card .field small { display: block; margin-top: .3rem; }
.au-submit { min-height: 52px; margin-top: .3rem; font-size: 1.1rem; }
.au-forgot { margin: .9rem 0 0; text-align: center; }
.au-forgot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.au-alt { display: grid; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 2px dashed var(--line); text-align: center; color: var(--muted); font-family: var(--condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.au-panel { position: relative; display: grid; align-content: start; gap: .9rem; padding: 1.4rem 1.25rem 1.3rem; overflow: hidden; background-color: var(--ink); background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px); background-size: 6px 6px; color: var(--on-ink); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--brand); }
.au-panel h2 { margin: 0; font-size: clamp(1.9rem, 7vw, 2.4rem); line-height: .95; color: var(--brand); }
.au-kits { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .9rem 0 .7rem; border-radius: var(--radius-s); background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(241, 226, 194, .2), transparent 70%); }
.au-kits .kit:first-child { transform: rotate(-6deg); } .au-kits .kit:last-child { transform: rotate(6deg); }
.au-vs { font-family: var(--display); font-size: 1.5rem; color: var(--brand); }
.au-now { list-style: none; margin: 0; padding: .7rem .8rem; display: grid; gap: .45rem; background: rgba(241, 226, 194, .08); border: 1px solid rgba(241, 226, 194, .25); border-radius: var(--radius-s); font-family: var(--condensed); font-weight: 700; font-size: 1.02rem; }
.au-now li { display: flex; align-items: center; gap: .5rem; }
.au-now b { color: var(--surface); }
.au-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(224, 115, 31, .3); }
.au-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.au-items li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .5rem; align-items: start; line-height: 1.35; }
.au-tick { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: .9rem; }
.au-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; padding-top: .8rem; border-top: 1px dashed rgba(241, 226, 194, .3); }
.au-figures div { display: grid; }
.au-figures b { font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--surface); }
.au-figures span { color: var(--on-ink-dim); font-family: var(--condensed); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
/* In the native apps the sign-in pages open as a modal: the form, then a short panel without kits. */
.native .au { margin-top: .5rem; }
.native .au-kits { display: none; }
/* The app's title bar shows the page name: the form heading stays for screen readers only. */
.native .au-card h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Legal pages (/privacy, /terms): long text that reads well ---------- */
.legal { max-width: 46rem; margin: 0 auto; display: grid; gap: 1.1rem; }
.legal .page-head { margin-bottom: 0; }
.legal-summary ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; line-height: 1.45; }
.legal-summary li::marker { color: var(--brand-2); }
.legal-toc { padding: 0 .2rem; }
.legal-toc h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--muted); }
.legal-toc ol { margin: 0; padding-left: 1.4rem; columns: 2 14rem; column-gap: 1.5rem; font-family: var(--condensed); font-weight: 700; font-size: 1.02rem; }
.legal-toc li { break-inside: avoid; padding: .15rem 0; }
.legal-body { padding: 1.1rem 1.1rem .4rem; }
.legal-body section { scroll-margin-top: 1rem; padding-bottom: .6rem; }
.legal-body section + section { border-top: 1px dashed var(--line); padding-top: .9rem; }
.legal-body h2 { margin: 0 0 .55rem; font-size: 1.3rem; display: flex; align-items: baseline; gap: .5rem; }
.legal-n { display: inline-grid; place-items: center; flex: none; min-width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--brand); color: var(--brand-ink); border: 2px solid var(--ink); font-size: .95rem; }
.legal-body p, .legal-body li { line-height: 1.6; max-width: 68ch; }
.legal-body p { margin: 0 0 .75rem; }
.legal-body ul { margin: 0 0 .75rem; padding-left: 1.2rem; display: grid; gap: .4rem; }
.legal-body li::marker { color: var(--brand-2); }
.legal-cookies { margin: .2rem 0 .9rem; font-size: .92rem; }
.legal-cookies th, .legal-cookies td { text-align: left; vertical-align: top; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.legal-cookies th { font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.legal-cookies code { font-size: .88rem; background: var(--surface-2); padding: .05rem .3rem; border-radius: var(--radius-s); }
/* On a phone each cookie is a small block: the name, then the purpose and the duration with labels. */
@media (max-width: 560px) {
  .legal-cookies thead { display: none; }
  .legal-cookies tr { display: grid; gap: .25rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
  .legal-cookies td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; padding: 0; border: 0; }
  .legal-cookies td > code { justify-self: start; }
  .legal-cookies td::before { content: attr(data-label); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-size: .8rem; }
}
.legal-contact p { margin: 0 0 .5rem; line-height: 1.5; }
.legal-mail a { font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.legal-other { margin: 0; text-align: center; font-family: var(--condensed); font-weight: 700; font-size: 1.05rem; }
.legal-other a, .help-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.help-legal { margin: 1.25rem 0 0; text-align: center; font-family: var(--condensed); font-weight: 700; }
/* Sign-up: the line that links the terms and the privacy policy, under the button. */
.au-legal { margin: .8rem 0 0; text-align: center; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.au-legal a { font-weight: 600; }
/* Feedback: the discreet link at the end of every logged-in page, the form and the admin list. */
.feedback-entry { margin: 1.5rem 0 .25rem; text-align: center; }
.feedback-entry a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: var(--muted); font-family: var(--condensed); font-weight: 700; letter-spacing: .03em; }
.feedback-card { max-width: 640px; }
.feedback-card .button { text-align: center; }
.feedback-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.feedback-item.resolved { opacity: .7; }
.feedback-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .9rem; }
.feedback-page { margin: .5rem 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.feedback-body { margin: .6rem 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.45; }
.feedback-actions { flex-wrap: wrap; gap: .5rem; }

/* [D] Friendly challenges (/friendlies, the club page): one card per challenge, the kick-off in local time. */
.ch-intro { margin: -.25rem 0 1rem; }
.ch-board { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ch-board { grid-template-columns: 1fr 1fr; align-items: start; } }
.ch-card { display: grid; gap: .45rem; padding: .8rem; border-radius: var(--radius-s); background: var(--surface-2); border: 1px solid var(--line); }
.ch-card + .ch-card { margin-top: .6rem; }
.ch-head { display: flex; align-items: center; gap: .6rem; }
.ch-who { display: grid; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ch-when, .ch-match { margin: 0; }
.ch-when time { font-family: var(--condensed); font-weight: 800; font-size: 1.1rem; }
.ch-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ch-counter > summary { padding: .25rem 0; min-height: 44px; display: flex; align-items: center; }
.ch-counter form, .ch-form { margin-top: .4rem; }
.ch-field { display: grid; gap: .3rem; margin: 0; }
.ch-field input { width: 100%; max-width: 22rem; min-height: 44px; }
.ch-propose { margin-top: 1rem; }

/* [D] La prensa by matchday edition, and the comment thread at the end of each edition
   (components/comments.html). */
.press-editions { display: grid; gap: 1.5rem; }
.press-edition { display: grid; gap: .6rem; min-width: 0; }
.press-edition-title { margin: 0; font-family: var(--condensed); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: .2rem; }
.press-edition-title a { color: inherit; text-decoration: none; }
.press-edition-title a:hover { color: var(--brand-2); }
.comments { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.comments-toggle { display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .8rem; cursor: pointer; font-family: var(--condensed); font-weight: 700; font-size: 1rem; }
.comments[open] > .comments-toggle { border-bottom: 1px dashed var(--line); }
.comments-body { padding: .6rem .8rem .8rem; }
.comments-more, .comments-empty, .comments-note { margin: 0; }
.comments-more a, .comments-note a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.comments-thread { display: grid; gap: .75rem; }
.comments-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.comment { background: var(--surface-2); border-radius: 12px 12px 12px 4px; padding: .55rem .75rem; min-width: 0; }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; font-size: .9rem; }
.comment-author { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.comment-author:hover b { text-decoration: underline; }
.comment-body { margin: .3rem 0 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.45; }
.comment-delete { margin-left: auto; }
.link-button { background: none; border: 0; box-shadow: none; padding: 0 .25rem; min-height: 32px; color: var(--muted); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--bad); background: none; }
.comments-error { margin: 0; padding: .5rem .75rem; border-radius: var(--radius-s); background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.comment-form { display: grid; gap: .5rem; }
.comment-form textarea { width: 100%; min-height: 4.5rem; resize: vertical; }
.comment-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
/* [D] The press conference card (components/interview.html): a reporter's notepad. */
.press-q { position: relative; border-left: 6px solid var(--brand); }
.press-q-kicker { margin: 0; font: 800 .75rem/1.2 var(--condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.press-q-text { margin: .3rem 0 .6rem; font: 400 1.25rem/1.25 var(--display); }
.press-q-form textarea { width: 100%; min-height: 3.2rem; }
.press-q-help { margin: .25rem 0 .5rem; font-size: .85rem; }
.press-q-close { margin-left: auto; min-width: 44px; min-height: 44px; background: transparent; border: 0; box-shadow: none; color: var(--muted); font-size: 1.1rem; }
/* [D] The assistant's report (components/assistant.html): notes on a clipboard. */
.assistant-report h2 { margin-bottom: .4rem; }
.assistant-notes { list-style: none; margin: 0; padding: 0; }
.assistant-notes li { border-bottom: 1px dashed var(--line); }
.assistant-notes li > a, .assistant-notes li { display: block; padding: .5rem 0; color: var(--text); }
.assistant-notes li > a { display: flex; gap: .5rem; justify-content: space-between; text-decoration: none; min-height: 44px; align-items: center; padding: 0; }
.assistant-notes .go { color: var(--muted); }
.assistant-private { margin: .4rem 0 0; font-size: .8rem; }
.md-diario, .md-viewer { margin: .75rem 0 0; text-align: center; }
/* [D] Story images: the share button of a finished match and its hint (static/js/story.js). */
.md-story { margin: .75rem 0 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.md-story small { max-width: 32ch; font-size: .8rem; }
.md-story small[hidden] { display: none; }
.md-story:target .button { outline: 3px solid var(--brand); outline-offset: 3px; }
/* [D] The paper on the championship page. */
.diario-promo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-decoration: none; color: var(--text); background: #efe4c6; margin-bottom: .25rem; }
.diario-promo-name { font: 400 1.6rem/1 var(--display); letter-spacing: .02em; }
.diario-archive-link { margin: 0 0 1rem; text-align: right; font-size: .85rem; }

/* [D] Situations (components/situation.html): one tap per choice, mobile first. */
.sit { position: relative; border-left: 6px solid var(--brand); }
.sit-scandal { border-left-color: #e0457b; }
.sit-kicker { margin: 0; font: 800 .75rem/1.2 var(--condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sit-title { margin: .25rem 0 .4rem; font: 400 1.25rem/1.25 var(--display); }
.sit-title a { color: inherit; text-decoration: none; }
.sit-text { margin: 0 0 .75rem; }
.sit-choices { display: grid; gap: .5rem; }
.sit-choices form { margin: 0; }
.sit-choices button { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-height: 48px; text-align: left; }
.sit-label { font-weight: 700; }
.sit-effects { font-weight: 400; opacity: .85; }
.sit-due, .sit-done, .sit-player { margin: .6rem 0 0; font-size: .85rem; }
.sit-section { margin: .5rem 0 0; font-size: 1rem; }

/* [D] The derby of each tournament on paper: dark ink on a warm band, readable at a glance. */
.badge.derby { background: #fde2c8; color: #9a3412; }
.derby-banner { background: #fde2c8; color: #7c2d12; border: 2px solid #c2410c; border-radius: 4px; font-weight: 500; }
.derby-banner b, .derby-banner strong { color: #9a3412; }

/* ---------- Motion (docs/ux.md "Motion") ----------
   Motion explains: where the manager is, what changed, what to do next. Never decoration.
   Every duration comes from these tokens; reduced motion sets them to zero (instant), so a
   rule needs its own reduced-motion copy only for an endless loop. static/js/motion.js adds
   the one-time classes. */
:root {
  --mo-fast: 140ms;   /* press, release, page out */
  --mo-base: 200ms;   /* enter, page in, tab panel */
  --mo-slow: 250ms;   /* the nav ink slide, a score bump */
  --mo-party: 400ms;  /* rare: a stamp, a ping, a count, the "do this" ring */
  --mo-stagger: 40ms; /* between cards that enter together */
  --mo-out: cubic-bezier(.2, .8, .2, 1);     /* things that arrive: fast start, soft stop */
  --mo-in: cubic-bezier(.4, 0, 1, 1);        /* things that leave */
  --mo-spring: cubic-bezier(.3, 1.6, .5, 1); /* a small overshoot: a stamp, a bump */
}
@media (prefers-reduced-motion: reduce) {
  :root { --mo-fast: 0s; --mo-base: 0s; --mo-slow: 0s; --mo-party: 0s; --mo-stagger: 0s; }
}

/* Page to page: the new page fades in over the old one; the top bar and the tab bar stay
   still, and the orange ink of the current tab slides to the new tab (cross-document view
   transitions; other browsers change the page at once). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.topbar { view-transition-name: mo-topbar; }
.tabbar { view-transition-name: mo-tabbar; }
.tabbar .nav-ink { view-transition-name: mo-nav-ink; }
.subtabs .nav-ink { view-transition-name: mo-subtab-ink; }
/* Taps go through to the new page during the transition (motion.js also ends it on a tap). */
::view-transition { pointer-events: none; }
::view-transition-old(root) { animation: var(--mo-fast) var(--mo-in) both mo-fade-out; }
::view-transition-new(root) { animation: var(--mo-base) var(--mo-out) both mo-page-in; }
::view-transition-group(mo-nav-ink), ::view-transition-group(mo-subtab-ink) { animation-duration: var(--mo-slow); animation-timing-function: var(--mo-out); }
@keyframes mo-fade-out { to { opacity: 0; } }
@keyframes mo-page-in { from { opacity: 0; transform: translateY(6px); } }
.nav-ink { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); pointer-events: none; }
.tabbar a.active { box-shadow: none; }
.subtabs a { position: relative; }
.subtabs .nav-ink { height: 4px; }
.subtabs a.active { box-shadow: none; }

/* In-page tabs (match, championship): the panel that opens fades in, so the eye goes to it. */
.match-tabs > section { animation: mo-soft-in var(--mo-base) var(--mo-out); }
@keyframes mo-soft-in { from { opacity: 0; transform: translateY(4px); } }

/* Press and release: the button sinks at once and comes back softly. */
button, .button, .btn, .todo li a, .feed-link, .tabbar a, .subtabs a {
  transition: transform var(--mo-fast) var(--mo-out), box-shadow var(--mo-fast) var(--mo-out), background-color var(--mo-fast), color var(--mo-fast);
}
button:active, .button:active, .btn:active, .todo li a:active { transition-duration: 0s; }
.todo li a:active { transform: translate(1px, 2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .1); }
.tabbar a:active, .subtabs a:active, .feed-link:active { transform: scale(.97); transition-duration: 0s; }

/* A form on its way: the button that sent it shows a spinner (after a short wait, so fast
   answers never flash it) and takes no second tap. */
.is-busy { pointer-events: none; }
.is-busy::after {
  content: ""; display: inline-block; flex: none; width: .85em; height: .85em; margin-left: .5em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mo-spin .7s linear infinite;
}
@keyframes mo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-busy::after { animation: none; border-right-color: currentColor; opacity: .6; } }

/* A slow page: an ink bar runs on top of the orange top bar until the next page shows. */
html.mo-loading::before {
  content: ""; position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ink) 30%, var(--ink) 70%, transparent) no-repeat;
  background-size: 40% 100%; animation: mo-load 1.1s var(--mo-out) infinite;
}
@keyframes mo-load { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { html.mo-loading::before { animation: none; background: var(--ink); opacity: .5; } }

/* Toast: it never takes a tap from the page under it; reduced motion only fades it. */
.flash { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .flash { animation-name: toast-still; } }
@keyframes toast-still { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* Something new (a notice, a situation, an offer, a comment): it enters once, the first time
   the manager sees it. Cards that enter together follow each other (--mo-i). */
.mo-enter { animation: mo-enter var(--mo-base) var(--mo-out) both; animation-delay: calc(var(--mo-i, 0) * var(--mo-stagger)); }
@keyframes mo-enter { from { opacity: 0; transform: translateY(10px); } }

/* What to do next (an open situation, the first item to do, an offer to answer): one orange
   ring closes on it, once, right after it enters. */
.mo-cue { outline: 3px solid transparent; animation: mo-cue var(--mo-party) var(--mo-out) calc(var(--mo-base) + 120ms) both; }
@keyframes mo-cue {
  0% { outline-color: transparent; outline-offset: 12px; }
  50% { outline-color: var(--brand); outline-offset: 3px; }
  100% { outline-color: transparent; outline-offset: 3px; }
}
.mo-enter.mo-cue { animation: mo-enter var(--mo-base) var(--mo-out) both, mo-cue var(--mo-party) var(--mo-out) calc(var(--mo-base) + 120ms) both; }

/* A number that changed since the last visit (money, morale, a skill, the table position):
   a plain number counts to its new value, the color says up or down, and ▲/▼ fades out
   after it. The color fades for 1.2 s; nothing moves. */
.mo-up, .mo-down { animation: mo-flash 1.2s ease-out; border-radius: 3px; }
.mo-up { --mo-flash: rgba(31, 122, 58, .28); }
.mo-down { --mo-flash: rgba(140, 29, 43, .24); }
@keyframes mo-flash { from { background-color: var(--mo-flash); box-shadow: 0 0 0 3px var(--mo-flash); } }
[data-mo-delta]::after { content: attr(data-mo-delta); margin-left: .2em; font-size: .7em; vertical-align: .15em; animation: mo-delta 1.8s ease-in both; }
.mo-up[data-mo-delta]::after { color: var(--good); }
.mo-down[data-mo-delta]::after { color: var(--bad); }
.topbar [data-mo-delta]::after { color: var(--ink) !important; }
@keyframes mo-delta { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* A new unread notice: its dot pulses once. */
.mo-ping { animation: mo-ping var(--mo-party) var(--mo-spring); }
@keyframes mo-ping { 45% { transform: scale(1.6); } }

/* A score that moves (the live match): the number jumps once after it rolls. */
.mo-bump { display: inline-block; animation: mo-bump var(--mo-slow) var(--mo-spring); }
@keyframes mo-bump { 45% { transform: scale(1.35); } }

/* Rare celebrations (a title, a promotion, a breakthrough, a derby won): a rubber stamp on
   the notice, pressed once in the paper style. No confetti. */
.mo-stamp {
  flex: none; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-left: .4rem;
  border: 2px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px currentColor;
  color: var(--blue); font: 700 1.3rem/1 var(--font); transform: rotate(-12deg); opacity: .9;
}
.mo-stamp.championship-won { color: var(--gold); }
.mo-stamp.promoted { color: var(--good); }
.mo-stamp.derby-won { color: var(--bad); }
.mo-stamp.idol-reached { color: var(--gold); }
.mo-stamp.is-new { animation: mo-stamp var(--mo-party) var(--mo-spring) both; }
@keyframes mo-stamp { from { opacity: 0; transform: rotate(-12deg) scale(2.2); } 60% { opacity: .9; } }
/* The final whistle on the scoreboard: "Final" is stamped once. */
.match-state.mo-stamped { display: inline-block; animation: mo-final var(--mo-party) var(--mo-spring) both; }
@keyframes mo-final { from { opacity: 0; transform: scale(1.8); } }

/* Slow images (the paper's photos): a paper skeleton while they load, then a soft fade in. */
img.mo-img-wait { background: linear-gradient(100deg, var(--surface-3) 30%, var(--surface-2) 50%, var(--surface-3) 70%) 0 0 / 300% 100%; animation: mo-shimmer 1.3s linear infinite; }
img.mo-img-in { animation: mo-img-in var(--mo-slow) var(--mo-out); }
@keyframes mo-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes mo-img-in { from { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { img.mo-img-wait { animation: none; } }

/* ---------- Game moments (docs/ux.md "Motion" → "Game moments") ----------
   motion.js adds mo-<as> once per moment (data-reveal); a tap ends it at once. Reduced motion
   plays none of them (motion.js) and the tokens are zero: the end state shows at once. */

/* A countdown in clock form: the digit that changes flips down. */
.mo-digit { display: inline-block; min-width: .55em; text-align: center; font-variant-numeric: tabular-nums; }
.mo-digit.mo-sep { min-width: 0; }
.mo-digit-flip { animation: mo-digit var(--mo-base) var(--mo-out); transform-origin: 50% 0; }
@keyframes mo-digit { from { transform: perspective(200px) rotateX(80deg); opacity: .3; } }

/* A new notice: the bell rings once. */
.mo-shake { animation: mo-shake var(--mo-party) ease-in-out; transform-origin: 50% 2px; }
@keyframes mo-shake { 20% { transform: rotate(16deg); } 40% { transform: rotate(-13deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }

/* A skill that grew: its bar fills from the old value and "+N" pops over the number. */
.mo-fill > i { animation: mo-fill var(--mo-party) var(--mo-out) 120ms both; }
@keyframes mo-fill { from { width: calc(var(--v-from) * 1%); } }
.mo-up[data-tick-diff][data-mo-delta]::after { display: inline-block; font-weight: 800; animation: mo-pop 1.2s var(--mo-out) both; }
@keyframes mo-pop { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 20% { opacity: 1; transform: translateY(-5px) scale(1.25); } 32% { transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* Ink stamps with a word (the latest result, a signed transfer), pressed once (data-stamp). */
.mo-ink {
  display: inline-block; padding: .1rem .45rem; border: 2px solid currentColor; border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--surface), inset 0 0 0 2px currentColor; color: var(--ink);
  font: 400 .85rem/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-7deg); opacity: .88;
}
.mo-ink.w { color: var(--good); } .mo-ink.l { color: var(--bad); } .mo-ink.d { color: #6b6157; }
.mo-ink.is-new { animation: mo-ink var(--mo-party) var(--mo-spring) both; }
@keyframes mo-ink { from { opacity: 0; transform: rotate(-7deg) scale(2.2); } 60% { opacity: .88; } }

/* Academy: a new prospect is a pack opened: the card turns from its back, then the potential
   stars light one by one. */
.mo-flip .ac-card { position: relative; display: block; align-self: start; animation: mo-card var(--mo-party) var(--mo-out) calc(var(--mo-i) * 80ms) both; }
.mo-flip .ac-card::after {
  content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 6px; pointer-events: none;
  background: repeating-linear-gradient(45deg, var(--brand) 0 6px, #c2410c 6px 12px);
  animation: mo-card-back var(--mo-party) step-end calc(var(--mo-i) * 80ms) both;
}
@keyframes mo-card { from { transform: perspective(600px) rotateY(180deg); } }
@keyframes mo-card-back { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
.mo-flip .ac-pot i.on { display: inline-block; animation: mo-star 240ms var(--mo-spring) calc(var(--mo-i) * 80ms + var(--mo-party) + (var(--s) - 1) * 90ms) both; }
@keyframes mo-star { from { color: var(--surface-3); transform: scale(.3); } }

/* A personality trait the club learned: the "?" turns over to the word. */
.mo-turn .badge { position: relative; display: inline-block; animation: mo-turn var(--mo-party) var(--mo-out) calc(var(--mo-i) * 80ms) both; }
.mo-turn .badge::after {
  content: "?"; position: absolute; inset: -2px; display: grid; place-items: center; border-radius: inherit; pointer-events: none;
  background: var(--surface-2); color: var(--ink); border: 2px solid var(--ink);
  animation: mo-card-back var(--mo-party) step-end calc(var(--mo-i) * 80ms) both;
}
@keyframes mo-turn { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } }

/* An injury: the diagnosis is wiped in like a bandage; back to fitness: a green check. */
.mo-wipe { animation: mo-wipe var(--mo-party) var(--mo-out) 120ms both; }
@keyframes mo-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.mo-check { animation: mo-flash 1.2s ease-out; --mo-flash: rgba(31, 122, 58, .28); }
.mo-check .pc-ok-mark { display: inline-block; animation: mo-check var(--mo-party) var(--mo-spring) 120ms both; }
@keyframes mo-check { from { opacity: 0; transform: scale(0) rotate(-40deg); } }

/* The paper: a new edition unfolds the first time it is opened; its photos develop. */
.mo-unfold { transform-origin: 50% 0; animation: mo-unfold var(--mo-party) var(--mo-out) both; }
@keyframes mo-unfold { from { opacity: 0; transform: perspective(1400px) rotateX(-24deg) scaleY(.94); } }
.mo-unfold :is(.dz-photo img, .dz-note-photo, .dz-figure img):not(.mo-img-wait) { animation: mo-develop 1.2s ease-out both; }
@keyframes mo-develop { from { filter: sepia(1) contrast(.5) brightness(1.3) blur(1.5px); } }

/* Situations: the choices are dealt like cards; the answer slides in. */
.mo-deal > form { animation: mo-deal var(--mo-slow) var(--mo-out) calc(var(--mo-base) + var(--n, 0) * 80ms) both; transform-origin: 50% 0; }
@keyframes mo-deal { from { opacity: 0; transform: perspective(500px) rotateX(-70deg); } }
.mo-slide { animation: mo-slide var(--mo-slow) var(--mo-out) both; }
@keyframes mo-slide { from { opacity: 0; transform: translateX(-16px); } }

/* The market: a sent offer leaves in an envelope; the window's shutter rolls up or down. */
.mo-send { position: relative; animation: mo-enter var(--mo-base) var(--mo-out) both; }
.mo-send::after { content: "✉"; position: absolute; top: .4rem; right: .6rem; font-size: 1.4rem; pointer-events: none; animation: mo-send 700ms var(--mo-in) 150ms both; }
@keyframes mo-send { 0% { opacity: 1; transform: translateX(-24px); } 100% { opacity: 0; transform: translate(40px, -18px) rotate(-14deg); } }
.mo-shutter { position: relative; overflow: hidden; }
.mo-shutter::after {
  content: ""; position: absolute; inset: 0; transform-origin: 50% 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--ink) 0 2px, #6b6157 2px 4px);
  animation: mo-shutter-up 450ms var(--mo-in) 150ms both;
}
.closed .mo-shutter::after { animation-name: mo-shutter-down; animation-duration: 700ms; }
@keyframes mo-shutter-up { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes mo-shutter-down { 0% { transform: scaleY(0); } 40%, 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Money that arrives (a prize, a sale, a derby won): a coin drops on its ledger icon. */
.mo-coin { position: relative; animation: mo-bump var(--mo-slow) var(--mo-spring) 480ms; }
.mo-coin::after {
  content: "$"; position: absolute; left: 50%; top: 50%; width: 1.3rem; height: 1.3rem; margin: -.65rem 0 0 -.65rem; pointer-events: none;
  display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--gold); color: var(--ink);
  font: 800 .75rem/1 var(--condensed); animation: mo-coin 800ms var(--mo-out) calc(var(--mo-i) * 120ms) both;
}
@keyframes mo-coin { 0% { opacity: 0; transform: translateY(-28px); } 25% { opacity: 1; } 55% { transform: none; } 68% { transform: translateY(-6px); } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.6); } }

/* A new signing: his row slides into the squad list. */
.mo-arrive { animation: mo-arrive var(--mo-party) var(--mo-out) calc(var(--mo-i) * 80ms) both; }
@keyframes mo-arrive { from { opacity: 0; transform: translateX(48px) rotate(1.5deg); } }

/* The table: rows that moved glide (motion.js flip()); up tinted green, down burgundy. */
[data-order] [data-row] > td { transition: background-color 1.2s ease-out; }
tr.mo-rose > td { background-color: rgba(31, 122, 58, .14); }
tr.mo-fell > td { background-color: rgba(140, 29, 43, .12); }
/* The last matchday: the promotion and relegation rows pulse twice. */
tr.mo-zone > td { animation: mo-zone 1.1s ease-out both; }
tr.zone-up.mo-zone { --mo-flash: rgba(31, 122, 58, .3); }
tr.zone-down.mo-zone { --mo-flash: rgba(140, 29, 43, .26); }
@keyframes mo-zone { 0%, 50%, 100% { background-color: transparent; } 25%, 75% { background-color: var(--mo-flash); } }

/* A derby: the banner shines once; the players' mood: the flame flickers. */
.mo-shimmer { background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%); background-size: 260% 100%; background-repeat: no-repeat; animation: mo-shine 900ms ease-out 150ms both; }
@keyframes mo-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.mo-flame .mo-flame-ico { display: inline-block; transform-origin: 50% 90%; animation: mo-flame 900ms ease-in-out both; }
@keyframes mo-flame { 15% { transform: scale(1.35) rotate(-7deg); } 30% { transform: scale(.95) rotate(5deg); } 48% { transform: scale(1.22) rotate(-3deg); } 66% { transform: scale(1); } 82% { transform: scale(1.1); } }

/* The stadium grew: its new rows fill from the pitch up (motion.js fillSeats()). */
.mo-fill-seats > i { animation: mo-seats 350ms var(--mo-out) calc(150ms + var(--mo-i) * 90ms) both; }
@keyframes mo-seats { from { transform: scaleX(0); opacity: .2; } }

/* The live match: the stats bars ease to their new width. */
.match-stats .statbar .bars > span { transition: width var(--mo-slow) var(--mo-out); }
@media (prefers-reduced-motion: reduce) { .match-momentum-bar > i { transition: none; } }

/* The next match on a phone (owner report 2026-10-20): each club on its own line, crest and
   name, and the day and time at the right ("hoy" over "21:00"), so the names keep one line;
   a name too long for the whole width ends in "…" (the full name is its title). The countdown
   takes the last line, across the card. */
@media (max-width: 430px) {
  .scorecard.is-sched { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "home time" "away time" "count count"; gap: .5rem .7rem; }
  .scorecard.is-sched > .team:first-child { grid-area: home; }
  .scorecard.is-sched > .team:last-child { grid-area: away; }
  .scorecard.is-sched .team { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; align-items: center; justify-items: start; text-align: left; }
  .scorecard.is-sched .team > .crest, .scorecard.is-sched .team > .kit { grid-row: span 2; width: 28px; --size: 28px; }
  .scorecard.is-sched .team .team-name, .scoreboard .scorecard.is-sched .team .team-name { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; line-height: 1.2; overflow-wrap: normal; -webkit-line-clamp: unset; }
  .scorecard.is-sched .team .team-name > span { white-space: nowrap; }
  .scorecard.is-sched .team .dt-name { grid-column: 2; font-size: .75rem; }
  .scorecard.is-sched .score { display: contents; }
  /* The day over the time ("Mañana" / "00:30"): one word a line, the column as wide as the
     longest word, the font a bit smaller on a narrow phone. */
  .scorecard.is-sched .md-kickoff { grid-area: time; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-left: .6rem; border-left: 2px dashed var(--line); font-size: clamp(.95rem, 4.4vw, 1.3rem); line-height: 1.05; text-align: center; text-transform: capitalize; }
  .scorecard.is-sched .md-kickoff time { width: min-content; margin: 0 auto; }
  /* The countdown starts where the names start (after the 28 px crest and its gap). */
  .scorecard.is-sched .score small { grid-area: count; margin: .1rem 0 0; padding-left: calc(28px + .55rem); font-size: .78rem; text-align: left; }
}

/* The kits worn in a match, under its scoreboard (the sponsor on the chest). */
.match-kits { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: .6rem 0 0; }

/* ---------- [D] Share, always (ui.share, docs/ux.md) ----------
   A small pill of two icons next to the item: WhatsApp and the share sheet (or "copy the
   link"). It looks small (32 px high) but each icon is a 44 × 44 px tap target. */
.share { display: inline-flex; align-items: center; flex: none; position: relative; height: 32px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--surface, #fff); color: var(--ink); vertical-align: middle; font-size: 1rem; line-height: 1; }
.share > a, .share > button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; box-shadow: none; font: inherit; text-transform: none; cursor: pointer; text-decoration: none; }
.share > a::after, .share > button::after { content: ""; position: absolute; inset: -6px -2px; }
.share > a + button { border-left: 1.5px solid var(--line, rgba(0, 0, 0, .2)); border-radius: 0 999px 999px 0; }
.share > a { border-radius: 999px 0 0 999px; }
.share .share-wa { color: #1f7a3a; }
.share > a:hover, .share > button:hover { background: rgba(0, 0, 0, .06); text-decoration: none; transform: none; }
.share > a:active, .share > button:active { background: rgba(0, 0, 0, .12); transform: none; }
.share > a:focus-visible, .share > button:focus-visible { outline: 2px solid var(--brand-2, #1f3b73); outline-offset: 1px; }
.share svg { display: block; }
/* The address was copied: a small tick and the word over the pill for a moment. */
.share.is-copied .share-sys { color: #1f7a3a; }
.share.is-copied::before { content: attr(data-copied); position: absolute; bottom: calc(100% + 6px); right: 0; padding: .25rem .5rem; border-radius: 6px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; pointer-events: none; z-index: 2; }
/* On dark grounds (the stands) the pill keeps its light face. */
.tribuna .share { border-color: rgba(255, 255, 255, .7); }
.feed li:has(.share) { display: flex; align-items: center; gap: .5rem; }
.feed li:has(.share) > .feed-link { flex: 1; min-width: 0; }
.md-share, .pc-share { display: flex; justify-content: center; margin: .75rem 0; }
.dz-share .share { margin-left: auto; }
/* The paper's teaser on the dashboard: the pill in its bottom right corner, out of its link. */
.dz-tz-wrap { position: relative; }
.dz-tz-share { position: absolute; right: .7rem; bottom: .6rem; }
/* The catch-up deck's paper card: "Leer" and the pill in one row. */
.cu-go-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: auto 0 0; }
.cu-go-row .cu-go { margin-top: 0; }

/* The invitation of a visitor who came from a shared link. */
.referral-banner { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; padding: .75rem 1rem; background: var(--brand); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; animation: mo-enter var(--mo-base) var(--mo-out) both; }
.referral-banner:hover { text-decoration: none; background: #e98a3c; color: var(--ink); }
.referral-banner strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; }
.referral-banner small { display: block; font-weight: 600; color: var(--ink); }
.referral-banner > span:nth-child(2) { flex: 1; min-width: 0; }
.rb-ball { font-size: 1.6rem; }
.rb-go { flex: none; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; white-space: nowrap; }

/* A moment's public page (controllers::moments). */
.moment { position: relative; overflow: hidden; }
.moment-body { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.moment-crest { flex: none; }
.moment .moment-trapo { flex: 1 1 280px; max-width: 460px; margin: 0 auto; }
.moment h1 { margin: .35rem 0; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1; overflow-wrap: anywhere; }
.moment h1 a { color: inherit; }
.moment-line { font-family: var(--condensed); font-weight: 700; font-size: 1.15rem; margin: 0; }
.moment-links a { margin-right: .75rem; }
.moment-actions { margin-top: 1rem; gap: .5rem; flex-wrap: wrap; }
.badge.brand { background: var(--brand); }
.moment-stamp { position: absolute; top: .75rem; right: .75rem; transform: rotate(12deg); padding: .2rem .6rem; border: 3px double var(--brand-2); color: var(--brand-2); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; border-radius: 4px; }

/* ---------- [D] "Novedades" (views::announcements) ---------- */
.news-card h2 { margin: 0 0 .5rem; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.news-list > li { display: flex; gap: .5rem; align-items: flex-start; padding: .75rem; background: var(--surface-2); border: 2px dashed var(--line); border-radius: var(--radius); }
.news-text { flex: 1; min-width: 0; }
.news-text strong { font-family: var(--condensed); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; }
.news-text p { margin: .25rem 0 .5rem; }
.news-text .row { gap: .5rem; flex-wrap: wrap; }
.news-close button { min-width: 44px; min-height: 44px; font-size: 1.4rem; line-height: 1; }

/* ---------- [D] "Mientras no estabas" (components/catch_up.html, catch_up.js) ---------- */
.cu { margin: 0 0 1rem; }
.cu-panel { background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
.cu-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.cu-head h2 { margin: 0; font-size: 1.6rem; }
.cu-head p { margin: .15rem 0 0; }
.cu-skip { flex: none; }
.cu-track { list-style: none; margin: .75rem -.25rem 0; padding: .25rem; display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cu-track::-webkit-scrollbar { display: none; }
.cu-card { flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box; padding: 1rem; background: var(--surface-2); border: 2px solid var(--ink); border-radius: var(--radius); display: flex; flex-direction: column; gap: .5rem; min-height: 15rem; min-width: 0; }
.cu-card h3 { margin: 0; font-size: 1.5rem; line-height: 1.05; }
.cu-kicker { margin: 0; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cu-red { margin: 0; color: var(--bad); font-family: var(--condensed); font-weight: 800; text-transform: uppercase; }
.cu-tally { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; }
.cu-tally .result { padding: .1rem .5rem; font-size: .95rem; }
.cu-lines { display: grid; gap: .35rem; }
.cu-photo { width: 100%; height: auto; max-height: 11rem; object-fit: cover; border: 2px solid var(--ink); }
.cu-big { margin: .25rem 0; font-family: var(--display); font-size: 2.6rem; line-height: 1; }
.cu-big.cu-up { color: var(--good); } .cu-big.cu-down { color: var(--bad); }
.cu-go { margin-top: auto; align-self: flex-start; font-family: var(--condensed); font-weight: 800; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; }
.cu-card .todo { margin: 0; }
.cu-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; }
.cu-arrow { min-width: 48px; min-height: 48px; font-size: 1.5rem; line-height: 1; }
.cu-arrow.cu-finish { font-size: 1rem; padding: 0 1rem; }
.cu-dots { display: flex; gap: .4rem; }
.cu-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; cursor: pointer; transition: background-color var(--mo-fast), transform var(--mo-fast) var(--mo-spring); }
.cu-dots i.on { background: var(--brand); transform: scale(1.25); }
/* The deck over the dashboard (catch_up.js). */
.cu.cu-open { position: fixed; inset: 0; z-index: 60; margin: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(23, 19, 15, .55); animation: cu-fade var(--mo-base) var(--mo-out) both; }
.cu.cu-open .cu-panel { width: min(100%, 30rem); max-height: calc(100dvh - 2rem); overflow: auto; animation: cu-deal var(--mo-party) var(--mo-spring) both; }
.cu.cu-open .cu-card { transition: transform var(--mo-base) var(--mo-out), opacity var(--mo-base); transform: scale(.94); opacity: .6; }
.cu.cu-open .cu-card.is-current { transform: none; opacity: 1; }
.cu.cu-leaving { animation: cu-fade var(--mo-base) var(--mo-in) reverse both; }
html.cu-lock { overflow: hidden; }
@keyframes cu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cu-deal { from { transform: translateY(24px) rotate(-2deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* [D] What the stands feel for a player (models::fans): a word chip, never a number. */
.fan-chip { border: 1px solid var(--ink); }
.fan-booed { background: var(--bad-soft); color: var(--bad); }
.fan-patience { background: var(--surface-3); }
.fan-liked { background: #e6efd9; color: var(--good); }
.fan-loved { background: var(--brand); color: var(--brand-ink); }
.fan-god { background: var(--gold); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.pc-fans-label { font-family: var(--condensed); font-weight: 800; text-transform: uppercase; font-size: 12px; color: var(--muted); }