/* Born from Blood — Special-Art Gacha styles */
.gacha-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 18px 80px; }

/* ---- open section ---- */
.gacha-open {
  display: flex; gap: 30px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: linear-gradient(160deg, rgba(40,12,18,.65), rgba(12,6,9,.7));
  border: 1px solid rgba(150,40,55,.35); border-radius: 16px; padding: 26px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.pack-art {
  position: relative; width: 200px; height: 280px; flex: 0 0 auto;
  border-radius: 14px; border: 2px solid #b8413f;
  background: radial-gradient(120% 100% at 50% 0%, #5a1822, #1a0a0e 70%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 8px 30px rgba(140,30,40,.4);
}
.pack-glow {
  position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(220,80,90,.35), transparent 40%);
  animation: spin 7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pack-label {
  position: relative; z-index: 1; text-align: center; font-family: "Cinzel", serif;
  font-weight: 900; color: #f3d9b0; letter-spacing: 2px; font-size: 20px; text-shadow: 0 2px 8px #000;
}
.pack-label span { font-size: 34px; color: #ffcf6e; }
.pack-art.shake { animation: shake .35s ease-in-out 3; }
@keyframes shake { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-7px) rotate(-2deg)} 75%{transform:translateX(7px) rotate(2deg)} }

.gacha-info { flex: 1 1 320px; min-width: 280px; }
.gacha-h { font-family: "Cinzel", serif; color: #ffcf6e; margin: 0 0 8px; font-size: 26px; }
.gacha-desc { color: #d7b9bf; line-height: 1.6; margin: 0 0 16px; font-size: 14px; }
.pack-count-box { font-size: 18px; color: #f3d9b0; margin-bottom: 14px; }
.pack-count-box span { font-weight: 900; color: #ffcf6e; font-size: 24px; }
.btn-open {
  font-family: "Cinzel", serif; font-weight: 700; font-size: 18px; color: #1a0a0e;
  background: linear-gradient(180deg, #ffd98a, #e0a23c); border: none; border-radius: 10px;
  padding: 12px 30px; cursor: pointer; box-shadow: 0 6px 18px rgba(224,162,60,.4); transition: transform .1s;
}
.btn-open:hover:not(:disabled) { transform: translateY(-2px); }
.btn-open:disabled { opacity: .45; cursor: not-allowed; }
.gacha-msg { margin-top: 12px; color: #e2a0a8; min-height: 20px; font-size: 14px; }
.gacha-msg a { color: #ffcf6e; }

/* ---- reveal (cards come out FACE-DOWN; click each to flip open) ---- */
.reveal { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 28px 0 10px; min-height: 0; }
.reveal.show { min-height: 270px; }
.rv-hint { color: #ffcf6e; font-size: 15px; letter-spacing: .5px; }
.rv-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.rv-card { width: 170px; height: 238px; perspective: 900px; opacity: 0; animation: rvIn .45s forwards; cursor: pointer; }
@keyframes rvIn { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }
.rv-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s; transform: rotateY(0); }
.rv-card.flipped .rv-inner { transform: rotateY(180deg); }
.rv-back, .rv-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; overflow: hidden; }
.rv-back { background: radial-gradient(120% 100% at 50% 0%, #5a1822, #1a0a0e 70%); border: 2px solid #b8413f; display: flex; align-items: center; justify-content: center; }
.rv-card:not(.flipped) .rv-back { animation: backGlow 1.6s ease-in-out infinite; }
@keyframes backGlow { 0%,100% { box-shadow: inset 0 0 30px rgba(0,0,0,.5); } 50% { box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 0 20px rgba(220,80,90,.65); } }
.rv-back-q { font-family: "Cinzel", serif; font-weight: 900; font-size: 64px; color: #ffcf6e; opacity: .5; text-shadow: 0 2px 12px #000; }
.rv-front { transform: rotateY(180deg); border: 2px solid #7a2630; background: #0c0609; }
.rv-front img { width: 100%; height: 100%; object-fit: cover; }
.rv-badge, .coll-badge {
  position: absolute; top: 6px; left: 6px; font-family: "Cinzel", serif; font-weight: 900;
  font-size: 13px; padding: 2px 8px; border-radius: 6px; color: #1a0a0e; z-index: 2;
}
.rv-new { position: absolute; top: 6px; right: 6px; background: #ffcf6e; color: #1a0a0e; font-weight: 900; font-size: 11px; padding: 2px 7px; border-radius: 6px; z-index: 2; }
.rv-name, .coll-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 7px; font-size: 12px; color: #f3d9b0;
  background: linear-gradient(transparent, rgba(0,0,0,.88)); text-align: center; z-index: 2;
}

/* rarity colors */
.rar-R   .rv-badge, .rar-R   .coll-badge { background: #9fb2c9; }
.rar-SR  .rv-badge, .rar-SR  .coll-badge { background: #7fd0ff; box-shadow: 0 0 10px #3aa0e0; }
.rar-SSR .rv-badge, .rar-SSR .coll-badge { background: #d79bff; box-shadow: 0 0 12px #9a48e0; }
.rar-UR  .rv-badge, .rar-UR  .coll-badge { background: linear-gradient(90deg,#ffd86e,#ff7ea3,#7fd0ff); box-shadow: 0 0 16px #ffae46; }
.rar-SR  .rv-front, .rar-SR  .coll-card { box-shadow: 0 0 16px rgba(58,160,224,.55); }
.rar-SSR .rv-front, .rar-SSR .coll-card { box-shadow: 0 0 20px rgba(154,72,224,.6); }
.rar-UR  .rv-front, .rar-UR  .coll-card { box-shadow: 0 0 26px rgba(255,174,70,.75); }

/* ---- collection ---- */
.collection { margin-top: 40px; }
.coll-title { font-family: "Cinzel", serif; color: #ffcf6e; border-bottom: 1px solid rgba(150,40,55,.4); padding-bottom: 8px; }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; margin-top: 16px; }
.coll-card { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid rgba(120,40,50,.5); background: #0c0609; cursor: zoom-in; }
.coll-img { aspect-ratio: 3/4.2; }
.coll-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coll-qty { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.8); color: #ffcf6e; font-weight: 900; font-size: 13px; padding: 2px 7px; border-radius: 6px; z-index: 2; }
.coll-empty { color: #b78b93; padding: 30px; grid-column: 1/-1; text-align: center; }

/* ---- big preview ---- */
.big-prev { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; }
.big-prev[hidden] { display: none; }   /* attribute selector must beat .big-prev's display:flex */
.big-prev img { max-width: 92vw; max-height: 92vh; border-radius: 14px; box-shadow: 0 0 50px rgba(0,0,0,.8); }