:root{font-family:Inter,Arial,sans-serif;color:#f4f6f4;background:#101b20}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#26383e 0,#101b20 42%,#091318 100%)}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}[hidden]{display:none!important}.site-shell{max-width:970px;margin:auto;padding:0 20px}.topbar{min-height:78px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #39515b}.topbar img{object-fit:contain}.topbar div{display:flex;flex-direction:column}.topbar strong{font-size:13px;letter-spacing:.14em}.topbar span{font-size:10px;color:#b9cacb;letter-spacing:.14em}.topbar .offline{margin-left:auto;border:1px solid #5b737a;padding:7px 9px;color:#ffda41;white-space:nowrap}.screen{padding:36px 0 55px}.eyebrow{font-size:12px;letter-spacing:.24em;color:#ffd21c;font-weight:900}h1{font-size:clamp(35px,6vw,62px);line-height:1.04;margin:12px 0 14px;text-transform:uppercase;max-width:780px}.lead{font-size:clamp(15px,2vw,19px);line-height:1.5;color:#d4e1e0;max-width:730px;margin:0 0 25px}.scoreline{display:flex;justify-content:space-between;align-items:center;background:#ffd21c;color:#172127;padding:14px 20px;font-weight:900;letter-spacing:.08em;margin:27px 0 16px}.scoreline strong{font-size:26px}.career-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.level-card{display:flex;align-items:center;text-align:left;min-height:96px;background:#1d3037;color:#f4f7f6;border:1px solid #4b656e;padding:13px;gap:15px;transition:transform .15s,border-color .15s}.level-card:not(:disabled):hover,.level-card:not(:disabled):focus-visible{transform:translateY(-2px);border-color:#ffd21c;outline:none}.level-card.locked{background:#15252c;color:#93a5a9}.level-number{font-size:31px;color:#ffd21c;font-weight:950}.level-body{display:flex;flex-direction:column;gap:5px;flex:1}.level-body strong{font-size:17px;text-transform:uppercase}.level-body small{font-size:12px;color:#bacbcc}.level-stars{font-size:22px;color:#ffd21c;white-space:nowrap}.reward-card{display:flex;gap:16px;align-items:flex-start;background:#263942;border:1px solid #5b737a;padding:18px;margin-top:24px}.reward-icon{font-size:38px;color:#ffd21c}.reward-card strong{font-size:18px}.reward-card p{margin:7px 0;color:#d6e2e3}.fineprint{font-size:12px;color:#a6bec3;line-height:1.4}.play-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;color:#b8ced0;font-weight:800}.text-button{background:none;border:0;color:#ffd21c;text-decoration:underline;padding:8px}.rival-card{display:flex;align-items:center;justify-content:space-between;background:#ffd21c;color:#172127;padding:12px 17px;margin:10px 0 0;font-weight:900}.rival-card span{font-size:11px;letter-spacing:.13em}.arena{height:clamp(280px,43vw,390px);position:relative;overflow:hidden;background:#cce0e4 url('/bullity/assets/arena-clean.png') center center/cover no-repeat;border:5px solid #293d45}.arena-shade{position:absolute;inset:0;background:linear-gradient(#101b2035,#ffffff00 40%,#0b18204d)}.goal-shape{position:absolute;width:38%;height:37%;left:31%;top:13%;border:8px solid #c53124;border-bottom:0;border-radius:45% 45% 0 0;background:#f3f7f899;box-shadow:0 6px 20px #0008}.goal-grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 20px,#5d74796a 21px 22px),repeating-linear-gradient(0deg,transparent 0 20px,#5d74796a 21px 22px)}#keeper{position:absolute;bottom:-15px;left:50%;width:40%;height:125%;object-fit:contain;transform:translateX(calc(-50% + var(--keeper-x,0px))) translateY(var(--keeper-y,0px));transition:transform .2s}.skater{position:absolute;height:73%;bottom:-16%;left:4%;object-fit:contain;filter:drop-shadow(0 12px 10px #0008)}.puck{position:absolute;bottom:12%;left:54%;width:22px;height:10px;border-radius:50%;background:#121a1e;box-shadow:0 2px 5px #0008}.gold-puck .puck{background:#ffd21c;box-shadow:0 0 18px #ffd21c}.controls{background:#1b2e36;padding:22px;border:1px solid #506772;border-top:0}.cue-label{font-size:11px;font-weight:900;color:#ffd21c;letter-spacing:.17em}.cue{margin:7px 0;font-size:19px;font-weight:800}.action-prompt{font-size:14px;color:#d6e4e4;margin:5px 0 17px}.corner-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.corner{min-height:50px;background:#263d46;color:#fff;border:2px solid #69818a;font-weight:900}.corner:hover,.corner:focus-visible,.corner.selected{border-color:#ffd21c;background:#435052;outline:none}.selection{color:#ffd21c;min-height:20px;margin:11px 0}.timing-label{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em}.timing-track{height:28px;position:relative;margin-top:9px;border:2px solid #9aafb5;background:#122228}.sweet-zone{position:absolute;top:0;bottom:0;background:#ffd21c99}.needle{position:absolute;top:-6px;bottom:-6px;width:4px;background:#fff;box-shadow:0 0 7px #fff;transform:translateX(-50%);left:50%}.window-text{font-size:12px;color:#bfd2d4}.primary,.secondary{border:0;min-height:48px;padding:10px 18px;font-weight:950;letter-spacing:.06em}.primary{background:#ffd21c;color:#101b20}.secondary{background:#314650;color:#f8fbfa;border:1px solid #6d858a}.controls>.primary,.controls>.secondary{width:100%;margin-top:8px}.feedback{margin-top:15px;padding:13px;font-weight:800;line-height:1.4}.feedback.success{background:#234c3b;color:#d4ffe3}.feedback.fail{background:#603127;color:#ffe2d5}.result{max-width:650px;margin:auto;text-align:center}.result h1{max-width:none}.result .lead{margin:0 auto 20px}.big-stars{color:#ffd21c;font-size:70px;letter-spacing:.12em;margin:10px 0}.result p{line-height:1.5}.result-actions{display:flex;flex-direction:column;gap:10px;margin:24px auto;max-width:380px}footer{padding:20px 0 35px;color:#8ea8ae;font-size:12px;text-align:center;border-top:1px solid #344c54}@media(max-width:700px){.site-shell{padding:0 12px}.screen{padding:26px 0 40px}.career-map{grid-template-columns:1fr}.level-card{min-height:78px}.topbar .offline{display:none}.arena{height:300px}.goal-shape{width:54%;left:23%;top:16%;height:30%}.skater{height:65%;left:-5%}.controls{padding:14px}.cue{font-size:16px}}@media(max-width:400px){.arena{height:240px}.goal-shape{border-width:6px}.skater{height:67%}.corner{font-size:12px;min-height:46px}.level-stars{font-size:19px}}

/* Chapter route */
.career-map{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px;margin:20px 0 0}
.route-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.route-lines line{stroke:#496068;stroke-width:7;stroke-linecap:round}
.route-lines line.done{stroke:#ffd21c}
.level-card,.level-card.locked{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;min-height:174px;padding:12px 6px;gap:5px;background:transparent;border:0;color:#f4f7f6}
.level-card.locked{color:#a6b9bd;opacity:1}
.level-card:disabled{opacity:1}
.level-card:not(:disabled):hover,.level-card:not(:disabled):focus-visible{transform:none;outline:2px solid #ffd21c;outline-offset:-2px;border-color:transparent}
.level-number{display:grid;place-items:center;flex:none;width:68px;height:68px;border-radius:50%;background:#ffd21c;color:#142026;border:4px solid #ffd21c;font-size:29px;box-shadow:0 0 0 5px #101b20}
.level-card.active .level-number{box-shadow:0 0 0 5px #101b20,0 0 0 8px #ffd21c}
.level-card.locked .level-number{background:#263942;border-color:#60767d;color:#bdcdd0}
.level-body{flex:none;align-items:center;gap:3px;max-width:100%}
.level-body strong{font-size:15px;line-height:1.15}
.level-body small{font-size:11px;line-height:1.2}
.level-stars{font-size:19px;line-height:1}
.level-card:nth-child(4){grid-column:3;grid-row:2}
.level-card:nth-child(5){grid-column:2;grid-row:2}
.level-card:nth-child(6){grid-column:1;grid-row:2}
/* Enlarged mobile play field */
@media(max-width:700px){
.career-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px}
.level-card,.level-card.locked{min-height:158px;padding:10px 3px}
.level-card:nth-child(3){grid-column:2;grid-row:2}
.level-card:nth-child(4){grid-column:1;grid-row:2}
.level-card:nth-child(5){grid-column:1;grid-row:3}
.level-card:nth-child(6){grid-column:2;grid-row:3}
.arena{height:310px}
.goal-shape{width:70%;left:15%;top:10%;height:42%}
#keeper{width:54%;height:145%;bottom:-19px}
.skater{height:59%;left:-7%}
.corner{min-height:52px}
}
@media(max-width:400px){
.arena{height:282px}
.goal-shape{width:72%;left:14%;top:10%;height:42%}
#keeper{width:54%;height:145%}
.skater{height:60%;left:-8%}
.corner{min-height:52px;font-size:12px}
}
/* Result guidance */
.result .coach-card,.result .next-goal-card{text-align:left;border-radius:5px;padding:16px 18px;margin:16px 0;background:#243a43}
.result .coach-card{border-left:4px solid #bde8ea}
.result .next-goal-card{border:1px solid #4b656e}
.result .coach-card strong,.result .next-goal-card strong{display:block;color:#ffd21c;font-size:13px;letter-spacing:.08em}
.result .coach-card p,.result .next-goal-card p{margin:7px 0 0}
.result .next-goal-card h2{margin:7px 0 0;font-size:23px;line-height:1.2}


/* Grounded players, visible shot and sound control */
.sound-toggle{margin-left:10px;flex:none;border:1px solid #809aa0;background:#263b43;color:#ffdc48;padding:9px 10px;min-height:42px;font-size:12px;font-weight:800}
.sound-toggle:focus-visible{outline:3px solid #ffdc48}
.cue-label{font-size:14px;letter-spacing:.08em;color:#ffe160;line-height:1.3}
.arena{isolation:isolate}
.goal-shape{z-index:1}
#keeper{bottom:-29px;width:40%;height:125%;z-index:3;transform-origin:50% 90%;transform:translateX(calc(-50% + var(--keeper-x,0px) + var(--react-x,0px))) translateY(calc(var(--keeper-y,0px) + var(--react-y,0px))) rotate(var(--react-rotate,0deg));transition:transform .32s cubic-bezier(.2,.8,.25,1)}
.keeper-shadow{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);width:46%;height:15px;border-radius:50%;background:#10232999;filter:blur(7px);z-index:2}
.skater{bottom:0;left:2%;height:73%;z-index:3;transition:transform .16s ease-out}
.skater-shadow{position:absolute;bottom:1%;left:9%;width:20%;height:14px;border-radius:50%;background:#0b202a9c;filter:blur(8px);z-index:2}
.arena.shot-in-flight .skater{transform:translateX(-8px) rotate(-3deg)}
.puck{left:30%;bottom:8%;z-index:6;transform-origin:center;background:#11191c}
.arena.shot-in-flight .puck{background:#fff0a1;box-shadow:0 0 9px #fff3b0}
.shot-trail{position:absolute;z-index:5;height:3px;border-radius:3px;background:linear-gradient(90deg,#ffffff00,#fff6bb);box-shadow:0 0 8px #fff9be;opacity:0;pointer-events:none;transform-origin:0 50%}
.impact-flash{position:absolute;z-index:7;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:4px solid #fff4a5;box-shadow:0 0 25px #ffe45f;opacity:0;pointer-events:none}
.impact-label{position:absolute;z-index:8;top:39%;left:50%;transform:translate(-50%,-50%) scale(.85);min-width:140px;text-align:center;background:#14232bdc;color:#ffe054;font-size:28px;font-weight:950;letter-spacing:.09em;text-shadow:0 2px 2px #000;opacity:0;pointer-events:none}
.impact-label.visible{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .12s,transform .18s}
.arena.shot-goal .impact-flash{border-color:#ffe95a;box-shadow:0 0 30px #ffce29}
.arena.shot-save .impact-flash{border-color:#b9ebff;box-shadow:0 0 30px #8cdcff}
.arena.shot-miss .impact-flash{border-color:#e6e9ec;box-shadow:0 0 22px #d6dce0}
@media(max-width:700px){
.topbar .sound-toggle{margin-left:auto;font-size:11px;padding:7px;min-height:42px}
.skater{bottom:0;left:-3%;height:59%}
.skater-shadow{left:3%;width:26%}
#keeper{bottom:-27px;width:54%;height:145%}
.puck{left:30%;bottom:8%}
}
@media(max-width:400px){.skater{bottom:0;left:-3%;height:60%}#keeper{bottom:-27px}}


/* Keep the hockey puck black in every state; contrast comes from its edge and shadow. */
.puck,.gold-puck .puck,.arena.shot-in-flight .puck,.gold-puck .arena.shot-in-flight .puck{background:#121619;box-shadow:0 2px 5px #000c,0 0 0 1px #52616a}
.shot-trail{background:linear-gradient(90deg,#8da2a900,#9caeb399);box-shadow:none}


/* Series HUD and a play screen sized for a single viewport. */
.playing .site-shell{max-width:1320px}
.playing .topbar{min-height:54px}
.playing footer{display:none}
#playScreen{padding:12px 0 10px;display:grid;grid-template-columns:minmax(0,1fr) minmax(328px,380px);gap:8px 14px}
#playScreen[hidden]{display:none}
#playScreen .play-head{grid-column:1/-1;margin:0;min-height:32px}
.play-stage{min-width:0}
.play-stage .eyebrow{font-size:11px;letter-spacing:.15em}
.play-stage h1{font-size:clamp(25px,3vw,36px);line-height:1.05;margin:3px 0}
.play-stage .lead{font-size:13px;line-height:1.25;margin:0 0 5px;max-width:none}
.play-stage .rival-card{min-height:32px;padding:6px 11px;margin:0}
.series-board{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;justify-content:space-between;background:#152a32;border:1px solid #58717a;padding:5px 10px;min-height:40px}
.series-row{display:flex;align-items:center;gap:8px;font-size:12px}
.series-row strong{color:#ffd21c;font-size:10px;letter-spacing:.1em}
.series-row span{white-space:nowrap;letter-spacing:.12em;font-size:15px;color:#f4f7f6}
.series-score{font-size:14px;color:#ffda42;white-space:nowrap}
.play-stage .arena{height:clamp(300px,calc(100dvh - 285px),490px);min-height:0}
#playScreen .controls{align-self:stretch;border:1px solid #506772;padding:12px;display:flex;flex-direction:column;justify-content:center;gap:2px}
#playScreen .cue{font-size:16px;line-height:1.2;margin:3px 0}
#playScreen .action-prompt{font-size:12px;line-height:1.2;margin:2px 0 5px}
#playScreen .corner{min-height:46px;font-size:12px}
#playScreen .selection{font-size:12px;min-height:16px;margin:5px 0}
#playScreen .timing-track{height:24px;margin-top:5px}
#playScreen .window-text{margin:4px 0;font-size:11px}
#playScreen .controls>.primary,#playScreen .controls>.secondary{min-height:46px;margin-top:4px}
#playScreen .feedback{font-size:13px;line-height:1.25;padding:8px;margin-top:6px}
@media(max-width:700px){
.playing .site-shell{padding:0 10px}
.playing .topbar{min-height:49px}
.playing .topbar img{width:34px;height:34px}
.playing .topbar strong{font-size:11px}
.playing .topbar span{font-size:9px}
#playScreen{display:block;padding:5px 0 calc(5px + env(safe-area-inset-bottom))}
#playScreen .play-head{min-height:29px;font-size:12px}
#playScreen .play-head .text-button{padding:4px}
.play-stage .eyebrow{font-size:10px}
.play-stage h1{font-size:clamp(23px,6vw,27px);margin:1px 0}
.play-stage .lead{font-size:12px;line-height:1.17;margin:0 0 3px}
.play-stage .rival-card{min-height:27px;padding:4px 8px;font-size:13px}
.series-board{min-height:34px;padding:3px 7px;gap:2px 7px}
.series-row{gap:5px}
.series-row strong{font-size:9px}
.series-row span{font-size:12px;letter-spacing:.02em}
.series-score{font-size:12px}
.play-stage .arena{height:clamp(205px,29dvh,270px)}
#playScreen .controls{padding:7px 9px;gap:0}
#playScreen .cue-label{font-size:11px}
#playScreen .cue{font-size:13px;margin:2px 0}
#playScreen .action-prompt{font-size:11px;margin:1px 0 4px}
#playScreen .corner-grid{gap:5px}
#playScreen .corner{min-height:43px;font-size:11px}
#playScreen .selection{font-size:11px;min-height:13px;margin:3px 0}
#playScreen .timing-label{font-size:10px}
#playScreen .timing-track{height:21px;margin-top:3px}
#playScreen .window-text{font-size:10px;margin:3px 0}
#playScreen .controls>.primary,#playScreen .controls>.secondary{min-height:43px;margin-top:2px;padding:7px}
#playScreen .feedback{font-size:12px;padding:5px;margin:3px 0}
}
@media(max-width:370px){
.play-stage .arena{height:205px}
.play-stage .lead{font-size:11px}
#playScreen .corner{min-height:41px}
}

#playScreen .controls.resolved{justify-content:center;min-height:104px}
#playScreen .controls.resolved > :not(#feedback):not(#nextStep){display:none!important}

/* Rectangular hockey frame, perspective net and a shared ice contact plane. */
.arena{--goal-ground:50%}
.goal-shape{left:33%;width:34%;top:auto;bottom:var(--goal-ground);height:24%;border:7px solid #d32d22;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#dceef1b0,#f5fbf7a3);box-shadow:inset 0 0 0 2px #f0a9a35e,0 3px 7px #102b35b8}
.goal-shape:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#597b856b,transparent 13% 87%,#597b856b);clip-path:polygon(2% 0,98% 0,88% 100%,12% 100%);pointer-events:none}
.goal-grid{inset:0;opacity:.78;clip-path:polygon(2% 0,98% 0,88% 100%,12% 100%);background:repeating-linear-gradient(90deg,transparent 0 14px,#5a828a91 15px 16px),repeating-linear-gradient(0deg,transparent 0 13px,#5a828a91 14px 15px)}
#keeper{left:50%;bottom:var(--goal-ground);width:15.6%;height:auto;aspect-ratio:1/1;object-fit:fill;transform:translateX(-50%);transform-origin:50% 100%;transition:none;z-index:3}
.keeper-shadow{left:50%;bottom:calc(var(--goal-ground) - 4px);width:16%;height:9px;z-index:2}
.puck{left:auto;bottom:auto}
@media(max-width:700px){
.goal-shape{left:24%;width:52%;height:25%;bottom:47%}
.arena{--goal-ground:47%}
#keeper{width:23%;bottom:var(--goal-ground)}
.keeper-shadow{bottom:calc(var(--goal-ground) - 3px);width:23%}
}
@media(max-width:400px){
.goal-shape{left:23%;width:54%;height:25%;bottom:47%}
#keeper{width:24%}
}

/* Contact points align with the goal line; the rear net tapers away. */
#keeper{bottom:calc(var(--goal-ground) - 7px)}
.goal-shape{border-bottom-width:4px}
.goal-shape:before{inset:5px 2px -3px;background:linear-gradient(90deg,#5f858fad 0 7%,transparent 13% 87%,#5f858fad 93% 100%),linear-gradient(0deg,#597b857d,transparent 25%);clip-path:polygon(0 0,100% 0,89% 100%,11% 100%)}
.goal-grid{inset:2px 2px 0;clip-path:polygon(1% 0,99% 0,90% 100%,10% 100%)}

/* Front opening has hockey-net proportions; keeper is taller than the crossbar. */
.goal-shape{left:35%;width:30%;height:auto;aspect-ratio:1.75/1}
#keeper{width:18%}
@media(max-width:700px){.goal-shape{left:25%;width:50%;height:auto;aspect-ratio:1.75/1}#keeper{width:30%}}
@media(max-width:400px){.goal-shape{left:25%;width:50%}#keeper{width:30%}}

/* Draw rating stars without depending on a platform font glyph. */
.level-stars,.big-stars{display:flex;align-items:center;justify-content:center;gap:4px}
.star-icon{display:inline-block;flex:none;width:18px;height:18px;clip-path:polygon(50% 2%,61% 36%,98% 36%,68% 58%,79% 95%,50% 73%,21% 95%,32% 58%,2% 36%,39% 36%);background:#60747b}
.star-icon.filled{background:#ffd21c}
.big-stars{min-height:70px;margin:10px 0 16px;gap:10px}
.big-stars .star-icon{width:58px;height:58px}

/* The opponent prepares without revealing the target; the puck itself is the cue. */
.arena.defense-windup .skater{transform-origin:50% 90%;animation:skater-windup .65s ease-in-out infinite alternate}
@keyframes skater-windup{to{transform:translateX(-3px) rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.arena.defense-windup .skater{animation:none}}

/* One shared position drives the visible keeper and shadow before and during shots. */
#keeper,.keeper-shadow{transform:translateX(calc(-50% + var(--keeper-x,0px)));transition:none}

/* A dark, rimmed puck remains readable on ice and in flight. Its ice shadow is independent. */
.puck,.gold-puck .puck,.arena.shot-in-flight .puck,.gold-puck .arena.shot-in-flight .puck{
  width:24px;height:12px;border:2px solid #82939a;border-radius:50%;
  background:#0c1215;box-shadow:inset 0 -2px 0 #020507,0 2px 3px #000b,0 0 0 1px #0a1215;z-index:7
}
.gold-puck .puck,.gold-puck .arena.shot-in-flight .puck{border-color:#ffd21c}
.puck-shadow{position:absolute;width:24px;height:8px;border-radius:50%;background:#06151a8c;
  box-shadow:0 1px 4px #06151a88;filter:blur(1.5px);opacity:.58;z-index:5;pointer-events:none}

/* A chosen corner is visible in the skater's preparation; the keeper reacts with a delay. */
.arena.attack-ready:not(.shot-in-flight) .skater{transform-origin:50% 100%;transform:rotate(var(--aim-lean,0deg))}


/* Each skate has a contact shadow on the same ice plane as its lowest alpha pixel. */
.keeper-shadow{width:18%;height:0;bottom:calc(var(--goal-ground) - 6px);background:none;filter:none}
.keeper-shadow::before,.keeper-shadow::after{content:"";position:absolute;bottom:0;width:22%;height:6px;border-radius:50%;background:#0c2024b8;filter:blur(2px)}
.keeper-shadow::before{left:9%}
.keeper-shadow::after{right:9%}
@media(max-width:700px){.keeper-shadow{width:30%}}

/* Mobile rink perspective: the foreground skater is larger than the distant keeper.
   Keeper SVG size also drives its screen CTM, so visible parts and hit testing stay aligned. */
@media(max-width:700px){
  #keeper{width:24%;}
  .keeper-shadow{width:24%;}
  .skater{height:76%;left:-5%;}
  .skater-shadow{left:4%;width:30%;}
}
@media(max-width:400px){
  #keeper{width:24%;}
  .skater{height:77%;left:-5%;}
}

/* Small dark rubber disk; its separate ice shadow supplies contrast without a pale rim. */
.puck,.gold-puck .puck,.arena.shot-in-flight .puck,.gold-puck .arena.shot-in-flight .puck{
  width:16px;height:8px;border:1px solid #263138;
  background:#0b1013;box-shadow:inset 0 -1px 0 #020507,0 2px 3px #07151aaa;
}
.gold-puck .puck,.gold-puck .arena.shot-in-flight .puck{border-color:#756528;}
.puck-shadow{width:18px;height:5px;box-shadow:0 1px 3px #06151a88;}

/* A role switch holds the finished attempt on screen while naming the next role. */
.role-transition{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:16px;text-align:center;background:#10232bdc;color:#ffe05b;pointer-events:auto;}
.role-transition strong{font-size:clamp(25px,7vw,44px);font-weight:950;line-height:1.1;
  text-shadow:0 3px 8px #07151c;}

.result .final-credit{max-width:390px;margin:26px auto 0;padding:16px 8px 0;
  border-top:1px solid #526871;color:#dce8e7;font-size:clamp(15px,4vw,19px);
  font-weight:700;line-height:1.35;letter-spacing:.01em;}
.account-panel{margin:22px 0 0;padding:20px;border:1px solid #52666e;background:#203139;border-radius:14px}
.account-panel h2{margin:8px 0 12px;font-size:1.4rem;line-height:1.15}
.account-panel .lead{font-size:.95rem;line-height:1.5}
.account-panel button{margin-top:12px}
#telegramEntry{margin-top:16px;min-height:46px}
#telegramEntry iframe{display:block}
.account-numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px;margin:15px 0}
.account-numbers span{display:flex;flex-direction:column;padding:10px;background:#16262d;border-radius:8px;color:#b4c4ca;font-size:.8rem}
.account-numbers b{font-size:1.3rem;color:#ffcc17}
#accountProfileForm{display:grid;gap:12px;margin-top:16px}
#accountProfileForm label{display:grid;gap:5px;font-size:.88rem}
#accountProfileForm input:not([type=checkbox]),#accountProfileForm select{width:100%;min-height:42px;padding:8px;border:1px solid #6b818a;border-radius:7px;background:#0e2028;color:#fff}
#accountProfileForm label:has(input[type=checkbox]){display:flex;align-items:flex-start;gap:8px}
#accountError{color:#ffaaa0}
#topFiveList{margin:12px 0 0;padding-left:24px}
#topFiveList li{padding:9px 0;border-bottom:1px solid #40545c}
#topFiveList li:last-child{border-bottom:0}
#topFiveList strong,#topFiveList span{display:block}
#topFiveList span{font-size:.82rem;color:#b4c4ca;margin-top:2px}
.language-switcher{display:flex;align-items:center;gap:7px;margin-left:auto;padding:6px 9px;border:1px solid #52666e;border-radius:7px;font-size:.76rem;font-weight:800;letter-spacing:.08em}
.language-switcher a{color:#b4c4ca;text-decoration:none}
.language-switcher a.active{color:#ffcc17}
.language-switcher+button{margin-left:0}
@media(max-width:520px){.language-switcher{order:4;margin-left:0}.topbar{flex-wrap:wrap}}

/* The moving shot window stays in the same field of view as the goalie. */
#playScreen .arena-timing{padding:5px 9px 7px;background:#10232b;
  border:1px solid #79929a;border-bottom:0;pointer-events:none}
#playScreen .arena-timing .timing-label{font-size:11px;color:#fff}
#playScreen .arena-timing .timing-label strong{color:#ffd21c}
#playScreen .arena-timing .timing-track{height:19px;margin-top:4px}
@media(max-width:700px){
  #playScreen .play-head{min-height:23px}
  #playScreen .play-stage>.eyebrow{display:none}
  #playScreen .play-stage h1{font-size:21px;margin:1px 0}
  #playScreen .play-stage .lead{font-size:11px;line-height:1.12;margin:0 0 2px}
  #playScreen .play-stage .rival-card{min-height:24px;padding:3px 7px}
  #playScreen .series-board{min-height:29px;padding:2px 7px}
  #playScreen .play-stage .arena{height:clamp(190px,27dvh,235px)}
  #playScreen .controls{padding:6px 8px}
  #playScreen .cue{font-size:12px;line-height:1.13}
  #playScreen .corner{min-height:43px}
  #playScreen .selection:empty{display:none}
  #playScreen .window-text{display:none}
  #playScreen .arena-timing{padding:3px 7px 4px}
  #playScreen .arena-timing .timing-label{font-size:10px}
  #playScreen .arena-timing .timing-track{height:15px;margin-top:3px}
}
@media(max-width:700px) and (max-height:620px){
  #playScreen .play-head{min-height:20px}
  #playScreen .cue-label{display:none}
  #playScreen .play-stage .arena{height:170px}
  #playScreen .controls{padding:4px 7px}
}
@media(max-width:340px) and (max-height:620px){
  #playScreen .play-stage .arena{height:155px}
}
@media(max-width:700px){
  /* Keep the whole net and helmet inside the shorter mobile ice surface. */
  #playScreen .goal-shape{left:50%;width:auto;height:42%;aspect-ratio:1.75/1;
    bottom:var(--goal-ground);transform:translateX(-50%)}
  #playScreen #keeper{width:auto;height:48%;aspect-ratio:1/1;
    bottom:var(--goal-ground)}
}