/* Rifinitura generale: transizioni, feedback, accessibilità, mobile */
*{-webkit-tap-highlight-color:transparent}
button,.tile,.chip,.iconbtn,.btn{touch-action:manipulation;user-select:none;-webkit-user-select:none}
section.on:not(#screen-game):not(#screen-s3d){animation:scrIn .34s cubic-bezier(.2,.8,.2,1) both}
section.on>*{will-change:auto}
@keyframes scrIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
#screen-hub.on .tile{animation:tileIn .5s cubic-bezier(.2,.9,.25,1.1) both;animation-delay:calc(var(--i,0)*35ms + 80ms)}
@keyframes tileIn{from{opacity:0;translate:0 18px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
#screen-hub.on .hero3d{animation:heroIn .6s cubic-bezier(.2,.9,.25,1) both}
@keyframes heroIn{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
/* feedback al tocco */
.btn,.tile,.chip,.iconbtn,.bigplay,.dcard{transition:transform .15s,filter .2s,box-shadow .25s,background .2s}
.btn:active,.chip:active,.iconbtn:active,.bigplay:active,.dcard:active{transform:scale(.95);filter:brightness(1.15)}
.tile:active{scale:.96}
.btn,.bigplay,.chip,.iconbtn,.tile{position:relative;overflow:hidden}
.mk-rip{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);transform:scale(0);animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}
/* tastiera / accessibilità */
:focus{outline:none}
:focus-visible{outline:3px solid var(--cyan,#27e1ff);outline-offset:3px;border-radius:12px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}
/* toast più chiari */
#toasts{pointer-events:none}
.toast{animation:toastIn .35s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes toastIn{from{opacity:0;translate:0 16px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
/* scroll fluido e barre discrete */
html{scroll-behavior:smooth}
#pageBody,.hubmain,.lobbywrap{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;overscroll-behavior:contain}
/* modali: ingresso con molla */
#modal.on .box{animation:boxIn .38s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes boxIn{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}
/* indicatore di caricamento globale */
#mkBoot{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#07070f;transition:opacity .5s,visibility .5s}
#mkBoot.off{opacity:0;visibility:hidden}
#mkBoot b{font-family:'Bangers',system-ui;font-size:clamp(40px,10vw,72px);letter-spacing:3px;background:linear-gradient(90deg,#27e1ff,#9b7bff,#ff2e93);-webkit-background-clip:text;background-clip:text;color:transparent;animation:bootPulse 1.4s ease-in-out infinite}
#mkBoot i{width:160px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
#mkBoot i::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,#27e1ff,#ff2e93);border-radius:4px;animation:bootBar 1s ease-in-out infinite}
@keyframes bootPulse{50%{transform:scale(1.05);filter:brightness(1.3)}}
@keyframes bootBar{from{translate:-100%}to{translate:250%}}
/* mobile: la card "Gioca" prima delle impostazioni */
@media (max-width:760px){
  .lobbywrap>.panel:nth-of-type(2){order:-1}
  .lobbywrap>.hero{display:none}
  .lobbywrap{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@supports(padding:env(safe-area-inset-top)){#hud{padding-top:max(6px,env(safe-area-inset-top))}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}