.pregame-loading{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(ellipse at 70% 20%,#22425e 0,transparent 55%),#091523;color:#f3f2e9;font-family:system-ui;overflow:hidden}.pregame-loading[hidden]{display:none}.pregame-loading:before{content:'';position:absolute;inset:-60%;transform:rotate(-45deg);border-left:28px solid #eea24914;border-right:1px solid #ffffff12;pointer-events:none}.loading-card{position:relative;width:min(540px,calc(100% - 48px));text-align:center}.loading-network{font:900 italic 20px system-ui;letter-spacing:2px;color:#eea249}.loading-card h1{font:950 italic clamp(36px,7vw,64px)/1 system-ui;margin:22px 0 8px;letter-spacing:-2px}.loading-subtitle{font-size:10px;letter-spacing:3px;color:#9bb2c6}.loading-matchup{display:flex;align-items:center;justify-content:center;gap:35px;margin:35px 0}.loading-matchup img{width:100px;height:112px;filter:drop-shadow(0 8px 15px #0005)}.loading-matchup span{font:900 italic 18px system-ui;color:#a6bbcc}.loading-track{height:3px;background:#ffffff15;overflow:hidden;margin:28px 0 17px}.loading-track i{display:block;width:35%;height:100%;background:#eea249;animation:loading-sweep 1.5s ease-in-out infinite}.loading-status{font-size:12px;letter-spacing:1px;min-height:18px;color:#d7e4ef}.loading-sponsor{font-size:9px;letter-spacing:2px;color:#8ea4b7;margin-top:35px}.loading-retry{margin:14px auto;background:#eea249;border:0;color:#132438;padding:12px 24px;font:800 12px system-ui;cursor:pointer}.loading-retry[hidden]{display:none}@keyframes loading-sweep{from{transform:translateX(-110%)}to{transform:translateX(390%)}}@media(prefers-reduced-motion:reduce){.loading-track i{animation:none;width:100%;opacity:.65}}
.pregame-loading{transition:opacity .9s ease,visibility .9s}.pregame-loading.loading-out{opacity:0;pointer-events:none;visibility:hidden}.loading-out .loading-card{transform:translateY(-12px);transition:transform .9s ease}
.warmup-broadcast{position:absolute;inset:0;z-index:25;pointer-events:none;color:#f4f4ed;font-family:system-ui;background:linear-gradient(0deg,#071322d9,transparent 35%,transparent 85%,#07132288)}.warmup-broadcast[hidden]{display:none}.warmup-letterbox{position:absolute;inset:0;border-block:18px solid #07111d}.warmup-title{position:absolute;left:5%;bottom:10%;border-left:4px solid #eea249;padding:8px 0 8px 22px;text-shadow:0 2px 14px #0008}.warmup-title span{font-size:11px;font-weight:800;letter-spacing:3px;color:#eea249}.warmup-title strong{display:block;font-size:clamp(26px,4vw,52px);font-weight:950;font-style:italic;letter-spacing:-1px;line-height:1.1;margin-top:8px}.warmup-title p{font-size:16px;font-weight:800;letter-spacing:2px;margin:10px 0}.warmup-title i{color:#eea249;font-size:12px;margin:0 10px}.warmup-title small{font-size:10px;letter-spacing:2px;color:#c0cedc}.warmup-next{position:absolute;right:5%;bottom:13%;font-size:10px;letter-spacing:2px;color:#eea249}.warmup-next b{display:block;font-size:14px;color:white;margin-top:7px}.warmup-next div{height:2px;background:#ffffff33;margin-top:12px}.warmup-next i{display:block;height:100%;background:#eea249;transform-origin:left;transform:scaleX(0)}.warmup-broadcast button{pointer-events:auto;position:absolute;right:5%;top:9%;background:#091523bb;border:1px solid #ffffff44;color:white;font:700 11px system-ui;letter-spacing:1px;padding:11px 16px;cursor:pointer}.warmup-broadcast button:hover{background:#244159}.warming-up .camera-tools,.warming-up #scoreBug,.warming-up #faceoffPrompt,.warming-up #callout,.warming-up .on-ice,.warming-up #shotMeter{visibility:hidden}@media(max-width:700px){.warmup-next{display:none}.warmup-title{bottom:9%}.warmup-title p{font-size:12px}}@media(prefers-reduced-motion:reduce){.pregame-loading{transition-duration:.2s}}
.arena-picker{margin:4px 0 22px}.arena-picker[hidden]{display:none}.arena-picker p{font-size:11px;font-weight:800;letter-spacing:3px;color:#eea249;margin:0 0 14px}.arena-picker div{display:grid;grid-template-columns:1fr 1fr;gap:14px}.arena-picker button{display:grid;gap:4px;padding:0 0 14px;border:2px solid #ffffff1f;background:#0f2135;color:#f3f2e9;font-family:system-ui;text-align:center;cursor:pointer;overflow:hidden;transition:border-color .15s,transform .15s}.arena-picker button:hover,.arena-picker button:focus-visible{border-color:#eea249;transform:translateY(-2px);outline:none}.arena-picker b{font:900 italic 15px system-ui;letter-spacing:.5px;margin-top:10px}.arena-picker span{font-size:10px;letter-spacing:1px;color:#9bb2c6}.arena-art{display:block;height:84px}.arena-art.indoor{background:linear-gradient(#0000 62%,#e0eff5 62% 82%,#c44e60 82% 84%,#e0eff5 84%),repeating-linear-gradient(90deg,#ac313a 0 6px,#244e7d 6px 12px,#e6aa42 12px 18px,#1e2c43 18px 22px),#1e2c43;background-blend-mode:normal}@media(max-width:420px){.arena-cards{grid-template-columns:1fr}.arena-art{height:56px}}

.pregame-loading.choosing .loading-matchup{margin:18px 0}.pregame-loading.choosing .loading-matchup img{width:64px;height:72px}.pregame-loading.choosing .loading-card h1{margin:14px 0 6px}
.arena-picker{margin:0;text-align:left}.start-group{margin-bottom:16px}.start-group p{margin:0 0 8px;text-align:left}
.arena-picker .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.arena-picker .seg.five{grid-template-columns:repeat(5,1fr);gap:6px}
.arena-picker .seg button{padding:11px 6px;gap:3px}.arena-picker .seg b{margin:0;font-size:13px}.arena-picker .seg.five b{font-size:10px;letter-spacing:.3px}
.arena-picker button{position:relative;opacity:.7}.arena-picker button[aria-pressed="true"]{opacity:1;border-color:#eea249;background:#1b3550;box-shadow:0 0 0 1px #eea249 inset,0 8px 22px #0006}
.arena-picker button[aria-pressed="true"] b{color:#ffd9a0}
.arena-cards button[aria-pressed="true"]::after{content:'\2713';position:absolute;top:5px;right:5px;padding:2px 6px;background:#eea249;color:#132438;font:900 9px system-ui;letter-spacing:1px}
.arena-cards button:not([aria-pressed="true"]) .arena-art{filter:grayscale(.55) brightness(.7)}
.arena-picker .play-button{display:block;width:100%;opacity:1;margin-top:6px;padding:15px;border:0;background:#eea249;color:#132438;font:950 italic 20px system-ui;letter-spacing:3px;text-align:center}
.arena-picker .play-button:hover,.arena-picker .play-button:focus-visible{background:#ffbd62;transform:translateY(-2px)}
@media(max-width:480px){.arena-picker .seg span{display:none}.arena-picker .seg.five{grid-template-columns:repeat(3,1fr)}}
@media(max-height:760px){.arena-art{height:56px}.pregame-loading.choosing .loading-matchup{display:none}}
/* A start screen taller than the window scrolls instead of clipping its title and PLAY button. */
.pregame-loading{overflow:hidden auto;place-items:normal}.pregame-loading:before{position:fixed}.loading-card{margin:auto}

/* The start screen is laid out in the HTML so nothing moves when the script arrives. */
.choosing .loading-track,.choosing .loading-status{display:none}
html[data-direct] .arena-picker{display:none}html[data-direct] .pregame-loading.choosing .loading-track,html[data-direct] .pregame-loading.choosing .loading-status{display:block}
html[data-direct] .pregame-loading.choosing .loading-matchup{margin:35px 0}html[data-direct] .pregame-loading.choosing .loading-matchup img{width:100px;height:112px}html[data-direct] .pregame-loading.choosing .loading-card h1{margin:22px 0 8px}

.cam-art{display:block;aspect-ratio:16/9;overflow:hidden}.cam-art svg{display:block;width:100%;height:100%}
.arena-picker .seg button:has(.cam-art){padding:0 0 9px;overflow:hidden}.arena-picker .seg button:has(.cam-art) b{margin-top:8px}
.arena-picker .seg button:not([aria-pressed="true"]) .cam-art{filter:grayscale(.5) brightness(.75)}
@media(max-height:1100px){.pregame-loading.choosing .loading-matchup{display:none}.pregame-loading.choosing .loading-card h1{font-size:40px;margin:10px 0 4px}.arena-art{height:52px}.start-group{margin-bottom:12px}.arena-picker .play-button{padding:12px}}
@media(max-width:480px){.arena-picker .seg:has(.cam-art){grid-template-columns:repeat(3,1fr)}.cam-art{display:none}}
/* Real captures of each rink (third-person view). */
.arena-art.indoor,.arena-art.pond,.arena-art.backyard,.arena-art.lake{height:auto;aspect-ratio:16/9;background-size:cover;background-position:center 60%;background-color:#16283d}
.arena-art.indoor{background-image:url(./assets/arena-northshore.jpg)}.arena-art.pond{background-image:url(./assets/arena-pond.jpg)}.arena-art.backyard{background-image:url(./assets/arena-backyard.jpg)}.arena-art.lake{background-image:url(./assets/arena-lake.jpg)}
@media(max-height:1100px){.arena-art.indoor,.arena-art.pond,.arena-art.backyard,.arena-art.lake{height:58px;aspect-ratio:auto}}
@media(max-width:420px){.arena-art.indoor,.arena-art.pond,.arena-art.backyard,.arena-art.lake{height:70px;aspect-ratio:auto}}

/* Real captures of each camera view. */
.cam-art{background-size:cover;background-position:center;background-color:#16283d}
.cam-third{background-image:url(./assets/camera-third.jpg)}.cam-overhead{background-image:url(./assets/camera-overhead.jpg)}.cam-first{background-image:url(./assets/camera-first.jpg)}
/* Four rinks in a 2x2 grid; art shrinks on short screens so PLAY stays visible, framed on each rink's skyline. */
.arena-picker .arena-cards{grid-template-columns:repeat(2,1fr);gap:10px}.arena-picker .arena-cards .arena-art{height:96px;aspect-ratio:auto;background-position:center 30%}
@media(max-height:1100px){.arena-picker .arena-cards .arena-art{height:64px}}
@media(max-height:800px){.arena-picker .arena-cards{gap:8px}.arena-picker .arena-cards button{padding-bottom:6px}.arena-picker .arena-cards .arena-art{height:44px}.arena-cards button span{display:none}.arena-picker .arena-cards b{margin-top:5px}.pregame-loading.choosing .loading-card h1{font-size:34px;margin:6px 0 2px}.start-group{margin-bottom:10px}.loading-sponsor{margin-top:12px}}
@media(max-width:520px){.arena-picker .arena-cards .arena-art{height:34px}.arena-cards button span{display:none}}
/* Short windows drop the camera previews so PLAY stays on screen. */
@media(max-height:700px){.cam-art{display:none}.arena-picker .seg button:has(.cam-art){padding:11px 6px}.arena-picker .seg button:has(.cam-art) b{margin-top:0}.pregame-loading.choosing .loading-subtitle{display:none}.start-group{margin-bottom:8px}}
