:root{--mobile-panel:var(--navy,#0e1a3c);--mobile-ink:var(--cream,#fff6d8);--mobile-accent:var(--turquoise,#17c3c9);--mobile-focus:var(--gold,#ffd21a);--mobile-divider:color-mix(in srgb,var(--mobile-ink) 14%,transparent);--mobile-menu-button:color-mix(in srgb,var(--mobile-accent) 10%,var(--mobile-panel));--mobile-menu-button-active:color-mix(in srgb,var(--mobile-accent) 20%,var(--mobile-panel))}
.mobile-tools,.mobile-shot-controls{display:none}
#dtags{display:none!important}
#hud #cadPanel,#hud[data-mobile-panel=tips] #cadPanel{display:none!important}
#hud .tl.panel .hole,#hud .tl.panel .row>:not(#hPar),#hud .tl.panel .who{display:none!important}
#hud .tl.panel{min-width:0!important;min-height:0!important;width:auto!important;padding:8px 12px!important}
.game-account-link{display:inline-flex;align-items:center;min-height:44px;color:var(--mobile-accent);font-size:14px;text-decoration:none;touch-action:manipulation}
.game-account-link:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:3px}
.play-allowance{display:block;color:var(--mobile-accent);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums;min-height:18px}
.play-time{font-size:11px;color:var(--mobile-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.game-session-bridge{position:fixed;bottom:0;left:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none}
@media(max-width:820px) and (min-height:521px){
 #overlay.s-menu .ts{padding-top:30dvh}
 #overlay.s-menu .ts .tcol{padding:12px 18px;gap:10px;background:var(--mobile-panel)}
 #overlay.s-menu .ts .tlogo{width:116px}
 #overlay.s-menu .ts .tgo b{font-size:26px}
 #overlay.s-menu .ts .tnav button{min-height:44px;padding:8px 0 8px 10px}
 #overlay.s-menu .ts .tnav b{font-size:19px}
 #overlay.s-menu .ts .tnav small{display:none}
 #overlay.s-menu .ts .tplayer{order:2;min-height:52px}
 #overlay.s-holes,#overlay.s-quick{align-items:flex-end;background-image:none!important;background:transparent}
 #overlay .mapsheet{height:70dvh;max-height:70dvh;border-radius:8px 8px 0 0;padding:16px;overflow-x:hidden}
 #overlay .mapsheet header.top{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px}
 #overlay .mapsheet header.top h2{font-size:24px}
 #overlay .mapsheet header.top .backb{padding:6px;clip-path:none;border-radius:4px;font-size:13px}
 #overlay .mapsheet header.top> :last-child:not(h2):not(button){grid-column:1/-1;justify-self:end}
}
@media(max-width:820px),(pointer:coarse){
 #hud .tl.panel{top:6px;left:6px;min-height:42px;max-width:calc(100% - 132px);padding:5px 14px 5px 8px;box-sizing:border-box}
 #hud .hole{flex-wrap:nowrap;gap:5px}#hud .hole b{font-size:17px}#hud .hole span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #hud .tl .row{font-size:11px;gap:6px}#hud .who{display:none}
 #hud .tr.panel{top:6px;right:6px;padding:4px 8px;min-height:42px;box-sizing:border-box}#windArrow,#windArrow svg{width:28px;height:28px}#windSpd{font-size:14px}#hud .tr small{font-size:10px}
 #hud .tc{top:54px;left:8px;transform:none;text-align:left;display:flex;align-items:center;gap:8px;max-width:calc(100% - 62px)}#dist{font-size:23px}#elev{font-size:11px}#aimPinBtn{margin:0;font-size:11px;padding:7px 10px;max-width:160px;white-space:normal}
 #pauseBtn{top:54px;right:8px;width:44px;height:40px}
 #hud .mobile-tools{display:flex;position:absolute;top:100px;right:8px;gap:4px;pointer-events:auto}
 .mobile-tools button{display:grid;place-items:center;width:44px;height:40px;padding:0;border:0;border-radius:4px;background:var(--mobile-panel);color:var(--mobile-ink);cursor:pointer}
 .mobile-tools svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .mobile-tools button[aria-expanded=true]{background:var(--mobile-accent);color:var(--mobile-panel)}.mobile-tools button:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
 #hud #mini,#hud #camBar,#hud #items,#hud #cadPanel{display:none}
 #hud[data-mobile-panel=map] #mini{display:block;top:148px;right:8px;left:auto;width:90px;height:138px}
 #hud[data-mobile-panel=camera] #camBar{display:grid;top:148px;left:auto;right:8px;grid-template-columns:repeat(4,44px);gap:4px}#hud #camBar button{height:40px}
 #hud[data-mobile-panel=items] #items{display:flex;top:148px;right:8px;bottom:auto;max-width:248px;flex-wrap:nowrap;gap:4px;padding:8px;clip-path:none;border-radius:4px}#hud #items .itl{display:none}#hud #items .itb{width:44px;height:44px;flex:none}#hud #items .itb svg{width:26px;height:26px}
 #hud[data-mobile-panel=tips] #cadPanel{display:flex;top:148px;left:auto;right:8px;bottom:auto;max-width:min(290px,calc(100% - 16px));padding:6px 12px 6px 0;clip-path:none;border-radius:4px}#hud[data-mobile-panel=tips] #cadPanel .tipcol{display:block}#hud[data-mobile-panel=tips] #tip{display:block;font-size:12px}#hud[data-mobile-panel=tips] #tipX{display:none}
 #hud .bl.panel{left:6px;bottom:calc(6px + env(safe-area-inset-bottom));width:calc(50% - 10px);max-width:none;min-height:68px;padding:6px;gap:6px;box-sizing:border-box;clip-path:none;border-radius:4px}#hud .bl #clubIco{display:none}#hud .clubInfo{min-width:0;flex:1}#clubName{font-size:13px;line-height:1.2;overflow-wrap:anywhere}#clubEst,#lie{font-size:11px;line-height:1.2}#hud .clubBtns{flex-direction:column;gap:2px}#hud .clubBtns button{width:36px;height:28px;padding:0;font-size:13px}
 #hud .br.panel{right:6px;bottom:calc(6px + env(safe-area-inset-bottom));width:calc(50% - 10px);min-height:68px;max-width:none;padding:6px;gap:6px;box-sizing:border-box;clip-path:none;border-radius:4px}#hud #spin{width:48px;height:48px;flex:none}#hud .br .col{min-width:0;flex:1}#spinLbl{font-size:11px;line-height:1.1}#hud #pwr{font-size:11px;padding:4px 2px;min-height:28px;white-space:normal}#energy{margin:3px 0}
 #hud #bar{bottom:calc(148px + env(safe-area-inset-bottom));width:calc(100% - 24px);left:50%;transform:translateX(-50%)}#hud #bar .track{height:22px}#hud #bar .labels{font-size:10px}#hud #bar .tick span{font-size:10px}
 #hud .mobile-shot-controls{display:flex;position:absolute;bottom:calc(84px + env(safe-area-inset-bottom));left:12px;right:12px;height:54px;gap:4px;align-items:center;pointer-events:auto;color:var(--mobile-ink)}
 #hud .mobile-shot-controls[hidden]{display:none}
 .mobile-shot-controls button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:4px;padding:0;background:var(--mobile-panel);color:var(--mobile-ink);font-size:23px;touch-action:none;user-select:none}
 .mobile-shot-controls svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .mobile-shot-controls .touch-shot{background:var(--mobile-accent);color:var(--mobile-panel)}
 .mobile-shot-controls[data-phase=accuracy] .touch-shot{background:var(--mobile-focus)}
 .mobile-shot-controls button:active{outline:2px solid var(--mobile-focus)}
 .mobile-shot-controls button:focus-visible,.touch-power input:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
 .mobile-shot-controls button:disabled{opacity:0.35}
 .touch-power{flex:1;min-width:0;height:54px;box-sizing:border-box;background:var(--mobile-panel);border-radius:4px;padding:4px 8px}
 .touch-power span{display:flex;justify-content:space-between;gap:3px;font-size:11px;line-height:14px;white-space:nowrap}
 .touch-power input{display:block;width:100%;min-width:0;height:30px;margin:0;accent-color:var(--mobile-accent);touch-action:pan-x;cursor:pointer}
 #c{touch-action:none}
 #hud #hint{display:none}#hud #cmd{bottom:calc(124px + env(safe-area-inset-bottom));top:auto}
 #hud:has(#bar.live) #mini,#hud:has(#bar.live) #camBar,#hud:has(#bar.live) #items,#hud:has(#bar.live) #cadPanel{visibility:hidden;pointer-events:none}
}
@media(max-height:520px) and (max-width:1000px){
 #hud .tc{top:8px;left:50%;transform:translateX(-50%);max-width:calc(100% - 370px)}#aimPinBtn{display:none}#pauseBtn{top:6px;right:116px}
 #hud .mobile-tools{top:54px}#hud[data-mobile-panel=map] #mini,#hud[data-mobile-panel=camera] #camBar,#hud[data-mobile-panel=items] #items,#hud[data-mobile-panel=tips] #cadPanel{top:102px}
 #hud .bl.panel,#hud .br.panel{width:190px;min-height:64px}#hud #bar{width:calc(100% - 420px);bottom:calc(80px + env(safe-area-inset-bottom))}#hud #cmd{bottom:122px}
 #hud .mobile-shot-controls{left:204px;right:204px;bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* Full mobile screens, including menus, dialogs, and browser safe areas. */
@media(max-width:820px),(pointer:coarse){
 html,body,#ui{height:100%;height:100dvh;overflow:hidden}
 #overlay{box-sizing:border-box;padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));overscroll-behavior:contain;touch-action:pan-y}
 #overlay.s-menu{padding:0}
 #overlay .sheet,#overlay .dialog{box-sizing:border-box;width:100%;max-width:680px;min-width:0;max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;border-radius:8px;padding:14px}
 #overlay .sheet header{flex-wrap:wrap;gap:8px;align-items:center}
 #overlay .sheet header button{min-height:44px;flex:none}
 #overlay .sheet h2,#overlay .dialog h2{font-size:24px;overflow-wrap:anywhere;max-width:100%}
 #overlay button{touch-action:manipulation}
 #overlay .opt{flex-wrap:wrap;gap:8px;min-height:44px;align-items:center}
 #overlay .opt span{flex:1;min-width:120px}
 #overlay .opt select,#overlay .opt input[type=text]{max-width:100%;min-height:44px;font-size:16px;box-sizing:border-box}
 #overlay .opt input[type=range]{height:44px;max-width:100%}
 #overlay .tabs,#overlay .tabs2{overflow-x:auto;flex-wrap:nowrap;max-width:100%;scrollbar-width:thin;touch-action:pan-x}
 #overlay .tabs button,#overlay .tabs2 button{flex:none;min-height:44px;white-space:nowrap;border-radius:4px}
 #overlay .rowb button{min-height:44px;border-radius:4px}
 #overlay.mobile-settings .cols>div:has(.keys){display:none}
 #overlay .shopbody,#overlay .gbody{min-width:0;padding:8px;gap:10px}
 #overlay .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
 #overlay .card{min-width:0;overflow-wrap:anywhere}
 #overlay .cardt{grid-template-columns:repeat(6,minmax(0,1fr))}
 #overlay .tutd{gap:8px;max-height:calc(100dvh - 24px);padding:14px}
 #overlay.tut{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
 #overlay .tutd img{display:none}
 #toast{max-width:calc(100% - 24px);box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:15px;padding:10px 12px;line-height:1.3}
 #intro{top:max(calc(168px + env(safe-area-inset-top)),24%);left:16px;right:16px;display:flex;flex-direction:column;gap:6px;line-height:1.2;pointer-events:none}
 #intro small{font-size:14px;letter-spacing:0}
 #intro b{font-size:30px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
 #intro span{font-size:20px;line-height:1.2}
 #intro i{font-size:12px;line-height:1.4;margin-top:2px}
 #hud .tl.panel,#hud .tr.panel{top:calc(6px + env(safe-area-inset-top))}
 #hud .tc,#pauseBtn{top:calc(54px + env(safe-area-inset-top))}
 #hud .mobile-tools{top:calc(104px + env(safe-area-inset-top))}
 #hud .clubBtns{flex-direction:row;gap:4px}
 #hud .clubBtns button{width:44px;height:44px;font-size:17px}
 #hud .bl.panel{gap:4px}
 #hud .clubInfo{overflow:hidden}
 #hud .br.panel{display:none}
 #hud[data-mobile-panel=spin] .br.panel{display:flex;top:calc(156px + env(safe-area-inset-top));bottom:auto;right:8px;left:auto;width:210px;min-height:72px}
 #hud[data-mobile-panel=spin] #spin{width:60px;height:60px;touch-action:none}
 #hud[data-mobile-panel=spin] #pwr{min-height:44px}
 #hud:has(#bar.live) .br.panel{visibility:hidden;pointer-events:none}
 #hud .bl.panel{width:calc(100% - 12px);min-height:58px;bottom:calc(6px + env(safe-area-inset-bottom))}
 #hud .mobile-shot-controls{bottom:calc(74px + env(safe-area-inset-bottom))}
 #hud #bar{bottom:calc(138px + env(safe-area-inset-bottom))}
 #hud:has(#bar.live) .bl.panel{visibility:hidden}
 #hud[data-mobile-panel=camera] #camBar,#hud[data-mobile-panel=items] #items,#hud[data-mobile-panel=map] #mini,#hud[data-mobile-panel=tips] #cadPanel{top:calc(156px + env(safe-area-inset-top))}
 #hud #cmd{bottom:calc(180px + env(safe-area-inset-bottom))}
}
@media(max-width:820px) and (min-height:521px){
 #overlay .ts{display:flex;flex-direction:column;box-sizing:border-box;padding-top:env(safe-area-inset-top)}
 #overlay .ts .tplayer{position:relative;top:auto;bottom:auto;left:auto;max-width:none;width:100%;box-sizing:border-box;gap:8px;min-height:64px;padding:8px 16px;flex:none;clip-path:none;background:var(--mobile-panel)}
 #overlay .ts .tname{flex:1;min-width:0}
 #overlay .ts .tname b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #overlay .ts .tpp{font-size:15px;padding-left:8px}
 #overlay .ts .tcol{position:relative;top:auto;bottom:auto;right:auto;width:100%;min-height:0;flex:1;box-sizing:border-box;clip-path:none;justify-content:flex-start;gap:14px;padding:16px 20px calc(16px + env(safe-area-inset-bottom));overflow:auto}
 #overlay .ts .tlogo{width:144px;margin:0;flex:none;animation:none}
 #overlay .ts .tmain{gap:8px}
 #overlay .ts .tgo{margin:0;padding:12px 18px}
 #overlay .ts .tgo b{font-size:30px}
 #overlay .ts .tnav button{min-height:52px;padding:10px 0 10px 12px}
 #overlay .ts .tnav b{font-size:21px}
 #overlay .ts .tmore{gap:4px 16px}
 #overlay .ts .tmore button{min-height:44px;font-size:14px}
 #overlay .ts .tmore span{line-height:1.4}
}
@media(max-height:520px) and (max-width:1000px){
 #hud .tc{top:calc(8px + env(safe-area-inset-top))}
 #pauseBtn{top:calc(6px + env(safe-area-inset-top))}
 #hud .mobile-tools{top:calc(56px + env(safe-area-inset-top))}
 #hud .bl.panel{width:180px;min-height:64px}
 #hud .clubBtns{flex-direction:column;gap:2px}
 #hud .clubBtns button{width:44px;height:32px}
 #hud .mobile-shot-controls{left:198px;right:calc(8px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
 #hud #bar{width:calc(100% - 212px);left:198px;transform:none;bottom:calc(80px + env(safe-area-inset-bottom))}
 #hud[data-mobile-panel=camera] #camBar,#hud[data-mobile-panel=items] #items,#hud[data-mobile-panel=map] #mini,#hud[data-mobile-panel=tips] #cadPanel{top:calc(104px + env(safe-area-inset-top))}
 #hud[data-mobile-panel=spin] .br.panel{top:calc(104px + env(safe-area-inset-top))}
 #hud #cmd{bottom:calc(120px + env(safe-area-inset-bottom))}
 #overlay .tcol{box-sizing:border-box;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 #overlay .ts .tnav button{min-height:44px}
 #overlay .ts .tmore button{min-height:36px}
}
@media(prefers-reduced-motion:reduce){.mobile-tools,.mobile-shot-controls{animation:none;transition:none}}

/* Readable shot meter, shared by desktop and touch layouts. */
:root{--shot-meter-track:var(--mobile-panel);--shot-meter-fill:var(--mobile-accent);--shot-meter-zone:var(--mobile-focus);--shot-meter-cursor:var(--mobile-ink)}
#hud #bar .track{height:32px;border-radius:6px;background:var(--shot-meter-track);border:2px solid var(--shot-meter-zone)}
#hud #bar.live .track{animation:none;box-shadow:none}
#hud #bar.hit .track{animation:none;box-shadow:none;filter:none}
#hud #bar .fill{background:var(--shot-meter-fill);opacity:0.85}
#hud #bar .zone{background:var(--shot-meter-zone);opacity:0.4}
#hud #bar .track>.perfect{background:var(--shot-meter-cursor);animation:none;opacity:0.95}
#hud #bar .cursor{width:4px;background:var(--shot-meter-cursor);box-shadow:none;z-index:6}
#hud #bar .tick{background:var(--shot-meter-cursor);opacity:0.8}
#hud #bar .tick span{font-size:11px;color:var(--shot-meter-cursor);text-shadow:none}
#hud #bar .labels{font-size:11px;line-height:16px;gap:8px;min-height:16px}
/* The result label shares a class with the accuracy strip in the imported game.
   Keep strip positioning, backgrounds and hit animations off the label. */
#hud #bar #barMsg{position:static;inset:auto;min-width:0;max-width:100%;background:none;box-shadow:none;animation:none;transform:none;filter:none;opacity:1;border:0;border-radius:0;padding:0;font-size:14px;line-height:20px;letter-spacing:0;text-shadow:none}
#hud #bar #barMsg.perfect,#hud #bar #barMsg.shot-perfect{color:var(--shot-meter-cursor);font-family:"Fredoka",sans-serif;font-weight:700;text-shadow:0 1px 2px var(--shot-meter-track)}
#hud #bar #barMsg::before,#hud #bar #barMsg::after{content:none}
#hud #bar .labels{min-height:20px;line-height:20px}
#hud #bar .track>.perfect{box-shadow:none;transform:none;filter:none}
.shot-meter-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 8px;margin-bottom:5px;min-height:24px;box-sizing:border-box;border-radius:4px;background:var(--shot-meter-track);color:var(--shot-meter-cursor)}
.shot-meter-phase{font-size:11px;font-weight:800;letter-spacing:0}
.shot-meter-value{font-size:18px;font-variant-numeric:tabular-nums;line-height:20px;color:var(--shot-meter-fill)}
#bar[data-shot-phase=accuracy] .shot-meter-phase,#bar[data-shot-phase=accuracy] .shot-meter-value{color:var(--shot-meter-zone)}
.shot-meter-selected{position:absolute;top:0;bottom:0;width:3px;transform:translateX(-50%);background:var(--shot-meter-zone);z-index:5}
.shot-meter-selected[hidden]{display:none}
@media(max-width:820px),(pointer:coarse){
 .touch-power output{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--shot-meter-fill)}
 .touch-power input{-webkit-appearance:none;appearance:none;background:transparent;height:32px}
 .touch-power input::-webkit-slider-runnable-track{height:8px;background:var(--shot-meter-cursor);border-radius:4px}
 .touch-power input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border:3px solid var(--shot-meter-track);border-radius:50%;background:var(--shot-meter-fill)}
 .touch-power input::-moz-range-track{height:8px;background:var(--shot-meter-cursor);border-radius:4px}
 .touch-power input::-moz-range-thumb{width:20px;height:20px;border:3px solid var(--shot-meter-track);border-radius:50%;background:var(--shot-meter-fill)}
 .touch-power input:disabled{opacity:0.45}
}

/* Progressive disclosure: the course first, optional tools on demand. */
#hud #mini,#hud #camBar,#hud #items,#hud #cadPanel,#hud .br.panel{display:none}
#hud .mobile-tools,#hud[data-tools-open=true] .mobile-tools{display:grid;grid-template-columns:repeat(5,44px);position:absolute;right:calc(8px + env(safe-area-inset-right));top:104px;gap:4px;max-width:calc(100% - 16px);pointer-events:auto}
#hud .shot-more{display:none}
#hud .mobile-tools{z-index:20}
#hud .mobile-tools button{display:grid;place-items:center;width:44px;height:44px;min-width:0;padding:0;border:1px solid var(--mobile-divider);border-radius:4px;background:var(--mobile-panel);color:var(--mobile-ink);cursor:pointer;touch-action:manipulation}
#hud .mobile-tools svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#hud .mobile-tools button[aria-expanded=true]{background:var(--mobile-accent);color:var(--mobile-panel)}
#hud .mobile-tools button:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
.shot-more{position:absolute;right:8px;top:104px;width:44px;height:40px;display:grid;place-items:center;background:var(--mobile-panel);color:var(--mobile-ink);border:0;border-radius:4px;pointer-events:auto;cursor:pointer}
.shot-more svg{width:24px;height:24px;fill:currentColor;stroke:currentColor;stroke-width:1.5}
.shot-more[aria-expanded=true]{color:var(--mobile-accent)}
.shot-more:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
#hud .panel{clip-path:none;border-radius:4px;box-shadow:none}
#hud .who,#hud #hint,#hud #aimPinBtn{display:none}
#hud .tl.panel{min-width:0;padding:6px 10px}
#hud .hole span{display:none}
#hud .tc{pointer-events:none}
#hud .mobile-shot-controls .touch-pin{display:none}
#hud #bar .shot-meter-heading{background:none;padding-left:0;padding-right:0}
#hud #bar .labels #barEst{display:none}
#hud #bar .track{border-width:1px}
#hud:has(#bar.live) .shot-more{visibility:hidden;pointer-events:none}
#hud[data-mobile-panel=map] #mini{display:block;position:absolute;top:156px;right:8px;left:auto;width:90px;height:138px}
#hud[data-mobile-panel=camera] #camBar{display:grid;top:156px;right:8px;left:auto;grid-template-columns:repeat(4,44px);gap:4px}
#hud[data-mobile-panel=items] #items{display:flex;top:156px;right:8px;bottom:auto;padding:8px;gap:4px;clip-path:none}
#hud[data-mobile-panel=tips] #cadPanel{display:flex;top:156px;right:8px;left:auto;bottom:auto;max-width:min(290px,calc(100% - 16px));padding:8px}
#hud[data-mobile-panel=spin] .br.panel{display:flex;top:156px;right:8px;bottom:auto;width:210px;padding:8px}
@media(min-width:821px) and (pointer:fine){
 #hud .mobile-tools,#hud[data-tools-open=true] .mobile-tools{left:50%;right:auto;top:88px;transform:translateX(-50%);grid-template-columns:repeat(5,52px);gap:8px;visibility:visible;opacity:1}
 #hud .mobile-tools button{width:52px;height:52px;border-color:var(--mobile-accent)}
 #hud .mobile-tools svg{width:26px;height:26px}
 .mobile-tools button{width:44px;height:40px;display:grid;place-items:center;border:0;border-radius:4px;background:var(--mobile-panel);color:var(--mobile-ink);cursor:pointer}
 .mobile-tools svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
 #hud .bl.panel{max-width:320px}
}
@media(max-width:820px),(pointer:coarse){
 .shot-more{top:calc(104px + env(safe-area-inset-top))}
 #hud .mobile-tools,#hud[data-tools-open=true] .mobile-tools{top:calc(104px + env(safe-area-inset-top))}
 #hud[data-mobile-panel=map] #mini,#hud[data-mobile-panel=camera] #camBar,#hud[data-mobile-panel=items] #items,#hud[data-mobile-panel=tips] #cadPanel,#hud[data-mobile-panel=spin] .br.panel{top:calc(156px + env(safe-area-inset-top))}
 #hud .mobile-shot-controls{bottom:calc(70px + env(safe-area-inset-bottom))}
 #hud .touch-power{background:var(--mobile-panel)}
}
@media(max-height:520px) and (max-width:1000px){
 .shot-more{top:calc(56px + env(safe-area-inset-top))}
 #hud .mobile-tools,#hud[data-tools-open=true] .mobile-tools{top:calc(56px + env(safe-area-inset-top))}
 #hud[data-mobile-panel=map] #mini,#hud[data-mobile-panel=camera] #camBar,#hud[data-mobile-panel=items] #items,#hud[data-mobile-panel=tips] #cadPanel,#hud[data-mobile-panel=spin] .br.panel{top:calc(108px + env(safe-area-inset-top))}
 #hud .mobile-shot-controls{bottom:calc(14px + env(safe-area-inset-bottom))}
 #intro{top:calc(112px + env(safe-area-inset-top));gap:3px}
 #intro b{font-size:22px}
 #intro span{font-size:16px}
}

.touch-aim-feedback{position:absolute;bottom:calc(100% + 6px);left:0;min-width:88px;height:28px;padding:0 8px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:var(--mobile-panel);color:var(--mobile-accent);border-radius:4px;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;pointer-events:none}
.touch-aim-feedback[hidden]{display:none}
.round-summary{width:min(860px,100%);box-sizing:border-box}
#overlay .round-summary .total{display:flex;justify-content:flex-start;gap:40px;margin:20px 0;text-align:left}
.round-summary .total>div{display:flex;flex-direction:column;gap:4px}
.round-summary .total span{font-size:14px;color:var(--mobile-ink)}
.round-summary h3{font-size:18px;margin:24px 0 12px}
.summary-highlights>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.summary-highlights article{background:var(--mobile-panel);border-left:3px solid var(--mobile-accent);border-radius:4px;padding:14px;display:flex;flex-direction:column;gap:5px}
.summary-highlights strong{font-size:22px;color:var(--mobile-focus)}
.summary-highlights small,.summary-highlights span{font-size:12px;color:var(--mobile-ink)}
.summary-table-wrap{overflow:auto}
.summary-scorecard table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.summary-scorecard th,.summary-scorecard td{padding:10px 8px;text-align:right;border-bottom:1px solid var(--mobile-accent)}
.summary-scorecard th:first-child{ text-align:left}
.summary-scorecard .under td:last-child{color:var(--mobile-accent)}
.summary-scorecard .over td:last-child{color:var(--mobile-focus)}
.summary-scorecard tfoot{font-weight:800}
@media(max-width:420px){.summary-highlights>div{grid-template-columns:1fr}.round-summary .total b{font-size:36px}#overlay .round-summary .total{gap:24px}.summary-scorecard th,.summary-scorecard td{padding:9px 4px;font-size:12px}}
.touch-aim:active{background:var(--mobile-accent);color:var(--mobile-panel)}
#hud[data-mobile-panel=camera] #camBar{padding:8px;background:var(--mobile-panel);border-radius:6px;gap:8px}
#camBar button{position:relative;display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--mobile-ink);border-radius:4px;background:var(--mobile-panel);color:var(--mobile-ink);font-size:22px;touch-action:manipulation}
#camBar button svg{width:22px;height:22px}
#camBar button[aria-pressed=true]{background:var(--mobile-accent);color:var(--mobile-panel);border-color:var(--mobile-accent)}
#camBar .camera-adjust{border-color:var(--mobile-accent)}
#camBar button:focus-visible,.touch-aim:focus-visible,.touch-shot:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
@media(hover:hover){#camBar button:hover::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);right:0;background:var(--mobile-panel);color:var(--mobile-ink);padding:6px 8px;border-radius:4px;white-space:nowrap;font-size:12px;pointer-events:none;z-index:30}}
@media(max-width:820px),(pointer:coarse){
 #hud .touch-shot{width:52px;min-width:52px;min-height:48px}
 #hud .touch-aim{min-height:48px}
 #hud .touch-power{min-height:48px}
 #hud .mobile-shot-controls[data-phase=accuracy] .touch-power{display:none}
 #hud .mobile-shot-controls[data-phase=accuracy]{justify-content:flex-end}
 #hud .mobile-shot-controls[data-phase=accuracy] .touch-shot{width:72px;min-width:72px;background:var(--mobile-focus);color:var(--mobile-panel)}
 #hud .mobile-shot-controls[data-phase=accuracy] .touch-aim{display:none}
}
@media(max-width:820px),(pointer:coarse){
 .touch-power input::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--mobile-accent) 0 var(--touch-power-selected,75%),var(--mobile-ink) var(--touch-power-selected,75%) 100%)}
 .touch-power input::-moz-range-track{background:linear-gradient(to right,var(--mobile-accent) 0 var(--touch-power-selected,75%),var(--mobile-ink) var(--touch-power-selected,75%) 100%)}
 .touch-power:focus-within output{color:var(--mobile-focus)}
}
@media(max-width:820px) and (min-height:521px){
 #overlay.s-menu .ts{--mobile-menu-surface:linear-gradient(to bottom,transparent 0 calc(64px + 38dvh),var(--mobile-panel) calc(64px + 38dvh) 100%);padding-top:calc(64px + 38dvh);background:var(--mobile-menu-surface);display:flex;flex-direction:column;box-sizing:border-box;min-height:100dvh}
 #overlay.s-menu{background:none!important}
 #overlay.s-menu{clip-path:polygon(0 0,100% 0,100% 64px,0 64px,0 calc(64px + 38dvh),100% calc(64px + 38dvh),100% 100%,0 100%)}
 #overlay.s-menu .ts .tcol{box-shadow:none}
 .mobile-menu-header{position:absolute;top:0;left:0;right:0;height:64px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 18px;box-sizing:border-box;background:var(--mobile-panel)}
 .mobile-menu-header .game-account-link{min-width:0;max-width:180px;justify-content:flex-end;font-size:13px;line-height:1.25;text-align:right}
 #overlay.s-menu .mobile-menu-header .tlogo{width:100px;height:52px;object-fit:contain;margin:0}
 #overlay.s-menu .ts .tcol{padding:12px 16px 8px;gap:10px;flex:none;overflow:visible}
 #overlay.s-menu .ts .tmain{gap:10px;min-width:0}
 #overlay.s-menu .ts .tgo{padding:10px 18px;min-height:60px;margin-left:0;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);border-radius:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
 #overlay.s-menu .ts .tgo b{font-size:24px}
 #overlay.s-menu .ts .tgo small{font-size:12px}
 #overlay.s-menu .ts .tnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;gap:10px}
 #overlay.s-menu .ts .tnav button{grid-column:auto;min-width:0;min-height:56px;padding:12px 10px;border:0;border-left:4px solid var(--mobile-accent);border-bottom:1px solid var(--mobile-divider);border-radius:0;background:var(--mobile-menu-button);clip-path:none;transform:none;display:flex;align-items:center;text-align:left;box-sizing:border-box;color:var(--mobile-ink)}
 #overlay.s-menu .ts .tnav button:last-child{grid-column:2;min-height:56px;justify-content:flex-start;border-bottom:1px solid var(--mobile-divider)}
 /* Five lines (with the locker): three above and two below, so the menu keeps its two rows and its height on a phone. */
 #overlay.s-menu .ts .tnav:has(>button:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
 #overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button{grid-column:span 2;padding:8px 6px 8px 8px}
 #overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button:nth-child(n+4){grid-column:span 3}
 #overlay.s-menu .ts .tnav:has(>button:nth-child(5)) b{font-size:15.5px;line-height:1.15}
 #overlay.s-menu .ts .tnav button:hover,#overlay.s-menu .ts .tnav button:focus-visible,#overlay.s-menu .ts .tnav button:active{border-left-color:var(--mobile-focus);background:var(--mobile-menu-button-active)}
 #overlay.s-menu .ts .tnav button::before,#overlay.s-menu .ts .tnav button::after{display:none}
 #overlay.s-menu .ts .tnav b{font-size:17px;line-height:1.2;letter-spacing:0;overflow-wrap:anywhere}
 #overlay.s-menu .ts .tmore{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border-top:1px solid var(--mobile-divider);padding-top:4px;min-width:0}
 #overlay.s-menu .ts .tmore button{min-width:0;min-height:44px;padding:6px 2px;font-size:12px;line-height:1.2;white-space:normal;text-align:center}
 #overlay.s-menu .ts .tmore span{grid-column:1/-1;font-size:9px;line-height:1.4;text-align:center;opacity:.6}
 #overlay.s-menu .ts .tplayer{position:static;margin:auto 0 0;flex:none;display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:8px;width:100%;max-width:none;min-height:60px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));box-sizing:border-box;clip-path:none;background:var(--mobile-panel);border:0;border-top:1px solid var(--mobile-accent)}
 #overlay.s-menu .ts .tplayer .tlv{width:28px;min-width:28px;height:28px;font-size:14px;clip-path:none;border-radius:4px}
 #overlay.s-menu .ts .tplayer .txp{display:none}
 #overlay.s-menu .ts .tplayer .tname{min-width:0}
 #overlay.s-menu .ts .tplayer .tname b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #overlay.s-menu .ts .tplayer .tname em{font-size:10px}
 #overlay.s-menu .ts .tplayer .tpp{font-size:12px;padding-left:4px;white-space:nowrap}
 #overlay.s-menu .ts{overflow-y:auto;overscroll-behavior:contain}
 #overlay .mapsheet{margin:0 auto!important;align-self:flex-end}
 #dtags{display:none!important}
}

/* Two tool layouts. Open: a desktop window with a mouse and room for the whole
   stack keeps map, cameras, items and contact on screen. Compact: everything
   else (phones and tablets in either orientation, short windows) keeps the tool
   buttons and opens one panel at a time, so nothing lands on the meter. */
@media(min-width:821px) and (min-height:600px) and (pointer:fine){
 #hud #mini,#hud[data-mobile-panel=map] #mini{display:block;visibility:visible;position:absolute;top:156px;right:12px;left:auto;width:120px;height:184px}
 #hud #camBar,#hud[data-mobile-panel=camera] #camBar{display:grid;visibility:visible;position:absolute;top:352px;right:12px;left:auto;width:auto;grid-template-columns:repeat(4,44px);gap:6px;padding:8px;background:var(--mobile-panel);border-radius:4px}
 #hud #items,#hud[data-mobile-panel=items] #items{display:flex;visibility:visible;position:absolute;top:522px;right:12px;bottom:auto;left:auto;max-width:264px;flex-wrap:wrap;gap:6px;padding:8px;clip-path:none;border-radius:4px}
 #hud .br.panel,#hud[data-mobile-panel=spin] .br.panel{display:flex;visibility:visible;position:absolute;top:auto;bottom:12px;right:12px;left:auto;width:230px;padding:8px}
 #hud #cadPanel,#hud[data-mobile-panel=tips] #cadPanel{display:flex;visibility:visible;position:absolute;top:auto;bottom:100px;left:12px;right:auto;max-width:290px;padding:8px}
 #hud:has(#bar.live) #mini,#hud:has(#bar.live) #camBar,#hud:has(#bar.live) #items,#hud:has(#bar.live) #cadPanel,#hud:has(#bar.live) .br.panel{visibility:visible;pointer-events:auto}
}
/* Open layout on a window that is not tall (a 1366x768 laptop, for one): the
   items join the contact panel on the bottom row and the meter stops short of
   the right-hand stack, instead of running under it. */
@media(min-width:821px) and (min-height:600px) and (max-height:861px) and (pointer:fine){
 #hud #items,#hud[data-mobile-panel=items] #items{top:auto;bottom:12px;right:254px}
 #ui #hud #bar{width:min(880px,calc(100% - 472px))}
}
@media(max-width:820px),(pointer:coarse){
 #hud .mobile-shot-controls{height:64px;gap:8px}
 #hud .mobile-shot-controls button{min-width:52px;width:52px;min-height:56px;border:1px solid var(--mobile-divider)}
 #hud .touch-shot{background:var(--mobile-accent);color:var(--mobile-panel);border-color:var(--mobile-focus)}
 #hud .touch-power{height:60px;padding:6px 8px}
 #hud .bl.panel{border-left:3px solid var(--mobile-accent);padding:8px 10px;min-height:64px}
 #hud .clubBtns button{width:48px;height:48px;border:1px solid var(--mobile-divider);border-radius:4px;transition:background .15s,transform .15s}
 #hud .clubBtns button:active{transform:translateY(2px);background:var(--mobile-accent);color:var(--mobile-panel)}
 #hud .clubInfo{display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
 #hud .mobile-shot-controls button:active{transform:scale(.96)}
}

/* Course branding replaces the duplicate toolbar at the top. */
/* The game logo heads the screen, above the distance to the pin. The hole has one card in the
   corner, in place of the par panel: world emblem, world and hole in the logo's
   lettering and colours, par, and the clock with the last hole times. World
   colours are the ones the game already uses for each world heading. */
:root{--course-island:#5fe6d6;--course-valley:#a6e86a;--course-sky:#d9b8ff;--course-gold:#ffd21a;--course-ball:#fff6d8;--course-outline:var(--mobile-panel);--hud-surface:color-mix(in srgb,var(--mobile-panel) 94%,transparent);--hud-control:color-mix(in srgb,var(--mobile-accent) 9%,var(--mobile-panel))}
#hud .tl.panel{display:none}
#hud .course-logo{position:absolute;top:8px;left:50%;width:200px;height:116px;object-fit:contain;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 5px 6px color-mix(in srgb,var(--course-outline) 45%,transparent));transition:opacity .2s}
#hud .course-identity{--course-accent:var(--course-island);position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:10px;box-sizing:border-box;max-width:calc(100% - 24px);padding:8px 14px 8px 8px;background:var(--hud-surface);border-left:3px solid var(--course-accent);border-radius:6px;pointer-events:none;font-family:"Lilita One","Fredoka",sans-serif;color:var(--mobile-ink);line-height:1}
#hud .course-identity[data-theme=vale]{--course-accent:var(--course-valley)}
#hud .course-identity[data-theme=celeste]{--course-accent:var(--course-sky)}
.course-identity .course-emblem{width:60px;height:60px;flex:0 0 auto;object-fit:contain}
.course-identity .course-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.course-theme{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--course-accent);white-space:nowrap}
.course-line{display:flex;align-items:center;gap:10px;white-space:nowrap}
.course-hole{font-weight:400;font-size:26px;letter-spacing:.02em;color:var(--course-gold);font-variant-numeric:tabular-nums}
.course-hole b{font-weight:400;color:var(--course-ball)}
.course-par{padding:3px 7px;border:1px solid var(--mobile-divider);border-radius:4px;background:var(--hud-control);font-size:14px;letter-spacing:.03em;text-transform:uppercase}
/* The clock is the card's last line: the running time of this hole only. The
   times of the holes already played stay for the round summary. Outside the
   card the clock has no place. */
#hud>.hole-timer{display:none}
.course-clock .hole-timer{display:flex;align-items:baseline;gap:10px;font-family:"Fredoka",sans-serif;font-variant-numeric:tabular-nums}
.course-clock .hole-timer strong{font-size:15px;line-height:18px;font-weight:700}
.course-clock .hole-timer span{display:none}
/* The logo and the card already name the hole, so the intro keeps only what
   they do not say: par and best score, gear bonus, how to skip. It comes in
   right under the logo, and so do the result banner and PANGO!. */
#ui #intro small,#ui #intro b{display:none}
#ui #intro span{font-size:18px}
#banner .score{font-size:min(76px,13vw,20vh)}
#banner .score.eagle{font-size:min(90px,15vw,22vh)}
#banner .score.hio{font-size:min(96px,13vw,22vh)}
#banner .score.over{font-size:min(60px,8.5vw,16vh)}
@media(min-width:821px) and (pointer:fine){
 #ui #hud .tc{top:128px}
 #ui #banner{top:196px}
 #ui #intro{top:202px}
}
/* Narrow or short desktop windows take a smaller logo. */
@media(min-width:821px) and (max-width:1100px) and (pointer:fine),(min-width:821px) and (max-height:700px) and (pointer:fine){
 #hud .course-logo{width:150px;height:88px}
 #ui #hud .tc{top:100px}
 #ui #banner{top:168px}
 #ui #intro{top:174px}
}
#hud .mobile-tools,#hud[data-tools-open=true] .mobile-tools{display:none}
#hud #items,#hud[data-mobile-panel=items] #items{flex-wrap:nowrap;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;overflow-x:auto;background:var(--hud-surface);border:1px solid var(--mobile-divider);padding:8px;border-radius:6px}
#hud #items .itl{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:0 0 42px;width:42px;gap:4px;margin:0;font-size:12px}
#hud #items .itl span{font-size:11px;color:var(--mobile-accent)}
#hud #items .itb{flex:0 0 44px;width:44px;height:52px;margin:0;border:1px solid var(--mobile-divider);border-radius:4px;background:var(--hud-control);position:relative;display:grid;place-items:center;padding:3px 3px 12px}
#hud #items .itb svg{width:30px;height:30px}
#hud #items .itb b{position:absolute;bottom:2px;right:4px;font-size:11px;line-height:12px}
#hud #items .itb kbd{position:absolute;top:2px;left:3px;font-size:9px;line-height:10px;opacity:.65}
#hud #cadPanel,#hud[data-mobile-panel=tips] #cadPanel{align-items:center;gap:10px;background:var(--hud-surface);border:1px solid var(--mobile-divider);border-left:3px solid var(--mobile-accent);border-radius:6px;padding:10px;box-sizing:border-box}
#hud #cadBtn{width:48px;height:48px;flex:0 0 48px;padding:0;border:1px solid var(--mobile-divider);border-radius:50%;overflow:hidden;background:var(--hud-control)}
#hud #cadImg{display:block;width:100%;height:100%;background-size:cover;background-position:center}
#hud #cadPanel .tipcol{min-width:0;flex:1}
#hud #cadName{font-size:13px;color:var(--mobile-accent);line-height:20px}
#hud #tip{font-size:12px;line-height:1.5;overflow-wrap:break-word}
#hud #tipX{flex:0 0 24px;width:24px;height:44px;padding:0;border:0;background:none;color:var(--mobile-ink);font-size:24px}
#hud .br.panel,#hud[data-mobile-panel=spin] .br.panel{align-items:center;gap:12px;background:var(--hud-surface);border:1px solid var(--mobile-divider);border-radius:6px;padding:12px;box-sizing:border-box}
:root{--contact-ball-light:#ffffff;--contact-ball-shade:#bacbd8;--contact-ball-dimple:#8fa8bc;--contact-ball-rim:#edf6fc}
#hud .bl #clubIco{display:block;flex:0 0 56px;width:56px;height:64px}
#hud #clubIco svg{display:block;width:100%;height:100%;overflow:visible}
#clubIco .club-shaft{fill:none;stroke:var(--contact-ball-rim);stroke-width:4;stroke-linecap:round}
#clubIco .club-grip{fill:none;stroke:var(--mobile-accent);stroke-width:7;stroke-linecap:round}
#clubIco .club-head{fill:var(--contact-ball-shade);stroke:var(--contact-ball-light);stroke-width:2;stroke-linejoin:round}
#clubIco .club-detail{fill:none;stroke:var(--mobile-panel);stroke-width:2;stroke-linecap:round}
@media(max-width:820px){#hud .bl #clubIco{flex-basis:38px;width:38px;height:48px}}
#hud #spin{position:relative;flex:0 0 64px;width:64px;height:64px;border:2px solid var(--mobile-accent);border-radius:50%;box-shadow:inset -5px -6px 10px var(--contact-ball-shade);background:radial-gradient(circle at 3px 3px,var(--contact-ball-dimple) 0 1px,transparent 2px) 0 0/8px 8px,radial-gradient(circle at 30% 25%,var(--contact-ball-light) 0 35%,var(--contact-ball-rim) 64%,var(--contact-ball-shade) 100%);touch-action:none}
#hud #spin::before{content:"";position:absolute;inset:13px;border:1px solid var(--contact-ball-dimple);border-radius:50%;pointer-events:none}
#hud #spinDot{width:16px;height:16px;border-radius:50%;background:var(--mobile-focus);border:2px solid var(--mobile-panel);box-shadow:0 0 0 2px var(--contact-ball-light);z-index:1;pointer-events:none}
#hud #spinLbl{font-size:12px;line-height:18px;white-space:nowrap}
#hud #pwr{min-height:36px;border:1px solid var(--mobile-accent);border-radius:4px;background:var(--hud-control);color:var(--mobile-focus);font-size:12px;padding:6px 10px;white-space:nowrap}
#hud #camBar,#hud[data-mobile-panel=camera] #camBar{border:1px solid var(--mobile-divider);border-radius:6px;background:var(--hud-surface);gap:6px}
#hud #camBar button{background:var(--hud-control);border-color:var(--mobile-divider);color:var(--mobile-ink);font-size:22px}
#hud #camBar button[aria-pressed=true]{background:var(--mobile-accent);color:var(--mobile-panel)}
#hud #camBar .camera-adjust{border-color:var(--mobile-accent);color:var(--mobile-accent)}
@media(max-width:820px),(pointer:coarse){
 /* Phones and tablets: the card opens the top row, the logo comes under it and
    the distance under the logo, all clear of the aim line. */
 #hud .course-identity{top:calc(6px + env(safe-area-inset-top));left:calc(6px + env(safe-area-inset-left));gap:7px;padding:6px 10px 6px 6px;max-width:calc(100% - 118px)}
 .course-identity .course-emblem{width:44px;height:44px}
 .course-identity .course-text{gap:3px}
 .course-theme{font-size:11px}
 .course-line{gap:7px}
 .course-hole{font-size:20px}
 .course-par{padding:2px 6px;font-size:12px}
 .course-clock .hole-timer{gap:7px}
 .course-clock .hole-timer strong{font-size:13px;line-height:15px}
 #hud .course-logo{top:calc(76px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));width:96px;height:64px;transform:none}
 #hud .tc{top:calc(144px + env(safe-area-inset-top))}
 /* An open tool panel covers the logo's corner: the logo waits. */
 #hud[data-mobile-panel]:not([data-mobile-panel=""]) .course-logo{opacity:0}
 #ui #banner{top:calc(178px + env(safe-area-inset-top))}
 #ui #intro{top:max(calc(182px + env(safe-area-inset-top)),24%)}
}
/* Compact tool layout: the exact opposite of the open one above. */
@media(max-width:820px),(max-height:599px),not all and (pointer:fine){
 #hud .mobile-tools,#hud[data-tools-open=true] .mobile-tools{display:grid;grid-template-columns:auto;top:calc(156px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));left:auto;transform:none;gap:5px}
 #hud[data-mobile-panel] #mini,#hud[data-mobile-panel] #camBar,#hud[data-mobile-panel] #items,#hud[data-mobile-panel] #cadPanel,#hud[data-mobile-panel] .br.panel{top:calc(156px + env(safe-area-inset-top));right:calc(68px + env(safe-area-inset-right));max-width:calc(100% - 80px)}
 /* The items open just above the meter, whatever the height of the screen. */
 #hud[data-mobile-panel=items] #items{top:auto;bottom:calc(212px + env(safe-area-inset-bottom));right:calc(8px + env(safe-area-inset-right));max-width:calc(100% - 16px)}
}
@media(max-width:820px) and (max-height:619px) and (min-height:521px){
 #hud[data-mobile-panel=items] #items{right:calc(60px + env(safe-area-inset-right));max-width:calc(100% - 72px)}
}
/* A phone lying down: the tools go in a row under the top bar, the logo under the
   hole card, and the club panel is wide enough for its estimate line. */
@media(max-height:520px) and (max-width:1000px){
 #hud .bl.panel{width:216px}
 #hud .mobile-shot-controls{left:calc(234px + env(safe-area-inset-left))}
 #hud .tc{top:calc(8px + env(safe-area-inset-top))}
 #hud .course-logo{top:calc(80px + env(safe-area-inset-top))}
 #ui #banner{top:calc(40px + env(safe-area-inset-top))}
 #banner .score{font-size:min(76px,8vw,18vh)}
 #banner .score.eagle{font-size:min(90px,9vw,20vh)}
 #banner .score.hio{font-size:min(96px,7.6vw,20vh)}
 #banner .score.over{font-size:min(60px,5.6vw,14vh)}
 #ui #intro{top:calc(112px + env(safe-area-inset-top))}
 #hud .mobile-tools,#hud[data-tools-open=true] .mobile-tools{top:calc(56px + env(safe-area-inset-top));grid-template-columns:repeat(4,auto)}
 #hud[data-mobile-panel] #mini,#hud[data-mobile-panel] #camBar,#hud[data-mobile-panel] #items,#hud[data-mobile-panel] #cadPanel,#hud[data-mobile-panel] .br.panel,#hud[data-mobile-panel=items] #items{top:calc(106px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right))}
 #hud[data-mobile-panel=items] #items{bottom:auto}
}
@media(min-width:821px) and (pointer:coarse){
 #hud #cadPanel,#hud[data-mobile-panel=tips] #cadPanel{bottom:150px}
}
@media(prefers-reduced-motion:reduce){#hud .clubBtns button{transition:none}#hud .mobile-shot-controls button:active{transform:none}}
/* Twice-size desktop/tablet meter, constrained to the available screen. */
@media(min-width:600px){
 #hud #bar{width:min(880px,calc(100% - 24px));left:50%;transform:translateX(-50%)}
 #hud #bar .track{height:48px}
 #hud #bar .cursor{width:6px}
 #hud #bar .tick span{font-size:14px}
 #hud #bar .shot-meter-heading{min-height:32px;margin-bottom:8px}
 #hud #bar .shot-meter-phase{font-size:14px}
 #hud #bar .shot-meter-value{font-size:24px;line-height:28px}
 #hud #bar .labels{font-size:14px;min-height:24px;line-height:24px}
 #hud #bar #barMsg{font-size:18px;line-height:24px}
}
/* Reserve separate lanes for the enlarged meter and the lower panels. */
@media(min-width:821px){
 #hud #bar{bottom:calc(150px + env(safe-area-inset-bottom))}
 #hud #cadPanel,#hud[data-mobile-panel=tips] #cadPanel{bottom:calc(320px + env(safe-area-inset-bottom));top:auto;max-width:290px}
}
/* Tablet lying down, like a phone lying down: club panel in the corner, shot controls beside it, meter above. */
@media(min-width:821px) and (min-height:521px) and (pointer:coarse){
 #hud .bl.panel{width:420px;max-width:calc(50% - 12px)}
 #hud .mobile-shot-controls{bottom:calc(14px + env(safe-area-inset-bottom));left:min(438px,50%);right:calc(12px + env(safe-area-inset-right))}
}
@media(min-width:600px) and (max-height:520px){
 #hud #bar{bottom:calc(82px + env(safe-area-inset-bottom));left:calc(234px + env(safe-area-inset-left));width:calc(100% - 246px - env(safe-area-inset-left) - env(safe-area-inset-right));transform:none}
 #hud #bar .track{height:40px}
 #hud #bar .shot-meter-heading{min-height:28px;margin-bottom:4px}
 #hud #cadPanel,#hud[data-mobile-panel=tips] #cadPanel{bottom:calc(240px + env(safe-area-inset-bottom));max-width:250px}
}

/* Hole result: a compact card docked at the bottom, so the celebration stays in
   view. No dimmed backdrop, and the shot tools step back while the card is open. */
#overlay.dim:has(>.dialog.res){background:none;align-items:flex-end;justify-content:center;box-sizing:border-box;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
#overlay>.dialog.res{box-sizing:border-box;width:min(720px,100%);min-width:0;max-width:none;max-height:100%;overflow:auto;margin:0;padding:14px 18px 16px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"title course" "stats stats" "rewards rewards" "actions actions";gap:8px 16px;align-items:baseline;text-align:left;box-shadow:0 10px 30px color-mix(in srgb,var(--mobile-panel) 60%,transparent);animation:result-rise .4s cubic-bezier(.2,1.2,.4,1) both}
@keyframes result-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.dialog.res>h2{grid-area:title;font-size:32px;line-height:1.1}
.dialog.res>small{grid-area:course;min-width:0;font-size:13px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dialog.res>.stats{grid-area:stats;margin:0;gap:6px;text-align:center}
.dialog.res>.stats div{padding:5px 4px 6px}
/* Rewards in two columns; the level bar takes the free cell after an odd number
   of lines, or a row of its own after an even number. */
.dialog.res>.rewards{grid-area:rewards;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 6px;margin:0}
.dialog.res>.rewards>.lvl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:0 12px}
.dialog.res>.rewards>.lvl:nth-child(odd){grid-column:1/-1;padding:0}
.dialog.res>.rewards>.lvl em{margin:0}
.dialog.res>.rewards>.lvl .xpbar{flex:1 1 80px;margin:0}
.dialog.res>.rowb{grid-area:actions;margin-top:2px}
#ui:has(#overlay>.dialog.res) #hud>:is(#bar,#cmd,#hint,#mini,#camBar,#items,#cadPanel,.bl.panel,.br.panel,.mobile-tools,.shot-more,.mobile-shot-controls){visibility:hidden;pointer-events:none}
@media(max-width:820px),(pointer:coarse){
 #overlay.dim:has(>.dialog.res){padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
 #overlay>.dialog.res{max-width:680px;padding:10px 12px 12px;gap:6px 10px}
 .dialog.res>h2{font-size:26px}
 .dialog.res>.rowb{flex-wrap:nowrap;gap:6px}
 .dialog.res>.rowb button{min-height:44px;padding:8px 6px;font-size:14px;line-height:1.15}
}
@media(max-width:520px){
 .dialog.res>.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
 .dialog.res>.rewards{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){#overlay>.dialog.res{animation:none}}
/* The caddie's word on the hole, between the title and the numbers. */
#overlay>.dialog.res:has(>.caddie-says){grid-template-areas:"title course" "caddie caddie" "stats stats" "rewards rewards" "actions actions"}
.dialog.res>.caddie-says{grid-area:caddie;display:flex;align-items:center;gap:10px;min-width:0;margin:0;padding:5px 12px 5px 5px;border-left:3px solid var(--mobile-accent);border-radius:6px;background:var(--hud-control);font-family:"Fredoka",sans-serif;font-size:15px;line-height:1.3;color:var(--mobile-ink);animation:caddie-says-in .35s .15s both}
.dialog.res>.caddie-says[data-mood=comfort]{border-left-color:var(--mobile-focus)}
.caddie-says .caddie-face{flex:0 0 40px;width:40px;height:40px;border:1px solid var(--mobile-divider);border-radius:50%;background:var(--mobile-panel) center/cover no-repeat}
.caddie-says b{flex:0 0 auto;font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;color:var(--mobile-accent)}
.caddie-says[data-mood=comfort] b{color:var(--mobile-focus)}
.caddie-says .caddie-line{flex:1 1 auto;min-width:0}
@keyframes caddie-says-in{from{opacity:0;transform:translateX(-10px)}}
@media(max-width:520px){.dialog.res>.caddie-says{font-size:13.5px;gap:8px}.caddie-says .caddie-face{flex-basis:34px;width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.dialog.res>.caddie-says{animation:none}}

/* Menus and sheets on small screens. */
/* The tool buttons sit above the panels they open, but never above a dialog. */
#ui:has(#overlay.show) #hud .mobile-tools{z-index:auto}
/* Sheet headers: back, title and wallet wrap instead of pushing the wallet off the screen. */
@media(max-width:600px){
 #overlay .sheet header.top,#overlay .scr header.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 #overlay .sheet header.top h1,#overlay .scr header.top h1{flex:1 1 96px;min-width:0;margin:0;font-size:24px;line-height:1.1;text-align:left;overflow-wrap:anywhere}
 #overlay .sheet header.top .ppills,#overlay .scr header.top .ppills{margin-left:auto}
 /* Profile totals in two columns: four did not fit and the last one fell outside the sheet. */
 #overlay .sheet .stats.big{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* The shop takes the width the screen has: 96% of it plus the side gutters was a pixel or two too wide under 400px. */
 #overlay .scr{width:100%;box-sizing:border-box}
}
/* Hole lists are bottom sheets on phones and upright tablets: full width, so the cleared scene strip never shows beside them. */
@media(max-width:820px) and (min-height:521px){
 #overlay .mapsheet{width:100%;max-width:none;box-sizing:border-box}
}
/* Short phones: the menu gives a little height back so the player row is not cut. */
@media(max-width:820px) and (min-height:521px) and (max-height:700px){
 #overlay.s-menu .ts .tcol{padding-top:8px;gap:8px}
 #overlay.s-menu .ts .tgo{min-height:52px;padding:6px 18px}
 #overlay.s-menu .ts .tnav{gap:8px}
 #overlay.s-menu .ts .tnav button,#overlay.s-menu .ts .tnav button:last-child{min-height:48px;padding:8px 10px}
 #overlay.s-menu .ts .tplayer{min-height:52px;padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
}
/* A phone lying down: the menu column fits the height instead of hiding its last links below the fold. */
@media(max-height:520px) and (max-width:1000px){
 #overlay .ts .tcol{gap:4px}
 #overlay .ts .tlogo{width:96px}
 #overlay .ts .tnav button{min-height:38px}
 #overlay .ts .tmore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;align-items:center}
 #overlay .ts .tmore button,#overlay .ts .tmore .game-account-link{min-height:34px;padding:0;font-size:12px;line-height:1.2;text-align:left;justify-content:flex-start}
 #overlay .ts .tmore span{grid-column:1/-1}
}

/* Legendary kits: one more tab of the shop, in the shop's own drawing. The seal and
   a gold line are all that sets a kit apart from a common item. */
#overlay .tabs2 .legend-tab{color:var(--mobile-focus)}
#overlay .tabs2 .legend-tab.on{color:var(--mobile-panel)}
.legend-seal{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 8px;background:var(--mobile-focus);color:var(--mobile-panel);font-family:"Lilita One","Fredoka",sans-serif;font-size:12.5px;line-height:1;letter-spacing:.05em;text-transform:uppercase;border-radius:3px;white-space:nowrap}
.legend-seal::before{content:"";flex:none;width:6px;height:6px;background:currentColor;transform:rotate(45deg)}
#overlay .shopbody.legend-body{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"cards detail" "kit detail";grid-template-rows:auto minmax(0,1fr);align-items:start}
#overlay .legend-body>.grid3{grid-area:cards}
#overlay .legend-body>.legend-prev{grid-area:detail;align-self:stretch}
#overlay .legend-body>.legend-kit{grid-area:kit;align-self:stretch}
#overlay .it.legend-card{box-shadow:inset 0 3px 0 var(--mobile-focus)}
#overlay .it.legend-card .legend-seal{position:absolute;top:11px;left:8px;z-index:1}
#overlay .it.legend-card:focus-visible,#overlay .legend-thumb:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
/* The panel of the chosen kit: who it is, the pair as it goes on the course, what it gives, and the purchase. */
#overlay .legend-prev{gap:10px}
.legend-who,.legend-say{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;min-width:0}
#overlay .legend-say .gbtn{width:100%;box-sizing:border-box}
#overlay .legend-prev h2{margin:0;font-size:32px;line-height:1;color:var(--mobile-focus)}
#overlay .legend-prev .legend-title{margin:-4px 0 0;font-size:14px;line-height:1.2;color:color-mix(in srgb,var(--mobile-ink) 72%,transparent)}
/* The pair stands on one floor, side by side, the caddie at its real height next to the character (--tall). */
#overlay .legend-stage{--h:262px;position:relative;flex:none;width:100%;max-width:312px;height:var(--h);overflow:hidden;background:radial-gradient(circle at 50% 46%,#3b8fd0 0,#1d4f9c 45%,#0f2358 100%)}
#overlay .legend-stage::before{content:"";position:absolute;left:calc(50% - var(--h)*.5);width:var(--h);bottom:5px;height:16px;border-radius:50%;background:color-mix(in srgb,#0a1230 42%,transparent)}
#overlay .legend-stage img{position:absolute;bottom:4px;width:auto;max-width:none;max-height:none;aspect-ratio:4/5;object-fit:contain;background:none}
#overlay .legend-stage .bigpic{left:calc(50% - var(--h)*.6);height:calc(var(--h) - 8px)}
#overlay .legend-stage .legend-mate{left:calc(50% + var(--h)*(.3 - .4*var(--tall,.7)));height:calc((var(--h) - 8px)*var(--tall,.7))}
/* A lower window keeps the purchase in sight: the pair gives up some height. */
@media(min-width:821px) and (max-height:820px){#overlay .legend-stage{--h:206px}}
@media(min-width:821px) and (max-height:680px){#overlay .legend-stage{--h:170px}}
#overlay .legend-prev .legend-trait{margin:0;font-size:14px;line-height:1.35;text-align:center;color:var(--mobile-ink)}
#overlay .legend-prev .gbx{width:100%;box-sizing:border-box}
#overlay .legend-prev .legend-ask{margin:0;font-size:13.5px;line-height:1.3;text-align:center;color:#ffd9a8}
#overlay .legend-prev .legend-more{font-size:15px;padding:9px 12px}
#overlay .legend-prev .legend-confirm{background:var(--mobile-focus);color:var(--mobile-panel)}
/* What comes in the kit: the three outfits of the character and of the caddie are buttons that dress the pair above. */
.legend-kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch;min-width:0}
.legend-group{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;background:#16234f}
.legend-group>small{font-size:12.5px;line-height:1.25;color:color-mix(in srgb,var(--mobile-ink) 72%,transparent)}
.legend-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#overlay .legend-thumb{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:6px 3px 7px;background:#1b2c5e;color:var(--mobile-ink);border:0;border-bottom:3px solid transparent;border-radius:0;font:inherit;cursor:pointer;transition:background .14s,border-color .14s}
#overlay .legend-thumb img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain}
#overlay .legend-thumb span{font-family:"Lilita One","Fredoka",sans-serif;font-size:12px;line-height:1.1;text-align:center;overflow-wrap:anywhere}
#overlay .legend-thumb:hover{border-bottom-color:var(--mobile-ink)}
#overlay .legend-thumb.on{background:#243a78;border-bottom-color:var(--mobile-focus)}
.legend-rest-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:8px;align-items:center;flex:1}
.legend-rest-row img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain}
.legend-rest-row ul,.legend-loot{list-style:none;margin:0;padding:0}
.legend-rest-row ul{display:grid;gap:5px}
.legend-rest-row li,.legend-loot li{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.15;text-align:left}
.legend-rest-row li b,.legend-loot li b{font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:15px;color:var(--mobile-focus)}
.legend-ico{display:block;flex:0 0 24px;width:24px;height:24px}
.legend-ico svg{display:block;width:100%;height:100%}
/* The kit opens over the shop: the box lands, the lid goes and the pieces come out one after the other. */
#overlay .legend-open{position:fixed;inset:0;z-index:40;display:grid;place-items:center;box-sizing:border-box;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));overflow:auto;background:color-mix(in srgb,var(--mobile-panel) 95%,transparent);animation:legend-veil .25s both}
#overlay .legend-open::before{content:"";position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--mobile-focus) 30%,transparent),transparent 62%);pointer-events:none;animation:legend-glow 1s .8s both}
.legend-box{position:absolute;left:50%;top:50%;width:156px;height:132px;margin:-66px 0 0 -78px;pointer-events:none;animation:legend-box 1.3s cubic-bezier(.3,1.3,.5,1) both}
.legend-box i{position:absolute;display:block;box-sizing:border-box;border:4px solid #0a1230;border-radius:8px}
.legend-box i:last-child{left:0;right:0;bottom:0;height:94px;background:linear-gradient(90deg,#1b2c5e 0 41%,var(--mobile-focus) 41% 59%,#1b2c5e 59%)}
.legend-box i:first-child{left:-9px;right:-9px;top:0;height:46px;z-index:1;background:linear-gradient(90deg,var(--mobile-accent) 0 42%,var(--mobile-focus) 42% 58%,var(--mobile-accent) 58%);animation:legend-lid 1.3s ease-in both}
.legend-out{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(620px,100%);text-align:center}
.legend-out>*{animation:legend-rise .45s cubic-bezier(.2,1.3,.4,1) both}
.legend-out>.legend-seal{animation-delay:1.05s}
#overlay .legend-out h2{margin:0;font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:44px;line-height:1;color:var(--mobile-focus);animation-delay:1.12s}
.legend-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;width:100%;animation:none}
.legend-row figure{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;animation:legend-rise .5s cubic-bezier(.2,1.3,.4,1) both}
.legend-row figure:nth-child(1){animation-delay:1.2s}
.legend-row figure:nth-child(2){animation-delay:1.38s}
.legend-row figure:nth-child(3){animation-delay:1.56s}
.legend-row img{display:block;width:100%;max-width:190px;aspect-ratio:4/5;object-fit:contain}
.legend-row figcaption{font-family:"Lilita One","Fredoka",sans-serif;font-size:17px;line-height:1.1;color:var(--mobile-ink)}
.legend-loot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;animation-delay:1.8s}
.legend-also{margin:0;font-size:14px;line-height:1.3;color:color-mix(in srgb,var(--mobile-ink) 75%,transparent);animation-delay:1.9s}
#overlay .legend-out .gbtn{width:min(320px,100%);animation-delay:2s}
@keyframes legend-veil{from{opacity:0}to{opacity:1}}
@keyframes legend-glow{from{opacity:0;transform:scale(.2)}60%{opacity:1}to{opacity:.6;transform:none}}
@keyframes legend-box{0%{opacity:0;transform:translateY(-60vh) rotate(-8deg)}28%{opacity:1;transform:none}38%{transform:translateY(-10px) rotate(4deg)}48%{transform:rotate(-4deg)}58%{transform:rotate(2deg)}68%{opacity:1;transform:none}100%{opacity:0;transform:translateY(46px) scale(.6)}}
@keyframes legend-lid{0%,62%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-130px) rotate(-24deg)}}
@keyframes legend-rise{from{opacity:0;transform:translateY(26px) scale(.9)}to{opacity:1;transform:none}}
body.noflash #overlay .legend-open::before{display:none}
@media(prefers-reduced-motion:reduce){
 #overlay .legend-open,#overlay .legend-open *,#overlay .legend-open::before{animation:none!important}
 .legend-box{display:none}
}
/* A narrower window: the bag and the items go under the two wardrobes. */
@media(max-width:1180px){
 .legend-kit{grid-template-columns:repeat(2,minmax(0,1fr))}
 .legend-kit>.legend-rest{grid-column:1/-1}
 .legend-rest-row{grid-template-columns:96px minmax(0,1fr)}
 .legend-rest-row ul{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}
/* Phones and upright tablets: the three kits in a row, then the chosen one, then what comes in it. */
@media(max-width:820px){
 #overlay .shopbody.legend-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"cards" "detail" "kit";grid-template-rows:auto}
 #overlay .legend-body>.grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #overlay .legend-stage{--h:230px;max-width:none}
 #overlay .legend-thumb span{font-size:13px}
}
/* An upright tablet has the width for the pair beside the text and the purchase. */
@media(min-width:561px) and (max-width:820px){
 #overlay .legend-prev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stage who" "stage say";grid-template-rows:auto 1fr;gap:12px 16px;align-items:start}
 #overlay .legend-prev>.legend-who{grid-area:who}
 #overlay .legend-prev>.legend-say{grid-area:say}
 #overlay .legend-prev>.legend-stage{grid-area:stage;align-self:stretch;--h:300px;height:auto;min-height:var(--h)}
}
/* A phone: one column all the way down. */
@media(max-width:560px){
 #overlay .it.legend-card{padding:8px 4px 10px}
 #overlay .it.legend-card .legend-seal{top:7px;left:4px;padding:3px 6px 3px 5px;font-size:10px;gap:4px}
 #overlay .it.legend-card .legend-seal::before{width:5px;height:5px}
 .legend-kit{grid-template-columns:minmax(0,1fr);gap:8px}
 .legend-kit>.legend-rest{grid-column:auto}
 #overlay .legend-out h2{font-size:34px}
 .legend-row figcaption{font-size:14px}
}

/* The outfit tabs of the shop (public/shop-wardrobe.js): everyone who can wear the
   clothes on a row above the cards; the cards dress whoever is chosen there. */
.wardrobe-who{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;min-width:0}
#overlay .wardrobe-who button{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 12px 4px 4px;background:#1b2c5e;color:var(--mobile-ink);border:0;border-bottom:3px solid transparent;border-radius:0;clip-path:none;font:inherit;text-align:left;cursor:pointer;transform:none;transition:background .14s,border-color .14s}
#overlay .wardrobe-who button:hover{background:#22386f;color:var(--mobile-ink);border-bottom-color:var(--mobile-ink)}
#overlay .wardrobe-who button.on{background:#243a78;border-bottom-color:var(--course-gold)}
#overlay .wardrobe-who button:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
.wardrobe-who img{display:block;flex:none;width:40px;height:50px;object-fit:cover;background:radial-gradient(circle at 50% 46%,#3b8fd0 0,#1d4f9c 45%,#0f2358 100%)}
.wardrobe-who .locked img{filter:saturate(.6) brightness(.86)}
.wardrobe-who span{display:flex;flex-direction:column;gap:2px;min-width:0}
.wardrobe-who b{font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:16px;line-height:1.05}
.wardrobe-who em{font-style:normal;font-size:11.5px;line-height:1.1;color:color-mix(in srgb,var(--mobile-ink) 68%,transparent)}
.wardrobe-who em.worn{color:var(--mobile-accent)}
@media(max-width:820px){
 .wardrobe-who{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;touch-action:pan-x;padding-bottom:2px}
 #overlay .wardrobe-who button{flex:none;min-height:48px}
}

/* Treino livre and Partida rápida (public/course-board.js): the worlds and their holes
   as cards in the shop's own drawing. Every hole shows its plan seen from above, drawn
   in cells from the game's own terrain; every world carries its emblem and its colour. */
.course-board{--board-accent:var(--course-gold);--board-sea:#1d9bd6;--board-deep:#0d5fb8;display:grid;gap:12px;min-width:0}
.course-board .w-ilha{--board-accent:var(--course-island);--board-sea:#3fc9e6;--board-deep:#0d6fd0}
.course-board .w-vale{--board-accent:var(--course-valley);--board-sea:#5fd0e6;--board-deep:#1c86c9}
.course-board .w-celeste{--board-accent:var(--course-sky);--board-sea:#f3ecff;--board-deep:#9a86e0}
.board-emblem{display:block;flex:none;width:72px;height:72px;object-fit:contain}
.course-board canvas{display:block;image-rendering:pixelated}
/* Treino livre: on a wide screen the three worlds stand side by side. */
.course-board[data-mode=holes]{grid-template-columns:repeat(3,minmax(0,1fr))}
#overlay .board-tabs{display:none}
.board-world{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px;background:#16234f;border-top:4px solid var(--board-accent);animation:board-rise .34s cubic-bezier(.2,1.2,.4,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
.board-head{display:flex;align-items:center;gap:12px;min-width:0}
#overlay .board-head h3{margin:0;font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:26px;line-height:1.05;letter-spacing:0;text-transform:none;color:var(--board-accent)}
#overlay .board-head p{display:flex;flex-wrap:wrap;margin:6px 0 0;font-size:13px;line-height:1.35;color:color-mix(in srgb,var(--mobile-ink) 74%,transparent)}
.board-head p span+span::before{content:"·";margin:0 7px}
.board-head p .board-all{color:var(--course-gold)}
.board-holes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#overlay .board-hole{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;padding:8px 8px 10px;background:#1b2c5e;color:var(--mobile-ink);border:0;border-bottom:4px solid transparent;border-radius:0;clip-path:none;font:inherit;text-align:left;cursor:pointer;transform:none;transition:transform .14s,background .14s,border-color .14s;animation:board-pop .3s cubic-bezier(.2,1.3,.4,1) backwards;animation-delay:calc(140ms + var(--i,0)*35ms)}
#overlay .board-hole:hover,#overlay .board-hole:focus-visible{background:#22386f;color:var(--mobile-ink);border-bottom-color:var(--mobile-ink);transform:translateY(-3px)}
#overlay .board-hole.next{border-bottom-color:var(--course-gold)}
#overlay .board-hole:active,#overlay .board-pick:active{transform:translateY(1px)}
#overlay .board-hole:focus-visible,#overlay .board-pick:focus-visible,#overlay .board-tabs button:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
.board-map{position:relative;display:block;aspect-ratio:1/1.15;overflow:hidden;background:radial-gradient(circle at 50% 40%,var(--board-sea),var(--board-deep))}
.board-map canvas{position:absolute;left:6%;top:5%;width:88%;height:90%;object-fit:contain}
#overlay .board-hole>b{position:absolute;top:8px;left:8px;padding:3px 7px 2px;background:var(--mobile-panel);font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:22px;line-height:1;color:var(--course-gold);font-variant-numeric:tabular-nums}
.board-hole.done .board-map::after{content:"★";position:absolute;top:0;right:0;display:grid;place-items:center;width:24px;height:24px;background:var(--course-gold);color:var(--mobile-panel);font-size:14px;line-height:1}
.board-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.3em;font-family:"Lilita One","Fredoka",sans-serif;font-size:15px;line-height:1.15}
.board-facts{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:12.5px;line-height:1.2}
.board-facts small{font-family:"Lilita One","Fredoka",sans-serif;font-size:14px;color:var(--course-gold)}
.board-facts em{font-style:normal;color:color-mix(in srgb,var(--mobile-ink) 72%,transparent)}
.board-facts .board-next{color:var(--mobile-accent)}
/* Partida rápida: four rounds to choose from, one card each. */
.course-board[data-mode=quick]{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
#overlay .board-pick{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:14px 14px 16px;background:#16234f;color:var(--mobile-ink);border:0;border-top:4px solid var(--board-accent);border-radius:0;clip-path:none;font:inherit;text-align:left;cursor:pointer;transform:none;transition:transform .14s,background .14s;animation:board-rise .34s cubic-bezier(.2,1.2,.4,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
#overlay .board-pick:hover,#overlay .board-pick:focus-visible{background:#1b2c5e;color:var(--mobile-ink);transform:translateY(-3px)}
.board-pick .board-emblem{width:92px;height:92px}
.board-mystery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
.board-mystery i{display:grid;place-items:center;height:92px;background:#1b2c5e;border-bottom:4px solid var(--course-gold);font-style:normal;font-family:"Lilita One","Fredoka",sans-serif;font-size:46px;line-height:1;color:var(--course-gold)}
.board-title{font-family:"Lilita One","Fredoka",sans-serif;font-size:26px;line-height:1.05;color:var(--board-accent)}
.board-text{font-size:14px;line-height:1.3}
.board-note{font-size:12.5px;line-height:1.3;color:color-mix(in srgb,var(--mobile-ink) 72%,transparent)}
.board-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;width:100%}
.board-strip>span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;padding-top:5px;background:radial-gradient(circle at 50% 40%,var(--board-sea),var(--board-deep))}
.board-strip canvas{width:auto;height:54px;max-width:86%;object-fit:contain}
.board-strip b{align-self:stretch;padding:3px 0 2px;background:var(--mobile-panel);font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:12.5px;line-height:1;text-align:center;color:var(--course-gold)}
.board-go{align-self:stretch;margin-top:auto;padding:10px 12px;background:var(--mobile-accent);color:var(--mobile-panel);font-family:"Lilita One","Fredoka",sans-serif;font-size:18px;line-height:1.1;text-align:center;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:background .14s}
.board-pick:hover .board-go,.board-pick:focus-visible .board-go{background:var(--course-gold)}
@keyframes board-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes board-pop{from{opacity:0;transform:scale(.92)}}
@media(prefers-reduced-motion:reduce){
 .board-world,#overlay .board-hole,#overlay .board-pick{animation:none;transition:none}
}
/* Less width: one world at a time, chosen on the tabs, its six holes in a row. The
   tab already names the world, so the panel keeps only the numbers. */
@media(max-width:1179px){
 .course-board[data-mode=holes]{grid-template-columns:minmax(0,1fr);gap:0}
 #overlay .board-tabs{display:flex}
 #overlay .board-tabs button{gap:8px}
 #overlay .board-tabs img{width:28px;height:28px}
 .board-world:not(.on){display:none}
 .board-world{border-top:4px solid var(--course-gold)}
 .board-head>.board-emblem,#overlay .board-head h3{display:none}
 #overlay .board-head p{margin:0}
 .board-holes{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:899px){
 .course-board[data-mode=quick]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Phones and upright tablets, where the screen is a sheet under the live scene: two rows of three. */
@media(max-width:820px) and (min-height:521px){
 .board-holes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* The tablet has room for large plans. */
@media(min-width:561px) and (max-width:820px) and (min-height:521px){
 .board-map{aspect-ratio:1/.85}
 #overlay .board-hole{padding:10px 10px 12px;gap:8px}
 #overlay .board-hole>b{top:10px;left:10px;font-size:28px;padding:4px 9px 3px}
 .board-hole.done .board-map::after{width:30px;height:30px;font-size:17px}
 .board-name{font-size:19px;min-height:0}
 .board-facts{font-size:14px}
 .board-facts small{font-size:17px}
}
/* A phone lying down: the four rounds side by side, without the strip of plans. */
@media(max-height:520px) and (min-width:561px){
 .course-board[data-mode=quick]{grid-template-columns:repeat(4,minmax(0,1fr))}
 .board-pick .board-strip{display:none}
 .board-pick .board-emblem{width:56px;height:56px}
 .board-mystery i{height:56px;font-size:30px}
 .board-title{font-size:20px}
 #overlay .board-pick{padding:10px 10px 12px;gap:6px}
 #overlay .board-hole{padding:6px 6px 8px}
 .board-map{aspect-ratio:1/.8}
}
/* A phone: the three worlds on three tabs with their emblems, the holes three across;
   the rounds as a list. */
@media(max-width:560px){
 /* The balance of cookies and points says nothing about which hole to play: on a phone its row goes to the holes. */
 #overlay .mapsheet header.top .ppills{display:none}
 #overlay .board-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;overflow:visible}
 #overlay .board-tabs button{flex-direction:column;justify-content:flex-start;gap:4px;min-height:0;padding:7px 4px;clip-path:none;font-size:12.5px;line-height:1.1;white-space:normal;text-align:center}
 #overlay .board-tabs img{width:30px;height:30px}
 .board-world{padding:10px 8px}
 .board-holes{gap:6px}
 .board-map{aspect-ratio:1/1.05}
 #overlay .board-hole{padding:6px 6px 8px;gap:5px}
 #overlay .board-hole>b{top:6px;left:6px;font-size:18px;padding:3px 6px 2px}
 .board-name{font-size:13.5px}
 .board-facts{font-size:12px}
 .board-facts small{font-size:13px}
 .course-board[data-mode=quick]{grid-template-columns:minmax(0,1fr);gap:8px}
 #overlay .board-pick{display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:10px 12px;border-top:0;border-left:4px solid var(--board-accent)}
 .board-pick .board-emblem,.board-pick .board-mystery{grid-column:1;grid-row:1/span 3;width:56px;height:56px}
 .board-pick .board-mystery{grid-template-columns:minmax(0,1fr);gap:0}
 .board-mystery i{height:56px;font-size:34px}
 .board-mystery i+i{display:none}
 .board-pick .board-title,.board-pick .board-text,.board-pick .board-note{grid-column:2}
 .board-title{font-size:20px}
 .board-text{font-size:13px}
 .board-pick .board-strip{display:none}
 .board-pick .board-go{grid-column:3;grid-row:1/span 3;align-self:center;margin:0;padding:0;background:none;clip-path:none;font-size:0;color:var(--board-accent)}
 .board-pick .board-go::after{content:"›";font-size:34px;line-height:1}
 .board-pick:hover .board-go,.board-pick:focus-visible .board-go{background:none}
}

/* How long a bought ball still lasts (public/ball-validity.js), on the cards of the shop's ball tab. */
#overlay .it .ball-left{font-size:12px;line-height:1.2;color:color-mix(in srgb,var(--mobile-ink) 62%,transparent)}
#overlay .prev .ball-left{margin:0}

/* The locker (public/locker.js): what the player has, beside the live scene of the
   game. On a wide screen it is a column with the slanted edge of the home menu; on a
   phone, a sheet under the scene. Cards, faces and tabs are the shop's. */
#overlay.s-locker{padding:0;background-image:none!important;background:transparent}
#overlay .locker{--col:clamp(440px,46vw,640px);--cut:56px;position:absolute;inset:0;margin:0;pointer-events:none}
.locker-edge{position:absolute;top:0;bottom:0;right:10px;width:var(--col);background:var(--course-gold);clip-path:polygon(var(--cut) 0,calc(var(--cut) + 7px) 0,7px 100%,0 100%)}
.locker-col{position:absolute;top:0;bottom:0;right:0;width:var(--col);box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:18px 22px 20px calc(var(--cut) + 18px);background:var(--mobile-panel);color:var(--mobile-ink);clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:auto}
.locker.fresh .locker-col,.locker.fresh .locker-edge{animation:locker-in .45s cubic-bezier(.2,.9,.3,1) backwards}
.locker-top{display:flex;align-items:center;gap:14px}
#overlay .locker-top h1{margin:0;font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:34px;line-height:1;letter-spacing:0;text-transform:none;color:var(--mobile-ink)}
#overlay .locker-top .backb{flex:none;padding:8px 22px;background:#1b2c5e;color:var(--mobile-ink);border:0;border-radius:0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:16px;cursor:pointer;transform:none}
#overlay .locker-top .backb:hover{background:var(--course-gold);color:var(--mobile-panel)}
.locker-now{display:flex;flex-direction:column;gap:6px}
.locker-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#overlay .locker-facts button{display:flex;flex-direction:column;gap:3px;min-width:0;padding:8px 10px;background:#16234f;color:var(--mobile-ink);border:0;border-left:3px solid var(--mobile-accent);border-radius:0;clip-path:none;font:inherit;text-align:left;cursor:pointer;transform:none;transition:background .14s}
#overlay .locker-facts button:hover{background:#1b2c5e;color:var(--mobile-ink)}
.locker-facts small{font-size:11.5px;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--mobile-ink) 66%,transparent)}
.locker-facts b{font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:16px;line-height:1.15;overflow-wrap:anywhere}
#overlay .locker-now .gbx{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;box-sizing:border-box;width:100%;padding:8px 12px;background:#0f1a40}
#overlay .locker-now .gbx small{flex-basis:100%;font-size:12.5px;text-align:center;color:color-mix(in srgb,var(--mobile-ink) 70%,transparent)}
#overlay .locker-now .gbx em{font-style:normal;font-size:13.5px;color:color-mix(in srgb,var(--mobile-ink) 55%,transparent)}
#overlay .locker-tabs{flex:none;flex-wrap:wrap}
.locker-body{display:flex;flex-direction:column;gap:16px;min-width:0}
.locker-part{display:flex;flex-direction:column;gap:8px;min-width:0}
#overlay .locker-part h2{margin:0;font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:20px;line-height:1.1;letter-spacing:0;text-transform:none;color:var(--mobile-ink)}
.locker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
#overlay .locker-card{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:8px 6px 10px;background:#1b2c5e;color:var(--mobile-ink);border:0;border-bottom:4px solid transparent;border-radius:0;clip-path:none;font:inherit;text-align:center;cursor:pointer;transform:none;transition:background .14s,border-color .14s,transform .14s}
#overlay .locker-card:hover{background:#22386f;color:var(--mobile-ink);border-bottom-color:var(--mobile-ink);transform:translateY(-2px)}
#overlay .locker-card.on,#overlay .locker-card.on:hover{background:#243a78;border-bottom-color:var(--course-gold);transform:none;cursor:default}
#overlay .locker-card:active{transform:translateY(1px)}
#overlay .locker-card:focus-visible,#overlay .locker-facts button:focus-visible,#overlay .locker-more:focus-visible,#overlay .locker-top .backb:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
.locker-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;background:radial-gradient(circle at 50% 46%,#3b8fd0 0,#1d4f9c 45%,#0f2358 100%)}
.locker-card b{font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:16px;line-height:1.1}
.locker-card small{font-size:12px;line-height:1.2;color:#8ff0c0}
.locker-card small.none{color:color-mix(in srgb,var(--mobile-ink) 45%,transparent)}
.locker-state{font-family:"Lilita One","Fredoka",sans-serif;font-size:14px;line-height:1;color:color-mix(in srgb,var(--mobile-ink) 62%,transparent)}
.locker-card.on .locker-state{color:var(--mobile-accent)}
.locker-card.just{animation:board-pop .3s cubic-bezier(.2,1.3,.4,1)}
.locker-items{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.locker-items li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 14px 8px 10px;background:#1b2c5e}
.locker-items .legend-ico{flex:none;width:36px;height:36px}
.locker-items span{display:flex;flex-direction:column;gap:2px;min-width:0}
.locker-items b{font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:17px;line-height:1.1}
.locker-items small{font-size:12.5px;line-height:1.3;color:color-mix(in srgb,var(--mobile-ink) 72%,transparent)}
.locker-items em{font-style:normal;font-family:"Lilita One","Fredoka",sans-serif;font-size:26px;line-height:1;color:var(--course-gold);font-variant-numeric:tabular-nums}
.locker-note{margin:0;font-size:13px;line-height:1.3;color:color-mix(in srgb,var(--mobile-ink) 72%,transparent)}
#overlay .locker-more{align-self:flex-start;padding:4px 0;background:none;color:var(--mobile-accent);border:0;border-bottom:2px solid transparent;border-radius:0;clip-path:none;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transform:none}
#overlay .locker-more:hover{background:none;color:var(--mobile-ink);border-bottom-color:var(--course-gold)}
@keyframes locker-in{from{opacity:0;transform:translateX(60px)}}
@media(prefers-reduced-motion:reduce){
 .locker.fresh .locker-col,.locker.fresh .locker-edge,.locker-card.just{animation:none}
}
/* A phone lying down: a narrower column, everything a little smaller. */
@media(max-height:520px){
 #overlay .locker{--col:clamp(300px,54vw,470px);--cut:30px}
 .locker-col{gap:8px;padding:8px 12px 10px calc(var(--cut) + 10px)}
 #overlay .locker-top h1{font-size:24px}
 #overlay .locker-top .backb{padding:6px 16px;font-size:14px}
 #overlay .locker-tabs{flex-wrap:nowrap}
 #overlay .locker-tabs button{flex:1 1 auto;justify-content:center;min-width:0;padding:8px 6px;font-size:13.5px}
 .locker-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
}
/* Phones and upright tablets: a sheet under the live scene, like the hole lists. */
@media(max-width:820px) and (min-height:521px){
 #overlay.s-locker{align-items:flex-end}
 #overlay .locker{position:static;width:100%;height:70dvh;margin:auto 0 0;pointer-events:auto}
 .locker-edge{display:none}
 .locker-col{position:static;width:100%;height:100%;padding:12px 14px calc(14px + env(safe-area-inset-bottom));border-top:6px solid var(--course-gold);clip-path:none}
 .locker.fresh .locker-col{animation-name:board-rise}
 #overlay .locker-top h1{font-size:26px}
 #overlay .locker-top .backb{padding:8px 12px;clip-path:none;border-radius:4px;font-size:14px}
 #overlay .locker-tabs{flex-wrap:nowrap;overflow:visible}
 #overlay .locker-tabs button{flex:1 1 auto;justify-content:center;min-width:0;padding:10px 6px;font-size:14px}
}

/* The way in. The loading card is the studio's: the Depozza Labs mark on its own
   ink, with its coral bar (the mark is put there at packaging, tools/screens-patch.mjs).
   What it uncovers the first time is the welcome (public/welcome.js): the home
   menu's column with a name field and the sign-in, which is optional. */
#splash{background:#1c2233}
#splash img.sp-brand{display:block;width:min(62vw,340px);height:auto}
#splash .sp-sub{color:rgba(248,249,252,.62)}
#splash .sp-bar{background:#2c3550;margin-top:22px}
#splash .sp-bar i{background:#ff385c}
#splash .sp-load{color:rgba(248,249,252,.7)}

#overlay.s-welcome{padding:0;background-image:none!important;background:transparent}
#overlay .welcome{--col:clamp(360px,36vw,480px);--cut:70px;position:absolute;inset:0;margin:0;pointer-events:none}
.welcome-edge{position:absolute;top:0;bottom:0;right:10px;width:var(--col);background:var(--course-gold);clip-path:polygon(var(--cut) 0,calc(var(--cut) + 7px) 0,7px 100%,0 100%)}
.welcome-col{position:absolute;top:0;bottom:0;right:0;width:var(--col);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.4vh,22px);padding:clamp(16px,4vh,44px) 34px clamp(14px,3vh,30px) calc(var(--cut) + 26px);background:var(--mobile-panel);color:var(--mobile-ink);clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;pointer-events:auto}
.welcome.fresh .welcome-col,.welcome.fresh .welcome-edge{animation:locker-in .45s cubic-bezier(.2,.9,.3,1) backwards}
.welcome-logo{display:block;flex:none;width:min(100%,300px,34vh);height:auto;margin-left:-16px}
#overlay .welcome h1{margin:0;font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:clamp(28px,4.6vh,40px);line-height:1;letter-spacing:0;text-transform:none;color:var(--mobile-ink)}
.welcome-lang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#overlay .welcome-lang button{min-width:0;padding:9px 4px;background:#16234f;color:var(--mobile-ink);border:0;border-bottom:3px solid transparent;border-radius:0;clip-path:none;font:inherit;font-size:14px;font-weight:600;line-height:1.1;cursor:pointer;transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#overlay .welcome-lang button:hover{background:#1b2c5e;color:var(--mobile-ink)}
#overlay .welcome-lang button.on{background:#243a78;border-bottom-color:var(--course-gold);cursor:default}
#overlay .welcome-lang button:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
.welcome-field{display:flex;flex-direction:column;gap:7px}
.welcome-field span{font-size:16px;font-weight:600;line-height:1.2}
#overlay .welcome-field input{box-sizing:border-box;width:100%;height:52px;padding:0 14px;background:#16234f;color:var(--mobile-ink);border:0;border-bottom:4px solid var(--mobile-accent);border-radius:0;font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:24px;text-align:left;user-select:text;-webkit-user-select:text}
#overlay .welcome-field input::placeholder{color:color-mix(in srgb,var(--mobile-ink) 38%,transparent)}
#overlay .welcome-field input:focus-visible{outline:2px solid var(--mobile-focus);outline-offset:2px}
.welcome-field small{font-size:13px;line-height:1.3;color:color-mix(in srgb,var(--mobile-ink) 70%,transparent)}
#overlay .welcome-go{display:block;flex:none;margin:0 0 0 -10px;padding:13px 26px 14px 24px;background:var(--mobile-accent);color:#0a1230;border:0;border-radius:0;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);font:inherit;text-align:left;cursor:pointer;transform:none;transition:background .12s,transform .12s}
.welcome-go b{display:block;font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:clamp(32px,5.2vh,48px);line-height:1}
.welcome-go small{display:block;margin-top:3px;font-size:13.5px;font-weight:600}
#overlay .welcome-go:hover,#overlay .welcome-go:focus-visible{background:var(--course-gold);color:#0a1230;transform:translateX(-6px);outline:0}
.welcome-account{margin:0;font-size:14px;line-height:1.4;color:color-mix(in srgb,var(--mobile-ink) 72%,transparent)}
.welcome-account a{color:var(--mobile-ink);font-weight:600;text-decoration:none;border-bottom:2px solid color-mix(in srgb,var(--mobile-ink) 30%,transparent)}
.welcome-account a:hover,.welcome-account a:focus-visible{border-bottom-color:var(--course-gold);outline:0}
@media(prefers-reduced-motion:reduce){
 .welcome.fresh .welcome-col,.welcome.fresh .welcome-edge{animation:none}
}
/* A phone lying down: a narrower column, the logo and the heading give way to the form. */
@media(max-height:520px){
 #overlay .welcome{--col:clamp(300px,50vw,440px);--cut:30px}
 .welcome-col{gap:8px;padding:10px 16px 10px calc(var(--cut) + 12px)}
 .welcome-logo,#overlay .welcome h1{display:none}
 #overlay .welcome-lang button{padding:6px 4px;font-size:13px}
 #overlay .welcome-field input{height:44px;font-size:21px}
 #overlay .welcome-go{padding:9px 22px 10px 20px}
 .welcome-go b{font-size:28px}
}
/* Phones and upright tablets: a sheet under the live scene, like the locker. */
@media(max-width:820px) and (min-height:521px){
 #overlay.s-welcome{align-items:flex-end}
 #overlay .welcome{position:static;width:100%;height:70dvh;margin:auto 0 0;pointer-events:auto}
 .welcome-edge{display:none}
 .welcome-col{position:static;width:100%;height:100%;justify-content:flex-start;gap:14px;padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:6px solid var(--course-gold);clip-path:none}
 .welcome.fresh .welcome-col{animation-name:board-rise}
 .welcome-logo{width:min(52%,230px,22dvh);margin:0 auto}
 #overlay .welcome h1{text-align:center;font-size:28px}
 @media(max-height:720px){.welcome-logo{width:min(40%,16dvh)}#overlay .welcome h1{display:none}}
 #overlay .welcome-go{margin-left:0;text-align:center}
 .welcome-account{text-align:center}
}

/* ---------- Home menu on an upright phone: a poster of the game ----------
   The live scene takes the top of the screen with the logo over its sky. The column below begins on a slanted edge
   with the yellow fillet of the big-screen menu, "Jogar" is the one loud thing on it, and every other line is a card
   with something of the game inside (public/mobile-menu.js puts the pictures and gives the scene its height in
   --menu-scene). The cards share the height the phone has, and the player's bar carries the way to the next level. */
@media(max-width:820px) and (min-height:521px){
 #overlay.s-menu{clip-path:none}
 #overlay.s-menu .ts{--scene:var(--menu-scene,42dvh);--tilt:20px;padding-top:calc(var(--scene) - var(--tilt));background:none}
 #overlay.s-menu .mobile-menu-header{height:auto;background:none;align-items:flex-start;padding:calc(10px + env(safe-area-inset-top)) 12px 0 14px;pointer-events:none}
 #overlay.s-menu .mobile-menu-header>*{pointer-events:auto}
 #overlay.s-menu .mobile-menu-header .tlogo{width:clamp(118px,37vw,168px);height:auto;filter:drop-shadow(0 4px 0 rgba(10,18,48,.32));animation:menu-logo 5s ease-in-out infinite;transform-origin:50% 60%}
 #overlay.s-menu .mobile-menu-header .game-account-link{min-height:36px;max-width:170px;padding:0 15px;background:rgba(14,26,60,.88);color:var(--mobile-ink);font-size:12.5px;font-weight:600;clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}

 #overlay.s-menu .ts .tcol{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:calc(var(--tilt) + 13px) 14px 6px;background:var(--mobile-panel);clip-path:polygon(0 var(--tilt),100% 0,100% 100%,0 100%);overflow:visible}
 #overlay.s-menu .ts .tcol::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--tilt) + 5px);background:var(--mobile-focus);clip-path:polygon(0 var(--tilt),100% 0,100% 5px,0 calc(var(--tilt) + 5px));pointer-events:none}
 #overlay.s-menu .ts .tmain{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}

 /* "Jogar": turquoise plate, yellow end with the arrow, and a light that crosses it now and then */
 #overlay.s-menu .ts .tgo{position:relative;flex:none;min-height:68px;padding:10px 78px 10px 20px;overflow:hidden;background-color:var(--mobile-accent);background-image:linear-gradient(105deg,transparent 0 42%,rgba(255,255,255,.38) 50%,transparent 58% 100%);background-size:260% 100%;background-repeat:no-repeat;background-position:130% 0;animation:menu-shine 4.8s ease-in-out 1.6s infinite}
 #overlay.s-menu .ts .tgo b{font-size:30px}
 #overlay.s-menu .ts .tgo small{font-size:12.5px;margin-top:2px}
 #overlay.s-menu .ts .tgo::before{content:"";position:absolute;right:0;top:0;bottom:0;width:72px;background:var(--mobile-focus);clip-path:polygon(13px 0,100% 0,100% 100%,0 100%)}
 #overlay.s-menu .ts .tgo::after{content:"";position:absolute;right:27px;top:50%;border-left:20px solid #0a1230;border-top:13px solid transparent;border-bottom:13px solid transparent;transform:translateY(-50%);animation:menu-nudge 1.8s ease-in-out infinite}
 #overlay.s-menu .ts .tgo:active{transform:scale(.98)}

 /* the cards: two wide ones above, three below */
 #overlay.s-menu .ts .tnav,#overlay.s-menu .ts .tnav:has(>button:nth-child(5)){flex:1;min-height:0;max-height:308px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(86px,1.15fr) minmax(76px,1fr);gap:10px}
 #overlay.s-menu .ts .tnav button,#overlay.s-menu .ts .tnav button:last-child,#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button,#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button:nth-child(n+4){position:relative;grid-column:span 2;min-height:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;padding:10px 8px 8px 11px;overflow:hidden;border:0;border-left:4px solid var(--mobile-accent);background:linear-gradient(112deg,transparent 0 56%,color-mix(in srgb,var(--mobile-accent) 13%,transparent) 56% 100%) var(--mobile-menu-button);clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%);transition:transform .08s,background-color .12s}
 #overlay.s-menu .ts .tnav button[data-arg="holes"],#overlay.s-menu .ts .tnav button[data-arg="quick"],#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button[data-arg="holes"],#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button[data-arg="quick"]{grid-column:span 3}
 #overlay.s-menu .ts .tnav button:active{transform:scale(.97)}
 #overlay.s-menu .ts .tnav button>b,#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button>b{position:relative;z-index:1;font-size:17px;line-height:1.1;overflow-wrap:break-word;hyphens:auto;max-width:100%}
 #overlay.s-menu .ts .tnav button[data-arg="rank"],#overlay.s-menu .ts .tnav button[data-arg="locker"],#overlay.s-menu .ts .tnav button[data-arg="shop"],#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button[data-arg="rank"],#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button[data-arg="locker"],#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button[data-arg="shop"]{padding-left:9px;padding-right:4px}
 #overlay.s-menu .ts .tnav button[data-arg="rank"]>b,#overlay.s-menu .ts .tnav button[data-arg="locker"]>b,#overlay.s-menu .ts .tnav button[data-arg="shop"]>b,#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button[data-arg="rank"]>b,#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button[data-arg="locker"]>b,#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button[data-arg="shop"]>b{font-size:clamp(12.5px,3.75vw,16px)}
 #overlay.s-menu .ts .tnav button>small{position:relative;z-index:1;display:none;max-width:64%;font-size:11.5px;line-height:1.25;color:color-mix(in srgb,var(--mobile-ink) 74%,transparent)}
 #overlay.s-menu .ts .tnav button[data-arg="holes"]>small,#overlay.s-menu .ts .tnav button[data-arg="quick"]>small{display:block}

 #overlay.s-menu .ts .tnav button .mart{position:absolute;right:5px;bottom:5px;display:flex;align-items:flex-end;font-style:normal;pointer-events:none}
 #overlay.s-menu .ts .tnav button .mart img{display:block}
 #overlay.s-menu .ts .tnav button .mart-holes img{width:44px;height:44px;margin-left:-16px;filter:drop-shadow(0 2px 0 rgba(10,18,48,.45))}
 #overlay.s-menu .ts .tnav button .mart-quick{right:11px;bottom:5px;gap:5px}
 #overlay.s-menu .ts .tnav button .mart-quick b{font:400 42px/1 "Lilita One",sans-serif;color:var(--mobile-focus);text-shadow:0 3px 0 #0a1230,2px 0 0 #0a1230,-2px 0 0 #0a1230,0 -2px 0 #0a1230,2px 3px 0 #0a1230,-2px 3px 0 #0a1230}
 #overlay.s-menu .ts .tnav button .mart-quick b+b{color:var(--mobile-accent);transform:translateY(-7px) rotate(7deg)}
 #overlay.s-menu .ts .tnav button .mart-rank{right:13px;bottom:0;gap:3px}
 #overlay.s-menu .ts .tnav button .mart-rank i{display:block;width:17px;border:2px solid #0a1230;border-bottom:0;border-radius:4px 4px 0 0}
 #overlay.s-menu .ts .tnav button .mart-rank i:nth-child(1){height:27px;background:var(--mobile-accent)}
 #overlay.s-menu .ts .tnav button .mart-rank i:nth-child(2){height:41px;background:var(--mobile-focus)}
 #overlay.s-menu .ts .tnav button .mart-rank i:nth-child(3){height:18px;background:var(--mobile-ink)}
 #overlay.s-menu .ts .tnav button .mart-locker,#overlay.s-menu .ts .tnav button .mart-shop{top:30px;right:0;bottom:0}
 #overlay.s-menu .ts .tnav button .mart-locker img,#overlay.s-menu .ts .tnav button .mart-shop img{height:100%;width:auto;max-height:92px;aspect-ratio:1;object-fit:contain;object-position:50% 100%}

 #overlay.s-menu .ts .tmore{flex:none}
 #overlay.s-menu .ts .tmore button{min-height:40px}

 /* the player's bar: the way to the next level runs along its top */
 #overlay.s-menu .ts .tplayer{position:relative;margin:0;border-top:0;min-height:62px;padding-top:13px}
 #overlay.s-menu .ts .tplayer .txp{display:block;position:absolute;left:0;right:0;top:0;min-width:0;height:5px}
 #overlay.s-menu .ts .tplayer .txp>span{height:5px;background:color-mix(in srgb,var(--mobile-ink) 16%,transparent)}
 #overlay.s-menu .ts .tplayer .txp i{background:var(--mobile-focus)}
 #overlay.s-menu .ts .tplayer .txp small{display:none}

 /* arriving at the menu, the plate, the cards and the links walk in one after the other */
 #overlay.s-menu.menu-in .ts .tgo{animation:menu-card .36s cubic-bezier(.2,.8,.2,1) both,menu-shine 4.8s ease-in-out 1.6s infinite}
 #overlay.s-menu.menu-in .ts .tnav button,#overlay.s-menu.menu-in .ts .tmore{animation:menu-card .36s cubic-bezier(.2,.8,.2,1) both}
 #overlay.s-menu.menu-in .ts .tnav button:nth-child(1){animation-delay:.06s}
 #overlay.s-menu.menu-in .ts .tnav button:nth-child(2){animation-delay:.1s}
 #overlay.s-menu.menu-in .ts .tnav button:nth-child(3){animation-delay:.14s}
 #overlay.s-menu.menu-in .ts .tnav button:nth-child(4){animation-delay:.18s}
 #overlay.s-menu.menu-in .ts .tnav button:nth-child(5){animation-delay:.22s}
 #overlay.s-menu.menu-in .ts .tmore{animation-delay:.27s}
}
@keyframes menu-card{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes menu-logo{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-4px) rotate(1.2deg)}}
@keyframes menu-shine{0%,72%{background-position:130% 0}100%{background-position:-70% 0}}
@keyframes menu-nudge{0%,100%{transform:translate(0,-50%)}50%{transform:translate(4px,-50%)}}
/* A short phone: the same poster with less air, and the cards without their second line. */
@media(max-width:820px) and (min-height:521px) and (max-height:700px){
 #overlay.s-menu .ts{--tilt:16px}
 #overlay.s-menu .mobile-menu-header .tlogo{width:clamp(96px,30vw,124px)}
 #overlay.s-menu .ts .tcol{gap:8px;padding:calc(var(--tilt) + 9px) 14px 4px}
 #overlay.s-menu .ts .tmain{gap:8px}
 #overlay.s-menu .ts .tgo{min-height:54px;padding:6px 74px 6px 18px}
 #overlay.s-menu .ts .tgo b{font-size:25px}
 #overlay.s-menu .ts .tnav,#overlay.s-menu .ts .tnav:has(>button:nth-child(5)){grid-template-rows:minmax(58px,1fr) minmax(54px,1fr);gap:8px}
 #overlay.s-menu .ts .tnav button,#overlay.s-menu .ts .tnav button:last-child,#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button,#overlay.s-menu .ts .tnav:has(>button:nth-child(5)) button:nth-child(n+4){min-height:0;padding:8px 6px 6px 10px}
 #overlay.s-menu .ts .tnav button .mart-holes img{width:34px;height:34px;margin-left:-13px}
 #overlay.s-menu .ts .tnav button .mart-quick b{font-size:32px}
 #overlay.s-menu .ts .tnav button .mart-rank i:nth-child(1){height:20px}
 #overlay.s-menu .ts .tnav button .mart-rank i:nth-child(2){height:30px}
 #overlay.s-menu .ts .tnav button .mart-rank i:nth-child(3){height:13px}
 #overlay.s-menu .ts .tnav button .mart-locker,#overlay.s-menu .ts .tnav button .mart-shop{top:24px}
 #overlay.s-menu .ts .tmore button{min-height:36px}
 #overlay.s-menu .ts .tplayer{min-height:54px;padding-top:11px}
}
@media(max-width:820px) and (min-height:521px) and (max-height:610px){
 #overlay.s-menu .ts .tnav button[data-arg="holes"]>small,#overlay.s-menu .ts .tnav button[data-arg="quick"]>small{display:none}
}
@media(prefers-reduced-motion:reduce){
 #overlay.s-menu .mobile-menu-header .tlogo,#overlay.s-menu .ts .tgo,#overlay.s-menu .ts .tgo::after,#overlay.s-menu.menu-in .ts .tgo,#overlay.s-menu.menu-in .ts .tnav button,#overlay.s-menu.menu-in .ts .tmore{animation:none}
}

/* The stores where the game is (public/welcome.js), at the foot of the welcome column on the
   website: one plate per store, mark over name so three fit in the narrowest column. A store
   with no address yet reads "Em breve". Never shown inside the store apps. */
.door-stores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:none}
.door-store{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-sizing:border-box;min-width:0;padding:8px 4px 6px;background:#16234f;color:var(--mobile-ink);border-bottom:3px solid var(--course-gold);text-decoration:none;text-align:center;transition:background .12s,transform .12s}
.door-store svg{display:block;flex:none;width:20px;height:20px;fill:currentColor}
.door-store b{font-family:"Lilita One","Fredoka",sans-serif;font-weight:400;font-size:clamp(12px,1.05vw + 8px,15px);line-height:1.1;white-space:nowrap}
.door-store small{font-size:11px;font-weight:700;line-height:1.1;color:var(--course-gold);white-space:nowrap}
.door-store.soon{border-bottom-color:color-mix(in srgb,var(--course-gold) 34%,var(--mobile-panel))}
.door-store.soon svg,.door-store.soon b{opacity:.8}
a.door-store:hover,a.door-store:focus-visible{background:#1b2c5e;transform:translateY(-2px);outline:0}
/* A phone lying down has no room under the form. */
@media(max-height:520px){.door-stores{display:none}}
/* An upright phone: the sheet has to hold the stores too, so the heading gives way and the gaps close. */
@media(max-width:820px) and (min-height:521px){
 .welcome-col{gap:10px}
 #overlay .welcome h1{display:none}
 .welcome-logo{width:min(40%,180px,15dvh)}
 .welcome-field small{display:none}
 .welcome-account{font-size:13px;line-height:1.3}
 #overlay .welcome-go{padding-top:9px;padding-bottom:10px}
}
@media(max-width:820px) and (min-height:521px) and (max-height:700px){
 .door-store{flex-direction:row;gap:5px;padding:7px 3px 6px}
 .door-store svg{width:15px;height:15px}
 .door-store small{display:none}
}