/* Prancheta — the screen.
 *
 * Direction: a coach's clipboard on a floodlit touchline. The chrome (top bar, situation strip,
 * club picker) is the deep green of the board itself; the data sits on it as clean plates, because
 * twenty table rows and thirty-three squad rows have to be read at a glance on a phone in daylight.
 * The one loud colour is a Brazilian yellow, spent on exactly two things: the button that moves the
 * week, and the row that is his club.
 *
 * DAY AND NIGHT. A season is 48 weeks and most of them get played after dinner, so the same board
 * exists under two lights. Day is the page above. Night is not an inversion of it: the floodlit
 * pitch is the ground, the plates become the dark slate of the board itself, and the yellow does
 * not move — it is the one thing that must stay exactly where it was, or the button that closes the
 * week stops being the button that closes the week.
 *
 * Every colour on this page is a token below. Nothing is written as a literal further down, which
 * is what makes the two lights one list instead of two stylesheets. `light-dark()` picks between
 * them; the plain values in :root are what a browser without it keeps, so it lands on day.
 *
 * Typefaces are system faces on purpose — this page must run with no network at all, so nothing is
 * fetched. The character comes from the condensed stack (Bahnschrift on Windows, DIN Alternate on
 * macOS/iOS, Roboto Condensed on Android) used for every label and every number, against a plain
 * humanist UI face for prose.
 */

:root {

  /* The board: top bar, picker, scoreboard. Graphite under both lights, so it is a FRAME and not a
     second pitch — and so the green of a verdict is the only green competing with the grass. */
  --board:           #191B1C;
  --board-2:         #24282A;
  /* The grass, and the only green left in the chrome. Kept on purpose: it is what makes the pitch
     read as a pitch now that the frame around it stopped being green too. */
  --board-3:         #15493B;
  --board-4:         #0E3A2E;
  --board-line:      rgba(255, 255, 255, 0.14);
  --board-dim:       rgba(230, 235, 237, 0.62);
  --on-board:        #FFFFFF;
  --on-board-2:      #E6EAEC;

  /* Surfaces, from the page ground up to a raised plate. Neutral, to match the frame: graphite
     around a green page is worse than either one alone. */
  --chalk:           #EEEFEF;
  --card:            #FFFFFF;
  --surface-1:       #FBFBFB;
  --surface-2:       #F8F8F8;
  --surface-3:       #F1F2F2;
  --surface-4:       #EAECEC;
  --track:           #E5E7E7;
  --line:            #DDDFDF;
  --line-soft:       #EBECEC;

  /* Ink, darkest to faintest. */
  --ink:             #101314;
  --ink-2:           #474C4E;
  --ink-3:           #6A7173;
  --ink-4:           #929697;

  /* The one loud colour. It does not move between the two lights. */
  --amarelo:         #F5B915;
  --amarelo-hover:   #FFC72E;
  --amarelo-ink:     #4A3400;
  --amarelo-bg:      #FEF6DF;
  --amarelo-bg-ink:  #4A3400;

  /* Warning: a suspension, a wage that will not fit, a promise about to break. Orange, not amber:
     the old #E08A1E lived in the same neighbourhood as the yellow of the button that closes the
     week, which in a football game is the one confusion the palette cannot afford. */
  --warn-ink:        #9A4E06;
  --warn-bg:         #FDECD9;
  --warn-bg-soft:    #FFFBEC;
  --warn-line:       #EFC79A;
  --warn-bright:     #FFD9A1;
  --warn-strong:     #DB6D0F;

  /* The card in the referee's hand. Always DRAWN as a rectangle, never used as a text colour —
     that is the whole point of taking the warning away from yellow. */
  --cartao:          #FFD24A;

  /* Going up: a win, a promotion place, a deal accepted. */
  --sobe:            #0F7B4B;
  --sobe-txt:        #0F7B4B;
  --ok-ink:          #0B5A36;
  --ok-bg:           #F1F8F3;
  --ok-bg-2:         #DFF0E4;
  --ok-line:         #C6E2CF;
  --ok-bright:       #7BE3A8;
  --meter-mid:       #7EA88F;

  /* Going down: a defeat, the drop zone, an injury, a refusal. */
  --cai:             #C4342B;
  --cai-txt:         #C4342B;
  --bad-ink:         #8C2018;
  --bad-bg:          #FDF2F1;
  --bad-bg-2:        #FDEBEA;
  --bad-line:        #EEC7C3;
  --bad-bright:      #FF8A7A;
  --bad-bright-2:    #FFB0A7;
  --bad-bright-3:    #FFC9C4;

  /* Neither: a academy boy, a note, a fact with no side. */
  --info-ink:        #1E5A93;
  --info-ink-2:      #2F5B8C;
  --info-bg:         #E9F2FB;
  --info-bg-2:       #D9E9F7;
  --neutro:          #94A49B;

  /* The newspaper, which is paper and not screen. At night it is the late edition. */
  --paper:           #FBFBF7;
  --paper-2:         #F4F4EC;
  --paper-ink:       #16160F;
  --paper-ink-2:     #12120C;
  --paper-ink-3:     #2B2B20;
  --paper-ink-4:     #6B6B5E;
  --paper-ink-5:     #707063;
  --paper-rule:      #23231E;
  --paper-line:      #E4E4D9;
  --paper-line-2:    #E9E9DE;
  --paper-line-3:    #DEDED2;
  --paper-border:    #D9D9CF;
  --paper-btn-line:  #D2D2C6;
  --paper-hover:     #EBEBE0;

  /* The eleven cards on the pitch. The pitch is dark under both lights, so these plates are the one place a surface has to be told apart from --card. */
  --vaga:            rgba(255, 255, 255, 0.96);
  --vaga-hover:      #FFFFFF;

  /* Depth, and the veil a control paints on itself when the pointer is over it. */
  --shadow-near:     rgba(16, 19, 20, 0.06);
  --shadow-far:      rgba(16, 19, 20, 0.22);
  --hover-veil:      rgba(0, 0, 0, 0.07);

  --font-cond: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Archivo Narrow", "Segoe UI", system-ui, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shadow: 0 1px 2px var(--shadow-near), 0 6px 18px -10px var(--shadow-far);
  /* The margin mark: the coloured rule down the left of a line that has a side to it. One width,
     named once, because eight component families use it. */
  --mark: 3px;
  --r: 10px;
  --bar-h: 68px;
}

/* Night.
 *
 * `light-dark()` reads the element's own `color-scheme`, so one list covers both lights and the
 * switch is a single property. Left alone, `light dark` follows the phone or the desktop. The
 * button in the top bar writes data-theme on <html> and pins it with `only`, which is also what
 * stops a pinned choice from being undone when the machine crosses into night on its own.
 *
 * A browser with no light-dark() never enters this block and keeps the plain day values above. */
@supports (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light dark;

    /* The board: top bar, picker, scoreboard. Graphite under both lights. */
    --board:           light-dark(#191B1C, #0F1112);
    --board-2:         light-dark(#24282A, #1C1F20);
    /* The grass keeps its green in both lights — it is the pitch, not the chrome. */
    --board-3:         light-dark(#15493B, #1A453A);
    --board-4:         light-dark(#0E3A2E, #123529);
    --board-line:      light-dark(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.10));
    --board-dim:       light-dark(rgba(230, 235, 237, 0.62), rgba(228, 233, 235, 0.58));
    --on-board:        light-dark(#FFFFFF, #F2F4F5);
    --on-board-2:      light-dark(#E6EAEC, #D9DEE0);

    /* Surfaces, from the page ground up to a raised plate. */
    --chalk:           light-dark(#EEEFEF, #0B0C0D);
    --card:            light-dark(#FFFFFF, #16181A);
    --surface-1:       light-dark(#FBFBFB, #1B1E20);
    --surface-2:       light-dark(#F8F8F8, #1F2325);
    --surface-3:       light-dark(#F1F2F2, #24282A);
    --surface-4:       light-dark(#EAECEC, #2B3033);
    --track:           light-dark(#E5E7E7, #31373A);
    --line:            light-dark(#DDDFDF, #2C3134);
    --line-soft:       light-dark(#EBECEC, #212527);

    /* Ink, darkest to faintest. */
    --ink:             light-dark(#101314, #ECEFF0);
    --ink-2:           light-dark(#474C4E, #B0B8BB);
    --ink-3:           light-dark(#6A7173, #98A2A6);
    --ink-4:           light-dark(#929697, #697275);

    /* The one loud colour. It does not move between the two lights. */
    --amarelo:         light-dark(#F5B915, #F5B915);
    --amarelo-hover:   light-dark(#FFC72E, #FFC72E);
    --amarelo-ink:     light-dark(#4A3400, #3A2800);
    --amarelo-bg:      light-dark(#FEF6DF, #362A0C);
    --amarelo-bg-ink:  light-dark(#4A3400, #F0C765);

    /* Warning: a suspension, a wage that will not fit, a promise about to break. */
    --warn-ink:        light-dark(#9A4E06, #F2AE6B);
    --warn-bg:         light-dark(#FDECD9, #37220C);
    --warn-bg-soft:    light-dark(#FFFBEC, #1E1912);
    --warn-line:       light-dark(#EFC79A, #6A3F16);
    --warn-bright:     light-dark(#FFD9A1, #FFD9A1);
    --warn-strong:     light-dark(#DB6D0F, #F0863A);

    /* The card in the referee's hand — the same yellow under both lights, like the button. */
    --cartao:          light-dark(#FFD24A, #FFD24A);

    /* Going up: a win, a promotion place, a deal accepted. */
    --sobe:            light-dark(#0F7B4B, #178151);
    --sobe-txt:        light-dark(#0F7B4B, #7BE3A8);
    --ok-ink:          light-dark(#0B5A36, #7BE3A8);
    --ok-bg:           light-dark(#F1F8F3, #102E22);
    --ok-bg-2:         light-dark(#DFF0E4, #17402D);
    --ok-line:         light-dark(#C6E2CF, #246043);
    --ok-bright:       light-dark(#7BE3A8, #7BE3A8);
    --meter-mid:       light-dark(#7EA88F, #4F8E6E);

    /* Going down: a defeat, the drop zone, an injury, a refusal. */
    --cai:             light-dark(#C4342B, #C04A3F);
    --cai-txt:         light-dark(#C4342B, #FFB0A7);
    --bad-ink:         light-dark(#8C2018, #FFB0A7);
    --bad-bg:          light-dark(#FDF2F1, #2E1614);
    --bad-bg-2:        light-dark(#FDEBEA, #3A1A17);
    --bad-line:        light-dark(#EEC7C3, #5C2A25);
    --bad-bright:      light-dark(#FF8A7A, #FF8A7A);
    --bad-bright-2:    light-dark(#FFB0A7, #FFB0A7);
    --bad-bright-3:    light-dark(#FFC9C4, #FFC9C4);

    /* Neither: a academy boy, a note, a fact with no side. */
    --info-ink:        light-dark(#1E5A93, #8CC4F2);
    --info-ink-2:      light-dark(#2F5B8C, #8CC4F2);
    --info-bg:         light-dark(#E9F2FB, #12293C);
    --info-bg-2:       light-dark(#D9E9F7, #17334A);
    --neutro:          light-dark(#94A49B, #758D85);

    /* The newspaper, which is paper and not screen. At night it is the late edition. */
    --paper:           light-dark(#FBFBF7, #15150F);
    --paper-2:         light-dark(#F4F4EC, #1C1C14);
    --paper-ink:       light-dark(#16160F, #F0F0E4);
    --paper-ink-2:     light-dark(#12120C, #FAFAF0);
    --paper-ink-3:     light-dark(#2B2B20, #D6D6C7);
    --paper-ink-4:     light-dark(#6B6B5E, #9C9C8A);
    --paper-ink-5:     light-dark(#707063, #8E8E7C);
    --paper-rule:      light-dark(#23231E, #4C4C3E);
    --paper-line:      light-dark(#E4E4D9, #2B2B21);
    --paper-line-2:    light-dark(#E9E9DE, #26261D);
    --paper-line-3:    light-dark(#DEDED2, #313126);
    --paper-border:    light-dark(#D9D9CF, #2F2F24);
    --paper-btn-line:  light-dark(#D2D2C6, #3C3C2E);
    --paper-hover:     light-dark(#EBEBE0, #27271D);

    /* The eleven cards on the pitch. The pitch is dark under both lights, so these plates are the one place a surface has to be told apart from --card. */
    --vaga:            light-dark(rgba(255, 255, 255, 0.96), rgba(10, 28, 23, 0.92));
    --vaga-hover:      light-dark(#FFFFFF, #17342C);

    /* Depth, and the veil a control paints on itself when the pointer is over it. */
    --shadow-near:     light-dark(rgba(16, 19, 20, 0.06), rgba(0, 0, 0, 0.44));
    --shadow-far:      light-dark(rgba(16, 19, 20, 0.22), rgba(0, 0, 0, 0.72));
    --hover-veil:      light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.09));
  }
  :root[data-theme="light"] { color-scheme: only light; }
  :root[data-theme="dark"]  { color-scheme: only dark; }
}

*, *::before, *::after { box-sizing: border-box; }

/* .boot sets display:flex, which outranks the UA's [hidden] rule. State it once, for everything. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; }

button { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Wordmark ─────────────────────────────────────────────────────────────── */

.wordmark {
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  font-size: 13px;
  color: var(--amarelo);
}
.wordmark.small { font-size: 12px; letter-spacing: 0.28em; text-indent: 0.28em; }

/* ── Boot ─────────────────────────────────────────────────────────────────── */

.boot {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--board); color: var(--on-board); text-align: center; padding: 24px;
}
.boot-mark {
  font-family: var(--font-cond); font-weight: 700; font-size: 22px;
  letter-spacing: 0.4em; text-indent: 0.4em; color: var(--amarelo);
}
.boot-line { margin: 0; max-width: 44ch; color: var(--board-dim); font-size: 14px; }
.boot-line.error { color: var(--bad-bright-3); }

/* ── Club picker ──────────────────────────────────────────────────────────── */

.picker { min-height: 100vh; background: var(--board); color: var(--on-board); }

.picker-head {
  max-width: 1180px; margin: 0 auto;
  padding: 44px 20px 30px;
}
.picker-head h1 {
  font-family: var(--font-cond);
  font-size: clamp(34px, 7vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 18px 0 12px;
}
.lede { margin: 0 0 26px; max-width: 54ch; color: var(--board-dim); font-size: 15px; }

.search { display: block; max-width: 420px; }
.search input {
  width: 100%; font: inherit; font-size: 15px;
  padding: 12px 14px;
  color: var(--on-board);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--board-line);
  border-radius: var(--r);
}
.search input::placeholder { color: rgba(230, 235, 237, 0.45); }
.search input:focus { background: rgba(255, 255, 255, 0.1); outline-offset: 0; }

.picker-body { max-width: 1180px; margin: 0 auto; padding: 0 20px 64px; }

/* The way back to week 1, and the screen that appears when a saved season belongs to another
   world. Both live on the dark board, so they borrow the picker's type and its lines. */

.recomecar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.recomecar-nota { font-size: 13.5px; color: var(--board-dim); max-width: 44ch; }

.aviso-lista { list-style: none; display: grid; gap: 8px; max-width: 60ch; margin: 0 0 24px; padding: 0; }
.aviso-lista li {
  padding: 12px 14px;
  border: 1px solid var(--board-line); border-radius: var(--r);
  background: rgba(255, 255, 255, 0.05);
  font-size: 14.5px; color: var(--on-board);
}
.aviso-lista .quando {
  display: block; margin-top: 4px;
  font-family: var(--font-cond); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--board-dim);
}
.aviso-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
/* var(--cai) is mixed for white paper; on the board it reads as brown, so the destructive action
   keeps the pill and takes a lighter red. */
.linkbtn.perigo-escuro { color: var(--bad-bright-2); border-color: rgba(255, 176, 167, 0.4); min-height: 48px; padding: 6px 16px; }
.linkbtn.perigo-escuro:hover { color: var(--on-board); background: rgba(255, 138, 122, 0.14); border-color: rgba(255, 176, 167, 0.7); }



.division-group + .division-group { margin-top: 34px; }
.division-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--board-line);
}
.division-head .letra {
  font-family: var(--font-cond); font-weight: 700; font-size: 26px; color: var(--amarelo);
  letter-spacing: 0.04em;
}
.division-head .qual { font-family: var(--font-cond); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--board-dim); }

.club-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }

.club {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--board-line);
  border-radius: var(--r);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.club:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(245, 185, 21, 0.6); }
.club:active { transform: translateY(1px); }

.club-id { min-width: 0; }
.club-nome {
  display: block; font-weight: 600; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.club-meta {
  display: block;
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.06em;
  color: var(--board-dim); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--board);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.topbar-in {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
}
.topbar-week {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-cond);
  font-size: 13px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--board-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-week b { color: var(--on-board); font-weight: 700; }

.linkbtn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--board-line); border-radius: 999px;
  padding: 6px 13px; cursor: pointer;
  font-family: var(--font-cond); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--board-dim);
  transition: color 140ms ease, border-color 140ms ease;
}
.linkbtn:hover { color: var(--on-board); border-color: rgba(255, 255, 255, 0.4); }

/* ── Layout ───────────────────────────────────────────────────────────────── */

.wrap {
  max-width: 1320px; margin: 0 auto;
  padding: 18px 20px calc(var(--bar-h) + 34px);
}

.cols { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); margin-top: 18px; }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ── Situation strip: the signature block ─────────────────────────────────── */

.situation {
  /* Floodlight. Two soft lamps off the top corners, the way a stand is lit — it is what stops the
     strip reading as a flat black rectangle now that the frame is graphite instead of green. */
  background:
    radial-gradient(130% 170% at 12% -30%, rgba(255, 255, 255, 0.09), transparent 52%),
    radial-gradient(130% 170% at 88% -30%, rgba(255, 255, 255, 0.05), transparent 52%),
    var(--board);
  color: var(--on-board);
  border-radius: var(--r);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
.sit-cell {
  padding: 16px 18px 17px;
  border-left: 1px solid var(--board-line);
  min-width: 0;
}
.sit-cell:first-child { border-left: 0; }

.sit-label {
  font-family: var(--font-cond);
  font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--board-dim);
  margin-bottom: 7px;
}

.sit-club { display: flex; align-items: center; gap: 13px; }
.sit-id { min-width: 0; }
.sit-nome {
  display: block;
  font-family: var(--font-cond); font-weight: 700;
  font-size: clamp(23px, 2.6vw, 32px); line-height: 1.06; letter-spacing: -0.01em;
}
.sit-sub {
  display: block;
  font-family: var(--font-cond); font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--board-dim); margin-top: 3px;
}

.sit-big {
  font-family: var(--font-cond); font-weight: 700; font-size: 34px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* No ordinal glyph: the condensed faces render "º" as a speck. The label above says "Posição",
   and "6 de 20" says more than "6º" ever did. */
.sit-de { font-size: 0.5em; color: var(--board-dim); margin-left: 3px; letter-spacing: 0.03em; }
.sit-note {
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--board-dim); margin-top: 6px;
}
.sit-note.warn { color: var(--warn-bright); }

/* The board's patience: ten ticks that drain. This is the thing he checks first. */
.gauge { display: flex; gap: 3px; margin: 6px 0 7px; }
.gauge i {
  flex: 1 1 0; height: 15px; border-radius: 2px;
  background: var(--board-line);
}
.gauge i.on { background: var(--tick); }

/* A figure on the board strip that went negative. It sits on the dark frame, so it takes the bright
   red — --cai-txt is a day colour and disappears against graphite. */
.sit-big.negativo { color: var(--bad-bright); }

/* The card in the referee's hand, drawn rather than said. Never a text colour: that is what the
   orange warning tokens are for. */
.cartao {
  display: inline-block; width: 8px; height: 11px; border-radius: 1.5px;
  background: var(--cartao); vertical-align: -1px;
}
.pat-word {
  font-family: var(--font-cond); font-weight: 700;
  font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tick);
}

/* ── Panels ───────────────────────────────────────────────────────────────── */

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 {
  font-family: var(--font-cond); font-size: 14px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.panel-note {
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); text-align: right;
}

/* ── A sua semana: the week said as a list of decisions ───────────────────── */

/* One row per thing that has a reason to exist THIS week. The margin mark carries the state and is
   the ONLY signal for it: a hollow disc for pending plus a filled one for done would be two signals
   for one state, and the eye then has to check both to be sure. */
.tarefa {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line-soft);
  border-left: var(--mark) solid var(--track);
}
.tarefa:last-of-type { border-bottom: 0; }
.tarefa.urgente { border-left-color: var(--warn-strong); }
.tarefa.feita { border-left-color: var(--ok-line); background: var(--surface-2); }

.tarefa-marca { width: 44px; display: flex; justify-content: center; flex-shrink: 0; }
.tarefa-marca i { width: 9px; height: 9px; border-radius: 999px; background: var(--track); }
.tarefa.urgente .tarefa-marca i { background: var(--warn-strong); }
.tarefa.feita .tarefa-marca {
  font-family: var(--font-cond); font-weight: 700; font-size: 12px; color: var(--ok-ink);
}
.tarefa.feita .tarefa-marca i { display: none; }

.tarefa-id { flex: 1; min-width: 0; }
.tarefa-id b {
  display: block;
  font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  color: var(--ink);
}
.tarefa.feita .tarefa-id b { color: var(--ink-3); }
.tarefa-id span {
  display: block; font-size: 14px; line-height: 1.45; color: var(--ink-2); margin-top: 2px;
  text-wrap: pretty;
}
.tarefa-cta { flex-shrink: 0; padding-right: 16px; }

.tarefa-rodape {
  padding: 12px 16px; background: var(--surface-2);
  font-size: 14px; line-height: 1.45; color: var(--ink-3);
}

@media (max-width: 560px) {
  /* The button drops to its own full-width line rather than squeezing the sentence beside it. The
     44px left pad keeps it under the text, not under the mark column. */
  .tarefa { flex-wrap: wrap; }
  .tarefa-cta { width: 100%; padding-left: 44px; margin-top: 8px; }
  .tarefa-cta .secbtn { width: 100%; justify-content: center; }
}

/* The link that opens the full table or the full squad back up. Centred, quiet, and a real 40px
   touch target. */
.ver-tudo {
  display: block; width: 100%;
  padding: 11px 16px; background: var(--surface-2); border: 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-cond); font-weight: 700;
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer; text-align: center;
  transition: color 140ms ease, background 140ms ease;
}
.ver-tudo:hover { color: var(--ink); background: var(--surface-3); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

thead th {
  font-family: var(--font-cond); font-weight: 600;
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); text-align: right;
  padding: 9px 8px; border-bottom: 1px solid var(--line);
  background: var(--surface-1);
  position: sticky; top: 0;
}
thead th:first-child, thead th.left { text-align: left; }

tbody td {
  padding: 8px; text-align: right; font-size: 14px;
  border-bottom: 1px solid var(--line-soft);
}
tbody tr:last-child td { border-bottom: 0; }
tbody td.left { text-align: left; }
tbody td.num { font-family: var(--font-cond); font-weight: 600; }

.t-pos { width: 34px; color: var(--ink-3); font-family: var(--font-cond); font-weight: 600; }
.t-nome { font-weight: 500; }
.t-nome .cidade { color: var(--ink-3); font-size: 12px; }
.t-pts { font-family: var(--font-cond); font-weight: 700; font-size: 15px; }
.t-mov { width: 30px; padding-left: 0; padding-right: 4px; font-size: 11px; text-align: center; }
.t-mov.up { color: var(--sobe-txt); }
.t-mov.down { color: var(--cai-txt); }
/* "No change" is the quietest state in the table, but quiet is not the same as unreadable: at
   11px the dash needs the label tone, not the faintest one. */
.t-mov.flat { color: var(--ink-3); }

/* Zone stripes carry the promotion and relegation lines. */
tbody tr.zone-up td:first-child { box-shadow: inset 3px 0 0 var(--sobe); }
tbody tr.zone-down td:first-child { box-shadow: inset 3px 0 0 var(--cai); }

tbody tr.eu td { background: var(--amarelo-bg); font-weight: 600; }
tbody tr.eu td:first-child { box-shadow: inset 3px 0 0 var(--amarelo); }
tbody tr.eu.zone-up td:first-child { box-shadow: inset 3px 0 0 var(--amarelo), inset 6px 0 0 -3px var(--sobe); }

/* The named line between the zones: a rule across the table, labelled at the left. */
.zone-rule td {
  padding: 0; text-align: left;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.zone-rule span {
  display: block; padding: 4px 8px 5px;
  font-family: var(--font-cond); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
}
.zone-rule.up span { color: var(--sobe-txt); box-shadow: inset 3px 0 0 var(--sobe); }
.zone-rule.down span { color: var(--cai-txt); box-shadow: inset 3px 0 0 var(--cai); }

/* Tables show every row: the page scrolls, not a box inside it. Only the feed, which grows without
   end, is given a ceiling of its own. */
.scroller { overflow-x: auto; }
.feed .panel-body { max-height: 620px; overflow-y: auto; }

/* ── This week ────────────────────────────────────────────────────────────── */

.meujogo {
  padding: 15px 16px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--warn-bg-soft) 0%, var(--card) 100%);
}
.meujogo-label {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}
.placar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
}
/* The badge above the name, not beside it: at 375px a 40px shield and "Red Bull Bragantino" on one
   line leaves the name three characters wide. Stacked, both stay whole at every width. */
.placar .lado {
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.placar .lado:not(.casa) { align-items: flex-start; }
.placar .lado.casa { text-align: right; }
.placar .lado .crest { flex: 0 0 auto; }
.placar .lado .nome {
  font-family: var(--font-cond); font-weight: 700; font-size: clamp(15px, 3.4vw, 19px); line-height: 1.15;
}
.placar .lado .onde {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3);
}
.placar .gols {
  font-family: var(--font-cond); font-weight: 700; font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums; padding: 0 4px; white-space: nowrap;
}
.placar .gols.pend { font-size: 15px; letter-spacing: 0.1em; color: var(--ink-3); }
.veredito {
  margin-top: 11px; text-align: center;
  font-family: var(--font-cond); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.veredito.v { color: var(--sobe-txt); }
.veredito.e { color: var(--ink-2); }
.veredito.d { color: var(--cai-txt); }

.jogo {
  display: grid; grid-template-columns: 1fr 62px 1fr; align-items: center; gap: 8px;
  padding: 7px 16px; font-size: 13.5px;
  border-bottom: 1px solid var(--line-soft);
}
.jogo:last-child { border-bottom: 0; }
/* Badge on the outside of each name, so the two crests frame the score instead of crowding it. */
.jogo > span:not(.res) {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.jogo .casa { justify-content: flex-end; text-align: right; }
.jogo .res {
  text-align: center; font-family: var(--font-cond); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.jogo .res.pend { color: var(--ink-3); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; }

.vazio { padding: 22px 16px; color: var(--ink-3); font-size: 14px; }

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

.grupo td {
  background: var(--surface-2);
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-3); padding: 6px 8px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.pos-tag {
  display: inline-block; min-width: 34px; padding: 2px 5px; border-radius: 4px;
  background: var(--surface-4); color: var(--ink-2);
  font-family: var(--font-cond); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em;
  text-align: center;
  /* MEI-A is the only tag with a hyphen in it, and a hyphen is a break opportunity: in the lineup's
     42px column it wrapped onto two lines and made those two rows eleven pixels taller than every
     other row on the screen. */
  white-space: nowrap;
}
.geral {
  display: inline-block; min-width: 30px; padding: 3px 6px; border-radius: 5px;
  font-family: var(--font-cond); font-weight: 700; font-size: 13.5px;
  background: var(--surface-4); color: var(--ink);
}
.geral.alto { background: var(--ok-bg-2); color: var(--ok-ink); }
/* README's rating scale for a general/overall, reused verbatim for a transfer target's number
   (COOKBOOK §5: "geral com a escala de nota do README"). `.geral` already carries the middle tier
   (68-77, surface-4/ink) as its bare default and `.alto` as the top tier (78+, ok-bg-2/ok-ink).
   Only the bottom tier (<68) was missing; `.baixo` already exists but is a different, red-toned
   semantic (a bad MATCH rating in postmatch.js), not this muted "just short" one, so it gets its
   own name instead of being reused wrong. */
.geral.fraco { background: var(--surface-3); color: var(--ink-2); }
.status {
  display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  vertical-align: 1px;
}
.status.lesao { background: var(--bad-bg-2); color: var(--cai-txt); }
.status.susp { background: var(--warn-bg); color: var(--warn-ink); }
.status.cria { background: var(--info-bg); color: var(--info-ink); }

/* ── Feed ─────────────────────────────────────────────────────────────────── */

.feed-week {
  padding: 9px 16px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-3);
  position: sticky; top: 0;
}
.feed-week:first-child { border-top: 0; }

.item {
  display: grid; grid-template-columns: 3px 1fr; gap: 11px; align-items: start;
  padding: 10px 16px 11px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.4;
}
.item .mark { align-self: stretch; border-radius: 2px; background: var(--line); min-height: 18px; }
.item.meu .mark { background: var(--amarelo); }
.item.bom .mark { background: var(--sobe); }
.item.ruim .mark { background: var(--cai); }
.item .txt { min-width: 0; }
.item.novo { animation: entra 320ms ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ── Action bar ───────────────────────────────────────────────────────────── */

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  /* Opaque, not a blurred backdrop: this bar spans the whole viewport and is repainted after
     every week, and a full-width backdrop-filter costs ~1.7s per advance on a machine with no
     GPU acceleration. Measured, not assumed. */
  background: var(--chalk);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px -12px rgba(16, 19, 20, 0.35);
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar-in {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 11px 20px;
  min-height: var(--bar-h);
}
.actionbar-week {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-cond); font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-2);
}
.actionbar-week b { display: block; color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: 0.06em; }
/* Unsaved work is never allowed to disappear behind a hint: it rides along with whatever the bar
   is currently saying. */
.nao-salvo {
  display: inline-block; margin-top: 2px;
  color: var(--cai-txt); font-weight: 700; letter-spacing: 0.1em;
}
.nao-salvo::before { content: "· "; }

.advance {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 0; border-radius: 8px;
  background: var(--amarelo); color: var(--amarelo-ink);
  font-family: var(--font-cond); font-weight: 700;
  font-size: 15px; letter-spacing: 0.11em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--amarelo-ink);
  transition: transform 90ms ease, box-shadow 90ms ease, background 140ms ease;
}
.advance:hover { background: var(--amarelo-hover); }
.advance:active { transform: translateY(2px); box-shadow: 0 0 0 var(--amarelo-ink); }
.advance[disabled] {
  cursor: progress; background: var(--track); color: var(--ink-2); box-shadow: none; transform: none;
}
.advance[disabled] .advance-arrow { display: none; }
.advance.rodando .advance-label::after {
  content: ""; display: inline-block; width: 1.6em; text-align: left;
  animation: pontos 900ms steps(4, end) infinite;
}
@keyframes pontos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.fim {
  flex: 0 0 auto; max-width: 46ch;
  font-size: 13px; color: var(--cai-txt); line-height: 1.35;
}

/* One fact, two writings: `.wide` on a desktop bar, `.narrow` on a phone's. */
.narrow { display: none; }

/* ── Phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .cols { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
  /* The wrappers dissolve and the phone gets its own order: my week, the table, my squad,
     then the story. */
  .stack { display: contents; }
  .semana { order: 1; }
  .tabela { order: 2; }
  .elenco { order: 3; }
  .feed   { order: 4; }

  .situation { grid-template-columns: 1fr 1fr; }
  .sit-cell:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--board-line); }
  .sit-cell:nth-child(2) { border-left: 0; }
  .sit-cell:nth-child(4) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--board-line); }

  .wrap { padding: 14px 12px calc(var(--bar-h) + 26px); }
  .picker-head { padding: 30px 16px 22px; }
  .picker-body { padding: 0 16px 48px; }
  .club-grid { grid-template-columns: 1fr; }

  .wide { display: none; }
  .narrow { display: inline; }

  .sit-big { font-size: 27px; }
  .topbar-in { padding: 10px 14px; gap: 10px; }
  .topbar-week { font-size: 11.5px; letter-spacing: 0.09em; }
  /* "Voltar" and "Trocar de clube" are the way off a screen; 28px of height is not a thumb target. */
  .linkbtn { padding: 5px 12px; min-height: 40px; font-size: 11.5px; }

  .actionbar-in { padding: 9px 12px; }
  .actionbar-week { font-size: 11px; }
  .actionbar-week b { font-size: 14px; }
  .advance { padding: 13px 16px; font-size: 14px; }

  .feed .panel-body { max-height: 480px; }
  tbody td { padding: 7px 6px; font-size: 13.5px; }
  thead th { padding: 8px 6px; }
  .jogo { padding: 7px 12px; font-size: 12.5px; grid-template-columns: 1fr 54px 1fr; }
  .item { padding: 10px 12px; }
  .meujogo { padding: 13px 12px 14px; }
}

@media (max-width: 380px) {
  .wordmark.small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Escalação and Ficha do jogador.

   Same clipboard as the first screen: green for the chrome and for the grass, white plates for
   anything with numbers on it, and the yellow spent only on the one primary action. Both screens
   are built to be worked at arm's length on a phone with a thumb, so every tap target is a real
   button of at least 40px and nothing depends on hover.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Secondary button ─────────────────────────────────────────────────────────
   Used by "Corrigir escalação", "Copiar este XI", the exit question and the Escalação entry in
   the home action bar. Quiet on purpose: there is one primary action per screen and this is not
   it. */

.secbtn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink);
  font-family: var(--font-cond); font-weight: 700;
  font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease;
}
.secbtn:hover { background: var(--surface-2); border-color: var(--neutro); }
.secbtn:active { transform: translateY(1px); }
.secbtn.perigo { color: var(--cai-txt); border-color: var(--bad-line); }
.secbtn.perigo:hover { background: var(--bad-bg); }
/* In an action bar the secondary sits beside the yellow, so it matches its height. */
.secbtn.big { padding: 13px 18px; min-height: 48px; font-size: 14px; }

.perigo { color: var(--cai-txt); }
.barra-acoes { display: inline-flex; gap: 8px; margin-left: 10px; vertical-align: middle; }

/* ── Segmented control (formation, the four dials) ────────────────────────── */

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg-b {
  padding: 8px 12px; min-height: 40px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--ink-2);
  font-family: var(--font-cond); font-weight: 600;
  font-size: 13px; letter-spacing: 0.06em;
  cursor: pointer;
}
.seg-b:hover { background: var(--surface-2); }
.seg-b.on {
  background: var(--board); border-color: var(--board); color: var(--on-board);
}
.seg.pequeno .seg-b { padding: 5px 8px; min-height: 30px; font-size: 12px; letter-spacing: 0.03em; }

/* ── The "i" that opens a man's card ──────────────────────────────────────── */

.ficha-btn {
  position: relative;
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--ink-3);
  font-family: var(--font-cond); font-weight: 700; font-size: 13px; line-height: 1;
  cursor: pointer;
}
/* The circle is small because it sits in the corner of a card; the thing a thumb hits is not. These
   push every "i" out to a 40px hit area without changing a pixel of what is drawn, so the "i" and
   the card behind it stop being a coin toss. */
.ficha-btn::after { content: ""; position: absolute; inset: -7px; }        /* 26 + 14 = 40 */
.chip .ficha-btn::after { inset: -9px; }                                   /* 22 + 18 = 40 */
/* Asymmetric on the pitch: the card is only 53px wide at 320px, so the extra area grows inwards
   (down and left) instead of out past the card edge into the next card's gap. */
.vaga .ficha-btn::after { inset: -4px -4px -14px -14px; }                   /* 22 + 18 = 40 */
/* In the inbox effect line the chips sit inside flowing text: at 375px the wrapped lines are 26px
   apart, so the 40px pads of two chips overlap by 14px vertically. Where two of them also line up
   horizontally, the lower one — later in the DOM, so painted over — takes the bottom 7px of the
   circle above it, and a tap on one boy silently opens the next boy's card. Sideways only here:
   there is slack left and right of a chip in running text and none above or below. */
.entrada-efeito .ficha-btn::after { inset: 0 -7px; }
.ficha-btn:hover { background: var(--board); border-color: var(--board); color: var(--on-board); }
td.t-ficha { width: 34px; padding-right: 8px; }

/* ── Condition bar ────────────────────────────────────────────────────────── */

.cbar, .bar {
  display: block; width: 100%; height: 4px;
  border-radius: 999px; background: var(--track); overflow: hidden;
}
.cbar i, .bar i { display: block; height: 100%; border-radius: 999px; background: var(--neutro); }
.cbar.ok i, .bar.ok i { background: var(--sobe); }
.cbar.mid i, .bar.mid i { background: var(--meter-mid); }
.cbar.low i, .bar.low i { background: var(--warn-strong); }
.cbar.bad i, .bar.bad i { background: var(--cai); }
.bar { height: 6px; background: var(--track); }

/* ── Panel padding, on this screen only ───────────────────────────────────────
   The home screen's panels hold tables and feed items, which carry their own padding and are meant
   to run edge to edge inside the plate. Nothing on the lineup screen does: the pitch, the warning
   boxes, the bench chips, the dials and every explanatory paragraph were touching the 1px border.
   Scoped to #lineup so the first screen — the one he has already used — is untouched. */

#lineup .panel-body { padding: 14px 16px; }
/* ── The match this lineup is for ─────────────────────────────────────────── */

#lineup .alvo-panel .panel-body { padding: 0; }

.alvo-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-soft); }
.alvo-tab {
  flex: 1 1 0; min-width: 0;
  padding: 12px 10px;
  border: 0; border-bottom: 3px solid transparent;
  background: var(--surface-1); color: var(--ink-3);
  font-family: var(--font-cond); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase;
  cursor: pointer;
}
.alvo-tab.on { background: var(--card); color: var(--ink); border-bottom-color: var(--amarelo); }
.ponto {
  display: inline-block; width: 6px; height: 6px; margin-left: 5px;
  border-radius: 50%; background: var(--amarelo);
}
/* The inbox's unread dot (README §5: "ponto de 7px antes do título"), reusing this badge instead
   of a whole new dot component — just flipped from after-with-margin-left to
   before-with-margin-right and bumped 6px to the spec's 7px. Higher specificity than `.ponto`
   alone, so it wins regardless of source order. */
.ponto.antes { margin-left: 0; margin-right: 7px; width: 7px; height: 7px; vertical-align: 1px; }

.alvo { padding: 16px 18px 18px; }
.alvo-label {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.alvo-jogo {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  margin-top: 8px;
}
.alvo-jogo > span:first-child { text-align: right; }
.alvo-eu, .alvo-rival {
  font-family: var(--font-cond); font-size: 20px; font-weight: 700; letter-spacing: 0.02em;
}
.alvo-eu { color: var(--ink); }
.alvo-rival { color: var(--ink-3); font-weight: 600; }
.alvo-x { color: var(--ink-3); font-size: 14px; }
.alvo-onde {
  margin-top: 6px;
  font-family: var(--font-cond); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
}
.alvo .secbtn { margin-top: 12px; }
.alvo-nota { margin: 0; padding: 0 18px 16px; font-size: 13px; color: var(--ink-2); }
.alvo-vazio { padding: 16px 18px 18px; }
.alvo-vazio p { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); max-width: 60ch; }

/* ── The pitch ────────────────────────────────────────────────────────────── */

.campo {
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px 9px;
  border-radius: 9px;
  /* Mown stripes, faint enough to read white cards against. */
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 26px, rgba(255, 255, 255, 0) 26px 52px),
    linear-gradient(180deg, var(--board-3) 0%, var(--board-4) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.campo .linha { display: flex; justify-content: center; gap: 7px; }
.campo .linha .vaga { flex: 1 1 0; min-width: 0; max-width: calc((100% - 4 * 7px) / 5); }

.vaga { position: relative; min-width: 0; }
.vaga-body, .vaga.livre {
  width: 100%; min-height: 74px;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  padding: 7px 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 7px;
  background: var(--vaga); color: var(--ink);
  text-align: left; cursor: pointer;
  transition: box-shadow 120ms ease, transform 90ms ease;
}
.vaga-body:hover { background: var(--vaga-hover); }
.vaga-body:active { transform: translateY(1px); }
.vaga.sel .vaga-body, .vaga.livre.sel {
  box-shadow: 0 0 0 3px var(--amarelo);
  border-color: var(--amarelo);
}
.vaga.livre {
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12); color: var(--on-board);
  border-style: dashed;
}
.vaga-pos {
  font-family: var(--font-cond); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.vaga.livre .vaga-pos { color: rgba(255, 255, 255, 0.85); }
.vaga-vazia { font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); }
.vaga-nome {
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.vaga-num {
  display: flex; align-items: center; gap: 4px;
  margin-top: auto;
  font-family: var(--font-cond); font-weight: 700; font-size: 15px;
}
.vaga-num i, .lrow-num i { font-style: normal; font-size: 11px; line-height: 1; }
.fora { color: var(--info-ink); }
.cansado { color: var(--cai-txt); font-weight: 700; }
.forcado { color: var(--warn-ink); }

.vaga .ficha-btn {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; font-size: 11px;
  background: var(--vaga-hover); border-color: var(--line);
}

.campo-acoes {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}
.campo-dica { font-size: 13px; color: var(--ink-2); }

/* ── The bench ────────────────────────────────────────────────────────────── */

.banco { display: grid; gap: 7px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.chip { position: relative; min-width: 0; }
.chip-body, .chip.livre {
  width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px;
  padding: 8px 30px 8px 9px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); text-align: left; cursor: pointer;
}
.chip-body:hover { background: var(--surface-2); }
.chip.sel .chip-body, .chip.livre.sel { box-shadow: 0 0 0 3px var(--amarelo); border-color: var(--amarelo); }
.chip.livre {
  grid-template-columns: 1fr; justify-items: center;
  border-style: dashed; color: var(--ink-3);
}
.chip-vazio { font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.chip-nome {
  min-width: 0; font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-num { font-family: var(--font-cond); font-weight: 700; font-size: 14px; }
.chip-body .cbar { grid-column: 1 / -1; }
.chip .ficha-btn { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 22px; height: 22px; font-size: 11px; }

/* ── Squad list on the lineup screen ──────────────────────────────────────── */

.lista-nota, .nota-in {
  margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--ink-2);
}
.nota-in { margin: 10px 0 0; color: var(--ink-3); }
/* A group heading on the left and a column heading over the number on the right — the same job the
   home table's <th>Geral</th> does, because the pitch prints a different number for the same man.
   The 32px is the ficha button (26) plus the row gap (6), which sit outside `.lrow-body`. */
.lgrupo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 14px 0 6px;
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.lgrupo:first-child { margin-top: 0; }
.lgrupo-col { flex: 0 0 auto; padding-right: 32px; color: var(--ink-3); }

.lrow { position: relative; display: flex; align-items: center; gap: 6px; }
.lrow + .lrow { margin-top: 4px; }
.lrow-body {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: 20px 42px minmax(0, 1fr) auto 30px;
  align-items: center; gap: 8px;
  padding: 8px 9px; min-height: 42px;
  border: 1px solid transparent; border-radius: 8px;
  background: var(--surface-1); text-align: left; cursor: pointer;
}
.lrow-body:hover { background: var(--surface-3); }
.lrow.sel .lrow-body { box-shadow: 0 0 0 3px var(--amarelo); background: var(--amarelo-bg); }
/* A flex row, not the ellipsizing box itself — the calendar's own answer to this collision
   (`.cal-clube` flex, `.cal-nome` ellipsis, `.cal-classico` pinned). The cell is minmax(0, 1fr) and
   measures 88-113px at 375px, depending on how wide the role pill next to it is, against a name of
   about 100px and a 75px "pendurado": with the ellipsis on the cell itself the badge drew zero
   pixels and the row read "Gabriel Rocha 27…" until about 560px wide. `wrap` is the part the
   calendar does not need. Pinned but unwrapped, the badge takes its 75px first and leaves the name
   about 30px — "Gab…" — which is the same badge-versus-name trade, just paid by the other one.
   Wrapping drops the badge under the name on a phone, adding one line to that row and only for a
   man who is actually pendurado, and keeps it inline wherever the cell is wide enough — with no
   breakpoint to keep in step. */
.lrow-nome { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; font-size: 13.5px; }
.lrow-nome > .mk { flex: 0 0 auto; }
.lrow-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A selected row paints itself --amarelo-bg, the same token the badge uses, so the pill dissolves
   into the row it is meant to be marking. --card is the raised surface in both themes. */
.lrow.sel .mk.amarelo { background: var(--card); }
.lrow-idade { margin-left: 6px; color: var(--ink-3); font-size: 12px; }
.lrow-num { font-family: var(--font-cond); font-weight: 700; font-size: 15px; text-align: right; }
.lrow-body .cbar { grid-column: 1 / -1; }

.papel {
  justify-self: end;
  padding: 2px 7px; border-radius: 999px;
  font-family: var(--font-cond); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.papel.tit { background: var(--ok-bg-2); color: var(--ok-ink); }
.papel.ban { background: var(--warn-bg); color: var(--warn-ink); }
.papel.fora { background: var(--surface-4); color: var(--ink-3); }

/* ── Warnings ─────────────────────────────────────────────────────────────── */

.aviso {
  padding: 10px 12px; border-radius: 8px;
  border-left: var(--mark) solid var(--neutro);
  background: var(--surface-1);
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.aviso + .aviso { margin-top: 7px; }
.aviso b { color: var(--ink); }
.aviso.ruim { border-left-color: var(--cai); background: var(--bad-bg); }
.aviso.atencao { border-left-color: var(--warn-strong); background: var(--warn-bg); }
.aviso.ok { border-left-color: var(--sobe); background: var(--ok-bg); }

/* ── Out of this match ────────────────────────────────────────────────────── */

.frow {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 26px; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.frow:last-child { border-bottom: 0; }
.frow-nome { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow-why { font-size: 12px; color: var(--ink-3); text-align: right; }

/* ── The day's form ───────────────────────────────────────────────────────── */

.forma-total {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 14px; border-radius: 8px;
  background: var(--surface-3);
}
.forma-total.ok { background: var(--ok-bg); }
.forma-total.bad { background: var(--bad-bg); }
.forma-n { font-family: var(--font-cond); font-size: 30px; font-weight: 700; line-height: 1; }
.forma-total.ok .forma-n { color: var(--sobe-txt); }
.forma-total.bad .forma-n { color: var(--cai-txt); }
.forma-l {
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-2);
}

.parcelas { margin-top: 10px; display: grid; gap: 1px; background: var(--line-soft); border-radius: 8px; overflow: hidden; }
.parcela {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--card);
}
.parcela-l { font-size: 13px; color: var(--ink-2); }
.parcela-v { font-family: var(--font-cond); font-weight: 700; font-size: 14px; }
.parcela.mais .parcela-v { color: var(--sobe-txt); }
.parcela.menos .parcela-v { color: var(--cai-txt); }
.parcela.zero .parcela-v { color: var(--ink-3); }

.setores { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.setor {
  padding: 10px 6px; border-radius: 8px; text-align: center;
  background: var(--board); color: var(--on-board);
}
.setor b { display: block; font-family: var(--font-cond); font-size: 20px; font-weight: 700; }
.setor span {
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--board-dim);
}

/* ── The four dials ───────────────────────────────────────────────────────── */

.botao + .botao { margin-top: 12px; }
.botao-l {
  margin-bottom: 6px;
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ── The lineup screen's two columns ──────────────────────────────────────── */

.lin-cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
/* A DESKTOP-ONLY ceiling, and not a cap on the data: every one of the squad's men is rendered and
   reachable, and the panel head prints the count. It exists so the pitch stays on screen while he
   scrolls the list to find a replacement — scrolling 1200px away from the thing you are editing is
   worse than a scrollbar. Windows/macOS draw a real scrollbar in this box, so it is discoverable.
   The phone has no such ceiling: there the scrollbar is a zero-width overlay and the pitch has
   already scrolled away, so the box would only hide two thirds of the squad behind nothing. */
.p-elenco .panel-body { max-height: 560px; overflow-y: auto; }

/* ── Whose eleven played, on the home screen ──────────────────────────────── */

.meujogo-xi {
  margin-top: 9px;
  font-family: var(--font-cond); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.meujogo-xi.sua { color: var(--sobe-txt); }
.meujogo-xi.auto { color: var(--ink-3); }

/* ══ Ficha do jogador ═══════════════════════════════════════════════════════ */

body.travado { overflow: hidden; }

.ficha {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ficha-backdrop { position: absolute; inset: 0; background: rgba(10, 12, 13, 0.62); }
.ficha-card {
  position: relative;
  width: 100%; max-width: 560px; max-height: min(88vh, 820px);
  display: flex; flex-direction: column;
  background: var(--card); border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(10, 12, 13, 0.6);
  overflow: hidden;
}
.ficha-x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: var(--on-board);
  font-size: 20px; line-height: 1; cursor: pointer;
}
/* Same trick as the "i": drawn small so it does not shout over the man's name, hit at 40px. It
   grows down and left, into the card, never up into the sheet's rounded top edge. */
.ficha-x::after { content: ""; position: absolute; inset: -5px -5px -15px -15px; }
.ficha-x:hover { background: rgba(255, 255, 255, 0.26); }

.ficha-head { flex: 0 0 auto; padding: 16px 18px 14px; background: var(--board); color: var(--on-board); }
.ficha-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ficha-nome { min-width: 0; }
.ficha-pos {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--board-dim);
}
.ficha-nome h2 { margin-top: 2px; font-size: 22px; line-height: 1.15; }
.ficha-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.ficha-geral { flex: 0 0 auto; padding-top: 26px; text-align: center; }
.ficha-geral-n { font-family: var(--font-cond); font-size: 38px; font-weight: 700; line-height: 1; color: var(--amarelo); }
.ficha-geral-l {
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--board-dim);
}

.tag {
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-cond); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14); color: var(--on-board);
}
.tag.idolo { background: var(--amarelo); color: var(--amarelo-ink); }
.tag.cria { background: var(--info-bg-2); color: var(--info-ink); }
.tag.lesao { background: var(--bad-bg-2); color: var(--cai-txt); }
.tag.susp { background: var(--warn-bg); color: var(--warn-ink); }

.ficha-medidores { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.med-l {
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--board-dim); margin-bottom: 5px;
}
.med .bar { background: rgba(255, 255, 255, 0.16); }
.med-v { margin-top: 5px; font-family: var(--font-cond); font-size: 13px; letter-spacing: 0.05em; }

.ficha-tabbar { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--line); background: var(--surface-1); }
.ficha-tab {
  flex: 1 1 0;
  padding: 13px 8px; min-height: 46px;
  border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--ink-3);
  font-family: var(--font-cond); font-weight: 700;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
}
.ficha-tab.on { color: var(--ink); border-bottom-color: var(--amarelo); background: var(--card); }

.ficha-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 18px 18px; }
.ficha-sec { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.ficha-sec:last-child { border-bottom: 0; }
.ficha-sec h3 {
  margin-bottom: 10px;
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3);
}

.ficha-rodape { flex: 0 0 auto; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-1); }
.ficha-rodape:empty { display: none; }
.ficha-rodape .advance { width: 100%; justify-content: center; }

/* Ficha · Jogo */

.attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.attr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; }
.attr-l { font-size: 13px; color: var(--ink-2); }
.attr-v { font-family: var(--font-cond); font-weight: 700; font-size: 14px; }
.attr .bar { grid-column: 1 / -1; }

.fits { display: flex; flex-wrap: wrap; gap: 6px; }
.fit {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 9px; border-radius: 7px;
  background: var(--surface-4); color: var(--ink-2);
  font-family: var(--font-cond); font-weight: 700; font-size: 14px;
}
.fit b { font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-3); }
.fit.natural { background: var(--board); color: var(--on-board); }
.fit.natural b { color: var(--amarelo); }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border-radius: 8px; overflow: hidden; }
.stat-grid > div { padding: 10px 8px; background: var(--card); text-align: center; }
.stat-grid b { display: block; font-family: var(--font-cond); font-size: 19px; font-weight: 700; }
.stat-grid span { font-size: 11.5px; color: var(--ink-3); }

.marco { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; }
.marco + .marco { border-top: 1px solid var(--line-soft); }
.marco-l {
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
}
.marco-v { font-size: 13.5px; color: var(--ink); text-align: right; }

/* Ficha · Pessoa */

.pers { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pers b { color: var(--ink); }

.prioridades { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.prioridades li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.prioridades li:last-child { border-bottom: 0; }
.prioridades li.oculta { color: var(--ink-3); }
.ord {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-4); color: var(--ink-3);
  font-family: var(--font-cond); font-weight: 700; font-size: 12px;
}

.coracao { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; align-items: baseline; }
.cor-l {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.cor-v { font-size: 14px; }

.memoria { margin: 0; padding: 0; list-style: none; }
.memoria li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.memoria li:last-child { border-bottom: 0; }
.quando {
  display: inline-block; margin-right: 8px;
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Ficha · Negócio */

.ofertas { margin: 0; padding: 0; list-style: none; }
.ofertas li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.ofertas li:last-child { border-bottom: 0; }
.oferta-mais { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }

.alerta {
  margin: 0; padding: 10px 12px; border-radius: 8px;
  border-left: var(--mark) solid var(--warn-strong); background: var(--warn-bg);
  font-size: 13.5px; color: var(--ink-2);
}
.vazio-in { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }

/* ── Phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* `.stack { display: contents }` from the first screen dissolves .lin-a/.lin-b too, so the
     panels become direct children of the column and `order` decides what a thumb reaches first:
     the pitch, then the men he picks from, then everything that only explains. */
  .lin-cols { display: flex; flex-direction: column; gap: 16px; }
  .p-campo  { order: 1; }
  .p-banco  { order: 2; }
  .p-elenco { order: 3; }
  .p-avisos { order: 4; }
  .p-forma  { order: 5; }
  .p-botoes { order: 6; }
  .p-fora   { order: 7; }

  .campo { padding: 10px 6px; gap: 5px; }
  .campo .linha { gap: 5px; }
  .campo .linha .vaga { max-width: calc((100% - 4 * 5px) / 5); }
  .vaga-body, .vaga.livre { min-height: 66px; padding: 6px 5px 7px; }
  /* Two lines hold all 1746 names in the world at desktop width, but not in a 57px card. Measured
     in a 5-across row: at 375px 22 names overflow two lines and 1 overflows three; at 320px, 172
     and 8. Three lines is where the loss stops being something he meets. When one still clips, the
     clamp marks it with an ellipsis and the "i" opens the card with his full name on it. */
  .vaga-nome { font-size: 11px; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
  .vaga-num { font-size: 13px; }
  .vaga-pos { font-size: 9.5px; letter-spacing: 0.08em; }
  /* Was 20px — under every thumb-target floor, in the corner a thumb reaches first, so a tap there
     was a coin toss between opening his card and selecting the slot. 24px drawn, 40px hit. */
  .vaga .ficha-btn { width: 24px; height: 24px; font-size: 11px; top: 3px; right: 3px; }
  .vaga .ficha-btn::after { inset: -3px -3px -13px -13px; }                /* 24 + 16 = 40 */
  /* The formation picker is tapped as often as anything on this screen, so its buttons are real
     40px targets — and at that size six of them no longer fit beside the heading. They get their
     own full-width row underneath it, six even columns, instead of a ragged wrap. */
  .seg.pequeno .seg-b { min-height: 40px; padding: 5px 2px; font-size: 11.5px; letter-spacing: 0; }
  #lineup .p-campo .panel-head { flex-wrap: wrap; row-gap: 9px; }
  #lineup .p-campo .panel-note { flex: 1 0 100%; text-align: left; }
  #lineup .p-campo .seg.pequeno { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }

  #lineup .panel-body { padding: 12px 12px 14px; }
  /* The pitch is a full-bleed graphic with its own inner padding, and on a phone every pixel it
     gives away is a pixel off eleven already-narrow name cards. Plate padding stays vertical. */
  #lineup .p-campo .panel-body { padding-left: 5px; padding-right: 5px; }

  .banco { grid-template-columns: 1fr 1fr; }
  .setores { gap: 5px; }
  .setor b { font-size: 17px; }
  .alvo-eu, .alvo-rival { font-size: 16px; }
  .attrs { grid-template-columns: 1fr; }
  /* No ceiling on the squad list here: a phone draws a zero-width overlay scrollbar, so 420px of
     box hid 1300px of squad behind no visual indication at all while the page scrolled past it. */
  .p-elenco .panel-body { max-height: none; overflow-y: visible; }

  /* The card becomes a sheet: it comes up from the bottom edge, where the thumb already is. */
  .ficha { padding: 0; align-items: flex-end; }
  .ficha-card { max-width: none; max-height: 94vh; border-radius: 14px 14px 0 0; }
  .ficha-head { padding: 14px 14px 12px; }
  .ficha-nome h2 { font-size: 19px; }
  .ficha-geral-n { font-size: 32px; }
  .ficha-scroll { padding: 4px 14px 16px; }
  .ficha-rodape { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }

  .secbtn.big { padding: 11px 12px; font-size: 12.5px; min-height: 44px; }
  .barra-acoes { display: flex; margin: 6px 0 0; }
}

/* ── Narrow phone: the action bar becomes two rows ───────────────────────────
   A week label and two buttons do not fit on one 375px line — squeezed onto one, the label wraps
   into a four-line column and the bar swallows the page. Two rows, and `--bar-h` follows so the
   content above keeps clearing the fixed bar. */

@media (max-width: 560px) {
  :root { --bar-h: 96px; }
  /* The exit question adds a second row of buttons and the bar grows to ~134px, which left the last
     panel 11px underneath it — at exactly the moment he is deciding whether to throw work away.
     Set on #lineup, not on .actionbar, because `.wrap` reads `--bar-h` for its bottom padding. */
  #lineup.perguntando { --bar-h: 140px; }
  .actionbar-in { flex-wrap: wrap; gap: 8px 10px; }
  .actionbar-week { flex: 1 0 100%; }
  /* Full width now, so the week and the round fit on one line instead of stacking. */
  .actionbar-week b { display: inline-block; margin-right: 10px; }
  .secbtn.big { flex: 0 0 auto; }
  .advance { flex: 1 1 auto; justify-content: center; }
  .barra-acoes { flex: 1 0 100%; margin: 0; }
  .barra-acoes .secbtn { flex: 1 1 0; justify-content: center; }
}

/* A reserve's name is the thing you have to read before you bring him on, and two chips per row
   on a 375px phone clips it to "Agustín …". One column, full name. */
@media (max-width: 560px) {
  .banco { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  /* A 5-man defensive line on a 320px screen is 47px of card. Everything the pitch can give back
     goes to the name, which is the only thing on the card he cannot work out from the picture. */
  #lineup .p-campo .panel-body { padding-left: 2px; padding-right: 2px; }
  .campo { padding: 10px 3px; }
  .campo .linha { gap: 4px; }
  .campo .linha .vaga { max-width: calc((100% - 4 * 4px) / 5); }
  .vaga-body, .vaga.livre { padding: 6px 3px 7px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Partida and Pós-jogo.

   Same clipboard, one new rule: on the match screen the score never leaves the top of the glass
   and the bar never leaves the bottom, because the whole screen is one long piece of running text
   and he has to be able to read it without losing the score. So this screen is a flex column the
   height of the viewport, with the narration as the only thing that scrolls — on a phone AND on a
   desktop, which is also what stops a thumb from having to chase a floating scoreboard.

   The ticker is one line. Never two teams side by side (spec §14).
   ══════════════════════════════════════════════════════════════════════════════ */

.partida {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  background: var(--chalk);
}
.partida > .topbar { flex: 0 0 auto; position: static; }

/* ── The score, pinned ────────────────────────────────────────────────────── */

.scoreboard { flex: 0 0 auto; background: var(--board); color: var(--on-board); }
.sb-in { max-width: 1320px; margin: 0 auto; padding: 12px 20px 14px; }
.sb-onde {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--board-dim); text-align: center; margin-bottom: 8px;
}
.sb-linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.sb-time { min-width: 0; text-align: right; }
.sb-time.dir { text-align: left; }
.sb-sigla {
  display: block;
  font-family: var(--font-cond); font-weight: 700; font-size: clamp(20px, 5vw, 26px); line-height: 1;
  letter-spacing: 0.02em;
}
.sb-time.eu .sb-sigla { color: var(--amarelo); }
.sb-nome {
  display: block; margin-top: 3px;
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--board-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-gols {
  font-family: var(--font-cond); font-weight: 700; font-size: clamp(34px, 9vw, 46px); line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sb-gols i { font-style: normal; color: rgba(255, 255, 255, 0.32); margin: 0 6px; font-size: 0.6em; }
.sb-min {
  margin-top: 8px; text-align: center;
  font-family: var(--font-cond); font-weight: 700;
  font-size: 13px; letter-spacing: 0.18em; color: var(--amarelo);
}
.sb-min.correndo::after {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amarelo); margin-left: 8px; vertical-align: 2px;
  animation: pulsa 1s ease-in-out infinite;
}
@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* ── The ticker: one line, always ─────────────────────────────────────────── */

.ticker {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  background: var(--board-2); color: var(--on-board);
  border-top: 1px solid var(--board-line);
  padding: 7px 20px;
  min-width: 0;
}
.tk-label {
  flex: 0 0 auto;
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--board-dim);
}
.tk-roll {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 18px; align-items: center;
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
/* Windows draws a light system scrollbar here, and on the dark board it reads as a stray grey
   element across the whole ticker rather than as something you can drag. */
.tk-roll::-webkit-scrollbar { height: 4px; }
.tk-roll::-webkit-scrollbar-track { background: transparent; }
.tk-roll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 999px; }
.tk {
  flex: 0 0 auto;
  font-family: var(--font-cond); font-size: 12.5px; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.82);
}
.tk b { font-weight: 700; color: var(--on-board); }
.tk i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--amarelo); margin: 0 4px; }
.tk u { text-decoration: none; color: var(--board-dim); font-size: 10px; margin-left: 5px; letter-spacing: 0.1em; }

/* The door from the urgent list to the whole squad, on Contratos. */
.ct-todos { padding: 0 0 10px; }

/* ── The table picker ────────────────────────────────────────────────────── */
/* Eleven tables in the world and he could only ever see one. It sits in the panel head, small,
   because it is a glance at a friend's division and not a screen of its own. */

.tab-sel {
  margin-left: auto;
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-2); background: var(--surface-3);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 6px; max-width: 46%;
}
.tab-sel:hover { border-color: var(--ink-4); }
.tab-sel:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 1px; }
/* The note follows the picker, so it stops being the thing pushed to the right. */
.tabela .panel-head .panel-note { margin-left: 8px; }
@media (max-width: 760px) { .tab-sel { max-width: 40%; font-size: 11.5px; } }

/* ── The decision window ─────────────────────────────────────────────────── */
/* Fifteen seconds with the match stopped. It has to read as a clock running out, not as a badge. */

.gaveta-janela {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 12px; border-radius: 8px;
  background: var(--warn-bg-soft); border: 1px solid var(--warn-line);
  font-family: var(--font-cond); font-size: 12.5px; color: var(--warn-ink);
}
.gaveta-janela b {
  font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--warn-strong);
}
.gaveta-janela span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaveta-janela.urgente {
  background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink);
}
.gaveta-janela.urgente b { color: var(--cai); }
@media (max-width: 760px) {
  /* On a phone the sentence and the clock cannot share a line with the title. The clock is the
     part that cannot be dropped, so the sentence goes. */
  .gaveta-janela span { display: none; }
}
/* ── Noite de jogo ───────────────────────────────────────────────────────── */
/* The round on its own screen. Same board, same list as the panel inside Partida — only the top
   bar and the owner of the clock are different. */

.noite {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  background: var(--board); color: var(--on-board);
}
.noite > .topbar { flex: 0 0 auto; position: static; }
.noite .rd-lista { flex: 1 1 auto; min-height: 0; }
.nt-dica {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-cond); font-size: 12.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis;
}
/* The door, on the home screen’s week panel. */
.ver-rodada {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
}

/* ── A rodada: the whole round at once ───────────────────────────────────── */
/* It stands where the running text stands, on the same board, and it is the only thing on screen
   while it is open. Twenty scores and a paragraph of commentary are two different jobs for the
   eye, and a phone has room for exactly one of them. */

.rodada {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--board); color: var(--on-board);
}
.rd-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 20px;
  background: var(--board-2);
  border-bottom: 1px solid var(--board-line);
}
.rd-min {
  font-family: var(--font-cond); font-weight: 700; font-size: 17px;
  font-variant-numeric: tabular-nums; color: var(--amarelo);
  min-width: 46px;
}
/* The bar is the round’s own clock, not a loading spinner: it fills as the ninety minutes go by. */
.rd-barra {
  flex: 1 1 auto; height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden; position: relative;
}
.rd-barra::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--andamento, 0%);
  background: var(--amarelo);
  transition: width 240ms linear;
}
.rd-nota {
  flex: 0 0 auto;
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--board-dim);
}

.rd-lista {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  max-width: 1320px; width: 100%; margin: 0 auto;
  padding: 6px 20px 24px;
}
.rd-grupo { margin-top: 14px; }
.rd-grupo:first-child { margin-top: 4px; }
.rd-titulo {
  position: sticky; top: 0; z-index: 2;
  margin: 0 0 4px; padding: 7px 0 5px;
  background: var(--board);
  font-family: var(--font-cond); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--board-dim);
}
.rd-grupo.meu .rd-titulo { color: var(--amarelo); }

/* One match. Home is right-aligned into the score, away is left-aligned out of it, so the column
   of scores stays straight down the middle however long the names are. */
.rd-jogo {
  display: grid;
  grid-template-columns: 1fr auto 1fr minmax(0, 1.15fr);
  align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 7px;
  cursor: pointer;
}
.rd-jogo:hover { background: rgba(255, 255, 255, 0.05); }
.rd-jogo:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 1px; }
.rd-jogo.meu {
  background: rgba(245, 185, 21, 0.12);
  box-shadow: inset 3px 0 0 var(--amarelo);
}
.rd-lado {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.rd-lado.casa { justify-content: flex-end; }
.rd-nome {
  font-family: var(--font-cond); font-size: 13.5px; letter-spacing: 0.04em;
  color: var(--on-board-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-jogo.meu .rd-nome { color: var(--on-board); font-weight: 700; }
.rd-placar {
  font-family: var(--font-cond); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--on-board);
  white-space: nowrap; text-align: center; min-width: 62px;
}
.rd-placar i { font-style: normal; color: var(--board-dim); margin: 0 4px; font-weight: 400; }
.rd-placar u {
  text-decoration: none; color: var(--board-dim);
  font-size: 9.5px; letter-spacing: 0.1em; margin-left: 5px;
}

/* The events, on the same line as the match they belong to — which is the whole idea. One line by
   default; clicking the match opens it up to every goal it had. */
.rd-eventos {
  min-width: 0; display: flex; gap: 10px; flex-wrap: nowrap;
  overflow: hidden;
  /* A goal cut in half mid-name reads as a broken screen. The fade says "there is more here",
     and clicking the match opens the rest. */
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.rd-jogo.destaque .rd-eventos { flex-wrap: wrap; overflow: visible; }
.rd-ev {
  flex: 0 0 auto;
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.04em;
  white-space: nowrap;
}
.rd-ev.gol { color: var(--amarelo); }
.rd-ev.vermelho { color: var(--bad-bright); }
.rd-ev i { font-style: normal; color: var(--board-dim); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .rd-head { padding: 8px 14px; gap: 10px; }
  /* The note is the honest label, but on a phone it costs the bar half its width. The bar says the
     same thing without words, so the sentence goes and the bar stays. */
  .rd-nota { display: none; }
  .rd-lista { padding: 4px 12px 20px; }
  /* Events drop to their own line: three columns for the match, the fourth spanning under it. */
  .rd-jogo { grid-template-columns: 1fr auto 1fr; gap: 6px 8px; padding: 6px; }
  .rd-eventos { grid-column: 1 / -1; flex-wrap: wrap; }
  .rd-eventos:empty { display: none; }
  .rd-nome { font-size: 12.5px; }
}
/* ── The one thing that must shout: ten men ───────────────────────────────── */

.partida-aviso {
  flex: 0 0 auto;
  background: var(--bad-bg); color: var(--bad-ink);
  border-bottom: 1px solid var(--bad-line);
  padding: 9px 20px; font-size: 13.5px; line-height: 1.35;
}

/* ── The running text ─────────────────────────────────────────────────────── */

.narracao-wrap { flex: 1 1 auto; min-height: 0; position: relative; }
.narracao {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  max-width: 1320px; margin: 0 auto;
  padding: 14px 20px 22px;
}
.nl {
  padding: 7px 0 7px 14px;
  border-left: var(--mark) solid var(--line);
  font-size: 14.5px; line-height: 1.42;
  color: var(--ink-2);
}
.nl + .nl { margin-top: 2px; }
.nl.marco {
  border-left-color: var(--board);
  font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 13px; color: var(--ink);
}
.nl.gol {
  border-left-color: var(--sobe); background: var(--ok-bg);
  font-weight: 700; font-size: 16px; color: var(--ok-ink);
}
.nl.gol-contra { border-left-color: var(--cai); background: var(--bad-bg); font-weight: 700; color: var(--bad-ink); }
.nl.vermelho { border-left-color: var(--cai); color: var(--cai-txt); font-weight: 700; }
.nl.amarelo { border-left-color: var(--warn-strong); }
/* The .cartao rectangle now leads the yellow-card narration line (web/live.js), same object
   the booking badge (.mk .cartao) already uses elsewhere — without a gap it sits flush
   against the first letter of the sentence. */
.nl.amarelo .cartao { margin-right: 6px; }
.nl.lesao { border-left-color: var(--warn-strong); }
.nl.troca { border-left-color: var(--neutro); color: var(--ink); }
.nl.perigo { border-left-color: var(--warn-strong); color: var(--ink); }
/* Something he decided did not happen. The pack's sentence cannot name the man, so the line has to
   be impossible to skim past. */
.nl.recusado {
  border-left-color: var(--warn-strong); background: var(--warn-bg);
  color: var(--warn-ink); font-weight: 700;
}

/* web/live.js paints the narration newest-first (spec §14 "Mais recente em cima") — the live edge
   is the TOP of the box, so the "jump back to live" chip sits and points where the edge is. */
.aovivo {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  border: 0; border-radius: 999px;
  background: var(--board); color: var(--on-board);
  padding: 9px 18px; min-height: 40px; cursor: pointer;
  font-family: var(--font-cond); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 6px 18px -8px rgba(16, 19, 20, 0.6);
}
.aovivo::after { content: " \2191"; }

/* ── The bar: the queue, the speed, the drawer, the primary ───────────────── */

.partida-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--chalk);
  border-top: 1px solid var(--line);
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
}
.pb-fila { flex: 1 1 220px; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pb-dica { font-size: 12.5px; color: var(--ink-3); }
.pb-vel { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.pb-vel .seg-b { min-width: 44px; justify-content: center; min-height: 44px; }

.fila {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 10px; border-radius: 999px;
  background: var(--amarelo-bg); border: 1px solid var(--warn-line); color: var(--amarelo-bg-ink);
  font-size: 12.5px; line-height: 1.2;
}
.fila b { font-family: var(--font-cond); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.fila-x {
  border: 0; background: none; cursor: pointer; color: var(--amarelo-bg-ink);
  font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.fila-x:hover { background: var(--hover-veil); }

/* The week button steps back to a plain plate whenever the yellow belongs to "Assistir". */
.advance.quieto {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
.advance.quieto:hover { background: var(--surface-2); border-color: var(--neutro); }

/* ── "Pausar e mudar" ─────────────────────────────────────────────────────── */

.gaveta { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; }
.gaveta-backdrop { position: absolute; inset: 0; background: rgba(10, 12, 13, 0.55); }
.gaveta-card {
  position: relative;
  width: 100%; max-width: 760px; margin: 0 auto;
  max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--chalk);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 40px -14px rgba(0, 0, 0, 0.6);
}
.gaveta-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; background: var(--board); color: var(--on-board); border-radius: 14px 14px 0 0;
}
.gaveta-head h2 {
  font-family: var(--font-cond); font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase;
}
.linkbtn.escuro { color: var(--on-board); border-color: rgba(255, 255, 255, 0.35); }
.gaveta-fila {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px 18px; background: var(--card); border-bottom: 1px solid var(--line);
  min-height: 46px;
}
.gaveta-scroll { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 4px; }
.gaveta-rodape {
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--chalk);
}
.gaveta-rodape .advance { width: 100%; justify-content: center; }

.gv-sec { margin-bottom: 18px; }
.gv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gv-head h3 {
  font-family: var(--font-cond); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
}
.gv-note {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3);
}
.gv-label {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3); margin: 10px 0 6px;
}
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.mrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 8px; row-gap: 5px;
  padding: 8px 10px; min-height: 46px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  cursor: pointer; text-align: left;
}
.mrow:hover { background: var(--surface-2); }
.mrow.sel { box-shadow: 0 0 0 3px var(--amarelo); border-color: var(--amarelo); }
.mrow-nome {
  font-family: var(--font-cond); font-weight: 700; font-size: 14px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mrow-num { font-family: var(--font-cond); font-weight: 700; font-size: 13px; color: var(--ink-2); }
.mrow .cbar { grid-column: 1 / -1; }

.mk {
  display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 4px;
  font-family: var(--font-cond); font-style: normal; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px;
}
.mk.gol { background: var(--sobe); color: var(--on-board); }
/* NOT `.mk.craque`: `.craque` is the card below, and its display:flex + 16px padding won
   the cascade and turned a five-letter badge into a yellow slab across the whole row. */
.mk.estrela { background: var(--amarelo); color: var(--amarelo-ink); }
/* The booking badge carries the card as an object. Without it the badge was a yellow-tinted word,
   which is exactly the thing the Yellow Rule exists to stop. */
.mk.amarelo { background: var(--amarelo-bg); color: var(--warn-ink); }
.mk .cartao { width: 7px; height: 9px; margin-right: 5px; }
.mk.vermelho { background: var(--bad-bg-2); color: var(--cai-txt); }
.mk.lesao { background: var(--warn-bg); color: var(--warn-ink); }

/* ── The open match on the home screen ────────────────────────────────────── */

.meujogo.vivo { background: linear-gradient(180deg, var(--ok-bg) 0%, var(--card) 100%); }
.meujogo-aberto {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 11px; font-size: 13px; color: var(--ink-2);
}
.meujogo-aberto.feito { color: var(--ink-3); }
.ponto-vivo {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sobe); flex: 0 0 auto;
  animation: pulsa 1.1s ease-in-out infinite;
}
.alvo-nota.trancado { color: var(--warn-ink); }

/* ── Pós-jogo ─────────────────────────────────────────────────────────────── */

.resultado .panel-body { padding: 18px 16px 16px; }
.res-placar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.res-time {
  min-width: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  font-family: var(--font-cond); font-weight: 700; font-size: clamp(17px, 3.6vw, 24px); line-height: 1.1;
  color: var(--ink-2);
}
.res-time b { min-width: 0; font-weight: inherit; text-align: right; }
.res-time .crest { flex: 0 0 auto; }
.res-time.dir { justify-content: flex-start; }
.res-time.dir b { text-align: left; }
@media (max-width: 420px) {
  /* At the narrowest width the badge and a long club name cannot share a line without one of them
     being cut; the badge is the faster read, so the name goes under it. */
  .res-time { flex-direction: column; gap: 6px; }
  .res-time b, .res-time.dir b { text-align: center; }
}
.res-time.eu { color: var(--ink); }
.res-gols {
  font-family: var(--font-cond); font-weight: 700; font-size: clamp(34px, 8vw, 46px); line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.res-gols i { font-style: normal; color: var(--ink-3); margin: 0 6px; font-size: 0.55em; }
.veredito.grande { font-size: 15px; letter-spacing: 0.2em; margin-top: 14px; }
.res-gols-lista {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--ink-3);
}
.gol-item { font-family: var(--font-cond); letter-spacing: 0.03em; }
.gol-item.eu { color: var(--ink); font-weight: 700; }
.gol-item i { font-style: normal; color: var(--ink-3); margin-left: 3px; }

.est {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center;
  column-gap: 10px; row-gap: 5px;
  padding: 9px 0;
}
.est + .est { border-top: 1px solid var(--line-soft); }
.est-n {
  font-family: var(--font-cond); font-weight: 700; font-size: 17px;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-3);
}
.est-n.esq { text-align: left; }
.est-n.eu { color: var(--ink); }
.est-l {
  text-align: center;
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3);
}
.est-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.est-bar i { display: block; height: 100%; background: var(--board); border-radius: 999px; }
/* Faltas and Cartões: having more of it is not winning it, so the bar drops the club green. */
.est-bar.fria i { background: var(--neutro); }

.craque { display: flex; align-items: center; gap: 14px; padding: 16px; }
.craque-nota {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 12px;
  background: var(--amarelo); color: var(--amarelo-ink);
  font-family: var(--font-cond); font-weight: 700; font-size: 24px;
}
.craque-id { min-width: 0; }
.craque-nome { font-family: var(--font-cond); font-weight: 700; font-size: 22px; line-height: 1.1; }
.craque-sub {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 3px;
}
.craque-feitos { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
/* The man-of-the-match row was tinted with the warning orange (--warn-bg-soft), which reads as
   "something's wrong here" on the one row that is the best news on the page. It is a positive
   verdict about a player, so it takes the positive-verdict tint (Regra 3). NOT --amarelo-bg: every
   row in this table is already the player's own club, so yellow here would mean "star", a fourth
   meaning the Regra do Amarelo does not grant it. */
tr.craque-row { background: var(--ok-bg); }
.geral.baixo { background: var(--bad-bg-2); color: var(--cai-txt); }

.porque { margin: 0; padding: 4px 0 4px 20px; display: grid; gap: 9px; }
.porque li { font-size: 15px; line-height: 1.45; color: var(--ink); }
/* A bullet point is none of the three things the Regra do Amarelo allows to be yellow (primary
   button, own-club row, drawn card). It was spending the page's one accent color on punctuation. */
.porque li::marker { color: var(--ink-4); }

/* ── Phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .sb-in { padding: 10px 14px 12px; }
  .sb-nome { display: none; }
  .sb-onde { font-size: 10px; letter-spacing: 0.12em; }
  .ticker { padding: 7px 14px; gap: 8px; }
  /* The label is the whole honesty mechanism for the ticker — nine live-looking scores with no
     caption is a live feed, and this is a recording. It stays, smaller, and the scores scroll. */
  .tk-label { font-size: 9.5px; letter-spacing: 0.1em; max-width: 4.6em; line-height: 1.15; }
  .partida-aviso { padding: 8px 14px; font-size: 12.5px; }
  .narracao { padding: 12px 14px 20px; }
  .nl { font-size: 14px; }
  .nl.gol { font-size: 15px; }
  .partida-bar { padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); gap: 8px; }
  .pb-fila { flex: 1 0 100%; }
  .partida-bar .secbtn.big { flex: 1 1 0; justify-content: center; padding: 12px 8px; font-size: 12px; }
  .partida-bar .advance { flex: 1 1 100%; justify-content: center; }
  .mgrid { grid-template-columns: 1fr 1fr; }
  .craque { padding: 14px 12px; gap: 11px; }
  .craque-nome { font-size: 19px; }
  .est { grid-template-columns: 46px minmax(0, 1fr) 46px; }
}

@media (max-width: 380px) {
  .mgrid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Transferências, Contratos and Negociação.

   Same clipboard. One rule carried over from the lineup screen and one new one:

   CARRIED OVER — one yellow button per screen, and it is that screen's single action. Propor here,
   Pronto on the contract board, Encerrar on the conversation. Everything else is a quiet white
   secbtn, including the three one-click contract actions, because those are decisions that only
   land on the turn of the week and must not read as "done".

   NEW — a decision he has taken but not yet spent is drawn as a STATE, never as a flash: a chosen
   secbtn keeps a green ring (.secbtn.on), a decided contract card keeps a green rail, an answered
   bid keeps a coloured edge. He has to be able to leave the screen, come back, and see what he
   already decided without re-reading a single number.
   ══════════════════════════════════════════════════════════════════════════════ */

#mercado .panel-body, #contratos .panel-body, #conversa .panel-body { padding: 14px 16px; }
#mercado .p-strip, #contratos .p-strip { padding: 0; }

.bom { color: var(--sobe-txt); }
.ruim { color: var(--cai-txt); }

/* A pressed state that survives a redraw: this is a decision, not a hover. */
.secbtn.on {
  border-color: var(--sobe); color: var(--ok-ink); background: var(--ok-bg);
  box-shadow: inset 0 0 0 1px var(--sobe);
}
.secbtn.perigo.on {
  border-color: var(--cai); color: var(--cai-txt); background: var(--bad-bg);
  box-shadow: inset 0 0 0 1px var(--cai);
}

/* ── The money strip, shared by both market screens ───────────────────────── */

.mrk-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--board); color: var(--on-board);
}
.mrk-cell { padding: 13px 15px; border-left: 1px solid var(--board-line); min-width: 0; }
.mrk-cell:first-child { border-left: 0; }
.mrk-l {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--board-dim);
}
.mrk-v {
  margin-top: 4px; font-family: var(--font-cond); font-weight: 700; font-size: 22px;
  line-height: 1.05; letter-spacing: 0.01em;
}
.mrk-v.ruim { color: var(--bad-bright); }
.mrk-v.bom { color: var(--ok-bright); }
.mrk-u { font-size: 0.55em; color: var(--board-dim); margin-left: 2px; }
.mrk-n { margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--board-dim); }
/* The teto bar — COOKBOOK §6: "a única gráfico da tela", on the "Folha depois das suas decisões"
   cell of the sit board. Track is --board-line (the strip sits on --board); the fill turns
   --warn-bright once the projected bill passes 92% of the ceiling and --bad-bright once it bursts
   past 100% — the same three-zone read as every other gauge in the game. */
.mrk-teto { margin: 6px 0 0; height: 4px; border-radius: 2px; background: var(--board-line); overflow: hidden; }
.mrk-teto-fill { display: block; height: 100%; border-radius: 2px; background: var(--ok-bright); }
.mrk-teto-fill.alerta { background: var(--warn-bright); }
.mrk-teto-fill.estourado { background: var(--bad-bright); }

/* ── Filters over the target list ─────────────────────────────────────────── */

.filtros { display: grid; gap: 10px; margin-bottom: 12px; }
.filtro { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 10px; }
.filtro-l {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
}
.busca input {
  width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; min-height: 42px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px;
}
.busca input::placeholder { color: var(--ink-3); }

/* ── A target ─────────────────────────────────────────────────────────────── */

.trow { position: relative; display: flex; align-items: center; gap: 6px; }
.trow + .trow { margin-top: 4px; }
.trow-body {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 4px 9px;
  padding: 8px 40px 8px 9px; min-height: 46px; text-align: left;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.trow-body:hover { background: var(--surface-3); }
.trow.sel .trow-body { box-shadow: 0 0 0 3px var(--amarelo); background: var(--amarelo-bg); }
.trow-nome { min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.trow-etq { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.trow-num { font-family: var(--font-cond); font-weight: 700; font-size: 16px; }
.trow .ficha-btn { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); }

.etq {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  font-family: var(--font-cond); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  background: var(--surface-4); color: var(--ink-2);
}
.etq.livre  { background: var(--ok-bg-2); color: var(--ok-ink); }
.etq.venda  { background: var(--surface-4); color: var(--ink-2); }
.etq.sob    { background: var(--surface-4); color: var(--ink-3); }
.etq.minha  { background: var(--board); color: var(--amarelo); }
.etq.rival  { background: var(--bad-bg-2); color: var(--cai-txt); }
.etq.manter { background: var(--surface-4); color: var(--ink-2); }
.etq.solto  { background: var(--bad-bg-2); color: var(--cai-txt); }
.etq.renova { background: var(--ok-bg-2); color: var(--ok-ink); }

/* ── The proposal itself ──────────────────────────────────────────────────── */

.mrk-alvo { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.mrk-alvo .alvo-x { white-space: nowrap; }

#mercado .alvo { padding: 0 0 14px; border-bottom: 1px solid var(--line-soft); }
#mercado .alvo-onde { margin-top: 6px; }

.campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.campo-num { min-width: 0; }
.campo-l {
  display: block; font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.campo-num input {
  width: 100%; font: inherit; font-family: var(--font-cond); font-size: 17px; font-weight: 700;
  padding: 9px 11px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.campo-num input:disabled { background: var(--surface-3); color: var(--ink-3); }
.campo-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mini {
  padding: 5px 9px; min-height: 32px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
}
.mini:hover { background: var(--surface-3); border-color: var(--neutro); }
.campo-n { margin-top: 7px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.campo-n b { color: var(--ink-2); }

.mrk-check { margin-top: 14px; display: grid; gap: 1px; background: var(--line-soft); border-radius: 8px; overflow: hidden; }
.mrk-check + .aviso { margin-top: 12px; }

/* ── An offer, mine or theirs ─────────────────────────────────────────────── */

/* COOKBOOK §5 gives the base state of a proposal a name — "enviada" — and a color: --track, the
   same pending/unresolved token the home task list and the gauge already use. --line is a border
   color, not a state color; a card that is simply awaiting a decision was wearing the wrong one. */
.oferta {
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-1);
  border-left-width: var(--mark); border-left-color: var(--track);
}
.oferta + .oferta { margin-top: 9px; }
.oferta.aceita { border-left-color: var(--sobe); background: var(--ok-bg); }
.oferta.recusada { border-left-color: var(--cai); background: var(--bad-bg); }
.oferta-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.oferta-topo b { font-size: 15px; }
.oferta-clube {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3); text-align: right;
}
.oferta-num {
  margin-top: 3px; font-family: var(--font-cond); font-weight: 700; font-size: 14.5px;
  color: var(--ink-2);
}
.oferta-linhas { margin: 8px 0 0; padding: 0; list-style: none; }
.oferta-linhas li { font-size: 13px; line-height: 1.45; color: var(--ink-2); padding: 2px 0; }
.oferta-acoes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.oferta-nota { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* ── My sell list ─────────────────────────────────────────────────────────── */

.vrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.vrow-nome { min-width: 0; font-size: 14px; }
.vrow-preco { font-family: var(--font-cond); font-weight: 700; font-size: 14.5px; }
.vadd { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.vadd select, .vadd input {
  flex: 1 1 150px; min-width: 0; font: inherit; font-size: 13.5px; padding: 9px 10px; min-height: 42px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}

/* ── What they answered (spec §9.6) ───────────────────────────────────────── */

.resumo {
  padding: 11px 13px; border-radius: 8px; background: var(--surface-2);
  border-left: var(--mark) solid var(--line);
}
.resumo + .resumo { margin-top: 9px; }
.resumo.bom { border-left-color: var(--sobe); background: var(--ok-bg); }
.resumo.ruim { border-left-color: var(--cai); background: var(--bad-bg); }
.resumo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.resumo-topo span {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3); text-align: right;
}
.resumo-falas { margin: 7px 0 0; padding: 0 0 0 2px; list-style: none; }
.resumo-falas li { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); padding: 2px 0; }
.resumo-vered { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* ── A contract card ──────────────────────────────────────────────────────── */

.ccard {
  padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1);
  border-left-width: var(--mark); border-left-color: var(--line);
}
.ccard + .ccard { margin-top: 12px; }
/* COOKBOOK §6: "decisão tomada: marca --ok-line, fundo --surface-2, resumo da decisão — igual
   tarefa resolvida da home." A decided card (renew, counter, OR release) is a settled to-do, not a
   veredict — --sobe/--ok-bg is reserved for match results (Regra 3), and a release decided here is
   not a win. */
.ccard.decidido { border-left-color: var(--ok-line); background: var(--surface-2); }
.ccard-topo {
  display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
}
.ccard-nome { min-width: 0; font-size: 16px; font-weight: 600; }
/* NOT `position: static`. `.ficha-btn` is relative so its 40px hit pad (`::after { inset: -7px }`)
   is measured against the button; taking that away sent the pad out to the nearest positioned
   ancestor — the viewport — and one invisible rectangle then swallowed every click on every card
   below it. Caught by clicking Aceitar in a real browser and watching the "i" of the LAST card
   intercept it. */
.ccard-fatos {
  margin-top: 11px; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-soft); border-radius: 8px; overflow: hidden;
}
.ccard-fatos > div { padding: 9px 8px; background: var(--card); text-align: center; }
.ccard-fatos b { display: block; font-family: var(--font-cond); font-size: 15px; font-weight: 700; }
.ccard-fatos span { font-size: 11px; line-height: 1.3; color: var(--ink-3); }
.ccard-prazo { margin: 9px 0 0; font-size: 13px; color: var(--ink-2); }
/* COOKBOOK §6: "efeito na folha dito no cartão ANTES do clique" — the one-line preview of what
   Aceitar would do to the folha, printed above the action buttons rather than only after he picks
   one. Same numeric voice as the rest of the card: font-cond, tabular, small. */
.ccard-efeito {
  margin: 10px 0 0; font-family: var(--font-cond); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.ccard-efeito.ruim { color: var(--cai-txt); }
.ccard-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
/* COOKBOOK §6: Liberar's text reads as --bad-ink (a departure, the same family as an injury), not
   the --cai-txt of a match result. Scoped to the contract card's own action row so the shared
   .secbtn.perigo used by Transferências and Escalação keeps its --cai-txt untouched. */
.ccard-acoes .secbtn.perigo { color: var(--bad-ink); border-color: var(--bad-line); }
.ccard-acoes .secbtn.perigo:hover { background: var(--bad-bg); }
.ccard-acoes .secbtn.perigo.on { border-color: var(--cai); color: var(--bad-ink); background: var(--bad-bg); box-shadow: inset 0 0 0 1px var(--cai); }
.contra { display: inline-flex; gap: 6px; align-items: center; }
.contra input {
  width: 128px; font: inherit; font-family: var(--font-cond); font-weight: 700; font-size: 14px;
  padding: 8px 10px; min-height: 40px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.ccard-estado { margin-top: 10px; }
.ccard-inacao {
  margin: 10px 0 0; padding: 9px 11px; border-radius: 8px;
  background: var(--surface-3); font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
.ccard-inacao b { color: var(--ink); }

/* ── The conversation ─────────────────────────────────────────────────────── */

.escolhas { display: grid; gap: 8px; }
.escolha {
  display: block; width: 100%; text-align: left;
  padding: 13px 15px; min-height: 52px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  font-size: 14.5px; line-height: 1.4; cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease;
}
.escolha:hover { background: var(--amarelo-bg); border-color: var(--amarelo); }
.escolha:active { transform: translateY(1px); }

.fala-bloco + .fala-bloco { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.fala-eu {
  font-family: var(--font-cond); font-size: 14px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--ink-3);
}
.fala-eu::before { content: "\2014\00a0"; }
.fala-ele { margin-top: 8px; }
.fala-ele p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; }
.fala-ele p:last-child { margin-bottom: 0; }
.falas { margin: 0; padding: 0; list-style: none; }
.falas li {
  padding: 8px 0 8px 12px; border-left: var(--mark) solid var(--track);
  font-size: 14.5px; line-height: 1.5;
}
.falas li + li { margin-top: 6px; }

.prios { margin-top: 10px; display: grid; gap: 6px; }
.prio { display: grid; grid-template-columns: 22px minmax(0, 1fr) 84px auto; align-items: center; gap: 9px; }
.prio-l { font-size: 13.5px; }
.prio-v {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3); text-align: right; min-width: 82px;
}
.prioridades li.revelada { background: var(--surface-2); }

/* ── Columns ──────────────────────────────────────────────────────────────── */

/* Wider than a half: the proposal panel holds three number fields with chip rows under them, and
   at 1.05fr the chips wrapped onto three ragged lines each. */
.mrk-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ctr-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.cnv-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
#mercado .p-alvos .panel-body { max-height: 620px; overflow-y: auto; }

/* ── Phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

  .mrk-strip { grid-template-columns: 1fr 1fr; }
  .mrk-cell:nth-child(odd) { border-left: 0; }
  .mrk-cell:nth-child(n+3) { border-top: 1px solid var(--board-line); }
  .mrk-v { font-size: 19px; }

  /* `.stack { display: contents }` dissolves both columns here too, so `order` decides what a
     thumb reaches first: the thing he is doing, then the things waiting on him. */
  .mrk-cols, .ctr-cols, .cnv-cols { display: flex; flex-direction: column; gap: 16px; }
  .p-proposta  { order: 1; }
  .p-alvos     { order: 2; }
  .p-minhas    { order: 3; }
  .p-recebidas { order: 4; }
  .p-venda     { order: 5; }
  .p-respostas { order: 6; }

  .p-quadro { order: 1; }
  .p-regra  { order: 2; }
  .p-faltam { order: 3; }

  .p-escolhas { order: 1; }
  .p-dialogo  { order: 2; }
  .p-resumo   { order: 3; }

  #mercado .panel-body, #contratos .panel-body, #conversa .panel-body { padding: 12px 12px 14px; }
  /* No ceiling on a phone: an overlay scrollbar is zero pixels wide, so a capped box hides the
     rest of the list behind nothing at all while the page scrolls past it. */
  #mercado .p-alvos .panel-body { max-height: none; overflow-y: visible; }

  .campos { grid-template-columns: 1fr; gap: 12px; }
  /* The name, the numbers and the club stop competing for one 390px line. */
  .mrk-alvo { grid-template-columns: 1fr; row-gap: 2px; text-align: left; }
  .mrk-alvo > span:first-child { text-align: left; }
  .mrk-alvo .alvo-x { text-align: left; }
  .filtro { grid-template-columns: 1fr; gap: 5px; }
  .ccard-fatos { grid-template-columns: 1fr 1fr; }
  .ccard-acoes .secbtn, .oferta-acoes .secbtn { flex: 1 1 auto; justify-content: center; }
  .contra { flex: 1 1 100%; }
  .contra input { flex: 1 1 auto; width: auto; }
  .prio { grid-template-columns: 20px minmax(0, 1fr) 64px; row-gap: 3px; }
  .prio-v { grid-column: 2 / -1; text-align: left; }
  /* Two rows on a phone: the man on the first, his tags on the second. Every child is placed by
     hand rather than left to auto-flow — with the tags claiming a definite column on row two, the
     rating after them in the DOM was pushed to a row of its own at the far left. */
  .trow-body { grid-template-columns: 28px auto minmax(0, 1fr) auto; padding-right: 38px; }
  .trow-body > .av { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .trow-body > .pos-tag { grid-column: 2; grid-row: 1; }
  .trow-nome { grid-column: 3; grid-row: 1; }
  .trow-num { grid-column: 4; grid-row: 1; }
  .trow-etq { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   O clube: Dinheiro, Diretoria e Caixa de entrada (spec §13, §14).

   Same clipboard as everything else — green chrome, white plates, the yellow spent only on the one
   thing that matters. Three additions of their own:

     the nav strip, which is the only chrome shared by four screens;
     the reconciliation banner, which is the Dinheiro screen's whole argument and is therefore the
       biggest thing on it;
     the patience chart, which is CSS bars rather than a drawing, so it reflows on a phone without
       a viewBox deciding how wide it is allowed to be.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── The nav between the club's four screens ──────────────────────────────── */

/* `top` is set from JavaScript (clube.js `anchorNav`) to the measured height of the header above
   it. Both are sticky, the header is opaque and outranks this on z-index, so with both at `top: 0`
   the strip slid under the header the moment the page scrolled and stopped taking clicks. The
   fallback here is the desktop header height; the measurement is what makes it right on a phone,
   and right again after a resize. */
.telas {
  position: sticky; top: 57px; z-index: 19;
  background: var(--board-2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}

/* Two rows: the five groups on the board itself, then the screens inside the open one on a slightly
   lighter shelf under them. The shelf is what says "these belong to the chip above" without a line,
   an arrow, or an animation. */
.telas-topo { position: relative; }
.telas-sub {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}

/* A strip that does not fit scrolls sideways inside itself rather than dragging the page with it.
   The fade says so, and is invisible wherever the chips all fit: it fades to the strip's own
   colour. One per row, because the two rows overflow independently. */
.telas-topo::after,
.telas-sub::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 34px;
  pointer-events: none;
}
.telas-topo::after { background: linear-gradient(to right, transparent, var(--board-2) 78%); }
.telas-sub::after  { background: linear-gradient(to right, transparent, var(--board-2) 92%); }

.telas-in,
.telas-sub-in {
  max-width: 1320px; margin: 0 auto;
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.telas-in { padding: 7px 20px; }
.telas-sub-in { padding: 5px 20px; }
.telas-in::-webkit-scrollbar,
.telas-sub-in::-webkit-scrollbar { display: none; }

.tela,
.subtela {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid transparent; border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-cond); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--board-dim); white-space: nowrap;
  transition: color 140ms ease, background 140ms ease;
}
.tela { padding: 7px 14px; min-height: 38px; font-size: 12.5px; }
/* Smaller and quieter than the group above it: the shelf is where you are, not what you chose. */
.subtela { padding: 5px 12px; min-height: 32px; font-size: 11.5px; letter-spacing: 0.09em; }

.tela:hover,
.subtela:hover { color: var(--on-board); background: rgba(255, 255, 255, 0.08); }

/* The open GROUP is stated, not shouted: yellow is the button that closes the week and the row that
   is his club. A menu chip that is merely "where I am" gets the chalk plate instead. */
.tela.on {
  color: var(--board);
  background: var(--on-board-2);
  border-color: var(--on-board-2);
  font-weight: 700;
}
/* The screen he is actually reading. Underlined rather than filled, so the two rows never look like
   two equal choices. */
.subtela.on {
  color: var(--on-board); font-weight: 700;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 -2px 0 var(--amarelo);
}

.telas-badge {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--amarelo); color: var(--amarelo-ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.subtela .telas-badge { min-width: 17px; height: 17px; font-size: 10.5px; }
.tela.on .telas-badge { background: var(--board); color: var(--amarelo); }

/* The filter chips inside the inbox reuse the pill, on paper instead of on the board. */
.entrada-filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-1);
}
.entrada-filtros .tela { color: var(--ink-2); border-color: var(--line); min-height: 40px; }
.entrada-filtros .tela:hover { color: var(--ink); background: var(--surface-3); }
.entrada-filtros .tela.on { color: var(--amarelo-ink); background: var(--amarelo); border-color: var(--amarelo); }
.linkbtn.claro { color: var(--ink-3); border-color: var(--line); min-height: 40px; }
.linkbtn.claro:hover { color: var(--ink); background: var(--surface-3); border-color: var(--neutro); }
.linkbtn.claro.dir { margin-left: auto; }

/* ── Dinheiro: the reconciliation, which is the whole argument ────────────── */

.confere {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 15px 16px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.confere.ok { background: var(--ok-bg); }
.confere.nao { background: var(--bad-bg); }
.confere-n {
  flex: 0 0 auto;
  font-family: var(--font-cond); font-weight: 700; font-size: 30px; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.confere.ok .confere-n { color: var(--sobe-txt); }
.confere.nao .confere-n { color: var(--cai-txt); }
.confere-t { min-width: 0; font-size: 13.5px; line-height: 1.4; }
.confere-t b { display: block; color: var(--ink); }
.confere-t span { display: block; margin-top: 3px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.extrato-desde { padding: 10px 16px 0; margin: 0; font-size: 12.5px; }
.extrato-panel .panel-body { padding-bottom: 4px; }

table.extrato thead th { padding-left: 16px; }
table.extrato tbody td:first-child { padding-left: 16px; }
table.extrato tbody td:last-child { padding-right: 16px; }
.t-sem { width: 42px; color: var(--ink-3); font-family: var(--font-cond); font-weight: 600; }
.t-lanc { min-width: 190px; }
.lanc-k { display: block; font-weight: 500; }
.lanc-q { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--ink-2); font-size: 13px; }
.lanc-ref {
  display: block; margin-top: 2px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 10.5px; color: var(--ink-3); word-break: break-all;
}
.t-val { font-family: var(--font-cond); font-weight: 700; white-space: nowrap; }
tr.entra .t-val { color: var(--sobe-txt); }
tr.sai .t-val { color: var(--cai-txt); }
.t-saldo { font-family: var(--font-cond); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
tr.abertura td { background: var(--surface-2); border-top: 2px solid var(--line); }
tr.abertura .lanc-k { color: var(--ink-3); font-weight: 600; text-transform: uppercase;
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.12em; }

/* ── Dinheiro: where the money went ───────────────────────────────────────── */

.fluxo { display: grid; gap: 1px; background: var(--line-soft); }
.fluxo-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
  padding: 10px 16px 11px; background: var(--card);
}
.fluxo-l { font-size: 14px; font-weight: 500; }
.fluxo-n { font-family: var(--font-cond); font-weight: 700; font-size: 15px; white-space: nowrap; }
.fluxo-row.entra .fluxo-n { color: var(--sobe-txt); }
.fluxo-row.sai .fluxo-n { color: var(--cai-txt); }
.fluxo-q { font-size: 12px; color: var(--ink-3); }
.fluxo-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.fluxo-bar i { display: block; height: 100%; border-radius: 3px; }
.fluxo-row.entra .fluxo-bar i { background: var(--sobe); }
.fluxo-row.sai .fluxo-bar i { background: var(--cai); }

/* The month's forecast and the gate's parts both reuse .parcelas; only the total row is new. */
.parcela.total { background: var(--surface-2); }
.parcela.total .parcela-l { font-weight: 700; color: var(--ink); }
.parcela.total .parcela-v { font-size: 15px; }

.bilhete-topo { display: flex; align-items: baseline; gap: 12px; }
.bilhete-n {
  font-family: var(--font-cond); font-weight: 700; font-size: 28px; line-height: 1;
  color: var(--sobe-txt); white-space: nowrap;
}
.bilhete-l { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.bilhete-l span { display: block; font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }

/* ── Dinheiro: the ticket ladder ──────────────────────────────────────────── */
/* This screen's panel bodies carry no padding of their own — the statement, the flow rows and the
   warnings each bring theirs — so the sentence above the ladder brings its own too. Putting the
   padding on #dinheiro .panel-body instead would move every other block on the screen to fix one
   paragraph. */
.preco-topo { padding: 12px 16px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.preco-topo b { color: var(--ink); }

/* The rung IS the row's first cell: one control, one marker, nothing to keep in step with it, and
   full width so the five prices read as a ladder rather than as five ragged pills. */
.preco-tab { margin-top: 10px; }
.preco-tab th:first-child, .preco-tab td:first-child { width: 108px; padding-left: 12px; }
.preco-tab th:last-child, .preco-tab td:last-child { padding-right: 12px; }
.preco-tab .seg-b { width: 100%; padding: 8px 4px; white-space: nowrap; }
.preco-tab tr.aqui td { font-weight: 700; }
/* `.seg-b.on` fills with --board. On this screen that plate sits on a --card, and at night the two
   are within a couple of units of each other with the border painted the same colour as the fill,
   so the chosen rung would read as a hole in the card instead of a choice. A light border is the
   whole fix: at night it outlines the selection, and in the day it is white on a white card and
   therefore invisible, which leaves the button drawing exactly as it does on every other screen. */
.preco-tab .seg-b.on { border-color: var(--on-board); }
/* Disabled while the week is open: the track colour and second-level ink, never a paler yellow. */
.preco-tab .seg-b[disabled], .preco-tab .seg-b[disabled]:hover {
  background: var(--track); color: var(--ink-3); border-color: var(--line-soft); cursor: default;
}
.p-preco .aviso { margin: 10px 12px 0; }

/* ── Diretoria: how the patience moved ────────────────────────────────────── */

.pat-graf { padding-bottom: 4px; }
.pat-plot {
  position: relative;
  height: 150px;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: linear-gradient(to top, var(--bad-bg) 0 10%, var(--amarelo-bg) 10% 40%, var(--surface-2) 40% 100%);
  overflow: hidden;
}
/* The bars scroll sideways INSIDE the plot; the threshold lines above do not, because they are
   about the value on the axis and not about the week. A season fits; three do not, and the weeks
   that did not fit were the recent ones — drawn off the edge of an `overflow: hidden` box with no
   scrollbar to reach them. */
.pat-scroll {
  position: absolute; inset: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
.pat-bars {
  display: flex; align-items: flex-end; gap: 2px;
  padding: 0 6px;
  min-width: 100%; height: 100%;
  box-sizing: border-box;
}
.pat-col { flex: 1 0 3px; min-width: 3px; display: flex; align-items: flex-end; height: 100%; }
.pat-col i { display: block; width: 100%; border-radius: 2px 2px 0 0; }
/* The three warning thresholds of §13.2, drawn ON the plot. They sit above the bars so the line is
   readable wherever the season happens to be, and the label rides in a chip because a grey word on
   a green bar is not a label. */
.pat-marca {
  position: absolute; left: 0; right: 0; z-index: 2;
  border-top: 1px dashed var(--ink-3);
  display: flex; align-items: center; gap: 5px;
  padding-left: 5px;
  pointer-events: none;
}
.pat-marca b, .pat-marca span {
  font-family: var(--font-cond); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--card); border-radius: 3px; padding: 1px 5px;
  transform: translateY(-50%);
}
.pat-marca b { font-weight: 700; color: var(--ink); }
.pat-marca span { color: var(--ink-2); }
.pat-eixo {
  display: flex; justify-content: space-between;
  margin-top: 5px;
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

.pat-tab { margin-top: 12px; }
.pat-tab thead th { padding-left: 16px; }
.pat-tab tbody td { vertical-align: top; padding-top: 10px; padding-bottom: 11px; }
.pat-tab tbody td:first-child { padding-left: 16px; }
.pat-tab tbody td:last-child { padding-right: 16px; }
.t-mov-pat { white-space: nowrap; width: 118px; font-family: var(--font-cond); font-weight: 600; }
.pat-de, .pat-para { color: var(--ink-3); font-size: 13px; }
.pat-para { color: var(--ink); font-weight: 700; }
.pat-seta { display: inline-block; min-width: 28px; text-align: center; font-weight: 700; color: var(--ink-3); }
.pat-seta.mais { color: var(--sobe-txt); }
.pat-seta.menos { color: var(--cai-txt); }
.t-causa { font-size: 13px; line-height: 1.4; }
.causa { display: block; color: var(--ink-2); }
.causa + .causa { margin-top: 5px; }
.causa b { font-family: var(--font-cond); font-weight: 700; color: var(--ink); }
.causa b.mais { color: var(--sobe-txt); }
.causa b.menos { color: var(--cai-txt); }

/* ── Diretoria: the target, the warnings, the crowd ───────────────────────── */

.meta-topo { display: flex; align-items: baseline; gap: 13px; margin-bottom: 11px; }
.meta-n {
  font-family: var(--font-cond); font-weight: 700; font-size: 34px; line-height: 1;
  color: var(--ink);
}
.meta-l { font-size: 14px; line-height: 1.3; }
.meta-l span { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }

.degraus { display: grid; gap: 1px; background: var(--line-soft); border-radius: 8px; overflow: hidden; }
.degrau {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center;
  padding: 9px 12px; background: var(--card);
}
.degrau-n {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface-3); color: var(--ink-2);
  font-family: var(--font-cond); font-weight: 700; font-size: 14px;
}
.degrau-t { min-width: 0; font-size: 13.5px; }
.degrau-t b { display: block; }
.degrau-t span { display: block; color: var(--ink-3); font-size: 12.5px; }
.degrau-s {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.degrau.passou { background: var(--bad-bg); }
.degrau.passou .degrau-n { background: var(--cai); color: var(--on-board); }
.degrau.passou .degrau-s { color: var(--cai-txt); font-weight: 700; }

.dir-jogo { margin-bottom: 10px; font-size: 15px; }
.dir-jogo span { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }

.torcida { display: flex; align-items: center; gap: 14px; }
.torcida .gauge { flex: 1 1 auto; margin: 0; }
/* The strip's gauge sits on the green board; this one sits on paper, so the empty ticks need ink. */
.gauge.escura i { background: var(--line-soft); }
.gauge.escura i.on { background: var(--tick); }
.torcida-n {
  flex: 0 0 auto;
  font-family: var(--font-cond); font-weight: 700; font-size: 26px; line-height: 1;
}
.torcida-n span { font-size: 0.55em; color: var(--ink-3); }

/* Three lists that grow without end, and therefore get the ceiling the feed already has ("Tables
   show every row: the page scrolls, not a box inside it" — the exception is a list with no last
   row). A season posts a hundred-odd ledger lines and forty-eight patience weeks, and a column
   that long leaves the one beside it two thousand pixels of white. `thead` is already sticky, so
   the header rides along. Only on a wide screen: on a phone a box that scrolls inside a page that
   scrolls is worse than a long page.
   @media (min-width: 901px) is stated rather than folded into the phone query below, because these
   three rules must not apply at 375px at all. */
@media (min-width: 901px) {
  .extrato-panel .scroller { max-height: 520px; overflow-y: auto; }
  .pat-tab-wrap { max-height: 460px; overflow-y: auto; }
  .entrada-lista { max-height: 820px; overflow-y: auto; }
}

/* ── Caixa de entrada: the pile ───────────────────────────────────────────── */

.entrada-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); margin-top: 0; }
.entrada-lista { padding: 0; }

/* The margin mark used to carry `tom` (ruim/bom), a signal this screen never actually used —
   `lista()` never passed a tom class differing by outcome the way the home feed does. README §5 is
   explicit: the mark is read/unread. Não lida = amarelo ("isto é seu e está esperando", not a
   warning — Regra do Amarelo permits this bucket); lida = --track, with the surface-2 fill. */
.entrada-item {
  padding: 13px 16px 14px;
  border-bottom: 1px solid var(--line-soft);
  border-left: var(--mark) solid var(--amarelo);
}
.entrada-item:last-child { border-bottom: 0; }
.entrada-item.lido { border-left-color: var(--track); background: var(--surface-2); }
.entrada-item.lido .entrada-txt { color: var(--ink-2); }

.entrada-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
/* Etiqueta by kind, README §5's table: proposta (mercado) is info-blue, departamento médico
   (lesão) is the injury red, suspensão is the warning orange with the drawn card in front of the
   word — never a colour of text (Regra do Amarelo) — and everything else (Contrato, Diretoria,
   Comando, Torcida, Base…) stays the neutral default. Also brings the pill to the exact spec in
   README's type scale: 10.5px/700/.09em, padding 2px 7px, radius 999px — it was .15em/4px/3px 7px. */
.entrada-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-cond); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface-4); border-radius: 999px; padding: 2px 7px;
}
.entrada-tag.cat-proposta { background: var(--info-bg-2); color: var(--info-ink); }
.entrada-tag.cat-medico { background: var(--bad-bg-2); color: var(--bad-ink); }
.entrada-tag.cat-susp { background: var(--warn-bg); color: var(--warn-ink); }
.entrada-sem {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}
.entrada-feito {
  margin-left: auto;
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sobe-txt); font-weight: 700;
}

.entrada-txt { margin: 0 0 7px; font-size: 15px; line-height: 1.35; }
/* The causa paragraph ("Por quê") is the one README §5 calls the line that matters, with its own
   voice: ui 13.5px on --ink-3, prefixed by a small-caps PORQUE label (cond 11px/700/.06em) instead
   of a bold echo of the paragraph font. "O que mudou" is not that line and keeps its prior size and
   ink. */
.entrada-causa, .entrada-efeito { margin: 0 0 5px; line-height: 1.4; }
.entrada-causa { font-size: 13.5px; color: var(--ink-3); }
.entrada-efeito { font-size: 13px; color: var(--ink); }
.entrada-efeito b { color: var(--ink); font-weight: 700; }
.causa-label {
  font-family: var(--font-cond); font-weight: 700; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 4px;
}
.entrada-causa code, .aviso code, .nota-in code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.88em; background: var(--surface-3); border-radius: 3px; padding: 1px 4px;
}
.entrada-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }

/* ── The three screens on a phone ─────────────────────────────────────────── */

@media (max-width: 900px) {
  /* `.stack { display: contents }` dissolves both columns of the money screen here too, and no
     Dinheiro panel carries an `order` — so the one thing on this screen he can DO would land
     fifth, under the whole statement. Stated rather than inherited. */
  #dinheiro .p-preco { order: -3; }
  /* The proof follows the decision. Without this the ladder promises "R$ 615 mil este jogo" at the
     top of the phone and the panel that shows where that number comes from is two thousand pixels
     below it, which is the same as not showing it. */
  #dinheiro .p-bilhete { order: -2; }
  #dinheiro .p-obra { order: -1; }
  .preco-tab th:first-child, .preco-tab td:first-child { width: 92px; padding-left: 10px; }
  .preco-tab .seg-b { padding: 8px 2px; font-size: 12.5px; letter-spacing: 0; }

  .telas-in { padding: 6px 12px; }
  .telas-sub-in { padding: 4px 12px; }
  /* 44px, like every other tap target on a phone in this page: the nav is worked with a thumb. */
  .tela { padding: 6px 13px; min-height: 44px; font-size: 11.5px; }

  .entrada-cols { display: flex; flex-direction: column; }
  /* `.stack { display: contents }` from the home screen's query dissolves both columns here too,
     so the order is stated rather than inherited: the pile first, the note about it after. */
  .entrada-lista { order: 1; }

  .confere { flex-direction: column; gap: 6px; }
  .confere-n { font-size: 26px; }
  .confere-t { font-size: 13px; }

  /* The running balance is the whole argument of this screen, so it is the LAST column that may be
     allowed to fall off a 375px phone. Everything else gives way to keep all four in view: the
     description narrows, the figures drop to 12px, and the cells lose their side padding. */
  table.extrato thead th, table.extrato tbody td { padding: 7px 3px; }
  table.extrato thead th:first-child, table.extrato tbody td:first-child { padding-left: 12px; }
  table.extrato thead th:last-child, table.extrato tbody td:last-child { padding-right: 12px; }
  .t-sem { width: 26px; }
  .t-lanc { min-width: 0; }
  .lanc-k, .lanc-q { font-size: 12.5px; }
  .t-val, .t-saldo { font-size: 12px; }
  .lanc-ref { display: none; }        /* an offer id is 30 characters; a phone has other uses for them */

  .pat-plot { height: 120px; }
  .pat-marca span { display: none; }
  .t-mov-pat { width: 96px; }
  .t-causa { font-size: 12.5px; }

  .meta-n { font-size: 28px; }
  .bilhete-n { font-size: 24px; }
  .entrada-txt { font-size: 14.5px; }
  .entrada-acoes .secbtn { flex: 1 1 auto; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Fim de temporada (spec §13.6, §14).

   The only screen in the game that is a MOMENT and not a workbench. Everything else here is built
   to be worked at — this one is built to be read once, at the end of forty-eight weeks, and it
   opens with a cover: the whole board green, the club, and one word for the year. Under it the
   plates come back, because tables of twenty rows and lists of a hundred and forty-eight men still
   have to be legible on a phone in daylight.

   No new colour is introduced. The verdict band borrows the three the game already has — the
   yellow for a title, the green for going up, the red for going down.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── The cover ────────────────────────────────────────────────────────────── */

.fim-capa {
  position: relative;
  background: var(--board);
  color: var(--on-board);
  border-radius: var(--r);
  overflow: hidden;
  padding: 22px 22px 0;
  animation: fim-sobe 420ms cubic-bezier(0.16, 0.9, 0.3, 1) both;
}
@keyframes fim-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* A wash of the verdict's own colour across the top of the board, so the year has a temperature
   before a single word is read. */
.fim-capa::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px;
  background: radial-gradient(120% 130% at 50% -30%, var(--fim-tint, transparent) 0%, transparent 72%);
  pointer-events: none;
}
.fim-capa.ouro    { --fim-tint: rgba(245, 185, 21, 0.32); }
.fim-capa.sobe    { --fim-tint: rgba(15, 123, 75, 0.42); }
.fim-capa.cai     { --fim-tint: rgba(196, 52, 43, 0.34); }
.fim-capa.atencao { --fim-tint: rgba(245, 185, 21, 0.16); }
.fim-capa.neutro  { --fim-tint: rgba(255, 255, 255, 0.08); }

.fim-eyebrow {
  position: relative;
  font-family: var(--font-cond);
  font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--board-dim);
}

.fim-topo {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  padding: 16px 0 22px;
}

.fim-clube { display: flex; align-items: center; gap: 15px; min-width: 0; }
.fim-clube-id { min-width: 0; }
.fim-clube-nome {
  display: block;
  font-family: var(--font-cond); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.02; letter-spacing: -0.015em;
}
.fim-clube-sub {
  display: block; margin-top: 4px;
  font-family: var(--font-cond); font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--board-dim);
}

/* The one word for the year. It is the loudest thing on any screen in this game, on purpose. */
.fim-selo { text-align: right; min-width: 0; }
.fim-selo-word {
  display: block;
  font-family: var(--font-cond); font-weight: 700;
  font-size: clamp(28px, 5.2vw, 52px); line-height: 1; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fim-capa.ouro .fim-selo-word    { color: var(--amarelo); }
.fim-capa.sobe .fim-selo-word    { color: var(--ok-bright); }
.fim-capa.cai .fim-selo-word     { color: var(--bad-bright); }
.fim-capa.atencao .fim-selo-word { color: var(--warn-bright); }
.fim-selo-line {
  display: block; margin-top: 7px; max-width: 46ch;
  font-size: 13.5px; line-height: 1.4; color: var(--board-dim);
}

.fim-fatos {
  position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--board-line);
  margin: 0 -22px;
}
.fim-fato { padding: 15px 18px 17px; border-left: 1px solid var(--board-line); min-width: 0; }
.fim-fato:first-child { border-left: 0; }
.fim-fato-n {
  font-family: var(--font-cond); font-weight: 700; font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fim-fato-n i { font-style: normal; color: var(--board-dim); margin: 0 1px; }
.fim-de { font-size: 0.48em; color: var(--board-dim); margin-left: 3px; letter-spacing: 0.03em; }
.fim-fato-l {
  margin-top: 7px;
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--board-dim); line-height: 1.3;
}

/* ── Panels on this screen ────────────────────────────────────────────────── */

#fimtemp .panel-body { padding: 14px 16px; }
/* The final table runs edge to edge inside its plate, like the home screen's does. */
#fimtemp .fim-p-tabela .panel-body { padding: 0; }
#fimtemp .fim-p-tabela .fim-abas { padding: 12px 16px 10px; border-bottom: 1px solid var(--line-soft); }
#fimtemp .fim-p-tabela .nota-in { padding: 12px 16px 14px; margin: 0; border-top: 1px solid var(--line-soft); }

.fim-sub {
  margin: 18px 0 8px;
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.fim-sub:first-child { margin-top: 2px; }

/* A row about one man: position tag, name, and whatever the panel has to say about him. */
.fim-linha {
  /* BOTH text tracks are fractions, and neither is `auto`. An `auto` caption track is sized to its
     max-content BEFORE the fr track gets any leftover, so the longest caption on the screen — "o
     contrato tinha acabado nesta mesma virada" — took 429 of 524px, squeezed the name column to
     29px, and `justify-content: flex-end` then spilled the overflow LEFTWARDS, printing the
     caption straight through the man's name. Measured, at 1440px, on the retirement list.
     Two fractions share the row in a fixed ratio whatever the caption says, and a long one wraps
     to a second line instead of eating the name. */
  display: grid; grid-template-columns: 46px minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.fim-linha:last-child { border-bottom: 0; }
.fim-linha.eu { background: var(--amarelo-bg); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.fim-linha-pos { display: flex; align-items: center; gap: 6px; }
.fim-linha-nome { min-width: 0; font-weight: 500; }
.fim-linha-sub {
  display: block;
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.fim-linha-extra {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  text-align: right; font-size: 12.5px; color: var(--ink-3);
}
.fim-linha-extra b { color: var(--ink); }
/* The whole caption is ONE flex child, so the 8px gap only ever separates it from the "i" button
   and never lands between "45 anos" and the " · " that follows it. */
.fim-extra-txt { min-width: 0; overflow-wrap: break-word; }

/* The one formula on the screen, quoted from spec 13.3 the way the spec writes it. */
#fimtemp code {
  font-size: 0.92em; padding: 1px 5px; border-radius: 4px;
  background: var(--surface-3); color: var(--ink-2); white-space: nowrap;
}
.fim-n { font-family: var(--font-cond); color: var(--ink-3); font-size: 13px; width: 22px; display: inline-block; }
.fim-gols { font-family: var(--font-cond); font-size: 17px; font-variant-numeric: tabular-nums; }

/* A hundred and forty-eight men do not fit on a plate. The list keeps every one of them and gives
   the panel a lid — nothing is cut, it is scrolled. */
.fim-rolagem { max-height: 330px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 8px; padding: 0 10px; }
.fim-lista { margin-top: 10px; }

.fim-chip {
  display: inline-block; font-style: normal;
  padding: 1px 7px 2px; border-radius: 999px;
  background: var(--surface-4); color: var(--ink-2);
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.fim-chip.ouro { background: var(--amarelo); color: var(--amarelo-ink); }

/* ── The two ladders ──────────────────────────────────────────────────────── */

.fim-ladders { display: grid; gap: 10px; margin-top: 14px; }
.fim-ladder { padding: 11px 13px 12px; border-radius: 8px; border-left: var(--mark) solid var(--neutro); background: var(--surface-1); }
.fim-ladder.sobe { border-left-color: var(--sobe); background: var(--ok-bg); }
.fim-ladder.cai { border-left-color: var(--cai); background: var(--bad-bg); }
.fim-ladder-h {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-family: var(--font-cond); font-weight: 700;
  font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink);
}
.fim-ladder.sobe .fim-seta { color: var(--sobe-txt); }
.fim-ladder.cai .fim-seta { color: var(--cai-txt); }
.fim-ladder-n { margin-left: auto; font-weight: 600; color: var(--ink-3); letter-spacing: 0.08em; }
.fim-clubes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.fim-clube-chip {
  padding: 5px 10px; border-radius: 7px;
  background: var(--card); border: 1px solid var(--line);
  font-family: var(--font-cond); font-weight: 600; font-size: 13px;
}
.fim-clube-chip.eu { background: var(--amarelo); border-color: var(--amarelo); color: var(--amarelo-ink); }

/* ── The way back in, from the feed ───────────────────────────────────────── */

.feed-resumo {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px;
  background: var(--info-bg);
  border-bottom: 1px solid var(--line-soft);
  border-left: var(--mark) solid var(--info-ink);
  font-size: 13.5px; color: var(--ink-2);
}
.feed-resumo-txt { min-width: 0; }
.feed-resumo-nota { font-size: 12.5px; color: var(--ink-3); }

/* ── Phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .fim-capa { padding: 18px 14px 0; }
  .fim-topo { padding: 14px 0 18px; gap: 12px; }
  /* The verdict goes under the club rather than beside it: side by side at 375px the two words
     shrink until neither of them is the loud one. */
  .fim-selo { text-align: left; width: 100%; }
  .fim-clube .crest { width: 46px; height: 52px; }
  .fim-fatos { grid-template-columns: 1fr 1fr; margin: 0 -14px; }
  .fim-fato { padding: 12px 14px 14px; border-top: 1px solid var(--board-line); }
  .fim-fato:first-child, .fim-fato:nth-child(2) { border-top: 0; }
  .fim-fato:nth-child(odd) { border-left: 0; }
  /* Five facts in a two-column grid leave the last one alone: it gets the whole width. */
  .fim-fato:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fim-fato-n { font-size: 25px; }

  /* `.stack { display: contents }` dissolves the two columns, so the panels need their own order.
     The table first: it is the thing he has been staring at for thirty-eight rounds. */
  .fim-p-tabela     { order: 1; }
  .fim-p-diretoria  { order: 2; }
  .fim-p-ladder     { order: 3; }
  .fim-p-parou      { order: 4; }
  .fim-p-base       { order: 5; }
  .fim-p-contratos  { order: 6; }
  .fim-p-artilharia { order: 7; }
  .fim-p-lacunas    { order: 8; }

  #fimtemp .panel-body { padding: 12px; }
  #fimtemp .fim-p-tabela .fim-abas { padding: 10px 12px 9px; }
  #fimtemp .fim-p-tabela .nota-in { padding: 11px 12px 12px; }
  .fim-linha { grid-template-columns: 42px minmax(0, 1.15fr) minmax(0, 1fr); font-size: 13px; gap: 8px; }
  .fim-linha-extra { font-size: 11.5px; }
  .fim-rolagem { max-height: 280px; }
  .feed-resumo { padding: 11px 12px; }
}

@media (max-width: 420px) {
  /* At this width the extra column would wrap under a two-line name and the row stops being a
     row. It goes below the name instead, left-aligned, which is where the eye already is. */
  .fim-linha { grid-template-columns: 42px minmax(0, 1fr); }
  .fim-linha-extra { grid-column: 2; justify-content: flex-start; text-align: left; margin-top: 2px; }
}

@media (max-width: 380px) {
  /* The player card's six-figure grid drops to two columns here, and it should. These three are a
     SET — revealed, signed, cap — and two columns leave the third one alone next to an empty
     plate. Three narrow cells with short labels beat two wide ones and a hole. */
  #fimtemp .stat-grid { grid-template-columns: repeat(3, 1fr); }
  #fimtemp .stat-grid > div { padding: 10px 5px; }
  #fimtemp .stat-grid b { font-size: 17px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   A IMPRENSA — Jornal, Coletiva, Empresário (spec §12, §11, §14)

   Direction. The rest of the game is a clipboard: green board, white plates, one yellow. The
   newspaper is the one place that is allowed to be PRINT — black on off-white, a masthead with
   rules over and under it, condensed type set big and tight. §12.1.2 says the headline is the
   whole product, so on this screen the headline is physically the biggest thing there is and
   everything else (week picker, filter, share) is grey furniture around it.

   The chip strip, the ten-tick gauge and the `.parcela` rows are NOT redefined here: they already
   arrived with the twelve screens this branch was written against, and the press screens use them
   as they are. §12.7 asks for one of each in the whole game, not three that agree by luck.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Jornal ──────────────────────────────────────────────────────────────── */

.jn-banca {
  background: var(--paper);
  border: 1px solid var(--paper-border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 18px;
}
.jn-cabeca { padding: 18px 20px 12px; text-align: center; border-bottom: 3px double var(--paper-rule); }
.jn-masthead {
  font-family: var(--font-cond); font-weight: 700;
  font-size: clamp(24px, 4vw, 40px); line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--paper-ink);
}
.jn-data {
  margin-top: 6px;
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-ink-5);
}
.jn-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--paper-line); background: var(--paper-2);
}
.jn-passo { display: flex; gap: 6px; }
/* COOKBOOK §3: pagination and the "Tudo / Só o meu clube" filter "viram chips do padrão" — one pill
   family in that toolbar, not a rectangular secondary button beside two pill filters. */
.jn-passo .secbtn { padding: 7px 12px; min-height: 36px; font-size: 12.5px; border-radius: 999px; }
.jn-filtros { display: flex; gap: 6px; }
.jn-f {
  background: none; border: 1px solid var(--paper-btn-line); border-radius: 999px;
  padding: 7px 13px; min-height: 36px; cursor: pointer;
  font-family: var(--font-cond); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-ink-4);
}
.jn-f:hover { background: var(--paper-hover); color: var(--paper-ink); }
.jn-f.on { background: var(--board); border-color: var(--board); color: var(--on-board); font-weight: 700; }

.jn-corpo { padding: 4px 16px 18px; }

/* THE HERO. §12.1.2: one line, and it is the biggest thing on the page. */
.jn-hero { padding: 20px 4px 18px; border-bottom: 1px solid var(--paper-line); }
.jn-hero .jn-txt {
  /* COOKBOOK §3: "é a única tela onde a prosa manda" — the one headline that breaks the game's
     condensed-caps voice on purpose and reads like a real front page, in the prose typeface. */
  font-family: var(--font-ui); font-weight: 800;
  /* 26–30px per spec, kept fluid (not flat) for the same reason the old floor was tuned: a UI
     typeface is wider than the condensed one it replaces, so a flat 30px would wrap a median
     headline to three lines at 375px. This keeps the spec's floor and ceiling and lets it breathe
     between them instead of jumping straight to 30. */
  font-size: clamp(26px, 3.6vw, 30px); line-height: 1.15; letter-spacing: normal;
  /* A three-line hero must not leave one orphan word on the last line. */
  text-wrap: balance;
  color: var(--paper-ink); margin: 0;
}
.jn-grade {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.jn-grade .jn-item { padding: 15px 4px; border-bottom: 1px solid var(--paper-line-2); }
.jn-grade .jn-txt {
  /* COOKBOOK §3: "destaques em 4 colunas de ui 15px/700" — same prose voice as the hero, one size
     down. A taller line-height than the old condensed value: ui faces need more room to breathe. */
  font-family: var(--font-ui); font-weight: 700;
  font-size: 15px; line-height: 1.3; letter-spacing: normal;
  color: var(--paper-ink-2); margin: 0;
}
.jn-item { position: relative; }
.jn-item.aceso { background: var(--amarelo-bg); box-shadow: inset 3px 0 0 var(--amarelo); }
.jn-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; min-height: 26px;
}
.jn-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.jn-chip {
  /* COOKBOOK §3: "pílula 10.5px cond sobre --paper, borda --paper-line" — was a squared tag; a chip
     is a pill, and the plain paper-line (not the button-only paper-btn-line) since it isn't clickable. */
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-ink-5); border: 1px solid var(--paper-line); border-radius: 999px;
  padding: 2px 8px 2px 3px;
}
/* Menor que o `xs` normal: a pílula tem doze pixels de altura útil, e o escudo tem que caber nela
   sem empurrar a linha do jornal. */
.jn-chip .crest { width: 13px; height: 15px; }
.jn-chip.meu { color: var(--amarelo-bg-ink); background: var(--amarelo-bg); border-color: var(--warn-line); font-weight: 700; }
.jn-share {
  /* COOKBOOK §3: "Botões Compartilhar/Copiar perdem a caixa: viram link cond 12px/.10em uppercase
     --ink-3, hover --ink." A jornal doesn't carry app buttons inside it — losing the border, the fill
     and the pill radius is the whole point. The success flash becomes a color change, not a green box. */
  flex: 0 0 auto;
  background: none; border: 0; border-radius: 0;
  padding: 5px 2px; min-height: 30px; cursor: pointer;
  font-family: var(--font-cond); font-weight: 700; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.55; transition: opacity 120ms ease, color 120ms ease;
}
.jn-item:hover .jn-share, .jn-share:focus-visible { opacity: 1; }
.jn-share:hover { color: var(--ink); }
.jn-share.copiado { opacity: 1; color: var(--sobe-txt); }

/* The small print. §12.1.1's "nota de uma linha" — everything else the week produced, printed. */
.jn-notas { margin-top: 14px; border-top: 3px double var(--paper-rule); padding-top: 12px; }
.jn-notas-cabeca {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-ink-5); margin-bottom: 6px;
}
/* COOKBOOK §3: "'Em uma linha' em ui 14px com filete --paper-line entre itens" — a filete is a thin
   ruled line, not a dotted one, and the token named is the plain paper rule, not the darker -3. */
.jn-notas .jn-item { padding: 9px 4px; border-bottom: 1px solid var(--paper-line); }
.jn-notas .jn-txt { margin: 0; font-size: 14px; line-height: 1.35; color: var(--paper-ink-3); }
.jn-notas .jn-pe { margin-top: 5px; min-height: 22px; }
.jn-mais { margin-top: 12px; width: 100%; justify-content: center; }

.jn-chamada {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 14px 16px;
  background: var(--amarelo-bg); border: 1px solid var(--warn-line); border-radius: var(--r);
}
.jn-chamada > div { flex: 1 1 240px; font-size: 14px; color: var(--ink); }
.jn-chamada .advance { flex: 0 0 auto; }

.jn-arquivo { display: flex; flex-wrap: wrap; gap: 6px; }
.jn-ed {
  display: inline-grid; place-items: center; gap: 0;
  min-width: 46px; padding: 6px 8px; min-height: 44px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  font-family: var(--font-cond); font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.jn-ed small { font-size: 10px; font-weight: 400; color: var(--ink-3); }
.jn-ed:hover { border-color: var(--neutro); }
.jn-ed.on { background: var(--board); border-color: var(--board); color: var(--amarelo); }
.jn-ed.on small { color: var(--board-dim); }

/* ── a pressão (§12.5) ───────────────────────────────────────────────────── */

.pr-topo { display: flex; align-items: center; gap: 14px; }
.pr-n { font-family: var(--font-cond); font-weight: 700; font-size: 40px; line-height: 1; color: var(--tick); }
.pr-n span { font-size: 15px; color: var(--ink-3); }
.pr-l { min-width: 0; }
.pr-l b { font-family: var(--font-cond); font-size: 17px; letter-spacing: 0.02em; }
.pr-parcelas { margin-top: 12px; display: grid; gap: 1px; background: var(--line-soft); border-radius: 8px; overflow: hidden; }
.pr-parcelas .parcela { background: var(--card); }
.pr-graf { margin-top: 12px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px; background: var(--surface-1); }
.pr-bars { display: flex; align-items: flex-end; gap: 2px; height: 62px; overflow-x: auto; scrollbar-width: none; }
.pr-bars::-webkit-scrollbar { display: none; }
.pr-col { flex: 0 0 7px; height: 100%; display: flex; align-items: flex-end; }
.pr-col i { display: block; width: 100%; border-radius: 2px 2px 0 0; }
.pr-col.agora i { outline: 1px solid var(--ink); outline-offset: 1px; }
.pr-cenas { margin-top: 12px; }

/* ── mesa redonda (§12.4) ────────────────────────────────────────────────── */

.mesa-linha { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.mesa-linha:last-of-type { border-bottom: 0; }
.mesa-id { min-width: 0; flex: 1 1 auto; }
.mesa-id b { display: block; font-family: var(--font-cond); font-size: 17px; }
.mesa-id span { display: block; font-size: 13px; color: var(--ink-2); }
.mesa-n { flex: 0 0 auto; text-align: right; font-family: var(--font-cond); font-weight: 700; font-size: 21px; }
.mesa-n small { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.mesa-mov { font-size: 13px; margin-left: 5px; color: var(--ink-3); }
/* Pressure going UP is bad news, so the arrow that rises takes the red. */
.mesa-mov.sobe { color: var(--cai-txt); }
.mesa-mov.cai { color: var(--sobe-txt); }

/* ── Coletiva ────────────────────────────────────────────────────────────── */

.col-pressao {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding: 13px 16px;
  background:
    radial-gradient(130% 170% at 12% -30%, rgba(255, 255, 255, 0.09), transparent 52%),
    radial-gradient(130% 170% at 88% -30%, rgba(255, 255, 255, 0.05), transparent 52%),
    var(--board);
  border-radius: var(--r);
}
.col-pressao-l { font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--board-dim); }
/* The meter needs a width of its own HERE and nowhere else. `.gauge i` is `flex: 1 1 0`, so the
   ticks take their size from the meter — and inside this strip the meter is itself a flex ITEM,
   whose base size is its content's max-content width, which is ten zeroes. The result measured
   27px wide with every tick at 0: the ten ticks have never been visible on this screen. Everywhere
   else the meter sits in a block cell and fills it, which is why only this one was blind. */
.col-pressao .gauge { margin: 0; flex: 0 0 132px; }
/* The "escura" gauge is meant for a light plate; this strip's plate is now dark, so the off ticks
   get the board's own line colour instead of the light-surface one baked into `.gauge.escura`. */
.col-pressao .gauge.escura i { background: var(--board-line); }
.col-pressao .gauge.escura i.on { background: var(--tick); }
.col-pressao-n {
  font-family: var(--font-cond); font-weight: 700; font-size: 15px; color: var(--on-board);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.col-pressao-p { margin-left: auto; font-size: 12.5px; color: var(--board-dim); }

.col-porque {
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--surface-2); border-left: var(--mark) solid var(--track); border-radius: 0 8px 8px 0;
  font-size: 14px;
}

.col-porque.ameaca { border-left-color: var(--warn-strong); background: var(--warn-bg); }

.col-q { padding: 16px 0; border-top: 1px solid var(--line-soft); }
.col-q:first-of-type { border-top: 0; padding-top: 4px; }

.jorn { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.jorn-av {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--board); color: var(--on-board);
  font-family: var(--font-cond); font-weight: 700; font-size: 15px;
}
.jorn-id { min-width: 0; }
.jorn-id b { display: block; font-family: var(--font-cond); font-size: 15px; letter-spacing: 0.01em; }
.jorn-id span { display: block; font-size: 12.5px; color: var(--ink-3); }
.jorn-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.jorn-tag {
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-2); background: var(--surface-3); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 8px;
}
/* The four styles of §12.2, told apart at a glance: who is here to help and who is here to hurt. */
.jorn-tag.est-enemy { color: var(--bad-ink); background: var(--bad-bg); border-color: var(--bad-line); }
.jorn-tag.est-headline_hunter { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); }
.jorn-tag.est-sycophant { color: var(--ok-ink); background: var(--ok-bg); border-color: var(--ok-line); }

.col-pergunta {
  margin: 12px 0 14px;
  font-family: var(--font-cond); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.16; letter-spacing: -0.005em;
  color: var(--ink);
}

.col-respostas { display: grid; gap: 8px; }
.col-r {
  display: grid; gap: 5px; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; min-height: 48px; cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 90ms ease;
}
.col-r:hover { border-color: var(--ink-3); background: var(--surface-2); }
.col-r:active { transform: translateY(1px); }
.col-r-tom {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.col-r.tom-proteger .col-r-tom { color: var(--ok-ink); }
.col-r.tom-cobrar .col-r-tom { color: var(--bad-ink); }
.col-r.tom-provocar .col-r-tom { color: var(--warn-ink); }
.col-r.tom-humilde .col-r-tom { color: var(--info-ink-2); }
.col-r-txt { font-size: 15px; line-height: 1.35; color: var(--ink); }
.col-r-ef { display: flex; flex-wrap: wrap; gap: 5px; }

.efeito {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.06em;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; color: var(--ink-2);
  background: var(--surface-2);
}
.efeito.mais { color: var(--ok-ink); background: var(--ok-bg-2); border-color: var(--ok-line); }
.efeito.menos { color: var(--bad-ink); background: var(--bad-bg-2); border-color: var(--bad-line); }

.col-q.respondida .col-pergunta { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); }
.col-dita {
  margin: 0 0 12px; padding: 11px 14px;
  background: var(--board); border-radius: 10px; color: var(--on-board-2);
}
.col-dita p { margin: 5px 0 0; font-size: 15px; line-height: 1.35; }
.col-tom {
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-board);
}
.col-tom.mini { color: var(--ink-3); margin-right: 6px; }

/* §12.7's one "o que mudou" component. Same markup in the conference and in the ledger. */
.col-mudou { border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.col-mudou-cabeca {
  padding: 6px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.mudou {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.mudou:last-child { border-bottom: 0; }
.mudou-o { flex: 1 1 auto; color: var(--ink-2); }
.mudou-de, .mudou-para { font-family: var(--font-cond); font-weight: 700; font-size: 15px; }
.mudou-de { color: var(--ink-3); }
.mudou-seta { font-family: var(--font-cond); font-weight: 700; font-size: 13px; }
.mudou-seta.mais { color: var(--sobe-txt); }
.mudou-seta.menos { color: var(--cai-txt); }
.mudou.nao { color: var(--ink-3); }
.mudou-por { font-size: 12.5px; }
.col-q.travada .col-pergunta { color: var(--ink-3); }

.col-vazia { padding: 8px 0 4px; }
.col-vazia-t { font-family: var(--font-cond); font-weight: 700; font-size: clamp(21px, 2.4vw, 28px); }
.col-vazia p { margin: 8px 0 0; max-width: 56ch; color: var(--ink-2); }

.col-contador { display: flex; align-items: center; gap: 13px; }
.col-contador-bolas { display: flex; gap: 5px; }
.col-contador-bolas i { width: 15px; height: 15px; border-radius: 50%; background: var(--line); }
.col-contador-bolas i.on { background: var(--cai); }
.col-contador-txt b { display: block; font-family: var(--font-cond); font-size: 16px; }
.col-contador-txt span { font-size: 13px; color: var(--ink-2); }
.col-contador.perigo .col-contador-txt b { color: var(--cai-txt); }

.col-hist { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.col-hist:last-child { border-bottom: 0; }
.col-hist-s { flex: 0 0 34px; font-family: var(--font-cond); font-weight: 700; color: var(--ink-3); }
.col-hist-t { min-width: 0; color: var(--ink-2); }
.col-hist.pulada .col-hist-t { color: var(--cai-txt); }

/* ── Empresário ──────────────────────────────────────────────────────────── */

/* Honesty is a feature, not a defect being flagged — this panel explains how the score and the
   door work, so it gets the neutral "info" marker the cookbook names for it, not the alarm-red
   mark it was wearing back when the screen said "o empresário não existe". */
.emp-topo {
  margin-top: 18px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--line); border-left: var(--mark) solid var(--info-bg-2);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.emp-topo-t { font-family: var(--font-cond); font-weight: 700; font-size: clamp(21px, 2.6vw, 29px); line-height: 1.1; }
.emp-topo p { margin: 8px 0 0; max-width: 72ch; color: var(--ink-2); }

.emp-lista { margin-top: 12px; }
/* Reserve the mark column on every row, transparent by default, so an unhappy player's row can
   carry the --cai mark (Regra 4: "toda linha com estado: marca de margem 3px") without shifting
   that row's columns out of alignment with the rows around it — the same shape as .entrada-item. */
.emp-linha {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 28px 44px minmax(0, 1fr) 74px 62px minmax(0, 1.15fr);
  padding: 9px 0 9px 10px; border-bottom: 1px solid var(--line-soft);
  border-left: var(--mark) solid transparent;
}
/* Insatisfeito (nota <= 40): the row that costs least when someone bids for the man gets the
   negative verdict mark, same grammar as a zone-down table row or a bad inbox message. */
.emp-linha.insatisfeito { border-left-color: var(--cai); }
.emp-linha:last-child { border-bottom: 0; }
/* The row opens the man's card, so it has to look like something that opens. */
.emp-linha { cursor: pointer; border-radius: 8px; transition: background 120ms ease; }
.emp-linha:hover { background: var(--surface-2); }
.emp-linha:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 1px; }
.emp-pos {
  display: grid; place-items: center; height: 24px; border-radius: 5px;
  background: var(--surface-3); border: 1px solid var(--line-soft);
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2);
}
.emp-id { min-width: 0; }
.emp-id b { display: block; font-family: var(--font-cond); font-size: 15.5px; }
.emp-id span { display: block; font-size: 12px; color: var(--ink-3); }
.emp-vaga {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); text-align: center;
}
.emp-nota { text-align: center; }
/* Every number in the game is --font-cond + tabular-nums + nowrap (Regra 5). The contentment
   score sat in --font-cond already but was missing the numeric-formatting half of the rule. */
.emp-nota b {
  display: block; font-family: var(--font-cond); font-weight: 700; font-size: 21px; color: var(--tick);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.emp-nota small { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.emp-motivo { min-width: 0; font-size: 12.5px; }
.emp-motivo b { display: block; color: var(--ink); }
.emp-motivo span { display: block; color: var(--ink-3); }

.emp-medida { display: grid; gap: 1px; background: var(--line-soft); border-radius: 8px; overflow: hidden; }
.emp-medida .parcela { background: var(--card); }
.emp-prio { display: grid; gap: 7px; margin-top: 10px; }
.emp-prio-i { display: block; font-size: 13px; }
.emp-prio-i b { font-family: var(--font-cond); font-size: 14px; margin-right: 6px; }
.emp-prio-i span { color: var(--ink-3); }

/* ── the two widths ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .jn-grade { grid-template-columns: 1fr; }
  .col-pressao-p { margin-left: 0; flex: 1 0 100%; }
}

@media (max-width: 560px) {
  .telas-in { padding: 6px 12px; }
  .telas-sub-in { padding: 4px 12px; }
  .jn-cabeca { padding: 14px 14px 10px; }
  .jn-corpo { padding: 2px 12px 14px; }
  .jn-barra { padding: 9px 12px; }
  .jn-filtros { flex: 1 1 100%; }
  .jn-f { flex: 1 1 0; justify-content: center; text-align: center; }
  /* A share button that only appears on hover is a button that does not exist on a phone. */
  .jn-share { opacity: 1; }
  .jn-hero { padding: 15px 2px 14px; }
  .jn-chamada .advance { flex: 1 1 100%; justify-content: center; }
  .col-pressao { gap: 9px; }
  .jorn-tags { margin-left: 0; flex: 1 0 100%; }
  .emp-linha {
    /* 56 px clipped the word "contente" off the right edge of the card at 375 px. The column is
       sized to the label it has to hold, and the label's tracking is tightened to fit it. */
    grid-template-columns: 28px 40px minmax(0, 1fr) 68px;
    grid-template-areas: "foto pos id nota" "motivo motivo motivo motivo";
    row-gap: 4px;
    gap: 8px;
  }
  .emp-nota small { font-size: 9.5px; letter-spacing: 0.03em; }
  .emp-linha > .av { grid-area: foto; }
  .emp-pos { grid-area: pos; }
  .emp-id { grid-area: id; }
  .emp-nota { grid-area: nota; }
  .emp-motivo { grid-area: motivo; }
  .emp-vaga { display: none; }
}

.col-conta { border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.col-conta:last-child { margin-bottom: 0; }
.col-conta-cabeca {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-2);
}

/* §12.7's single five-word scale beside the number it describes, on the pressure panel. */
.pr-parcelas .parcela-v small {
  margin-left: 7px; font-family: var(--font-ui); font-weight: 400; font-size: 12px; color: var(--ink-3);
}

/* ── Club crest ───────────────────────────────────────────────────────────────
 *
 * Two layers in one box. `::before` is the badge drawn from the club's own colours (shield shape,
 * shirt pattern), and it is what every club gets for free. `.crest-img` is the licensed crest file
 * from web/crests/, which is not in this repository; when one loads it adds `.has-img` and the
 * drawn layer steps aside, because a real badge is a transparent PNG and would show the stripes
 * through it.
 *
 * The three letters are dropped below 32px. At table-row size they are mud; the colours alone
 * already say which club it is, which is the whole reason a crest is here.
 */

.crest {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  vertical-align: middle;
  line-height: 1;
}
.crest::before {
  content: '';
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
  background: var(--c1);
  filter: drop-shadow(0 1px 1px rgba(16, 19, 20, 0.3));
}
.crest.has-img::before,
.crest.has-img .crest-sigla { display: none; }

.crest-stripes::before {
  background: repeating-linear-gradient(90deg, var(--c1) 0 20%, var(--c2) 20% 40%);
}
.crest-hoops::before {
  background: repeating-linear-gradient(180deg, var(--c1) 0 20%, var(--c2) 20% 40%);
}
.crest-sash::before {
  background: linear-gradient(118deg, var(--c1) 0 33%, var(--c2) 33% 55%, var(--c1) 55% 100%);
}

.crest-sigla {
  position: relative; z-index: 1;
  margin-bottom: 14%;                       /* the shield's point is at the bottom; sit above it */
  font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.03em;
  color: var(--ci);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.crest-img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain;
}

.crest-xs { width: 18px; height: 20px; }
.crest-sm { width: 24px; height: 27px; }
.crest-md { width: 40px; height: 45px; }
.crest-md .crest-sigla { font-size: 13px; }
.crest-lg { width: 56px; height: 63px; }
.crest-lg .crest-sigla { font-size: 18px; }

/* The club cell in a league table: crest, then the name, on one line that still truncates. */
.t-clube { display: flex; align-items: center; gap: 8px; min-width: 0; }
.t-clube-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Day / night button ───────────────────────────────────────────────────────
 *
 * Same pill as every other control in the top bar, sized down to its icon. It sits before "Voltar"
 * so the way back stays at the edge, where the thumb already goes. */

.tema-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: 1px solid var(--board-line); border-radius: 999px;
  color: var(--board-dim); cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.tema-btn:hover { color: var(--on-board); border-color: rgba(255, 255, 255, 0.4); }
.tema-btn svg { display: block; }

/* ── Before kick-off ──────────────────────────────────────────────────────────
 *
 * The narration box is the tallest thing on the match screen and it is empty until the ball moves.
 * This is what stands there in the meantime: the fixture, centred, with the two crests. It is not
 * a loading state — nothing is loading — so it says what it is waiting for and where to press. */

.saque {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 32px 20px; text-align: center;
}
.saque-times { display: flex; align-items: center; gap: clamp(18px, 6vw, 48px); }
.saque-time {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 30vw;
}
.saque-time b {
  font-family: var(--font-cond); font-weight: 700;
  font-size: clamp(15px, 2.4vw, 20px); letter-spacing: 0.02em; line-height: 1.1;
  color: var(--ink-2);
}
.saque-time.eu b { color: var(--ink); }
/* The one you manage keeps the crest at full strength; the opponent steps back a little, the same
   way the club's own row is the only coloured one in the table. */
.saque-time:not(.eu) .crest { opacity: 0.72; }
.saque-x {
  font-family: var(--font-cond); font-size: clamp(20px, 4vw, 30px);
  color: var(--ink-4); margin-bottom: 26px;
}
.saque-linha { margin: 0; font-size: 14.5px; color: var(--ink-3); }
.saque-linha b { color: var(--ink-2); }

@media (max-width: 560px) {
  .saque { min-height: 40vh; gap: 18px; }
  .saque-time { max-width: 36vw; }
}

/* The crest joins the three letters in the scoreboard, beside them and turned inward so both
   crests face the score. Small on purpose: the score stays the loudest thing on the bar. */
.sb-time { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
/* Home sits left of the score, so its crest has to be the rightmost thing in the group: the row is
   reversed rather than the markup, which keeps the crest first for a screen reader. */
.sb-time:not(.dir) { flex-direction: row-reverse; }
.sb-id { min-width: 0; }

/* ── The face beside the name ─────────────────────────────────────────────────
 *
 * Every player has one. A man with a portrait in web/photos/ gets his face; everyone else — and
 * that includes the thirty-seven the generator invented, who have no face to find — gets his
 * initials on a plate ringed in his club's colour. The ring is the only club-coloured part, because
 * a squad list is thirty-three men from the SAME club and a wall of one colour says nothing.
 *
 * THE SHAPE IS THE PHOTOGRAPH'S. The portraits are 300x390, a head-and-shoulders crop with the hair
 * at the very top and the chin at about 85% — there is no square inside that which holds a whole
 * face, so a round avatar cut every chin off. These are 10:13, the picture's own ratio, which means
 * object-fit cover crops nothing at all. It also stops looking like a contact list and starts
 * looking like what it is: the photo on a player's card.
 *
 * Rounded rectangle against the crest's pointed shield: two shapes, two meanings, and a transfer
 * list can carry both without either being mistaken for the other. */

.av {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface-3);
  vertical-align: middle;
  line-height: 1;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  .av { background: color-mix(in srgb, var(--c1) 12%, var(--surface-2)); }
}
/* The ring is its own layer rather than an inset shadow on the box: an inset shadow paints under
   the content, and the photo would cover it. */
.av::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--c1);
}
.av-in {
  font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-2);
}
.av-img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  /* Same ratio as the source, so this neither crops nor stretches. Stated anyway: a hand-placed
     file of another shape should be cropped from the top, where a face is. */
  object-fit: cover; object-position: 50% 12%;
}

.av-xs { width: 20px; height: 26px; border-radius: 4px; }
.av-xs .av-in { font-size: 10px; letter-spacing: 0; }
.av-sm { width: 27px; height: 35px; }
.av-sm .av-in { font-size: 11px; }
.av-md { width: 40px; height: 52px; border-radius: 7px; }
.av-md .av-in { font-size: 15px; }
.av-lg { width: 76px; height: 99px; border-radius: 9px; }
.av-lg .av-in { font-size: 28px; }
.av-lg::after { box-shadow: inset 0 0 0 1.5px var(--c1); }

/* The player cell in the squad table: face, then the name, on one line that still truncates. */
.t-jogador { display: flex; align-items: center; gap: 9px; min-width: 0; }
.t-jogador-nome { min-width: 0; }

/* Man of the match: the face is sized to the rating plate beside it, so the row keeps its height
   and the two blocks read as one object. */
.craque .av { width: 48px; height: 62px; border-radius: 8px; }
.craque .av-in { font-size: 18px; }

/* ══════════════════════════════════════════════════════════════════════════════
   História: what the weeks added up to.

   The only screen that is not about this week. It reuses the vocabulary the rest of the game
   already has — the panel, the league table, the segmented control, the crest and the portrait —
   and adds nothing new except the honours board, which is the one thing no other screen shows.
   ══════════════════════════════════════════════════════════════════════════════ */

/* The promise, shown only while the book has no closed season. Not an empty state: nothing is
   missing, the first season simply has not finished. */
.h-promessa {
  margin: 0 0 14px; padding: 12px 14px;
  border-radius: var(--r); border: 1px solid var(--warn-line);
  background: var(--amarelo-bg); color: var(--amarelo-bg-ink);
  font-size: 14px; line-height: 1.45;
}
.h-promessa b { font-weight: 700; }

.h-seletor { margin-bottom: 12px; }
.h-abas { margin-bottom: 18px; }
.h-listas { margin-bottom: 12px; }

/* Two panels in a row on a desktop, stacked on a phone, like the home screen's columns. */
#historiaBody .panel + .panel { margin-top: 18px; }

/* A club in a list: crest, name, and the name is what gives way. */
.h-clube { display: flex; align-items: center; gap: 8px; min-width: 0; }
.h-clube-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A player in a chart: face, name, and the club under it in the label voice. */
.h-jog { display: flex; align-items: center; gap: 9px; min-width: 0; text-align: left; }
.h-jog-id { min-width: 0; display: grid; }
.h-jog-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-jog-clube {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The whole row opens his card, so it has to look like something that opens without becoming a
   button-shaped thing inside a table cell. */
.h-abrir {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  border-radius: 6px;
}
.h-abrir:hover .h-jog-nome { color: var(--sobe-txt); }
.h-abrir:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }

/* The champion's row in a finished table. The yellow is already spent on his own club's row, so a
   champion who is not his club is marked by weight and a rule, never by a second yellow. */
tr.h-campeao td { font-weight: 700; }
tr.h-campeao td:first-child { box-shadow: inset var(--mark) 0 0 var(--sobe); }

/* ── the honours board ─────────────────────────────────────────────────────── */

.h-honra {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.6fr);
  align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.h-honra:last-child { border-bottom: 0; }
.h-honra.eu { background: var(--amarelo-bg); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.h-honra-n {
  font-family: var(--font-cond); font-weight: 700; font-size: 22px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.h-honra-anos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-family: var(--font-cond); font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--ink-3);
}
.h-honra-anos small { font-size: 10px; margin-left: 2px; color: var(--ink-4); }
/* A run of titles in a row is the story, so it is the one thing on the board that is loud. */
.h-fita {
  padding: 2px 8px; border-radius: 999px;
  background: var(--ok-bg-2); color: var(--ok-ink);
  font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── the manager's own card ────────────────────────────────────────────────── */

.h-cv {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin-bottom: 14px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden;
}
.h-cv > div { padding: 12px 10px; background: var(--surface-1); text-align: center; }
.h-cv b {
  display: block; font-family: var(--font-cond); font-weight: 700; font-size: 26px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.h-cv span {
  display: block; margin-top: 4px;
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.h-nota { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.h-titulo { color: var(--amarelo-bg-ink); }
.h-sobe { color: var(--sobe-txt); }
.h-cai { color: var(--cai-txt); }
/* The season being played right now sits at the top of the CV, quieter than the finished ones:
   it is not a result yet. */
tr.h-agora td { background: var(--surface-2); }
tr.h-agora .h-nota { color: var(--ink-3); font-style: italic; }

@media (max-width: 560px) {
  .h-honra { grid-template-columns: minmax(0, 1fr) 34px; grid-template-areas: "clube n" "anos anos"; row-gap: 6px; }
  .h-honra > .h-clube { grid-area: clube; }
  .h-honra-n { grid-area: n; }
  .h-honra-anos { grid-area: anos; }
  .h-cv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-cv b { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Calendário: the whole season, on one page.
   ══════════════════════════════════════════════════════════════════════════════ */

.cal-intro { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.cal-seletor { margin-bottom: 16px; }
/* Forty-eight week buttons wrap into a block; the numbers are narrow, so they are given a fixed
   width and read as a grid rather than as a ragged line of pills. */
.cal-seletor .seg-b { min-width: 36px; justify-content: center; }
.cal-seletor .seg-b.agora { border-color: var(--amarelo); color: var(--amarelo-bg-ink); }

table.cal { width: 100%; }
table.cal td, table.cal th { vertical-align: middle; }

.cal-sem { font-family: var(--font-cond); font-weight: 700; font-variant-numeric: tabular-nums; }
/* A midweek round is the thing a manager most needs to see coming: it is the week he closes
   Saturday, reads the injuries, and picks again for Wednesday. */
.cal-sem i {
  display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 4px;
  background: var(--warn-bg); color: var(--warn-ink);
  font-family: var(--font-cond); font-style: normal; font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.cal-rod, .cal-onde {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.cal-clube { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cal-clube.dir { justify-content: flex-end; }
.cal-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-classico {
  flex: 0 0 auto; padding: 1px 7px; border-radius: 999px;
  background: var(--bad-bg-2); color: var(--bad-ink);
  font-family: var(--font-cond); font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.cal-placar {
  text-align: center; white-space: nowrap;
  font-family: var(--font-cond); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.cal-placar i { font-style: normal; color: var(--ink-4); margin: 0 4px; font-size: 0.75em; }
/* Won, drew, lost — the same three verdict colours the rest of the game uses, and no others. */
.cal-placar.v { color: var(--sobe-txt); }
.cal-placar.d { color: var(--cai-txt); }
.cal-placar.e { color: var(--ink-2); }

/* A round already played steps back; the one being played now is the only yellow on the page. */
tr.cal-linha.passou td { color: var(--ink-3); }
tr.cal-linha.passou .cal-nome { color: var(--ink-2); }
tr.cal-linha.agora td { background: var(--amarelo-bg); }
tr.cal-linha.agora td:first-child { box-shadow: inset var(--mark) 0 0 var(--amarelo); }
tr.cal-linha.agora .cal-placar { color: var(--amarelo-bg-ink); }
tr.cal-linha.eu td { background: var(--surface-2); font-weight: 600; }

.cal-mandante, .cal-visitante { width: 44%; }

@media (max-width: 560px) {
  .cal-rod { display: none; }
  /* Scoped to #calendario ON PURPOSE. The calendar drops the pill on a phone because its row is a
     five-column table fighting for width; the same class now marks the fixture on the Escalação
     screen, where there is a whole line to spare — and an unscoped rule hid the clássico exactly
     where the manager is picking the team for it. */
  #calendario .cal-classico { display: none; }
  .cal-seletor .seg-b { min-width: 32px; padding: 6px 8px; }
}

/* ── Copa do Brasil: the bracket, and the draw ─────────────────────────────── */

/* Where he stands in it, said before anything else on the screen. */
.cop-eu {
  margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--board);
  border-radius: 8px; background: var(--card);
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.cop-eu b { color: var(--ink); }
.cop-eu.campeao { border-left-color: var(--amarelo); }
.cop-eu.fora { border-left-color: var(--cai); }

.cop-seletor { margin-bottom: 12px; }
/* A round he is in: marked on the selector, so he can find himself without opening all six. */
.cop-seletor .seg-b.agora { border-color: var(--board); }

.cop-tab td { vertical-align: middle; }
.cop-casa { width: 38%; }
.cop-fora { width: 38%; }
.cop-placar { width: 74px; white-space: nowrap; font-family: var(--font-cond); font-weight: 700; }
.cop-placar i { font-style: normal; color: var(--ink-3); padding: 0 4px; }
.cop-nota { color: var(--ink-3); font-size: 12.5px; }
/* The club that went through, said by weight rather than by colour: a knockout has no good news
   and bad news, it has one of each in every line. */
.cop-casa.passou .cal-nome, .cop-fora.passou .cal-nome { font-weight: 700; color: var(--ink); }
.cop-linha.fechada .cop-placar { color: var(--ink-2); }
.cop-linha.eu td { background: var(--amarelo-bg); }
.cop-linha.eu td:first-child { box-shadow: inset 3px 0 0 var(--amarelo); }

/* The draw. A full-screen moment, not a panel: it is the one thing on the screen while it runs. */
.sorteio {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.sorteio-in {
  display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: min(720px, 92vh);
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); box-shadow: var(--shadow-far);
  overflow: hidden;
}
.sorteio-topo { padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.sorteio-t {
  font-family: var(--font-cond); font-weight: 700; font-size: 19px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
}
.sorteio-s { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.sorteio-lista { flex: 1 1 auto; overflow-y: auto; padding: 6px 0; }
.sorteio-par {
  display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center;
  gap: 6px; padding: 9px 18px; font-size: 14px;
  /* Each one arrives, rather than being there. The whole point of a draw is the arriving. */
  animation: sorteio-entra 220ms ease-out both;
}
.sorteio-par .cal-nome { font-weight: 600; }
.sorteio-x { text-align: center; color: var(--ink-3); font-weight: 700; }
.sorteio-par.eu {
  background: var(--amarelo-bg); color: var(--amarelo-bg-ink);
  box-shadow: inset 3px 0 0 var(--amarelo);
}
.sorteio-par.eu .cal-nome { font-weight: 700; color: var(--ink); }
@keyframes sorteio-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
/* A manager who has watched five of these should not have to watch the sixth arrive slowly. */
@media (prefers-reduced-motion: reduce) {
  .sorteio-par { animation: none; }
}
.sorteio-acoes {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--line-soft);
}

/* The draw that is coming. A date on the wall, not a panel: it is one line of anticipation. */
.cop-sorteio {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 11px 14px;
  border: 1px dashed var(--line); border-radius: 8px;
  background: var(--surface-2);
}
.cop-sorteio-t {
  font-family: var(--font-cond); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.cop-sorteio-q { font-size: 13.5px; color: var(--ink-3); }
.cop-sorteio-q b { color: var(--ink); }

/* ── Libertadores e Sul-Americana ──────────────────────────────────────────── */

/* Where he stands, marked so it reads before the eight tables under it. */
.panel.destaque { border-left: 3px solid var(--board); }

.cont-seletor { display: flex; width: 100%; margin: 0 0 12px; }
.cont-seletor .seg-b { flex: 1 1 0; }
.cont-seletor .seg-b.agora { border-color: var(--board); }

/* Eight groups. Two columns on a desk, one on a phone — a four-row table does not want to be
   narrower than this, and squeezing three across turns the club names into initials. */
.cont-grupos {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cont-grupo {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); overflow: hidden;
}
.cont-grupo.eu { border-color: var(--amarelo); box-shadow: inset 3px 0 0 var(--amarelo); }
.cont-grupo-t {
  padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-cond); font-weight: 700; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}
.cont-tab { width: 100%; }
/* Three unlabelled numbers are a puzzle; the header costs one line and answers it. */
.cont-tab thead td {
  padding: 4px 8px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.cont-tab td { padding: 6px 8px; vertical-align: middle; }
.cont-pos { width: 22px; text-align: right; color: var(--ink-3); font-size: 12px; }
.cont-n { width: 34px; text-align: right; font-family: var(--font-cond); font-size: 13px; }
/* The two who go through, said in the table rather than in a caption under it. */
.cont-tab tr.passa td:first-child { box-shadow: inset 2px 0 0 var(--sobe); }
.cont-tab tr.passa .cal-nome { color: var(--ink); font-weight: 600; }
.cont-tab tr.eu td { background: var(--amarelo-bg); }

/* The sixteen of the Sul-Americana, before there is a bracket to show. */
.cont-lista {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.cont-inscrito {
  padding: 7px 10px; border: 1px solid var(--line-soft);
  border-radius: 6px; background: var(--card); font-size: 13.5px;
}
.cont-inscrito.eu {
  border-color: var(--amarelo); background: var(--amarelo-bg); font-weight: 600;
}

/* A tie with a name of its own — the Intercontinental's five rounds are each a different trophy,
   and "Derby das Américas" is what a manager calls that match, not "round two, tie two". */
.cont-confronto { margin-bottom: 10px; }
.cont-confronto:last-child { margin-bottom: 0; }
.cont-confronto-t {
  padding: 0 0 4px; font-family: var(--font-cond); font-weight: 700; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}

/* The trophy he won himself. A list of six champions in which one of them is his club reads as a
   list until his is marked. */
.marco.eu { box-shadow: inset 3px 0 0 var(--amarelo); background: var(--amarelo-bg); }
.marco.eu .marco-v b { color: var(--amarelo-bg-ink); }

/* ── Empresários (spec §11) ────────────────────────────────────────────────── */

.emp-agentes { display: flex; flex-direction: column; gap: 10px; }
/* One agent card is one line with a state — same Regra 4 mark the player rows and the home's
   own tasks carry. Worst opinion of you sorts to the top already; now it also reads red without
   opening the card, green when he is an ally, and neutral grey while he has no opinion yet. */
.emp-agente {
  border: 1px solid var(--line); border-left: var(--mark) solid var(--track); border-radius: 8px;
  background: var(--card); padding: 10px 12px;
}
.emp-agente-aliado { border-left-color: var(--sobe); }
.emp-agente-fechado { border-left-color: var(--cai); }
.emp-agente-topo { display: flex; align-items: center; gap: 12px; }
.emp-agente-topo .emp-id { flex: 1 1 auto; min-width: 0; }
.emp-agente-clientes {
  margin-top: 4px; font-size: 12.5px; color: var(--ink-2);
}
/* What he says he will do about it, when the score is far enough either way to mean something. */
/* Regra do Amarelo: amarelo is the primary button, your own row, or a drawn card — never a
   verdict banner. This banner IS a verdict (the agent will tip you off, or has shut the door),
   so it takes the same green/red the rest of the game uses for a positive/negative verdict,
   split into two classes instead of one color both messages shared by accident. */
.emp-poder {
  margin: 8px 0 0; padding: 6px 9px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
}
.emp-poder-pos { background: var(--ok-bg); color: var(--ok-ink); }
.emp-poder-neg { background: var(--bad-bg); color: var(--bad-ink); }
.emp-poder.emp-quieto {
  background: transparent; color: var(--ink-3); font-weight: 400; padding: 6px 0 0;
}
/* The reasons, which are the fact sheet §11 asks for: what happened, when, and what it cost. */
.emp-motivos { margin-top: 8px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.emp-motivo-l {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: baseline;
  padding: 3px 0; font-size: 12.5px; color: var(--ink-2);
}
.emp-motivo-s {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
/* The reason ledger's delta ("+2", "−7") is a number like any other in the game: cond, tabular,
   never wrapping. It inherited none of that from the sentence around it. */
.emp-motivo-l b { font-family: var(--font-cond); font-variant-numeric: tabular-nums; white-space: nowrap; }
.emp-motivo-l b.mais { color: var(--sobe-txt); }
.emp-motivo-l b.menos { color: var(--cai-txt); }
/* "Fora" is the number that decides whether a shut door costs anything, so it is the one that is
   not grey like the rest of the subtitle. */
.emp-fora { color: var(--warn-ink); }