/*------------------------------------------------*
  STYLESHEET — Weaker Potions (Cuphead-inspired)
  Author: AI
 *------------------------------------------------*/

/* 1. ROOT & BASE --------------------------------------------------*/
:root {
  --ink-black: #000;
  --sepia-paper: #f7e4c8;
  --highlight-red: #e43d35;
  --highlight-green: #2e9f6e;
  --highlight-blue: #3997e5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  font-family: 'Fredericka the Great', serif;
  background: var(--sepia-paper);
  color: var(--ink-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

/* Grainy film overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23000000' fill-opacity='0.12'%3E%3Cpolygon points='0 0 2 0 0 2'/%3E%3Cpolygon points='4 0 6 0 4 2'/%3E%3Cpolygon points='8 0 10 0 8 2'/%3E%3Cpolygon points='0 4 2 4 0 6'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .4;
  mix-blend-mode: multiply;
  animation: flicker 1.6s steps(2) infinite;
}

@keyframes flicker { 0%,100%{opacity:.4;} 50%{opacity:.55;} }

/* 2. HEADER ------------------------------------------------------*/
header {
  margin: 2rem 0 1rem;
  text-align: center;
}
.logo {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: .05em;
  text-shadow: -2px 2px 0 #fff, -3px 3px 0 var(--ink-black);
}

/* 3. BANNER ------------------------------------------------------*/
.banner {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  max-width: 1200px;
  width: 95%;
}

.card {
  --card-clr: var(--highlight-red);
  position: relative;
  width: clamp(150px, 25vw, 260px);
  text-align: center;
  font-family: 'Chango', cursive;
  color: var(--ink-black);
  filter: drop-shadow(0 4px 0 var(--ink-black));
  animation: bob 2.6s ease-in-out infinite;
}
.card:nth-child(2) { --card-clr: var(--highlight-green); animation-delay: .3s; }
.card:nth-child(3) { --card-clr: var(--highlight-blue); animation-delay: .6s; }

.card img {
  display: block;
  width: 100%;
  border: 4px solid var(--ink-black);
  border-radius: 8px 8px 24px 8px; /* playful rubber-hose corner */
  background: #ffffff;
  aspect-ratio: 1/1;
  object-fit: cover;
  filter: sepia(.2) saturate(1.3) contrast(1.05);
}

.card figcaption {
  margin-top: .5rem;
  font-size: 1.05rem;
  background: var(--card-clr);
  color: #fff;
  padding: .25rem .5rem;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  border: 3px solid var(--ink-black);
  border-top: none;
  text-shadow: -1px 1px 0 var(--ink-black);
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

/* 4. FOOTER ------------------------------------------------------*/
footer {
  margin-top: auto;
  padding: 1rem 0;
  font-size: .9rem;
  opacity: .8;
}