*{box-sizing:border-box}.hockey-page{max-width:1320px;margin:auto;padding:16px}.page-heading{padding:4px 4px 16px;color:#165980}.page-heading h1{font-size:28px;margin:0}.page-heading p{font-size:14px;margin:6px 0 0}.hockey-page #host{position:relative;isolation:isolate;height:810px;min-height:610px;display:flex;flex-direction:column;color:#165980;background:#fffbed;border:2px solid #9bdcf3;border-radius:28px;overflow:hidden;font-family:'Zen Maru Gothic',sans-serif}.hockey-page #host [hidden]{display:none!important}#host button{font:inherit;font-weight:700;font-size:14px;line-height:1.35;min-height:44px;padding:9px 14px;background:#fffdf5;color:#165980;border:2px solid #a3d8e9;border-radius:16px;cursor:pointer;touch-action:manipulation}#host button:hover{background:#e8f8ff}#host button:disabled{opacity:.6;cursor:default}#host button:focus-visible,#canvas:focus-visible{outline:3px solid #8c3874;outline-offset:2px}#host button.primary{background:#ed6d70;border-color:#d34f59;color:white;box-shadow:0 4px 0 #b74353}#host button.primary:hover{background:#de595f}.hockey-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;background:#e6f7ff;border-bottom:3px solid white;flex:none}.hockey-top strong{font-size:16px}.hockey-top nav{display:flex;gap:5px}.hockey-top button{font-size:12px!important;padding:6px 10px!important}.hockey-page #base{flex:1;min-height:0;position:relative}#cover{height:100%;display:grid;grid-template-columns:3fr 2fr}.cover-art{height:100%;width:100%;object-fit:cover;object-position:35% center;min-height:0}.welcome{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(20px,3vw,40px)}.welcome h2{font-size:clamp(34px,4vw,58px);line-height:1.25;margin:0;color:#1679b5;text-shadow:2px 3px 0 white}.welcome p{font-size:15px;line-height:1.7;margin:0}.welcome small{font-size:11px}.welcome #start{font-size:22px;padding:14px}#levels{display:grid;gap:9px}#levels button{position:relative;border-radius:7px;border-style:dashed;background:#e6f3d5;border-color:#9aba78;font-size:17px;text-align:left;padding-left:32px}#levels button:nth-child(2){background:#fff0b5;border-color:#e0b453}#levels button:nth-child(3){background:#ffd5d5;border-color:#de8891}#levels button[aria-pressed=true]{outline:3px solid #297ca7;outline-offset:2px}#levels button[aria-pressed=true]:before{content:'●';position:absolute;left:10px;font-size:12px}#play{display:grid;height:100%;grid-template-rows:auto minmax(0,1fr) auto auto;padding:14px 20px;gap:9px;background:#d7f1ff}.scoreboard{display:flex;gap:16px;align-items:center;justify-content:center}.scoreboard>div{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 12px;border:3px solid white;border-radius:20px;background:#fff9ed;min-width:205px;padding:5px 18px;box-shadow:0 3px 0 #abd8eb}.scoreboard span{font-size:14px}.scoreboard b{font:bold 42px/1 Fredoka,sans-serif}.your-score b{color:#d44c5e}.sky-score b{color:#677bc9}.scoreboard i{font-size:16px;letter-spacing:4px;font-style:normal;grid-column:1/-1;text-align:center;color:#dc9c10}.scoreboard #level-name{font-size:12px;white-space:nowrap}.court-wrap{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}#canvas{display:block;border-radius:18px;touch-action:none;box-shadow:0 5px 0 #369fd4;background:#95d5f2}#feedback{min-height:24px;margin:0;text-align:center;font-size:14px;line-height:1.5}.court-tools{display:flex;align-items:center;justify-content:center;gap:10px}.court-tools small{font-size:11px}.speed{height:6px;width:150px;background:#b3dae8;border-radius:10px;overflow:hidden;margin-top:5px}.speed i{display:block;height:100%;background:#edab26}#directions{display:flex;gap:4px}#directions button{width:46px;padding:5px;font-size:24px;line-height:1}#reset,#change-level{font-size:12px!important;padding:6px 10px!important}#result{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:10px;text-align:center;padding:20px 28px;background:radial-gradient(ellipse at center,#fefaf0 40%,#d6f2ff)}#result h2{font-size:32px;margin:0;color:#c9485f}.result-board{display:flex;align-items:center;justify-content:center;min-height:0;gap:10px}.result-board>img{width:48%;height:100%;object-fit:contain;border-radius:22px}.result-score{display:flex;align-items:center;justify-content:center;gap:18px;width:46%;border:5px solid white;box-shadow:0 7px 0 #c9e0e9;border-radius:40px;padding:28px 12px;background:#fffbed}.result-score span{font-size:17px;display:flex;flex-direction:column;color:#c9485f}.result-score span:last-child{color:#5575b4}.result-score b{font:700 clamp(70px,10vw,135px)/1.1 Fredoka,sans-serif}.result-score i{font-style:normal;font-size:60px}#result-note{margin:0;font-size:15px}#match-trail{display:flex;justify-content:center;gap:8px;padding:0;margin:6px 0;list-style:none;flex-wrap:wrap}#match-trail li{border-radius:50%;background:#ed6d70;color:white;min-width:42px;padding:10px 7px;font:bold 16px/1 sans-serif}#match-trail li.sky{background:#738acc}#result footer{display:flex;gap:10px;justify-content:center}#result footer button{min-width:155px}#modal{position:absolute;inset:0;display:grid;place-items:center;background:#13496670;padding:16px;z-index:10}#modal>section{width:min(500px,100%);max-height:100%;overflow-y:auto;background:#fffbed;border:3px solid #addcea;border-radius:22px;padding:20px}#modal header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}#modal h2{font-size:21px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin:10px 0}#dialog-content label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}#dialog-content input[type=checkbox]{width:24px;height:24px;accent-color:#e66072}#volume{width:100%;accent-color:#e66072}#storage-note{font-size:12px}.parent-note{font-size:14px;line-height:1.9;padding:22px 6px;color:#506f80}.parent-note h2{font-size:20px}.hockey-page #host:fullscreen,.hockey-page #host.faux-fullscreen{width:100vw;height:100dvh;min-height:0;border:0;border-radius:0}.hockey-page #host.faux-fullscreen{position:fixed;inset:0;z-index:10000}
@media(max-width:760px){.hockey-page{padding:8px}.page-heading h1{font-size:23px}.page-heading p{font-size:12px}.hockey-page #host{height:800px;min-height:650px;border-radius:20px}.hockey-top{padding:8px;flex-wrap:wrap;gap:5px}.hockey-top strong{font-size:13px}.hockey-top nav{gap:4px}.hockey-top button{font-size:11px!important;padding:5px 7px!important}.hockey-top nav{width:100%;justify-content:center}#cover{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.cover-art{object-position:35% 45%}.welcome{padding:18px;gap:10px;display:grid;grid-template-columns:1fr auto;align-items:center}.welcome h2{font-size:33px}.welcome small:first-child{grid-column:1/-1}.welcome p{font-size:11px}.welcome #levels{grid-column:1/-1;display:flex;gap:6px}.welcome #levels button{flex:1;font-size:12px;text-align:center;padding:8px 3px}.welcome #levels button[aria-pressed=true]:before{display:none}.welcome #start{grid-column:1/-1;font-size:18px;padding:11px}#ready-note{grid-column:1/-1}#play{padding:12px 8px;gap:10px;grid-template-rows:auto minmax(0,1fr) auto auto}.scoreboard{gap:8px;flex-wrap:wrap}.scoreboard>div{min-width:115px;flex:1;padding:6px 10px;gap:0 4px}.scoreboard span{font-size:12px}.scoreboard b{font-size:32px}.scoreboard i{font-size:13px;letter-spacing:2px}.scoreboard #level-name{display:none}#feedback{font-size:12px;min-height:36px}.court-tools{gap:8px;flex-wrap:wrap}.court-tools>div:first-child{width:100%;text-align:center}.speed{margin:5px auto;width:160px}#directions{width:100%;justify-content:center}#directions button{width:50px}#result{padding:18px 12px;gap:12px}#result h2{font-size:26px}.result-board{flex-direction:column;gap:12px}.result-score{width:100%;max-width:340px;padding:14px;gap:20px}.result-score b{font-size:72px}.result-score span{font-size:14px}.result-score i{font-size:46px}.result-board>img{width:100%;height:100%;min-height:0;object-fit:contain}#result-note{font-size:13px}#match-trail{gap:5px}#match-trail li{font-size:13px;min-width:26px;padding:8px 5px}#result footer{gap:8px}#result footer button{min-width:0;flex:1;font-size:12px}#modal{padding:10px}#modal>section{padding:15px}#modal h2{font-size:18px}#dialog-content{font-size:13px}}
@media(max-width:360px){.hockey-top strong{display:none}.welcome{padding:14px;gap:9px}.welcome h2{font-size:29px}.welcome p{font-size:10px}.hockey-top nav{gap:3px}.hockey-top button{font-size:10px!important;padding:5px!important}#result h2{font-size:23px}}
@media(max-height:520px) and (min-width:600px){.hockey-page #host{height:460px;min-height:380px}.hockey-top{padding:5px 10px;flex-wrap:nowrap}.hockey-top strong{font-size:12px;white-space:nowrap}.hockey-top nav{width:auto}.hockey-top button{font-size:10px!important}.welcome{display:flex;padding:15px;gap:7px}.welcome h2{font-size:31px}.welcome p{font-size:11px}.welcome small{font-size:9px}#cover{grid-template-columns:1.2fr 1fr;grid-template-rows:1fr}.welcome #levels{display:flex;gap:5px}.welcome #levels button{font-size:11px;padding:7px;min-height:44px;text-align:center}.welcome #levels button:before{display:none}.welcome #start{font-size:16px;padding:8px;width:100%}#play{grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:auto minmax(0,1fr) auto;padding:8px 12px;gap:8px}.court-wrap{grid-column:1;grid-row:1/4}.scoreboard{grid-column:2;gap:5px}.scoreboard>div{min-width:80px;flex:1;padding:5px;gap:2px}.scoreboard span{font-size:10px}.scoreboard b{font-size:26px}.scoreboard i{font-size:10px;letter-spacing:1px}.scoreboard #level-name{display:none}#feedback{grid-column:2;font-size:12px;align-self:center;min-height:0}.court-tools{grid-column:2;flex-wrap:wrap;gap:7px}.court-tools>div:first-child{width:100%;text-align:center}.court-tools small{font-size:10px}.speed{margin:5px auto}#directions{width:100%;justify-content:center}#directions button{width:45px}#reset,#change-level{font-size:11px!important;padding:6px!important}#result{padding:10px 20px;gap:6px}#result h2{font-size:23px}.result-board{flex-direction:row}.result-score{width:48%;padding:10px;gap:15px}.result-score b{font-size:70px}.result-score span{font-size:12px}.result-board>img{width:45%}#result-note{font-size:11px}#match-trail{margin:0;gap:6px}#match-trail li{min-width:25px;font-size:11px;padding:7px}#result footer button{font-size:12px;min-width:150px;flex:0}#dialog-content{font-size:12px;line-height:1.6}#modal>section{padding:12px}#modal header{margin-bottom:4px}#dialog-content p{margin:9px 0}}
@media(prefers-reduced-motion:reduce){#host *{scroll-behavior:auto!important}}

.help-guide{float:right;width:90px;height:90px;object-fit:contain;border-radius:12px;margin:0 0 10px 10px}
#play{grid-template-columns:minmax(0,1fr);min-width:0}
.court-wrap{min-width:0}
@media(max-height:520px) and (min-width:600px){#play{grid-template-columns:minmax(0,1fr) 210px}}