.game-page{background:#07151c;color:#fff;min-height:100vh;overscroll-behavior:none}
.game-header{position:relative;top:auto}
.game-header-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
.game-home{margin-left:auto;background:var(--navy);color:#fff;border-radius:9px;padding:12px 16px;font-size:0.8125rem;font-weight:900}
.fullscreen-game{display:none;border:1px solid #315360;background:#112f3a;color:#fff;border-radius:9px;padding:11px 13px;font:inherit;font-size:0.75rem;font-weight:900;cursor:pointer}
.game-main{max-width:1440px;margin:auto;padding:50px clamp(16px,4vw,64px) 80px}
.game-title{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:28px}
.game-branding{width:min(680px,55vw)}
.game-branding img{display:block;width:100%;height:auto;filter:drop-shadow(0 15px 20px rgba(0,0,0,.32))}
.game-branding p{color:#b7cfd5;font-size:1.062rem;margin:4px 0 0;text-align:center;font-weight:800}
.scoreboard{display:grid;grid-template-columns:repeat(4,minmax(76px,1fr));gap:8px;background:#0f2a35;padding:8px;border:1px solid #234754;border-radius:16px;min-width:min(100%,460px)}
.scoreboard div{background:#0a2029;border-radius:10px;padding:12px 16px;text-align:center}
.scoreboard span{display:block;color:#87aab3;text-transform:uppercase;font-size:0.625rem;font-weight:900;letter-spacing:.14em;margin-bottom:5px}
.scoreboard strong{font-size:1.5rem}
.game-card{background:#0d2630;border:1px solid #234653;border-radius:24px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.35)}
.game-toolbar{min-height:68px;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.game-toolbar b{font-size:0.875rem}
.game-toolbar label{font-size:0.75rem;font-weight:900;color:#a5c0c7}
.difficulty-picker{margin:0;padding:0;border:0;display:flex;align-items:center;gap:9px}
.difficulty-picker legend{float:left;padding:0;font-weight:800}
.difficulty-options{display:flex;gap:5px;background:rgba(255,255,255,.15);padding:4px;border-radius:11px}
.difficulty-options button{appearance:none;border:2px solid transparent;border-radius:8px;background:#fff;color:var(--navy);padding:7px 11px;font:inherit;font-size:0.8125rem;font-weight:900;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s}
.difficulty-options button:hover:not(:disabled){transform:translateY(-1px);border-color:var(--pink)}
.difficulty-options button.active{background:var(--pink);color:#fff;border-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.difficulty-options button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.difficulty-options button:disabled{opacity:.55;cursor:not-allowed}

/* The approved arena is one complete image. Nothing crops or redraws the rink. */
.arena{position:relative;width:100%;aspect-ratio:1672/941;overflow:hidden;background:#d8eef3 url('assets/arena-cartoon-crowd-centre-bar-v19.png') center/100% 100% no-repeat;cursor:crosshair;isolation:isolate;outline:none;touch-action:none}
.arena:focus-visible{box-shadow:inset 0 0 0 5px var(--pink)}
.arena:after{content:"";position:absolute;z-index:30;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(1,17,25,.09),transparent 6%,transparent 94%,rgba(1,17,25,.09))}

/* Invisible scoring opening aligned to the red posts in the arena artwork. */
.net-mouth{position:absolute;z-index:3;left:32.7%;top:36.6%;width:34.5%;height:36.4%;pointer-events:none;opacity:0}

/* Every pose uses the same normalized square canvas, scale and skate anchor. */
.goalie{--goalie-x:50%;position:absolute;z-index:8;left:var(--goalie-x);bottom:18.3%;width:40%;height:68%;transform:translateX(-50%);transform-origin:50% 100%;transition:left .14s cubic-bezier(.2,.8,.25,1);pointer-events:none}
.goalie.reacting{transition:none}
.goalie:after{content:"";position:absolute;z-index:-1;left:16%;right:16%;bottom:0;height:4.5%;border-radius:50%;background:rgba(14,42,52,.25);filter:blur(5px)}
.goalie img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 4px rgba(7,24,31,.32))}

.goal-light{position:absolute;z-index:7;left:50%;top:22.5%;width:20px;height:27px;transform:translateX(-50%);border-radius:10px 10px 5px 5px;background:linear-gradient(90deg,#7e091c,#eb1d3f 48%,#7e091c);border:3px solid #dbe7ea;box-shadow:0 4px 6px rgba(0,0,0,.32)}
.goal-light:before{content:"";position:absolute;left:50%;top:-11px;width:5px;height:12px;transform:translateX(-50%);background:#a9bbc0;border-radius:2px}
.goal-light i{position:absolute;left:4px;right:4px;top:4px;height:6px;border-radius:50%;background:rgba(255,255,255,.4)}
.arena.goal-scored .goal-light{background:#ff1748;box-shadow:0 0 18px 9px rgba(255,29,71,.9);animation:goal-light .12s steps(2,end) 8}

.aim-target{--aim-x:66%;--aim-y:57%;position:absolute;z-index:14;left:var(--aim-x);top:var(--aim-y);width:44px;height:44px;border:3px solid var(--pink);border-radius:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 2px #fff);pointer-events:none}
.aim-target:before,.aim-target:after{content:"";position:absolute;background:var(--pink);left:50%;top:50%;transform:translate(-50%,-50%)}
.aim-target:before{width:60px;height:3px}
.aim-target:after{width:3px;height:60px}
.aim-target i{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%)}
.game-puck{position:absolute;z-index:15;left:50%;bottom:3%;width:clamp(25px,3vw,42px);height:clamp(12px,1.45vw,21px);border-radius:50%;background:linear-gradient(#18242a,#020607);box-shadow:0 9px 8px rgba(0,0,0,.3);transform:translateX(-50%);pointer-events:none}
.game-puck.behind-goalie{z-index:6;filter:brightness(.72)}
.save-flash{position:absolute;z-index:16;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;background:#fff;box-shadow:0 0 0 4px var(--teal),0 0 25px 10px rgba(46,220,207,.9);pointer-events:none}
.save-flash.pop{animation:save-flash .42s ease-out}
.callout{position:absolute;z-index:25;left:50%;top:17%;transform:translate(-50%,-50%) scale(.7) rotate(-3deg);font-size:clamp(2.375rem,7vw,5.75rem);font-weight:1000;letter-spacing:-.06em;text-shadow:5px 5px 0 #06171e;opacity:0;pointer-events:none}
.callout.show{animation:callout .85s ease both}
.callout.goal{color:var(--pink)}
.callout.save{color:var(--teal)}
.callout.miss{color:#fff}
.start-panel{position:absolute;z-index:40;inset:0;background:rgba(5,20,27,.86);backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}
.start-panel.hidden{display:none}
.start-panel h2{font-size:clamp(2.25rem,5vw,3.875rem);margin:18px 0 10px}
.start-panel p{max-width:560px;color:#c6dce1;line-height:1.6}
.player-name-label{font-size:0.6875rem;font-weight:1000;letter-spacing:.12em;text-transform:uppercase;color:#9fc2ca;margin:2px 0 7px}
.player-name-input{width:min(320px,82vw);height:50px;border:2px solid #4b7480;border-radius:12px;background:#fff;color:#07151c;text-align:center;font-size:1.125rem;font-weight:900;padding:0 15px;margin-bottom:8px}
.player-name-input:focus{outline:4px solid rgba(46,220,207,.25);border-color:var(--teal)}
.name-error{min-height:20px!important;margin:0 0 7px!important;color:#ff8ac4!important;font-weight:900;font-size:0.75rem}
.challenge-badge{width:min(330px,78vw);padding:13px 22px 15px;background:linear-gradient(145deg,#102d3a,#071720);border:5px solid #fff;border-radius:18px;box-shadow:0 0 0 6px var(--teal),0 0 0 11px var(--pink),0 17px 30px rgba(0,0,0,.35);transform:rotate(-1deg);display:grid;gap:3px;text-align:center}.challenge-badge span{font-size:0.625rem;font-weight:1000;letter-spacing:.24em;color:var(--teal)}.challenge-badge strong{font-size:clamp(1.5rem,5vw,2.375rem);line-height:.82;letter-spacing:-.04em;color:#fff;text-shadow:3px 3px 0 #06161d}.challenge-badge small{font-size:0.5625rem;font-weight:1000;letter-spacing:.1em;color:#ffd2e7;margin-top:5px}
.game-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:20px}
.aim-pad{display:none;grid-template-columns:repeat(4,52px);gap:7px}
.aim-pad button,.new-game{height:48px;border:1px solid #315360;background:#112f3a;color:#fff;border-radius:10px;font-weight:900;cursor:pointer}
.shoot-button{width:160px;height:66px;border:0;border-radius:50%;background:var(--pink);color:#fff;font-size:1.25rem;font-weight:1000;letter-spacing:.08em;box-shadow:0 7px 0 #a91561;cursor:pointer}
.shoot-button:active{transform:translateY(5px);box-shadow:0 2px 0 #a91561}
.shoot-button:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed}
.new-game{justify-self:end;padding:0 20px}
.game-help{text-align:center;color:#86a8b0;font-size:0.75rem;margin:0;padding:0 20px 20px}
.leaderboard-card{margin-top:28px;background:#0d2630;border:1px solid #234653;border-radius:24px;padding:clamp(18px,3vw,34px);box-shadow:0 20px 55px rgba(0,0,0,.25)}
.leaderboard-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.leaderboard-heading h2{font-size:clamp(1.875rem,4vw,3rem);margin:2px 0 0}
.leaderboard-heading button{border:1px solid #3c6570;background:#12323d;color:#fff;border-radius:10px;padding:10px 16px;font-weight:900;cursor:pointer}
.leaderboard-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid #254955}
.leaderboard-table{width:100%;border-collapse:collapse;min-width:650px;background:#091e27}
.leaderboard-table th,.leaderboard-table td{padding:14px 16px;text-align:left;border-bottom:1px solid #1c3c47}
.leaderboard-table th{background:#102f3a;color:#8eb1ba;text-transform:uppercase;font-size:0.625rem;letter-spacing:.12em}
.leaderboard-table td{font-weight:800;color:#dcecef}
.leaderboard-table tr:last-child td{border-bottom:0}
.leaderboard-table .rank{color:var(--pink);font-size:1.125rem}.leaderboard-table .score{color:var(--teal);font-size:1.25rem}
.leaderboard-message{text-align:center!important;color:#88a7af!important;padding:28px!important}
.save-status{color:var(--teal)!important;font-weight:900}
.game-footer{max-width:1440px;margin:auto;padding:0 clamp(16px,4vw,64px) 45px;display:flex;justify-content:space-between;color:#78949c;font-size:0.75rem}
.game-footer a{color:var(--teal);font-weight:900}

@keyframes callout{0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-4deg)}22%,70%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes goal-light{50%{opacity:.35}}
@keyframes save-flash{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}

@media(max-width:760px){
  .game-page .top-ribbon{display:none}
  .game-header{min-height:54px;padding:7px 12px;border-bottom:1px solid #dbe8eb}
  .game-header .brand{gap:7px}.game-header .brand img{width:34px;height:34px}.game-header .brand span{font-size:0.875rem}.game-header .brand b{padding:5px 7px;border-radius:7px}
  .game-header-actions{gap:6px}.game-home{font-size:0;padding:9px 10px}.game-home:after{content:'Back';font-size:0.6875rem}.fullscreen-game{display:inline-flex;align-items:center;gap:4px;padding:9px 10px;font-size:0.6875rem}
  .game-main{padding:10px 8px 34px}.game-title{align-items:stretch;flex-direction:column;gap:8px;margin-bottom:9px}.game-branding{width:190px;margin:auto}.game-branding p{display:none}.scoreboard{width:100%;grid-template-columns:repeat(4,1fr);min-width:0;padding:4px;gap:4px;border-radius:12px}.scoreboard div{padding:7px 3px}.scoreboard span{font-size:0.4375rem;margin-bottom:2px}.scoreboard strong{font-size:1.062rem}
  .game-card{border-radius:14px}.game-toolbar{min-height:0;padding:7px 9px;align-items:center;gap:8px}.game-toolbar>div:first-child{max-width:70px;line-height:1.05}.game-toolbar b{font-size:0.625rem}.difficulty-picker{display:flex;gap:5px}.difficulty-picker legend{float:left;font-size:0.625rem}.difficulty-options{gap:2px;padding:3px}.difficulty-options button{padding:6px 7px;font-size:0.625rem;min-height:34px}
  .arena{aspect-ratio:1672/941;min-height:0}
  .goalie{width:40%;height:68%;bottom:18.3%}
  .start-panel{padding:8px 12px;justify-content:center}.start-panel .challenge-badge{display:none}.start-panel h2{font-size:1.5rem;margin:0 0 3px}.start-panel p{font-size:0.6875rem;line-height:1.25;margin:0 0 5px}.player-name-label{font-size:0.5rem;margin:0 0 3px}.player-name-input{width:min(260px,76vw);height:38px;font-size:0.9375rem;margin-bottom:2px}.name-error{min-height:13px!important;margin:0 0 2px!important;font-size:0.5625rem}.start-panel .button{padding:10px 17px;font-size:0.6875rem}
  .aim-target{width:32px;height:32px}.aim-target:before{width:46px}.aim-target:after{height:46px}
  .aim-pad{display:none}.game-controls{display:flex;justify-content:center;gap:9px;padding:9px}.shoot-button{width:min(52vw,190px);height:52px;font-size:1.062rem}.new-game{height:42px;padding:0 15px}.game-help{padding:0 10px 10px;font-size:0.625rem}.game-footer{gap:15px;flex-direction:column}
}

/* v32 Everyone Can Play mode */
.everyone-toggle{display:flex;align-items:center;gap:9px;background:#143642;border:1px solid #315663;border-radius:11px;padding:7px 11px;cursor:pointer}.everyone-toggle input{width:20px;height:20px;accent-color:var(--pink)}.everyone-toggle span{display:grid}.everyone-toggle b{font-size:0.6875rem;color:#fff}.everyone-toggle small{font-size:0.5625rem;color:#9fc1c8}.everyone-toggle:has(input:checked){background:#075d61;border-color:var(--teal);box-shadow:0 0 0 2px rgba(16,184,178,.22)}.everyone-mode .difficulty-picker{opacity:.45;pointer-events:none}.everyone-mode .shoot-button{min-width:190px;font-size:1.375rem;box-shadow:0 0 0 5px rgba(16,184,178,.25)}
@media(max-width:760px){.everyone-toggle{width:100%;justify-content:center;order:3}.game-toolbar{flex-wrap:wrap}.everyone-mode .shoot-button{min-height:70px}}
@media(max-width:430px){.goal-light{width:14px;height:19px;top:22%}}

/* Phone landscape/full-screen mode: the rink is the interface. */
@media(max-height:600px) and (orientation:landscape){
  .game-page{overflow:hidden}.game-page .top-ribbon,.game-header,.game-title,.leaderboard-card,.game-help,.game-footer{display:none!important}
  .game-main{height:100svh;max-width:none;padding:0;display:flex;align-items:center;justify-content:center}
  .game-card{width:min(100%,calc((100svh - 46px)*1.777 + 142px));height:100%;border:0;border-radius:0;display:grid;grid-template-columns:minmax(0,calc((100svh - 46px)*1.777)) 142px;grid-template-rows:46px minmax(0,1fr);background:#07151c}
  .game-toolbar{grid-column:1/2;grid-row:1;padding:5px 10px;background:#0d2630}.game-toolbar>div:first-child{max-width:none}.game-toolbar b{font-size:0.625rem}
  .difficulty-picker legend{font-size:0.5625rem}.difficulty-options button{min-height:30px;padding:4px 8px;font-size:0.5625rem}
  .arena{grid-column:1/2;grid-row:2;width:100%;height:100%;aspect-ratio:auto;background-size:100% 100%}
  .game-controls{grid-column:2/3;grid-row:1/3;display:flex;flex-direction:column;padding:12px 10px;background:#0d2630;border-left:1px solid #234653}
  .shoot-button{width:112px;height:112px;font-size:1.062rem}.new-game{width:112px;height:42px}.aim-pad{display:grid;grid-template-columns:repeat(2,45px);gap:5px}.aim-pad button{height:42px}
  .start-panel{padding:8px}.start-panel h2{font-size:1.375rem}.start-panel p{font-size:0.625rem}.player-name-input{height:34px}.start-panel .button{padding:8px 15px}
}

.game-page:fullscreen{background:#07151c}.game-page:fullscreen .game-main{padding-top:max(0px,env(safe-area-inset-top))}.game-page:fullscreen .fullscreen-game{display:none}
@media(prefers-reduced-motion:reduce){.callout.show{animation-duration:.01ms}.goalie{transition:none}}