/* Mission École — thème studieux + collection propre (slots + modal)
   - Sans blur / sans voile
   - Fond cahier + étoiles
   - Collection inspirée du thème arcade (slots, top overlay, grille responsive)
*/

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --bg:#fbfbfe;
  --paper:#ffffff;
  --card:#ffffff;
  --stroke:rgba(27,36,48,.12);
  --text:#1b2430;
  --muted:#5b6b7c;

  --accent:#2f80ff;
  --accent2:#7c3aed;
  --gold:#f4c542;
  --mint:#22c55e;
  --danger:#ef4444;

  --common:#94a3b8;
  --rare:#2f80ff;
  --epic:#7c3aed;
  --legendary:#f4c542;

  --shadow: 0 14px 30px rgba(20,30,40,.14);
  --shadow2: 0 10px 22px rgba(20,30,40,.10);
  --radius: 18px;
}

*{box-sizing:border-box}
a{color:inherit; text-decoration:none}

/* ---------- Base ---------- */
html,body{
  margin:0;
  padding:0;
  font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(2px 2px at 10% 12%, rgba(244,197,66,.55) 50%, transparent 52%),
    radial-gradient(2px 2px at 22% 78%, rgba(47,128,255,.35) 50%, transparent 52%),
    radial-gradient(2px 2px at 62% 18%, rgba(124,58,237,.35) 50%, transparent 52%),
    radial-gradient(2px 2px at 86% 72%, rgba(34,197,94,.30) 50%, transparent 52%),
    repeating-linear-gradient(
      180deg,
      rgba(47,128,255,.06) 0px,
      rgba(47,128,255,.06) 1px,
      transparent 1px,
      transparent 34px
    ),
    linear-gradient(180deg, #ffffff, var(--bg));
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(27,36,48,.10);
  background: rgba(255,255,255,.92);
  position:sticky;
  top:0;
  z-index:50;
}

.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:44px;
  height:44px;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  box-shadow: 0 8px 16px rgba(20,30,40,.10);
}
.logo img{width:100%; height:100%; object-fit:cover}

.brand-text .title{font-weight:900; letter-spacing:.2px; font-size:18px;}
.brand-text .subtitle{margin-top:1px; color:var(--muted); font-weight:800; font-size:12.5px;}

.hud{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.hud-card{
  background:var(--paper);
  border:1px solid rgba(27,36,48,.10);
  border-radius:16px;
  padding:10px 12px;
  min-width:110px;
  box-shadow: var(--shadow2);
}
.hud-label{font-size:12px; color:var(--muted); font-weight:900; letter-spacing:.2px}
.hud-value{font-size:18px; font-weight:900}

/* ---------- Tabs ---------- */
.tabs{
  display:flex;
  gap:10px;
  padding:12px 16px;
  position:sticky;
  top:76px; /* sous topbar */
  z-index:49;
  background: rgba(255,255,255,.92);
  border-bottom:1px solid rgba(27,36,48,.08);
}

.tab{
  border:1px solid rgba(27,36,48,.12);
  background: var(--paper);
  padding:10px 12px;
  border-radius: 999px;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(20,30,40,.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tab:hover{transform: translateY(-1px)}
.tab.active{
  border-color: rgba(47,128,255,.35);
  box-shadow: 0 14px 22px rgba(47,128,255,.16);
}

/* ---------- Layout ---------- */
.container{max-width:1180px; margin:0 auto; padding: 18px 16px 26px}
.panel{background: transparent;}
.panel.hidden{display:none !important}

.panel-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin: 6px 0 12px;
}
.panel-header h2{margin:0; font-size:22px; font-weight:900}
.panel-actions{display:flex; gap:10px; flex-wrap:wrap}

.columns{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
}
@media (max-width: 980px){
  .columns{grid-template-columns:1fr}
  .tabs{top:70px}
}

/* ---------- Cards ---------- */
.card{
  background: var(--paper);
  border:1px solid rgba(27,36,48,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.card h3{margin: 2px 0 10px; font-size:18px; font-weight:900}
.card h4{margin: 0 0 10px; font-size:15px; font-weight:900}

.card-inner{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(47,128,255,.07), rgba(124,58,237,.05));
  border:1px dashed rgba(47,128,255,.25);
}

.muted{color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{
  border:1px solid rgba(27,36,48,.12);
  background: linear-gradient(180deg, #ffffff, #f7f9ff);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:900;
  box-shadow: 0 10px 18px rgba(20,30,40,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn-ghost{background: transparent; box-shadow:none}
.btn-danger{border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.10)}

/* ---------- Info chips ---------- */
.info-row{display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 14px}
.chip{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(27,36,48,.10);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: 0 8px 16px rgba(20,30,40,.06);
  font-weight:900;
}

/* ---------- Forms ---------- */
.filters{display:grid; grid-template-columns: 1fr 1fr 1.4fr; gap:10px; margin-bottom:10px}
@media (max-width: 780px){ .filters{grid-template-columns:1fr} }

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width: 520px){.grid2{grid-template-columns:1fr}}

.field{display:flex; flex-direction:column; gap:6px}
.field > span{font-size:12px; color:var(--muted); font-weight:900}
input, select{
  width:100%;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(27,36,48,.12);
  background: rgba(255,255,255,.98);
  font-family: inherit;
  font-weight:800;
  outline:none;
}
input:focus, select:focus{
  border-color: rgba(47,128,255,.45);
  box-shadow: 0 0 0 3px rgba(47,128,255,.14);
}

/* ---------- Task list ---------- */
.task-list{display:flex; flex-direction:column; gap:10px}
.task{
  display:grid;
  grid-template-columns: 36px 1fr auto;
  align-items:center;
  gap:10px;
  padding: 12px;
  border-radius: 16px;
  border:1px solid rgba(27,36,48,.10);
  background:
    radial-gradient(240px 90px at 18% 0%, rgba(244,197,66,.12), transparent 55%),
    radial-gradient(240px 90px at 80% 100%, rgba(47,128,255,.10), transparent 55%),
    #fff;
  box-shadow: 0 10px 18px rgba(20,30,40,.07);
  cursor:pointer;
  transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease;
}
.task:hover{transform: translateY(-1px)}
.task.done{
  border-color: rgba(34,197,94,.35);
  background:
    radial-gradient(240px 90px at 14% 0%, rgba(34,197,94,.14), transparent 55%),
    radial-gradient(240px 90px at 86% 100%, rgba(244,197,66,.14), transparent 55%),
    #fff;
}

.task-title{font-weight:900; line-height:1.15;}
.task-meta{margin-top:2px; color:var(--muted); font-weight:800; font-size:12.5px}

.checkbox{
  width:26px; height:26px;
  border-radius: 10px;
  border: 2px solid rgba(27,36,48,.20);
  background: #fff;
  display:flex; align-items:center; justify-content:center;
}
.checkmark{opacity:0; transform: scale(.85); transition: opacity .10s ease, transform .10s ease; font-weight:900}
.task.done .checkbox{border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.12)}
.task.done .checkmark{opacity:1; transform: scale(1)}

.points-pill{
  background: linear-gradient(180deg, rgba(244,197,66,.95), rgba(244,197,66,.78));
  border: 1px solid rgba(27,36,48,.12);
  color: #3a2a00;
  font-weight: 1000;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(244,197,66,.18);
}
.points-pill::after{content:"★"; margin-left:6px}
.task-actions{display:flex; gap:10px; align-items:center}

/* ---------- Boss / bonus block ---------- */
.boss{
  border-radius: 18px;
  padding: 12px;
  border:1px solid rgba(27,36,48,.10);
  background:
    radial-gradient(380px 160px at 12% 0%, rgba(47,128,255,.10), transparent 60%),
    radial-gradient(380px 160px at 90% 100%, rgba(124,58,237,.10), transparent 60%),
    #fff;
  box-shadow: 0 10px 18px rgba(20,30,40,.07);
}
.boss-title{font-weight:1000; letter-spacing:.3px}
.boss-desc{color:var(--muted); font-weight:800; margin-top:6px}
.boss-actions{margin-top:10px}

/* ---------- Booster area ---------- */
.booster-area{display:grid; grid-template-columns: 1fr; gap:12px}
.pack{
  width: 220px;
  max-width: 70vw;
  margin: 10px auto;
  position:relative;
  filter: drop-shadow(0 16px 22px rgba(20,30,40,.18));
}
.pack img{width:100%; height:auto; display:block}
.pack-glow{
  position:absolute;
  inset:-10px;
  border-radius: 28px;
  background: radial-gradient(120px 80px at 50% 30%, rgba(244,197,66,.35), transparent 60%),
              radial-gradient(120px 80px at 20% 70%, rgba(47,128,255,.25), transparent 60%),
              radial-gradient(120px 80px at 80% 70%, rgba(124,58,237,.22), transparent 60%);
  pointer-events:none;
}
.reveal{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}

/* ---------- Rarity dots ---------- */
.dot{display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px}
.dot.common{background: var(--common)}
.dot.rare{background: var(--rare)}
.dot.epic{background: var(--epic)}
.dot.legendary{background: var(--legendary)}

/* =========================================================
   COLLECTION — reprise du style arcade (slots + grille + modal)
   ========================================================= */

.collection-controls{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

/* Grille responsive "propre" */
.collection-grid{
  display:grid;
  grid-template-columns: repeat(8, minmax(120px, 1fr));
  gap: 10px;
}
@media (max-width: 1100px){ .collection-grid{grid-template-columns: repeat(6, minmax(120px, 1fr));} }
@media (max-width: 820px){ .collection-grid{grid-template-columns: repeat(4, minmax(120px, 1fr));} }
@media (max-width: 520px){ .collection-grid{grid-template-columns: repeat(2, minmax(120px, 1fr));} }

/* Slot (carte dans la grille) */
.slot{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(27,36,48,.12);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease;
  position:relative;
  box-shadow: 0 10px 18px rgba(20,30,40,.08);
}
.slot:hover{
  transform: translateY(-1px);
  border-color: rgba(47,128,255,.35);
  box-shadow: 0 14px 22px rgba(47,128,255,.12);
}
.slot img{display:block;width:100%;height:auto; opacity:.98}

/* Bandeau haut (code + rareté) */
.slot .slot-top{
  position:absolute; inset:0 0 auto 0;
  padding:8px 10px;
  display:flex; justify-content:space-between; align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.95), transparent);
}
.slot .slot-code{font-weight:1000}
.slot .slot-rarity{width:10px;height:10px;border-radius:50%}
.slot .slot-rarity.common{background: var(--common)}
.slot .slot-rarity.rare{background: var(--rare)}
.slot .slot-rarity.epic{background: var(--epic)}
.slot .slot-rarity.legendary{background: var(--legendary)}

/* Slot "locked" (non possédée) */
.locked::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(520px 280px at 20% 0%, rgba(47,128,255,.10), transparent 60%),
    rgba(255,255,255,.60);
}
.locked .slot-top{background: rgba(255,255,255,.92)}
.locked .slot-code{color: rgba(27,36,48,.55)}

/* Si ton JS utilise mini-card à la place, on garde un rendu propre aussi */
.mini-card{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(27,36,48,.12);
  background:#fff;
  box-shadow: 0 10px 18px rgba(20,30,40,.10);
}
.mini-card img{width:100%; height:auto; display:block}
.mini-card .mini-meta{padding:10px}
.mini-card .mini-title{font-weight:1000}
.mini-card .mini-sub{color:var(--muted); font-weight:800; font-size:12.5px}

/* ---------- Toast ---------- */
.toast{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(27,36,48,.12);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
  font-weight: 900;
  z-index: 60;
}

/* ---------- Modals (version claire) ---------- */
.modal.hidden{display:none !important}

/* Backdrop : pas de blur, et ne s'affiche pas si vide */
.modal-backdrop{
  position: fixed;
  inset:0;
  background: rgba(27,36,48,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 80;
}
.modal-backdrop:empty{display:none !important}

/* Ta modal est structurée avec .modal-card dans ton HTML */
.modal-card{
  position: fixed;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:min(860px, 92vw);
  border-radius:18px;
  background: rgba(255,255,255,.98);
  border:1px solid rgba(27,36,48,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
  z-index: 81;
}
.modal-close{
  position:absolute;
  right:10px; top:10px;
  border:1px solid rgba(27,36,48,.12);
  background: rgba(255,255,255,.95);
  color:var(--text);
  width:34px; height:34px;
  border-radius:12px;
  cursor:pointer;
  font-weight:1000;
}
.modal-body{display:flex; gap:14px; padding:14px}
.modal-body img{
  width:320px;
  border-radius:16px;
  border:1px solid rgba(27,36,48,.12);
  background:#fff;
}
@media (max-width: 760px){
  .modal-body{flex-direction:column}
  .modal-body img{width:100%}
}
.modal-info{display:flex; flex-direction:column; gap:8px}
.modal-title{font-size:20px; font-weight:1000}
.modal-meta{color:var(--muted); font-weight:800}
.modal-actions{margin-top:8px; display:flex; gap:10px; flex-wrap:wrap}

/* ---------- Sécurité anti flou global ---------- */
*{filter:none}


@media (max-width: 560px){

  /* topbar plus fin */
  .topbar{
    position: sticky;
    top: 0;
    z-index: 60;

    padding: 6px 10px !important;
    min-height: 44px !important;
  }

  /* logo plus petit */
  .logo{
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }

  /* titre compact */
  .brand-text .title{
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  /* sous-titre masqué sur gsm */
  .brand-text .subtitle{
    display:none !important;
  }

  /* HUD compact */
  .hud{ gap: 6px !important; }
  .hud-card{
    padding: 6px 8px !important;
    min-width: auto !important;
    border-radius: 12px !important;
  }
  .hud-label{ font-size: 10px !important; }
  .hud-value{ font-size: 12px !important; }

  /* tabs sticky sous topbar */
  .tabs{
    position: sticky !important;
    top: 44px !important; /* doit correspondre au topbar */
    z-index: 59;

    padding: 8px 10px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar{ display:none; }

  .tab{
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
}

/* =========================
   BOOSTER STACK — taille pack + pile + click-to-dismiss + WOW
   (override final)
   ========================= */

/* hint en bas au dessus de la pile */
.stack-hint{
  position: absolute !important;
  left: 50% !important;
  bottom: -44px !important;
  transform: translateX(-50%) !important;
  z-index: 999 !important;
}

/* carte empilée */
.stack-card{
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  transform:
    translateX(-50%)
    translateY(var(--stack-offset, 0px))
    scale(var(--stack-scale, 1)) !important;

  width: var(--cardW, 220px) !important;
  aspect-ratio: 3 / 4.2; /* approx carte; ne casse pas si image diff */
  border-radius: 18px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* image carte : occupe tout */
.stack-card img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* badge en haut */
.stack-card .badge{
  position:absolute !important;
  left:10px !important;
  top:10px !important;
  z-index: 5 !important;
}

/* animation quand on "retire" la carte du dessus */
.stack-card.throw{
  animation: cardThrow 360ms ease-in forwards;
  pointer-events: none !important;
}

@keyframes cardThrow{
  0%{
    opacity: 1;
    transform:
      translateX(-50%)
      translateY(var(--stack-offset, 0px))
      scale(var(--stack-scale, 1));
  }
  100%{
    opacity: 0;
    transform:
      translateX(calc(-50% + 140px))
      translateY(calc(var(--stack-offset, 0px) - 30px))
      rotate(10deg)
      scale(0.98);
  }
}

/* =========================
   BOOSTER — pile sur le dos (dos visible derrière)
   ========================= */

/* zone booster : centre + overlay */
.booster-area{
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
}

/* le dos reste en dessous */
.pack{
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
}

/* le reveal devient une couche au-dessus, même taille que le pack */
#reveal{
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  transform: translateX(-50%) !important;

  width: var(--cardW, 220px) !important;
  height: var(--cardH, 310px) !important;

  z-index: 2 !important;
  pointer-events: auto !important;
}

/* hint posé sous la carte */
#reveal .stack-hint{
  position: absolute !important;
  left: 50% !important;
  bottom: -44px !important;
  transform: translateX(-50%) !important;
  z-index: 999 !important;
}

/* cartes empilées dans #reveal */
#reveal .stack-card{
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  transform:
    translateX(-50%)
    translateY(var(--stack-offset, 0px))
    scale(var(--stack-scale, 1)) !important;

  width: 100% !important;
  height: 100% !important;

  border-radius: 18px !important;
  overflow: hidden !important;
}

/* image = plein cadre */
#reveal .stack-card img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* =========================
   WOW EFFECTS — assure que ça reste visible sur la pile
   ========================= */
/* WOW effects (rare+) */
.wow::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  opacity:0;
}
.wow.rare::before{
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,.45), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(56,189,248,.35), transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(108,240,255,.25), transparent 50%);
}
.wow.epic::before{
  background:
    radial-gradient(circle at 25% 35%, rgba(167,139,250,.55), transparent 42%),
    radial-gradient(circle at 78% 72%, rgba(155,108,255,.45), transparent 48%),
    radial-gradient(circle at 50% 15%, rgba(108,240,255,.25), transparent 55%);
}
.wow.legendary::before{
  background:
    radial-gradient(circle at 22% 32%, rgba(251,191,36,.65), transparent 40%),
    radial-gradient(circle at 78% 72%, rgba(255,77,109,.35), transparent 48%),
    radial-gradient(circle at 50% 12%, rgba(251,191,36,.28), transparent 55%);
}
.wow-active::before{
  animation: sparkle 850ms ease-out infinite;
  opacity:1;
}
@keyframes sparkle{
  0%{transform: translateY(10px) scale(.98); opacity:0;}
  30%{opacity:1;}
  100%{transform: translateY(-6px) scale(1.02); opacity:0;}
}

/* small glitter dots */
.wow::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 3px) 20px 30px/120px 120px,
    radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 2px) 80px 10px/140px 140px,
    radial-gradient(circle, rgba(255,255,255,.8) 0 2px, transparent 3px) 40px 90px/160px 160px;
  mix-blend-mode: screen;
}
.wow-active::after{
  animation: glitter 900ms ease-out infinite;
  opacity:.9;
}
@keyframes glitter{
  0%{transform: translateY(10px); opacity:0;}
  25%{opacity:.95;}
  100%{transform: translateY(-12px); opacity:0;}
}