/* Leo's Smash Race — bright toy UI, big targets, icons first. */
:root{--ink:#1d1a2e;--sky:#2f8cff;--red:#ff4d6d;--mint:#2ec4b6;--sun:#ffd23f;--pur:#9b5cf0;--card:#fffdf6;--font:Fredoka,"Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;--safeb:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#7cc8ff;font-family:var(--font);color:var(--ink);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font-family:var(--font);cursor:pointer;color:var(--ink);touch-action:manipulation}
button:focus-visible,summary:focus-visible,input:focus-visible+span{outline:4px solid #fff;outline-offset:3px;box-shadow:0 0 0 8px var(--ink)}
.cta{font-size:clamp(26px,6vw,40px);font-weight:700;padding:.35em 1.3em;border-radius:999px;border:5px solid var(--ink);background:linear-gradient(#ffe680,#ffc300);box-shadow:0 7px 0 var(--ink),0 12px 24px rgba(0,0,0,.25);letter-spacing:.02em;transition:transform .08s}
.cta:active{transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}
.ghost{font-size:17px;font-weight:600;padding:.5em 1em;border-radius:999px;border:3px solid var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink)}
.ghost:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.ghost.small{font-size:15px;padding:.4em .9em}
.round{width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:#fff;font-size:18px;font-weight:700;box-shadow:0 3px 0 var(--ink);display:grid;place-items:center;padding:0}
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;overflow-y:auto;touch-action:pan-y}
/* title */
.title-card{text-align:center;max-width:560px;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;background:rgba(255,253,246,.9);border:5px solid var(--ink);border-radius:32px;padding:20px 18px 18px;box-shadow:0 10px 0 var(--ink),0 20px 50px rgba(0,0,0,.25);margin:auto}
.logo{margin:0;line-height:.9;display:flex;flex-direction:column;align-items:center}
.logo .l1{font-size:clamp(30px,8vw,46px);color:var(--sun);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);transform:rotate(-4deg)}
.logo .l2{font-size:clamp(44px,12vw,74px);font-weight:700;background:linear-gradient(#ff7a6b,#e53935);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px var(--ink);filter:drop-shadow(0 5px 0 var(--ink))}
.logo img{max-width:100%;height:auto}
.credit{margin:0;font-weight:600;font-size:16px;background:var(--mint);color:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 14px;text-shadow:0 1px 0 var(--ink)}
.linkbtn{background:none;border:0;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;opacity:.75;padding:6px 10px;min-height:40px}
#names{margin-top:4px}
.small-label{margin:4px 0 6px;font-size:14px;font-weight:600;opacity:.75}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{font-size:15px;font-weight:600;border:3px solid var(--ink);border-radius:999px;background:#fff;padding:6px 12px;min-height:40px}
.chip[aria-checked=true]{background:var(--sun);box-shadow:0 3px 0 var(--ink)}
.grownups{width:100%;text-align:left;font-size:15px;border-top:2px dashed rgba(29,26,46,.25);padding-top:8px}
.grownups summary{font-weight:600;cursor:pointer;text-align:center;opacity:.8;padding:6px}
.opts{display:flex;flex-direction:column;gap:8px;padding:8px 4px}
.opt{display:flex;gap:10px;align-items:center;font-weight:600;font-size:16px}
.opt input{width:26px;height:26px;accent-color:var(--mint)}
.opt small{display:block;font-weight:500;opacity:.65;font-size:13px}
.keys{font-size:13px;margin:4px 0;opacity:.8}
.bests{font-size:14px;font-weight:600;opacity:.85;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center}
/* pick */
.pick-card{width:100%;max-width:1100px;margin:auto;background:rgba(255,253,246,.92);border:5px solid var(--ink);border-radius:28px;padding:12px 14px 16px;box-shadow:0 10px 0 var(--ink)}
.pick-head,.cube-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.pick-head h2,.cube-head h2{margin:0;font-size:clamp(24px,5.5vw,36px);flex:1;text-align:center}
.totstars{font-weight:700;font-size:20px;min-width:48px;text-align:right}
.heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.hero{position:relative;min-width:0;overflow:hidden;border:4px solid var(--ink);border-radius:22px;background:linear-gradient(#e8f6ff,#bfe3ff);padding:6px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:140px;perspective:600px}
.hero canvas{width:100%;max-width:220px;aspect-ratio:2/1;animation:bob 1.6s ease-in-out infinite}
.hero.sel{background:linear-gradient(#fff3b0,#ffd23f);box-shadow:0 6px 0 var(--ink);transform:translateY(-3px)}
.hero.sel canvas{animation:turn 2.4s ease-in-out infinite}
.hero.cheer canvas{animation:cheer .7s ease-out}
.hero .nm{font-weight:700;font-size:18px}
.hero .stats{display:flex;gap:10px;font-size:18px;font-weight:600;align-items:center}
.hero .stats>span{display:flex;align-items:center;gap:3px}
.pip{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:#fff;display:inline-block}.pip.on{background:var(--red)}
.hero .sp{font-size:12px;opacity:.75;font-weight:600}
.sub{margin:6px 0 6px;font-size:20px;text-align:center}
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.trk{border:4px solid var(--ink);border-radius:18px;background:#fff;padding:0;overflow:hidden;position:relative;min-height:84px;display:flex;flex-direction:column}
.trk canvas{width:100%;aspect-ratio:16/7;display:block}
.trk .tn{font-weight:700;font-size:15px;padding:4px 6px}
.trk.sel{box-shadow:0 0 0 4px var(--sun),0 6px 0 var(--ink)}
.trk.locked canvas{filter:blur(3px) saturate(1.15);transform:scale(1.06)}
.trk.locked::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.18);pointer-events:none}
.trk .lock{position:absolute;top:6px;right:6px;background:#fff;border:3px solid var(--ink);border-radius:999px;font-weight:700;padding:1px 8px;font-size:14px}
.pick-go{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap;position:sticky;bottom:0;padding:8px 0 calc(4px + var(--safeb));background:linear-gradient(rgba(255,253,246,0),rgba(255,253,246,.95) 30%)}
#pick{align-items:flex-start;overflow:hidden}
/* the GO! row is pinned to the card bottom; only the heroes + tracks scroll */
#pick .pick-card{display:flex;flex-direction:column;max-height:100%;min-height:0}
.pick-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:0 2px}
#pick .pick-go{flex:none;position:static;margin-top:8px;background:none}
@media (max-width:600px){.hero .stats{font-size:14px;gap:6px}.pip{width:9px;height:9px}.heroes{grid-template-columns:repeat(2,1fr);gap:8px}.hero{min-height:0;padding:4px}.hero .nm{font-size:16px}.hero .sp{display:none}.tracks{grid-template-columns:repeat(2,1fr);gap:8px}.trk .tn{font-size:13px}.pick-card{padding:10px}}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes turn{0%,100%{transform:rotateY(-18deg) translateY(0)}50%{transform:rotateY(18deg) translateY(-5px)}}
@keyframes cheer{0%{transform:scale(1)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.95) rotate(4deg)}100%{transform:scale(1)}}
/* cube */
#cube{flex-direction:column;justify-content:flex-start;gap:4px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.85),rgba(191,227,255,.88))}
.cube-head{width:100%;max-width:700px}
.cube-tip{margin:0;font-size:20px;font-weight:600;text-align:center}
#cubeWrap{position:relative;width:min(96vw,620px);flex:1;min-height:300px;max-height:620px}
#cubeCv{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#arrows{position:absolute;inset:0;pointer-events:none}
.arr{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;border:4px solid var(--ink);background:#fff;font-size:28px;font-weight:700;pointer-events:auto;display:grid;place-items:center;padding:0;box-shadow:0 4px 0 var(--ink)}
.arr:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.arr.hint{animation:hint 1s ease-in-out infinite;background:var(--sun);opacity:1}
#arrows.hinting .arr:not(.hint){opacity:.3;transform:scale(.88)}
.arr{transition:opacity .25s,transform .25s}
.pro .arr{width:50px;height:50px;margin:-25px 0 0 -25px;font-size:22px}
@keyframes hint{50%{transform:scale(1.18);box-shadow:0 0 0 10px rgba(255,210,63,.55),0 4px 0 var(--ink)}}
.cube-foot{display:flex;gap:12px;align-items:center;min-height:64px;padding-bottom:calc(8px + var(--safeb))}
.help{font-size:24px;font-weight:700;border:4px solid var(--ink);border-radius:999px;background:var(--mint);color:#fff;padding:8px 22px;box-shadow:0 5px 0 var(--ink);text-shadow:0 2px 0 var(--ink);animation:bob 1.2s infinite}
.moves{font-weight:600;opacity:.6}
#cubeWin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4%;gap:6px;pointer-events:none}
#cubeWin .cta{pointer-events:auto}
.win-t{margin:0;font-size:clamp(38px,9vw,64px);font-weight:700;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.win-s{margin:0;font-size:24px;font-weight:700;background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:2px 14px}
@keyframes pop{0%{transform:scale(.2)}100%{transform:scale(1)}}
/* HUD */
#hud{position:absolute;inset:0;pointer-events:none;z-index:2}
.hud-score,.hud-stars{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border:4px solid var(--ink);border-radius:999px;padding:2px 14px 2px 8px;font-size:clamp(22px,5vw,34px);box-shadow:0 4px 0 var(--ink)}
.hud-score{left:8px}.hud-stars{right:112px}
.hud-score b,.hud-stars b{font-weight:700;min-width:1.4em;display:inline-block}
.hud-score.bump b{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.25)}}
.hud-btns{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:8px;display:flex;gap:6px;pointer-events:auto}
.hud-btns .round{width:44px;height:44px}
.hud-prog{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(60vw,520px)}
.prog-bar{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.7);border:3px solid var(--ink)}
.prog-bar .dot{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--ink)}
.prog-bar .me{width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--sun);z-index:2}
.prog-bar .flag{position:absolute;right:-14px;top:-12px;font-size:22px}
#pr0{background:#ff8a1f}#pr1{background:#27c46b}#pr2{background:#2f8cff}
#combo{position:absolute;top:24%;left:50%;transform:translate(-50%,-50%);font-size:clamp(46px,12vw,96px);font-weight:700;color:var(--sun);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);opacity:0;transition:opacity .2s}
#combo.on{opacity:1;animation:wob .5s ease-out}
@keyframes wob{0%{transform:translate(-50%,-50%) scale(1.6) rotate(-8deg)}60%{transform:translate(-50%,-50%) scale(.92) rotate(4deg)}100%{transform:translate(-50%,-50%) scale(1)}}
#banner{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:clamp(34px,9vw,72px);font-weight:700;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);white-space:nowrap;opacity:0}
#banner.on{opacity:1;animation:popc .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes popc{0%{transform:translate(-50%,-50%) scale(.2)}100%{transform:translate(-50%,-50%) scale(1)}}
#countdown{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:clamp(90px,26vw,200px);font-weight:700;color:var(--sun);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 10px 0 var(--ink)}
#countdown span{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
/* controls: two giant thumb buttons + lane pair, always in their own thumb zones (never over the road).
   JS sets --btn (big button size), --gut (landscape side gutters) and --strip (portrait floor strip). */
#controls{position:absolute;inset:0;pointer-events:none;--btn:120px;--lane:80px;z-index:1}
.big-btn{pointer-events:auto;position:absolute;width:var(--btn);height:var(--btn);border-radius:50%;border:6px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;box-shadow:0 8px 0 var(--ink),0 14px 30px rgba(0,0,0,.3);touch-action:none;padding:0}
.big-btn .ic{width:52%;height:52%;display:block}.big-btn .ic svg,.big-btn .ic img{width:100%;height:100%}
.jump .ic-fly{display:none}.jump.fly .ic-fly{display:block}.jump.fly .ic-jump{display:none}
.big-btn .lb{font-weight:700;font-size:calc(var(--btn) * .15);color:#fff;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--ink)}
.jump{background:radial-gradient(circle at 35% 30%,#8de8ff,#2f8cff 70%)}
.jump.fly{background:radial-gradient(circle at 35% 30%,#d8c4ff,#7b4dff 70%)}
.boost{background:radial-gradient(circle at 35% 30%,#ffb3c1,#ff4d6d 70%)}
.big-btn.down{transform:translateY(6px);box-shadow:0 2px 0 var(--ink)}
.boost.ready{animation:ready .8s ease-in-out infinite}
@keyframes ready{50%{box-shadow:0 8px 0 var(--ink),0 0 0 14px rgba(255,210,63,.7),0 0 40px #ffd23f}}
.ring{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);transform:rotate(-90deg);pointer-events:none}
.ring-bg{fill:none;stroke:rgba(255,255,255,.5);stroke-width:7}
.ring-fg{fill:none;stroke:var(--sun);stroke-width:7;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;filter:drop-shadow(0 0 2px var(--ink))}
.lanes{pointer-events:auto;position:absolute;display:flex;flex-direction:column;gap:16px}
.lane-btn{width:var(--lane);height:var(--lane);border-radius:22px;border:4px solid var(--ink);background:#fff;font-size:32px;box-shadow:0 4px 0 var(--ink);padding:0;touch-action:none}
.lane-btn:active{transform:translateY(3px)}
/* the thumb zones look like a toy-box floor, separate from the playfield */
.zone{background:linear-gradient(#4a3d7a,#2a2150);box-shadow:inset 0 6px 0 rgba(255,255,255,.12)}
/* portrait: road at about 58% down, controls on a floor strip below it */
.lay-portrait #controls{top:auto;height:var(--strip)}
.lay-portrait #controls::before{content:"";position:absolute;inset:0;background:linear-gradient(#4a3d7a,#2a2150);border-top:5px solid var(--ink);box-shadow:inset 0 6px 0 rgba(255,255,255,.14)}
.lay-portrait .big-btn{top:50%;margin-top:calc(var(--btn) / -2 - 4px)}
.lay-portrait .jump{left:max(14px,env(safe-area-inset-left,0px))}.lay-portrait .boost{right:max(14px,env(safe-area-inset-right,0px))}
.lay-portrait .lanes{left:50%;top:50%;transform:translate(-50%,-50%)}
/* landscape: side gutters; JUMP bottom-left, lane pair stacked just above BOOST on the right */
.lay-landscape #controls::before,.lay-landscape #controls::after{content:"";position:absolute;top:0;bottom:0;width:var(--gut);background:linear-gradient(#4a3d7a,#2a2150);box-shadow:inset 0 6px 0 rgba(255,255,255,.12)}
.lay-landscape #controls::before{left:0;border-right:5px solid var(--ink)}.lay-landscape #controls::after{right:0;border-left:5px solid var(--ink)}
.lay-landscape .big-btn{bottom:calc(14px + var(--safeb));z-index:1}
.lay-landscape .jump{left:calc((var(--gut) - var(--btn)) / 2)}.lay-landscape .boost{right:calc((var(--gut) - var(--btn)) / 2)}
.lay-landscape .lanes{z-index:1;right:calc((var(--gut) - var(--lane)) / 2);bottom:calc(14px + var(--safeb) + var(--btn) + 28px)}
.lay-landscape .hud-score{left:calc(var(--gut) + 8px)}.lay-landscape .hud-stars{right:calc(var(--gut) + 8px)}
.lay-landscape .hud-btns{right:calc((var(--gut) - 98px) / 2)}
@media (orientation:landscape) and (max-height:520px){.hud-prog{top:12px;width:min(36vw,360px)}.hud-score,.hud-stars{font-size:22px}}
/* party */
.party-card{text-align:center;width:100%;max-width:520px;margin:auto;background:rgba(255,253,246,.94);border:5px solid var(--ink);border-radius:32px;padding:16px 16px 18px;box-shadow:0 10px 0 var(--ink)}
.medal{font-size:clamp(70px,18vw,110px);line-height:1;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
#pTitle{margin:4px 0;font-size:clamp(34px,9vw,52px)}
.award{display:flex;justify-content:center;gap:8px;font-size:clamp(54px,14vw,80px);line-height:1}
.award .st{color:#d9d3e6;-webkit-text-stroke:3px var(--ink);transform:scale(.5);opacity:.4;transition:transform .35s cubic-bezier(.2,1.8,.4,1),opacity .2s,color .2s}
.award .st.on{color:var(--sun);transform:scale(1);opacity:1;text-shadow:0 0 18px rgba(255,200,0,.8)}
.breakdown{list-style:none;padding:0;margin:10px auto;max-width:360px;font-size:19px;font-weight:600}
.breakdown li{display:flex;justify-content:space-between;padding:4px 10px;border-bottom:2px dashed rgba(29,26,46,.15)}
.breakdown li.tot{font-size:26px;font-weight:700;border:0}
.pbest{margin:4px 0;font-weight:700;color:#e53935;min-height:1.2em}
.pbtns{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:8px 0}
.prank{margin-top:14px}
.hold{position:relative;overflow:hidden;opacity:.85}
.hold .fill{position:absolute;inset:0;background:var(--mint);transform:scaleX(0);transform-origin:left;pointer-events:none}
.hold.holding .fill{transform:scaleX(1);transition:transform 1.5s linear}
.hold .t{position:relative}.rankmsg{margin:6px 0 0;font-weight:600;font-size:15px;min-height:1.2em}
/* modals */
.modal{position:absolute;inset:0;background:rgba(20,16,40,.55);display:grid;place-items:center;padding:16px;z-index:10}
.mcard{background:var(--card);border:5px solid var(--ink);border-radius:28px;padding:18px;display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:min(90vw,320px);max-width:480px;box-shadow:0 10px 0 var(--ink)}
.mcard h2{margin:0;text-align:center}
.rank{width:min(92vw,480px)}
.rklist{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:4px;touch-action:pan-y}
.rkrow{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:12px;background:#fff;border:2px solid rgba(29,26,46,.12);font-weight:600}
.rkrow .rn{width:34px;text-align:center}.rkrow .nm{flex:1}.rkrow small{display:block;font-weight:500;opacity:.65;font-size:12px}
.rkrow.me{background:#fff3b0}.rkmsg{text-align:center;opacity:.75}.rkme{text-align:center;margin:0;font-weight:600}
.art-img{width:100%;height:100%;object-fit:contain}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}
.reduced *{animation-duration:.01ms!important;animation-iteration-count:1!important}
/* short landscape (phones on their side): slimmer pinned GO row so more of the picker shows */
@media (max-height:500px){#pick{padding:8px}#pick .pick-card{padding:8px 12px 10px}#pick .pick-head h2{font-size:24px}#pick .pick-go{margin-top:6px;gap:10px}#pick .pick-go .cta{font-size:26px;padding:.25em 1.1em;box-shadow:0 5px 0 var(--ink)}#pick .pick-go .ghost{padding:6px 14px}}