/* Blindbox.digital — dark neon collectible theme (matches strategy concept art) */

:root {
  --bg: #0a0820;
  --bg2: #120a2e;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-strong: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.10);
  --line-bright: rgba(167, 139, 250, 0.45);
  --text: #ECE9FB;
  --muted: #9b95c9;
  --violet: #8b5cf6;
  --grape: #7c3aed;
  --pink: #ec4899;
  --cyan: #22d3ee;
  --gold: #f59e0b;
  /* rarity */
  --c-common: #9ca3af;
  --c-rare: #3b82f6;
  --c-epic: #a855f7;
  --c-legendary: #f59e0b;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

body {
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(124, 58, 237, 0.28), transparent 60%),
    radial-gradient(800px 460px at 5% 5%, rgba(236, 72, 153, 0.18), transparent 55%),
    radial-gradient(700px 600px at 50% 110%, rgba(34, 211, 238, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-attachment: fixed;
  color: var(--text);
}

/* ---- gradient text ---- */
.h-grad {
  background: linear-gradient(100deg, #67e8f9 0%, #a78bfa 45%, #f472b6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-muted { color: var(--muted); }

/* ---- glass cards ---- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--line-bright);
  box-shadow: 0 22px 50px -22px rgba(124, 58, 237, 0.65);
}

/* ---- pills ---- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--panel-strong); border: 1px solid var(--line);
  border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; color: var(--text);
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .85rem; padding: .7rem 1.2rem; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(100deg, var(--grape), var(--pink));
  box-shadow: 0 10px 30px -10px rgba(236, 72, 153, 0.6);
}
.btn-primary:hover { box-shadow: 0 14px 40px -10px rgba(236, 72, 153, 0.85); }
.btn-ghost {
  color: var(--text); background: var(--panel-strong); border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--line-bright); }

/* ---- inputs ---- */
.input, select.input, textarea.input {
  width: 100%; background: rgba(8, 6, 24, 0.6); color: var(--text);
  border: 1px solid var(--line); border-radius: .75rem; padding: .6rem .8rem;
  outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); }
.input::placeholder { color: #6f6a96; }
select.input option { background: #140c30; color: var(--text); }

/* ---- rarity ---- */
.tier-dot { width: .7rem; height: .7rem; border-radius: 999px; display: inline-block; }
.tier-Common  { --tier: var(--c-common); }
.tier-Rare    { --tier: var(--c-rare); }
.tier-Epic    { --tier: var(--c-epic); }
.tier-Legendary { --tier: var(--c-legendary); }
.tier-chip {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 999px; color: #fff;
}

/* ---- mystery box ---- */
.mystery {
  position: relative; display: grid; place-items: center;
  border-radius: 1.4rem;
  background:
    radial-gradient(60% 60% at 50% 35%, rgba(255, 215, 120, 0.35), transparent 70%),
    linear-gradient(145deg, #2a1d5e, #4c1d95 55%, #831843);
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 0 60px -10px rgba(167, 139, 250, 0.55), inset 0 0 40px -10px rgba(255, 215, 120, 0.4);
}
.mystery::after {
  content: "?"; position: absolute; font-weight: 900;
  color: rgba(255, 255, 255, 0.9); text-shadow: 0 0 24px rgba(255, 215, 120, 0.9);
}
.float { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.box-shake { animation: shake 1.6s ease-in-out infinite; }
@keyframes shake {
  0%, 92%, 100% { transform: rotate(0deg); }
  94% { transform: rotate(-7deg); } 96% { transform: rotate(7deg); } 98% { transform: rotate(-4deg); }
}

.reveal-pop { animation: pop 0.7s cubic-bezier(.18,1.5,.4,1) both; }
@keyframes pop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }

/* sparkles */
.spark { position: absolute; width: 6px; height: 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,.8); opacity: .8; animation: tw 2.6s ease-in-out infinite; }
@keyframes tw { 0%,100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }

/* confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.confetti i { position: absolute; top: -10px; width: 9px; height: 14px; opacity: 0.9; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0.15; } }

/* dotted grid backdrop for hero */
.grid-glow {
  background-image: radial-gradient(rgba(167,139,250,.18) 1px, transparent 1px);
  background-size: 26px 26px;
}