/* Hete Peper — shared stripstijl */

:root {
  --peper-rood: #E63946;
  --peper-rood-donker: #B81F2D;
  --pet-groen: #3FA34D;
  --pet-groen-donker: #2B7A38;
  --vuur-oranje: #FF8C1A;
  --vuur-geel: #FFD23F;
  --knal-blauw: #2D9CDB;
  --knal-paars: #8E44D1;
  --papier: #D6EFC7;
  --papier-warm: #B9E1A4;
  --inkt: #1A1A1A;
  --inkt-zacht: #2C2C2C;
  --wit-papier: #F0FAE6;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Patrick Hand', 'Kalam', cursive;
  color: var(--inkt);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

/* Halftone dots achtergrond */
.halftone {
  background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1.2px, transparent 1.4px);
  background-size: 10px 10px;
}
.halftone-rood {
  background-image: radial-gradient(circle, var(--peper-rood) 1.6px, transparent 1.8px);
  background-size: 9px 9px;
}
.halftone-geel {
  background-image: radial-gradient(circle, var(--vuur-geel) 2px, transparent 2.2px);
  background-size: 10px 10px;
}
.halftone-oranje {
  background-image: radial-gradient(circle, var(--vuur-oranje) 2px, transparent 2.2px);
  background-size: 11px 11px;
}

/* Papier textuur */
.papier {
  background-color: var(--papier);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(139, 90, 43, 0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(139, 90, 43, 0.05) 0, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.015) 0, transparent 60%);
}

/* Strip paneel — dik zwart kader, lichte rotatie */
.panel {
  background: var(--wit-papier);
  border: 4px solid var(--inkt);
  box-shadow: 5px 5px 0 var(--inkt);
  position: relative;
}
.panel-skew-l { transform: rotate(-0.8deg); }
.panel-skew-r { transform: rotate(0.6deg); }

/* Strip titel headings */
.bangers { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 0.04em; }
.patrick { font-family: 'Patrick Hand', cursive; }
.kalam { font-family: 'Kalam', cursive; }

/* Comic kop — outlined text */
.comic-title {
  font-family: 'Bangers', 'Impact', sans-serif;
  letter-spacing: 0.03em;
  color: var(--vuur-geel);
  -webkit-text-stroke: 2px var(--inkt);
  text-shadow: 4px 4px 0 var(--inkt);
  line-height: 0.9;
}

/* Spraak ballon */
.ballon {
  position: relative;
  background: var(--wit-papier);
  border: 3px solid var(--inkt);
  border-radius: 24px;
  padding: 12px 16px;
  font-family: 'Patrick Hand', cursive;
  font-size: 18px;
  line-height: 1.15;
}
.ballon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--wit-papier);
  border-right: 3px solid var(--inkt);
  border-bottom: 3px solid var(--inkt);
  bottom: -12px;
  left: 24px;
  transform: rotate(45deg);
}
.ballon.r::after { left: auto; right: 24px; }

/* Ster/explosie shape */
.star-burst {
  display: inline-block;
  clip-path: polygon(
    50% 0%, 61% 19%, 81% 13%, 75% 35%, 95% 42%, 79% 56%,
    92% 75%, 72% 74%, 72% 95%, 55% 82%, 45% 100%, 38% 80%,
    18% 93%, 25% 72%, 2% 68%, 19% 51%, 0% 35%, 22% 32%,
    15% 10%, 37% 20%
  );
}

/* Knop */
.btn-comic {
  font-family: 'Bangers', 'Impact', sans-serif;
  letter-spacing: 0.04em;
  background: var(--vuur-geel);
  color: var(--inkt);
  border: 3px solid var(--inkt);
  box-shadow: 4px 4px 0 var(--inkt);
  padding: 10px 22px;
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  display: inline-block;
  white-space: nowrap;
}
.btn-comic:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--inkt); }
.btn-comic:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--inkt); }

.btn-comic.rood { background: var(--peper-rood); color: var(--wit-papier); }
.btn-comic.groen { background: var(--pet-groen); color: var(--wit-papier); }
.btn-comic.oranje { background: var(--vuur-oranje); }
.btn-comic.blauw { background: var(--knal-blauw); color: var(--wit-papier); }

/* Wobble animatie */
@keyframes wobble {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}
.wobble { animation: wobble 2.8s ease-in-out infinite; }

@keyframes flicker {
  0%, 100% { transform: scaleY(1) rotate(-1deg); }
  50% { transform: scaleY(1.08) rotate(1deg); }
}
.flicker { animation: flicker 0.4s ease-in-out infinite; transform-origin: bottom center; }

@keyframes float-sticker {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-6px) rotate(var(--r, 0deg)); }
}
.float { animation: float-sticker 3.5s ease-in-out infinite; }

/* Allie easter-egg knop — roze schitter-A */
@keyframes allie-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes allie-twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.4; transform: scale(1.4) rotate(20deg); }
}
.allie-sparkle {
  animation: allie-shimmer 2.4s ease-in-out infinite;
}

/* Tape strip */
.tape {
  position: absolute;
  width: 90px;
  height: 24px;
  background: rgba(255, 210, 63, 0.65);
  border-left: 1px dashed rgba(0,0,0,0.15);
  border-right: 1px dashed rgba(0,0,0,0.15);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Streeparcering voor schaduw */
.hatch {
  background-image: repeating-linear-gradient(
    45deg, transparent 0 3px, rgba(0,0,0,0.25) 3px 4px
  );
}

/* Schuine reveal lijnen (speed) */
.speed-lines {
  background: repeating-linear-gradient(
    90deg, transparent 0 8px, rgba(0,0,0,0.1) 8px 10px
  );
}

/* Scrollbar weg op artboards (het hele ding is al geframed) */
.no-scroll-ui::-webkit-scrollbar { display: none; }
.no-scroll-ui { scrollbar-width: none; }