/* Progress: the coach marks, goals panel, season cards, story beats, championship. Linked after the other sheets.
   Same scale rule as the rest of the menu-side UI: em everywhere, font-size from the viewport. Prefixes: co- gl- sr- in- bt- jd- cd- cc- */

/* ---------- coach marks ---------- */
#coach { position: fixed; inset: 0; z-index: 60; pointer-events: none; font-size: clamp(10.5px, min(1.1vw, 1.95vh), 20px); color: #2b1e24 }
#coach[hidden] { display: none !important }
.co-ring { position: fixed; border: .22em solid var(--amber); border-radius: .9em; box-shadow: 0 0 0 .22em rgba(242, 193, 78, .22), 0 0 1.8em rgba(242, 193, 78, .55), inset 0 0 1.2em rgba(242, 193, 78, .18); animation: coRing 1.4s ease-in-out infinite; pointer-events: none }
@keyframes coRing { 50% { box-shadow: 0 0 0 .5em rgba(242, 193, 78, .1), 0 0 2.6em rgba(242, 193, 78, .8), inset 0 0 1.6em rgba(242, 193, 78, .3); transform: scale(1.012) } }
.co-arrow { position: fixed; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none }
.co-line { fill: none; stroke: var(--amber); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 7 7; animation: coDash .8s linear infinite; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .6)) }
.co-head { fill: var(--amber); stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .6)) }
@keyframes coDash { to { stroke-dashoffset: -14 } }
.co-card { position: fixed; width: 19.5em; background: #fff8f1; border-radius: 1.15em; padding: .85em 1.1em 1em; display: grid; gap: .4em; pointer-events: auto; box-shadow: 0 .38em 0 #d9c4b6, 0 1.3em 2.6em rgba(0, 0, 0, .55); border: .09em solid rgba(255, 255, 255, .9) }
.co-card.in { animation: coIn .35s var(--ease-pop) }
@keyframes coIn { from { opacity: 0; transform: translateY(.8em) scale(.94) } }
.co-card.welcome { width: 25em; text-align: center; justify-items: center; padding: 1.3em 1.6em 1.3em; box-shadow: 0 .5em 0 #d9c4b6, 0 0 0 100vmax rgba(10, 6, 8, .55), 0 1.6em 3em rgba(0, 0, 0, .6) }
.co-card.welcome .co-title { font-size: 2em }
.co-top { display: flex; justify-content: space-between; align-items: center; width: 100% }
.co-badge { display: inline-flex; gap: .35em; align-items: center; background: var(--pink); color: #2a0c1a; font-weight: 800; font-size: .72em; letter-spacing: .06em; text-transform: uppercase; padding: .22em .75em .22em .55em; border-radius: 2em }
.co-badge svg { width: 1.1em; height: 1.1em }
.co-n { font-family: var(--mono); font-size: .72em; color: #8a7580 }
.co-title { margin: .05em 0 0; font-size: 1.4em; font-weight: 880; font-stretch: 70%; line-height: 1.05; letter-spacing: .005em }
.co-text { margin: 0; font-size: .95em; line-height: 1.4; color: #4a3a42 }
.co-btns { display: flex; flex-wrap: wrap; gap: .5em .9em; align-items: center; margin-top: .3em }
.co-card.welcome .co-btns { justify-content: center; margin-top: .6em }
.co-btns .btn { font-size: .95em }
.co-btns .linkbtn { font-size: .85em; color: #8a5e72 }
.co-ask { margin: 0; flex-basis: 100%; font-weight: 750; font-size: .95em }

/* ---------- the goals panel on the hub ---------- */
.goals { position: absolute; left: calc(2.6% + min(20em, 27%) + 1.4em); top: 5.9em; width: min(21.5em, 26%); z-index: 2; background: var(--glass); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .09); border-radius: 1.1em; padding: .8em 1em .9em; display: grid; gap: .3em; box-shadow: 0 .3em 0 rgba(0, 0, 0, .35); animation: pop .5s .15s var(--ease-pop) both; --sc: var(--amber) }
.gl-head { display: flex; gap: .7em; align-items: center }
.gl-emb { width: 2.7em; height: 2.7em; border-radius: 50%; display: grid; place-items: center; color: var(--sc); background: rgba(255, 255, 255, .07); border: .12em solid var(--sc); flex: none }
.gl-emb svg { width: 1.7em; height: 1.7em }
.gl-head b { display: block; font-size: 1.2em; font-weight: 850; font-stretch: 72%; line-height: 1.05 }
.gl-head b em { font-style: normal; font-size: .72em; font-weight: 700; color: var(--sc); margin-left: .35em; letter-spacing: .02em }
.gl-head span { font-size: .78em; color: var(--muted) }
.gl-pips { display: grid; grid-template-columns: repeat(14, 1fr); gap: .18em; margin: .35em 0 .15em }
.gl-pips u { height: .42em; border-radius: .3em; background: rgba(255, 255, 255, .14) }
.gl-pips u.past { background: var(--sc); opacity: .55 }
.gl-pips u.now { background: var(--sc); box-shadow: 0 0 .6em var(--sc) }
.goals h5 { margin: .55em 0 .1em; font-family: var(--mono); font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; font-weight: 600 }
.goals h5 em { font-style: normal; color: var(--cream) }
.gl-row { display: grid; grid-template-columns: 1.35em 1fr auto; gap: .55em; align-items: center; padding: .28em 0; border-top: 1px solid rgba(255, 255, 255, .06) }
.gl-row:first-of-type { border-top: 0 }
.gl-chk { width: 1.25em; height: 1.25em; border-radius: .4em; border: .12em solid rgba(255, 255, 255, .3); display: grid; place-items: center; color: transparent }
.gl-chk svg { width: .85em; height: .85em }
.gl-tx span { font-size: .84em; font-weight: 650; line-height: 1.2; display: block }
.gl-bar { height: .3em; border-radius: .2em; background: rgba(255, 255, 255, .12); margin-top: .22em; overflow: hidden }
.gl-bar u { display: block; height: 100%; background: var(--sc); border-radius: .2em; transition: width .7s cubic-bezier(.3, 1, .4, 1) }
.gl-row small { font-family: var(--mono); font-size: .68em; color: var(--muted); white-space: nowrap }
.gl-row.done .gl-chk { background: var(--ok); border-color: var(--ok); color: #10231a }
.gl-row.done .gl-tx span { color: var(--muted); text-decoration: line-through; text-decoration-thickness: .08em }
.gl-row.done .gl-bar u { background: var(--ok) }
.gl-row.done small { color: var(--ok) }
.gl-fx { margin: .5em 0 0; font-size: .74em; color: #cfc4b8; font-style: italic; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .5em }
.hud-chip.day .hud-seas { font-style: normal; font-size: .72em; font-weight: 800; letter-spacing: .02em; margin-top: -.15em }
#ph-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr }
#ph-tabs button.new::after { content: ""; position: absolute; top: .15em; right: 22%; width: .75em; height: .75em; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 .2em rgba(233, 91, 147, .3); animation: coRing 1.2s ease-in-out infinite }
.seasonline { display: block; margin-top: .45em; color: var(--amber); font-style: italic; opacity: .95 }
.set-replay { grid-template-columns: 1fr auto }

/* ---------- season recap and intro ---------- */
.prog-ovl { z-index: 72 }
.sr { --sc: var(--amber); position: relative; width: min(58em, 95vw); max-height: 96vh; overflow: auto; background: linear-gradient(#2a201c, #1b1411); border-radius: 1.6em; border: .12em solid rgba(246, 236, 220, .2); box-shadow: 0 .5em 0 #0b0706, 0 2.5em 5em rgba(0, 0, 0, .65); padding: 1.3em 1.8em 1.4em; display: grid; gap: .9em; animation: pop .45s var(--ease-pop) both }
.sr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .45em; background: var(--sc) }
.sr-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1em; align-items: center; margin-top: .3em }
.sr-emb { width: 4.6em; height: 4.6em; border-radius: 50%; display: grid; place-items: center; color: var(--sc); background: radial-gradient(circle, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: .15em solid var(--sc); box-shadow: 0 0 1.6em color-mix(in srgb, var(--sc) 45%, transparent) }
.sr-emb svg { width: 2.9em; height: 2.9em }
.sr-k { font-family: var(--mono); font-size: .76em; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.sr h2 { margin: .05em 0 0; font-size: 3em; font-weight: 900; font-stretch: 62%; line-height: .95; color: var(--cream) }
.sr-head p { margin: .2em 0 0; color: var(--muted); font-size: .9em }
.sr-score { text-align: center; background: rgba(255, 255, 255, .07); border-radius: 1em; padding: .4em 1em }
.sr-score b { display: block; font-size: 2.2em; font-weight: 900; font-stretch: 62%; color: var(--sc); line-height: 1 }
.sr-score span { font-size: .75em; color: var(--muted) }
.sr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em }
.sr-grid div { background: rgba(255, 255, 255, .06); border-radius: .9em; padding: .55em .9em; display: grid; animation: pop .45s calc(var(--i) * .07s + .1s) var(--ease-pop) both }
.sr-grid i { font-style: normal; font-size: .78em; color: var(--muted) }
.sr-grid b { font-size: 2em; font-weight: 880; font-stretch: 64%; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--cream) }
.sr-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.2em }
.sr h5 { margin: 0 0 .45em; font-family: var(--mono); font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
.sr-vid { display: grid; gap: .5em; background: rgba(255, 255, 255, .06); border-radius: 1em; padding: .55em; transform: rotate(-1.2deg) }
.sr-vid img, .sr-noimg { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: .6em; background: #120d0c; display: block }
.sr-vid b { font-size: 1.02em; line-height: 1.2; display: block }
.sr-vid span { font-size: .82em; color: var(--muted) }
.sr-none { margin: 0; color: var(--muted); font-style: italic }
.sr-quote { margin: .5em 0 0; font-style: italic; color: #dccfc0; font-size: .95em; line-height: 1.4 }
.sr-g { display: grid; grid-template-columns: 1.6em 1fr; gap: .6em; padding: .45em 0; border-top: 1px solid rgba(255, 255, 255, .07); align-items: start }
.sr-g:first-of-type { border-top: 0 }
.sr-g i { width: 1.45em; height: 1.45em; border-radius: .45em; border: .13em solid rgba(255, 255, 255, .3); display: grid; place-items: center; margin-top: .1em; color: #10231a }
.sr-g i svg { width: .95em; height: .95em }
.sr-g.ok i { background: var(--ok); border-color: var(--ok) }
.sr-g span { font-weight: 700; display: block; line-height: 1.25 }
.sr-g small { color: var(--muted); font-size: .82em }
.sr-g.ok small { color: var(--ok) }
.sr-year { margin: 0; text-align: center; color: var(--sc); font-weight: 650; font-size: .95em }
.sr footer { display: flex; justify-content: flex-end }
.sr.intro { text-align: center; justify-items: center; gap: .6em; padding-top: 1.5em; width: min(46em, 95vw) }
.in-emb { width: 7em; height: 7em; border-radius: 50%; display: grid; place-items: center; color: var(--sc); border: .18em solid var(--sc); background: radial-gradient(circle, color-mix(in srgb, var(--sc) 22%, transparent), rgba(255, 255, 255, .03)); box-shadow: 0 0 3em color-mix(in srgb, var(--sc) 50%, transparent); animation: plaqueIn .8s var(--ease-pop) both }
.in-emb svg { width: 4.5em; height: 4.5em }
.sr.intro h2 { font-size: 4.6em }
.in-tag { color: var(--sc); font-size: 1.3em; font-weight: 850; font-stretch: 78%; margin-top: -.3em }
.in-blurb { margin: .2em 0; max-width: 34em; color: #e4d8c9; line-height: 1.45 }
.in-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.4em; text-align: left; width: 100%; margin-top: .3em }
.in-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em }
.in-cols li { background: rgba(255, 255, 255, .06); border-radius: .8em; padding: .5em .8em; font-size: .9em; line-height: 1.3; animation: pop .4s var(--ease-pop) both }
.in-goals li { display: grid; gap: .1em }
.in-goals small { color: var(--ok); font-size: .88em }

/* ---------- story beats ---------- */
.bt { width: min(52em, 95vw); display: grid; grid-template-columns: 14em 1fr; gap: 1.4em; align-items: end; animation: pop .45s var(--ease-pop) both }
.bt-portrait { border-radius: 1.4em; overflow: hidden; border: .15em solid rgba(246, 236, 220, .35); box-shadow: 0 .4em 0 #0b0706, 0 1.6em 3em rgba(0, 0, 0, .6); transform: rotate(-2deg); aspect-ratio: 1 }
.bt-portrait img { width: 100%; height: 100%; object-fit: cover; display: block }
.bt-box { background: linear-gradient(#2a201c, #1b1411); border-radius: 1.4em; border: .12em solid rgba(246, 236, 220, .22); padding: 1.1em 1.4em 1.2em; display: grid; gap: .6em; box-shadow: 0 .45em 0 #0b0706; position: relative; min-height: 14em; align-content: start; cursor: pointer }
.bt-who b { font-size: 1.3em; font-weight: 850; font-stretch: 72%; color: var(--amber) }
.bt-who span { margin-left: .7em; font-size: .85em; color: var(--muted) }
.bt-text { margin: 0; font-size: 1.12em; line-height: 1.5; min-height: 4.6em }
.bt-next { position: absolute; right: 1.2em; bottom: .8em; font-size: .75em; color: var(--muted); animation: coRing 1.4s ease-in-out infinite }
.bt-choices { display: grid; gap: .5em }
.bt-choices button { text-align: left; display: grid; gap: .1em; background: rgba(255, 255, 255, .07); border: .1em solid rgba(246, 236, 220, .18); border-radius: .9em; padding: .6em 1em; font-size: 1em; cursor: pointer; box-shadow: 0 .18em 0 rgba(0, 0, 0, .4) }
.bt-choices button:hover { background: rgba(233, 91, 147, .2); border-color: var(--pink); transform: translateY(-.06em) }
.bt-choices button b { font-weight: 800 }
.bt-choices button span { font-size: .82em; color: var(--muted) }
.bt-res p { margin: 0 0 .5em; line-height: 1.45 }
.bt-res em { display: block; font-style: normal; color: var(--ok); font-weight: 700; margin-bottom: .6em; font-size: .95em }

/* ---------- the championship ---------- */
#comp-clock { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 30; display: grid; justify-items: center; gap: .1rem; background: rgba(18, 13, 12, .88); backdrop-filter: blur(6px); border: 2px solid var(--amber); border-radius: 1rem; padding: .3rem 1.4rem .5rem; box-shadow: 0 .3rem 0 rgba(0, 0, 0, .45); font-family: var(--display); pointer-events: none; min-width: 11rem }
#comp-clock[hidden] { display: none !important }
.cc-k { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber) }
.cc-t { font-size: 2.4rem; font-weight: 900; font-stretch: 62%; line-height: 1; font-variant-numeric: tabular-nums; color: var(--cream) }
.cc-bar { display: block; width: 100%; height: .35rem; border-radius: .3rem; background: rgba(255, 255, 255, .15); overflow: hidden }
.cc-bar u { display: block; height: 100%; width: 100%; background: var(--amber); transition: width .25s linear }
#comp-clock.warn { border-color: #ff9a4d } #comp-clock.warn .cc-t { color: #ffb066 } #comp-clock.warn .cc-bar u { background: #ff9a4d }
#comp-clock.late { border-color: var(--rec); animation: coRing .5s infinite } #comp-clock.late .cc-t { color: var(--rec) } #comp-clock.late .cc-bar u { background: var(--rec) }
#screen-play.comp #hint { top: 4.6rem }
.jd { width: min(62em, 96vw); max-height: 97vh; overflow: auto; display: grid; gap: .8em; justify-items: center; text-align: center; padding: .4em .6em }
.jd header { display: grid; gap: .1em }
.jd h2 { margin: 0; font-size: 3.2em; font-weight: 900; font-stretch: 62%; color: var(--cream); line-height: 1 }
.jd-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9em; width: 100% }
.jd-card { --jc: var(--pink); background: #fff8f1; color: #2b1e24; border-radius: .9em; padding: .8em .9em .9em; display: grid; gap: .35em; text-align: left; box-shadow: 0 .3em 0 #d9c4b6, 0 1em 1.8em rgba(0, 0, 0, .5); border-top: .5em solid var(--jc); transform: rotate(calc((var(--i) - 1.5) * 1.4deg)); animation: cardDrop .55s calc(var(--i) * .65s + .3s) var(--ease-pop) both }
@keyframes cardDrop { from { opacity: 0; transform: translateY(-2em) rotate(6deg) scale(.9) } }
.jd-who { display: flex; gap: .55em; align-items: center }
.jd-who i { width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--jc); color: #1b1411; display: grid; place-items: center; font-style: normal; font-weight: 850; font-size: .9em; flex: none }
.jd-who b { display: block; font-size: .95em; line-height: 1.1 }
.jd-who span { font-size: .75em; color: #8a7580 }
.jd-score { display: flex; align-items: baseline; gap: .2em; margin-top: .1em }
.jd-score b { font-size: 3.2em; font-weight: 900; font-stretch: 62%; line-height: 1; color: var(--jc); filter: brightness(.82) }
.jd-score small { color: #8a7580 }
.jd-time { font-family: var(--mono); font-size: .75em; color: #8a7580 }
.jd-card p { margin: 0; font-size: .82em; line-height: 1.35; font-style: italic; color: #4a3a42 }
.jd-total { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4em; align-items: center; width: 100%; background: rgba(255, 255, 255, .06); border-radius: 1.1em; padding: .8em 1.2em; animation: pop .5s calc(var(--i) * .65s + .4s) var(--ease-pop) both; text-align: left }
.jd-total > div:first-child { display: grid; justify-items: center }
.jd-total i { font-style: normal; font-size: .8em; color: var(--muted) }
.jd-total b { font-size: 3.6em; font-weight: 900; font-stretch: 62%; line-height: 1; color: var(--amber) }
.jd-total small { color: var(--muted) }
.jd-board { display: grid; gap: .22em }
.jd-board div { display: grid; grid-template-columns: 1.4em 1fr 3em; gap: .5em; align-items: center; font-size: .85em; position: relative; padding: .1em .4em; border-radius: .5em; overflow: hidden }
.jd-board div em { font-style: normal; font-family: var(--mono); color: var(--muted) }
.jd-board div span { position: relative; z-index: 1 }
.jd-board div b { font-size: 1em; font-stretch: 100%; font-weight: 700; color: var(--cream); text-align: right; line-height: 1; position: relative; z-index: 1 }
.jd-board div u { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .08); border-radius: .5em }
.jd-board div.you u { background: rgba(233, 91, 147, .4) } .jd-board div.you span { font-weight: 800 }
.jd-medal { display: grid; justify-items: center; gap: .1em; width: 9em }
.jd-medal img { width: 5.6em; height: 5.6em; object-fit: contain; filter: grayscale(.9) brightness(.7) }
.jd-medal.gold img { filter: sepia(1) saturate(3.4) hue-rotate(-14deg) brightness(1.2) contrast(1.05); animation: plaqueIn .8s var(--ease-pop) both }
.jd-medal.silver img { filter: none; animation: plaqueIn .8s var(--ease-pop) both }
.jd-medal.bronze img { filter: sepia(1) saturate(2.2) hue-rotate(-32deg) brightness(.82); animation: plaqueIn .8s var(--ease-pop) both }
.jd-medal svg { width: 4em; height: 4em; color: var(--pink) }
.jd-medal b { font-size: 1.05em; font-weight: 850; font-stretch: 78%; line-height: 1.1; text-align: center; font-size: 1em; color: var(--cream) }
.jd-medal span { font-size: .8em; color: var(--amber); font-weight: 750 }
.jd-reward { margin: 0; color: var(--ok); font-weight: 750 }

/* ---------- the documentary credits ---------- */
.credits { background: #070506; place-items: stretch; padding: 0 }
.cd-roll { position: absolute; inset: 0; overflow: hidden; display: grid; justify-items: center }
.cd-in { width: min(34em, 90vw); text-align: center; display: grid; gap: .9em; padding-top: 100vh; animation: crScroll 38s linear forwards }
@keyframes crScroll { to { transform: translateY(-135%) } }
.cd-in h2 { margin: 0 0 .8em; font-size: 4.4em; font-weight: 900; font-stretch: 62%; color: var(--cream); line-height: .95 }
.cd-in div { display: grid; gap: .1em }
.cd-in i { font-style: normal; font-family: var(--mono); font-size: .78em; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.cd-in b { font-size: 1.5em; font-weight: 800; font-stretch: 80%; color: var(--cream) }
.cd-in p { color: #cbbfb0; font-style: italic; margin: 2em 0 0 }
.cd-in h3 { margin: 1em 0 0; font-size: 3em; font-weight: 900; font-stretch: 62%; color: var(--pink) }
.cd-foot { position: absolute; left: 0; right: 0; bottom: 1.6em; display: grid; justify-items: center; gap: .3em; z-index: 2 }
.cd-foot small { color: var(--muted) }

@media (max-width: 1000px) {
  .goals { position: static; width: auto; margin: .6em 1em }
  .jd-cards { grid-template-columns: repeat(2, 1fr) }
  .bt { grid-template-columns: 1fr } .bt-portrait { width: 9em }
}
@media (prefers-reduced-motion: reduce) {
  .co-ring, .co-line, #ph-tabs button.new::after, .bt-next, #comp-clock.late { animation: none }
  .cd-in { animation-duration: 90s }
}

/* a young channel has little to show on the Stats tab: keep the cards packed at the top instead of stretching them over the tab bar */

.co-prog { display: block; width: 4.2em; height: .38em; border-radius: .3em; background: #eadfd6; overflow: hidden }
.co-prog u { display: block; height: 100%; background: var(--pink); border-radius: .3em; transition: width .4s }
.cd-foot { bottom: 0; padding: 3em 0 1.4em; background: linear-gradient(transparent, #070506 45%) }