/* Screens: the shell and page layout. Pages place components; they never restyle them.
   Breakpoints are the app's list only: 1179, 959 (the shell switches), 760, 600, 400. Desktop first. */

/* ---------- Shell: left rail from 960, top bar and tab bar below ---------- */
.shell { min-height: 100dvh; padding-left: var(--layout-rail); }
.logo { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.wordmark { display: block; width: 132px; height: auto; }
.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--layout-rail);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-3) var(--space-4);
  background: var(--surface-rail);
  box-shadow: 14px 0 36px -24px rgba(0, 0, 0, .9), inset -1.5px 0 0 var(--border-faint);
}
.rail .logo { padding: var(--space-1) var(--space-3) var(--space-5); }
.rail .wordmark { width: 150px; }
.rail__nav { display: flex; flex-direction: column; gap: var(--space-1); }
.rail .nav-item { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--space-3); min-height: 52px; margin: 0; padding: 0 var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-body); color: var(--text-muted); }
.rail .nav-item:hover { background: var(--surface-card); color: var(--text-strong); }
.rail .nav-item.is-active:hover { background: var(--surface-raised); }
.rail .nav-item__icon { width: 32px; height: 32px; background: none; box-shadow: none; }
.rail .nav-item__art { width: 32px; height: 32px; }
.rail .nav-badge { position: static; margin-left: auto; border: 0; }
.rail__footer { display: flex; flex-direction: column; gap: var(--space-1); }
.rail__tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; align-items: center; gap: var(--space-2); padding-inline: var(--space-2); }
.rail__you { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); margin: 0; border-radius: var(--radius-md); min-width: 0; }
.rail__you:hover { background: var(--surface-card); }
.rail__you.is-active .avatar { box-shadow: 0 0 0 2px var(--accent); }
.rail__identity { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: var(--space-8); padding-block-end: var(--space-1); min-width: 0; }
.rail__identity > .rating-widget { margin: 0; }
.rail__you .truncate { max-width: 100%; }
.topbar, .tabbar { display: none; }
#view { outline: none; padding-bottom: var(--space-7); min-height: 100dvh; }
body.is-flow .shell { padding-left: 0; }
body.is-flow .rail, body.is-flow .topbar, body.is-flow .tabbar { display: none; }
body.is-flow #view { padding-bottom: 0; }

@media (max-width: 959px) {
  .shell { padding-left: 0; }
  .rail { display: none; }
  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: block;
    padding-top: env(safe-area-inset-top);
    background: var(--surface-glass);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .9);
  }
  .topbar__in { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding-block: var(--space-1); }
  .topbar .wordmark { width: 104px; }
  .top-avatar { position: relative; display: block; width: var(--control-h-sm); height: var(--control-h-sm); flex: none; }
  .top-avatar::before { content: ""; position: absolute; inset: -4px; }
  .top-avatar.is-active .avatar { box-shadow: 0 0 0 2px var(--accent); }
  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-sticky);
    display: flex;
    justify-content: space-around;
    padding: 0 var(--space-1) env(safe-area-inset-bottom);
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    box-shadow: 0 -10px 30px -22px rgba(0, 0, 0, .9);
  }
  #view { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--space-4)); }
}

/* ---------- Pages ---------- */
/* One container contract for page content and full-width shell interiors. */
.page, .topbar__in, .pubbar__in, .pubfoot__in {
  width: 100%; max-width: var(--layout-max); margin-inline: auto;
}
.page, .topbar__in, .pubbar__in, .pubfoot__in,
.flow__top, .flow__body, .flow__bar { padding-inline: var(--gutter); }
.page { padding-block: var(--space-6); }
@media (max-width: 959px) {
  .page { padding-top: var(--space-4); }
}
.page--round { max-width: var(--layout-round); }
.page--medium { max-width: var(--layout-medium); }
.page--narrow { max-width: var(--layout-compact); }
.page-head { margin-bottom: var(--space-5); }
.flow__body .page-head { margin-bottom: 0; }
.back { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap-min); margin-left: -6px; font-size: var(--fs-label); font-weight: var(--weight-semibold); color: var(--text-muted); }
.back:hover { color: var(--text-strong); }
.page-head__row { display: flex; align-items: center; gap: var(--space-3); }
.page-head__actions { display: flex; gap: var(--space-2); align-items: center; flex: none; }
/* Full-label actions stack on phones; responsive icon actions stay beside the title. */
@media (max-width: 600px) {
  .page-head__row:has(.page-head__actions > .button:not(.responsive-action) + .button:not(.responsive-action)) { flex-wrap: wrap; }
  .page-head__actions:has(> .button:not(.responsive-action) + .button:not(.responsive-action)) { flex: 1 1 100%; flex-direction: column; align-items: stretch; margin-top: var(--space-1); }
  .page-head__actions:has(> .button:not(.responsive-action) + .button:not(.responsive-action)) > .button { width: 100%; justify-content: center; }
}
.bar-row { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bar-row--end { justify-content: flex-end; }
/* ---------- Today ---------- */
.moment { display: flex; align-items: center; gap: var(--space-4); }

/* Day strip, calendar */
.day-strip { display: flex; align-items: center; gap: var(--space-2); }
.day-strip .icon-button { flex: none; }
.day-strip__range { display: none; text-align: center; }
.days { position: relative; display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: var(--space-1); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.days::-webkit-scrollbar { display: none; }
.days > .day { scroll-snap-align: center; }
.day {
  position: relative;
  min-height: 64px;
  border-radius: var(--radius-md);
  border: 0;
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-muted);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  box-shadow: var(--shadow-key-quiet);
}
.day:hover { color: var(--text-strong); }
.day__n { font-size: var(--fs-num-m); line-height: 1; }
.day[aria-pressed="true"] { background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); color: var(--text-on-accent); }
.day[aria-pressed="true"] .caption { color: var(--text-on-accent); }
.day__today, .cal__d[aria-current="date"]::before { position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.cal__d[aria-current="date"]::before { content: ""; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.cal__h { text-align: center; font-size: var(--fs-caption); font-weight: var(--weight-bold); color: var(--text-muted); padding-bottom: var(--space-1); }
.cal__d { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; height: var(--tap-min); padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--fs-body); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1; color: var(--text-muted); }
.cal__d.has-games { color: var(--text-strong); background: var(--surface-card); }
.cal__d:hover { background: var(--surface-raised); }
.cal__d[aria-pressed="true"] { color: var(--text-on-accent); background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.cal__d[aria-pressed="true"]::after, .day[aria-pressed="true"]::after { content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: var(--radius-sm); pointer-events: none; }
.cal__d:disabled { opacity: .4; cursor: default; }

@media (max-width: 600px) {
  .day-strip { flex-wrap: wrap; }
  .day-strip .days { order: 1; flex-basis: 100%; }
  .day-strip__range { display: block; }
  .day-strip > .icon-button:last-child { margin-left: auto; }
}

/* ---------- Flows: full screen on a phone, a centred card on a desktop. The call flow is the app's core loop, so it gets the most care. ---------- */
.flow { min-height: 100dvh; display: flex; flex-direction: column; max-width: var(--layout-compact); margin: 0 auto; width: 100%; }
.flow__top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-2); padding-top: calc(var(--space-2) + env(safe-area-inset-top)); background: var(--surface-glass); backdrop-filter: blur(10px); }
.flow__top .icon-button--plain:first-child { margin-left: calc(var(--space-3) * -1); }
.flow__top .icon-button--plain:first-child:disabled { visibility: hidden; }
.flow__count { min-width: 72px; text-align: right; flex: none; font-weight: var(--weight-bold); }
.flow__body { flex: 1; padding-block: var(--space-2) var(--space-5); min-width: 0; }
.flow__bar { position: sticky; bottom: 0; z-index: 10; padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface-glass); backdrop-filter: blur(12px); border-top: 1px solid var(--border-faint); }
.flow__bar .button-row { width: 100%; }
.flow--ob .flow__top { min-height: calc(var(--control-h) + var(--space-2) * 2 + env(safe-area-inset-top)); }
/* Step headings receive screen-reader focus without looking like controls. */
.flow--ob h1[tabindex="-1"]:focus { outline: none; }
.flow__bar { overflow-x: clip; }

.question { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-card); border: 0; box-shadow: var(--shadow-card); }
.question.is-answered { box-shadow: inset 0 0 0 2px var(--accent-line); }
.swatch { min-width: var(--tap-min); height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-md); border: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-label); font-weight: var(--weight-bold); color: var(--text-muted); box-shadow: var(--shadow-key-quiet); }
.swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface-accent-soft); color: var(--text-accent); }
.swatch i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--veil-light); }
.setting-row, .list-row { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--card-pad); border-top: 1px solid var(--border-faint); min-height: 56px; min-width: 0; }
.setting-row { justify-content: space-between; }
.setting-row:first-child, .list-row:first-child { border-top: 0; }
.setting-row--action { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-4); }
.setting-row--action > p { text-wrap: pretty; }
@media (min-width: 601px) {
  .setting-row--action { grid-template-columns: var(--layout-rail) minmax(0, 1fr); gap: var(--space-5); }
}
:is(a, button).list-row:hover { background: var(--surface-raised); }
button.list-row { width: 100%; text-align: left; }
.list-row.is-premium-locked { color: var(--text-subtle); }
:is(a, button).list-row:focus-visible { outline-offset: -3px; }
.stretch { position: absolute; inset: 0; z-index: 1; }

.record { display: flex; gap: var(--space-2); }
.opp { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3); cursor: pointer; text-align: left; }
.opp[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface-accent-soft); }
.opp__rating { font-size: var(--fs-num-m); flex: none; }
.opp__check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-control); display: flex; align-items: center; justify-content: center; color: var(--text-on-accent); }
.opp[aria-checked="true"] .opp__check { background: var(--accent); border-color: var(--accent); }


/* ---------- Ratings: the shared plate carries the week; desktop adds games. ---------- */
.rating-row { --cols: 56px minmax(0, 1fr) 176px 96px; padding-left: var(--space-5); padding-right: var(--space-5); }
.rating-row .rank { justify-self: start; }
.rating-row__person { display: flex; min-width: 0; align-items: center; gap: var(--space-3); }
.rating-row__person > .data-table__person { min-width: 0; flex: 1; }
.rating-row__duel { flex: none; }
@media (max-width: 959px) {
  .rating-row { --cols: var(--space-6) minmax(0, 1fr) auto; gap: var(--space-3); padding-left: var(--space-4); padding-right: var(--space-4); }
  .rating-row .data-table__optional { display: none; }
  .rating-row__duel { display: none; }
}

/* ---------- Challenges and Groups ---------- */
.challenge-grid, .tile-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.crest-sq { width: 40px; height: 40px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--weight-black); color: var(--text-inverse); flex: none; }
.split { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
@media (max-width: 959px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- You ---------- */
.dna { display: grid; grid-template-columns: 96px minmax(0, 1fr) 32px; gap: var(--space-3); align-items: center; }
.ach { background: var(--surface-card); border: var(--border-width) dashed var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); color: var(--text-muted); }
.ach.is-earned { border-style: solid; color: var(--text-strong); box-shadow: var(--light-top); }
.ach-art { border-radius: var(--radius-md); }
.ach:not(.is-earned) .ach-art { filter: grayscale(1); opacity: .45; }
.icon-tile { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-raised); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--text-muted); padding: 0; overflow: hidden; }
.swatch-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dotsw { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 2px solid var(--veil-light); flex: none; }
.dotsw::before { content: ""; position: absolute; inset: -8px; }
.dotsw[aria-checked="true"] { box-shadow: 0 0 0 2px var(--accent); }

/* Invitations */
.invite-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-4) 0 var(--space-2); }

/* The living style guide at /design */
.board { display: flex; flex-direction: column; gap: var(--space-3); }
.board__cell { display: flex; flex-direction: column; gap: var(--space-2); }
.board__cols { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.token-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-caption); color: var(--text-muted); }
.token-chip { width: 32px; height: 32px; border-radius: var(--radius-sm); box-shadow: var(--shadow-key-quiet); flex: none; }
@media (max-width: 400px) {
  .versus__side { width: 72px; }
}

/* A shared player page: the card and one column beside it, both starting on the card's top edge. Phone: one column at the card's width. */
.profile-grid { display: grid; gap: var(--space-5); grid-template-columns: 364px minmax(0, 1fr); align-items: start; }
.profile-grid__card { min-width: 0; }
.profile-grid__side { min-width: 0; }
@media (max-width: 760px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } }

/* The Game page: the recap (your call and answers) and the Match stats card side by side from 960px, stacked below it, with submitted predictions after */
.game-grid { display: grid; gap: var(--space-5); align-items: start; }
.game-grid__recap, .game-grid__stats { min-width: 0; }
.game-grid:not(.game-grid--single) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "recap stats"; }
.game-grid__recap { grid-area: recap; }
.game-grid__stats { grid-area: stats; }
@media (max-width: 959px) { .game-grid:not(.game-grid--single) { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; } .game-grid__recap, .game-grid__stats { grid-area: auto; } }

@media (max-width: 600px) {
  .contest-progress__field-count { flex-basis: 100%; }
}

/* One match destination with scoped competition views. */
.unified-match #standings { scroll-margin-top: var(--space-6); }

.match-competition-tabs { border-bottom: var(--border-width) solid var(--border-faint); }
.match-competition-tabs a { max-width: min(78vw, 320px); gap: var(--space-2); }
.match-competition-tab__art { flex: none; display: flex; align-items: center; }
.match-competition-tab__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.match-entry-notice { padding-top: var(--space-2); }

.match-duel--live .h2h__side:first-child .score-tile{color:var(--text-accent)}
.match-duel--live .h2h__side:last-child .score-tile{color:var(--text-warning)}

/* Reviewed match/Duel hierarchy: shared football, then one selected competition. */
.match-competition-tabs{padding:var(--space-2) 0 var(--space-1);gap:var(--space-5)}
.match-competition-tabs a{padding-block:var(--space-1);gap:var(--space-3)}
.match-competition-tab__art{padding-inline-end:var(--space-1);overflow:visible}
.fixture-swing{display:grid;gap:var(--space-3)}
.fixture-swing__legend{display:flex;gap:var(--space-5);flex-wrap:wrap;padding:var(--space-2) var(--space-1)}
.fixture-swing__person{display:flex;align-items:center;gap:var(--space-2);font:var(--type-caption)}
.fixture-swing__person--0{color:var(--text-accent)}
.fixture-swing__person--1{color:var(--text-warning)}
.fixture-swing[data-fixture-swing-mode-value="match"] .fixture-swing__person--0{color:var(--text-body)}
.fixture-swing[data-fixture-swing-mode-value="match"] .fixture-swing__person--1{color:var(--text-info)}
.fixture-swing__key{width:var(--space-3);height:var(--space-3);border-radius:var(--radius-xs);background:currentColor;flex:none}
.fixture-swing__plot{min-width:0;touch-action:pan-y;border-radius:var(--radius-sm)}
.fixture-swing__plot svg{display:block;width:100%;height:auto;overflow:visible}
.fixture-swing__plot text{font-family:var(--font-body);font-size:var(--fs-caption);fill:var(--text-muted);paint-order:stroke;stroke:var(--surface-card);stroke-width:3px;stroke-linejoin:round}
.fixture-swing__readout{display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;min-height:var(--space-6);font:var(--type-caption);color:var(--text-muted)}
.fixture-swing__readout strong{color:var(--text-strong)}
.fixture-swing__canvas{position:relative;display:grid;gap:var(--space-3);min-width:0;container-type:inline-size}
.fixture-swing__events{position:absolute;inset:0;pointer-events:none}
.fixture-swing__event{position:absolute;display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-strong);transform:translateX(-50%);cursor:pointer;pointer-events:auto}
.fixture-swing__event-symbol{display:grid;place-items:center;width:var(--space-6);height:var(--space-6)}
.fixture-swing__event-symbol .meaning-icon{width:100%;height:100%}
.fixture-swing__event-team{position:absolute;right:0;bottom:var(--space-1);display:grid;place-items:center;border-radius:var(--radius-pill);background:var(--surface-sunken)}
.fixture-swing__event:hover,.fixture-swing__event:focus-visible{background:var(--surface-raised)}
.fixture-swing__event[aria-pressed="true"]{background:var(--surface-raised)}
.fixture-swing__event:focus-visible{z-index:1}
.fixture-swing__event-detail{min-height:var(--space-5);color:var(--text-muted);text-wrap:pretty}
@container (max-width:600px){
  .fixture-swing__event-symbol{width:var(--space-5);height:var(--space-5)}
  .fixture-swing__event-team,.fixture-swing__event-team .team-crest{width:var(--space-3);height:var(--space-3)}
}
.duel-comparison{--home:var(--text-accent);--away:var(--text-warning);display:grid;gap:var(--space-4);container-type:inline-size}
.duel-comparison__heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-2)}
.duel-comparison__state{display:flex;align-items:center;justify-content:center;color:var(--text-muted);padding-top:var(--space-1)}
.duel-comparison__state.is-live{color:var(--text-down)}
.duel-comparison__columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);align-items:center;text-align:center;padding-block:var(--space-2) 0}
.duel-comparison__person{display:grid;justify-items:start;gap:var(--space-2);min-width:0;text-align:left}
.duel-comparison__person:last-child{justify-items:end;text-align:right}
.duel-comparison__identity{display:flex;align-items:center;gap:var(--space-2);min-width:0;font:var(--type-label);color:var(--text-strong)}
.duel-comparison__identity strong{overflow-wrap:anywhere}
.duel-comparison__person:first-child{color:var(--text-accent)}
.duel-comparison__person:last-child{color:var(--text-warning)}
.duel-comparison__rows{gap:var(--space-3)}
.duel-comparison__row{gap:var(--space-2);padding:var(--space-3) 0;border-radius:0}
.duel-comparison__row .stat-bar__top{grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);align-items:center}
.duel-comparison__subject{display:grid;justify-items:center;gap:var(--space-1);text-align:center;min-width:0}
.duel-comparison__meaning{display:flex;align-items:center;justify-content:center;gap:var(--space-1);font:var(--type-label);color:var(--text-strong)}
.duel-comparison__actual{font:var(--type-caption);color:var(--text-muted);overflow-wrap:anywhere}
.duel-comparison__actual strong{font-weight:var(--weight-medium);color:var(--text-body)}
.duel-comparison__points{display:flex;align-items:baseline;gap:var(--space-1);min-width:0;white-space:nowrap}
.duel-comparison__points--0{color:var(--text-accent)}
.duel-comparison__points--1{justify-content:flex-end;color:var(--text-warning)}
.duel-comparison__points .num{font-size:var(--fs-num-s);line-height:var(--lh-num)}
.duel-comparison__points small{font:var(--type-caption);color:var(--text-muted)}
.duel-comparison__row .stat-bar__track{height:var(--space-2);min-width:0}
.duel-comparison__row .stat-bar__track i{min-width:0}
.duel-comparison__predictions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.duel-comparison__pick{display:flex;align-items:center;gap:var(--space-1);min-width:0;flex-wrap:wrap}
.duel-comparison__pick--1{justify-content:flex-end;text-align:right}
.duel-comparison__pick-label{color:var(--text-muted)}
.duel-comparison__score{font:var(--type-label);font-weight:var(--weight-bold)}
.duel-comparison__answer{display:inline-flex;gap:var(--space-1);align-items:center;min-width:0;font:var(--type-label)}
.duel-comparison__answer strong{overflow-wrap:anywhere}
.duel-comparison__outcome{display:inline-flex;align-items:center}
.duel-comparison__outcome.is-correct{color:var(--text-up)}
.duel-comparison__outcome.is-wrong{color:var(--text-down)}
.duel-comparison__chances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);width:min(100%,240px);min-width:0;text-align:center}
.duel-comparison__chances dt{font:var(--type-caption);color:var(--text-muted)}
.duel-comparison__chances abbr{text-decoration:none}
.duel-comparison__chances dd{margin:0;font:var(--type-label);font-variant-numeric:tabular-nums}
.duel-comparison__chances dd>span[aria-hidden]{font:var(--type-caption);color:var(--text-muted)}
.duel-comparison__unavailable{display:flex;align-items:center;gap:var(--space-1);color:var(--text-muted)}
@container(max-width:480px){
 .duel-comparison__identity{gap:var(--space-1);font:var(--type-label)}
 .duel-comparison__row .stat-bar__top{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:var(--space-1)}
 .duel-comparison__meaning{font:var(--type-caption);font-weight:var(--weight-bold)}
 .duel-comparison__points{gap:2px}
 .duel-comparison__points .num{font-size:var(--fs-num-s)}
 .duel-comparison__pick-label{display:none}
 .duel-comparison__chances{gap:var(--space-1)}
 .duel-comparison__answer{font:var(--type-caption)}
}

/* Invitation and entry each get one clear next action. */
.match-invitation{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.match-invitation>div:first-child{min-width:0}
.match-invitation h2{font:var(--type-h2)}
.match-invitation p:not(.caption){font:var(--type-body);color:var(--text-muted);max-width:45ch}
.match-call-actions{display:grid;justify-items:start;gap:var(--space-4);flex:none}
.match-competition-tabs .match-create-duel{margin-inline-start:0;padding:var(--space-2) 0;gap:var(--space-2);min-height:var(--tap-min);border:0;background:transparent;box-shadow:none;color:var(--text-accent);font-size:var(--fs-label)}
.match-competition-tabs .match-create-duel:hover{background:transparent;color:var(--text-link-hover)}
.match-create-duel:focus-visible{outline-offset:var(--space-1)}
@media(max-width:600px){
 .match-invitation{align-items:stretch;flex-direction:column;gap:var(--space-5)}
 .match-invitation .match-call-actions{justify-items:stretch}
}