/* =========================
   Modal base
========================= */
.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
}

.modalBack{
  position:absolute;
  inset:0;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(6px);
}

.modalCard{
  position: relative;
  max-width: 720px;
  margin: 6vh auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(15,23,42,.25);
  padding: 12px;
}

.modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 8px 10px;
}

.modalTitle{
  font-weight: 900;
}

.modalActions{
  display:flex;
  gap:10px;
  align-items:center;
}

.modalBtn{
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.modalBtn:active{ transform: translateY(1px); }
.modalBtn.danger{
  border-color: #ef444433;
  background: #fff;
}

.modalClose{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}

.modalBody{
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.modalFoot{
  padding: 10px 8px 2px;
}

/* =========================
   Dex layout
========================= */
.dexGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px){
  .dexGrid{ grid-template-columns: 1fr; }
}

.dexItem{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 10px;
}

/* clickable locked card */
.dexMiniCat.locked,
.dexItem[data-locked="1"]{
  cursor: pointer;
}
.dexItem[data-locked="1"]:hover{
  box-shadow: 0 16px 36px rgba(15,23,42,.10);
}

/* =========================
   Dex card row (mini cat + info)
========================= */
.dexCardRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top: 10px;
}

.dexInfo{
  flex: 1;
  min-width: 0;
}

.dexInfoTop{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
}

.dexInfoTitle{
  font-weight: 900;
}
.dexInfoTitle .muted{
  font-weight: 600;
}

/* =========================
   Mini cat (silhouette/unlock)
========================= */
.dexMiniCat{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.dexMiniCat .miniEars{
  position:absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  display:flex;
  justify-content:space-between;
}
.dexMiniCat .miniEar{
  width: 14px;
  height: 14px;
  border-radius: 4px 12px 12px 12px;
  transform: rotate(45deg);
  border: 1px solid var(--line);
  background: #fff;
  opacity: .9;
}
.dexMiniCat .miniFace{
  position:absolute;
  inset: 16px 8px 10px 8px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
}

/* locked silhouette */
.dexMiniCat.locked{
  background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
}
.dexMiniCat.locked::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(40px 40px at 30% 30%, #ffffff10 0%, transparent 60%),
    radial-gradient(36px 36px at 70% 55%, #ffffff0d 0%, transparent 60%);
}
.dexMiniCat.locked .miniFace{
  color: #ffffffcc;
  letter-spacing: .5px;
}
.dexMiniCat.locked .miniEar{
  background:#111827;
  border-color:#ffffff22;
}

/* unlocked patterns (match cat.css vibe) */
.dexMiniCat.unlocked{ background: #fff; }
.dexMiniCat.unlocked.calico{
  background:
    radial-gradient(14px 14px at 20% 25%, #fb718544 0%, transparent 60%),
    radial-gradient(14px 14px at 65% 38%, #f59e0b55 0%, transparent 60%),
    radial-gradient(16px 16px at 55% 70%, #1118271a 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, #fff7ed 100%);
}
.dexMiniCat.unlocked.black{
  background:
    radial-gradient(22px 22px at 35% 30%, #ffffff10 0%, transparent 60%),
    linear-gradient(180deg, #111827 0%, #1f2937 100%);
}
.dexMiniCat.unlocked.white{
  background:
    radial-gradient(22px 22px at 35% 30%, #fde68a55 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.dexMiniCat.unlocked.orange{
  background:
    radial-gradient(14px 14px at 25% 30%, #fff7ed 0%, transparent 60%),
    repeating-linear-gradient(135deg, #f59e0b55 0 8px, transparent 8px 18px),
    linear-gradient(180deg, #fff 0%, #fff7ed 100%);
}
.dexMiniCat.unlocked.tabby{
  background:
    radial-gradient(16px 16px at 70% 25%, #ffffff1f 0%, transparent 60%),
    repeating-linear-gradient(135deg, #11182722 0 6px, transparent 6px 14px),
    linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
}
.dexMiniCat.unlocked.rare{
  background:
    radial-gradient(34px 34px at 30% 30%, #a78bfa55 0%, transparent 60%),
    radial-gradient(30px 30px at 70% 55%, #22c55e33 0%, transparent 60%),
    radial-gradient(24px 24px at 50% 80%, #fb718544 0%, transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #111827 100%);
}
.dexMiniCat.unlocked.rare .miniFace{ color:#fff; }
.dexMiniCat.unlocked.black .miniFace{ color:#fff; }
.dexMiniCat.unlocked.black .miniEar{ background:#1f2937; border-color:#ffffff22; }
.dexMiniCat.unlocked.rare .miniEar{ background:#111827; border-color:#ffffff22; }

/* =========================
   Dex log list
========================= */
.dexList{
  margin: 8px 0 0;
  padding-left: 16px;
  max-height: 220px;
  overflow:auto;
}

/* =========================
   NEW badge + Hint
========================= */
.newBadge{
  display:inline-flex;
  align-items:center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff0f3;
  font-size: 11px;
  font-weight: 800;
}

.dexHint{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed #00000020;
  background: #fff7ed;
  line-height: 1.7;
}

/* =========================
   Congrats banner (rare first unlock)
========================= */
.dexCongrats{
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 6px 6px 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #fb718533;
  background:
    linear-gradient(180deg, #fff0f3 0%, #ffffff 100%);
  box-shadow: 0 12px 28px rgba(251,113,133,.25);
  text-align: center;
  font-weight: 900;
  animation: congratsIn 420ms cubic-bezier(.2,.9,.2,1) 1;
}
.dexCongrats .sub{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
}
@keyframes congratsIn{
  0%{ transform: translateY(-6px) scale(.98); opacity: 0; }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}
.dexCongrats.fade{
  animation: congratsOut 520ms ease-in forwards;
}
@keyframes congratsOut{
  to{ opacity: 0; transform: translateY(-4px); }
}