/* ═══════════════════════════════════════════
   CARD GRID
═══════════════════════════════════════════ */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(195px, 1fr));
  gap:1.5rem;
}

/* ═══════════════════════════════════════════
   CARD FLIP
═══════════════════════════════════════════ */
.cw { perspective:1000px; cursor:pointer; }

.card {
  width:100%; aspect-ratio:63/88;
  position:relative; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  border-radius:16px;
}
.cw:hover .card { transform:rotateY(180deg); }

.cf, .cb {
  position:absolute; width:100%; height:100%;
  backface-visibility:hidden; border-radius:16px; overflow:hidden;
}
.cb { transform:rotateY(180deg); }

/* ═══════════════════════════════════════════
   CARD FRONT
═══════════════════════════════════════════ */
.cf {
  display:flex; flex-direction:column;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:0 8px 28px rgba(0,0,0,.55);
  transition:box-shadow .3s;
}
.cw:hover .cf { box-shadow:0 16px 44px rgba(0,0,0,.75); }

/* Full-bleed card image */
.card-img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  display:block;
}

.card-dots { display:flex; gap:3px; align-items:center; }
.dot { border-radius:50%; display:inline-block; flex-shrink:0; }

/* Badges */
.count-badge {
  position:absolute; top:-8px; left:-8px; z-index:10;
  background:linear-gradient(135deg,#f39c12,#f0c040); color:#000;
  border-radius:20px; padding:2px 8px; font-size:.72rem; font-weight:900;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.locked-overlay {
  position:absolute; inset:0; z-index:5;
  background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center;
  border-radius:14px; font-size:2.2rem;
}

/* ═══════════════════════════════════════════
   CARD BACK
═══════════════════════════════════════════ */
.cb { display:flex; flex-direction:column; }

.card-img-back {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; z-index:0;
}

.back-name-tag {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:.5rem .7rem;
  font-size:.78rem; font-weight:900; color:#fff;
  text-transform:uppercase; letter-spacing:.5px; text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.7);
}

/* ═══════════════════════════════════════════
   RARITY GLOWS
═══════════════════════════════════════════ */
.rar-legendary .cf { animation:lglow 3s ease-in-out infinite; }
@keyframes lglow {
  0%,100% { box-shadow:0 0 16px rgba(240,192,64,.3), 0 8px 28px rgba(0,0,0,.5); }
  50%      { box-shadow:0 0 36px rgba(240,192,64,.7), 0 8px 28px rgba(0,0,0,.5); }
}
.rar-epic .cf { animation:eglow 4s ease-in-out infinite; }
@keyframes eglow {
  0%,100% { box-shadow:0 0 10px rgba(155,89,182,.2), 0 8px 28px rgba(0,0,0,.5); }
  50%      { box-shadow:0 0 26px rgba(155,89,182,.55), 0 8px 28px rgba(0,0,0,.5); }
}

/* ═══════════════════════════════════════════
   UNLOCK OVERLAY
═══════════════════════════════════════════ */
.unlock-ov {
  display:none; position:fixed; inset:0; z-index:800;
  background:rgba(5,15,8,.97);
  flex-direction:column; align-items:center; justify-content:center; padding:1.5rem;
}
.unlock-ov.show { display:flex; }

.u-title { font-size:1.8rem; font-weight:900; color:var(--g3); margin-bottom:.3rem; text-align:center; }
.u-sub   { color:var(--txt2); margin-bottom:2.5rem; font-family:'Courier New',monospace; font-weight:700; }
.u-row   { display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; max-width:900px; }
.u-acts  { margin-top:2.5rem; display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; }

/* Mini card */
.ucw {
  opacity:0; transform:translateY(50px) scale(.8);
  transition:all .65s cubic-bezier(.34,1.56,.64,1);
  text-align:center; cursor:pointer;
}
.ucw.show { opacity:1; transform:translateY(0) scale(1); }

.mini-card {
  width:115px; height:162px;
  border-radius:12px; border:2px solid; overflow:hidden;
}
.mini-name   { font-size:.7rem; font-weight:700; color:var(--txt); margin-top:.4rem; max-width:115px; }
.mini-rarity { font-size:.62rem; font-weight:600; margin-top:.1rem; }

/* ═══════════════════════════════════════════
   CARD MODAL
═══════════════════════════════════════════ */
.modal-ov {
  display:none; position:fixed; inset:0; z-index:900;
  background:rgba(5,15,8,.92);
  align-items:center; justify-content:center; padding:1.5rem;
}
.modal-ov.show { display:flex; }

.modal {
  background:var(--bg-card); border:1px solid rgba(46,204,113,.28);
  border-radius:22px; padding:2rem; max-width:680px; width:100%;
  position:relative; max-height:90vh; overflow-y:auto;
  animation:modalIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }

.modal-x {
  position:absolute; top:1rem; right:1rem;
  background:rgba(46,204,113,.1); border:1px solid rgba(46,204,113,.2);
  color:var(--txt2); width:30px; height:30px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:all .25s;
}
.modal-x:hover { background:rgba(46,204,113,.25); color:#fff; }

.modal-layout { display:flex; gap:1.5rem; flex-wrap:wrap; }

.modal-imgs { display:flex; gap:.8rem; flex-shrink:0; }
.modal-img-wrap { display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.modal-card-img {
  width:130px; height:183px;
  border-radius:12px; object-fit:cover;
  border:2px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  display:block;
}
.modal-img-label { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

.modal-info { flex:1; min-width:200px; }
.modal-rarity-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.3rem .8rem; border-radius:20px; font-size:.78rem; font-weight:700;
  margin-bottom:.75rem;
}
.dots-row { display:flex; gap:3px; }
.modal-name { font-size:1.4rem; font-weight:900; margin-bottom:.2rem; }
.modal-type { font-size:.82rem; color:var(--txt2); text-transform:uppercase; letter-spacing:.8px; margin-bottom:.8rem; }
.modal-desc { font-size:.88rem; color:var(--txt2); line-height:1.6; margin-bottom:1rem; }

.modal-stats { display:flex; gap:.7rem; margin-bottom:1rem; }
.ms  { background:rgba(46,204,113,.1); border-radius:10px; padding:.6rem .8rem; text-align:center; flex:1; }
.msv { font-size:1.3rem; font-weight:900; color:var(--g3); }
.msl { font-size:.62rem; color:var(--muted); text-transform:uppercase; }

.modal-counters { display:flex; gap:.7rem; }
.mc {
  flex:1; background:rgba(46,204,113,.07); border:1px solid rgba(46,204,113,.15);
  border-radius:12px; padding:.8rem; text-align:center;
}
.mc-v { font-size:1.6rem; font-weight:900; color:var(--g3); }
.mc-l { font-size:.68rem; color:var(--muted); margin-top:.15rem; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:640px) {
  .grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
  .u-row { gap:.7rem; }
  .mini-card { width:95px; height:134px; }
  .modal-imgs { justify-content:center; width:100%; }
  .modal-card-img { width:110px; height:155px; }
  .modal-layout { flex-direction:column; }
}