/*
 * Competition page. Ported from the approved mock-up
 * (etalon-2026-09-11/league.html). Shared page furniture is in redesign.css.
 */

/* page heading: one page is one competition, so the age and the stage are
   badges next to the name */
.fwd-phead{padding-top:var(--s3)}
.fwd-ptitle{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:10px}
.fwd-ptitle h1{margin:0;font-size:42px;font-weight:800;letter-spacing:-.035em;line-height:1}
.fwd-badge{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;
  border-radius:6px;background:var(--surface);border:1px solid var(--hair);color:var(--ink-2)}
.fwd-badge--age{background:var(--navy);border-color:var(--navy);color:#fff}
/* the same «played N of M» bar as on the cards of the front page */
.fwd-lsum{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding-top:14px;font-size:14px;color:var(--muted)}
.fwd-lsum b{color:var(--ink);font-weight:700}
.fwd-bar{width:180px;height:6px;border-radius:3px;background:#DDE3EC;overflow:hidden}
.fwd-bar i{display:block;height:100%;background:var(--navy);border-radius:3px}
.fwd-bar--done i{background:var(--win)}

.fwd-main{display:grid;gap:var(--s4);padding:var(--s3) 0 48px;min-width:0;margin-top:0}
.fwd-hint{margin-left:auto;font-size:13px;color:var(--faint)}

/* tables */
.fwd-tw{overflow-x:auto;min-width:0}
.fwd-tw table{border-collapse:collapse;width:100%}
.fwd-tw th{font-size:13px;font-weight:600;color:var(--muted);
  padding:10px 8px;text-align:center;border:0;border-bottom:1px solid var(--hair);background:transparent}
.fwd-tw th.fwd-l{text-align:left;padding-left:20px}
.fwd-tw td{padding:11px 8px;text-align:center;border:0;border-bottom:1px solid var(--hair-2);
  font-variant-numeric:tabular-nums;font-size:15px}
.fwd-tw td.fwd-l{text-align:left;padding-left:20px}
.fwd-tw tbody tr:last-child td{border-bottom:0}
/* background-color only: the shorthand would wipe the ball off the diagonal */
.fwd-tw tbody tr:hover td{background-color:var(--surface-2)}
.fwd-pl{width:40px;font-weight:800;color:var(--navy)}
.fwd-pl--m1{color:var(--gold-ink)}
.fwd-pl--m2{color:#6B7489}
.fwd-pl--m3{color:#9A5F33}
.fwd-cl{display:flex;align-items:center;gap:12px;font-weight:500;font-variant-numeric:normal}
/* a club's name leads to the club, wherever it stands on the page */
a.fwd-cl,a.fwd-n,a.fwd-club{color:inherit;text-decoration:none}
a.fwd-club{color:var(--muted)}
a.fwd-cl:hover,a.fwd-n:hover,a.fwd-club:hover{color:var(--gold-ink)}
.fwd-cl img{width:30px;height:30px;object-fit:contain;flex:0 0 auto}
.fwd-pts{font-weight:800;font-size:18px}
.fwd-frm{display:flex;gap:3px;justify-content:center}
.fwd-frm i{width:22px;height:22px;border-radius:5px;font-style:normal;font-size:12px;font-weight:700;
  display:grid;place-items:center}
.fwd-frm .fwd-win{background:var(--win-bg);color:var(--win)}
.fwd-frm .fwd-draw{background:var(--draw-bg);color:var(--draw)}
.fwd-frm .fwd-loss{background:var(--loss-bg);color:var(--loss)}
/* the form of a phone: a strip of short bars under the club's name */
.fwd-frm-mini{display:none}
.fwd-standings table{min-width:680px}

/* the cross-table: vertical rules only here — this is the one table where the
   crossing of a row and a column is what you read */
.fwd-cross table{table-layout:fixed;min-width:calc(310px + var(--n) * 76px)}
/* scrolled sideways, the number and the club stay put — otherwise there is no
   telling whose row it is */
.fwd-cross th.fwd-n,.fwd-cross td.fwd-num{position:sticky;left:0;z-index:1;background-color:var(--surface)}
.fwd-cross th.fwd-corner,.fwd-cross td.fwd-team{position:sticky;left:44px;z-index:1;
  background-color:var(--surface);box-shadow:1px 0 0 var(--hair)}
.fwd-cross th.fwd-n,.fwd-cross th.fwd-corner{background-color:var(--surface)}
.fwd-cross th.fwd-n{width:44px}
.fwd-cross th.fwd-corner{width:250px;text-align:left;padding-left:12px}
.fwd-cross th.fwd-col{width:76px;font-size:14px;letter-spacing:0;color:var(--ink-2);
  border-left:1px solid var(--hair-2)}
.fwd-cross td.fwd-num{font-weight:800;color:var(--muted);font-size:14px}
.fwd-cross td.fwd-team{text-align:left;padding-left:12px}
.fwd-cross td.fwd-team .fwd-cl{gap:10px;font-size:14.5px}
.fwd-cross td.fwd-team .fwd-cl img{width:26px;height:26px}
.fwd-cross td.fwd-c{border-left:1px solid var(--hair-2);padding:8px 5px}
/* the chip sizes itself, min-width keeps «7:1» and «14:2» the same */
.fwd-cross td.fwd-c span{display:inline-block;min-width:3.2em;padding:3px 8px;border-radius:5px;
  font-weight:600;font-size:14.5px}
/* results are rw/rd/rl, not w/d/l: in a table .l already means «align left» */
.fwd-cross td.fwd-rw span{background:var(--win-bg);color:var(--win)}
.fwd-cross td.fwd-rd span{background:var(--draw-bg);color:var(--draw)}
.fwd-cross td.fwd-rl span{background:var(--loss-bg);color:var(--loss)}
.fwd-cross td.fwd-c--soon span{color:var(--faint);font-weight:500;font-size:12.5px}
/* the diagonal is the ball of the site, as in the hand-made cross-table */
.fwd-cross td.fwd-self{border-left:1px solid var(--hair-2);background-color:rgba(12,23,51,.05);
  background-image:url("../img/ball.png");background-repeat:no-repeat;background-position:center;
  background-size:22px 22px}
/* the legend is the same chips as the cells */
.fwd-legend{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--hair)}
.fwd-legend span{padding:3px 10px;border-radius:5px;font-size:12.5px;font-weight:600}
.fwd-legend .fwd-rw{background:var(--win-bg);color:var(--win)}
.fwd-legend .fwd-rd{background:var(--draw-bg);color:var(--draw)}
.fwd-legend .fwd-rl{background:var(--loss-bg);color:var(--loss)}

/* the calendar goes by match day: the data has no notion of a round */
.fwd-dayh{display:flex;align-items:baseline;gap:10px;padding:12px 20px;background:var(--surface-2);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair-2)}
.fwd-dayh b{font-size:14.5px;font-weight:800}
.fwd-dayh span{font-size:13px;color:var(--faint)}
.fwd-mt{grid-template-columns:52px minmax(0,1fr) auto minmax(0,1fr) 110px}
.fwd-mt:last-child{border-bottom:0}
.fwd-tm{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.fwd-mt__a,.fwd-mt__b{gap:12px}
.fwd-mt img{width:28px;height:28px}
.fwd-n{font-weight:500}
.fwd-sc{font-size:22px;min-width:64px}
/* a played score: warm and dashed, as on the front page */
.fwd-sc:not(.fwd-sc--soon){padding:3px 10px;border:1px dashed #E8C77A;border-radius:8px;
  background:var(--gold-soft);line-height:1.15}
/* a game ahead: the time with a clock in a cool dashed frame — the shape of
   a score, but plainly not one */
.fwd-sc--soon{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:14px;
  font-weight:700;color:#4A5D86;border:1px dashed #AFC0DE;border-radius:8px;background:#EEF2FA;padding:4px 10px;min-width:0;
  --fwd-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6V8l2.2 1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fwd-sc--soon::before{content:"";width:14px;height:14px;flex:0 0 auto;background:currentColor;
  -webkit-mask:var(--fwd-clock) center/contain no-repeat;mask:var(--fwd-clock) center/contain no-repeat}

/* play-off: the stages in a row, the rounds as columns of game cards, warm
   dashed lines (bracket.js) from a winner to his row in the next round */
.fwd-bk{position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:72px;padding:14px 20px 22px}
.fwd-bk__st{grid-column:1/-1;display:flex;align-items:center;margin-bottom:14px;
  font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.fwd-bk__st span{flex:1;background:var(--surface-2);border:1px solid var(--hair);border-radius:8px;padding:7px 12px;text-align:center}
.fwd-bk__st .fwd-bk__st--f{background:#FAE6B8;border-color:#E8C77A;color:var(--gold-ink)}
.fwd-bk__st em{flex:0 0 72px;text-align:center;font-style:normal;font-size:22px;line-height:1;color:#D9A93F}
.fwd-bk__col{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-around;gap:24px;min-width:0}
.fwd-bk__col--f{justify-content:center;gap:10px}
.fwd-bk__h{display:none;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.fwd-bk__places{position:relative;z-index:1;grid-column:-2/-1;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.fwd-bk__places .fwd-bk__h{display:block}
.fwd-bk__places .fwd-bk__card + .fwd-bk__h{margin-top:10px}
.fwd-bk__card{display:block;background:var(--gold-soft);border:2px dashed #E8C77A;border-radius:10px;padding:0 12px 6px;
  color:inherit;text-decoration:none}
.fwd-bk__card:hover{background:#FBEBC8;color:inherit}
.fwd-bk__card i{display:block;margin:0 -12px 4px;padding:6px 12px;background:#FAE6B8;border-bottom:2px dashed #E8C77A;
  border-radius:8px 8px 0 0;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.fwd-bk__card--fin{border:2px solid #E3A21A;box-shadow:0 6px 18px rgba(227,162,26,.18)}
.fwd-bk__card--fin i{background:#F6D88F;border-bottom-color:#E3A21A}
.fwd-bk__card--place{background:var(--surface-2);border-color:#C9D0DC}
.fwd-bk__card--place:hover{background:#EEF1F6}
.fwd-bk__card--place i{background:#E9EDF4;border-bottom-color:#C9D0DC;color:var(--muted)}
.fwd-bk__r{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14.5px}
.fwd-bk__r img,.fwd-bk__r > span:first-child{width:22px;height:22px;object-fit:contain;flex:0 0 auto}
.fwd-bk__r span{flex:1;min-width:0}
.fwd-bk__r b{min-width:26px;text-align:center;background:var(--surface);border-radius:6px;padding:2px 6px;font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.fwd-bk__r b small{font-size:11px;color:var(--muted)}
.fwd-bk__r--w span,.fwd-bk__r--w b{font-weight:800}
.fwd-bk__champ{text-align:center}
.fwd-bk__champ small{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gold-ink)}
.fwd-bk__champ svg{width:14px;height:14px}
.fwd-bk__champ a{display:block;margin-top:2px;font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.fwd-bk__champ a:hover{color:var(--gold-ink)}
.fwd-bk__lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.fwd-bk__lines path{fill:none;stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.fwd-bk__lines .fwd-win{stroke:#D9A93F}
.fwd-bk__lines .fwd-lose{stroke:#D7DCE6}

/* statistics */
.fwd-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
.fwd-srow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:10px 20px;border-bottom:1px solid var(--hair-2)}
.fwd-srow:last-child{border-bottom:0}
.fwd-srow:hover{background:var(--surface-2)}
.fwd-p{font-weight:800;color:var(--faint);font-size:13px;text-align:center}
.fwd-p--m1{color:var(--gold-ink)}
.fwd-p--m2{color:#6B7489}
.fwd-p--m3{color:#9A5F33}
.fwd-srow .fwd-nm{display:block;font-weight:600;font-size:14.5px;line-height:1.25}
.fwd-srow .fwd-nm:hover{color:var(--gold-ink)}
.fwd-club{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.fwd-val{font-weight:800;font-size:17px;min-width:28px;text-align:right}
/* discipline: no place to show, so no place column */
.fwd-srow--np{grid-template-columns:minmax(0,1fr) auto}
.fwd-empty{border-top:0}

@media (max-width:900px){
  .fwd-duo{grid-template-columns:1fr}
  /* too narrow for the lines: the rounds go one under another, each with its title */
  .fwd-bk{grid-template-columns:1fr;row-gap:12px}
  .fwd-bk__st,.fwd-bk__lines{display:none}
  .fwd-bk__h{display:block;margin-top:8px}
  .fwd-bk__col{gap:10px}
  .fwd-bk__places{grid-column:1;margin-top:0}
}
@media (max-width:620px){
  .fwd-ptitle h1{font-size:34px}
  .fwd-mt{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;padding:12px 16px}
  .fwd-tm{grid-column:1/4;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .fwd-go{grid-column:1/4;justify-content:flex-start;text-align:left}
  .fwd-mt img{width:24px;height:24px}
  /* a name of one long word («Московский») must fit its half of the row */
  .fwd-mt{column-gap:8px}
  .fwd-mt__a,.fwd-mt__b{gap:7px}
  .fwd-sc{font-size:19px;min-width:54px}
  .fwd-sc--soon{font-size:13px;padding:4px 8px}
  /* on a phone the table keeps only played, points and form */
  .fwd-tw th.fwd-opt,.fwd-tw td.fwd-opt{display:none}
  .fwd-standings table{min-width:0}
  .fwd-tw th,.fwd-tw td{padding:10px 5px}
  .fwd-tw td.fwd-l,.fwd-tw th.fwd-l{padding-left:16px}
  /* the place against the sheet's edge, the club close to it, and the
     points as far from the right edge as the place is from the left */
  .fwd-standings .fwd-pl{width:auto;padding-left:16px;padding-right:0;text-align:left}
  .fwd-standings td.fwd-l,.fwd-standings th.fwd-l{padding-left:10px}
  .fwd-standings th:nth-last-child(2),.fwd-standings td.fwd-pts{padding-right:16px}
  /* the note wraps under the heading: it starts where the heading does */
  .fwd-standings .fwd-hint{margin-left:0;flex-basis:100%}
  .fwd-cl img{width:24px;height:24px}
  /* the form column would push the table off the screen: under the name instead */
  .fwd-tw th.fwd-frmcol,.fwd-tw td.fwd-frmcol{display:none}
  .fwd-frm-mini{display:flex;gap:3px;margin:5px 0 0 34px}
  .fwd-frm-mini i{width:14px;height:5px;border-radius:2px}
  .fwd-frm-mini .fwd-win{background:var(--win)}
  .fwd-frm-mini .fwd-draw{background:var(--draw)}
  .fwd-frm-mini .fwd-loss{background:var(--loss)}
  .fwd-cross table{min-width:calc(182px + var(--n) * 62px)}
  .fwd-cross th.fwd-n{width:32px}
  /* the table scrolls as a whole here, so the club column takes the width
     of its longest name and keeps every name on one line */
  .fwd-cross table{table-layout:auto}
  .fwd-cross th.fwd-corner{width:auto}
  .fwd-cross td.fwd-team .fwd-cl{white-space:nowrap}
  /* on a phone the pinned club column takes half the screen: the whole
     table scrolls instead, as the cross-table of the old pages does */
  .fwd-cross th.fwd-n,.fwd-cross td.fwd-num,
  .fwd-cross th.fwd-corner,.fwd-cross td.fwd-team{position:static;box-shadow:none}
  .fwd-cross th.fwd-corner,.fwd-cross td.fwd-team{padding-left:8px}
  .fwd-cross th.fwd-col{width:62px}
  .fwd-cross td.fwd-team .fwd-cl{font-size:13.5px;gap:8px}
  .fwd-cross td.fwd-team .fwd-cl img{width:22px;height:22px}
  .fwd-cross td.fwd-c span{min-width:0;padding:3px 6px;font-size:13.5px}
  /* three kinds of cards wrap under each other, not into the name */
  .fwd-srow--np .fwd-cards{flex-wrap:wrap;justify-content:flex-end;max-width:150px;row-gap:4px}
}