/* Tournament Scoreboard v25.0.0-dev.15.4 — Viewer UX / Visual Polish
   Visual-only layer. No tournament, realtime, scoring or bracket logic lives here. */

:root{
  --viewer-max:1460px;
  --viewer-card-radius:16px;
  --viewer-soft-shadow:0 8px 30px rgba(15,23,42,.055);
  --viewer-card-shadow:0 2px 10px rgba(15,23,42,.035);
}
body{background:linear-gradient(180deg,#f5f7f9 0,#f3f5f7 38%,#f6f7f9 100%)}
.page-shell{width:min(var(--viewer-max),100%);padding:20px 24px 42px}

/* Hero: event first, metadata second, connection compact. */
.hero{min-height:190px;padding:30px 34px;border-radius:24px;background:linear-gradient(128deg,var(--primary) 0%,#6f1d25 34%,#21171c 66%,#111318 100%);box-shadow:0 16px 46px rgba(15,23,42,.16)}
.hero:before{right:-120px;bottom:-250px;width:470px;height:470px;border-width:78px;opacity:.92}
.hero:after{right:235px;top:-106px;width:220px;height:220px}
.hero h1{max-width:980px;margin:7px 0 17px;font-size:clamp(32px,4vw,52px);letter-spacing:-.045em}
.eyebrow{font-size:10px;letter-spacing:.16em}
.event-meta{grid-template-columns:repeat(2,minmax(190px,max-content));gap:10px 24px}
.event-meta-item{grid-template-columns:34px minmax(0,1fr);gap:9px}
.event-meta-icon{width:34px;height:34px;border-radius:11px}
.event-meta-copy b{font-size:8px}.event-meta-copy span{font-size:14px}
.connection{padding:8px 11px;font-size:10px;background:rgba(15,18,22,.22);border-color:rgba(255,255,255,.18)}

/* Navigation: quieter, more app-like. */
.viewer-layout{grid-template-columns:168px minmax(0,1fr);gap:16px;margin-top:16px}
.viewer-side-nav{top:16px;padding:8px;border-radius:16px;box-shadow:var(--viewer-soft-shadow)}
.side-nav-title{padding:6px 9px 9px;font-size:8px}
.viewer-side-nav button{padding:8px 10px;border-radius:9px;font-size:10px}
.viewer-side-nav button.active{background:#171a1f;color:#fff}
.viewer-toolbar{top:8px;margin-bottom:16px;padding:6px;border-radius:15px;box-shadow:var(--viewer-soft-shadow)}
.sport-nav button{padding:9px 12px}.sport-nav button.active{background:#171a1f}
.layout-switch button{min-width:58px;padding:7px 9px}

/* Sections: less nested-card feeling, clearer hierarchy. */
.section{margin-top:16px;padding:20px 22px;border-radius:18px;box-shadow:var(--viewer-card-shadow)}
.section-head{margin-bottom:15px}.section-head h2,.section-summary h2{font-size:22px}
.section-kicker{font-size:8px;letter-spacing:.14em}.refresh-note{font-size:9px}
.sport-block+.sport-block{margin-top:20px}.sport-title{margin-bottom:11px;font-size:14px}
.sport-icon{width:30px;height:30px;border-radius:10px}

/* LIVE: dense enough for operations, but score and teams remain dominant. */
.live-section{border-color:#ead7d5;background:linear-gradient(180deg,#fff 0,#fff 78%,#fffafa 100%)}
.live-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.match-card{padding:12px 14px;border-radius:var(--viewer-card-radius);box-shadow:none}
.match-card:hover{transform:none;box-shadow:0 4px 15px rgba(15,23,42,.045)}
.match-card.live{padding:12px 14px;border-color:#f3aaa4;background:linear-gradient(180deg,#fff 0,#fff 72%,#fffafa 100%);box-shadow:0 0 0 2px rgba(217,45,32,.035)}
.match-top{margin-bottom:8px;font-size:9px;line-height:1.25}
.match-card.live .match-top>span:first-child{color:#475467;font-weight:900}
.badge{min-height:22px;padding:3px 8px;font-size:8px}.badge.live{position:relative;padding-left:18px}.badge.live:before{content:"";position:absolute;left:8px;width:6px;height:6px;border-radius:50%;background:#d92d20;box-shadow:0 0 0 4px rgba(217,45,32,.08)}
.teams-vs{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);gap:12px;min-height:58px}
.team{font-size:15px;line-height:1.15;letter-spacing:-.01em}.team-name{gap:8px}.team-color{height:25px}
.score-wrap{width:104px}.score{font-size:38px;line-height:.95;letter-spacing:-.045em}
.penalties{margin-top:5px;font-size:10px}.sub{margin-top:6px;font-size:10px;font-weight:800;color:#586174;line-height:1.35}
.match-card.live .sub{display:inline-flex;justify-content:center;width:100%;padding:5px 8px;border-radius:8px;background:#f8fafc}
.event-feed{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px;margin-top:8px;padding-top:8px}
.event-row{min-width:0;gap:5px;font-size:9px}.event-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* List mode remains compact, not a different information model. */
.match-card.list-card{grid-template-columns:minmax(170px,.65fr) minmax(0,1.8fr) minmax(150px,.58fr);padding:10px 13px}
.match-card.list-card .teams-vs{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);min-height:0}
.match-card.list-card .score-wrap{width:92px}.match-card.list-card .score{font-size:30px}.match-card.list-card .sub{font-size:9px}

/* Match of the day: clearly special, but not oversized. */
.feature-section{border-color:#e9dfbc;background:linear-gradient(145deg,#fff,#fffdf8)}
.spotlight-grid{gap:10px}
.spotlight-card{padding:16px 17px;border-radius:17px;box-shadow:0 5px 18px rgba(16,24,40,.045)}
.spotlight-card.final{background:linear-gradient(145deg,#fffef9,#fff9df)}
.spotlight-card.show{background:linear-gradient(145deg,#fff,#f7f1ff)}
.spotlight-top{font-size:8px}.spotlight-stage{font-size:10px}
.spotlight-vs{grid-template-columns:minmax(0,1fr) 108px minmax(0,1fr);margin-top:15px}
.spotlight-vs>strong{font-size:16px;line-height:1.15}.spotlight-score b{font-size:38px}

/* Next: one row by design. Six cards fit on wide screens, scroll instead of wrapping. */
.next-strip{display:flex;flex-wrap:nowrap;gap:8px;margin:0 -2px;padding:2px 2px 7px;scroll-snap-type:x proximity}
.next-item{flex:1 1 0;min-width:138px;min-height:82px;padding:10px 10px 10px 13px;border-radius:11px;scroll-snap-align:start}
.next-time{font-size:11px}.next-item strong{font-size:11px;line-height:1.2}.next-item small{font-size:9px}

/* Tables/rankings: slightly larger for public display. */
.standings-wrap{gap:12px}.standing-card,.rank-list,.leader-card{border-radius:14px}
.standing-card h4,.rank-list h4,.leader-card h4{padding:10px 12px;font-size:12px}
.standing-table{font-size:10px}.standing-table th,.standing-table td{padding:8px 7px}.standing-table th{font-size:8px}
.rank-row,.leader-row{padding:9px 11px;font-size:10px}.rank-row .value{font-size:13px}.leader-value{font-size:15px}

/* Winners. */
.podium{gap:9px}.podium-place{border-radius:14px}.podium-place.first{min-height:124px}.podium-place.second{min-height:101px}.podium-place.third{min-height:90px}.podium-place>span{font-size:24px}.podium-place strong{font-size:12px}

/* Кроссфит public cards — same density language as match LIVE. */
.cf-live-card{padding:13px 14px;border-radius:16px;background:linear-gradient(180deg,#fff,#fffafa);box-shadow:0 0 0 2px rgba(217,45,32,.035)}
.cf-person{font-size:16px}.cf-meta{font-size:10px}.cf-stage{padding:7px 4px}.cf-stage b{font-size:8px}.cf-stage strong{font-size:12px}.cf-total strong{font-size:23px}
.zone-column{padding:10px;border-radius:14px}.zone-head{font-size:11px}.cf-row{padding:8px 4px}.cf-time,.cf-team{font-size:10px}.cf-result{font-size:13px}

/* Playoff: final remains visually primary; bronze secondary below. */
.single-bracket{gap:14px}.round-title{font-size:9px}.bracket-match{padding:11px;border-radius:12px}.bracket-match.live{border-color:#f97066;box-shadow:0 0 0 2px rgba(217,45,32,.045)}
.bracket-team{padding:7px 8px;font-size:10px}.bracket-team strong{font-size:14px}.final-round .bracket-match{border-width:2px}.bronze-round .bracket-match{background:#fcfcfd}
.bracket-lane{border-radius:14px}

/* Collapse blocks feel lighter than full cards. */
.collapsible-section{box-shadow:none}.section-summary{padding:17px 21px}.collapsible-body{padding:0 21px 20px}.summary-count{height:27px;min-width:27px}
.empty{padding:20px}
footer{margin-top:22px;padding-bottom:8px}

@media(max-width:1180px){
  .viewer-layout{grid-template-columns:156px minmax(0,1fr)}
  .next-item{flex:0 0 170px}
  .teams-vs{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)}.score-wrap{width:96px}.score{font-size:35px}
}
@media(max-width:1040px){
  .page-shell{padding-left:16px;padding-right:16px}
  .viewer-layout{grid-template-columns:1fr;gap:10px}
  .viewer-side-nav{top:0;margin:0 -16px 10px;padding:7px 16px;border-left:0;border-right:0;border-radius:0;box-shadow:0 3px 12px rgba(15,23,42,.045)}
  .viewer-side-nav button.active{background:#171a1f;color:#fff}
  .next-item{flex:0 0 180px}
}
@media(max-width:820px){
  .hero{min-height:0;padding:25px 22px;align-items:flex-start;flex-direction:column}.hero h1{font-size:clamp(30px,7vw,44px)}
  .event-meta{grid-template-columns:1fr 1fr;width:100%}
  .live-grid,.grid,.spotlight-grid,.standings-wrap,.zone-grid,.single-bracket{grid-template-columns:1fr}
  .final-round,.bronze-round{grid-column:auto;padding-top:0}
  .leaders-grid{grid-template-columns:1fr 1fr}.ranking-grid{grid-template-columns:1fr 1fr}.ranking-grid>.rank-list:first-child{grid-column:1/-1}
  .match-card.live{padding:12px 14px}.teams-vs{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr)}.score-wrap{width:104px}.score{font-size:38px}
  .spotlight-vs{grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr)}
}
@media(max-width:620px){
  .page-shell{padding:9px 9px 28px}
  .hero{padding:22px 18px;border-radius:19px}.hero h1{margin-bottom:15px;font-size:clamp(28px,9vw,40px)}
  .event-meta{grid-template-columns:1fr;gap:9px}.event-meta-icon{width:31px;height:31px}.event-meta-item{grid-template-columns:31px minmax(0,1fr)}
  .viewer-side-nav{margin:0 -9px 9px;padding-left:9px;padding-right:9px}
  .viewer-toolbar{top:4px;margin-bottom:10px}.layout-switch>span{display:none}.layout-switch button{min-width:auto;padding:7px}
  .section{margin-top:10px;padding:15px;border-radius:15px}.section-head{margin-bottom:12px}.section-head h2,.section-summary h2{font-size:19px}
  .collapsible-section{padding:0}.section-summary{padding:15px}.collapsible-body{padding:0 15px 15px}
  .teams-vs{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:7px;min-height:52px}.score-wrap{width:84px}.score{font-size:31px}.team{font-size:12px}.team-color{height:20px}
  .match-top{align-items:flex-start}.badge{min-height:21px}.sub{font-size:9px}.match-card.live .sub{padding:4px 6px}
  .event-feed{grid-template-columns:1fr}.event-row{font-size:9px}
  .spotlight-vs{grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);gap:7px}.spotlight-vs>strong{font-size:13px}.spotlight-score b{font-size:31px}
  .next-item{flex:0 0 168px;min-height:78px}
  .ranking-grid,.leaders-grid{grid-template-columns:1fr}.ranking-grid>.rank-list:first-child{grid-column:auto}
  .podium{gap:5px}.podium-place{padding:8px}.podium-place strong{font-size:10px}
  .cf-stages{grid-template-columns:repeat(4,minmax(0,1fr))}
  .match-card.list-card{display:block}.match-card.list-card .match-top{margin-bottom:8px}.match-card.list-card .sub{margin-top:6px;text-align:center}
}
@media(max-width:430px){
  .sport-nav button{padding:8px 9px}.sport-nav button span:last-child{font-size:10px}
  .teams-vs{grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr)}.score-wrap{width:76px}.score{font-size:28px}
  .cf-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .podium-place.first{min-height:110px}.podium-place.second{min-height:94px}.podium-place.third{min-height:84px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* v25.0.0-dev.15.4 — shared consistency / responsive hardening.
   No Viewer data, realtime, standings or playoff behavior changes. */
:root{--ui-focus:rgba(217,45,32,.18);--ui-safe:env(safe-area-inset-bottom,0px)}
*,*:before,*:after{box-sizing:border-box}
html{scroll-padding-top:86px}
body{overflow-x:hidden}
.page-shell,.viewer-layout,.viewer-main,.section,.sport-block,.live-grid,.match-card,.teams-vs,.team,.score-wrap,.spotlight-card,.spotlight-vs,.next-strip,.standing-card,.rank-list,.leader-card,.bracket-lane{min-width:0}
.team,.team-name,.spotlight-vs>strong,.next-item strong,.bracket-team span{overflow-wrap:anywhere}
.score,.spotlight-score b,.standing-table,.rank-row .value,.leader-value,.cf-total strong,.cf-result{font-variant-numeric:tabular-nums lining-nums}
.viewer-side-nav,.sport-nav,.next-strip{overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.viewer-side-nav button,.sport-nav button,.layout-switch button,.section-summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
.next-strip{scrollbar-width:thin;scrollbar-gutter:stable}
.collapsible-section[open]>.section-summary{border-bottom-color:#eceff2}
@media(max-width:1040px){
  html{scroll-padding-top:112px}
  .viewer-side-nav{scroll-snap-type:x proximity}
  .viewer-side-nav button{scroll-snap-align:start}
}
@media(max-width:620px){
  .page-shell{padding-bottom:calc(28px + var(--ui-safe))}
  html{scroll-padding-top:104px}
  .sport-nav{overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x proximity}
  .sport-nav button{flex:0 0 auto;min-height:42px;scroll-snap-align:start}
  .layout-switch button{min-height:42px}
  .viewer-toolbar{gap:6px}
  .next-strip{margin-right:-15px;padding-right:15px}
  .section-summary{min-height:52px}
}
@media(max-width:430px){
  .hero{padding-left:15px;padding-right:15px}
  .match-card.live{padding-left:10px;padding-right:10px}
  .teams-vs{gap:5px}
  .spotlight-card{padding-left:12px;padding-right:12px}
  .spotlight-vs{gap:5px}
}
@media(hover:none){.match-card:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}