*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-family:Fredoka,ui-rounded,system-ui,sans-serif;background:#1b1340}
button{font:inherit;border:0;cursor:pointer;touch-action:none}
.screen{position:fixed;inset:0;display:none}
.screen.on{display:block}

/* ---------- menu ---------- */
#menu.on{display:flex;flex-direction:column;align-items:center;padding:2vmin;gap:2vmin;
  background:radial-gradient(circle at 20% 10%,#ffd166 0,transparent 35%),radial-gradient(circle at 85% 90%,#ef476f 0,transparent 40%),linear-gradient(160deg,#4cc9f0,#7b2ff7)}
#menu h1{margin:1vmin 0 0;font-size:9vmin;color:#fff;text-shadow:0 .6vmin 0 rgba(0,0,0,.2);letter-spacing:.02em}
.grid{flex:1;width:100%;max-width:1100px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3vmin;min-height:0}
.card{border-radius:6vmin;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vmin;
  box-shadow:0 1.4vmin 0 rgba(0,0,0,.22);transition:transform .08s;min-height:0;overflow:hidden}
.card:active{transform:translateY(1vmin) scale(.97);box-shadow:0 .4vmin 0 rgba(0,0,0,.22)}
.card .ic{font-size:min(22vmin,16vh);line-height:1;animation:float 2.4s ease-in-out infinite}
.card .ic{animation-delay:var(--d,0s)}
.card .nm{font-size:min(5.2vmin,4vh);font-weight:700;text-shadow:0 .3vmin 0 rgba(0,0,0,.2)}
.c1{background:linear-gradient(160deg,#ff595e,#ff924c)}
.c2{background:linear-gradient(160deg,#52b788,#2d6a4f)}
.c3{background:linear-gradient(160deg,#f72585,#7209b7)}
.c4{background:linear-gradient(160deg,#4361ee,#3a0ca3)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6%) rotate(3deg)}}

/* ---------- stage ---------- */
#cv{position:absolute;inset:0;display:block}
#dom{position:absolute;inset:0;pointer-events:none}
#dom>*{pointer-events:auto}
#fx{position:fixed;inset:0;pointer-events:none;z-index:50}
#home{position:fixed;left:10px;top:10px;z-index:60;width:58px;height:58px;border-radius:50%;background:#fff;font-size:30px;line-height:58px;padding:0;
  box-shadow:0 4px 0 rgba(0,0,0,.25);display:none}
#home:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.full{position:absolute;inset:0;overflow:hidden}

/* ---------- race overlays ---------- */
.picker{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3vmin;flex-wrap:wrap;padding:12vmin 4vmin 4vmin;background:rgba(20,20,40,.35)}
.pickbtn{width:min(38vmin,42vw);height:min(38vmin,36vh);border-radius:6vmin;background:#fff;box-shadow:0 1.2vmin 0 rgba(0,0,0,.3);padding:0;display:flex;align-items:center;justify-content:center;animation:float 2s ease-in-out infinite}
.pickbtn:nth-child(2){animation-delay:-.5s}.pickbtn:nth-child(3){animation-delay:-1s}.pickbtn:nth-child(4){animation-delay:-1.5s}
.pickbtn canvas{height:86%;width:auto}
.pickbtn:active{transform:scale(.93)}
.win{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vmin;background:rgba(20,20,40,.3)}
.win .tr{font-size:34vmin;line-height:1;animation:pop .6s ease-out,float 1.6s .6s ease-in-out infinite}
.win .sc{font-size:9vmin;font-weight:700;color:#fff;text-shadow:0 .5vmin 0 rgba(0,0,0,.3)}
.go{width:26vmin;height:26vmin;border-radius:50%;background:#38b000;box-shadow:0 1.4vmin 0 #1f6f00;display:flex;align-items:center;justify-content:center;animation:pulse 1s ease-in-out infinite}
.go:active{transform:translateY(1vmin);box-shadow:0 .4vmin 0 #1f6f00}
.go svg{width:50%;height:50%;margin-left:6%}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.35) translateY(-12%)}100%{transform:scale(1)}}

/* ---------- dino ---------- */
.jungle{background:linear-gradient(#8fd3ff 0,#c8f1ff 46%,#7bc950 46%,#4f9d2d 100%)}
.jungle .sun{position:absolute;right:6%;top:5%;width:16vmin;height:16vmin;border-radius:50%;background:#ffdd57;box-shadow:0 0 0 3vmin rgba(255,221,87,.3)}
.jungle .volcano{position:absolute;left:50%;top:46%;transform:translate(-50%,-92%);font-size:min(46vmin,40vh);line-height:1}
.jungle .palm{position:absolute;top:46%;font-size:min(34vmin,30vh);line-height:1;transform:translate(-50%,-88%)}
.jungle .p1{left:10%}.jungle .p2{left:90%;transform:translate(-50%,-88%) scaleX(-1)}
.nest{position:absolute;top:50%;width:0;height:0;--e:min(22vw,24vh)}
.nest:before{content:"";position:absolute;left:calc(var(--e)*-.75);top:calc(var(--e)*.25);width:calc(var(--e)*1.5);height:calc(var(--e)*.5);border-radius:50%;
  background:repeating-linear-gradient(60deg,#8a5a2b 0 8px,#a8713a 8px 16px);box-shadow:0 .8vmin 0 rgba(0,0,0,.18)}
.egg{position:absolute;left:calc(var(--e)*-.5);top:calc(var(--e)*-.8);width:var(--e);height:calc(var(--e)*1.25);
  border-radius:50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 30% 30%,hsl(var(--h2) 85% 62%) 0 9%,transparent 10%),radial-gradient(circle at 68% 48%,hsl(var(--h2) 85% 62%) 0 12%,transparent 13%),radial-gradient(circle at 38% 74%,hsl(var(--h2) 85% 62%) 0 8%,transparent 9%),radial-gradient(circle at 35% 25%,hsl(var(--h) 90% 90%),hsl(var(--h) 80% 72%));
  box-shadow:inset -1.2vmin -1.6vmin 0 rgba(0,0,0,.12);transform-origin:50% 90%;animation:pop .45s ease-out}
.egg svg{position:absolute;inset:0;width:100%;height:100%}
.egg .k1,.egg .k2{opacity:0}
.egg[data-t="1"] .k1,.egg[data-t="2"] .k1,.egg[data-t="2"] .k2{opacity:1}
.egg.wob{animation:wob .35s ease-in-out}
.egg.hatch{animation:burst .3s ease-out forwards}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.06)}75%{transform:rotate(12deg) scale(1.06)}}
@keyframes burst{to{transform:scale(1.7);opacity:0}}
.dino{position:absolute;transform:translate(-50%,-50%);font-size:min(17vw,17vh);line-height:1;transition:left 2.6s linear,top 2.6s linear,opacity .5s;z-index:3}
.dino .em{display:block}
.dino .fl{display:block;transition:transform .2s}
.dino.r .fl{transform:scaleX(-1)}
.dino .em.pop{animation:pop .6s ease-out}
.dino .em.hop{animation:hop .5s ease-out}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-45%) rotate(-10deg)}}

.dex{position:absolute;left:78px;right:10px;top:10px;display:flex;justify-content:center;gap:.6vmin;z-index:8;pointer-events:none}
.dex span{font-size:min(5.5vmin,4.4vw);line-height:1.25;background:rgba(255,255,255,.55);border-radius:1.6vmin;padding:0 .4vmin;transition:transform .3s}
.dex span i{font-style:normal;display:block;filter:brightness(0);opacity:.3}
.dex span.on{background:#fff;transform:scale(1.1)}
.dex span.on i{opacity:1}
.thief{position:absolute;font-size:min(17vw,17vh);line-height:1;transform:translate(-50%,-50%);transition:left 3.6s linear,top 3.6s linear;z-index:9}
.thief.away{transition:left .7s ease-in,top .7s ease-in,transform .7s;transform:translate(-50%,-50%) rotate(540deg) scale(.4)}

/* race controls */
.ctl{position:absolute;left:0;right:0;bottom:0;height:var(--ch);display:flex;align-items:center;gap:3vmin;padding:0 3vmin;background:linear-gradient(#2b2d42,#1a1b2e);border-top:6px solid #ffd60a;--s:min(calc(var(--ch)*.76),24vw)}
.steer{width:var(--s);height:var(--s);border-radius:26%;background:#3a86ff;box-shadow:0 8px 0 #1d4fb8;display:flex;align-items:center;justify-content:center;padding:0;flex:none}
.steer svg{width:55%;height:55%}
.gas{margin-left:auto;width:min(calc(var(--ch)*1.25),36vw);height:var(--s);border-radius:999px;background:#38b000;box-shadow:0 8px 0 #1f6f00;color:#fff;font-weight:700;font-size:calc(var(--s)*.42);animation:pulse 1s ease-in-out infinite;flex:none;padding:0}
.steer.pr,.gas.pr{transform:translateY(6px);box-shadow:0 2px 0 rgba(0,0,0,.4);filter:brightness(1.3);animation:none}
/* dino family */
.nest.sm{top:58%;--e:min(13vw,13vh);z-index:1}
.dn{position:absolute;left:0;top:0;line-height:1;touch-action:none;transition:font-size 1s}
.dn .fl{display:block;transition:transform .15s}
.dn.r .fl{transform:scaleX(-1)}
.dn .bd{display:block;position:relative;transform-origin:50% 90%;transition:transform .5s}
.dn .em{display:block}
.dn .hat{position:absolute;left:2%;top:-16%;font-size:.36em;transform:rotate(-20deg)}
.dn .hat.bow{left:8%;top:-6%;font-size:.3em}
.dn .bd.hop{animation:hop .5s ease-out}.dn .bd.pop{animation:pop .6s ease-out}.dn .bd.spin{animation:spin .4s ease-in-out}.dn .bd.munch{animation:munch .26s 5}
.dn.sleep .bd{transform:rotate(-24deg) scale(1,.84)}
.tools{position:absolute;left:0;right:0;bottom:0;height:clamp(70px,13vh,120px);display:flex;justify-content:center;align-items:center;gap:3vmin;background:rgba(40,25,10,.45);z-index:6000}
.tool{height:min(82%,15vw);aspect-ratio:1;border-radius:50%;background:#fff;font-size:min(8vmin,7vh);box-shadow:0 5px 0 rgba(0,0,0,.3);padding:0;line-height:1}
.tool.hit{animation:pop .3s}
.tool.on{box-shadow:0 0 0 5px #ffd60a,0 5px 0 rgba(0,0,0,.3)}
.thief{z-index:4000}
.visitor{position:absolute;top:9%;font-size:min(17vw,17vh);line-height:1;transition:left 7s linear;z-index:4000;touch-action:none}
.visitor span{display:block;transform:scaleX(-1)}
.visitor span.loop{animation:vloop .7s ease-in-out}
@keyframes vloop{from{transform:scaleX(-1) rotate(0)}to{transform:scaleX(-1) rotate(-360deg)}}
.night{position:absolute;inset:0;background:#0b1040;opacity:0;transition:opacity 1.2s;pointer-events:none;z-index:5000}
.nite .night{opacity:.55}
.thing{position:absolute;left:0;top:0;line-height:1;pointer-events:none}
.thing.ball{pointer-events:auto;touch-action:none}
.thing.fall .in{display:block;animation:fall .45s ease-in}
@keyframes fall{from{transform:translateY(-70vh)}}
@keyframes munch{50%{transform:rotate(7deg) scale(1.08,.93)}}
/* character band */
.band{position:absolute;inset:clamp(84px,12vh,100px) 0 0 0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:2vmin;padding:2vmin}
.mate{border-radius:5vmin;padding:0;box-shadow:0 1.2vmin 0 rgba(0,0,0,.3),inset 0 0 0 .8vmin rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .08s,filter .08s;min-height:0;min-width:0}
.mate span{display:block;font-size:min(30vh,19vw);line-height:1.1}
.mate .w{transition:transform .14s ease-out}
.band.a .mate .w{transform:translateY(-5%) rotate(-6deg)}.band.b .mate .w{transform:rotate(6deg)}
.band.a .mate:nth-child(even) .w{transform:rotate(6deg)}.band.b .mate:nth-child(even) .w{transform:translateY(-5%) rotate(-6deg)}
.mate.hit{transform:scale(.94) translateY(.8vmin);filter:brightness(1.45)}
.mate.glow{box-shadow:0 0 0 1.2vmin #fff,0 0 7vmin 2vmin #fff;animation:glow .3s ease-in-out infinite alternate}
@media (orientation:portrait){.band{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr)}.mate span{font-size:min(15vh,34vw)}}
.song.beat{right:96px}.song.beat.off{opacity:.45;animation:none}

/* ---------- dance ---------- */
.pad.glow{box-shadow:0 0 0 1.2vmin #fff,0 0 7vmin 2vmin #fff;animation:glow .3s ease-in-out infinite alternate}
@keyframes glow{from{transform:scale(1)}to{transform:scale(1.07);filter:brightness(1.5)}}
.streak{position:absolute;left:80px;top:16px;font-size:min(7vmin,6vw);z-index:5;pointer-events:none;white-space:nowrap}
.disco{--hue:300;background:radial-gradient(circle at 50% 0,hsl(var(--hue) 90% 60%),hsl(calc(var(--hue) + 60) 80% 22%) 70%);transition:background .12s;display:flex;flex-direction:column}
.disco .beams{position:absolute;left:50%;top:-30vmax;width:160vmax;height:160vmax;margin-left:-80vmax;
  background:conic-gradient(from 0deg,transparent 0 8%,rgba(255,255,255,.16) 8% 12%,transparent 12% 30%,rgba(255,255,255,.16) 30% 34%,transparent 34% 55%,rgba(255,255,255,.16) 55% 59%,transparent 59% 78%,rgba(255,255,255,.16) 78% 82%,transparent 82%);
  animation:spin 9s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.dancers{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:5vw;padding-bottom:2vh;position:relative;min-height:0}
.dancer{font-size:min(22vw,24vh);line-height:1;transition:transform .14s ease-out}
.dancers.a .dancer{transform:translateY(-9%) rotate(-7deg)}
.dancers.b .dancer{transform:translateY(0) rotate(7deg)}
.dancers.a .dancer:nth-child(2){transform:translateY(0) rotate(7deg)}
.dancers.b .dancer:nth-child(2){transform:translateY(-9%) rotate(-7deg)}
.dancer span{display:block}
.mv0{animation:m0 .5s ease-out}.mv1{animation:m1 .5s ease-in-out}.mv2{animation:m2 .5s ease-out}
.mv3{animation:m3 .5s ease-in-out}.mv4{animation:m4 .5s ease-in-out}.mv5{animation:m5 .5s ease-out}
@keyframes m0{40%{transform:translateY(-50%)}}
@keyframes m1{to{transform:rotate(360deg)}}
@keyframes m2{40%{transform:scale(1.5)}}
@keyframes m3{20%,60%{transform:rotate(-22deg)}40%,80%{transform:rotate(22deg)}}
@keyframes m4{50%{transform:scaleX(-1)}}
@keyframes m5{40%{transform:scale(1.35,.6) translateY(30%)}}
.pads{height:46%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:2vmin;padding:2vmin;position:relative}
.pad{border-radius:5vmin;box-shadow:0 1.2vmin 0 rgba(0,0,0,.3),inset 0 0 0 .8vmin rgba(255,255,255,.25);color:rgba(255,255,255,.85);font-size:min(12vmin,10vh);display:flex;align-items:center;justify-content:center;transition:transform .08s,filter .08s}
.pad.hit{transform:scale(.92) translateY(.8vmin);filter:brightness(1.6)}
.song{position:absolute;right:12px;top:10px;width:72px;height:72px;border-radius:50%;background:#fff;font-size:38px;line-height:72px;padding:0;box-shadow:0 4px 0 rgba(0,0,0,.25);z-index:5;animation:pulse 1.2s ease-in-out infinite}