/*
 * STATE RACE — UX POLISH V1
 * Mobile / touch / accessibility resilience.
 * Additive layer: no visual redesign.
 */

/* ---------------------------------------------------------
   VIEWPORT RESILIENCE
--------------------------------------------------------- */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

html,
body{
  max-width:100%;
}

body{
  overflow-x:hidden;
  min-height:100vh;
}

@supports (min-height:100dvh){
  body{
    min-height:100dvh;
  }
}


/* ---------------------------------------------------------
   TOUCH
--------------------------------------------------------- */

button,
.btn,
.ghost,
.button,
.launchHeroButton,
a{
  touch-action:manipulation;
}

button,
.btn,
.ghost,
.button,
.launchHeroButton{
  min-height:44px;
}

#supportBtn,
#langBtn,
#confirmSupport,
#watchStateVideo,
#openStatePage,
#closeSupport,
#closeVideo,
#closeMessage,
#closeLang,
#watchVideo,
#shareState{
  min-height:44px;
}


/* ---------------------------------------------------------
   KEYBOARD FOCUS
   Override eventuali outline:none del CSS storico.
--------------------------------------------------------- */

:where(
  button,
  a,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible{
  outline:3px solid currentColor !important;
  outline-offset:3px !important;
}


/* ---------------------------------------------------------
   MEDIA
--------------------------------------------------------- */

img,
video,
iframe{
  max-width:100%;
}

.video iframe,
.video video{
  width:100%;
  height:100%;
  border:0;
}


/* ---------------------------------------------------------
   BUBBLE STAGE
--------------------------------------------------------- */

#bubbleStage{
  max-width:100%;
  overscroll-behavior-x:none;
}

#bubbleStage .bubble{
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}


/* ---------------------------------------------------------
   CONSENT UI — MOBILE + IPHONE SAFE AREA
--------------------------------------------------------- */

.sr-consent-banner{
  padding-bottom:
    max(
      16px,
      env(safe-area-inset-bottom)
    );
}

.sr-consent-dialog{
  padding-top:
    max(
      16px,
      env(safe-area-inset-top)
    );

  padding-right:
    max(
      16px,
      env(safe-area-inset-right)
    );

  padding-bottom:
    max(
      16px,
      env(safe-area-inset-bottom)
    );

  padding-left:
    max(
      16px,
      env(safe-area-inset-left)
    );
}

.sr-consent-panel{
  max-width:100%;
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

@supports (height:100dvh){
  .sr-consent-panel{
    max-height:calc(100dvh - 32px);
  }
}


/* ---------------------------------------------------------
   GENERIC DIALOG SAFETY
--------------------------------------------------------- */

[role="dialog"]{
  max-width:100%;
}

[aria-modal="true"]{
  overscroll-behavior:contain;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width:768px){

  button,
  .btn,
  .ghost,
  .button,
  .launchHeroButton{
    min-height:48px;
  }

  .launchHeroButton{
    min-width:0;
    max-width:100%;
  }

  #supportBtn,
  #langBtn{
    min-width:44px;
  }

  .video{
    max-width:100%;
  }

}


/* ---------------------------------------------------------
   VERY SMALL MOBILE
--------------------------------------------------------- */

@media (max-width:380px){

  .launchHeroButton,
  .btn,
  .ghost,
  .button{
    max-width:100%;
  }

}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
  }

  #bubbleStage .bubble,
  .launchHeroButton,
  button,
  .btn,
  .ghost,
  .button{
    transition-duration:0.01ms !important;
  }

}