/* =====================================================================
   Wiki Cards — OPTIMISATION MOBILE (folio-perf)
   1. Fluidité : moins d'effets coûteux (flous, ombres animées, animations
      permanentes) sur téléphone, cartes hors écran non dessinées.
   2. Confort : zones de toucher plus grandes, plus de zoom automatique
      sur iPhone dans les champs, fenêtres en « tiroir » depuis le bas,
      encoches et barre du bas respectées, hauteur d'écran correcte.
   À charger en TOUT DERNIER (après folio-mobile.css).
   Pour retirer : enlever les lignes folio-perf.css / folio-perf.js de index.html.
   ===================================================================== */

/* ---------------------------------------------------------------- partout : toucher plus réactif */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
a, button, [role="button"], .nav-item, .mini-card, .chip, .fp-tab, .wc-tab, .fav-toggle, label, select{
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}

/* onglet en arrière-plan : toutes les animations s'arrêtent (posé par folio-perf.js) */
html.wc-paused *, html.wc-paused *::before, html.wc-paused *::after{animation-play-state:paused !important;}

/* ================================================================ TÉLÉPHONE */
@media (max-width:760px){

  /* ---------- 1. FLUIDITÉ ---------- */

  /* le fond animé et la vignette sont fixes et plein écran : on les simplifie */
  body::before{animation:none !important; inset:0 !important; transform:none !important;}
  body::after{display:none;}

  /* les flous d'arrière-plan sont ce qui coûte le plus cher sur téléphone */
  .sidebar, .wc-tabbar, .fp-topbar, .mobile-topbar, .fp-wallet, .fp-pack-pill, .fp-me-chip,
  .fp-notif, .fx-toast, .toast, .wcb-chip, .wm-reset, .wm-progress, .fx-cm-nav, .fp-auc-owned, .fp-owned-tag,
  .card-modal-overlay, .legal-modal-overlay, .fp-modal-overlay, .fx-recap-overlay, .wcb-shade, .wcb-cele, .wcb-chest-ov{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .card-modal-overlay, .legal-modal-overlay, .fp-modal-overlay, .fx-recap-overlay{background:rgba(5,6,10,0.88) !important;}
  .wc-tabbar{background:linear-gradient(180deg, #181c26, #0b0d12) !important;}

  /* animations permanentes purement décoratives → coupées */
  .fp-coin, .fp-balance-coin, .fp-nav-badge, .fp-hero-glow, .fp-hero-feature::before,
  .fp-quest.hot, .fp-pod-crown, #view-leaderboard .fp-pod.p1 .fp-av, #view-leaderboard .fp-pod-step::after,
  .fp-ach2-cup, .fp-ach2-card.legend.ok::after, .fp-vs, #view-battle.fp-battle .battle-score-vs,
  .wcb-lvl-bar i::after, .wcb-quest.ready, .wcb-streak.hot .wcb-flame, .wcb-titles span.cur,
  .fx-new-badge, .pack-visual-wrap::after, .wm-pin.legend, .fp-auc-time.hot svg, .fp-hl-atk.hidden{
    animation:none !important;
  }
  /* le halo « respirant » des Légendaires anime un filtre sur chaque carte : très coûteux */
  .mini-card[data-tier="LR"]{animation:none !important; filter:none !important;}
  /* le reflet doré passe une seule fois au lieu de tourner en boucle */
  .fx-foil::before{animation-iteration-count:1 !important;}
  /* le paquet flotte encore, mais sans recalcul d'ombre */
  .pack{will-change:transform;}

  /* pas d'inclinaison 3D ni de reflet de survol au doigt */
  .mini-card.fg-tilt{transform:none !important;}
  .fg-glare{display:none !important;}
  .mini-card{transition:transform .12s ease !important; will-change:auto !important;}

  /* ombres plus légères (une seule couche au lieu de 3 à 5) */
  .mini-card{box-shadow:0 6px 14px -8px rgba(0,0,0,0.65) !important;}
  .fp-panel, .profile-stat-card, .battle-question-panel, .card-modal, .fp-packs-box, .battle-opponent-card{
    box-shadow:0 10px 24px -16px rgba(0,0,0,0.9) !important;
  }
  .fp-panel::after{display:none;}

  /* les cartes et blocs hors de l'écran ne sont pas dessinés (grosse collection = défilement fluide) */
  #collection-grid > .mini-card, #allcards-grid > .mini-card, .fp-shop-grid > .fp-shop-card,
  .fp-auc-grid > .fp-auc-card, .fp-ach2-grid > .fp-ach2-card, #view-leaderboard .fp-lb-row,
  .fp-friend-grid > .fp-friend, .fp-player-list > .fp-player{
    content-visibility:auto; contain-intrinsic-size:auto 220px;
  }
  .fp-auc-grid > .fp-auc-card{contain-intrinsic-size:auto 170px;}
  #view-leaderboard .fp-lb-row, .fp-player-list > .fp-player{contain-intrinsic-size:auto 56px;}
  .fp-ach2-grid > .fp-ach2-card{contain-intrinsic-size:auto 200px;}
  /* les pages cachées ne coûtent rien */
  #app main .view:not(.active){content-visibility:hidden;}

  /* changement de page : fondu court, sans glissement */
  .view.active{animation:wc-view-fade .18s ease both !important;}
  @keyframes wc-view-fade{from{opacity:0;} to{opacity:1;}}

  /* ---------- 2. CONFORT ---------- */

  /* iPhone zoome dans tout champ dont le texte fait moins de 16 px : on l'en empêche */
  input, select, textarea,
  .collection-search, .collection-select, .fp-search input, .wm-search input, .card-modal-tag-input,
  .auth-card input, .profile-form input, .fp-composer textarea, .fp-aucd-stepper input, .fp-msg-input,
  .lang-select select, #fp-mk-search, #wc-opp-search{font-size:16px !important;}
  .collection-search, .collection-select, .fp-search{min-height:42px;}

  /* zones de toucher d'au moins 40 px */
  .fp-pill, .fp-btn-ghost, .fp-quest-btn, .fp-link, .pagination button, .fx-skip, .fp-notif-btn,
  .fp-tab, .fp-seg button, .chip, .wm-chip, .fp-ach2-cat, .wcb-chip{min-height:38px;}
  .fp-buy{min-height:36px;}
  .fav-toggle{min-width:30px; min-height:30px; display:inline-flex; align-items:center; justify-content:center;}
  .card-modal-close, .legal-modal-close, .fp-modal-x, .fx-recap-x, .wcb-x{width:40px !important; height:40px !important;}
  .fp-icon-btn{width:34px; height:34px;}
  .nav-item{min-height:44px;}

  /* défilement : pas de rebond qui recharge la page, pas de sélection de texte accidentelle sur les cartes */
  html, body{overscroll-behavior-y:none;}
  .mini-card, .wc-tab, .nav-item, .fp-tab, .chip{-webkit-user-select:none; user-select:none;}
  .fp-tabs, .filters, .wm-chips, .fp-ach2-cats, .fp-price-strip{overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;}

  /* barre du haut : tient sur une ligne, sans déborder */
  .fp-topbar{flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; padding-top:calc(8px + env(safe-area-inset-top, 0px)) !important;}
  .fp-topbar::-webkit-scrollbar{display:none;}
  .fp-topbar > *{flex-shrink:0;}
  .fp-me-chip{display:none !important;}            /* le profil est dans le menu du bas */
  .mobile-topbar{padding-top:calc(9px + env(safe-area-inset-top, 0px)) !important;}

  /* hauteurs d'écran : 100vh est faux sur téléphone (barre d'adresse) → hauteur réelle */
  .fp-msg-layout{height:calc(var(--wc-vh, 1vh) * 100 - 290px) !important; min-height:360px;}
  .wm-map{height:calc(var(--wc-vh, 1vh) * 58) !important;}

  /* ---------- fenêtres : tiroir qui monte du bas, boutons toujours accessibles ---------- */
  .fp-modal-overlay{align-items:flex-end !important; padding:0 !important;}
  .fp-modal{
    max-width:none !important; width:100% !important; border-radius:22px 22px 0 0 !important;
    max-height:calc(var(--wc-vh, 1vh) * 92) !important; overflow-y:auto; overscroll-behavior:contain;
    padding:14px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction:row !important; flex-wrap:wrap; align-items:flex-start !important; gap:12px 14px !important;
    transform:translateY(100%) !important; transition:transform .28s cubic-bezier(.2,.9,.3,1) !important;
  }
  .fp-modal-overlay.open .fp-modal{transform:none !important;}
  .fp-modal::before{ /* poignée */
    content:''; position:absolute; top:6px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:4px;
    background:rgba(255,255,255,0.22); opacity:1 !important; inset:auto; z-index:3;
  }
  /* carte à gauche en petit, infos à droite : tout tient sans défiler */
  .fp-modal-card{width:96px !important; margin:6px 0 0 !important; transform:rotate(-3deg);}
  .fp-modal-info{flex:1 1 calc(100% - 112px) !important; min-width:0; gap:7px !important;}
  .fp-modal-info h3{font-size:1rem !important; padding-right:36px;}
  .fp-modal-info > p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:0.74rem !important;}
  .fp-modal-calc{flex:1 1 100%; padding:4px 12px !important;}
  .fp-modal-calc div{padding:5px 0 !important; font-size:0.8rem !important;}
  .fp-modal-actions{
    position:sticky; bottom:calc(-16px - env(safe-area-inset-bottom, 0px)); z-index:2; margin-top:4px !important;
    padding:10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); flex-wrap:nowrap !important;
    background:linear-gradient(180deg, rgba(21,24,33,0), #151821 30%);
  }
  .fp-modal-actions .open-btn{flex:1; min-height:46px; padding:10px 12px !important; font-size:0.78rem !important;}
  .fp-modal-actions .fp-btn-ghost{flex:0 0 auto; min-height:46px;}
  /* la fenêtre d'achat met ses infos sur toute la largeur */
  .fp-modal-info .fp-modal-calc, .fp-modal-info .fp-modal-actions, .fp-modal-info .fp-auc-field, .fp-modal-info .fp-auc-bids{flex-basis:auto;}

  /* fenêtre de détail d'une carte (app.js) : tiroir aussi */
  .card-modal-overlay{align-items:flex-end !important; padding:0 !important;}
  .card-modal{
    width:100% !important; max-width:none !important; border-radius:22px 22px 0 0 !important;
    max-height:calc(var(--wc-vh, 1vh) * 92) !important; overflow-y:auto; overscroll-behavior:contain;
    padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .card-modal-overlay.open .card-modal{animation:wc-sheet-up .28s cubic-bezier(.2,.9,.3,1) !important;}
  @keyframes wc-sheet-up{from{transform:translateY(60%); opacity:.4;} to{transform:none; opacity:1;}}
  .card-modal-actions{position:sticky; bottom:calc(-16px - env(safe-area-inset-bottom, 0px)); background:linear-gradient(180deg, rgba(21,24,33,0), #151821 30%); padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;}
  /* flèches précédente / suivante au-dessus du tiroir */
  .fx-cm-nav{bottom:auto !important; top:12px !important;}
  .fx-cm-count{bottom:auto !important; top:24px !important;}

  /* récapitulatif d'un paquet */
  .fx-recap-overlay{padding:0 !important; align-items:flex-end !important;}
  .fx-recap{border-radius:22px 22px 0 0 !important; max-height:calc(var(--wc-vh, 1vh) * 92) !important; padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px)) !important;}

  /* panneau des quêtes : plein écran, au-dessus de la barre du bas */
  .wcb-panel{width:100vw !important; padding-bottom:calc(30px + env(safe-area-inset-bottom, 0px)) !important; overscroll-behavior:contain;}

  /* les fenêtres passent au-dessus de la barre d'onglets du bas */
  .fp-modal-overlay, .card-modal-overlay, .legal-modal-overlay, .fx-recap-overlay{z-index:480 !important;}
  body.wc-sheet-open .wc-tabbar{transform:translateY(140%); transition:transform .2s ease;}
  .wc-tabbar{transition:transform .2s ease;}

  /* ---------- écrans en particulier ---------- */
  /* Marché : prix lisibles, pas de texte qui déborde */
  .fp-shop-grid .mini-card .title{-webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;}
  .fp-market-tools{gap:8px !important;}
  .fp-market-tools .fp-search{flex:1 1 100% !important;}
  .fp-market-tools .collection-select{flex:1 1 auto;}
  /* révélation : boutons faciles à atteindre */
  .reveal-continue{min-height:46px;}
  #reveal-prev, #reveal-next, .reveal-arrow{min-width:44px; min-height:44px;}
  /* enchères : page de détail */
  .fp-aucd-bid .open-btn{min-height:46px;}
  .fp-aucd-stepper button{width:48px;}
}

/* très petits écrans */
@media (max-width:380px){
  .fp-modal-card{width:80px !important;}
  .fp-modal-info{flex-basis:calc(100% - 96px) !important;}
  .wcb-lvl-bar{display:none;}
}

/* ================================================================ APPAREILS MODESTES / ÉCONOMIE DE DONNÉES
   (classe posée par folio-perf.js : peu de mémoire, peu de cœurs, mode « économie de données »,
   ou l'utilisateur a demandé moins d'animations) */
html.wc-lite .pack, html.wc-lite .fx-foil, html.wc-lite .fx-back-sheen,
html.wc-lite .fp-hero::before, html.wc-lite body::before{animation:none !important;}
html.wc-lite .fx-foil{display:none !important;}
html.wc-lite .fp-hero::before{filter:none !important; opacity:0.18 !important;}
html.wc-lite .fx-burst .fx-spark:nth-child(n+8){display:none;}
html.wc-lite *{scroll-behavior:auto !important;}