/* Projector / big-screen view — a fixed 1920×1080 stage scaled to fit any display */
.screen-body { overflow: hidden; background: #02060f; height: 100vh; }
.stage-outer { position: fixed; inset: 0; overflow: hidden; }
/* centred with left/top 50% + translate so it fits any screen (grid centring pins an oversized item to the top-left) */
.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%); transform-origin: center; overflow: hidden; }
.st-bg { position: absolute; inset: 0;
  background:
    radial-gradient(1100px 700px at 10% -10%, rgba(58,116,255,.35), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(242,191,74,.14), transparent 60%),
    radial-gradient(1400px 600px at 50% 120%, rgba(35,86,214,.35), transparent 60%),
    linear-gradient(180deg, #071029, #040a1a); }
.st-rink { position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid rgba(255,74,74,.06); box-shadow: 0 0 0 220px rgba(58,116,255,.02); }
.st-rink::before { content: ''; position: absolute; left: 50%; top: -400px; bottom: -400px; width: 10px; transform: translateX(-50%); background: rgba(255,74,74,.06); }
.st-rink::after { content: ''; position: absolute; inset: 42%; border-radius: 50%; border: 3px solid rgba(58,116,255,.09); }

.board { position: absolute; inset: 0; display: grid; grid-template-rows: 132px 1fr 222px; padding: 0 40px; }
.st-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.st-brand { display: flex; align-items: center; gap: 18px; }
.st-brand img { width: 96px; height: 96px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
.st-brand .t1 { font-family: var(--display); text-transform: uppercase; font-size: 40px; line-height: 1; }
.st-brand .t2 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .3em; color: var(--gold); font-size: 17px; margin-top: 6px; }
.st-brand .t2 .script { font-family: var(--script); text-transform: none; letter-spacing: .01em; font-size: 26px; color: var(--cream); text-shadow: 0 2px 0 var(--barn); vertical-align: -2px; }
.board::before { content: ''; position: absolute; left: 0; right: 0; top: 128px; height: 5px; background: var(--stripe-thin); opacity: .8; }
.st-right { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.st-right .st-goat { width: 92px; height: 92px; }
.st-progress { text-align: right; font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); font-size: 16px; }
.st-progress b { display: block; font-family: var(--display); font-weight: 400; font-size: 38px; color: var(--text); letter-spacing: .02em; line-height: 1; }

.st-clock { --tc: #f2bf4a; display: flex; align-items: center; gap: 22px; padding: 14px 34px 14px 16px; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc), transparent 70%), rgba(6,13,32,.8)); border: 2px solid var(--tc);
  box-shadow: 0 0 50px -8px var(--tc); animation: clockPulse 2.4s ease-in-out infinite; }
.st-clock .dot { width: 70px; height: 70px; border-radius: 50%; background: var(--tc); display: grid; place-items: center; font-family: var(--display); font-size: 30px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.4); box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.st-clock .k { font-family: var(--cond); text-transform: uppercase; letter-spacing: .3em; font-size: 15px; color: var(--gold-2); }
.st-clock .v { font-family: var(--display); text-transform: uppercase; font-size: 46px; line-height: 1; }
.st-clock .r { font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: 16px; color: var(--muted); margin-top: 4px; }
.st-clock.done { --tc: #f2bf4a; }
@keyframes clockPulse { 50% { box-shadow: 0 0 80px -4px var(--tc); } }

.st-teams { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 16px; min-height: 0; padding: 8px 0 14px; }
.team { --tc: #888; position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc), transparent 82%), rgba(8,16,38,.85) 160px); border: 1px solid color-mix(in srgb, var(--tc), transparent 60%); transition: box-shadow .4s, transform .4s; }
.team.on { box-shadow: 0 0 0 3px var(--tc), 0 0 60px -10px var(--tc); transform: translateY(-4px); }
.team-h .ct { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-h .otc { font-family: var(--cond); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; background: var(--cream); color: #1a1203; padding: 2px 10px; border-radius: 999px; font-weight: 600; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .5; } }
/* each column flies its team's felt pennant */
.team-h { padding: 12px 12px 10px 8px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0)); }
.team-h .nm { line-height: 0; }
.team-h .nm .felt-pennant { width: 100%; height: auto; max-height: 84px; }
.team.on .team-h .nm .felt-pennant { animation: flutter 2.4s ease-in-out infinite; transform-origin: 4% 50%; }
@keyframes flutter { 0%, 100% { transform: rotate(0deg) skewY(0deg); } 30% { transform: rotate(-1.2deg) skewY(-1.5deg); } 65% { transform: rotate(.8deg) skewY(1deg); } }
.team-h .ct { font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: 14px; color: rgba(255,255,255,.8); margin-top: 2px; padding-left: 12px; }
.roster { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 4px; align-content: start; overflow: hidden; }
.roster li { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 4px 8px 4px 4px; border-radius: 12px; background: rgba(255,255,255,.035); min-height: 50px; }
.roster li.empty { background: transparent; border: 1px dashed rgba(255,255,255,.07); }
.roster li.fresh { animation: fresh 2.6s ease; }
@keyframes fresh { 0% { background: var(--tc); transform: scale(1.06); } 100% { background: rgba(255,255,255,.035); } }
.roster .av { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; object-position: 50% 25%; background: #13244f; font-family: var(--display); font-size: 16px; color: var(--muted); }
.roster .n { min-width: 0; line-height: 1.05; }
.roster .n b { display: block; font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster .n span { font-family: var(--cond); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.roster .g { font-family: var(--cond); font-size: 13px; color: var(--muted); letter-spacing: .08em; }
.roster li.goalie { background: linear-gradient(90deg, rgba(242,191,74,.18), rgba(242,191,74,.04)); }
.roster li.goalie .g { color: var(--gold-2); }

.st-pool { display: grid; grid-template-columns: 270px 1fr 190px; gap: 24px; align-items: center; border-top: 1px solid var(--line); padding: 14px 0 22px; }
.pool-label .k { font-family: var(--cond); text-transform: uppercase; letter-spacing: .26em; font-size: 15px; color: var(--gold); }
.pool-label .v { font-family: var(--display); text-transform: uppercase; white-space: nowrap; font-size: 50px; line-height: 1; margin-top: 6px; }
.pool-label .s { color: var(--muted); font-size: 17px; margin-top: 6px; }
.pool-cards { display: flex; gap: 14px; overflow: hidden; height: 186px; align-items: center; }
.pool-cards .pcard { width: 134px; flex: none; }
.pool-cards .pcard .last { font-size: 19px; }
/* the latest picks, newest first: team ribbon across the corner, pick number up top */
.pool-cards .pcard .drafted { top: 9px; left: -33px; width: 122px; font-size: 10px; }
.pool-cards .pcard .pk { position: absolute; top: 7px; right: 7px; z-index: 4; min-width: 36px; padding: 4px 7px 3px; border-radius: 999px; background: rgba(4,10,28,.84); color: var(--gold-2); font-family: var(--display); font-size: 15px; line-height: 1; text-align: center; box-shadow: inset 0 0 0 1.5px var(--tc); }
.pool-cards .pcard.fresh { animation: poolIn .8s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes poolIn { from { opacity: 0; transform: translateX(-60px) scale(.8); } }
.pool-cards .none { color: var(--muted); font-family: var(--cond); letter-spacing: .14em; text-transform: uppercase; }
.st-qr { justify-self: end; background: #fff; border-radius: 16px; padding: 10px 10px 6px; width: 160px; text-align: center; }
.st-qr span { color: #0a1633; font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; }

/* Attract */
.attract { position: absolute; inset: 0; display: grid; grid-template-columns: 640px 1fr 300px; gap: 60px; align-items: center; padding: 80px 110px; }
.a-logo { width: 640px; filter: drop-shadow(0 40px 70px rgba(0,0,0,.7)); animation: float 7s ease-in-out infinite; }
.attract h1 { font-size: 190px; line-height: .85; margin: 28px 0 6px; }
.attract .script-tag { font-size: 84px; margin: 0 0 28px 8px; }
.attract .pennant { height: 44px; line-height: 45px; font-size: 18px; padding: 0 78px 0 22px; clip-path: polygon(0 0, calc(100% - 60px) 13%, 100% 50%, calc(100% - 60px) 87%, 0 100%); }
.attract p { font-size: 30px; color: var(--muted); max-width: 640px; }
.attract .eyebrow { font-size: 20px; }
.a-stats { display: flex; gap: 20px; margin-top: 30px; }
.a-stats div { padding: 18px 26px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(4,10,28,.6); }
.a-stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 64px; line-height: 1; }
.a-stats span { font-family: var(--cond); text-transform: uppercase; letter-spacing: .18em; color: var(--muted); font-size: 16px; }
.a-qr { background: #fff; padding: 20px; border-radius: 26px; text-align: center; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.a-qr span { color: #0a1633; font-family: var(--cond); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 18px; }
@keyframes float { 50% { transform: translateY(-18px) rotate(-1deg); } }

/* Reveal */
.reveal { --tc: #f2bf4a; position: absolute; inset: 0; z-index: 20; display: grid; grid-template-rows: 250px 1fr; justify-items: center; overflow: hidden; background: rgba(2,6,15,.0); transition: background .5s; }
.reveal.show { background: rgba(2,6,15,.93); }
.rv-burst { position: absolute; left: 50%; top: 58%; width: 2200px; height: 2200px; transform: translate(-50%, -50%) scale(0); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc), transparent 20%) 0%, color-mix(in srgb, var(--tc), transparent 70%) 25%, transparent 55%); transition: transform 1s cubic-bezier(.2,.9,.2,1), opacity 1s; opacity: 0; }
.reveal.show .rv-burst { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.rv-stripes { position: absolute; inset: -50%; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 58%, color-mix(in srgb, var(--tc), transparent 88%) 0deg 6deg, transparent 6deg 18deg); transition: opacity .8s; animation: rays 40s linear infinite; }
.reveal.landed .rv-stripes { opacity: 1; }
@keyframes rays { to { transform: rotate(360deg); } }
.rv-top { position: relative; z-index: 2; text-align: center; padding-top: 50px; }
.rv-pick { font-family: var(--cond); text-transform: uppercase; letter-spacing: .5em; font-size: 34px; color: var(--gold-2); opacity: 0; transform: scale(2.5); transition: all .5s cubic-bezier(.2,1.4,.4,1); }
.rv-pick.in { opacity: 1; transform: none; }
.rv-team { font-family: var(--display); text-transform: uppercase; font-size: 110px; line-height: 1; margin-top: 10px; opacity: 0; transform: translateY(40px); transition: all .6s cubic-bezier(.2,1.2,.4,1); text-shadow: 0 0 40px color-mix(in srgb, var(--tc), transparent 40%); }
.rv-team.in { opacity: 1; transform: none; }
.rv-team em { font-style: normal; color: var(--tc); filter: brightness(1.25); }
.rv-card-wrap { position: relative; z-index: 3; display: grid; grid-template-columns: 440px; justify-content: center; align-content: start; margin-top: 10px; height: 600px; }
/* the face-down card that flips over */
.flip { position: relative; width: 440px; aspect-ratio: 4 / 5.4; perspective: 1800px; transition: transform .8s cubic-bezier(.6,0,.3,1), opacity .8s; }
.flip-wob { position: absolute; inset: 0; transform-style: preserve-3d; opacity: 0; transform: translateY(-460px) rotate(-16deg) scale(.55); }
.flip.enter .flip-wob { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.2,1.25,.35,1), opacity .25s; }
.flip.tense .flip-wob { animation: tense .42s ease-in-out infinite alternate; }
@keyframes tense { from { transform: rotate(-1.4deg) scale(1); } to { transform: rotate(1.4deg) translateY(-8px) scale(1.025); } }
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .75s cubic-bezier(.3,1.3,.45,1); }
.flip.flipped .flip-inner { transform: rotateY(360deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }
.flip-front .pcard { width: 100%; height: 100%; }
.flip.landed .pcard { box-shadow: 0 0 0 4px var(--tc), 0 0 120px -10px var(--tc), 0 40px 80px -30px rgba(0,0,0,.9); }
.flip .pcard .shine { position: absolute; inset: 0; z-index: 4; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); }
.flip.landed .pcard .shine { animation: shine 1.4s ease .2s; }
/* old-time trading card back */
.card-back { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; display: grid; place-items: center; color: var(--cream-ink);
  background: var(--paper-grain), repeating-linear-gradient(45deg, rgba(199,54,43,.08) 0 14px, transparent 14px 28px), radial-gradient(circle at 50% 42%, #fffaf0, #efe0bb 68%, #e2cc9a);
  box-shadow: inset 0 0 0 12px #f6ecd2, inset 0 0 0 17px var(--barn), inset 0 0 0 22px #f6ecd2, inset 0 0 0 24px var(--barn), 0 40px 80px -30px rgba(0,0,0,.9); }
.card-back .cb-in { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 40px; }
.card-back img { width: 250px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.card-back .cb-top { font-family: var(--varsity); font-size: 34px; line-height: 1; text-transform: uppercase; color: var(--barn); letter-spacing: .02em; }
.card-back .cb-bot { font-family: var(--cond); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: 19px; color: var(--cream-muted); }
.card-back.mini { border-radius: 14px; box-shadow: inset 0 0 0 6px #f6ecd2, inset 0 0 0 9px var(--barn), inset 0 0 0 12px #f6ecd2, inset 0 0 0 13px var(--barn), 0 20px 40px -18px rgba(0,0,0,.9); }
.card-back.mini img { width: 120px; }
.deck { position: absolute; left: 50%; top: 330px; width: 0; height: 0; z-index: 2; }
.deck .draw-card { position: absolute; width: 230px; height: 310px; left: -115px; top: -155px; border-radius: 14px; opacity: 0; transform: translate(0, 40px) scale(.7);
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .35s ease, box-shadow .2s ease, filter .2s ease; }
/* same back as the big card at 230/440 scale, so it can grow into it without a visible swap */
.draw-card .card-back { border-radius: 13.6px;
  background: var(--paper-grain), repeating-linear-gradient(45deg, rgba(199,54,43,.08) 0 7.3px, transparent 7.3px 14.6px), radial-gradient(circle at 50% 42%, #fffaf0, #efe0bb 68%, #e2cc9a);
  box-shadow: inset 0 0 0 6.3px #f6ecd2, inset 0 0 0 8.9px var(--barn), inset 0 0 0 11.5px #f6ecd2, inset 0 0 0 12.5px var(--barn), 0 20px 40px -16px rgba(0,0,0,.9); }
.draw-card .card-back .cb-in { gap: 9.4px; padding: 21px; }
.draw-card .card-back img { width: 131px; }
.draw-card .card-back .cb-top { font-size: 17.8px; }
.draw-card .card-back .cb-bot { font-size: 9.9px; }
.deck .draw-card.dealt { opacity: 1; }
.deck.swapping .draw-card { transition: none !important; }
.deck .draw-card.hot, .deck .draw-card.chosen { will-change: transform; }
.deck .draw-card.hot { z-index: 40 !important; filter: brightness(1.12); box-shadow: 0 0 0 5px #ffd76a, 0 0 56px 6px rgba(255,207,90,.75), 0 30px 50px -20px #000; transition: transform .28s cubic-bezier(.3,.7,.3,1), box-shadow .25s ease, filter .25s ease; }
.deck .draw-card.chosen { z-index: 50 !important; filter: brightness(1.15); box-shadow: 0 0 0 6px #ffd76a, 0 0 110px 26px rgba(255,207,90,.8); transition: transform .7s cubic-bezier(.2,1.35,.4,1), box-shadow .3s ease; }
.deck .draw-card.out { opacity: 0; transition: transform .7s cubic-bezier(.55,0,.75,.2), opacity .55s ease .08s; }
.deck .draw-card.handoff { transition: transform .5s cubic-bezier(.4,0,.2,1), box-shadow .4s ease; box-shadow: 0 0 0 0 transparent, 0 40px 80px -30px rgba(0,0,0,.9); filter: none; }
.flip.from-draw .flip-wob { transform: scale(.985); }
.flip.from-draw.enter .flip-wob { transition: opacity .25s ease, transform .5s ease; }
@keyframes shine { to { transform: translateX(120%); } }
.rv-card-wrap .flash { position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,250,235,.55) 22%, rgba(255,255,255,0) 60%); opacity: 0; pointer-events: none; z-index: 5; }
.rv-card-wrap .flash.go { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; transform: scale(1.4); } }
.rv-name { position: absolute; left: 0; right: 0; bottom: 34px; display: none; }
/* spotlights */
.rv-lights { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .7s; overflow: hidden; }
.reveal.lights .rv-lights { opacity: 1; }
.beam { position: absolute; bottom: -60px; width: 560px; height: 1600px; margin-left: -280px; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255,248,220,.5), rgba(255,248,220,.16) 45%, rgba(255,248,220,0) 82%);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); filter: blur(5px); mix-blend-mode: screen; }
.beam.l { left: 340px; } .beam.r { left: 1580px; }
.rv-lights .haze { position: absolute; inset: 0; background: radial-gradient(900px 420px at 50% 40%, rgba(255,248,220,.07), transparent 70%); }
/* scouting report lower third */
.rv-scout { position: absolute; left: 50%; bottom: 26px; z-index: 6; width: 1240px; transform: translateX(-50%); display: grid; grid-template-columns: 172px 1fr; gap: 26px; align-items: center;
  padding: 18px 34px 18px 22px; color: var(--cream-ink); border-radius: 6px;
  background: var(--paper-grain), radial-gradient(140% 100% at 20% 0%, #fbf3dc, #efe0bb 70%, #e4cf9f); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9);
  animation: scoutIn .6s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes scoutIn { from { transform: translate(-50%, 160%) rotate(-2deg); } }
.rv-scout .stamp { font-family: var(--varsity); font-size: 23px; line-height: 1.05; text-transform: uppercase; text-align: center; color: var(--barn); border: 4px double var(--barn); border-radius: 8px; padding: 10px 6px; transform: rotate(-7deg); opacity: .9; }
.rv-scout .sc-rate { display: flex; align-items: center; gap: 18px; }
.rv-scout .sc-rate b { font-family: var(--script); font-weight: 400; font-size: 60px; line-height: .9; color: var(--barn); }
.rv-scout .pucks { display: inline-flex; gap: 7px; }
.rv-scout .pucks i { width: 26px; height: 16px; border-radius: 50%; background: rgba(43,29,16,.16); box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.rv-scout .pucks i.on { background: #15110c; box-shadow: inset 0 -4px 0 #3a3228, 0 2px 0 rgba(0,0,0,.25); }
.rv-scout .self { font-family: var(--cond); font-size: 18px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-muted); }
.rv-scout p { margin: 8px 0 0; font-family: 'Special Elite', 'Courier New', monospace; font-size: 29px; line-height: 1.3; }
.reveal.flyout .flip { transition: transform .8s cubic-bezier(.6,0,.3,1), opacity .8s; }

/* the big side lettering */
.rv-side { position: absolute; z-index: 4; top: 360px; font-family: var(--display); text-transform: uppercase; line-height: .9; }
.rv-side.l { right: calc(50% + 260px); text-align: right; }
.rv-side.r { left: calc(50% + 260px); text-align: left; }
.rv-side .big { font-size: 130px; display: block; }
.rv-side .sm { font-family: var(--cond); letter-spacing: .24em; font-size: 28px; color: var(--muted); display: block; margin-bottom: 14px; }
.rv-side .sm.script { font-family: var(--script); text-transform: none; letter-spacing: .01em; font-size: 64px; line-height: 1; color: var(--cream); text-shadow: 0 4px 0 var(--barn), 0 8px 24px rgba(0,0,0,.6); margin-bottom: 4px; }
.rv-side .ch { display: inline-block; opacity: 0; transform: translateY(60px) rotate(8deg); animation: chIn .5s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes chIn { to { opacity: 1; transform: none; } }
.rv-side .facts { display: grid; gap: 12px; margin-top: 26px; justify-items: start; }
.rv-side .fact { display: inline-block; font-family: var(--cond); font-size: 26px; letter-spacing: .12em; padding: 8px 18px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); opacity: 0; animation: chIn .5s ease forwards; }
.rv-side .fact.pos { background: var(--gold); color: #1a1203; border: 0; font-weight: 600; }
.rv-side .fact.champ { background: var(--barn); color: var(--cream); border: 0; }

.banner { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 30; padding: 28px 40px; border-radius: 24px; text-align: center; font-family: var(--display); text-transform: uppercase; font-size: 64px; line-height: 1;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep)); color: #1a1203; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); animation: bannerIn .6s cubic-bezier(.2,1.3,.4,1); }
@keyframes bannerIn { from { transform: translateY(160%); } }
.conn { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 40; background: #3a1020; color: #ffc9c9; padding: 8px 18px; border-radius: 999px; font-family: var(--cond); letter-spacing: .14em; text-transform: uppercase; font-size: 16px; }

.complete-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 15; text-align: center; pointer-events: none; }

.start { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: min(26px, 3vh); text-align: center; overflow-y: auto; background: radial-gradient(circle at 50% 40%, #0f2255, #02060f 70%); }
.start img { width: min(360px, 60vw, 38vh); animation: float 6s ease-in-out infinite; }
.start p { max-width: 520px; padding: 0 16px; }

/* sponsor slot (board header + scores) */
.spons-slot { display: grid; justify-items: center; gap: 4px; }
.spons-slot .lbl { font-family: var(--cond); text-transform: uppercase; letter-spacing: .26em; font-size: 12px; color: var(--muted); }
.spons-slot .logo { width: 200px; height: 88px; display: grid; place-items: center; padding: 6px 14px 20px; } /* a board panel (base.css) */
.spons-slot .logo img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.spons-slot .logo b { font-size: 22px; }
.spons-slot.swap .logo { animation: sponsIn .7s cubic-bezier(.2,1.2,.4,1); }
@keyframes sponsIn { from { transform: rotateX(90deg); opacity: 0; } }
.spons-slot.big .logo { width: 310px; height: 124px; padding-bottom: 22px; }
.spons-slot.big .logo img { max-height: 80px; }
.a-spons { position: absolute; left: 110px; right: 110px; bottom: 44px; display: grid; justify-items: center; gap: 12px; }
.a-spons .lbl { font-family: var(--cond); text-transform: uppercase; letter-spacing: .3em; font-size: 16px; color: var(--muted); }
.a-spons .row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 190px); gap: 0; justify-content: center; max-width: 100%; }
.attract:has(.a-spons:not([hidden])) { padding-bottom: 170px; }
.a-spons .logo { width: 100%; height: 88px; display: grid; place-items: center; padding: 6px 14px 20px; }
.a-spons .logo img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.a-spons .logo b { font-size: 20px; }

/* scores & standings view */
.scores { position: absolute; inset: 0; display: grid; grid-template-rows: 150px 1fr; padding: 0 60px 50px; }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sc-top .st-brand .t2 .script { font-size: 30px; }
.sc-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; min-height: 0; }
.sc-standings { align-self: start; padding: 26px 34px 30px; color: var(--cream-ink); border-radius: 6px; transform: rotate(-.6deg);
  background: var(--paper-grain), radial-gradient(140% 90% at 20% 0%, #fbf3dc, #efe0bb 70%, #e4cf9f); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.sc-standings .gz-mast { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 4px double rgba(43,29,16,.7); font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: 18px; color: var(--cream-muted); }
.sc-standings .gz-mast b { font-family: var(--serif); font-weight: 700; font-size: 40px; letter-spacing: .02em; color: var(--cream-ink); text-transform: none; font-variant: small-caps; }
.sc-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-family: var(--serif); font-size: 30px; }
.sc-table th { font-family: var(--cond); font-weight: 600; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-muted); padding: 8px 10px; text-align: center; border-bottom: 2px solid rgba(43,29,16,.5); }
.sc-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid rgba(43,29,16,.2); font-variant-numeric: tabular-nums; }
.sc-table .l { text-align: left; font-weight: 700; }
.sc-table .rk { font-family: var(--varsity); color: var(--barn); width: 50px; }
.sc-table .pts { font-weight: 700; font-size: 34px; }
.sc-table .chip, .sb .chip { display: inline-block; width: 32px; height: 24px; margin-right: 14px; vertical-align: middle; clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 0; background: linear-gradient(90deg, rgba(0,0,0,.3) 0 26%, transparent 26%), var(--tc); }
.sc-note { margin: 12px 0 0; font-family: var(--cond); letter-spacing: .12em; text-transform: uppercase; font-size: 15px; color: var(--cream-muted); }
.sc-games { display: grid; align-content: start; gap: 14px; min-height: 0; overflow: hidden; }
.sc-games h3 { font-family: var(--varsity); font-size: 32px; text-transform: uppercase; color: var(--cream); text-shadow: 2px 2px 0 var(--barn); margin-top: 6px; }
.sb-list { display: grid; gap: 12px; }
.sb { border-radius: 14px; padding: 12px 18px 14px; background: linear-gradient(180deg, #120d06, #070503); border: 1px solid #3b2a12; box-shadow: inset 0 0 22px rgba(0,0,0,.9), 0 0 0 3px rgba(20,14,6,.9); }
.sb-h { display: flex; justify-content: space-between; font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: 16px; color: #d9c49a; margin-bottom: 6px; }
.sb-h .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #ff3b24; margin-right: 8px; box-shadow: 0 0 12px #ff3b24; animation: blink 1.2s steps(2) infinite; }
.sb-row { display: flex; align-items: center; gap: 0; padding: 4px 0; }
.sb-row .tn { flex: 1; font-family: var(--display); text-transform: uppercase; font-size: 30px; color: #f1e6cc; letter-spacing: .02em; }
.sb-row .tn.tbd { color: #8f7f5f; font-size: 24px; }
.sb-row .led { font-family: var(--display); font-weight: 400; font-size: 44px; min-width: 70px; text-align: right; }
.sb.big { padding: 18px 26px 22px; }
/* a clipping from the Garson Gazette */
.sb.gz { color: var(--cream-ink); border: 0; border-radius: 4px; padding: 14px 20px 14px; transform: rotate(-.4deg);
  background: var(--paper-grain), radial-gradient(140% 100% at 20% 0%, #fbf3dc, #efe0bb 70%, #e4cf9f); box-shadow: 0 18px 30px -18px rgba(0,0,0,.9); }
.sb.gz:nth-child(even) { transform: rotate(.5deg); }
.sb.gz .gz-h { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.1; }
.sb.gz .gz-d { display: flex; justify-content: space-between; gap: 14px; margin-top: 6px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: 15px; color: var(--barn); }
.sb.gz .gz-d b { color: var(--cream-ink); font-weight: 600; white-space: nowrap; }
.sb.gz .chip { width: 22px; height: 16px; margin-right: 6px; vertical-align: -1px; }
.sb.big .sb-row .tn { font-size: 46px; }
.sb.big .sb-row .led { font-size: 80px; }
.sb.big .chip { width: 44px; height: 32px; }
.sb.live { border-color: #7a2a12; }
.sc-empty { padding: 40px; border-radius: 18px; border: 1px dashed var(--line-2); text-align: center; }
.sc-empty p { color: var(--muted); font-size: 26px; }
.sc-qr { position: absolute; left: 60px; bottom: 34px; width: auto; display: flex; align-items: center; gap: 14px; padding: 10px 20px 10px 10px; }
.sc-qr img { width: 112px; height: 112px; }
.sc-qr span { font-size: 16px; max-width: 130px; text-align: left; line-height: 1.3; }
.sb-row .led.bump { animation: ledBump 1.4s ease-out; }
@keyframes ledBump { 0% { transform: scale(1.7); color: #fff; text-shadow: 0 0 30px #ffcf5a, 0 0 60px #ff9d2e; } 100% { transform: scale(1); } }
.sc-champ { display: flex; align-items: center; gap: 26px; padding: 22px 28px; border-radius: 18px; border: 3px solid rgba(255,207,90,.7);
  background: radial-gradient(120% 160% at 0% 0%, rgba(255,207,90,.25), transparent 60%), linear-gradient(180deg, rgba(20,28,60,.96), rgba(8,14,34,.96));
  box-shadow: 0 0 0 5px rgba(8,14,34,.9), 0 0 70px -16px rgba(255,207,90,.7); }
.sc-champ img { width: 130px; height: 130px; flex: none; }
.sc-champ > div { display: grid; min-width: 0; }
.sc-champ .lbl { font-family: var(--cond); text-transform: uppercase; letter-spacing: .3em; font-size: 20px; color: var(--gold-2); }
.sc-champ b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 78px; line-height: .95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-champ .sub { font-family: var(--script); font-size: 40px; color: var(--cream); margin-top: -4px; }

/* start screen */
.start-opts { display: grid; gap: 10px; justify-items: center; padding: 18px 22px; border-radius: 16px; background: rgba(4,10,28,.6); border: 1px solid var(--line); min-width: 320px; }
.start-opts .opt { display: flex; gap: 10px; align-items: center; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--text); cursor: pointer; }
.start-opts .opt input { width: 20px; height: 20px; accent-color: var(--gold); }
.start-opts select { max-width: 380px; padding: 10px 40px 10px 14px; font-size: 14px; }
.start-btns { display: flex; gap: 10px; }
.start-opts .muted { font-size: 13px; margin: 0; max-width: 360px; }


/* practice run: the board says so in its header */
.practice-chip { display: none; margin-left: 2px; padding: 3px 12px; border-radius: 999px; font-family: var(--cond); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: #1a1203; background: repeating-linear-gradient(135deg, #f2bf4a 0 10px, #e6ad2c 10px 20px); }
body.practice .practice-chip { display: inline-block; }
body.practice .st-brand .dn { display: none; }

/* shown when the browser hasn't allowed sound yet */
.sound-off { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 12px 26px; border-radius: 999px; border: 2px solid #1a1203; cursor: pointer;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: 20px; font-weight: 600; color: #1a1203; background: #f2bf4a; box-shadow: 0 12px 30px -8px rgba(0,0,0,.8); animation: soundPulse 1.6s ease-in-out infinite; }
@keyframes soundPulse { 50% { transform: translateX(-50%) scale(1.04); } }

/* ---------- intermission: marquee sign, back-at clock, the break's sponsor, the ice getting flooded ---------- */
.inter { position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; padding-top: 54px; overflow: hidden; }
.im-sign { position: relative; width: 1180px; height: 372px; border-radius: 34px; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, #e04a3c, #a9241b 60%, #7d160f); box-shadow: inset 0 0 0 10px #f4e8cc, inset 0 0 0 16px #7d160f, 0 40px 80px -30px rgba(0,0,0,.9), 0 0 120px -30px rgba(255,180,80,.45); }
.im-bulbs { position: absolute; inset: 0; pointer-events: none; }
.im-bulbs i { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffbe6, #ffd86a 45%, #d89a1c 75%); box-shadow: 0 0 14px 4px rgba(255,214,100,.75); animation: bulb 1.2s steps(1) infinite; }
@keyframes bulb { 0% { opacity: 1; } 33% { opacity: .28; box-shadow: none; } 100% { opacity: .28; box-shadow: none; } }
.im-face { text-align: center; color: var(--cream); }
.im-top { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: .5em; font-size: 26px; color: #ffe2b0; }
.im-face h1 { margin: 6px 0 2px; font-family: var(--varsity); font-weight: 400; text-transform: uppercase; font-size: 126px; line-height: 1; letter-spacing: .02em; color: #fff4dc;
  text-shadow: 0 0 18px rgba(255,236,190,.55), 5px 5px 0 #5c0f0a, 0 22px 40px rgba(0,0,0,.45); }
.im-sub { display: block; font-family: var(--script); font-size: 46px; color: #ffe8c2; text-shadow: 0 3px 0 #5c0f0a; }
.im-back { display: flex; align-items: baseline; gap: 18px; margin-top: 34px; padding: 14px 34px; border-radius: 16px; background: linear-gradient(180deg, #120d06, #070503); border: 1px solid #3b2a12; box-shadow: inset 0 0 22px rgba(0,0,0,.9), 0 0 0 3px rgba(20,14,6,.9); }
.im-back .k { font-family: var(--cond); text-transform: uppercase; letter-spacing: .24em; font-size: 22px; color: #d9c49a; }
.im-back .led { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: 1; }
.im-back .led.cd { min-width: 150px; }
.im-spons { display: grid; justify-items: center; gap: 12px; margin-top: 30px; }
.im-spons .lbl { font-family: var(--cond); text-transform: uppercase; letter-spacing: .3em; font-size: 20px; color: var(--muted); }
.spons-slot.huge .logo { width: 520px; height: 172px; padding: 12px 26px 30px; border-top-width: 10px; box-shadow: inset 1px 0 0 rgba(0,0,0,.07), inset -1px 0 0 rgba(0,0,0,.2), inset 0 -26px 0 #f2c230, inset 0 -27px 0 rgba(0,0,0,.22), 0 30px 50px -24px rgba(0,0,0,.9); }
.spons-slot.huge .logo img { max-height: 116px; }
.spons-slot.huge .logo b { font-size: 46px; }
/* the rink along the bottom: sponsors painted on the boards, the ice resurfacer doing laps */
.im-rink { position: absolute; left: 0; right: 0; bottom: 0; height: 230px; }
.im-boards { position: absolute; left: 0; right: 0; top: 0; height: 104px; display: flex; justify-content: center; overflow: hidden; }
.im-boards .logo { flex: 0 0 240px; height: 104px; display: grid; place-items: center; padding: 6px 18px 22px; position: relative; overflow: hidden; border-radius: 0;
  background: linear-gradient(180deg, #fdfdfa 0%, #f3f3ec 58%, #e6e5dc 100%); border-top: 8px solid #d6d6ce; box-shadow: inset -1px 0 0 rgba(0,0,0,.2), inset 0 -18px 0 #f2c230, inset 0 -19px 0 rgba(0,0,0,.22); }
.im-boards .logo img { max-width: 100%; max-height: 58px; mix-blend-mode: multiply; }
.im-boards .logo b { font-family: var(--varsity); font-weight: 400; font-size: 21px; text-transform: uppercase; color: #1d3a86; text-align: center; line-height: 1.05; }
.im-boards .logo:nth-child(even) b { color: var(--barn); }
.im-ice { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; background: linear-gradient(180deg, #bcd3e6, #e3eef7 40%, #f2f7fb); box-shadow: inset 0 14px 18px -10px rgba(0,0,0,.35); overflow: hidden; }
.im-ice::before { content: ''; position: absolute; left: 0; right: 0; top: 54px; height: 10px; background: rgba(199,54,43,.55); } /* the red line */
.im-machine { position: absolute; left: 0; bottom: 6px; width: 250px; height: 139px; animation: flood 28s linear infinite; }
.im-svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: chug .5s ease-in-out infinite alternate; }
@keyframes flood { from { transform: translateX(-420px); } to { transform: translateX(2340px); } }
@keyframes chug { to { transform: translateY(-2px); } }
.im-sheen { position: absolute; right: 236px; bottom: 6px; width: 1600px; height: 104px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.2) 75%, rgba(215,236,255,.48) 98%, rgba(255,255,255,.12)), repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 3px, transparent 3px 9px); } /* wet and glossy, lines still showing through */
.im-qr { position: absolute; right: 60px; top: 520px; }