/*---------------------------
  Core reset & variables
---------------------------*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --sepia-bg: #f8ecdd;
  --ink-black: #000;
  --cartoon-red: #e94135;
  --outline-thick: 3px;
}

body {
  background: var(--sepia-bg);
  font-family: "Chewy", cursive;
  color: #2b1e14;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

/*---------------------------
  Film-grain overlay & flicker
---------------------------*/
.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background-image: repeating-radial-gradient(circle,rgba(0,0,0,.04) 0 1px,transparent 1px 2px);
  animation: flicker 0.2s steps(2) infinite;
}

@keyframes flicker {
  0%,100% { opacity: .88; }
  50%      { opacity: 1;   }
}

/*---------------------------
  Header
---------------------------*/
header {
  text-align: center;
  padding: 4rem 1rem 2rem;
}

.site-title {
  font-family: "Rye", cursive;
  font-size: clamp(2.5rem, 6vw, 6rem);
  letter-spacing: 1px;
  color: var(--cartoon-red);
  text-shadow: -3px -3px 0 var(--ink-black), 3px 3px 0 var(--ink-black);
  animation: title-wobble 3s ease-in-out infinite alternate;
}

@keyframes title-wobble {
  0%   { transform: rotate(-1.5deg) scaleX(.98); }
  100% { transform: rotate( 1.5deg) scaleX(1);   }
}

/*---------------------------
  Potion banner
---------------------------*/
.potion-banner {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1rem 4rem;
  flex-wrap: wrap;
}

.potion-card {
  background: #fff;
  border: var(--outline-thick) solid var(--ink-black);
  box-shadow: 4px 4px 0 var(--ink-black);
  width: 220px;
  padding: 1rem;
  text-align: center;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}

.potion-card:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 6px 8px 0 var(--ink-black);
}

.potion-card img {
  width: 100%;
  height: auto;
  border: var(--outline-thick) solid var(--ink-black);
  box-shadow: inset 0 0 0 var(--outline-thick) #fff;
  filter: sepia(.2) saturate(1.6);
}

.potion-card h2 {
  margin: .75rem 0 .25rem;
  font-size: 1.4rem;
  font-family: "Rye", cursive;
  text-shadow: -2px -2px 0 var(--ink-black), 2px 2px 0 var(--ink-black);
}

.price {
  display: inline-block;
  font-family: "Rye", cursive;
  background: var(--cartoon-red);
  color: #fff;
  padding: .25rem .5rem;
  border: 2px solid var(--ink-black);
  position: absolute;
  top: -14px;
  right: -14px;
  transform: rotate(-10deg);
  box-shadow: 3px 3px 0 var(--ink-black);
}

/*---------------------------
  Footer
---------------------------*/
footer {
  text-align: center;
  font-size: .75rem;
  padding: 1rem 0 2rem;
  opacity: .7;
}