html,body{margin:0;height:100%;background:#070a1a;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none;touch-action:none}
canvas{display:block}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;text-align:center;background:radial-gradient(transparent 15%,rgba(5,8,25,.82));padding:16px;box-sizing:border-box;overflow:auto}
.screen.hide{display:none}
.screen h1{font-size:clamp(40px,9vw,84px);margin:0 0 6px;letter-spacing:2px;background:linear-gradient(#ffe36e,#ff7a3d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 12px #000a)}
.screen h1{text-wrap:balance}
.screen p{margin:6px 0;opacity:.9;line-height:1.6;text-shadow:0 2px 6px #000;text-wrap:pretty}
.help{font-size:14px;opacity:.85!important}
@media (pointer:coarse){.help.keys,.ctrlCard.keys{display:none}}
body.touch .help.keys,body.touch .ctrlCard.keys{display:none}
.screen h1,.card b,.wallet,.price,.stat b,#shop h2{font-family:Fredoka,system-ui,sans-serif}
.screen h1{font-weight:700;filter:drop-shadow(0 3px 0 #8a3510) drop-shadow(0 6px 14px #000c)}
.logo{display:block;width:auto;max-width:min(560px,84vw);max-height:26vh;margin:0 auto;filter:drop-shadow(0 6px 18px #000c)}
#worlds{display:grid;grid-template-columns:repeat(3,minmax(0,150px));gap:12px;margin:12px 0 8px}
@media (max-width:660px){#worlds{grid-template-columns:repeat(2,minmax(0,150px))}}
/* carte quasi opache: si leggono anche sopra il pianeta che gira nel menu */
.card{background:linear-gradient(#242b66,#161b45);border:3px solid var(--ink);border-radius:18px;padding:12px 10px;color:#fff;font:inherit;cursor:pointer;box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #ffffff1a;transition:transform .15s,box-shadow .15s}
.card .pl{width:58px;height:58px;border-radius:50%;margin:0 auto 8px}
.card b{display:block;font-size:17px}
.card small{display:block;opacity:.8;margin-top:4px;font-size:13px;min-height:16px}
.card.on{box-shadow:0 4px 0 var(--ink),inset 0 0 0 3px #5be28f}
.btn:focus,.card:focus{outline:none}
.card:disabled{cursor:not-allowed}
.card:disabled>*{opacity:.4}
.card.sel{transform:translateY(-3px);box-shadow:0 7px 0 var(--ink),0 0 0 3px #ffe36e}
.btn{background:linear-gradient(#ffe46b,#ffb52e 62%,#f39a1e);color:#3a2205;border:3px solid var(--ink);border-radius:16px;padding:10px 22px;font:700 18px Fredoka,system-ui,sans-serif;cursor:pointer;margin:6px;box-shadow:0 4px 0 var(--ink),inset 0 -4px 0 #0002,inset 0 2px 0 #fff8;transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(3px) scale(.96);box-shadow:0 1px 0 var(--ink),inset 0 -4px 0 #0002,inset 0 2px 0 #fff8}
.card:active:not(:disabled){transform:scale(.96)}
.btn,.price{display:inline-flex;align-items:center;justify-content:center;gap:.4em}
.i{width:1.2em;height:1.2em;vertical-align:-.25em;display:inline-block;flex-shrink:0;object-fit:contain}
.ok{color:#5be28f}
.btn.ghost{background:linear-gradient(#2b3270,#1a1f4d);color:#fff;text-shadow:0 2px 0 var(--ink);box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #ffffff22}
.btn.sel{outline:3px solid #fff;outline-offset:2px}
#levels{background:rgba(6,9,28,.84)}
#pause{background:rgba(6,9,28,.7)}
#over,#clear{background:rgba(6,9,28,.74)}
.stats{display:flex;gap:12px;margin:14px 0 8px;flex-wrap:wrap;justify-content:center}
.stat{background:linear-gradient(#242b66,#161b45);border:3px solid var(--ink);border-radius:18px;padding:12px 18px;min-width:96px;box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #ffffff1a;font-variant-numeric:tabular-nums}
.stat b{display:flex;align-items:center;justify-content:center;gap:6px;font-size:26px}
.stat small{opacity:.8;font-size:13px}
#lvgrid{display:grid;grid-template-columns:repeat(4,minmax(0,150px));gap:14px;margin:16px 0 12px}
@media (max-width:660px){#lvgrid{grid-template-columns:repeat(2,minmax(0,150px))}}
.medals{font-size:20px;margin-top:6px;display:flex;gap:6px;justify-content:center}
.shopgrid .ic .i{width:58px;height:58px}
.medals .off{opacity:.2;filter:grayscale(1)}
#shop{justify-content:flex-start;padding-top:24px;background:rgba(6,9,28,.9)}
#worldsScr,#options{background:rgba(6,9,28,.84)}
/* ---------- Lobby in stile giochi mobile: contorni scuri spessi, pulsanti in rilievo, scritte con bordo ---------- */
:root{--ink:#0b0920;--outline:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),1.5px 1.5px var(--ink),-1.5px 1.5px var(--ink),1.5px -1.5px var(--ink),-1.5px -1.5px var(--ink),0 4px 0 var(--ink)}
#menu{background:linear-gradient(rgba(5,8,25,.7),transparent 24%,transparent 60%,rgba(5,8,25,.75));justify-content:flex-start;gap:4px;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left))}
body.lobby .screen,body.lobby #menu{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.topbar{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:980px;gap:8px}
.profile{display:flex;align-items:center;gap:8px;background:linear-gradient(#2b3270,#1a1f4d);border:3px solid var(--ink);border-radius:16px;padding:4px 12px 4px 4px;box-shadow:0 3px 0 var(--ink),inset 0 2px 0 #ffffff22}
.badge{width:40px;height:40px;display:grid;place-items:center;font:700 20px Fredoka,system-ui,sans-serif;background:linear-gradient(#6fc6ff,#2a63d6);border:3px solid var(--ink);border-radius:12px;box-shadow:inset 0 -4px 0 #0003,inset 0 2px 0 #fff6;text-shadow:var(--outline)}
.pinfo b{display:block;font:700 15px Fredoka,system-ui,sans-serif;text-align:left;text-shadow:0 2px 0 var(--ink)}
.bar{position:relative;width:104px;height:17px;background:var(--ink);border-radius:99px;overflow:hidden;margin-top:3px}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(#ffe36e,#ffad24)}
.bar span{position:relative;display:flex;align-items:center;justify-content:center;gap:3px;font:700 11px/17px Fredoka,system-ui,sans-serif;text-shadow:0 1px 0 #000,0 0 2px #000}
.bar .i{width:11px;height:11px;vertical-align:0}
.chips{display:flex;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(#20265e,#11143a);border:3px solid var(--ink);border-radius:99px;padding:4px 10px;font:700 17px Fredoka,system-ui,sans-serif;color:#fff;text-shadow:0 2px 0 var(--ink);box-shadow:0 3px 0 var(--ink)}
button.chip{cursor:pointer;padding-right:5px}
.chip .plus{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:linear-gradient(#7be86a,#2fae4a);border:2px solid var(--ink);margin-left:2px}
.chip .plus .i{width:14px;height:14px;vertical-align:0}
#menu .logo{max-height:15vh;max-width:min(400px,70vw)}
#menu #title{margin:0;font-size:clamp(30px,7vw,56px)}
#menu #title:has(.logo){background:none;filter:none} /* Safari disegnava l ombra del titolo come un rettangolo dietro il logo */
.showcase{flex:1;width:100%;display:flex;justify-content:center;align-items:flex-start;min-height:0;padding-top:4px}
.ribbon{display:flex;align-items:center;gap:10px}
.rtext{background:linear-gradient(#ffd25a,#f39a1e);border:3px solid var(--ink);border-radius:14px;padding:2px 22px 6px;min-width:150px;box-shadow:0 4px 0 var(--ink),inset 0 -4px 0 #0002,inset 0 2px 0 #fff8}
.rtext small{display:block;font:700 11px Fredoka,system-ui,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#6a3a08}
.rtext b{display:block;font:700 23px Fredoka,system-ui,sans-serif;line-height:1.1;text-shadow:var(--outline)}
.btn.arrow{width:44px;height:44px;padding:0;margin:0;border-radius:12px;background:linear-gradient(#3e47a0,#232a66);border:3px solid var(--ink);color:#fff;box-shadow:0 3px 0 var(--ink),inset 0 2px 0 #fff3}
.btn.arrow .i{width:24px;height:24px}
.btn.arrow:disabled{opacity:.3;cursor:default}
.playArea{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:12px}
.dots{display:flex;gap:9px;align-items:center;background:rgba(8,10,32,.72);border:2px solid #ffffff14;border-radius:99px;padding:5px 12px}
.dot{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#1a1f4d;border:3px solid var(--ink);font:700 14px Fredoka,system-ui,sans-serif;color:#fffc;box-shadow:0 2px 0 var(--ink)}
.dot .i{width:16px;height:16px;vertical-align:0}
.dot.boss{background:linear-gradient(#ff7ab0,#c2306a);color:#fff}
.dot.done{background:linear-gradient(#7be86a,#2fae4a);color:#fff}
.dot.cur{background:linear-gradient(#ffe36e,#ffad24);color:#3a2205;transform:scale(1.22)}
.dot.locked{opacity:.4}
.btn.play{flex-direction:column;gap:0;min-width:min(290px,78vw);padding:8px 30px 12px;margin:0 0 6px;border-radius:22px;background:linear-gradient(#ffe46b,#ffb52e 62%,#f39a1e);border:4px solid var(--ink);color:#fff;box-shadow:0 7px 0 var(--ink),inset 0 -7px 0 #0002,inset 0 3px 0 #fff9;animation:breathe 1.6s ease-in-out infinite;transition:transform .08s,box-shadow .08s}
.btn.play .pl{display:flex;align-items:center;gap:8px;font:700 36px Fredoka,system-ui,sans-serif;letter-spacing:2px;text-shadow:var(--outline)}
.btn.play .pl .i{width:30px;height:30px;filter:drop-shadow(0 3px 0 var(--ink))}
.btn.play small{font:700 14px Fredoka,system-ui,sans-serif;color:#5a3006}
.btn.play.sel{outline-offset:3px}
.btn.play:active{animation:none;transform:translateY(5px);box-shadow:0 2px 0 var(--ink),inset 0 -7px 0 #0002,inset 0 3px 0 #fff9}
@keyframes breathe{50%{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.btn.play{animation:none}}
@media (max-height:520px){#menu #title{display:none}.btn.play .pl{font-size:28px}.playArea{gap:8px}}
/* telefono in orizzontale: Gioca in basso a destra (il pianeta resta libero al centro), schede più basse */
@media (orientation:landscape) and (max-height:520px){
  .playArea{position:absolute;right:calc(16px + env(safe-area-inset-right));bottom:calc(78px + env(safe-area-inset-bottom));padding:0}
  .btn.play{min-width:220px;padding:6px 22px 10px}
  #tabbar{padding-top:3px}.tab{padding:3px 2px;font-size:11px}.tab .i{width:22px;height:22px}.tab.on{transform:translateY(-8px)}
  body.lobby .screen,body.lobby #menu{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
/* barra delle schede: la scheda attiva si alza */
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:4px;padding:6px calc(8px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));background:linear-gradient(#272d6a,#141842);border-top:3px solid var(--ink);box-shadow:inset 0 3px 0 #ffffff14}
#tabbar.hide{display:none}
.tab{flex:1;max-width:118px;display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:3px solid transparent;border-radius:14px;color:#c3c9ec;font:700 12px Fredoka,system-ui,sans-serif;padding:5px 2px;cursor:pointer;text-shadow:0 2px 0 var(--ink);transition:transform .15s,background .15s}
.tab .i{width:28px;height:28px;filter:drop-shadow(0 2px 0 var(--ink))}
.tab.home .i{color:#ffe36e}
.tab.on{background:linear-gradient(#5560bf,#323a88);border-color:var(--ink);color:#fff;transform:translateY(-12px);box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #fff3}
.tab.sel{border-color:#fff}
.tab:focus{outline:none}
.optList{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:min(320px,90vw);margin:10px 0 14px}
.btn.danger{color:#ffb3bf}
/* volume: etichetta, − barra a tacche + */
.vol{display:flex;align-items:center;gap:6px;margin:2px 6px 8px;padding:6px 8px;background:linear-gradient(#242b66,#161b45);border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #ffffff1a}
.vlab{display:inline-flex;align-items:center;gap:.35em;min-width:5.2em;font:700 16px Fredoka,system-ui,sans-serif;color:#fff;text-shadow:0 2px 0 var(--ink)}
.btn.vb{width:42px;height:40px;padding:0;margin:0;border-radius:12px;font-size:24px;line-height:1;flex:none}
.vbar{flex:1;display:flex;gap:3px;height:20px;padding:3px;background:var(--ink);border-radius:99px}
.vbar i{flex:1;border-radius:99px;background:#2b3270}
.vbar i.on{background:linear-gradient(#ffe46b,#f39a1e);box-shadow:inset 0 2px 0 #fff8}
#options h2{margin:8px 0 4px;font:600 14px Fredoka,system-ui,sans-serif;letter-spacing:1.5px;text-transform:uppercase;opacity:.75}
#shop h1{font-size:clamp(34px,7vw,58px)}
#shop h2{margin:14px 0 8px;font-size:13px;opacity:.75;letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 2px 6px #000}
.wallet{font-size:22px;font-weight:800;color:#ffe36e!important;opacity:1!important}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;width:min(820px,100%);flex-shrink:0}
.shopgrid .card{padding:10px 8px}
.card .ic{font-size:30px;display:block;margin-bottom:4px;color:#ffe36e;line-height:1}
.pips{letter-spacing:3px;color:#ffe36e;font-size:12px;margin-top:4px}
.price{margin-top:7px;padding:3px 11px;border-radius:99px;background:#ffd36e;color:#2a1a10;font-weight:800;font-size:13px}
.owned{color:#ffe36e;font-size:13px;margin-top:4px}
.price.inuse{background:#5be28f;color:#0f3a22}
/* in cima al negozio, sempre visibili: Indietro e monete */
.shopTop{position:sticky;top:-24px;z-index:3;display:flex;justify-content:space-between;align-items:center;width:min(820px,100%);flex-shrink:0;background:rgba(10,13,38,.95);border:2px solid #ffffff1a;border-radius:18px;padding:4px 10px 4px 4px;margin-bottom:4px}
.shopTop .btn{margin:0}
.shopTop .wallet{margin:0}
.price.no{background:#ffffff22;color:#fffa}
.swatch{width:30px;height:38px;border-radius:11px;margin:2px auto 6px;box-shadow:inset 6px -6px 0 #0002}
.card.bump{animation:bump .3s}
@keyframes bump{30%{transform:translateX(-6px)}60%{transform:translateX(6px)}}
.k{display:inline-block;border:1px solid #fff6;border-radius:6px;padding:0 7px;margin:0 2px;background:#ffffff1a;font-size:14px}
/* comandi touch: solo durante il gioco, lontani da notch e bordi arrotondati */
#touch{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));display:none;justify-content:space-between;align-items:flex-end;pointer-events:none}
#touch.off{visibility:hidden}
#touch div{display:flex;gap:12px}
#touch button{pointer-events:auto;width:78px;height:78px;border-radius:50%;border:2px solid #ffffff55;background:#ffffff22;color:#fff;font-size:20px;font-weight:800;touch-action:none}
#touch button .i{width:30px;height:30px}
/* pad analogico: il pomello segue il pollice */
#touch #stick{pointer-events:auto;position:relative;width:140px;height:140px;border-radius:50%;border:2px solid #ffffff44;background:#ffffff14;touch-action:none}
#stick span{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;border-radius:50%;background:#ffffff40;border:2px solid #ffffff88;transition:transform .1s}
#stick.on span{transition:none}
@media (max-height:420px){#touch #stick{width:120px;height:120px} #touch button{width:68px;height:68px}}
#touch #tPause{position:fixed;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));width:46px;height:46px}
#touch #tPause .i{width:20px;height:20px}

/* opzioni dalla barra in alto */
.btn.gear{width:44px;height:44px;padding:0;margin:0;border-radius:14px;background:linear-gradient(#3e47a0,#232a66);border:3px solid var(--ink);color:#fff;box-shadow:0 3px 0 var(--ink),inset 0 2px 0 #fff3}
.btn.gear .i{width:24px;height:24px}
/* aspetto */
#skinsScr,#recordsScr{background:rgba(6,9,28,.88);justify-content:flex-start;padding-top:calc(20px + env(safe-area-inset-top))}
.skinPreview{display:flex;flex-direction:column;align-items:center;margin:4px 0 12px}
.skinPreview img{height:min(22vh,170px);filter:drop-shadow(0 8px 0 #0006);animation:bob 1.4s ease-in-out infinite}
.skinPreview img.cosmico{animation:bob 1.4s ease-in-out infinite,hue 3s linear infinite}
.skinPreview b{font:700 24px Fredoka,system-ui,sans-serif;text-shadow:var(--outline);margin-top:6px}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes hue{to{filter:hue-rotate(360deg) saturate(1.6) drop-shadow(0 8px 0 #0006)}}
@media (prefers-reduced-motion:reduce){.skinPreview img{animation:none}}
/* classifica */
#recList{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;width:min(900px,100%);margin:8px 0 14px;flex-shrink:0}
.recWorld{background:rgba(14,18,48,.88);border:3px solid var(--ink);border-radius:16px;padding:10px 12px;text-align:left;box-shadow:0 3px 0 var(--ink)}
.recWorld h3{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;font:700 18px Fredoka,system-ui,sans-serif;text-shadow:0 2px 0 var(--ink)}
.recWorld h3 small{font:600 13px Fredoka,system-ui,sans-serif;color:#ffe36e}
.recRow{display:grid;grid-template-columns:52px 1fr;gap:2px 8px;align-items:baseline;padding:4px 0;border-top:1px solid #ffffff14}
.recRow b{font:700 15px Fredoka,system-ui,sans-serif;color:#c9cfee}
.recRow .best{font:700 18px Fredoka,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.recRow .rest{grid-column:2;font-size:12px;opacity:.7;font-variant-numeric:tabular-nums}
.recRow .none{opacity:.45;font-size:14px}
/* comandi: una scheda per dispositivo */
.ctrls{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;width:min(820px,100%);margin:6px 0 14px}
.ctrlCard{background:rgba(14,18,48,.88);border:3px solid var(--ink);border-radius:16px;padding:10px 14px 12px;text-align:left;box-shadow:0 3px 0 var(--ink)}
.ctrlCard h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:700 17px Fredoka,system-ui,sans-serif;color:#ffe36e;text-shadow:0 2px 0 var(--ink)}
.ctrlCard dl{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;margin:0;align-items:center}
.ctrlCard dt{font-size:14px;opacity:.85}
.ctrlCard dd{margin:0;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;align-items:center;font-size:13px;opacity:.9}
.ctrlCard .k{margin:0;min-width:16px;text-align:center;font:600 13px Fredoka,system-ui,sans-serif;border-bottom-width:3px}
.ctrlCard .k .i{width:15px;height:15px;vertical-align:-.2em}
.ctrlCard .or{opacity:.6;font-size:12px;margin:0 2px}
body:not(.touch) .ctrlCard.touch{display:none}
body.touch .ctrlCard.touch{order:-1} /* sul telefono la scheda touch viene prima */

/* azioni di pausa, game over e mondo completato: la principale a tutta larghezza, le altre due affiancate */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(440px,100%);margin-top:10px}
.actions .btn{margin:0}
.actions .btn:first-child{grid-column:1/-1;font-size:22px;padding:13px 22px}
/* miniature dei pianeti nei livelli: tonde (il PNG ha gli angoli neri) */
.card .ic img{border-radius:50%}
/* numeri che cambiano: cifre della stessa larghezza */
.chip,.badge,.bar span,.wallet,.price,.recRow,.card small{font-variant-numeric:tabular-nums}
/* legende corte: righe bilanciate, niente parola sola in fondo */
#levels>p,#worldsScr .help,#recTotal{text-wrap:balance}
/* legende: ogni voce resta intera, senza "·" a fine riga */
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 16px}
.legend>span{white-space:nowrap}
/* col dito niente anello di selezione: compare solo navigando con tastiera o gamepad (body.kbnav) */
body.touch:not(.kbnav) .btn.sel,body.touch:not(.kbnav) .tab.sel{outline:none}
body.touch:not(.kbnav) .card.sel{transform:none;box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #ffffff1a}
/* profilo nella lobby: è un pulsante (apre la pagina Profilo) */
button.profile{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .12s}
button.profile:active{transform:scale(.96)}
.pinfo b{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* pagina Profilo */
#profileScr{background:rgba(6,9,28,.88);justify-content:flex-start;padding-top:calc(24px + env(safe-area-inset-top))}
.profCard{display:flex;align-items:center;gap:14px;width:min(520px,100%);background:linear-gradient(#2b3270,#1a1f4d);border:3px solid var(--ink);border-radius:22px;padding:14px 16px;box-shadow:0 5px 0 var(--ink),inset 0 2px 0 #ffffff22;flex-shrink:0}
.profCard img{height:112px;flex-shrink:0;animation:bob 1.4s ease-in-out infinite}
.profCard img.cosmico{animation:bob 1.4s ease-in-out infinite,hue 3s linear infinite}
.profInfo{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#profName{width:100%;box-sizing:border-box;font:700 23px Fredoka,system-ui,sans-serif;color:#fff;background:#0b0920;border:2px solid #ffffff22;border-radius:12px;padding:4px 10px;text-shadow:0 2px 0 var(--ink);user-select:text;-webkit-user-select:text}
#profName:focus{outline:none;border-color:#ffe36e}
.rank{font:700 13px Fredoka,system-ui,sans-serif;color:#ffe36e;letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 2px 0 var(--ink)}
.xpRow{display:flex;align-items:center;gap:8px;width:100%}
.xpRow .badge{width:34px;height:34px;font-size:17px;flex-shrink:0}
.bar.big{flex:1;width:auto;height:22px;margin:0}
.bar.big span{line-height:22px;font-size:12px}
#profStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));width:min(520px,100%);gap:10px;flex-shrink:0}
#profStats .stat{min-width:0;padding:10px 8px}
#profStats .stat b{font-size:22px}
@media (prefers-reduced-motion:reduce){.profCard img{animation:none}}
/* avvisi fuori dalla partita: sopra le schermate e la barra delle schede */
#toastEl{position:fixed;left:50%;bottom:calc(104px + env(safe-area-inset-bottom));z-index:9;max-width:min(440px,calc(100% - 32px));box-sizing:border-box;padding:10px 16px;border-radius:16px;background:rgba(10,13,38,.96);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #ffffff1a;font:600 15px Fredoka,system-ui,sans-serif;text-align:center;text-wrap:balance;pointer-events:none;opacity:0;transform:translate(-50%,8px);transition:opacity .2s,transform .2s}
#toastEl.on{opacity:1;transform:translate(-50%,0)}
#toastEl .i{width:1.15em;height:1.15em;vertical-align:-.22em}
/* sfide: pulsante laterale nella lobby, con il numero dei premi da riscuotere */
.btn.side{position:absolute;left:calc(12px + env(safe-area-inset-left));top:38%;z-index:2;flex-direction:column;gap:0;width:64px;height:64px;padding:0;margin:0;border-radius:18px;background:linear-gradient(#3e47a0,#232a66);color:#fff;box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #fff3}
.btn.side .i{width:30px;height:30px;color:#ffe36e;filter:drop-shadow(0 2px 0 var(--ink))}
.btn.side small{font:700 12px Fredoka,system-ui,sans-serif;text-shadow:0 2px 0 var(--ink)}
.btn.side.pronte{background:linear-gradient(#7be86a,#2fae4a);animation:breathe 1.6s ease-in-out infinite}
.btn.side .num{position:absolute;top:-10px;right:-10px;min-width:24px;height:24px;box-sizing:border-box;padding:0 5px;border-radius:99px;background:#ff3d6e;border:3px solid var(--ink);font:700 13px/18px Fredoka,system-ui,sans-serif;color:#fff}
.btn.side .num.hide{display:none}
@media (prefers-reduced-motion:reduce){.btn.side.pronte{animation:none}}
/* pagina Sfide: una carta per sfida (icona, testo, barra, premio) */
#sfideScr{background:rgba(6,9,28,.88);justify-content:flex-start;padding-top:calc(20px + env(safe-area-inset-top))}
#sfideList{display:flex;flex-direction:column;gap:12px;width:min(560px,100%);margin:8px 0 10px;flex-shrink:0}
.card.sfida{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px}
.card.sfida .ic{margin:0}
.card.sfida .ic .i{width:44px;height:44px}
.card.sfida .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.card.sfida .price{margin:0;white-space:nowrap}
.price.go{background:linear-gradient(#7be86a,#2fae4a);color:#fff;border:2px solid var(--ink);text-shadow:0 1px 0 var(--ink);font-size:15px;padding:5px 12px}
@media (max-height:520px){#sfideScr h1{font-size:34px;margin:0}#sfideScr .wallet{margin:0;font-size:18px}#sfideList{gap:8px;margin-top:4px}.card.sfida{padding:6px 12px}}
/* interruttore nascosto per il "tic" su iPhone: deve esistere nella pagina ma non si vede */
#hapticTick{position:fixed;left:-200px;top:0;opacity:0;pointer-events:none}
/* classifica: interruttore I miei tempi / Mondiale e righe della classifica mondiale */
.seg{display:flex;gap:8px;margin:2px 0 8px}
.seg .btn{margin:0;padding:8px 16px;font-size:16px}
.seg .btn.on{background:linear-gradient(#ffe46b,#ffb52e 62%,#f39a1e);color:#3a2205;text-shadow:none}
#recWorldNav{margin:2px 0 6px}
#recWorldNav.hide,#recShare.hide{display:none}
.recRow.me{background:#ffe36e1f;border-radius:8px}
.recRow .best small{font:600 13px Fredoka,system-ui,sans-serif;opacity:.85;margin-left:6px}
/* tutorial: riquadro come i suggerimenti del canvas (contorno scuro, gradiente blu, rilievo) in alto al centro;
   in orizzontale sta fra i gruppi dell'HUD, in verticale sotto */
#tuto{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top));transform:translateX(-50%);z-index:4;width:min(440px,calc(100% - 400px));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;text-align:center}
#tuto.hide{display:none}
#tutoBox{width:100%;box-sizing:border-box;padding:6px 14px 9px;border-radius:18px;background:linear-gradient(#2b3270,#1a1f4d);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink),inset 0 0 0 2px #ffe36e,inset 0 3px 0 #ffffff22;font-family:Fredoka,system-ui,sans-serif;transition:box-shadow .2s}
#tuto.ok #tutoBox{box-shadow:0 4px 0 var(--ink),inset 0 0 0 2px #5be28f,inset 0 3px 0 #ffffff22;animation:tutoOk .35s}
#tutoBox small{display:flex;align-items:center;justify-content:center;gap:5px;font:700 12px Fredoka,system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:#ffe36e;text-shadow:0 2px 0 var(--ink)}
#tuto.ok #tutoBox small{color:#8ff59a}
#tutoBox p{margin:3px 0 0;font:600 18px/1.35 Fredoka,system-ui,sans-serif;text-shadow:0 2px 0 var(--ink);text-wrap:balance}
#tutoBox .k{font:600 15px Fredoka,system-ui,sans-serif;border-bottom-width:3px;padding:0 8px;background:#ffffff26}
#tutoBox .k .i{width:16px;height:16px;vertical-align:-.2em}
#tutoSkip{pointer-events:auto;margin:0;padding:5px 14px;font-size:14px;border-radius:12px}
#tutoSkip .k{font-size:12px;padding:0 5px}
@keyframes tutoOk{40%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){#tuto.ok #tutoBox{animation:none}}
@media (orientation:portrait),(max-width:700px){#tuto{top:calc(104px + env(safe-area-inset-top));width:calc(100% - 32px)}}
/* telefono in orizzontale: riquadro più basso e "Salta" a sinistra sotto l'HUD, così l'astronauta resta scoperto */
@media (orientation:landscape) and (max-height:520px){
  #tutoBox{padding:3px 12px 6px}
  #tutoBox p{font-size:16px;margin-top:1px}
  #tutoSkip{position:fixed;left:calc(8px + env(safe-area-inset-left));top:calc(104px + env(safe-area-inset-top))}
}