/* --------------------------------------------------
   CUPHEAD-INSPIRED MINI THEME FOR WEAKER POTIONS
   -------------------------------------------------- */
:root {
  /* Candy-coated palette pushed through sepia haze */
  --cream: #f4e8d9;
  --ink: #2b1f0e;          /* hand-ink lines */
  --red: #ff4e4e;
  --blue: #5aa9ff;
  --green: #6ecb6e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Quicksand", sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.4;
  /* Subtle projector flicker */
  animation: filmFlicker 2s infinite steps(2,end);
  overflow-x: hidden;
}

/* ---------------- Site chrome ---------------- */
.site-header {
  text-align: center;
  padding: 2rem 1rem 1rem;
}

.site-title {
  font-family: "Alfa Slab One", cursive;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: 2px;
  color: var(--ink);
  position: relative;
  display: inline-block;
  /* Wobbly text outline */
  text-shadow: 3px 2px 0 #00000022, -2px -2px 0 #ffffff55;
}

.site-footer {
  text-align: center;
  padding: 2rem 0;
  font-size: 0.9rem;
  opacity: 0.6;
}

/* ---------------- Banner ---------------- */
.banner {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2rem);
  padding: 0 1rem 4rem;
  flex-wrap: wrap;
}

.potion-card {
  --shadow: 0 0 0 8px var(--ink);
  width: clamp(180px, 28vw, 260px);
  background: var(--cream);
  border-radius: 22px 22px 38px 38px; /* cartoony lip */
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s ease;
  isolation: isolate;
}

/* random tilt for each card via CSS variable trick */
.potion-card:nth-child(1) { --tilt: -2deg; }
.potion-card:nth-child(2) { --tilt: 1deg;  }
.potion-card:nth-child(3) { --tilt: 3deg;  }

.potion-card:hover { transform: translateY(-6px) scale(1.02) rotate(var(--tilt)); }

.potion-card img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(0 0 0 var(--ink)); /* chunky outlines */
}

.potion-card figcaption {
  font-family: "Alfa Slab One", cursive;
  text-align: center;
  font-size: 1.2rem;
  padding: 0.8rem 0.4rem 1.2rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  letter-spacing: 1px;
}

/* Color accents around border via pseudo element */
.potion-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 20%,
              rgba(255,255,255,0.65) 0%,
              transparent 60%), var(--accent, var(--cream));
}
.potion-card.red  { --accent: var(--red);   }
.potion-card.blue { --accent: var(--blue);  }
.potion-card.green{ --accent: var(--green); }

/* ------------- Film grain overlay ------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjMDAwIj48L3JlY3Q+PHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1vcGFjaXR5PSIuMDQiIGQ9Ik0wIDBoNjB2NjBIMHoiLz48L3N2Zz4=');
  opacity: 0.15;
  mix-blend-mode: overlay;
  animation: grainShift 0.35s steps(3) infinite;
}

@keyframes grainShift {
  0%, 100% { transform: translate(0,0); }
  25%  { transform: translate(-3%, 1%); }
  50%  { transform: translate(2%, -1%); }
  75%  { transform: translate(-1%, 3%); }
}

@keyframes filmFlicker {
  0%, 100% { filter: brightness(100%); }
  50%      { filter: brightness(95%); }
}