/* TR-GAME-001 Trotley's Hoof Band. The colors are the brand tokens of trotley.com and tints of them. */
:root{
  --sky:#78D2E3; --sun:#F7C94B; --brown:#A95C2D; --deep:#70402A; --green:#83C95A; --red:#E94A3D; --ink:#252525; --cream:#FFF6E2; --white:#fff;
  --dirt:#E3B273; --dirt-d:#C98F52; --green-d:#6FB548;
  --display:'Fredoka',ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;
  --u:2.8px;            /* 1% of the stage height, set by the program */
  --beat:600ms;         /* one beat of the music, set by the program */
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url('fonts/fredoka-600.woff2') format('woff2')}
@font-face{font-family:'Fredoka';font-weight:700;font-display:swap;src:url('fonts/fredoka-700.woff2') format('woff2')}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--sky);overflow:hidden;overscroll-behavior:none}
body{font-family:var(--display);color:var(--deep);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
img,svg{display:block}
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.game img{max-width:none}   /* a page around the game may limit pictures to their box; the figures stand in boxes with no width */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px}

.game{position:fixed;inset:0;-webkit-touch-callout:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:100%;background:var(--sky);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation}

/* sky */
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sun{position:absolute;left:5%;top:calc(var(--sat) + 62px);width:clamp(56px,15vmin,120px);height:auto}
.rays{transform-origin:60px 60px;animation:spin 40s linear infinite}
.cloud{position:absolute;width:clamp(90px,26vmin,220px);height:auto;opacity:.95;animation:drift 70s linear infinite}
.c1{top:calc(var(--sat) + 70px);left:38%}
.c2{top:calc(var(--sat) + 132px);left:74%;width:clamp(64px,18vmin,150px);animation-duration:95s;animation-delay:-30s}
.c3{top:calc(var(--sat) + 118px);left:-6%;width:clamp(54px,14vmin,120px);animation-duration:120s;animation-delay:-70s;opacity:.8}
@keyframes drift{from{transform:translateX(-18vw)}to{transform:translateX(34vw)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* top bar */
/* the bar lies above every screen, the end card included, so that the sound button can always be tapped; its empty middle lets touches through */
.bar{position:relative;z-index:10;pointer-events:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(var(--sat) + 8px) 10px 4px}
.rb{pointer-events:auto;flex:none;width:46px;height:46px;border-radius:50%;background:var(--cream);border:3px solid var(--deep);box-shadow:0 4px 0 var(--deep);display:flex;align-items:center;justify-content:center;transition:transform .08s,box-shadow .08s}
.rb:active{transform:translateY(4px);box-shadow:0 0 0 var(--deep)}
.rb svg{width:30px;height:30px}
.snd{margin-left:auto}
.snd[aria-pressed="true"] .snd-off,.snd[aria-pressed="false"] .snd-on{display:none}
.snd.asleep{animation:sndwake .7s ease-in-out infinite alternate}
@keyframes sndwake{to{background:var(--sun);transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.snd.asleep{animation:none;background:var(--sun)}}
.shoes{flex:1;min-width:0;margin:0;padding:0;list-style:none;display:flex;justify-content:center;gap:clamp(2px,1vw,8px)}
.shoes li{width:clamp(20px,7.2vw,34px);aspect-ratio:1;flex:0 1 auto}
.shoes svg{width:100%;height:100%;overflow:visible}
.shoes .sh{fill:rgba(255,246,226,.5);stroke:rgba(112,64,42,.45);stroke-width:3;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.shoes .nail{fill:rgba(112,64,42,.3)}
.shoes .ok .sh{fill:var(--cream);stroke:var(--deep)}
.shoes .gold .sh{fill:var(--sun);stroke:var(--deep)}
.shoes .ok .nail,.shoes .gold .nail{fill:var(--deep)}
.shoes .got{animation:shoe .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes shoe{0%{transform:scale(.2) rotate(-40deg)}60%{transform:scale(1.35) rotate(8deg)}100%{transform:none}}
[data-screen="start"] .shoes{visibility:hidden}

/* stage */
.stage{position:relative;min-height:0;z-index:1}
.hills{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--u) * 60)}
.stage-in{position:absolute;bottom:0;left:50%;height:calc(var(--u) * 100);width:min(100%,calc(var(--u) * 150));transform:translateX(-50%)}
.fl{position:absolute;width:calc(var(--u) * 4.200);height:calc(var(--u) * 4.200);margin-left:calc(var(--u) * -2.100);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='5' r='4.500'/%3E%3Ccircle cx='18.700' cy='9.800' r='4.500'/%3E%3Ccircle cx='16.200' cy='17.700' r='4.500'/%3E%3Ccircle cx='7.800' cy='17.700' r='4.500'/%3E%3Ccircle cx='5.300' cy='9.800' r='4.500'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='4' fill='%23F7C94B'/%3E%3C/svg%3E") center/contain no-repeat}
.fl-y{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23F7C94B'%3E%3Ccircle cx='12' cy='5' r='4.500'/%3E%3Ccircle cx='18.700' cy='9.800' r='4.500'/%3E%3Ccircle cx='16.200' cy='17.700' r='4.500'/%3E%3Ccircle cx='7.800' cy='17.700' r='4.500'/%3E%3Ccircle cx='5.300' cy='9.800' r='4.500'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='4' fill='%23FFF6E2'/%3E%3C/svg%3E")}
.fence{position:absolute;left:47%;width:56%;bottom:calc(var(--u) * 28);height:calc(var(--u) * 15)}
.aud{position:absolute;left:47%;width:53%;bottom:calc(var(--u) * 32.500);height:calc(var(--u) * 34)}
.aud button{position:absolute;bottom:0;height:calc(var(--u) * 30);transform:translateX(-50%);opacity:0;pointer-events:none}
.aud img{height:100%;width:auto;transform-origin:50% 100%;pointer-events:none}
.aud button.in{opacity:1;pointer-events:auto;animation:land .6s cubic-bezier(.3,1.5,.5,1) both}
.aud .a-cat{height:calc(var(--u) * 26)}
.aud .a-duck{height:calc(var(--u) * 31)}
@keyframes land{0%{transform:translateX(-50%) translateY(-140%) scaleY(1.1);opacity:0}55%{transform:translateX(-50%) translateY(0) scaleY(.82);opacity:1}100%{transform:translateX(-50%)}}
[data-band="on"] .aud .in img{animation:bob var(--beat) ease-in-out infinite alternate}
.aud .in:nth-child(2n) img{animation-delay:calc(var(--beat) * -.5)}
@keyframes bob{from{transform:scaleY(1) rotate(-2.500deg)}to{transform:scaleY(.94) rotate(2.500deg)}}

.ground{position:absolute;left:0;bottom:calc(var(--u) * -3);width:calc(var(--u) * 46);height:calc(var(--u) * 11);margin-left:calc(var(--u) * -23);border-radius:50%;background:rgba(112,64,42,.22);transition:background-color .12s}
.ground[data-g]{border:calc(var(--u) * .9) solid var(--deep);margin-bottom:calc(var(--u) * -1)}
.ground[data-g="bridge"]{background:repeating-linear-gradient(90deg,#A95C2D 0 12%,#70402A 12% 13.500%,#C47A45 13.500% 25.500%,#70402A 25.500% 27%)}
.ground[data-g="gravel"]{background:radial-gradient(circle at 30% 40%,#E6DFD3 0 9%,transparent 10%),radial-gradient(circle at 62% 30%,#B3A998 0 8%,transparent 9%),radial-gradient(circle at 76% 62%,#E6DFD3 0 10%,transparent 11%),radial-gradient(circle at 44% 70%,#B3A998 0 9%,transparent 10%),radial-gradient(circle at 16% 62%,#B3A998 0 7%,transparent 8%),#CFC6B8}
.ground[data-g="hay"]{background:repeating-linear-gradient(72deg,#F7C94B 0 9%,#D9A227 9% 11%,#FBE08E 11% 19%,#D9A227 19% 21%)}
.ground[data-g="puddle"]{background:radial-gradient(ellipse at 50% 50%,#fff 0 8%,#78D2E3 9% 30%,#fff 31% 35%,#78D2E3 36% 100%)}

.trot{position:absolute;left:26%;bottom:calc(var(--u) * 8.500);height:calc(var(--u) * 63);width:0;z-index:2}
.trot-bob,.trot-hop{position:absolute;left:0;bottom:0;height:100%;width:0;transform-origin:50% 100%}
.trot-hop img{position:absolute;bottom:0;left:0;height:100%;width:auto;transform:translateX(-50%);visibility:hidden}
.trot[data-pose="default"] .p-default,.trot[data-pose="curious"] .p-curious,.trot[data-pose="excited"] .p-excited,.trot[data-pose="oh"] .p-oh,.trot[data-pose="trot"] .p-trot{visibility:visible}
.trot-hop .p-excited{transform:translateX(-46%)}
.trot-hop .p-trot{transform:translateX(-50%)}
[data-phase="idle"] .trot-bob,[data-phase="listen"] .trot-bob,[data-phase="free"] .trot-bob{animation:breathe calc(var(--beat) * 2) ease-in-out infinite alternate}
@keyframes breathe{from{transform:scaleY(1)}to{transform:scaleY(1.025) scaleX(.99)}}
.trot.run .trot-bob{animation:run calc(var(--beat) * .5) ease-in-out infinite alternate}
@keyframes run{from{transform:translateY(0) rotate(-2.500deg)}to{transform:translateY(calc(var(--u) * -3.500)) rotate(2.500deg)}}

.words{position:absolute;inset:0;pointer-events:none;z-index:3}
.word{position:absolute;left:0;top:0;font-weight:700;font-size:calc(var(--u) * 15);line-height:1;color:var(--red);-webkit-text-stroke:calc(var(--u) * 2.600) var(--cream);paint-order:stroke fill;text-shadow:0 calc(var(--u) * .9) 0 var(--deep);white-space:nowrap;transform:translate(-50%,-50%);will-change:transform,opacity}
.word.small{font-size:calc(var(--u) * 9);color:var(--deep)}

/* the trail: who plays now, and the notes of the song as hoofprints */
.trail{position:relative;z-index:4;display:flex;align-items:center;gap:10px;min-height:54px;padding:6px 12px;background:var(--dirt);border-block:4px solid var(--deep)}
.ribbon{flex:none;margin:0;font-weight:600;font-size:clamp(16px,4.600vw,22px);line-height:1.15;color:var(--white);background:var(--red);padding:5px 24px 6px;clip-path:polygon(0 0,100% 0,calc(100% - 11px) 50%,100% 100%,0 100%,11px 50%);white-space:nowrap}
.ribbon:empty{visibility:hidden}
.ribbon.pop{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:none}}
.prints{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:clamp(2px,1.200vw,8px);height:40px}
.prints i{flex:0 1 26px;min-width:0;aspect-ratio:1;max-height:28px;border-radius:50%;background:rgba(112,64,42,.2);transition:transform .15s}
.prints i:nth-child(odd){transform:translateY(-3px)}
.prints i:nth-child(even){transform:translateY(3px)}
.prints.score{gap:clamp(4px,1.400vw,9px)}
.prints.score i{position:relative;transform:none;flex-basis:38px;max-height:38px;transition:border-radius .15s}
.prints.score i svg{position:absolute;inset:0;width:100%;height:100%;border-radius:9px;opacity:0}
.prints.score i.on{border-radius:9px;background:var(--dirt);box-shadow:0 0 0 2.500px var(--deep);animation:stamp .3s cubic-bezier(.3,1.6,.5,1)}
.prints.score i.on svg{opacity:1}
.prints.score i.on::before{display:none}
.prints.score i.next{box-shadow:0 0 0 2.500px var(--deep),0 0 0 6px var(--sun);animation:nextb .5s ease-in-out infinite alternate;z-index:1}
.prints.score i.next:not(.on){border-radius:8px;background:rgba(255,246,226,.75)}
.prints.score i.done::after{content:"";position:absolute;inset:14%;background:var(--cream);-webkit-mask:var(--hoof) center/contain no-repeat;mask:var(--hoof) center/contain no-repeat;filter:drop-shadow(0 0 1.500px var(--deep)) drop-shadow(0 0 1.500px var(--deep));animation:stamp .25s cubic-bezier(.3,1.6,.5,1)}
@keyframes nextb{from{transform:translateY(0) scale(1)}to{transform:translateY(-3px) scale(1.12)}}
.prints i.on{background:none;animation:stamp .3s cubic-bezier(.3,1.6,.5,1)}
.prints i.on::before{content:"";display:block;width:100%;height:100%;background:var(--deep);-webkit-mask:var(--hoof) center/contain no-repeat;mask:var(--hoof) center/contain no-repeat}
.prints i.on[data-p="bridge"]::before{background:#8A4B24}
.prints i.on[data-p="gravel"]::before{background:#6E655A}
.prints i.on[data-p="hay"]::before{background:#B5820F}
.prints i.on[data-p="puddle"]::before{background:#1E8FB3}
@keyframes stamp{0%{scale:1.9;opacity:0}100%{scale:1;opacity:1}}
.game{--hoof:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 4C10 4 5 12 6 22c.6 6 3 11 6 13 2 1 4-.5 3.600-3C15 28 15 24 20 24s5 4 4.400 8c-.4 2.500 1.600 4 3.600 3 3-2 5.400-7 6-13 1-10-4-18-14-18z'/%3E%3C/svg%3E")}

/* the four grounds */
.pads{position:relative;z-index:4;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(10px,3vw,18px);padding:clamp(12px,3.400vw,20px) clamp(12px,3.400vw,20px) calc(var(--sab) + clamp(18px,4vw,26px));height:clamp(232px,45vh,460px);height:clamp(232px,45dvh,460px);width:100%;max-width:680px;justify-self:center;background:var(--green)}
.game::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(232px,45vh,460px);height:clamp(232px,45dvh,460px);background:var(--green);z-index:0}
.pad{position:relative;border-radius:clamp(18px,6vw,30px);border:4px solid var(--deep);box-shadow:0 8px 0 var(--deep);background:var(--dirt);overflow:hidden;min-width:0;min-height:0;transition:transform .07s,box-shadow .07s,filter .25s;touch-action:none;isolation:isolate}
.pad svg{position:absolute;inset:0;width:100%;height:100%}
.pad .face{transition:opacity .25s}
.pad.locked .face{opacity:0}
.pad .dirtface{opacity:0;transition:opacity .25s}
.pad.locked .dirtface{opacity:1}
.pad b{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-weight:700;font-size:clamp(19px,6vw,34px);line-height:1;color:var(--cream);-webkit-text-stroke:7px var(--deep);paint-order:stroke fill;letter-spacing:.01em;pointer-events:none;transition:opacity .25s}
.pad.locked b{opacity:0}
.pad.down{transform:translateY(7px);box-shadow:0 1px 0 var(--deep)}
.pad.lit{filter:brightness(1.12) saturate(1.15);z-index:2}
.pad.lit::after,.pad.hint::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:7px solid var(--sun);box-shadow:0 0 0 4px var(--deep) inset;pointer-events:none}
.pad.hint{animation:hint .7s ease-in-out infinite alternate;z-index:2}
@keyframes hint{from{transform:scale(1)}to{transform:scale(1.045)}}
.pad.hint.down{animation:none}
.pad.new{animation:reveal .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes reveal{0%{transform:scale(.7) rotate(-5deg)}60%{transform:scale(1.08) rotate(2deg)}100%{transform:none}}
[data-phase="demo"] .pad:not(.lit),[data-phase="play"] .pad:not(.lit){filter:saturate(.6) brightness(.9);transform:scale(.965)}
[data-phase="demo"] .pad.lit,[data-phase="play"] .pad.lit{transform:scale(1.03)}
.pads.wake .pad:not(.locked){animation:wake .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes wake{0%{transform:scale(.94)}60%{transform:scale(1.05)}100%{transform:none}}
.pad .hand{position:absolute;inset:auto 6% 30% auto;width:38%;max-width:84px;height:auto;aspect-ratio:1;pointer-events:none;z-index:3;animation:tap .7s ease-in-out infinite alternate;filter:drop-shadow(0 3px 0 rgba(112,64,42,.5))}
@keyframes tap{from{transform:translateY(-12%) rotate(-8deg)}to{transform:translateY(8%) rotate(-8deg)}}

/* particles and stars */
.fx{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.fx i{position:absolute;left:0;top:0;display:block;will-change:transform,opacity}

/* lettering of the book titles, as on the site */
.lt{font-weight:700;color:var(--cream);-webkit-text-stroke:9px var(--deep);paint-order:stroke fill;text-shadow:0 5px 0 var(--deep);letter-spacing:.01em;line-height:1.02;margin:0}

/* start */
.start{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--sat) + 64px)}
.title{font-size:clamp(40px,13.500vw,84px);text-align:center;padding-inline:14px}
.title span{display:block}
.title span:last-child{color:var(--sun)}
.how{position:relative;z-index:2;margin:12px 16px 0;max-width:24ch;text-align:center;font-weight:600;font-size:clamp(16px,4.600vw,21px);line-height:1.25;color:var(--deep);background:var(--cream);border:3px solid var(--deep);border-radius:18px;padding:7px 14px 8px;text-wrap:balance}
.start-art{position:relative;flex:1;min-height:0;width:100%;display:flex;justify-content:center}
.start-trot{position:absolute;bottom:12%;left:50%;height:min(90%,116vw);width:auto;transform:translateX(-53%);transform-origin:50% 100%;animation:hello 2.400s ease-in-out infinite alternate}
@keyframes hello{from{transform:translateX(-53%) rotate(-1.500deg)}to{transform:translateX(-53%) rotate(2deg) scaleY(1.015)}}
.start-hill{position:absolute;left:0;bottom:0;width:100%;height:27%}
.go{position:absolute;bottom:calc(var(--sab) + 7%);left:50%;margin-left:clamp(28px,11vw,84px);width:clamp(96px,29vw,138px);aspect-ratio:1;border-radius:50%;background:var(--sun);border:5px solid var(--deep);box-shadow:0 8px 0 var(--deep);display:flex;align-items:center;justify-content:center;animation:pulse 1s ease-in-out infinite alternate}
.go .go-play{width:54%;height:54%;margin-left:6%}
.go .load{display:none}
.go.loading{animation:none;background:var(--cream);cursor:default}
.go.loading .go-play{display:none}
.go .load-l{display:none}
.go.loading .load-l{display:block;position:absolute;bottom:106%;left:50%;transform:translateX(-50%);font-weight:600;font-size:15px;line-height:1.2;color:var(--deep);background:var(--cream);border:2.500px solid var(--deep);border-radius:999px;padding:2px 11px 3px;white-space:nowrap}
.go.loading .load{display:block;position:relative;width:60%;aspect-ratio:1;animation:trotload .5s ease-in-out infinite alternate}
.load svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.load .sh{stroke:var(--deep);stroke-width:3;stroke-linejoin:round}
.load .l0 .sh{fill:rgba(112,64,42,.14)}
.load .l1{clip-path:inset(calc(100% - var(--p,6%)) -10% -10% -10%);transition:clip-path .3s}
.load .l1 .sh{fill:var(--sun)}
@keyframes trotload{from{transform:translateY(-7%) rotate(-7deg)}to{transform:translateY(7%) rotate(7deg)}}
.go.ready{animation:goin .5s cubic-bezier(.3,1.6,.5,1),pulse 1s .5s ease-in-out infinite alternate}
@keyframes goin{from{transform:scale(.6)}}
.go:active{animation:none;transform:translateY(8px);box-shadow:0 0 0 var(--deep)}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.08)}}
.best{position:absolute;left:14px;bottom:calc(var(--sab) + 12px);margin:0;display:flex;align-items:center;gap:6px;font-weight:600;font-size:17px;color:var(--deep);background:var(--cream);border:3px solid var(--deep);border-radius:999px;padding:4px 12px 4px 8px}
.best svg{width:24px;height:24px}
.best .sh{fill:var(--sun);stroke:var(--deep);stroke-width:3}
.best .nail{fill:var(--deep)}
.lang{position:absolute;left:50%;top:calc(var(--sat) + 14px);transform:translateX(-50%);margin:0;display:flex;gap:6px;z-index:11}
.lang a{font-weight:600;font-size:15px;color:var(--deep);text-decoration:none;background:var(--cream);border:3px solid var(--deep);border-radius:999px;padding:5px 12px}
.lang a[aria-current]{background:var(--sun)}
[data-screen="start"] .stage,[data-screen="start"] .trail,[data-screen="start"] .pads{opacity:0;pointer-events:none}
[data-screen="start"]::after{display:none}
.game:not([data-screen="start"]) .start,.game:not([data-screen="start"]) .lang{display:none}

/* end */
.end{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;padding:calc(var(--sat) + 66px) 16px calc(var(--sab) + 16px);background:rgba(112,64,42,.45);animation:fade .3s both}
@keyframes fade{from{opacity:0}}
.panel{position:relative;width:min(100%,430px);max-height:100%;background:var(--cream);border:4px solid var(--deep);border-radius:28px;box-shadow:0 8px 0 #3d2216;padding:18px 16px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;animation:panel .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes panel{from{transform:translateY(40px) scale(.9);opacity:0}}
.end-pic{position:relative;flex:none;width:100%;height:min(36vh,270px);border-radius:18px;border:3px solid var(--deep);background:var(--sky);overflow:hidden}
.end-trot{position:absolute;left:50%;bottom:-3%;height:96%;width:auto;transform:translateX(-56%)}
.end-hill{position:absolute;left:0;bottom:0;width:100%;height:22%}
.seal{position:absolute;right:-8px;top:-26px;z-index:2;width:clamp(112px,34vw,150px);aspect-ratio:1;border-radius:50%;background:var(--sun);border:4px solid var(--deep);box-shadow:0 5px 0 var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(9deg);font-weight:700;font-size:clamp(14px,4.200vw,18px);line-height:1.08;color:var(--deep);text-transform:uppercase;padding:10px;animation:sealin .6s .35s cubic-bezier(.3,1.7,.5,1) both}
.seal::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px dashed var(--deep);opacity:.7}
.seal span{display:block}
.seal span:empty{display:none}
@keyframes sealin{from{transform:rotate(-30deg) scale(0);opacity:0}}
.shoes-big{flex:none;width:100%;gap:4px}
.shoes-big li{width:clamp(26px,9.500vw,40px)}
.end-btns{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:10px 26px 10px 18px;font-weight:600;font-size:22px;line-height:1.1;color:var(--deep);background:var(--sun);border:3px solid var(--deep);border-radius:999px;box-shadow:0 6px 0 var(--deep);transition:transform .08s,box-shadow .08s}
.btn svg{width:34px;height:34px}
.btn-2{background:var(--cream);text-decoration:none;gap:8px;padding:10px 22px 10px 14px}
.btn-2 svg{width:30px;height:30px}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--deep)}
.nojs{position:absolute;inset:auto 0 0 0;z-index:20;margin:0;padding:16px;background:var(--cream);font-weight:600;text-align:center}

/* wide screens: the grounds go to the right of the stage */
@media (min-aspect-ratio:1/1){
  .game{--col:clamp(280px,46vw,560px);grid-template-columns:minmax(0,1fr) var(--col);grid-template-rows:auto minmax(0,1fr) auto}
  .bar{grid-column:1 / -1}
  .stage{grid-column:1;grid-row:2}
  .trail{grid-column:1;grid-row:3;border-bottom:0}
  .pads{grid-column:2;grid-row:2 / 4;align-self:center;width:100%;height:auto;aspect-ratio:1 / 1.080;max-height:100%;max-width:none;background:none;padding-bottom:calc(var(--sab) + 22px)}
  .game::after{left:auto;right:0;top:calc(var(--sat) + 58px);bottom:0;width:var(--col);height:auto;border-left:4px solid var(--deep)}
  [data-screen="start"]::after{display:none}
  .pad b{font-size:clamp(19px,3.200vw,36px)}
  .start{align-items:flex-start}
  .title{position:relative;z-index:2;text-align:left;padding-inline:6vw 0;font-size:clamp(34px,min(13vh,7.400vw),100px);max-width:56vw}
  .how{margin-left:6vw;text-align:left;max-width:26ch;font-size:clamp(15px,4vh,21px)}
  .start-art{position:absolute;inset:0}
  .start-trot{left:70%;bottom:10%;height:min(80vh,50vw)}
  .start-hill{height:24%}
  .go{left:6vw;margin-left:0;bottom:calc(var(--sab) + 11vh);width:clamp(92px,24vh,150px)}
  .go.loading .load-l{bottom:auto;top:50%;left:calc(100% + 12px);transform:translateY(-50%);font-size:clamp(15px,3.2vh,24px)}
  .best{left:auto;right:14px}
  .end-pic{height:min(34vh,230px)}
  .shoes li{width:clamp(20px,4vh,34px)}
}
@media (max-height:520px){
  .end{padding-top:calc(var(--sat) + 10px)}
  .end .panel{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;justify-items:center;column-gap:18px;row-gap:10px;width:min(100%,620px);padding:14px 16px}
  .end-pic{grid-column:1;grid-row:1 / 4;height:min(64vh,260px);width:100%}
  .seal{position:relative;right:auto;top:auto;grid-column:2;grid-row:1;width:clamp(96px,26vh,124px);font-size:clamp(12px,3.600vh,15px);margin-top:-4px}
  .shoes-big{grid-column:2;grid-row:2}
  .shoes-big li{width:clamp(20px,6vh,30px)}
  .end-btns{grid-column:2;grid-row:3}
  .btn{min-height:52px;font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .cloud,.rays,.go,.go .load,.start-trot,.pad.hint,[data-band="on"] .aud .in img,.trot-bob{animation:none!important}
}