/* Styles pour la galerie de cartes
   NOTES IMPORTANTES:
   - Les PNG fournis sont conçus pour être empilés sans redimension ni déplacement.
   - Nous utilisons des dimensions fixes (350x500) pour chaque carte afin
     de préserver l'alignement des images. Sur petits écrans, la galerie
     devient scrollable horizontalement plutôt que de réduire les PNG.
*/

.gallery-grid{
  display:grid;
  gap:24px;
  justify-content:center;
  /* Mobile: 3 colonnes par défaut (puis 4/5/6 selon largeur) */
  grid-template-columns: repeat(3, 1fr);
  width: 90%;
  margin: 0 auto;
  max-width: 1400px;
}

/* Filter bar */
.filter-bar{width:90%;max-width:1100px;margin:6px auto 14px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.filter-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:8px}
.filter-row.top{margin-top:6px}
.filter-row.bottom{margin-bottom:0}
.filter-group{display:flex;gap:8px;align-items:center}
/* center groups grow to occupy available space */
.filter-row .center, .filter-row .sets-group, .filter-row .types-group{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}
.filter-row .lang-group{justify-content:flex-start}
.filter-row .factions-group{justify-content:flex-start}
.filter-row .perpage-group{justify-content:flex-end}
.filter-group.left{order:1}
.filter-group.right{order:2}
.filter-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px;border-radius:6px;color:#efe6d8;cursor:pointer;display:flex;align-items:center;justify-content:center}
.filter-btn img{width:26px;height:26px;object-fit:contain;display:block}
.filter-btn.active{background:rgba(255,255,255,0.03);box-shadow:0 4px 12px rgba(0,0,0,0.6);transform:translateY(-2px)}

/* Per-page buttons */
.perpage-group{align-items:center}
.perpage-btn{background:linear-gradient(180deg,#3b2b1d,#2d2116);border:1px solid rgba(255,255,255,0.06);padding:6px 10px;border-radius:6px;color:#f6ecd8;cursor:pointer;font-weight:600;transition:all .12s ease}
.perpage-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.45)}
.perpage-btn.active{background:linear-gradient(180deg,#f0e6c8,#d8caa6);color:#1a1209;border-color:rgba(0,0,0,0.12);box-shadow:0 6px 18px rgba(0,0,0,0.55);transform:translateY(-2px)}

/* Pagination controls */
#gw-pagination{margin-top:12px}
#gw-pagination button{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#efe6d8;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .12s ease}
#gw-pagination button:hover{background:rgba(255,255,255,0.03);transform:translateY(-2px)}
#gw-pagination button:disabled{opacity:0.35;cursor:default;transform:none}

/* Use same polished look for set buttons in the center filter group */
.filter-btn.filter-set{
  background:linear-gradient(180deg,#3b2b1d,#2d2116);
  border:1px solid rgba(255,255,255,0.06);
  padding:6px 10px;
  border-radius:6px;
  color:#f6ecd8;
  cursor:pointer;
  font-weight:600;
  transition:all .12s ease;
}
.filter-btn.filter-set img{width:20px;height:20px}
.filter-btn.filter-set:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.45)}
.filter-btn.filter-set.active{background:linear-gradient(180deg,#f0e6c8,#d8caa6);color:#1a1209;border-color:rgba(0,0,0,0.12);box-shadow:0 6px 18px rgba(0,0,0,0.55);transform:translateY(-2px)}

/* Responsive grid : 2 (default) → 3 → 4 → 5 (max) */
@media (min-width:520px){ .gallery-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width:760px){ .gallery-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (min-width:1040px){ .gallery-grid{ grid-template-columns: repeat(6, 1fr); } }

/* On large landscape / fixed devices use 50% of the viewport width */
@media (min-width:900px) and (orientation: landscape) {
  .gallery-grid{ width:50%; }
}

/* Chaque cellule garde le ratio 350x500 (7:10) et les PNG seront redimensionnés
   par le même facteur (width:100% / height:100%) pour conserver l'empilement. */
.card{
  width:100%;
  aspect-ratio: 7 / 10; /* équivalent à 350/500 */
  background:transparent;
  position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
  border-radius:6px;
  overflow:hidden;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
}

/* Wrapper around the card + meta area so the meta can sit outside the artwork */
.card-cell{ display:flex; flex-direction:column; gap:6px; width:100%; box-sizing:border-box }

/* meta area displayed under the card */
.card-meta{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px; box-sizing:border-box }
.card-meta .card-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#efe6d8 }
.card-select-bullet{ width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.35); color:#efe6d8; font-weight:700 }
.card-cell.selected{ box-shadow: 0 0 0 3px rgba(46,204,113,0.9); z-index:200 }

/* Toutes les couches ne doivent pas être redimensionnées: laisser la taille intrinsèque
   des images. Les images pleines couvrantes doivent être positionnées en absolu
   à 0,0 — leur taille native doit être 350x500. */
.card .layer{
  position:absolute;
  left:0;top:0;
  pointer-events:none;
  display:block;
  width:100%;
  height:100%;
  object-fit:fill; /* étire chaque couche pour remplir la carte */
}

/* Le canvas interne doit remplir exactement la zone de la carte */
.card-canvas{
  width:100%;
  height:100%;
  display:block;
  border-radius:inherit;
}

/* Ne pas forcer la hauteur/largeur des images globales — utiliser leur taille native */
.card .layer.illustration,
.card .layer.border,
.card .layer.banner,
.card .layer.footer{
  left:0;top:0; /* se placent au coin supérieur gauche */
}

/* Les icônes (cocarde, rarity, row) conservent leur taille native; on les positionne
   sans fixer width/height pour éviter le redimensionnement. */
.layer.cocarde{z-index:45}
.layer.rarity{z-index:46}
.layer.row{z-index:44}

/* Les icônes spéciales et capacités sont aussi des couches pleine carte
  (même facteur d'échelle que les autres PNG). On laisse l'image entière
  se redimensionner pour conserver le positionnement prévu dans les sources. */
.layer.badge,.layer.ability1,.layer.ability2{z-index:47}

/* IMPORTANT: forcer toutes les petites icônes à occuper la totalité de la carte
  pour garantir un facteur d'échelle identique à celui des autres PNG. */
.layer.cocarde,.layer.rarity,.layer.row,.layer.badge,.layer.ability1,.layer.ability2{
  width:100%;
  height:100%;
  object-fit:fill;
  left:0;top:0;position:absolute;
}

/* Explicit z-index order matching requested stacking (low -> high):
   fond(10), illustration(20), footer(30), banner(40), border(50),
   ability2(60), ability1(70), row(80), collector(90), texte(100),
   cocarde(110), icone_cocarde(120), force(130) */
.layer.fond{z-index:10}
.layer.illustration{z-index:20}
.layer.footer{z-index:30}
.layer.banner{z-index:40}
.layer.border{z-index:50}
.layer.ability2{z-index:60}
.layer.ability1{z-index:70}
.layer.row{z-index:80}
.layer.collector{z-index:90}
.text-name,.text-rules,.text-flavor{z-index:100;position:absolute}
.layer.cocarde{z-index:110}
.layer.icone_cocarde{z-index:120}
.text-strength{z-index:130}

.card .text-name{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;font-weight:700;font-size:18px;color:#1e1e1e;z-index:60;text-align:center;padding:0 12px}
.card .text-strength{position:absolute;left:22px;top:48px;font-weight:800;font-size:40px;color:#000;z-index:60;text-shadow:0 1px 0 rgba(255,255,255,0.8)}
.card .text-rules{position:absolute;left:40px;right:40px;bottom:38px;font-size:12px;color:#111;z-index:60;line-height:1.15;text-align:center;overflow:hidden}
.card .text-flavor{position:absolute;left:36px;right:36px;bottom:18px;font-size:11px;color:#333;z-index:60;text-align:center}

/* Small screens: ne pas réduire les PNG — permettre le scroll horizontal */
body{overflow-x:hidden}
@media (max-width:520px){
  .gallery-grid{overflow-x:auto;padding-bottom:12px}
  .gallery-grid::-webkit-scrollbar{height:10px}
}

/* Mobile: stack filter groups one-per-line and add collapse behaviour */
@media (max-width:520px){
  .filter-bar{ width:94%; max-width:none; margin:6px auto 14px; }
  .filter-row{ flex-direction:column; align-items:flex-start; gap:6px }
  .filter-group{ width:100%; justify-content:flex-start }
  .filter-row .center, .filter-row .sets-group, .filter-row .types-group{ flex:initial; justify-content:flex-start }
  .filters-toggle{ display:block; background:transparent; border:1px solid rgba(255,255,255,0.06); color:#efe6d8; padding:6px 10px; border-radius:6px; cursor:pointer; margin-bottom:8px }
  /* when collapsed, hide rows but keep toggle visible */
  #filters.collapsed .filter-row{ display:none }
}

/* Tavern / Witcher themed background and heading */
body{
  background: radial-gradient(ellipse at top left, #2b1f12 0%, #1a1209 35%, #0f0b07 100%),
              linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));
  background-blend-mode: multiply, normal;
  color: #efe6d8;
}

h1{
  text-align:center;
  font-family: 'Cinzel', Georgia, serif;
  font-size:40px;
  letter-spacing:1px;
  margin:8px 0 20px 0;
  color:#f6ecd8;
  text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* Gallery container visual frame */
.gallery-grid{
  padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  border-radius:8px;
}

/* Card visual tweaks for TCG / tavern feel */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02) inset;
  border-radius:6px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform: translateY(-6px) scale(1.02); box-shadow:0 18px 40px rgba(0,0,0,0.7); }

.card .text-name{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.6)}
.card .text-rules,.card .text-flavor{color:#efe6d8}

/* Legal footer styling */
.legal{margin:28px auto 10px; color:#cfc6b4;}
.legal-inner{width:90%;max-width:1100px;margin:0 auto;padding:12px 16px;border-top:1px solid rgba(255,255,255,0.03);text-align:center}
.legal-title{font-weight:700;margin:6px 0 10px;color:#f1ead6;text-align:center}
.legal-text p{margin:6px auto;font-size:13px;line-height:1.4;color:#d7cfb7;max-width:900px}

/* Modal for enlarged card preview */
.card-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;z-index:9999}
.card-modal{background:linear-gradient(180deg,#191006,#2b1f12);padding:18px;border-radius:8px;max-width:820px;width:95%;box-shadow:0 30px 80px rgba(0,0,0,0.8);display:flex;flex-direction:column;align-items:center}
.card-modal .modal-controls{width:100%;display:flex;justify-content:space-between;gap:8px;margin-bottom:12px}
.card-modal button{background:#3c2b1d;border:1px solid rgba(255,255,255,0.04);color:#efe6d8;padding:8px 12px;border-radius:6px;cursor:pointer}
.card-modal .modal-canvas{width:750px;max-width:100%;height:auto;border-radius:6px;display:block}
.card-modal .modal-title{font-weight:700;color:#f6ecd8;margin-bottom:6px}
.card-modal-overlay.show{display:flex}

/* Deck-checker download button styling */
.deck-download-btn{background:linear-gradient(180deg,#3b2b1d,#2d2116);border:1px solid rgba(255,255,255,0.06);padding:6px 10px;border-radius:6px;color:#f6ecd8;cursor:pointer;display:flex;align-items:center;gap:6px}
.deck-download-btn img{width:18px;height:18px}
.deck-download-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.45)}

/* Deck checker container: align width with gallery and stick to top when scrolling */
#gw-deck-checker{
  width:90%;
  max-width:1400px;
  margin:8px auto;
  padding:8px;
  background:#f5f5f5;
  border:1px solid #ddd;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  position:sticky;
  top:12px;
  z-index:1200;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* Styled site buttons (used for gallery creator/back links) */
.btn, .filter-btn.creator-link, #back-to-gallery{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(180deg,#3b2b1d,#2d2116);
  border:1px solid rgba(255,255,255,0.06);
  padding:8px 12px;
  border-radius:6px;
  color:#f6ecd8;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  transition:all .12s ease;
}
.btn:hover, .filter-btn.creator-link:hover, #back-to-gallery:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.45) }
.btn:active, .filter-btn.creator-link:active, #back-to-gallery:active{ transform:translateY(0) }
.filter-btn.creator-link{ padding:6px 10px }

/* Ensure anchors styled as buttons don't show default underline */
.filter-btn.creator-link, #back-to-gallery { text-decoration: none }

/* Welcome modal for creator page */
.grpd-welcome-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:13000
}
.grpd-welcome-overlay.show{display:flex}
.grpd-welcome-modal{width:680px;max-width:94%;background:linear-gradient(180deg,#1f1b17,#15120f);border-radius:8px;padding:18px;color:#efe6d8;box-shadow:0 30px 80px rgba(0,0,0,0.8)}
/* Apply modal scrolling and styled scrollbars only on landscape or when viewport height is small */
@media (orientation: landscape), (max-height: 720px) {
  .grpd-modal, .grpd-welcome-modal, .card-modal{
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  /* Styled scrollbars for webkit browsers */
  .grpd-modal::-webkit-scrollbar, .grpd-welcome-modal::-webkit-scrollbar, .card-modal::-webkit-scrollbar{
    width:10px; height:10px;
  }
  .grpd-modal::-webkit-scrollbar-track, .grpd-welcome-modal::-webkit-scrollbar-track, .card-modal::-webkit-scrollbar-track{
    background: rgba(0,0,0,0.12); border-radius:8px;
  }
  .grpd-modal::-webkit-scrollbar-thumb, .grpd-welcome-modal::-webkit-scrollbar-thumb, .card-modal::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg,#3b2b1d,#2d2116); border-radius:8px; border:2px solid rgba(0,0,0,0.12);
  }

  /* Firefox: thin scrollbar with colored thumb */
  .grpd-modal, .grpd-welcome-modal, .card-modal{ scrollbar-width: thin; scrollbar-color: rgba(59,43,29,0.9) rgba(0,0,0,0.12); }
}
.grpd-welcome-title{font-size:20px;font-weight:700;margin-bottom:8px;color:#f6ecd8}
.grpd-welcome-body{font-size:14px;line-height:1.4;color:#e6dcc4;margin-bottom:14px}
.grpd-welcome-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.grpd-welcome-checkbox{display:inline-flex;align-items:center;gap:8px;color:#efe6d8}
.grpd-welcome-btn{background:linear-gradient(180deg,#3b2b1d,#2d2116);border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:6px;color:#f6ecd8;cursor:pointer;font-weight:700}
.grpd-welcome-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.45)}

/* Art list placeholders: used in the Creator image browser to indicate images are loading */
.art-list .art-item{position:relative;background:transparent;border-radius:4px;overflow:hidden}
.art-list .art-item img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s ease,filter .18s ease}
.art-list .art-item img.grpd-hidden{opacity:0;filter:blur(2px)}
.art-list .art-item .grpd-placeholder{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06));z-index:2;flex-direction:column;gap:6px;padding:6px;box-sizing:border-box}
.art-list .art-item .grpd-spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,0.10);border-top-color:#f6ecd8;box-sizing:border-box;animation:grpd-spin 1s linear infinite}
.art-list .art-item .grpd-spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,0.10);border-top-color:#f6ecd8;box-sizing:border-box;animation:grpd-spin 1s linear infinite;flex:0 0 auto;align-self:center}
.art-list .art-item .grpd-ph-text{font-size:12px;color:#efe6d8;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1.1;white-space:nowrap}

/* Upload progress bar shown in the Creator modal */
.upload-progress{width:100%;height:12px;background:rgba(255,255,255,0.04);border-radius:8px;overflow:hidden}
.upload-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#6dd27a,#3bb37a);transition:width .3s ease}
.upload-progress-text{font-size:12px;color:#efe6d8;text-align:center;margin-top:6px}
@keyframes grpd-spin{to{transform:rotate(360deg)}}


@media (max-width:520px){
  #gw-deck-checker{ width:94%; top:6px; }
}