/* =====================================================================
   Wiki Cards — HABILLAGE « JEU VIDÉO »
   Chargé en dernier (après style.css et folio-plus.css). Uniquement du CSS
   léger : pas d'image, pas de canvas, peu d'animations permanentes.
   Pour revenir à l'ancien look : retirer la ligne folio-game.css de index.html.
   ===================================================================== */
:root{
  --fg-font:'Chakra Petch', 'Space Grotesk', sans-serif;
  --fg-gold-dark:#8a5d17;
  --fg-edge:rgba(245,214,124,0.22);
  --fg-edge-strong:rgba(245,214,124,0.55);
  --fg-panel:linear-gradient(180deg, rgba(28,33,46,0.92), rgba(16,19,27,0.94));
  --fg-cyan:#5fd4ff;
}

/* ---------------------------------------------------------------- FOND DE SCÈNE */
body{background:#07080c;}
body::before{ /* halos colorés + grille façon « hangar » — fixe, donc aucun coût au défilement */
  content:''; position:fixed; inset:-10%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40% 35% at 12% 8%, rgba(245,214,124,0.13), transparent 70%),
    radial-gradient(45% 40% at 92% 95%, rgba(138,79,201,0.16), transparent 70%),
    radial-gradient(30% 30% at 80% 10%, rgba(61,118,181,0.12), transparent 70%),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 44px 44px,
    #07080c;
  animation:fg-drift 40s ease-in-out infinite alternate;
}
body::after{ /* vignette */
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,0.55));
}
@keyframes fg-drift{from{transform:translate3d(0,0,0);} to{transform:translate3d(-2%,-1.5%,0);}}
.app, main{background:transparent;}

/* barre de défilement */
*{scrollbar-width:thin; scrollbar-color:#3a3322 transparent;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg, #4a3f25, #2c2618); border-radius:10px; border:2px solid #07080c;}
::-webkit-scrollbar-track{background:transparent;}
::selection{background:rgba(245,214,124,0.35); color:#fff;}

/* ---------------------------------------------------------------- TITRES */
.pack-heading h1, .page-title, .battle-title, .fp-page-head .page-title,
.auth-card .auth-title, .placeholder h2, .battle-result-box h2{
  font-family:var(--fg-font) !important; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  background:linear-gradient(180deg, #fff6d8 10%, var(--gold-a) 55%, var(--gold-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(245,214,124,0.25));
}
.pack-heading h1{font-size:clamp(1.8rem, 4vw, 2.6rem);}
.eyebrow, .fp-eyebrow, .fp-page-head .eyebrow{
  font-family:var(--fg-font); letter-spacing:0.28em; font-size:0.7rem; font-weight:600; color:var(--gold-a);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before, .fp-page-head .eyebrow::before{content:''; width:22px; height:2px; background:linear-gradient(90deg, transparent, var(--gold-a));}
.profile-section h2, .fp-panel-head h2{font-family:var(--fg-font) !important; text-transform:uppercase; letter-spacing:0.08em; font-size:0.92rem;}

/* ---------------------------------------------------------------- MENU LATÉRAL */
.sidebar{
  background:linear-gradient(180deg, rgba(20,24,33,0.96), rgba(11,13,18,0.97));
  border-right:1px solid var(--fg-edge);
  box-shadow:inset -1px 0 0 rgba(255,255,255,0.03), 8px 0 30px -12px rgba(0,0,0,0.7);
}
.brand-logo{box-shadow:0 0 0 1px rgba(255,255,255,0.25) inset, 0 0 18px rgba(245,214,124,0.45); transform:rotate(-4deg);}
.brand-mark{font-family:var(--fg-font); letter-spacing:0.12em;}
.nav-item{
  position:relative; font-family:var(--fg-font); text-transform:uppercase; letter-spacing:0.06em; font-size:0.8rem; font-weight:600;
  border:1px solid transparent; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.nav-item:hover{transform:translateX(3px); background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.06);}
.nav-item.active{
  color:#1a1408; border-color:rgba(255,240,190,0.5);
  background:linear-gradient(100deg, var(--gold-a), var(--gold-b));
  box-shadow:0 6px 18px -8px rgba(245,214,124,0.7), inset 0 1px 0 rgba(255,255,255,0.55);
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
.nav-item.active svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,0.4));}
.nav-item.active .fp-nav-badge{margin-right:8px; background:#1a1408; color:var(--gold-a);}
.fp-nav-badge{animation:fp-pop .3s ease, fg-pulse 1.8s ease-in-out .3s infinite;}
@keyframes fg-pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,102,92,0.55);} 50%{box-shadow:0 0 0 5px rgba(224,102,92,0);}}
.nav-divider{background:linear-gradient(90deg, transparent, var(--fg-edge), transparent);}

/* ---------------------------------------------------------------- BOUTONS « ARCADE » */
.open-btn, .auth-card .primary-btn, .reveal-continue, .fp-notif-btn{
  position:relative; overflow:hidden; isolation:isolate;
  font-family:var(--fg-font) !important; text-transform:uppercase; letter-spacing:0.08em; font-weight:700 !important;
  background:linear-gradient(180deg, #ffe9a6 0%, var(--gold-a) 35%, var(--gold-b) 100%) !important;
  border:1px solid #ffeebf !important; color:#1a1408 !important;
  box-shadow:0 4px 0 var(--fg-gold-dark), 0 10px 24px -8px rgba(245,214,124,0.55), inset 0 1px 0 rgba(255,255,255,0.7) !important;
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease !important;
}
.open-btn::after, .auth-card .primary-btn::after, .reveal-continue::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.65) 45%, transparent 60%);
  transform:translateX(-120%); transition:transform .55s ease;
}
.open-btn:hover:not(:disabled), .auth-card .primary-btn:hover:not(:disabled), .reveal-continue:hover{transform:translateY(-2px) !important; filter:brightness(1.06);}
.open-btn:hover:not(:disabled)::after, .auth-card .primary-btn:hover:not(:disabled)::after, .reveal-continue:hover::after{transform:translateX(120%);}
.open-btn:active:not(:disabled), .auth-card .primary-btn:active:not(:disabled), .reveal-continue:active, .fp-notif-btn:active{
  transform:translateY(3px) !important; box-shadow:0 1px 0 var(--fg-gold-dark), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.open-btn:disabled{filter:grayscale(0.7) brightness(0.7);}
#open-btn{font-size:1.1rem; padding:15px 64px; border-radius:12px; letter-spacing:0.2em;}

.fp-btn-ghost, .fp-pill, .pagination button, .reveal-arrow, .fp-quest-btn{
  font-family:var(--fg-font); text-transform:uppercase; letter-spacing:0.05em; font-weight:600;
  box-shadow:0 3px 0 rgba(0,0,0,0.45); transition:transform .08s ease, box-shadow .08s ease, border-color .15s;
}
.fp-btn-ghost:active, .fp-pill:active, .pagination button:active:not(:disabled), .reveal-arrow:active, .fp-quest-btn:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,0.45);}

/* onglets de jeu */
.fp-tab, .fp-seg button, .chip{font-family:var(--fg-font); text-transform:uppercase; letter-spacing:0.05em;}
.fp-tab{border-radius:10px; clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding:9px 20px;}

/* ---------------------------------------------------------------- PANNEAUX (coins façon HUD) */
.fp-panel, .profile-stat-card, .battle-question-panel, .battle-result-box, .how-panel,
.fp-packs-box, .card-modal, .legal-modal, .battle-opponent-card, .catalog-progress, .rarity-distribution, .battle-your-card{
  position:relative;
  background:var(--fg-panel) !important;
  border:1px solid var(--fg-edge) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 40px -22px rgba(0,0,0,0.9);
}
.fp-panel::before, .profile-stat-card::before, .battle-question-panel::before, .battle-result-box::before,
.fp-packs-box::before, .card-modal::before, .battle-opponent-card::before, .catalog-progress::before, .battle-your-card::before{
  content:''; position:absolute; inset:-1px; pointer-events:none; border-radius:inherit; z-index:1;
  --c:var(--gold-a); --l:14px; --t:2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l) no-repeat;
  opacity:0.75;
}
.profile-stat-card{transition:transform .15s ease;}
.profile-stat-card:hover{transform:translateY(-3px);}
.profile-stat-value, .fp-stat b, .battle-score-value, .fp-packs-count b, .fp-wallet b, .catalog-progress-pct{
  font-family:var(--fg-font) !important; font-weight:700; letter-spacing:0.02em;
}

/* champs de saisie */
.collection-search, .collection-select, .auth-card input, .profile-form input, .lang-select select, .card-modal-tag-input{
  background:rgba(7,8,12,0.75) !important; border:1px solid rgba(255,255,255,0.09) !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.5); transition:border-color .15s, box-shadow .15s;
}
.collection-search:focus, .collection-select:focus, .auth-card input:focus, .profile-form input:focus{
  border-color:var(--gold-b) !important; box-shadow:inset 0 2px 6px rgba(0,0,0,0.5), 0 0 0 3px rgba(245,214,124,0.15) !important;
}

/* ---------------------------------------------------------------- HUD (pièces, paquets) */
.fp-wallet, .fp-pack-pill{
  font-family:var(--fg-font);
  background:linear-gradient(180deg, rgba(30,26,16,0.95), rgba(14,13,10,0.95)) !important;
  border:1px solid var(--fg-edge-strong) !important;
  box-shadow:0 0 0 3px rgba(0,0,0,0.45), 0 8px 22px -10px rgba(245,214,124,0.5), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.fp-coin{animation:fg-coin 4s ease-in-out infinite;}
@keyframes fg-coin{0%,85%,100%{transform:rotateY(0);} 92%{transform:rotateY(180deg);}}
.fp-packs-pips i{border-radius:4px; transform:skewX(-10deg);}
.fp-packs-pips i.on{animation:fg-pip .4s ease both;}
@keyframes fg-pip{from{transform:skewX(-10deg) scaleY(0.4); opacity:0;} to{transform:skewX(-10deg) scaleY(1); opacity:1;}}
.pity-bar, .fp-xp-bar, .fp-mini-bar, .catalog-progress-bar, .profile-rarity-track, .fp-packs-prog{
  background:rgba(0,0,0,0.5) !important; box-shadow:inset 0 1px 3px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
}
.pity-bar-fill, .fp-xp-bar i, .catalog-progress-fill{
  background:linear-gradient(90deg, var(--gold-b), var(--gold-a), #fff3c4) !important;
  box-shadow:0 0 10px rgba(245,214,124,0.6);
}

/* ---------------------------------------------------------------- ÉCRAN PAQUETS */
.pack-visual-wrap{perspective:900px;}
.pack-visual-wrap::after{ /* rayons de lumière qui tournent lentement derrière le paquet */
  content:''; position:absolute; left:50%; top:50%; width:520px; height:520px; margin:-260px 0 0 -260px; z-index:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(245,214,124,0.16) 0deg 6deg, transparent 6deg 22deg);
  -webkit-mask-image:radial-gradient(circle, #000 18%, transparent 62%); mask-image:radial-gradient(circle, #000 18%, transparent 62%);
  animation:fg-rays 26s linear infinite;
}
@keyframes fg-rays{to{transform:rotate(360deg);}}
.pack{animation:fg-float 3.6s ease-in-out infinite;}
.pack:hover{animation:none; transform:translateY(-8px) rotateY(-8deg) rotateX(4deg) scale(1.03);}
.pack.shaking{animation:pack-shake .55s ease !important;}
@keyframes fg-float{0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-10px) rotate(1deg);}}
#view-packs.fp-no-packs .pack-visual-wrap::after{animation:none; opacity:0.3;}
#view-packs.fp-no-packs .pack{animation:none;}

/* révélation */
.reveal-progress{font-family:var(--fg-font); text-transform:uppercase; letter-spacing:0.14em;}
#reveal-card-slot{position:relative;}
#reveal-card-slot .reveal-card{animation:fg-card-in .55s cubic-bezier(.2,.9,.3,1.15);}
@keyframes fg-card-in{
  0%{opacity:0; transform:translateY(30px) rotateY(90deg) scale(.8);}
  60%{opacity:1; transform:translateY(-6px) rotateY(-8deg) scale(1.03);}
  100%{transform:none;}
}
#reveal-card-slot .reveal-card.SR, #reveal-card-slot .reveal-card.SSR, #reveal-card-slot .reveal-card.UR, #reveal-card-slot .reveal-card.LR{
  box-shadow:0 0 0 2px var(--fg-tier), 0 0 40px 4px color-mix(in srgb, var(--fg-tier) 55%, transparent), 0 30px 70px -20px rgba(0,0,0,0.8);
}
.reveal-card.SR{--fg-tier:var(--c-SR);} .reveal-card.SSR{--fg-tier:var(--c-SSR);}
.reveal-card.UR{--fg-tier:var(--c-UR);} .reveal-card.LR{--fg-tier:var(--gold-a);}
.reveal-dots .dot{border-radius:2px; transform:rotate(45deg);}
.reveal-dots .dot.active{transform:rotate(45deg) scale(1.35); box-shadow:0 0 8px var(--gold-a);}

/* secousse d'écran pour les cartes UR / LR (ajoutée par folio-game.js) */
main.fg-shake{animation:fg-shake .45s ease;}
@keyframes fg-shake{
  0%,100%{transform:none;} 20%{transform:translate(-5px,2px);} 40%{transform:translate(5px,-3px);}
  60%{transform:translate(-3px,3px);} 80%{transform:translate(2px,-1px);}
}

/* ---------------------------------------------------------------- EN-TÊTES ET BARRES D'OUTILS (Collection, Toutes les cartes) */
#view-collection .collection-head, #view-allcards .collection-head{flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:22px;}
#view-collection .collection-head .page-title, #view-allcards .collection-head .page-title{margin:0; font-size:clamp(1.6rem, 3vw, 2.3rem);}
.collection-head .count{margin-bottom:0 !important; font-family:var(--fg-font); letter-spacing:0.04em;}
.collection-toolbar{
  align-items:flex-end; gap:12px; padding:14px 16px; margin-bottom:16px; border-radius:14px;
  background:var(--fg-panel); border:1px solid var(--fg-edge); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.toolbar-field{display:flex; flex-direction:column; gap:5px;}
.toolbar-field.grow{flex:1; min-width:200px;}
.toolbar-field label{font-family:var(--fg-font); font-size:0.66rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint);}
.toolbar-field .collection-search{width:100%; min-width:0;}
.toolbar-field .collection-select{min-width:120px;}
/* blocs encore vides (non remplis par l'appli) : on les masque plutôt que d'afficher un titre orphelin */
.rarity-distribution:has(.rarity-distribution-bar:empty){display:none;}
.catalog-progress:has(.catalog-progress-sub:empty){display:none;}
.chip{padding:6px 13px; transition:transform .1s;}
.chip:hover{transform:translateY(-1px); color:var(--text);}
.chip.active{box-shadow:0 0 12px -2px currentColor;}
@media (max-width:760px){
  .collection-toolbar{padding:12px;}
  .toolbar-field:not(.grow){flex:1 1 40%;}
  .toolbar-field .collection-select{width:100%; min-width:0;}
}

/* ---------------------------------------------------------------- CARTES */
.mini-card{
  transform-style:preserve-3d; will-change:auto;
  transition:transform .18s ease, box-shadow .2s ease !important;
}
.mini-card.fg-tilt{
  transform:perspective(800px) rotateX(var(--fg-rx, 0deg)) rotateY(var(--fg-ry, 0deg)) translateY(-6px) scale(1.04) !important;
  z-index:5;
  box-shadow:0 0 26px -2px color-mix(in srgb, var(--glow, var(--gold-a)) 75%, transparent), 0 26px 40px -16px rgba(0,0,0,0.85) !important;
}
.fg-glare{
  position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .2s;
  background:radial-gradient(circle at var(--fg-mx, 50%) var(--fg-my, 50%), rgba(255,255,255,0.28), transparent 42%);
  mix-blend-mode:soft-light;
}
.mini-card.fg-tilt .fg-glare{opacity:1;}
/* reflet holographique au survol des cartes rares */
.mini-card[data-tier="SSR"].fg-tilt .fg-glare,
.mini-card[data-tier="UR"].fg-tilt .fg-glare,
.mini-card[data-tier="LR"].fg-tilt .fg-glare{
  background:
    radial-gradient(circle at var(--fg-mx, 50%) var(--fg-my, 50%), rgba(255,255,255,0.3), transparent 40%),
    linear-gradient(115deg, rgba(255,0,128,0.35), rgba(0,200,255,0.35) 35%, rgba(255,240,0,0.35) 65%, rgba(140,0,255,0.35));
  background-size:100% 100%, 200% 200%;
  background-position:center, var(--fg-mx, 50%) var(--fg-my, 50%);
  mix-blend-mode:soft-light; opacity:0.9;
}
/* cadre des cartes rares un peu plus présent */
.mini-card[data-tier="UR"], .mini-card[data-tier="LR"]{outline:1.5px solid color-mix(in srgb, var(--glow) 80%, white); outline-offset:-1.5px;}
.mini-card .tier-chip{font-family:var(--fg-font); letter-spacing:0.06em;}
/* carte pas encore possédée (catalogue) : légèrement désaturée — l'appli ajoute déjà son propre marquage */
.mini-card.selected{outline:3px solid var(--gold-a); outline-offset:2px;}

/* ---------------------------------------------------------------- BATAILLE */
.battle-scoreboard{
  background:var(--fg-panel); border:1px solid var(--fg-edge); border-radius:16px; padding:14px 26px; width:max-content; max-width:100%; margin:6px auto 8px;
}
.battle-score-vs{
  font-family:var(--fg-font); font-size:1.3rem !important; font-style:italic; padding-top:0 !important;
  background:linear-gradient(180deg, #ffb3a8, var(--danger)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 8px rgba(224,102,92,0.6));
}
.battle-option{transition:transform .12s ease, border-color .12s, background .12s;}
.battle-option .letter{font-family:var(--fg-font); border-radius:5px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);}
.battle-option.correct{box-shadow:0 0 16px -4px rgba(79,157,105,0.8);}
.battle-option.wrong-pick{animation:fg-shake .35s ease;}

/* ---------------------------------------------------------------- NOTIFICATIONS / TOAST */
.toast, .fp-notif{
  font-family:var(--fg-font);
  background:linear-gradient(90deg, rgba(245,214,124,0.14), transparent 40%), rgba(14,16,22,0.97) !important;
  border:1px solid var(--fg-edge-strong) !important; border-left:4px solid var(--gold-a) !important;
  box-shadow:0 14px 34px -12px rgba(0,0,0,0.9), 0 0 20px -8px rgba(245,214,124,0.5);
}
.fp-notif.win{border-left-color:#7fce9a !important;}
.fp-notif.lose{border-left-color:#f0958c !important;}

/* ---------------------------------------------------------------- MODALES */
.card-modal-overlay, .legal-modal-overlay, .fp-modal-overlay{backdrop-filter:blur(4px) saturate(1.2);}
.card-modal-overlay.open .card-modal, .legal-modal-overlay.open .legal-modal{animation:fg-pop-in .28s cubic-bezier(.2,.9,.3,1.25);}
@keyframes fg-pop-in{from{opacity:0; transform:scale(.9) translateY(12px);} to{opacity:1; transform:none;}}
.card-modal-close, .legal-modal-close{border-color:var(--fg-edge) !important; transition:transform .15s;}
.card-modal-close:hover, .legal-modal-close:hover{transform:rotate(90deg);}
.card-modal-stat{background:rgba(0,0,0,0.35) !important; border-color:rgba(255,255,255,0.08) !important;}
.card-modal-stat .num{font-family:var(--fg-font);}

/* ---------------------------------------------------------------- CHANGEMENT DE PAGE */
.view.active{animation:fg-view-in .32s ease both;}
@keyframes fg-view-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ---------------------------------------------------------------- CONNEXION */
.auth-showcase{background:linear-gradient(165deg, rgba(24,28,38,0.9), rgba(7,8,12,0.6) 70%) !important;}
.auth-card > *{max-width:400px;}
.auth-showcase-text h1{font-family:var(--fg-font); text-transform:uppercase; letter-spacing:0.02em;}

/* ---------------------------------------------------------------- BOUTON SON */
.fg-sound{
  display:flex; align-items:center; gap:8px; width:100%; cursor:pointer;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); color:var(--text-dim);
  border-radius:8px; padding:7px 10px; font-family:var(--fg-font); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em;
}
.fg-sound:hover{color:var(--text); border-color:var(--fg-edge-strong);}
.fg-sound svg{width:16px; height:16px;}
.fg-sound.on{color:var(--gold-a);}

/* ---------------------------------------------------------------- MOBILE & ACCESSIBILITÉ */
@media (max-width:760px){
  body::before{animation:none;}
  .pack-visual-wrap::after{width:380px; height:380px; margin:-190px 0 0 -190px;}
  .nav-item.active{clip-path:none;}
  .mobile-topbar{background:rgba(11,13,18,0.9); border-bottom-color:var(--fg-edge) !important;}
}
@media (hover:none){
  .mini-card.fg-tilt{transform:none !important;}
}
@media (prefers-reduced-motion: reduce){
  body::before, .pack, .pack-visual-wrap::after, .fp-coin, .fp-nav-badge{animation:none !important;}
}

/* =====================================================================
   MOBILE COMPACT — tout plus petit et plus serré sur téléphone (≤ 760 px)
   ===================================================================== */
@media (max-width:760px){
  html{font-size:13.5px;}                 /* réduit d'un coup tout ce qui est en rem */
  html, body{overflow-x:hidden;}
  #view-packs{overflow-x:hidden;}

  /* barre du haut */
  .mobile-topbar{padding:9px 12px !important; gap:10px !important;}
  .mobile-menu-btn{padding:5px !important;}
  .mobile-topbar .brand-logo{width:26px; height:26px; font-size:0.9rem; border-radius:7px;}
  .mobile-topbar .brand-mark{font-size:1rem;}
  .fp-topbar{padding:8px 12px 0 !important; gap:6px !important;}
  .fp-wallet, .fp-pack-pill{padding:3px 10px 3px 3px !important; gap:5px !important;}
  .fp-wallet b, .fp-pack-pill b{font-size:0.9rem !important;}
  .fp-wallet small, .fp-pack-pill small{font-size:0.62rem !important;}
  .fp-coin, .fp-pack-pill .fp-pack-ico{width:20px !important; height:20px !important;}
  .fp-coin svg, .fp-pack-pill svg{width:13px !important; height:13px !important;}
  .fp-me-chip .fp-av{width:26px; height:26px; font-size:0.8rem;}

  /* marges des pages */
  #view-packs.active{padding:18px 14px 44px !important;}
  #view-collection.active, #view-allcards.active, #view-battle.active,
  #view-profile.active, #view-profile.active.fp-enhanced, #view-friends.active, #view-market.active,
  #view-auctions.active, #view-messages.active, #view-achievements.active, #view-leaderboard.active{padding:12px 12px 40px !important;}

  /* titres */
  .pack-heading h1{font-size:1.45rem !important; margin-bottom:4px !important;}
  .pack-heading p{font-size:0.82rem;}
  .page-title, .battle-title, .fp-page-head .page-title{font-size:1.35rem !important;}
  .fp-name{font-size:1.6rem !important; margin:2px 0 4px !important;}
  .eyebrow, .fp-eyebrow{font-size:0.6rem !important; letter-spacing:0.2em !important;}
  .collection-head .count, .fp-page-head .count{font-size:0.74rem !important;}

  /* boutons */
  .open-btn, .reveal-continue{padding:9px 16px !important; font-size:0.72rem !important; border-radius:9px !important; box-shadow:0 3px 0 var(--fg-gold-dark) !important;}
  #open-btn{padding:11px 44px !important; font-size:0.86rem !important;}
  .fp-btn-ghost, .fp-pill{padding:7px 12px !important; font-size:0.68rem !important;}
  .open-btn svg, .fp-btn-ghost svg, .fp-pill svg{width:14px !important; height:14px !important;}

  /* onglets : une seule ligne qui défile au doigt */
  .fp-tabs{flex-wrap:nowrap !important; overflow-x:auto; gap:6px !important; padding-bottom:4px; margin-left:-12px; margin-right:-12px; padding-left:12px; padding-right:12px; scrollbar-width:none;}
  .fp-tabs::-webkit-scrollbar{display:none;}
  .fp-tab{flex-shrink:0; padding:7px 14px !important; font-size:0.66rem !important;}
  .fp-seg button{padding:6px 12px !important; font-size:0.68rem !important;}
  .filters{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-bottom:14px !important;}
  .filters::-webkit-scrollbar{display:none;}
  .chip{flex-shrink:0; padding:4px 10px !important; font-size:0.64rem !important;}

  /* panneaux */
  .fp-panel{padding:12px !important; border-radius:14px !important; margin-bottom:12px !important;}
  .fp-panel-head{margin-bottom:10px !important;}
  .fp-panel-head h2{font-size:0.78rem !important;}
  .fp-panel-head p{font-size:0.7rem !important;}
  .collection-toolbar{padding:10px !important; gap:8px !important;}
  .toolbar-field label{font-size:0.56rem !important;}
  .collection-search, .collection-select{padding:7px 10px !important; font-size:0.76rem !important;}
  .fp-search{padding:7px 10px !important;}
  .fp-search input{font-size:0.78rem !important;}

  /* cartes en grille : 3 par ligne, plus fines */
  .grid, #collection-grid, #allcards-grid, #battle-deck-grid{gap:8px !important;}
  .grid .mini-card{border-radius:10px !important;}
  .grid .mini-card .body{padding:6px 7px !important;}
  .grid .mini-card .title{font-size:0.62rem !important;}
  .grid .mini-card .desc{font-size:0.52rem !important;}
  .grid .mini-card .meta{font-size:0.54rem !important; padding-top:3px !important;}
  .grid .mini-card .meta svg{width:9px !important; height:9px !important;}
  .grid .mini-card .tier-chip{font-size:0.46rem !important; padding:1px 4px !important;}
  .fp-shop-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:9px !important;}
  .fp-shop-card .mini-card .body{padding:7px 8px;}
  .fp-shop-card .mini-card .title{font-size:0.7rem;}
  .fp-buy{padding:6px 8px !important; font-size:0.76rem !important; border-radius:9px !important;}
  .fp-cards{gap:8px !important;}

  /* écran Paquets */
  .pack-visual-wrap{width:132px !important; height:206px !important; margin:18px auto 20px !important;}
  .pack{width:132px !important; height:206px !important;}
  #pack.fp-pack-fallback .glyph{font-size:46px;}
  .pack-visual-wrap::after{width:300px !important; height:300px !important; margin:-150px 0 0 -150px !important;}
  .fp-packs-box{padding:10px 12px !important; margin-top:14px !important;}
  .fp-packs-pips{gap:4px !important;}
  .fp-packs-pips i{height:15px !important;}
  .pity-line, .empty-hint{font-size:0.72rem !important;}
  #reveal-card-slot .reveal-card{width:min(210px, 62vw) !important;}

  /* profil */
  .fp-hero-main{padding:18px 14px !important; gap:10px !important; min-height:0 !important;}
  .fp-avatar-ring{width:92px !important; height:92px !important;}
  .fp-avatar-ring .fp-av, .fp-av-xl{width:70px !important; height:70px !important; font-size:1.9rem !important;}
  .fp-level-pill{font-size:0.62rem !important; padding:2px 8px !important;}
  .fp-rank{font-size:0.72rem !important; padding:3px 9px !important;}
  .fp-xp{font-size:0.68rem !important;}
  .fp-hero-cta{gap:6px !important;}
  .fp-hero-feature{display:none !important;}
  .fp-stats{grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:7px !important;}
  .fp-stat{padding:9px 8px !important; gap:6px !important; flex-direction:column; align-items:flex-start !important; border-radius:12px !important;}
  .fp-stat-ico{width:26px !important; height:26px !important; border-radius:8px !important;}
  .fp-stat-ico svg{width:14px !important; height:14px !important;}
  .fp-stat b{font-size:1.02rem !important;}
  .fp-stat small{font-size:0.6rem !important;}
  .fp-rarity-grid{gap:6px !important;}
  .fp-rarity-tile{padding:7px 4px !important;}
  .fp-quest{padding:9px !important; gap:8px !important;}
  .fp-quest-ico{width:32px !important; height:32px !important;}
  .fp-badges{gap:6px !important;}

  /* bataille */
  #view-battle.fp-battle > .collection-head{padding:16px 14px !important;}
  .fp-battle-hero{grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:6px !important;}
  .fp-bh-stat, .fp-bh-ring{padding:8px 4px !important; border-radius:12px !important;}
  .fp-bh-stat b, .fp-bh-ring b{font-size:1.1rem !important;}
  .fp-bh-stat small, .fp-bh-ring small{font-size:0.6rem !important;}
  .battle-opponent-list{gap:9px !important; margin-top:12px !important;}
  .battle-list-item, .battle-opponent-card{padding:11px 12px !important; gap:7px !important;}
  .battle-scoreboard{padding:8px 16px !important;}
  .battle-score-value{font-size:1.5rem !important;}
  .battle-question-panel{padding:14px !important;}
  .battle-option{padding:8px 10px !important; font-size:0.78rem !important;}

  /* marché & enchères */
  .fp-market-hero{padding:16px 14px !important; gap:12px !important; border-radius:16px !important;}
  .fp-market-hero p, .fp-mh-text p{font-size:0.76rem !important; margin:6px 0 10px !important;}
  .fp-balance{padding:10px 14px 10px 10px !important; gap:10px !important; border-radius:14px !important;}
  .fp-balance-coin{width:40px !important; height:40px !important;}
  .fp-balance-coin svg{width:24px !important; height:24px !important;}
  .fp-balance b{font-size:1.5rem !important;}
  .fp-price-strip{grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:6px !important;}
  .fp-price{padding:7px 8px !important; border-radius:10px !important;}
  .fp-price .lbl{display:none;}
  .fp-auc-card{padding:9px !important; gap:9px !important; border-radius:14px !important;}
  .fp-auc-visual{width:74px !important;}
  .fp-auc-price{font-size:1.1rem !important;}
  .fp-auc-grid{gap:10px !important;}

  /* amis, classement, succès */
  .fp-friend-grid{gap:8px !important;}
  .fp-friend{padding:12px 10px !important;}
  .fp-podium{gap:8px !important;}
  .fp-pod .fp-av{width:48px !important; height:48px !important; font-size:1.3rem !important;}
  .fp-pod.p1 .fp-pod-step{height:78px !important;}
  .fp-pod.p2 .fp-pod-step{height:58px !important;}
  .fp-pod.p3 .fp-pod-step{height:44px !important;}
  .fp-pod-step{font-size:1.4rem !important; padding-top:6px !important;}
  .fp-pod-val{font-size:1rem !important;}
  .fp-lb-row{padding:8px 10px !important; gap:10px !important;}
  .fp-ach-hero{padding:18px 14px !important; gap:14px !important;}
  .fp-ach-ring{width:96px !important; height:96px !important;}
  .fp-ach-ring b{font-size:1.5rem !important;}
  .fp-ach{padding:10px 12px !important; gap:10px !important;}

  /* fenêtres */
  .fp-modal{padding:16px !important; gap:12px !important; border-radius:18px !important; max-height:90vh; overflow-y:auto;}
  .fp-modal-card{width:128px !important; margin:0 auto;}
  .fp-modal-info h3{font-size:1.05rem !important;}
  .card-modal{padding:16px !important;}
  .card-modal-top{gap:14px !important;}
  .card-modal-visual{max-width:160px !important;}
  .card-modal-info h3{font-size:1.1rem !important;}
  .card-modal-desc{font-size:0.76rem !important;}
  .card-modal-actions{gap:8px !important; margin-top:14px !important; padding-top:12px !important;}
  .card-modal-actions button{min-width:0 !important; padding:10px 8px !important; font-size:0.74rem !important;}

  /* notifications & menu */
  .fp-notifs{top:auto !important; bottom:10px; right:10px !important; width:calc(100vw - 20px) !important;}
  .fp-notif{padding:8px 8px 8px 10px !important; gap:8px !important; border-radius:12px !important;}
  .fp-notif-ico{width:30px !important; height:30px !important; border-radius:9px !important;}
  .fp-notif-txt b{font-size:0.78rem !important;}
  .fp-notif-txt small{font-size:0.68rem !important;}
  .fp-notif-btn{padding:6px 9px !important; font-size:0.66rem !important;}
  .sidebar{width:240px !important; padding:16px 10px !important;}
  .nav-item{padding:8px 10px !important; font-size:0.72rem !important;}
  .sidebar-top{padding-bottom:14px !important;}
  .toast{font-size:0.74rem; padding:8px 14px; bottom:16px;}
}
@media (max-width:760px){
  #view-market, #view-auctions, .fp-page{max-width:100%; overflow-x:hidden;}
  .fp-price-strip{display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; overflow:visible !important;}
  .fp-price{min-width:0 !important;}
  .fp-battle-hero{display:flex !important; flex-wrap:wrap; gap:6px !important;}
  .fp-bh-ring{order:-1; flex:1 0 100%; flex-direction:row !important; gap:10px;}
  .fp-bh-stat{flex:1 1 0; min-width:0;}
  .fp-friend .fp-challenge{font-size:0 !important; gap:0 !important; padding-left:10px !important; padding-right:10px !important;}
  .fp-friend .fp-challenge svg{width:15px !important; height:15px !important;}
  .fp-auc-tools select{flex:1;}
}
@media (max-width:380px){
  html{font-size:13px;}
  .fp-stats{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
}

/* ================================================================
   Mobile : 3 cartes par ligne partout (collection, toutes les cartes,
   deck de bataille, vitrine du profil, Marché, vente aux enchères)
   ================================================================ */
@media (max-width:760px){
  .grid, #collection-grid, #allcards-grid, #battle-deck-grid, #battle-play-grid,
  .fp-cards, .fp-shop-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  /* cartes plus fines : texte resserré pour tenir sur ~110 px de large */
  .grid .mini-card, .fp-cards .mini-card, .fp-shop-grid .mini-card{border-radius:10px !important;}
  .grid .mini-card .body, .fp-cards .mini-card .body, .fp-shop-grid .mini-card .body{padding:6px 7px !important;}
  .grid .mini-card .title, .fp-cards .mini-card .title, .fp-shop-grid .mini-card .title{font-size:0.62rem !important; line-height:1.25 !important;}
  .grid .mini-card .desc, .fp-cards .mini-card .desc, .fp-shop-grid .mini-card .desc{display:none !important;}
  .grid .mini-card .meta, .fp-cards .mini-card .meta, .fp-shop-grid .mini-card .meta{font-size:0.54rem !important; padding-top:3px !important;}
  .grid .mini-card .meta svg, .fp-cards .mini-card .meta svg, .fp-shop-grid .mini-card .meta svg{width:9px !important; height:9px !important;}
  .grid .mini-card .tier-chip, .fp-cards .mini-card .tier-chip, .fp-shop-grid .mini-card .tier-chip{font-size:0.46rem !important; padding:1px 4px !important;}
  .grid .mini-card .art-watermark, .fp-cards .mini-card .art-watermark, .fp-shop-grid .mini-card .art-watermark{font-size:1.7rem !important;}

  /* Marché : bouton d'achat et étiquette « Possédée » à la taille de la carte */
  .fp-shop-grid .fp-shop-card{gap:6px !important;}
  .fp-shop-grid .fp-buy{padding:5px 4px !important; gap:4px !important; font-size:0.66rem !important; border-radius:8px !important;}
  .fp-shop-grid .fp-buy .fp-coin{width:14px !important; height:14px !important;}
  .fp-shop-grid .fp-buy .fp-coin svg{width:9px !important; height:9px !important;}
  .fp-shop-grid .fp-owned-tag{top:5px !important; right:5px !important; font-size:0.5rem !important; padding:1px 4px !important;}
  .fp-shop-grid .fp-owned-tag svg{width:8px !important; height:8px !important;}
}