:root{
  --bg:#05060a;
  --panel:#0b0f18;
  --stroke:rgba(255,255,255,.08);
  --muted:rgba(255,255,255,.65);

  --r-common:#4aa3ff;
  --r-rare:#ffcc4a;
  --r-mythic:#d96bff;

  --cardRadius:16px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  background: radial-gradient(1200px 700px at 50% 20%, rgba(80,120,255,.10), transparent 60%),
              radial-gradient(900px 500px at 80% 70%, rgba(217,107,255,.08), transparent 55%),
              var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#e8e8f0;
  display:grid;
  place-items:center;
  padding:24px;
}

.launcher{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:12px 16px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.launcher:active{ transform: translateY(1px); }

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.overlay.open{ display:flex; }

.modal{
  width:min(1120px, 96vw);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow:0 30px 120px rgba(0,0,0,.65);
  overflow:hidden;
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 16px;
  background:rgba(0,0,0,.22);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.modalTitle{
  font-size:18px;
  font-weight:900;
  letter-spacing:.2px;
}
.closeBtn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:8px 12px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
}

.modalBody{ padding:16px; }

.grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.bioPanel{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  border-radius: 16px;
  padding: 16px;
  color: rgba(255,255,255,.85);
  grid-column: 1 / -1; /* span full width of grid */
}
.bioPanel h1, .bioPanel h2 { margin: 0 0 10px; }
.bioPanel p { margin: 0 0 10px; line-height: 1.45; }

.card{
  position:relative;
  width:100%;
  aspect-ratio: 2.5 / 3.5;
  border-radius: var(--cardRadius);
  border:1px solid rgba(125,211,252,.12);
  background:rgba(255,255,255,.03);
  box-shadow: 0 16px 40px rgba(0,0,0,.40);
  overflow:hidden;
  cursor:pointer;
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}
.card:hover{ transform: translateY(-2px); }
.card:active{ transform: translateY(0px); }

.cardInner{
  position:absolute;
  inset:0;
  border-radius: var(--cardRadius);
  overflow:hidden;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.2,.85,.2,1);
  box-shadow: 0 16px 45px rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.10);
}

.face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:#000;
}
.face img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.front{ transform: rotateY(0deg); }

.label{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  color:#fff;
  text-align:center;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 12px;
  display:none;
}

/* State rules */
.card.flipped .cardInner{ transform: rotateY(360deg) !important; }
.card.flipped .label{ display:block; }

/* Ghosted (non-picked) */
.card.ghosted .cardInner{ transform: rotateY(810deg) !important; }

.card.ghosted{
  opacity:0;
  filter: grayscale(.85);
  transition:
    transform 1000ms cubic-bezier(.2,.85,.2,1),
    opacity 1000ms ease;
  cursor: default;
}

/* Glow tiers */
.glow-common .cardInner{ box-shadow: 0 0 0 1px rgba(74,163,255,0.25), 0 16px 45px rgba(0,0,0,0.55); }
.glow-rare   .cardInner{ box-shadow: 0 0 0 1px rgba(255,204,74,0.25), 0 16px 45px rgba(0,0,0,0.55); }
.glow-mythic .cardInner{ box-shadow: 0 0 0 1px rgba(217,107,255,0.25), 0 16px 45px rgba(0,0,0,0.55); }

.hint{
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  min-height: 22px;
}
.after{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  min-height: 40px;
}
.rarityTag{ font-weight: 900; }

/* ===== Sparkle burst (chosen card) ===== */
.card .sparkles {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: 0;
  transform: scale(.95);
}

.card.burst .sparkles {
  opacity: 1;
  animation: burstFade 900ms ease-out forwards;
}

@keyframes burstFade {
  0%   { opacity: 0; transform: scale(.85); filter: blur(0px); }
  15%  { opacity: 1; transform: scale(1.00); }
  100% { opacity: 0; transform: scale(1.08); filter: blur(0.4px); }
}

/* The particles themselves */
.card .sparkles i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 12px rgba(255,255,255,.55);
  opacity: 0;
  animation: floatUp 900ms ease-out forwards;
}

/* Different sizes */
.card .sparkles i:nth-child(3n) { width: 3px; height: 3px; opacity: .9; }
.card .sparkles i:nth-child(4n) { width: 8px; height: 8px; opacity: .75; }

/* Rarity tint */
.card.glow-common .sparkles i { background: rgba(160,210,255,.95); box-shadow: 0 0 14px rgba(74,163,255,.55); }
.card.glow-rare   .sparkles i { background: rgba(255,230,140,.95); box-shadow: 0 0 16px rgba(255,204,74,.55); }
.card.glow-mythic .sparkles i { background: rgba(235,170,255,.95); box-shadow: 0 0 18px rgba(217,107,255,.55); }

@keyframes floatUp {
  0%   { transform: translate(0, 14px) scale(.9); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0px), var(--dy, -80px)) scale(1.2); opacity: 0; }
}