/* Latest user reference: compact sky-blue HUD and one continuous rink. */
:root{--ice:#eff8ff;--ink:#09213a;--blue:#b9ddf5;--red:#e82b38;color-scheme:light}
body{color:var(--ink)}
.registration-note{padding:10px 12px;margin-bottom:12px;border:1px solid #b5cddd;border-radius:8px;background:#d7edfb;font-size:12px}
.game-shell,body[data-view=match] .game-shell{background:#d7edfb}
.topbar{height:48px;padding:9px 20px}.brand{font-size:23px;color:var(--ink)}.brand span{font-size:6px;letter-spacing:2px}.identity{font-size:11px}.connection{font-size:9px;color:#54718b;margin-top:2px}.connection i{background:#2c9c69;width:5px;height:5px}
.tabs{margin:0 20px;padding:3px;background:#b8d9f0;border:0}.tabs button{height:29px;font-size:12px;color:#385671}.tabs button[aria-selected=true]{background:#fff;color:var(--ink)}
.role-header,body[data-view=match] .role-header,body[data-view=lobby] .role-header{display:grid;grid-template-columns:minmax(0,1fr) 62px;grid-template-rows:auto auto;align-items:center;text-align:left;padding:12px 20px 14px;gap:0 9px}
.role-intro,body[data-view=match] .role-intro,body[data-view=lobby] .role-intro{font:700 21px/1 var(--display);grid-column:1;grid-row:1;color:var(--ink)}
.role-header h1,.role-header.keeper h1,body[data-view=lobby] .role-header h1{font:700 clamp(28px,8.5vw,39px)/1.08 var(--display);letter-spacing:-.8px;grid-column:1;grid-row:2;margin-top:1px;color:var(--ink)}
.clock,body[data-view=lobby] .clock{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;margin:0}
.clock strong,body[data-view=match] .clock strong,body[data-view=lobby] .clock strong{font:700 54px/1 var(--display);letter-spacing:-2px;color:var(--ink)}.clock>span{font-size:10px;line-height:1.1;text-align:center;max-width:65px;color:#405f79}.clock.urgent strong,body[data-view=match] .clock.urgent strong{color:var(--red)}
.arena{background:#eaf6ff}
.scoreboard,.arena[data-role=keeper] .scoreboard,.arena[data-role=attacker] .scoreboard{left:25%;top:3%;width:50%;height:24px;background:#09213aeb;border:1px solid #bddff3;border-radius:3px;font-size:10px;color:#edf7ff}
.scoreboard span{max-width:44%}.scoreboard b{font-size:12px;color:#8eafc8}
.arena-targets{gap:4px}.arena-targets button{min-height:44px;border-radius:10px;background:#f4fbff70}.arena-targets button[aria-pressed=true]{background:#d7ff52ed}
.load-note,.scene-fallback{background:#d7edfb;color:var(--ink)}
.lobby,.match-controls{background:#eaf5ff;padding:14px 20px max(12px,env(safe-area-inset-bottom))}.lobby::before,.match-controls::before{top:-10px;height:11px;background:#eaf5ff;clip-path:polygon(0 60%,20% 30%,43% 65%,66% 15%,82% 50%,100% 20%,100% 100%,0 100%)}
.how-to{font-size:12px;margin-bottom:13px}.how-to strong{font-size:15px}label{margin:10px 0 6px}input{min-height:45px;border-color:#b5cddd}.primary{min-height:46px}.secondary{background:#d8eaf7;border-color:#b9d3e5;min-height:42px}.text-button{min-height:34px;font-size:11px}.secondary-actions{margin-top:8px}.local-note{margin-top:12px;color:#64839b}
.zone-controls button{height:80px;border-radius:12px;border-color:#bdd5e6;background:#d9eaf7;color:#526d87;gap:7px;font-size:13px;line-height:1.1;padding:7px 3px}.zone-dot{width:18px;height:18px}.zone-controls button[aria-pressed=true]{background:var(--lime);color:var(--ink)}
.selection-note{font-size:11px;min-height:17px;margin:8px 0 0;color:#65829a}.match-footer{margin-top:3px;color:#65829a;letter-spacing:.6px}.match-footer .text-button{font-size:10px}.after-match{margin-top:0}.after-match p{margin-top:7px;color:#67859c}
.result{position:static;inset:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-items:center;text-align:center;padding:0;margin:0 0 8px;background:none;box-shadow:none;border:0;border-radius:0;color:var(--ink);animation:none}
.result h2{grid-column:1;grid-row:1/span 3;font:700 34px/1 var(--display);color:var(--ink);letter-spacing:-.7px;margin:0;overflow-wrap:anywhere}
.result>span,.result>strong,.result>p{grid-column:1;margin:0;overflow-wrap:anywhere}
.result>p{max-width:none}
.result>span{font-size:8px;letter-spacing:1px;color:#52748d}.result>strong{font:600 14px/1.2 var(--display)}.result>p{font-size:10px;line-height:1.3;color:#52748d}
.result[data-kind=save] h2{color:#1671ad}.result[data-kind=cancelled] h2{font-size:23px;color:var(--ink)}
.bracket-intro,.bracket-empty,.bracket-result,.history-row span{color:#587a93}.bracket-card{border-color:#a9c7dd;background:#f2f9ff}.bracket-label{background:#cde5f6;color:#587d98}.bracket-player,.bracket-result{border-color:#c3dbe9}.bracket-player small{color:#58758b}.history-row{border-color:#afcddd}.bracket-empty{border-color:#a9c7db}.eyebrow{color:#5c809c}.toast{color:#fff}
body[data-view=lobby] .role-intro{font-size:17px}body[data-view=lobby] .role-header h1{font-size:35px}body[data-view=lobby] .arena{height:clamp(170px,26svh,250px)}
body[data-phase=waiting] .role-header{display:block;text-align:center}body[data-phase=waiting] .role-intro{font-size:13px;margin-bottom:5px}body[data-phase=waiting] .role-header h1{font-size:29px}
@media(min-width:700px){.game-shell{border-color:#a6c5db}.tabs{margin-inline:22px;max-width:none;width:auto}.topbar,.lobby,.match-controls{padding-inline:23px}.role-header,body[data-view=match] .role-header{padding-inline:23px}.role-header h1{font-size:39px}}
@media(max-height:700px) and (max-width:600px){.topbar{height:43px}.tabs button{height:26px}.role-header,body[data-view=match] .role-header{padding-top:8px;padding-bottom:10px}.role-header h1{font-size:29px}.role-intro,body[data-view=match] .role-intro{font-size:18px}.clock strong,body[data-view=match] .clock strong{font-size:47px}.zone-controls button{height:68px}.match-controls{padding-top:10px}.selection-note{margin-top:6px}}

/* One portrait composition on phones and desktop; the role owns the full row. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#game-panel{position:relative}
.role-reveal{position:absolute;inset:0;z-index:8;display:grid;place-items:center;overflow:hidden;background:linear-gradient(155deg,#061c32ed,#092b48d9 55%,#061c32e8);color:#fff}
.role-reveal-copy{width:100%;padding:24px 12px;text-align:center;animation:role-slam var(--reveal-duration,1600ms) cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both}
.role-reveal-kicker{display:block;font:italic 700 24px/1 var(--display);letter-spacing:4px;margin-bottom:8px}
.role-reveal strong{display:block;font:italic 700 clamp(34px,12cqw,58px)/1.16 var(--display);letter-spacing:-1px;text-shadow:3px 4px 0 #0005}
body:has(.role-header.keeper) .role-reveal strong{font-size:clamp(48px,19cqw,80px)}
.role-reveal-rule{display:block;width:76px;height:6px;margin:18px auto 0;background:var(--lime);transform:skewX(-20deg)}
body[data-phase=intro] .role-header,body[data-phase=intro] .match-controls{visibility:hidden}
@keyframes role-slam{0%{opacity:0;transform:translateX(-18%) scale(.92) skewX(-7deg)}14%,82%{opacity:1;transform:translateX(0) scale(1) skewX(0)}100%{opacity:0;transform:translateX(12%) scale(1.03) skewX(-4deg)}}
@media(prefers-reduced-motion:reduce){.role-reveal-copy{animation:none}}
.game-shell{max-width:440px;container-type:inline-size}
.tabs{max-width:none}
body[data-view=match] .role-header{display:flex;flex-direction:column;gap:3px;text-align:center;padding:12px 14px 10px}
body[data-view=match] .role-intro{font:700 17px/1 var(--display);letter-spacing:2px}
body[data-view=match] .role-header h1{font-size:clamp(32px,11.4cqw,50px);line-height:1.1;letter-spacing:-.8px;margin:0;max-width:100%}
body[data-view=match] .clock{flex-direction:row;gap:6px;margin-top:3px;min-height:33px}
body[data-view=match] .clock strong{font-size:32px;letter-spacing:-1px}
body[data-view=match] .clock>span{font-size:11px;max-width:90px;text-align:left}
body[data-view=match] .match-controls{min-height:190px;padding-top:12px;padding-bottom:max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center}
.after-match .primary{min-height:42px}.after-match p{font-size:9px;margin-top:4px}
body[data-phase=waiting] .role-header h1{font-size:30px}
@media(min-width:700px){.game-shell{max-width:min(440px,calc((100svh - 40px)*.56))}}
@media(max-height:700px) and (max-width:600px){
  body[data-view=match] .role-header{padding:8px 12px;gap:2px}
  body[data-view=match] .role-intro{font-size:14px}
  body[data-view=match] .role-header h1{font-size:clamp(32px,10.8cqw,40px)}
  body[data-view=match] .clock{min-height:27px;margin-top:2px}
  body[data-view=match] .clock strong{font-size:26px}
  body[data-view=match] .match-controls{min-height:174px;padding-top:8px}
}

/* The countdown hands the same on-ice position to the outcome title. */
.arena-feedback{position:absolute;z-index:4;left:50%;top:var(--feedback-y,54%);transform:translate(-50%,-50%);display:grid;place-items:center;max-width:calc(100% - 30px);pointer-events:none;text-align:center;isolation:isolate}
.arena-feedback::before{content:'';position:absolute;inset:0 -12px;background:#08233deb;transform:skewX(-10deg);border-bottom:4px solid var(--lime);box-shadow:0 5px 16px #09213a38;z-index:-1}
body[data-view=match] .arena-feedback .clock{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:5px;min-height:0;margin:0;padding:4px 13px 8px}
body[data-view=match] .arena-feedback .clock strong{font:italic 700 clamp(44px,14cqw,60px)/1 var(--display);letter-spacing:-1px;color:#fff}
body[data-view=match] .arena-feedback .clock>span{font:600 10px/1 var(--display);max-width:none;color:#d9eafa;text-transform:uppercase}
body[data-view=match] .arena-feedback .clock.urgent strong{color:var(--lime);animation:clock-pulse .9s ease-in-out infinite}
.arena-feedback .result-title{font:italic 700 clamp(46px,18cqw,78px)/1.1 var(--display);letter-spacing:-1px;color:var(--lime);padding:9px 22px 13px;white-space:nowrap;animation:outcome-pulse .95s ease-in-out 2}
.arena-feedback[data-kind=save] .result-title{color:#a9e4ff}
.arena-feedback[data-kind=cancelled] .result-title{font-size:clamp(25px,10cqw,42px);color:#fff;padding-inline:12px}
.arena-feedback[data-headline=verdict]{width:min(320px,calc(100% - 42px))}
.arena-feedback[data-headline=verdict] .result-title{font-size:clamp(31px,10.8cqw,47px);line-height:1.06;white-space:pre-line;padding:12px 10px 15px;color:var(--lime);animation:verdict-in .24s ease-out,outcome-pulse .95s ease-in-out .24s 2}
.arena-feedback[data-headline=verdict][data-outcome=lost] .result-title{color:#ffb7bd}
.arena-feedback[data-headline=verdict][data-outcome=lost]::before{border-bottom-color:#ff7786}
.arena-feedback[data-headline=verdict][data-outcome=neutral] .result-title{color:#fff}
@keyframes verdict-in{from{opacity:0;transform:translateX(-12px) scale(.94)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes outcome-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.38;transform:scale(.94)}}
@keyframes clock-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.68;transform:scale(.95)}}
@media(prefers-reduced-motion:reduce){.arena-feedback .result-title,.arena-feedback[data-headline=verdict] .result-title,body[data-view=match] .arena-feedback .clock.urgent strong{animation:none}}