/*
 * Percorso di interazione rapido per touch.
 * Caricato per ultimo: riduce il costo di compositing dei controlli e delle
 * decorazioni continue senza rimuovere le animazioni funzionali.
 */
/* Le icone Font Awesome non devono reagire al passaggio del mouse. La regola
   copre anche il markup creato dinamicamente dalle schermate quiz/flashcard. */
@media (hover: hover) and (pointer: fine) {
  html body :is(.fas[class*="fa-"], .fa-solid[class*="fa-"]):hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  :root {
    --mobile-popup-layer: 2147483646;
  }

  html {
    scroll-behavior: auto !important;
  }

  /* Safari su iOS ingrandisce la pagina quando un campo focalizzato usa un
     testo inferiore a 16px. Manteniamo quindi tutte le barre di ricerca alla
     soglia minima, senza disabilitare lo zoom volontario della pagina. */
  html body :is(
    input[type="search"],
    .menu-search input,
    .glossary-search input
  ) {
    font-size: 16px !important;
  }

  body {
    background-attachment: scroll !important;
  }

  /* Il blur di sfondo forza la ricomposizione di interi pannelli quando un
     controllo cambia stato. Su touch usiamo la superficie già definita dal
     componente, senza il passaggio GPU più costoso. */
  * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body :is(
    a[href],
    button,
    summary,
    select,
    label[for],
    [role="button"],
    [role="tab"],
    [role="menuitem"],
    [role="switch"],
    [onclick],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="checkbox"],
    input[type="radio"],
    input[type="range"]
  ) {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    animation: none !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    will-change: auto !important;
  }

  html body :is(
    a[href],
    button,
    summary,
    label[for],
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
  ) > * {
    filter: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  html body .stats-modal-overlay.closing {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body :is(
    a[href],
    button,
    summary,
    [role="button"],
    [onclick],
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
  )::before,
  html body :is(
    a[href],
    button,
    summary,
    [role="button"],
    [onclick],
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
  )::after {
    animation: none !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
  }

  /* Le animazioni decorative permanenti tengono occupato il compositore anche
     mentre l'utente interagisce. La rotazione della flashcard non è inclusa:
     usa .flashcard-inner e resta quindi attiva. */
  html body :is(
    #auth-screen h1,
    #auth-screen .app-description,
    #auth-screen .logo-image,
    .floating-card,
    .demo-option-correct,
    .demo-option-correct i,
    .demo-success,
    .demo-cursor,
    .term-card--one,
    .term-card--two,
    .saved-toast,
    .glossary-term__track,
    .hero-orbit-ring,
    .hero-orbit-band,
    .orbit-track,
    .orbit-metric-shell,
    .hero-orbit-hint,
    .progress-fill,
    .quiz-score i,
    .streak-progress-fill,
    .streak-hero__meta .meta-pill
  ) {
    animation: none !important;
    will-change: auto !important;
  }

  html body .hero-orbit-core::before,
  html body .hero-orbit-core::after,
  html body .progress-fill::after,
  html body #due-mode-rating::before,
  html body .flashcards-preview.is-autoplaying .flashcards-pagination button.is-active::after {
    animation: none !important;
    will-change: auto !important;
  }

  html body :is(.progress-fill, .streak-progress-fill) {
    transition: none !important;
  }

  html body :is(.question-scroll-container, .answer-scroll-container) {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Limita il repaint alla scheda aggiornata nel catalogo mobile. */
  body.route-dashboard-page :is(
    .channel-section,
    .dashboard-subject-group,
    .dashboard-subject-card
  ) {
    contain: paint;
  }

  /* Solo i veri popup aperti superano le superfici preparate delle route.
     I pannelli incorporati (per esempio Mappe in Study Mode) non sono inclusi. */
  html body :is(
    .ai-chat-overlay,
    .stats-modal-overlay,
    .streak-overlay,
    .question-report-modal,
    .pc-overlay,
    .simple-alert-overlay,
    .welcome-modal.modal-overlay,
    .flashcard-reset-modal.modal-overlay,
    #add-flashcard-modal.modal-overlay,
    #manage-flashcards-modal.modal-overlay,
    #edit-flashcard-modal.modal-overlay,
    #modes-help-modal.modal-overlay,
    .session-modal.is-visible,
    .pwa-dialog:not([hidden]),
    .menu-collab-panel.is-open,
    .menu-review-panel.is-open
  ) {
    z-index: var(--mobile-popup-layer) !important;
    isolation: isolate;
  }

  html body:is(
    .glossary-panel-open,
    .glossary-modal-open
  ) #glossary-root {
    z-index: var(--mobile-popup-layer) !important;
    isolation: isolate;
  }

  /* Il contenuto finale resta identico, ma il primo frame del popup non viene
     ritardato da fade/slide di 180–400 ms sul compositore mobile. */
  html body :is(
    .ai-chat-overlay,
    .ai-chat-overlay .ai-chat-container,
    .ai-chat-overlay .ai-voice-container,
    .stats-modal-overlay,
    .stats-modal-container,
    .streak-overlay,
    .streak-overlay .streak-sheet,
    .question-report-modal,
    .question-report-dialog,
    .pc-overlay,
    .pc-modal,
    .simple-alert-overlay,
    .simple-alert,
    .welcome-modal.modal-overlay,
    .welcome-modal .welcome-modal-container,
    .flashcard-reset-modal.modal-overlay,
    .flashcard-reset-modal .modal-container,
    #add-flashcard-modal.modal-overlay,
    #manage-flashcards-modal.modal-overlay,
    #edit-flashcard-modal.modal-overlay,
    #modes-help-modal.modal-overlay,
    #modes-help-modal .modal-container,
    .session-modal.is-visible,
    .session-modal.is-visible .session-modal__dialog,
    .pwa-dialog:not([hidden]),
    .pwa-dialog:not([hidden]) .pwa-dialog__sheet,
    .menu-collab-panel.is-open,
    .menu-collab-panel.is-open .menu-spotlight,
    .menu-review-panel.is-open
  ) {
    animation: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  html body:is(
    .glossary-panel-open,
    .glossary-modal-open
  ) :is(
    .glossary-scrim,
    .glossary-panel,
    .glossary-editor,
    .glossary-editor__card,
    .glossary-zoom,
    .glossary-zoom__card
  ) {
    animation: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}

/* Evita che entrambe le facce 3D allarghino la superficie compositata ben
   oltre i bordi della carta durante il primo rendering. */
body.route-page #flashcards-screen :is(.flashcard-front, .flashcard-back) {
  box-shadow: none;
}

@media (hover: none) and (pointer: coarse) {
  /* I controlli di ritorno e il toggle legale reagiscono nello stesso frame.
     Usiamo soltanto opacity: non modifica geometria, scroll o hit target. */
  html body :is(
    .route-icon-btn[aria-label*="Torna"],
    .channel-section__back,
    .back-arrow-btn,
    .backarrowquiz-btn,
    .dashboard-backarrowquiz-btn,
    .back-arrow-btn-small,
    .profile-back-link,
    .back-link,
    .dashboard-back-link,
    .logout-btn2[href],
    .spotlight-back,
    .glossary-back,
    .maps-tool__icon-btn[data-map-back],
    .study-mode-icon-btn[data-study-back-top],
    [data-study-back],
    button[onclick*="backToStudyOptions"],
    #cookie-more-btn
  ):is(:active, .quizienza-navigation-pressed),
  html body .quizienza-navigation-pressed {
    opacity: 0.56 !important;
  }

  /* Un solo header, condiviso da selezione mazzo, opzioni e tutte le modalità
     di studio. #flashcards-screen usa display: contents, quindi sticky non ha
     un containing block: su touch lo manteniamo direttamente nel viewport. */
  body.route-page #flashcards-screen > .flashcards-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 2147483001;
  }

  body.route-page #flashcards-screen > :is(
    .flashcard-deck-route,
    .flashcards-container
  ) {
    margin-top: 48px;
  }

  body.route-page #flashcards-screen .study-option-card .card-badge {
    animation: none;
  }

  /* Flip touch in due metà: l'intera carta gira sul compositore, mentre la
     faccia viene scambiata soltanto quando la superficie è vista di taglio. */
  body.route-page #flashcards-screen #current-flashcard {
    perspective: none !important;
    isolation: isolate;
    transform-origin: 50% 50%;
    will-change: transform !important;
  }

  body.route-page #flashcards-screen #current-flashcard .flashcard-inner,
  body.route-page #flashcards-screen #current-flashcard.flipped .flashcard-inner {
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
    transition: none !important;
    will-change: auto !important;
  }

  body.route-page #flashcards-screen #current-flashcard .flashcard-front,
  body.route-page #flashcards-screen #current-flashcard .flashcard-back {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
    transition: none !important;
  }

  body.route-page #flashcards-screen #current-flashcard .flashcard-front {
    z-index: 2 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.route-page #flashcards-screen #current-flashcard .flashcard-back {
    z-index: 1 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.route-page #flashcards-screen #current-flashcard.flipped .flashcard-front {
    z-index: 1 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.route-page #flashcards-screen #current-flashcard.flipped .flashcard-back {
    z-index: 2 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Il fronte adotta lo stesso isolamento verticale già efficace sul retro:
     uno swipe verticale non viene interpretato come gesto di flip. */
  body.route-page #flashcards-screen #current-flashcard .flashcard-front,
  body.route-page #flashcards-screen #current-flashcard .flashcard-front .question-content,
  body.route-page #flashcards-screen #current-flashcard .flashcard-front .question-scroll-container {
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
  }

  /* Con block:start questo margine limita lo spostamento: restano visibili la
     prima fila da tre pulsanti e l'inizio della fila successiva. */
  body.route-page #flashcards-screen #rating-section {
    scroll-margin-top: min(54dvh, 460px);
  }

  /* rating-hidden è uno stato a viewport ferma: vengono bloccati soltanto gli
     scroller esterni, mentre il testo dentro la carta resta scorribile. */
  html.flashcard-rating-hidden-scrollbar,
  html.flashcard-rating-hidden-scrollbar body,
  html.flashcard-rating-hidden-scrollbar body.route-page #flashcards-screen.rating-hidden,
  html.flashcard-rating-hidden-scrollbar body.route-page #flashcards-screen.rating-hidden .study-session {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* Feedback immediato mentre la navigazione documentale verso quiz o
     flashcard sta iniziando; non cambia geometria né introduce animazioni. */
  body.route-dashboard-page .dashboard-subject-card:active {
    opacity: 0.64 !important;
  }

  /* La route quiz che segue usa a sua volta una superficie opaca completa.
     Il suo shell è disponibile dal primo paint; gli script continuano poi a
     inizializzare dati e controlli senza tenere nascosto dashboard-content. */
  body.quiz-route-page #user-dashboard[data-route-content] {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.quiz-route-page #user-dashboard > .dashboard-content {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--route-bg);
    background-image:
      linear-gradient(rgba(245, 241, 242, 0.86), rgba(245, 241, 242, 0.86)),
      url("../immagini-logo/sfondo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  body.dark-mode.quiz-route-page #user-dashboard > .dashboard-content {
    background-image:
      linear-gradient(rgba(23, 19, 22, 0.9), rgba(23, 19, 22, 0.9)),
      url("../immagini-logo/sfondo-dark.svg");
  }

  /* Il menu quiz chiuso non partecipa al layout iniziale. Con la sola opacity
     il pannello fuori schermo faceva comunque risolvere centinaia di regole e
     i font delle icone sociali prima del primo frame della materia. */
  @media screen and (max-width: 768px) {
    body.quiz-route-page #quizDashboardMenu:not(.active):not(.is-open) {
      display: none;
    }

    body.quiz-route-page #quizDashboardMenu:is(.active, .is-open) {
      display: block;
    }
  }
}