* {
  -webkit-tap-highlight-color: transparent;
}

html {
  background: #09090b;
}

body {
  margin: 0;
  background: #09090b;
  color: #fafafa;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

button {
  font: inherit;
}

.glass {
  background: rgba(24, 24, 27, .72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.card-glow {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 20px 60px rgba(0,0,0,.30);
}

.press {
  transition:
    transform .12s ease,
    opacity .12s ease;
}

.press:active {
  transform: scale(.96);
}

.hidden-page {
  display: none !important;
}

.page {
  animation: pageIn .18s ease;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pop {
  0% {
    transform: scale(.75);
    opacity: 0;
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pop {
  animation: pop .35s ease;
}

@keyframes shake {
  0%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}

.shake {
  animation: shake .4s ease;
}

.card-common {
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(145deg, #27272a, #52525b 50%, #18181b);
}

.card-uncommon {
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.2), transparent 30%),
    linear-gradient(145deg, #14532d, #22c55e 50%, #052e16);
}

.card-rare {
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, #1e3a8a, #3b82f6 50%, #172554);
}

.card-epic {
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(145deg, #581c87, #a855f7 50%, #3b0764);
}

.card-legendary {
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(145deg, #854d0e, #eab308 50%, #713f12);
}

.card-mythic {
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.25), transparent 30%),
    linear-gradient(145deg, #7f1d1d, #ef4444 50%, #450a0a);
}

.foil::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255,255,255,.18) 45%,
      transparent 65%
    );
  transform: translateX(-100%);
  animation: foil 3s infinite;
  pointer-events: none;
}

@keyframes foil {
  0%, 55% {
    transform: translateX(-100%);
  }
  75%, 100% {
    transform: translateX(100%);
  }
}

.day {
  aspect-ratio: 1;
}

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-active {
  color: white;
}

.nav-active .nav-icon {
  background: white;
  color: black;
}

.rarity-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
}