/* ANIMALS KART 2.8.0 — MAPI GAMES */
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030c18;color:#fff;font-family:'Kreeptown',Arial,Helvetica,sans-serif}
body{display:grid;place-items:center}

button{cursor:pointer;color:inherit;font:900 italic 18px 'Kreeptown',Arial;border:2px solid #6c9fc4;background:#0a2945;border-radius:12px;min-height:48px;touch-action:none;box-shadow:0 4px 0 #020c18}
button:hover{filter:brightness(1.15)}
button:focus-visible{outline:3px solid #fff}
button:active{transform:translateY(2px)}

#game{position:relative;width:min(100vw,56.25dvh);height:min(100dvh,177.778vw);overflow:hidden;background:#118bdd;box-shadow:0 0 100px #0d3556;touch-action:none;isolation:isolate}
#gl,#world{position:absolute;inset:0;width:100%;height:100%;display:block}
#world{pointer-events:none}

/* ---------- schermate ---------- */
#screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:5% 6%;background:linear-gradient(0deg,#04162cf5,#082943e8 70%,#103c58d9);overflow-y:auto}
#screen:empty{display:none}
.hero{background-image:none;background-size:cover;background-position:center top;background-repeat:no-repeat;background-color:#082640;position:absolute;inset:0}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#04162cf2 0%,#04162c88 22%,transparent 52%)}

.logo{font-size:clamp(35px,7dvh,70px);font-weight:1000;font-style:italic;line-height:.84;text-align:center;letter-spacing:-3px;color:#ffc92c;text-shadow:3px 4px #070a15,-2px -2px #070a15,2px -2px #070a15;transform:rotate(-4deg);margin:4% 0 6%;z-index:1}
.logo span{color:#ff3644;display:block;font-size:1.16em}
.logo.small{font-size:clamp(28px,5dvh,50px);margin:0 0 4%}

/* splash */
.splash{position:absolute;inset:0;display:grid;align-content:end;justify-items:center;gap:18px;padding-bottom:7%}
.tap{font:900 italic 21px 'Kreeptown',Arial;color:#fff;background:#04182bc4;border:2px solid #ffffff33;border-radius:34px;padding:13px 30px;animation:blink 1.15s ease-in-out infinite;text-align:center;letter-spacing:.5px}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.mapi{display:grid;justify-items:center}
.mapi img{width:104px;height:auto;display:block;filter:drop-shadow(0 3px 6px #0008)}
.mapi.text{font:900 italic 20px 'Kreeptown',Arial;color:#ff3644;text-shadow:2px 2px #070a15}
.menu{margin-top:auto;position:relative;display:grid;gap:10px;padding-bottom:10%}
.menu.wide{margin-top:0;padding-bottom:0}
.primary{background:linear-gradient(#ffdf58,#ffbd19);color:#07182b;border-color:#fff08b;min-height:54px;font-size:22px}
.sub{font-size:13px;color:#b3d0e4;text-align:center;line-height:1.6}
.sub b{color:#ffda38}
h1{font-size:25px;font-style:italic;margin:10px 0 18px;text-align:center}
h2{font-size:20px;margin:12px 0 8px}

/* selezione pilota */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.driver{padding:0;overflow:hidden;border-radius:8px;min-width:0}
.portrait{width:100%;aspect-ratio:1.25;background-image:none;background-repeat:no-repeat;background-size:941% 2088.75%}
.driver span{font-size:12px;display:block;padding:7px 0}
.selected{border-color:#ffdc44!important;box-shadow:0 0 0 2px #ffcc29,0 0 15px #ffd53688}

.driver-details{position:relative;min-height:185px;margin-top:14px;background:linear-gradient(120deg,#0c2545,#183557);border:1px solid #547998;border-radius:12px;padding:12px}
.driver-details h2{font-size:18px;margin:0 0 10px}
.driver-details .stats{width:48%;margin:0;padding:0;border:0;background:none}
.driver-details .stat{display:block;margin:8px 0;font-size:12px}
.driver-details progress{display:block;margin-top:4px;height:10px}
.driver-details canvas{position:absolute;right:0;bottom:4px;width:54%;height:auto}
.stat{font-weight:bold;font-style:italic}
.stat progress{width:100%;appearance:none;border:1px solid #8da8c0;background:#14253d;height:12px;border-radius:1px}
.stat progress::-webkit-progress-bar{background:#14253d}
.stat progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,#ffda43 0 7px,#664e21 7px 9px)}

/* selezione pista */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.track{padding:0;overflow:hidden}
.track .picture{background-image:none;background-size:200% 200%;background-repeat:no-repeat;aspect-ratio:2}
.track:nth-child(1) .picture{background-position:0 0}
.track:nth-child(2) .picture{background-position:100% 0}
.track:nth-child(3) .picture{background-position:0 100%}
.track:nth-child(4) .picture{background-position:100% 100%}
.track{position:relative}
.track span{display:block;padding:9px;font-size:16px}
.track.locked{opacity:.5;filter:grayscale(.75);cursor:not-allowed;box-shadow:none}
.track.locked .picture{filter:brightness(.45) blur(1px)}
.lockbadge{position:absolute;top:8px;left:50%;transform:translateX(-50%) skew(-6deg);background:#04162ce0;border:1px solid #ffffff59;border-radius:6px;padding:3px 10px;font:900 italic 11px 'Kreeptown',Arial;letter-spacing:1px;color:#ffd85a}
button.locked{opacity:.55;filter:grayscale(.5)}
button.locked small{display:block;font-size:10px;font-style:normal;letter-spacing:1px;color:#ffd85a;margin-top:3px}
.unlocked{margin:10px 0;padding:12px;text-align:center;border-radius:10px;background:linear-gradient(#1c5f3d,#0d3a27);border:1px solid #7bffb0;font:900 italic 13px 'Kreeptown',Arial;letter-spacing:1px;color:#d8ffe9}
.unlocked b{display:block;font-size:22px;color:#7bffb0;margin-top:4px}
.track small{display:block;font-size:10px;color:#ffd85f;font-style:normal;letter-spacing:.5px;margin-top:3px}

.footerbuttons{margin-top:auto;display:grid;gap:9px;padding-top:15px}
.pausebox{margin:auto 0;display:grid;gap:6px}

/* ---------- HUD ---------- */
.top{position:absolute;top:3%;left:4%;right:4%;display:flex;justify-content:space-between;align-items:flex-start}
.badge{background:#061a34e8;border-radius:9px;padding:7px 13px;font-style:italic;font-size:14px;font-weight:900;transform:skew(-5deg)}
.badge strong{font-size:36px;display:block;line-height:1}
.badge:last-child strong{color:#ffda37}
.top .center{display:grid;justify-items:center;gap:4px}
#pause{min-width:44px;min-height:42px;font-style:normal}
#timer{font:900 italic 17px 'Kreeptown',Arial;color:#fff;background:#061a34cc;border-radius:7px;padding:3px 9px}
#bestlap{font:900 11px 'Kreeptown',Arial;color:#cfe2f2;letter-spacing:.3px;background:#061a34aa;border-radius:6px;padding:2px 7px;min-height:0}
#bestlap:empty{display:none}

#notice{position:absolute;top:31%;width:100%;text-align:center;font-size:50px;font-weight:1000;font-style:italic;color:#ffdc43;text-shadow:3px 4px #06213c;-webkit-text-stroke:1px #06213c;pointer-events:none}

.bottom{position:absolute;bottom:27%;left:4%;right:4%;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
#map{width:82px;height:92px}
.speed{background:#071b35dc;padding:7px 9px;transform:skew(-6deg);min-width:96px;text-align:right}
.speed strong{font-size:32px;font-style:italic;line-height:1}
.meter{height:11px;background:#101c30;border:1px solid #ffffff33;margin-top:6px;width:84px;overflow:hidden}
.meter i{display:block;height:100%;width:100%;background:repeating-linear-gradient(110deg,#ffd934 0 10px,#7a5c12 10px 13px);transition:width .12s linear}
.meter i.full{background:repeating-linear-gradient(110deg,#7bffb0 0 10px,#1d6b45 10px 13px)}
.meter i.locked{background:repeating-linear-gradient(110deg,#ff6a5e 0 10px,#6d2019 10px 13px)}
.speed small{display:block;font-weight:900}

#touch{position:absolute;left:0;right:0;bottom:2.5%;padding:0 4%;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
#touch .side{display:grid;justify-items:start;gap:12px;pointer-events:auto}
#touch .side.right{justify-items:end}
#touch button{background:#0a2945c9;border-color:#ffffff4d;user-select:none;-webkit-user-select:none;backdrop-filter:blur(2px)}
.arrow{width:132px;height:96px;font-size:44px;border-radius:20px;line-height:1;padding:0}
.round{width:78px;height:78px;min-height:78px;border-radius:50%;font-size:26px;padding:0}
.turbo{color:#ff3d3d;background:#12324fd9;border-color:#ff6a6a99;font-size:30px}
.turbo.off{opacity:.38;color:#9fb3c6;border-color:#ffffff33}

button:active,#touch button:active{filter:brightness(1.35)}
@media(max-width:340px){.arrow{width:112px;height:84px;font-size:38px}.round{width:66px;height:66px;min-height:66px}}
.soundbtn{position:absolute;top:14px;right:14px;width:46px;min-height:46px;border-radius:50%;font-size:19px;padding:0;z-index:6;background:#0a2945cc}

/* ---------- risultati ---------- */
.result{display:flex;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid #31506c;font-weight:800;font-style:italic}
.result.me{background:#ffd132;color:#051a31;border-radius:6px}
.medal{text-align:center;font-size:74px;color:#ffda38;font-weight:900;font-style:italic}
.laps{margin:6px 0}

.help{font-size:14px;line-height:1.65;color:#d7e6f2}
.help b{color:#ffda38}

/* prova a tempo: niente posizione da mostrare */
body.trial .badge:last-child strong{color:#8fb6d4}

@media(max-height:700px){
  .track .picture{aspect-ratio:1.7}
  .driver span{font-size:10px}
  h1{font-size:21px;margin:5px 0 10px}
  .footerbuttons{padding-top:10px}
  .primary{min-height:47px}
  .logo{margin-top:2%}
  .driver-details{min-height:145px;margin-top:8px;padding:9px}
  .driver-details .stat{margin:5px 0}
  .driver-details canvas{width:49%}
  .driver-details h2{margin-bottom:4px}
  .driver-details+.sub{margin:7px 0}
}

/* Race information stays clear of the driving area and thumbs. */
#corner{position:absolute;top:18.5%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#06213dde;border:1px solid #78c8ff66;border-radius:20px;padding:6px 13px;font-size:12px;letter-spacing:1px;color:#fff1a4}
#technique{position:absolute;top:23.5%;width:100%;text-align:center;font-size:12px;color:#82f3ff;text-shadow:0 2px 4px #001021}
#boostLabel{font-size:9px!important;white-space:nowrap;letter-spacing:.3px;color:#ffdf58}
#touch button.held{background:#23749b;box-shadow:0 0 18px #50d8ff80;transform:translateY(2px)}
@supports(padding:max(0px)){#touch{padding-bottom:max(10px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.tap{animation:none}}

/* immagini delle piste: impostate da trackPicture() in game.js */

/* pulsante oggetto: mostra l'icona di quello che hai, non un punto interrogativo */
.itembtn{background-color:#12324fd9!important;background-position:center!important;background-size:68%!important;background-repeat:no-repeat!important;border-color:#ffe13b88!important}
.itembtn.empty{opacity:.28;border-color:#ffffff33!important}
.itembtn.rolling{animation:itemroll .16s linear infinite;opacity:1}
.itembtn.ready{opacity:1;border-color:#ffe13b!important;box-shadow:0 4px 0 #020c18,0 0 18px #ffd93caa;animation:itempulse 1s ease-in-out infinite}
@keyframes itemroll{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes itempulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* classifica in sovrimpressione: la gara continua sotto e si vede */
#screen.overlay{background:linear-gradient(0deg,#04162cc8 0%,#04162c70 50%,#04162c10 100%);justify-content:flex-end;padding-bottom:6%}
#touch[hidden],#hud[hidden]{display:none!important}
.resultsbox{display:flex;flex-direction:column;animation:resin .45s ease-out}
@keyframes resin{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.resultsbox h1{margin:0 0 2px;font-size:22px}
.resultsbox h2{font-size:16px;text-align:center;margin:8px 0 6px;color:#ffda38}
.resultsbox .medal{font-size:56px;line-height:1;margin:2px 0}
.resultsbox .sub{margin:4px 0 8px;font-size:12px}
.standings{background:#03122580;border:1px solid #ffffff22;border-radius:10px;padding:4px 6px;backdrop-filter:blur(2px)}
.standings .result{padding:5px 8px;font-size:14px;border-bottom:1px solid #ffffff14}
.standings .result:last-child{border-bottom:0}
.standings .result em{font-style:normal;color:#8fb6d4;font-size:12px}
.standings .result.done span:last-child{color:#7bffb0;animation:tick .5s ease-out}
.standings .result.me.done span:last-child{color:#051a31}
@keyframes tick{from{transform:scale(1.25)}to{transform:none}}
.resultsbox .footerbuttons{padding-top:10px;gap:7px}
.resultsbox .footerbuttons button{min-height:44px}
.resultsbox .footerbuttons .primary{min-height:50px}
.wait{color:#ffd85f!important;animation:blink 1.1s ease-in-out infinite}

/* icona dell'oggetto: foglio di Astra, quattro celle in fila */
.itembtn{position:relative;overflow:visible}
.itembtn .ico{position:absolute;inset:-6%;background:url(assets/items.webp) 0 0/400% 100% no-repeat;visibility:hidden;pointer-events:none;filter:drop-shadow(0 2px 3px #0008)}

/* Separate music/effects settings stay out of the racing view. */
.audio-options{position:absolute;top:65px;right:14px;z-index:8;display:grid;gap:6px;padding:10px;border:2px solid #ffd65d;border-radius:12px;background:#061b34;box-shadow:0 5px 20px #000a}
.audio-options[hidden]{display:none}
.audio-options button{font-size:13px;min-height:40px;padding:5px 14px}

/* menu da tastiera e video con premio */
button.kbsel{outline:4px solid #ffd23c!important;outline-offset:2px;box-shadow:0 0 0 2px #07182b,0 0 18px #ffd23caa!important;filter:brightness(1.15)}
#world:focus{outline:none}
button.reward{background:linear-gradient(#7b4dff,#4b23c9);border-color:#c9b6ff;color:#fff}
button.reward:disabled{opacity:.6;filter:grayscale(.4)}

/* Gran Premio: coppe, trofei, medaglie, vite */
.cups{display:grid;gap:10px}
.cup{position:relative;display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;text-align:left;padding:10px 12px;min-height:74px}
.cup .cupico{grid-row:1/3;width:54px;height:54px;background:url(assets/items.webp) 0 0/400% 100% no-repeat;display:block}
.cup .cupname{font-size:19px}
.cup small{font-size:10px;font-style:normal;color:#b3d0e4;letter-spacing:.3px}
.cup.locked{opacity:.5;filter:grayscale(.8)}
.cup .trophy{position:absolute;right:10px;top:8px}
.trophy{font:900 italic 12px 'Kreeptown',Arial;padding:2px 8px;border-radius:8px;letter-spacing:.5px;white-space:nowrap}
.trophy.t3,.tgt.m3{color:#ffd23c}.trophy.t2,.tgt.m2{color:#dfe9f2}.trophy.t1,.tgt.m1{color:#e79a5a}
.trophy.t3{background:#5a4300}.trophy.t2{background:#3e4c59}.trophy.t1{background:#5a3214}
.trophytable{width:100%;border-collapse:collapse;font:900 italic 13px 'Kreeptown',Arial;margin:6px 0 10px}
.trophytable th{font-size:11px;color:#9fc3dd;padding:4px}
.trophytable td{padding:6px 4px;border-top:1px solid #ffffff1a;text-align:center}
.trophytable td:first-child{text-align:left}
.trophytable .none{color:#ffffff40}
.trophybig{margin:6px auto 10px;text-align:center;font:1000 italic 30px 'Kreeptown',Arial;letter-spacing:1px;text-shadow:2px 3px #070a15}
.trophybig.t3{color:#ffd23c}.trophybig.t2{color:#e6eef5}.trophybig.t1{color:#e79a5a}.trophybig.t0{color:#9fb7c9;font-size:22px}
.lives{text-align:center;font-size:24px;color:#ff4b6e;margin:4px 0 8px;letter-spacing:4px}
.lives span{color:#ff4b6e66}
.result em{font-style:normal;color:#7bffb0;font-size:.85em}
.medalbadge{position:absolute;top:8px;right:8px;font:900 italic 11px 'Kreeptown',Arial;padding:3px 8px;border-radius:6px;background:#04162ce0}
.medalbadge.m3{color:#ffd23c}.medalbadge.m2{color:#e6eef5}.medalbadge.m1{color:#e79a5a}
.classes button small{display:block;font-size:10px;font-style:normal;letter-spacing:1px;color:#ffd85a;margin-top:3px}
.trophybig{background:#04162cd9;border-radius:14px;padding:8px 12px;display:block}
.resultsbox .unlocked{background:linear-gradient(#1c5f3df2,#0d3a27f2)}

/* schermata del campione a fine coppa (podio) */
.champ{position:absolute;inset:0;container-type:size}
.champoval{position:absolute;left:22%;width:56%;top:26.2%;height:12%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7a1414;line-height:1}
.champoval small{font:900 italic 5.2cqw 'Kreeptown',Arial;color:#c0392b;letter-spacing:1px}
.champoval b{font:1000 italic 7.6cqw 'Kreeptown',Arial;color:#b3140f;letter-spacing:.5px;text-shadow:2px 2px 0 #ffd23c;margin:2px 0}
.champoval em{font:900 italic 3.3cqw 'Kreeptown',Arial;font-style:normal;letter-spacing:1px;padding:2px 10px;border-radius:10px;color:#fff}
.champoval em.t3{background:#d9a400}.champoval em.t2{background:#8a99a6}.champoval em.t1{background:#b0662e}
.champbottom{position:absolute;left:5%;right:5%;bottom:2.5%}
.champbottom .footerbuttons{gap:5px;padding-top:5px;grid-template-columns:1fr 1fr}
.champbottom .footerbuttons .primary{grid-column:1/-1}
.champbottom button{min-height:34px;font-size:3.4cqw;background:#0a2945e6}
.champbottom button.primary{background:linear-gradient(#ffdf58,#ffbd19)}
.champunlock{text-align:center;font:900 italic 12px 'Kreeptown',Arial;color:#7bffb0;background:#0d3a27e6;border:1px solid #7bffb0;border-radius:10px;padding:6px}

/* =====================================================================
   ANIMALS KART 2 · 3D — nuovo look dei menu (sopra il volo 3D sulla pista)
   ===================================================================== */
#screen{background:linear-gradient(180deg,#04162ce6 0%,#04162c80 26%,#04162c55 55%,#04162cf0 100%);padding:4.5% 5.5%}
body[data-page="splash"] #screen{background:none}
.ttl{margin-left:44px!important;margin-right:44px!important;font:1000 italic 26px 'Kreeptown',Arial;color:#fff;letter-spacing:.5px;text-shadow:0 3px 0 #070a15,0 0 18px #2aa9ff88;margin:6px 0 14px;transform:rotate(-2deg)}
.ttl::after{content:'';display:block;width:64px;height:5px;border-radius:3px;margin:8px auto 0;background:linear-gradient(90deg,#ffc92c,#ff3644)}

/* logo del seguito */
.ak2top{display:grid;justify-items:center;margin-top:3%}
.ak2logo{position:relative;text-align:center;transform:rotate(-5deg);font:1000 italic clamp(40px,8.2dvh,74px)/.8 'Kreeptown',Arial;letter-spacing:-2px;color:#ffc92c;
  text-shadow:0 5px 0 #b45309,3px 9px 0 #070a15,-2px -2px 0 #070a15,2px -2px 0 #070a15,-2px 2px 0 #070a15}
.ak2logo span{display:block;color:#ff3644;font-size:1.2em;text-shadow:0 5px 0 #8c1020,3px 9px 0 #070a15,-2px -2px 0 #070a15,2px -2px 0 #070a15,-2px 2px 0 #070a15}
.ak2logo .two{position:absolute;right:-.62em;bottom:-.18em;width:1.05em;height:1.05em;border-radius:50%;display:grid;place-items:center;font-size:1.05em;color:#ff3644;
  background:radial-gradient(circle at 35% 30%,#fff9cf,#ffd23c 45%,#e08a00);border:.07em solid #070a15;box-shadow:0 .08em 0 #070a15;text-shadow:2px 3px 0 #070a15;transform:rotate(12deg)}
.ak2tag{margin-top:14px;transform:rotate(-5deg);background:#070a15;color:#7fe8ff;font:900 italic 13px 'Kreeptown',Arial;letter-spacing:4px;padding:6px 16px;border-radius:9px;border:2px solid #7fe8ff;box-shadow:0 0 16px #2ad4ff66}

/* splash: bollino "2 · 3D" sul logo originale */
.seqbadge{position:absolute;left:69%;top:18.5%;width:23%;aspect-ratio:1;z-index:2;transform:rotate(12deg);display:grid;place-items:center;pointer-events:none;animation:badgein .7s cubic-bezier(.2,1.6,.4,1) both .25s}
.seqbadge b{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;color:#ff3644;font:1000 italic calc(min(100vw,56.25dvh)*.17)/1 'Kreeptown',Arial;
  background:radial-gradient(circle at 35% 30%,#fff9cf,#ffd23c 45%,#e08a00);border:5px solid #070a15;box-shadow:0 6px 0 #070a15;text-shadow:3px 4px 0 #070a15}
.seqbadge span{position:absolute;bottom:-12%;background:#ff3644;color:#fff;border:3px solid #070a15;border-radius:10px;padding:1px 12px;font:1000 italic calc(min(100vw,56.25dvh)*.055)/1.2 'Kreeptown',Arial;box-shadow:0 4px 0 #070a15}
@keyframes badgein{from{transform:rotate(-30deg) scale(0)}to{transform:rotate(12deg) scale(1)}}

/* pulsanti */
#screen button{border:3px solid #ffffff2a;background:linear-gradient(#14406c,#0a2441);box-shadow:0 5px 0 #020a16,inset 0 2px 0 #ffffff26;border-radius:16px}
#screen button.primary{background:linear-gradient(#ffe56a,#ffb318);border-color:#fff3a6;color:#3a1600;box-shadow:0 5px 0 #a35b00,0 0 22px #ffcf3a55,inset 0 2px 0 #ffffff88}
.ak2menu{gap:11px}
.mbtn{display:flex;align-items:center;gap:12px;text-align:left;padding:7px 14px;min-height:62px;font-size:20px}
.mbtn i{width:46px;height:46px;flex:none;background:url(assets/items.webp) 0 0/400% 100% no-repeat;filter:drop-shadow(0 2px 2px #0008)}
.mbtn small{display:block;font:700 11px 'Kreeptown',Arial;font-style:normal;letter-spacing:.4px;opacity:.75;margin-top:2px}
.primary.mbtn small{opacity:.8}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mrow button{font-size:15px;min-height:48px}

/* scelta pilota: il kart sotto i riflettori, poi la griglia */
.driver-details.spot{margin:0 0 12px;min-height:200px;border:0;border-radius:18px;overflow:hidden;
  background:radial-gradient(ellipse 60% 70% at 72% 78%,color-mix(in srgb,var(--kc) 55%,transparent),transparent 70%),linear-gradient(160deg,#0f2f52,#071a33);box-shadow:inset 0 0 0 2px #ffffff22,0 6px 18px #0008}
.driver-details.spot .num{font:1000 italic 40px/1 'Kreeptown',Arial;color:var(--kc);-webkit-text-stroke:2px #070a15;opacity:.95}
.driver-details.spot h2{font-size:22px;font-style:italic}
.grid{gap:8px}
.driver{border-radius:12px!important;border:3px solid #ffffff22!important;background:linear-gradient(var(--kc),#0a2441 62%)!important}
.driver.selected{border-color:#ffdc44!important;transform:translateY(-3px)}
.driver span{font-size:11px;letter-spacing:.5px}

/* scelta pista: raggruppata per coppa */
.cupgroup h2{display:flex;align-items:center;gap:8px;font:1000 italic 16px 'Kreeptown',Arial;color:#ffd84a;letter-spacing:1px;margin:6px 0 8px}
.cupgroup .cupico{width:28px;height:28px;background:url(assets/items.webp) 0 0/400% 100% no-repeat;display:inline-block}
.tracks{gap:10px;margin-bottom:6px}
.track{border-radius:14px!important;overflow:hidden}
.track span{font-size:14px;padding:7px 9px}
.newbadge{position:absolute;top:7px;left:7px;background:#ff3644;color:#fff;font:1000 italic 11px 'Kreeptown',Arial;letter-spacing:1px;padding:3px 9px;border-radius:7px;border:2px solid #070a15;transform:rotate(-6deg)}

/* pausa e risultati restano leggibili sopra la pista */
.pausebox{background:#04162cd9;border-radius:18px;padding:18px;box-shadow:0 0 0 2px #ffffff22}
.nogl{position:absolute;left:8%;right:8%;bottom:30%;background:#04162cee;border-radius:12px;padding:12px}

/* =====================================================================
   ANIMAL GO KART 2 — menu sopra il mondo 3D
   ===================================================================== */
#game{background:#0b2a4a}
.hero,.seqbadge{display:none}
body[data-page="splash"] #screen{background:linear-gradient(180deg,#04162c99 0%,transparent 35%,transparent 62%,#04162ce6 100%)}
.splash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12% 6% 7%}
.splash .tap{margin-top:auto;margin-bottom:18px}
.tag3d{margin-top:16px;transform:rotate(-4deg);background:#070a15;color:#7fe8ff;font:900 italic 13px 'Kreeptown',Arial;letter-spacing:3px;padding:6px 14px;border-radius:9px;border:2px solid #7fe8ff;box-shadow:0 0 16px #2ad4ff66}
.glogo{position:relative;display:grid;justify-items:center;transform:rotate(-5deg);font:1000 italic clamp(38px,7.4dvh,66px)/.86 'Kreeptown',Arial;letter-spacing:-2px;animation:logoin .7s cubic-bezier(.2,1.5,.4,1) both}
.glogo .a{color:#ffc92c;text-shadow:0 5px 0 #b45309,3px 9px 0 #070a15,-2px -2px 0 #070a15,2px -2px 0 #070a15,-2px 2px 0 #070a15}
.glogo .b{color:#ff3644;font-size:1.12em;text-shadow:0 5px 0 #8c1020,3px 9px 0 #070a15,-2px -2px 0 #070a15,2px -2px 0 #070a15,-2px 2px 0 #070a15}
.glogo .two{position:absolute;right:-.95em;bottom:-.32em;width:.95em;height:.95em;border-radius:50%;display:grid;place-items:center;font-size:.95em;color:#ff3644;
  background:radial-gradient(circle at 35% 30%,#fff9cf,#ffd23c 45%,#e08a00);border:.07em solid #070a15;box-shadow:0 .08em 0 #070a15;text-shadow:2px 3px 0 #070a15;transform:rotate(12deg)}
.glogo{margin-right:.7em}
@keyframes logoin{from{transform:rotate(-20deg) scale(.3);opacity:0}to{transform:rotate(-5deg) scale(1);opacity:1}}
.gtop{display:grid;justify-items:center;margin:4% 0 2%}
.gmenu{gap:11px}
body[data-page="menu"] #screen{background:linear-gradient(180deg,#04162cb0 0%,#04162c30 30%,#04162c40 50%,#04162cf0 100%)}
/* scelta pilota: kart 3D che gira sulla pedana */
.garage{position:relative;min-height:205px;margin:0 0 12px;border-radius:18px;overflow:hidden;
  background:radial-gradient(ellipse 55% 70% at 70% 80%,color-mix(in srgb,var(--kc) 55%,transparent),transparent 70%),linear-gradient(160deg,#0f2f52,#071a33);box-shadow:inset 0 0 0 2px #ffffff22,0 6px 18px #0008}
.garage canvas{position:absolute;right:-2%;bottom:2px;width:60%;height:auto}
.garage .stats{position:relative;width:44%;padding:12px 0 12px 14px;z-index:1}
.garage .num{font:1000 italic 40px/1 'Kreeptown',Arial;color:var(--kc);-webkit-text-stroke:2px #070a15}
.garage h2{font-size:21px;font-style:italic;margin:0 0 6px}
.garage .stat{display:block;margin:7px 0;font-size:12px}
.garage progress{display:block;margin-top:3px;height:10px;width:100%}
.track .picture{background-size:cover!important;background-position:center!important}
/* fine coppa: l'illustrazione del campione, con coppa e trofeo dentro l'ovale */
.champ{background:#0a2945;isolation:isolate}
.champart{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;pointer-events:none}
.champoval{left:24.5%!important;width:51%!important;top:28.2%!important;height:10.6%!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;transform:none!important}
.champoval small{font:900 italic 4.6cqw 'Kreeptown',Arial!important;color:#c0392b!important;letter-spacing:1px}
.champoval b{font:1000 italic 7.4cqw 'Kreeptown',Arial!important;color:#b3140f!important;text-shadow:2px 2px 0 #ffd23c!important;margin:2px 0}
.champoval em{font:900 3.2cqw 'Kreeptown',Arial!important;padding:2px 10px;border-radius:10px;color:#fff!important}
.champbottom button{font-size:14px!important;min-height:40px!important;background:#0a2945e6}
/* logo ufficiale */
.glogoimg{display:block;width:94%;max-width:430px;height:auto;margin:0 auto;filter:drop-shadow(0 6px 10px #0009);animation:logoin2 .7s cubic-bezier(.2,1.5,.4,1) both;pointer-events:none}
.gtop .glogoimg{width:82%;max-width:360px}
@keyframes logoin2{from{transform:scale(.3) rotate(-10deg);opacity:0}to{transform:none;opacity:1}}

/* splash nuovo: illustrazione a tutto schermo, CLICK OR TAP al centro, MAPI rosso in basso */
body[data-page="splash"] #screen{background:#0b2a4a;padding:0}
.splash{padding:0;justify-content:flex-end;isolation:isolate}
.splashart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
.splash .tap{position:absolute;left:50%;top:44.5%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;background:#04182bd9;border:3px solid #ffffffaa;box-shadow:0 5px 0 #020a16,0 0 22px #0008;font-size:calc(min(100vw,56.25dvh)*.046);padding:.6em 1.3em;border-radius:40px!important;animation:splashpulse 1.1s ease-in-out infinite}
@keyframes splashpulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.07);opacity:.88}}
.splash .mapi{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%)}
.splash .mapi img{width:calc(min(100vw,56.25dvh)*.33)}

/* icone menu principale (illustrazioni di Pino) */
.mbtn i.mico{width:54px;height:54px;margin:-4px 0;background-position:center!important;background-size:contain!important;background-repeat:no-repeat}

/* Spooky Racing: Halloween palette and dimensional menus. */
html,body{background:#100b1b;color:#fff5df}
#game{background:#211238;box-shadow:0 0 100px #7c36a44d}
#screen{background:linear-gradient(160deg,#1c102af5,#341b46ec 58%,#201328f5)}
button{font-style:normal;letter-spacing:.5px}
#screen button{background:linear-gradient(#603879,#321d4d);border-color:#b78cca66;box-shadow:0 5px 0 #130c20,inset 0 2px 0 #ffffff2e}
#screen button.primary{background:linear-gradient(#ffc55c,#f77c22);border-color:#ffe8aa;box-shadow:0 5px 0 #8d3a16,0 0 22px #ff933c44,inset 0 2px 0 #fff9}
.glogoimg{width:94%;max-width:450px}.gtop .glogoimg{width:86%;max-width:380px}
body[data-page="menu"] #screen{background:linear-gradient(180deg,#1c102ab0,transparent 28%,#1c102a20 50%,#1c102af5)}
.menu{padding-bottom:2%}.mbtn{min-height:64px;font-size:21px}.mbtn small{font-size:11px;font-weight:400}
.sub{color:#ddc4e6}.sub b,.help b{color:#ffc55d}
.garage{background:radial-gradient(ellipse at 70% 80%,color-mix(in srgb,var(--kc) 60%,transparent),transparent 65%),linear-gradient(160deg,#432457,#1d1430)}
.portrait{background-size:contain;background-color:#21132b;background-repeat:no-repeat}
.driver span{font-size:11px;letter-spacing:0;padding:6px 1px;white-space:nowrap}
.track.locked{opacity:.8;filter:none}.track.locked .picture{filter:brightness(.65)}
.lockbadge,.medalbadge{background:#20132de6}.badge,.speed,#timer,#corner{background:#231333e8}
.meter i{background:repeating-linear-gradient(110deg,#b5f45f 0 10px,#4c7432 10px 13px)}
#touch button{background:#351b4bd9;border-color:#bf93db88}.turbo{color:#bbf76c!important}
.pausebox,.audio-options{background:#251333ed;border-color:#eeb559}.help{color:#f0e0f2}
.splash-title{position:absolute;left:3%;right:3%;top:3%;display:grid;justify-items:center}
.splash .tap{top:auto;bottom:13%;font-size:calc(min(100vw,56.25dvh)*.047);background:#241236ed;border-color:#ffd394;padding:.7em 1em}
.splash .mapi{bottom:2.5%}.splash .mapi img{width:calc(min(100vw,56.25dvh)*.3)}
.tap{font-style:normal}.ttl,h1,h2{font-style:normal}
.champ{background:radial-gradient(ellipse at 50% 30%,#84529c,#22132f)}
.champart{object-fit:cover;filter:brightness(.7)}

body[data-page="splash"] .soundbtn{display:none}
.splash-title .glogoimg{width:90%;max-width:650px}
.champoval{left:8%!important;width:84%!important;top:5%!important;height:auto!important;min-height:17%;padding:12px!important;background:#241333e8!important;border:2px solid #e6b560!important;border-radius:22px;box-shadow:0 7px 0 #130b20!important}
.champoval small{color:#f5e8d2!important;font-size:4.2cqw!important}
.champoval b{color:#ffc862!important;font-size:7cqw!important;text-shadow:0 3px #8c3a25!important}
.champoval em{font-size:3.2cqw!important}
.champart{opacity:.4}
@media(prefers-reduced-motion:reduce){.splash .tap{animation:none}}

#game{container-type:inline-size}.driver span{font-size:2.45cqw;letter-spacing:0}

button{background-color:#351c4a;border-color:#a77cc2}#bestlap{background:#29153bcc;color:#e9d1f5}#technique{color:#bbf475}#corner{border-color:#b48ac966}.stat progress::-webkit-progress-bar{background:#291c3c}


/* ===== v3: options, gamepad, effetti HUD ===== */
.mrow.three{grid-template-columns:1fr 1fr 1fr}
.mrow.three button{font-size:13px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mrow.three small{font-size:10px;opacity:.75}
.menu.options,.menu.padmap{display:grid;gap:9px;width:100%;max-width:400px;margin:0 auto}
.menu.options button,.menu.padmap button{display:flex;justify-content:space-between;align-items:center;min-height:50px;padding:0 18px;font-size:15px;text-align:left}
.menu.options button b,.menu.padmap button b{color:#ffc55d;font-size:13px;letter-spacing:.5px;white-space:nowrap}
.menu.padmap button{min-height:44px}
.menu.padmap button.capturing{animation:capt .6s ease-in-out infinite alternate;border-color:#ffd23c}
.menu.padmap button.capturing b{color:#fff}
@keyframes capt{from{box-shadow:0 0 0 #ffd23c00}to{box-shadow:0 0 22px #ffd23ccc;filter:brightness(1.25)}}
.sub.small{font-size:11px;opacity:.8;max-width:380px;margin-left:auto;margin-right:auto}
body.padmode #touch{display:none!important}
#technique[data-tier="1"]{color:#6cc4ff!important;text-shadow:0 0 10px #2f8cff}
#technique[data-tier="2"]{color:#ffb052!important;text-shadow:0 0 10px #ff7a1c}
#technique[data-tier="3"]{color:#e08cff!important;text-shadow:0 0 12px #b13cff;font-size:13px}
#notice{text-shadow:3px 4px #1a0b2a,0 0 26px #ff9a2a99;-webkit-text-stroke:1px #1a0b2a;animation:noticepop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes noticepop{from{transform:scale(1.5);opacity:.2}to{transform:scale(1);opacity:1}}