:root {
  --bg: #0d0618;
  --bg2: #1a0d2e;
  --panel: #1f1236;
  --line: #3a2560;
  --text: #f1eaff;
  --muted: #a493c4;
  --purple: #a855f7;
  --gold: #f5c542;
  --holo: #67e8f9;
  --common: #f3f4f6;
  --rare: #3b82f6;
  --epic: #a855f7;
  --legendary: #f5c542;
  --mythic: #9b111e;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% 0%, #2a1050 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--bg), rgba(13, 6, 24, 0.85));
  backdrop-filter: blur(8px);
}
.brand { font-weight: 900; letter-spacing: 0.08em; font-size: 15px; }
.brand span { color: var(--purple); }
#userbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
#userbox img { width: 28px; height: 28px; border-radius: 50%; }
#userbox button { background: none; border: 0; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }

.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  background: var(--purple); color: #fff; font-weight: 700; font-size: 16px;
  padding: 14px 22px; border-radius: 999px;
}
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn.discord { background: #5865f2; }
.error { color: #fca5a5; min-height: 1em; }

/* Login */
.hero { max-width: 460px; margin: 0 auto; padding: 24px 16px; text-align: center; }
.hero h1 { font-size: 28px; line-height: 1.15; margin: 28px 0 8px; }
.hero p { color: var(--muted); margin: 0 0 24px; }
.hero-cards { position: relative; height: 260px; }
.hero-cards img {
  position: absolute; left: 50%; top: 0; width: 160px; border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.hero-cards img:nth-child(1) { transform: translateX(-110%) rotate(-12deg) translateY(20px); }
.hero-cards img:nth-child(2) { transform: translateX(-50%); z-index: 2; }
.hero-cards img:nth-child(3) { transform: translateX(10%) rotate(12deg) translateY(20px); }
#devlogin { margin-top: 12px; }

/* Pack */
.pack-stage { display: flex; flex-direction: column; align-items: center; padding: 24px 16px; }
.pack {
  width: min(240px, 62vw); aspect-ratio: 0.62; border: 0; padding: 0; cursor: pointer;
  border-radius: 12px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #3b0f6b, #7c3aed 45%, #f5c542 50%, #7c3aed 55%, #1e0a3c);
  background-size: 300% 300%;
  animation: packShine 5s ease-in-out infinite, packFloat 3s ease-in-out infinite;
  box-shadow: 0 25px 60px rgba(124, 58, 237, .45), inset 0 0 0 2px rgba(255,255,255,.15);
  color: #fff;
}
.pack:disabled { filter: grayscale(.8) brightness(.6); animation: none; cursor: default; }
.pack-top { position: absolute; inset: 0 0 auto 0; height: 14%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px); }
.pack-body { position: absolute; inset: 14% 0 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pack-logo { font-size: 72px; font-weight: 900; font-style: italic; text-shadow: 0 0 24px #fff; }
.pack-name { font-weight: 900; letter-spacing: .12em; font-size: 20px; }
.pack-sub { font-size: 12px; opacity: .85; }
.pack.tearing { animation: tear .7s forwards; }
.pack.tearing .pack-top { animation: tearTop .5s forwards; }
@keyframes packShine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes packFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes tearTop { to { transform: translateY(-120%) rotate(-8deg); opacity: 0; } }
@keyframes tear { 0% { transform: scale(1); } 30% { transform: scale(1.06) rotate(-2deg); } 100% { transform: scale(.4) translateY(80px); opacity: 0; } }
.packs-left { color: var(--muted); text-align: center; margin-top: 22px; line-height: 1.5; }
.packs-left b { color: var(--text); }

/* Reveal */
.reveal { padding: 8px 16px 24px; text-align: center; }
.hint { color: var(--muted); margin: 0 0 12px; }
.reveal-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; }
.reveal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

.flip { perspective: 1000px; cursor: pointer; animation: dealIn .45s backwards; }
.flip-inner { position: relative; aspect-ratio: 0.727; transition: transform .6s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-back, .flip-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; }
.flip-front { transform: rotateY(180deg); }
.flip-back {
  background: radial-gradient(circle at 50% 50%, #7c3aed 0, #2e1065 55%, #12052a 100%);
  border: 3px solid #c4b5fd; display: grid; place-items: center;
  font-size: 54px; font-weight: 900; font-style: italic; color: #fff; text-shadow: 0 0 18px #c084fc;
}
.flip.r-epic:not(.flipped) .flip-back { box-shadow: 0 0 22px 4px var(--epic); }
.flip.r-legendary:not(.flipped) .flip-back { box-shadow: 0 0 28px 6px var(--legendary); }
.flip.r-mythic:not(.flipped) .flip-back { box-shadow: 0 0 30px 8px var(--mythic); animation: pulse 1s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 46px 16px var(--mythic); } }
@keyframes dealIn { from { transform: translateY(40px) scale(.8); opacity: 0; } }

/* Card face + rarity looks: Common white, Rare blue, Epic purple, Legendary gold, Mythic dark red */
.card {
  position: relative; width: 100%; aspect-ratio: 0.727; border-radius: 10px; overflow: hidden;
  background: #000; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  --mx: 50%; --my: 50%;
}
.card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-position: var(--mx) var(--my); }
.card.common { box-shadow: 0 0 0 2px var(--common), 0 10px 30px rgba(0,0,0,.5); }
.card.rare { box-shadow: 0 0 0 3px var(--rare), 0 0 18px rgba(59,130,246,.45); }
.card.rare::after {
  background: linear-gradient(115deg, transparent 35%, rgba(147,197,253,.35) 50%, transparent 65%);
  background-size: 300% 300%; mix-blend-mode: screen; animation: holoSweep 5s ease-in-out infinite;
}
.card.epic { box-shadow: 0 0 0 3px var(--epic), 0 0 22px rgba(168,85,247,.55); }
.card.epic::after {
  background: linear-gradient(115deg, transparent 25%, rgba(236,72,153,.35) 40%, rgba(168,85,247,.4) 50%, rgba(103,232,249,.3) 60%, transparent 75%);
  background-size: 250% 250%; mix-blend-mode: color-dodge; animation: holoSweep 4s ease-in-out infinite;
}
.card.legendary { box-shadow: 0 0 0 3px var(--legendary), 0 0 28px rgba(245,197,66,.6); }
.card.legendary img { filter: sepia(.35) saturate(1.4) hue-rotate(-10deg) brightness(1.06); }
.card.legendary::after {
  background: linear-gradient(115deg, transparent 30%, rgba(255,236,160,.75) 48%, rgba(255,255,255,.9) 50%, rgba(255,236,160,.75) 52%, transparent 70%);
  background-size: 300% 300%; mix-blend-mode: overlay; animation: holoSweep 3s linear infinite;
}
.card.mythic { box-shadow: 0 0 0 3px var(--mythic), 0 0 34px 4px rgba(155,17,30,.75); }
.card.mythic img { filter: saturate(1.3) contrast(1.1) brightness(.95); }
.card.mythic::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(110,0,15,.65) 100%), rgba(155,17,30,.18);
  mix-blend-mode: multiply;
}
.card.mythic::after {
  z-index: 1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,60,60,.55) 46%, rgba(255,220,200,.85) 50%, rgba(255,60,60,.55) 54%, transparent 70%);
  background-size: 300% 300%; mix-blend-mode: overlay; animation: holoSweep 2.5s linear infinite;
}
.card.tilting::after { animation: none; }
@keyframes holoSweep { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }

/* Rarity corner tab: a small colored triangle in the top-left corner, clear of the name */
.badge {
  position: absolute; left: 0; top: 0; z-index: 3; width: 13%; aspect-ratio: 1;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.badge i { position: absolute; left: 14%; top: 6%; font-style: normal; font-weight: 900; font-size: clamp(9px, 5.5cqw, 15px); }
.card { container-type: inline-size; }
.serial {
  position: absolute; left: 6px; bottom: 6px; z-index: 3; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; background: linear-gradient(90deg, #5c0010, var(--mythic)); color: #fff;
}
.badge.common { background: var(--common); color: #1a1a1a; }
.badge.rare { background: var(--rare); color: #fff; }
.badge.epic { background: var(--epic); color: #fff; }
.badge.legendary { background: linear-gradient(90deg, #b8860b, var(--legendary), #fff3c4); color: #3a2500; }
.badge.mythic { background: linear-gradient(90deg, #5c0010, var(--mythic), #d43a3a); color: #fff; }
.new-tag { position: absolute; right: 6px; bottom: 6px; z-index: 2; font-size: 10px; font-weight: 800; background: #ef4444; color: #fff; padding: 2px 6px; border-radius: 6px; }

/* Collection */
.coll-head { padding: 8px 16px 0; max-width: 1000px; margin: 0 auto; }
#collStats { color: var(--muted); margin-bottom: 10px; }
#collStats b { color: var(--text); }
.bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.bar > div { height: 100%; background: linear-gradient(90deg, var(--purple), var(--gold)); }
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.filters button {
  flex: none; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer;
}
.filters button.active { background: var(--purple); border-color: var(--purple); }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px;
  padding: 12px 16px 24px; max-width: 1000px; margin: 0 auto;
}
.slot { cursor: pointer; }
.slot .meta { display: flex; justify-content: space-between; font-size: 13px; margin-top: 6px; color: var(--muted); }
.slot .meta b { color: var(--text); }
.slot.missing .card img { filter: grayscale(1) brightness(.18); }
.slot.missing .card::after { display: none; }
.slot.missing .card { box-shadow: none; border: 1px dashed var(--line); }
.count { position: absolute; right: 6px; bottom: 6px; z-index: 2; background: rgba(0,0,0,.75); font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }

/* Viewer */
.viewer {
  position: fixed; inset: 0; z-index: 20; background: rgba(5, 2, 12, .9); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 16px; overflow-y: auto;
}
.viewer-inner { width: min(380px, 100%); }
.viewer .card { transition: transform .1s; }
.viewer .stats { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.viewer .stats h3 { margin: 0 0 2px; }
.viewer .stats .sub { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.atk { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.atk .t { font-size: 12px; color: var(--muted); }
.atk .d { font-weight: 900; font-size: 18px; }
.viewer .close { margin-top: 12px; width: 100%; }

/* Tabs */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; background: rgba(20, 10, 36, .95); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  flex: 1; background: none; border: 0; color: var(--muted); font: inherit; font-weight: 700;
  padding: 16px 0; cursor: pointer;
}
.tabs button.active { color: var(--text); box-shadow: inset 0 3px 0 var(--purple); }

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}