/* Betting screen (FR-2) — "Floodlight" visual system.
 *
 * Replaces the previous palette, which was assembled from CSS *named*
 * colours: #006400 is literally `darkgreen`, #FFD700 is `gold`, #B22222 is
 * `firebrick`. Untuned flag colours read as municipal signage, and green was
 * carrying five unrelated jobs at once (brand, progress, "finished", your
 * bet, the dock), so it had stopped meaning anything.
 *
 * The rules here:
 *   - One accent. Green belongs to the pool and to your own bet, nothing else.
 *   - Semantic colour is separate from brand colour. Points earned, live, and
 *     locked each own a hue that is not the accent, so a green pill always
 *     means "you scored" rather than "this is the app's colour".
 *   - Neutrals carry a green bias rather than being pure grey, so the accent
 *     sits in the same world as its background instead of on top of it.
 *
 * Token blocks: light lives on :root and is the default. Dark is defined
 * twice — once for the OS preference, once for the explicit toggle — and the
 * :not([data-theme="light"]) guard is what lets the toggle win over the media
 * query in both directions without a third copy of the light values. */

:root {
  --sc-bg: #F1F3EF;
  --sc-card: #FFFFFF;
  --sc-card-edge: transparent;
  --sc-card-shadow: 0 1px 2px rgba(20,32,26,0.05), 0 6px 16px -10px rgba(20,32,26,0.22);
  --sc-ink: #14201A;
  --sc-ink-soft: #5E7167;
  --sc-line: #E0E6DE;
  --sc-accent: #0A7A4A;
  --sc-accent-soft: #E4F2EA;
  --sc-on-accent: #FFFFFF;
  --sc-chip-bg: #EDF1EB;
  --sc-field-bg: #F4F7F3;
  --sc-gold-bg: #F6E7BF;
  --sc-gold-ink: #7A5A08;
  --sc-warn-ink: #A8501E;
  --sc-live-bg: #C93526; --sc-live-ink: #FFF3F1;
  --sc-locked-bg: #E7EBE5; --sc-locked-ink: #6E7C71;
  /* "Finished" is deliberately neutral. It used to be green, which put it in
     direct competition with the points pill sitting a few pixels below it —
     the score is already on the card, so the status has nothing left to say. */
  --sc-done-bg: #E7EBE5; --sc-done-ink: #5A695F;
  --sc-open-bg: #FBEBCF; --sc-open-ink: #7A5406;
  --sc-mint-ink: #0A7A4A;
  --sc-points-pos-bg: #D9EFE3; --sc-points-pos-ink: #07603A;
  --sc-points-zero-bg: #F2E3DF; --sc-points-zero-ink: #94402F;
  /* Liquid glass dock — neutral frosted material, not tinted by the accent,
     so it reads as glass over content rather than a colored bar. */
  --dock-glass: rgba(255, 255, 255, 0.55);
  --dock-glass-edge: rgba(255, 255, 255, 0.7);
  --dock-glass-sheen: rgba(255, 255, 255, 0.9);
  --dock-shadow: rgba(20, 30, 24, 0.28);
  --dock-item-active-fg: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sc-bg: #0B110E;
    --sc-card: #17201B;
    /* Lightness alone cannot separate a card from the page this far down the
       scale without washing the whole screen out, so dark mode gives cards an
       edge instead. */
    --sc-card-edge: rgba(255, 255, 255, 0.07);
    --sc-card-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 20px -12px rgba(0,0,0,0.6);
    --sc-ink: #E9EEE8;
    --sc-ink-soft: #8DA294;
    --sc-line: #26302A;
    --sc-accent: #2EC27E;
    --sc-accent-soft: #12301F;
    --sc-on-accent: #062617;
    --sc-chip-bg: #1E2822;
    --sc-field-bg: #1A241E;
    --sc-gold-bg: #3E3113;
    --sc-gold-ink: #E8B94A;
    --sc-warn-ink: #E0A075;
    --sc-live-bg: #E04A3C; --sc-live-ink: #2A0806;
    --sc-locked-bg: #232D27; --sc-locked-ink: #93A599;
    --sc-done-bg: #222C26; --sc-done-ink: #93A599;
    --sc-open-bg: #3A2E10; --sc-open-ink: #E8B94A;
    --sc-mint-ink: #4FD394;
    --sc-points-pos-bg: #10331F; --sc-points-pos-ink: #56D693;
    --sc-points-zero-bg: #34201C; --sc-points-zero-ink: #F08A72;
    --dock-glass: rgba(18, 26, 21, 0.45);
    --dock-glass-edge: rgba(255, 255, 255, 0.09);
    --dock-glass-sheen: rgba(255, 255, 255, 0.2);
    --dock-shadow: rgba(0, 0, 0, 0.5);
    --dock-item-active-fg: #062617;
  }
}
:root[data-theme="dark"] {
  --sc-bg: #0B110E;
  --sc-card: #17201B;
  --sc-card-edge: rgba(255, 255, 255, 0.07);
  --sc-card-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 20px -12px rgba(0,0,0,0.6);
  --sc-ink: #E9EEE8;
  --sc-ink-soft: #8DA294;
  --sc-line: #26302A;
  --sc-accent: #2EC27E;
  --sc-accent-soft: #12301F;
  --sc-on-accent: #062617;
  --sc-chip-bg: #1E2822;
  --sc-field-bg: #1A241E;
  --sc-gold-bg: #3E3113;
  --sc-gold-ink: #E8B94A;
  --sc-warn-ink: #E0A075;
  --sc-live-bg: #E04A3C; --sc-live-ink: #2A0806;
  --sc-locked-bg: #232D27; --sc-locked-ink: #93A599;
  --sc-done-bg: #222C26; --sc-done-ink: #93A599;
  --sc-open-bg: #3A2E10; --sc-open-ink: #E8B94A;
  --sc-mint-ink: #4FD394;
  --sc-points-pos-bg: #10331F; --sc-points-pos-ink: #56D693;
  --sc-points-zero-bg: #34201C; --sc-points-zero-ink: #F08A72;
  --dock-glass: rgba(18, 26, 21, 0.45);
  --dock-glass-edge: rgba(255, 255, 255, 0.09);
  --dock-glass-sheen: rgba(255, 255, 255, 0.2);
  --dock-shadow: rgba(0, 0, 0, 0.5);
  --dock-item-active-fg: #062617;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--sc-bg);
  color: var(--sc-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

/* ---------- topbar ---------- */
.topbar {
  flex: none;
  padding: max(16px, env(safe-area-inset-top)) 16px 9px;
}

/* A masthead rather than the app icon: at the ~20px this row can afford, the
   shield is an unreadable smudge, so the name carries the identity and the
   season chip carries the accent. It also gives the language toggle a home,
   which frees the round row below to be only about the round. */
.masthead {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}
.masthead__name {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sc-ink);
}
.masthead__season {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sc-accent);
  background: var(--sc-accent-soft);
  padding: 0.2rem 0.42rem;
  border-radius: 999px;
  white-space: nowrap;
}
.masthead .lang-pill { margin-left: auto; }

.round-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.round-nav__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
}
.round-nav__arrow {
  position: relative;
  appearance: none;
  border: none;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--sc-chip-bg);
  color: var(--sc-ink-soft);
  flex: none;
  cursor: pointer;
  touch-action: manipulation;
}
.round-nav__arrow::after { content: ""; position: absolute; inset: -8px -5px; }
.round-nav__arrow svg { width: 13px; height: 13px; }
.round-nav__arrow[aria-current="true"] { color: var(--sc-accent); }
.round-nav__arrow:disabled { opacity: 0.4; cursor: default; }

.lang-pill {
  display: inline-flex;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.lang-pill button {
  appearance: none; border: none; background: transparent;
  font: inherit; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--sc-ink-soft);
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}
.lang-pill button.active { background: var(--sc-accent); color: var(--sc-on-accent); }

.topbar__meta {
  margin-top: 0.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.topbar__dates { font-size: 0.75rem; color: var(--sc-ink-soft); white-space: nowrap; }
.topbar__progress { font-size: 0.75rem; font-weight: 700; color: var(--sc-accent); white-space: nowrap; }
.progress-track {
  margin-top: 0.4rem;
  height: 4px;
  border-radius: 2px;
  background: var(--sc-line);
  overflow: hidden;
}
.progress-fill { height: 100%; background: var(--sc-accent); border-radius: 2px; }

/* ---------- status filters ---------- */
.filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Bleed to the screen edge and pad back in, so a scrolled row of chips
     starts and ends flush with the topbar's padding instead of being sliced
     off mid-chip. */
  margin-inline: -16px;
  padding-inline: 16px;
  /* overflow-x:auto also makes this a *vertical* clip boundary, which was
     silently cutting off the chips' expanded tap targets. The block padding
     gives that overflow somewhere legal to live; the negative margin below
     hands the space back so the row still measures 28px tall. */
  padding-block: 9px;
  margin-top: 1px;
  margin-bottom: -9px;
}
.filters::-webkit-scrollbar { display: none; }
.filters[hidden] { display: none; }

.filter-chip {
  position: relative;
  appearance: none;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  background: transparent;
  color: var(--sc-ink-soft);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.4rem 0.62rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  touch-action: manipulation;
}
/* Chips are wide enough to hit but only ~28px tall, so the hit area gets
   extended vertically the same way the score boxes' does — 28 + 2×9 clears
   the 44px minimum. */
.filter-chip::after { content: ""; position: absolute; inset: -9px 0; }
.filter-chip__count { font-variant-numeric: tabular-nums; font-weight: 800; opacity: 0.6; }
.filter-chip[aria-pressed="true"] {
  background: var(--sc-accent);
  border-color: transparent;
  color: var(--sc-on-accent);
}
.filter-chip[aria-pressed="true"] .filter-chip__count { opacity: 0.75; }

.list-note {
  padding: 26px 16px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--sc-ink-soft);
}
.list-note--error { color: var(--sc-warn-ink); }

/* ---------- match list ---------- */
.match-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 12px calc(112px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}

.match-card {
  position: relative;
  background: var(--sc-card);
  border: 1px solid var(--sc-card-edge);
  border-radius: 16px;
  box-shadow: var(--sc-card-shadow, 0 1px 2px rgba(20,32,26,0.05), 0 6px 16px -10px rgba(20,32,26,0.22));
  padding-bottom: 4px;
  overflow: hidden;
  /* A flex item with non-visible overflow gets an automatic minimum size of
     0 (CSS Flexbox §4.5), so without flex-shrink:0 the match-list flex
     column would squeeze cards to fit instead of scrolling past them. */
  flex-shrink: 0;
  min-height: 148px;
  /* Same automatic-minimum-size rule bites sideways too: without this, a
     long translated string (pt-PT runs ~15-25% longer than en-GB, §9.1)
     can force the card wider than the viewport instead of the team name
     ellipsis-truncating inside it. */
  min-width: 0;
}

.match-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 10px 12px 0;
}
.kickoff { font-size: 0.7rem; color: var(--sc-ink-soft); font-weight: 600; }
.status-pill {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.status-pill svg { width: 9px; height: 9px; }
.status-pill.is-live { background: var(--sc-live-bg); color: var(--sc-live-ink); }
.status-pill.is-locked { background: var(--sc-locked-bg); color: var(--sc-locked-ink); }
.status-pill.is-finished { background: var(--sc-done-bg); color: var(--sc-done-ink); }
.status-pill.is-open { background: var(--sc-open-bg); color: var(--sc-open-ink); }

.live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px;
}
.team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team--away { flex-direction: row-reverse; text-align: right; }
.crest {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
/* Real club art where we have it. The logos vary wildly in aspect ratio
   (Moreirense is landscape, Sporting portrait), so they sit *contained* in
   the square rather than filling it, and the coloured disc is dropped — a
   crest brings its own shape. Clubs with no art keep the lettered disc. */
.crest--logo { background: none; border-radius: 0; }
.crest--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.team__name { font-size: 0.85rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-score { font-size: 1.45rem; font-weight: 800; display: flex; align-items: baseline; gap: 6px; justify-content: center; min-width: 40px; }
.live-score__sep { opacity: 0.5; font-weight: 500; }
.live-score--placeholder { color: var(--sc-ink-soft); font-weight: 600; font-size: 0.88rem; }

/* One row: Joker (left) — your bet (center) — result/countdown (right).
   Same minmax(0,1fr) auto minmax(0,1fr) formula as .teams, so the pills
   center on the exact same axis as the official score above them
   regardless of whether the side slots are empty, short, or long. */
.bet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px 12px;
  font-size: 0.7rem;
}
.bet-row__side { display: flex; align-items: center; min-width: 0; }
.bet-row__side--left { justify-content: flex-start; }
.bet-row__side--right { justify-content: flex-end; }
.bet-row__pills { display: flex; align-items: center; gap: 8px; }
.bet-row__colon { font-weight: 700; color: var(--sc-ink-soft); }

/* One typed digit per box, replacing a pair of +/- steppers. Those needed
   four taps for a 3-1 on a 27px target; this is two keystrokes on a 44px one,
   which is also Apple's minimum. */
.score-box {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  border: 1.5px solid var(--sc-line);
  background: var(--sc-field-bg);
  color: var(--sc-ink);
  text-align: center;
  font-family: inherit;
  /* 16px is a hard floor, not a preference: iOS Safari zooms the whole
     viewport when a focused input is smaller than that, and it does not zoom
     back out on blur. */
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  appearance: none;
  touch-action: manipulation;
}
.score-box::placeholder { color: var(--sc-ink-soft); opacity: 0.4; font-weight: 700; }
.score-box:focus { border-color: var(--sc-accent); background: var(--sc-card); }

.score-box--frozen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  background: var(--sc-chip-bg);
  color: var(--sc-accent);
}

.joker-btn {
  appearance: none;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  background: transparent;
  color: var(--sc-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.24rem 0.5rem;
  cursor: pointer;
}
.joker-btn svg { width: 11px; height: 11px; }
.joker-btn[data-state="committed"] { background: var(--sc-gold-bg); color: var(--sc-gold-ink); border-color: transparent; }
.joker-btn[data-state="disabled"] { opacity: 0.4; cursor: default; }
/* Until a full scoreline is typed there is no bet to double. */
.joker-btn:disabled { opacity: 0.4; cursor: default; }

.countdown { color: var(--sc-warn-ink); font-weight: 700; }
.nudge { color: var(--sc-ink-soft); }
.nudge-wrap { display: flex; align-items: center; gap: 5px; }
.result-pill {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.result-pill--positive { background: var(--sc-points-pos-bg); color: var(--sc-points-pos-ink); }
.result-pill--zero { background: var(--sc-points-zero-bg); color: var(--sc-points-zero-ink); }
.avatar-strip { display: flex; align-items: center; }
.avatar-strip span {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 800;
  color: #fff;
  border: 1.5px solid var(--sc-card);
  margin-left: -6px;
}
.avatar-strip span:first-child { margin-left: 0; }

/* Same band, two jobs: the reveal list once a match locks, the social nudge
   and save status while it is still open. Shared metrics keep every card the
   same height whichever one is showing. */
.card-foot,
.reveal { margin: 0 12px 10px; padding-top: 7px; border-top: 1px dashed var(--sc-line); }
.card-foot {
  display: flex;
  align-items: center;
  min-height: 21px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--sc-ink-soft);
}
.reveal__toggle {
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--sc-ink-soft);
  cursor: pointer;
}
.reveal__toggle-label { flex: 1; text-align: left; }
.reveal__toggle svg { width: 11px; height: 11px; flex: none; transition: transform 0.2s ease; }
.reveal[data-open="true"] .reveal__toggle { color: var(--sc-ink); }
.reveal[data-open="true"] .reveal__toggle svg { transform: rotate(180deg); }
.reveal__rows { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.reveal[data-open="true"] .reveal__rows { max-height: 240px; }
.reveal__rows-inner { padding-top: 6px; }
.reveal__row { display: flex; justify-content: space-between; font-size: 0.74rem; padding: 2px 0; color: var(--sc-ink-soft); }
.reveal__row b { color: var(--sc-ink); }

/* ================================================================
   DOCK — Apple "Liquid Glass" treatment: a floating capsule, frosted
   and translucent, refracting whatever scrolls beneath it rather than
   sitting on a flat opaque bar. Neutral glass + a tinted pill for the
   active tab is what keeps it reading as glass, not as a colored dock.
   ================================================================ */
.dock {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  width: min(calc(100% - 28px), 400px);
  display: grid;
  /* Columns follow the number of tabs, so adding Jogos or Perfil later needs
     no CSS change and no page can silently disagree with another. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 6px;
  border-radius: 28px;
  background: var(--dock-glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--dock-glass-edge);
  box-shadow:
    0 1px 0 var(--dock-glass-sheen) inset,
    0 -8px 16px -12px var(--dock-glass-sheen) inset,
    0 18px 40px -16px var(--dock-shadow),
    0 2px 8px -2px var(--dock-shadow);
}
.dock__item {
  position: relative;
  appearance: none;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px 7px;
  border-radius: 20px;
  color: var(--sc-ink-soft);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
}
.dock__item { text-decoration: none; }
.dock__item svg { width: 20px; height: 20px; position: relative; z-index: 1; }
.dock__item span { position: relative; z-index: 1; }
.dock__item.is-active { color: var(--dock-item-active-fg); }
.dock__item.is-active::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc-accent) 88%, white 12%), var(--sc-accent));
  box-shadow: 0 3px 8px -2px color-mix(in srgb, var(--sc-accent) 55%, transparent), 0 1px 0 rgba(255,255,255,0.45) inset;
}
.dock__item:active { transform: scale(0.94); }
@media (prefers-reduced-motion: no-preference) {
  .dock__item { transition: transform 0.12s ease, color 0.2s ease; }
}

/* ================================================================
   LEADERBOARD (FR-4) — Época / Jornada sub-tabs on the same topbar
   skeleton as the betting screen; rank rows reuse the same card/chip
   language (board-card, avatar, chip pills) established there.
   ================================================================ */
.subseg {
  display: inline-flex;
  background: var(--sc-chip-bg);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-top: 12px;
  width: 100%;
}
.subseg__btn {
  appearance: none;
  border: none;
  background: transparent;
  flex: 1;
  color: var(--sc-ink-soft);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.45rem 0.4rem;
  border-radius: 999px;
  cursor: pointer;
}
.subseg__btn[aria-selected="true"] { background: var(--sc-accent); color: var(--sc-on-accent); }

.view { display: none; }
.view.is-active { display: block; }

.subhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.subhead__meta { font-size: 0.72rem; color: var(--sc-ink-soft); font-weight: 600; }

.board-card {
  position: relative;
  background: var(--sc-card);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--sc-card-edge);
  box-shadow: var(--sc-card-shadow);
  margin-bottom: 14px;
}

.avatar {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800;
  color: #fff;
}

.rank-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--sc-line); }
.rank-row:last-child { border-bottom: none; }
.rank-row.is-you { background: var(--sc-chip-bg); }
.rank-row__num { width: 18px; text-align: center; font-weight: 800; font-size: 0.78rem; color: var(--sc-ink-soft); flex: none; }
.rank-row__id { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.rank-row__name { font-size: 0.82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row__you-tag { font-size: 0.62rem; font-weight: 700; color: var(--sc-accent); }
.rank-row__move { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 0.68rem; font-weight: 800; width: 30px; }
.rank-row__move svg { width: 10px; height: 10px; }
.rank-row__move.is-up { color: var(--sc-mint-ink); }
.rank-row__move.is-down { color: var(--sc-warn-ink); }
.rank-row__move.is-same { color: var(--sc-ink-soft); }
.rank-row__pts { flex: none; text-align: right; font-weight: 800; font-size: 0.92rem; min-width: 34px; }
.rank-row__exact {
  flex: none;
  font-size: 0.62rem; font-weight: 700;
  color: var(--sc-gold-ink); background: var(--sc-gold-bg);
  border-radius: 999px; padding: 0.15rem 0.4rem;
  white-space: nowrap;
}

.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.66rem; color: var(--sc-ink-soft); margin: 2px 2px 12px; }

.winner-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(135deg, var(--sc-gold-bg), var(--sc-card) 70%);
  margin-bottom: 12px;
  border: 1px solid var(--sc-line);
}
.winner-card__crown { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.winner-card__crown svg { width: 24px; height: 24px; color: var(--sc-gold-ink); }
.winner-card__label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-gold-ink); }
.winner-card__name { font-size: 0.92rem; font-weight: 800; }
.winner-card__pts { margin-left: auto; font-weight: 800; font-size: 1.1rem; color: var(--sc-gold-ink); }

/* dual-language chrome strings */
[data-lang="pt"] .i18n[lang="en"] { display: none; }
[data-lang="en"] .i18n[lang="pt"] { display: none; }