/* ---------- QUOTES: HERO ---------- */
.quotes {
  padding: 10px 0 30px;
}

.quotes-hero {
  padding: 32px 20px 22px;
  margin: 16px 0 20px;
  text-align: center;
  background: var(--pink-light);
  border: 4px solid var(--pink-dark);
  border-radius: 28px;
  box-shadow: 6px 6px 0 var(--pink-soft), 12px 12px 0 var(--pink-main);
}

.quotes-hero h1 {
  color: var(--pink-dark);
  font-family: 'Silkscreen', cursive;
  font-size: 44px;
  letter-spacing: 4px;
  text-shadow: 3px 3px 0 var(--pink-soft);
}

.quotes-hero .tagline {
  margin: 8px 0 16px;
  color: var(--text);
  font-size: 14px;
}

.quotes-hint {
  margin-top: 12px;
  color: var(--text);
  font-size: 12px;
  opacity: 0.8;
}

/* ---------- QUOTES: WALL ---------- */
.quote-wall {
  column-width: 250px;
  column-gap: 30px;
  padding: 14px 6px 0;
}

.quote-note {
  position: relative;
  display: block;
  margin: 0 0 32px;
  padding: 24px 22px;
  break-inside: avoid;
  color: #3b2a1a;
  rotate: var(--r, 0deg);
  cursor: pointer;
  transition: rotate 0.3s var(--ease-kawaii), translate 0.3s var(--ease-kawaii), filter 0.3s ease;
}

.quote-note:hover {
  rotate: 0deg;
  translate: 0 -8px;
}

.q-text {
  margin: 0;
  line-height: 1.35;
}

.q-from {
  margin-top: 10px;
  font-size: 0.8em;
  text-align: right;
  opacity: 0.75;
}

.quote-note.spotlight {
  animation: quoteSpot 1.2s var(--ease-bounce);
}

@keyframes quoteSpot {
  0% {
    scale: 1;
  }

  30% {
    scale: 1.12;
    filter: drop-shadow(0 0 14px var(--pink-main));
  }

  100% {
    scale: 1;
  }
}

.quote-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  z-index: 9999;
  padding: 8px 20px;
  color: var(--white);
  background: var(--pink-dark);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--pink-soft);
  font-family: 'Silkscreen', cursive;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  translate: -50% 20px;
  transition: opacity 0.25s ease, translate 0.25s ease;
}

.quote-toast.show {
  opacity: 1;
  translate: -50% 0;
}

/* ---------- STYLE 1: POST-IT ---------- */
.qs-postit {
  background: linear-gradient(160deg, #fff59d, #ffee58);
  border-bottom-right-radius: 50px 10px;
  box-shadow: 3px 7px 12px rgba(0, 0, 0, 0.2);
  font-family: 'Caveat', cursive;
  font-size: 27px;
}

.qs-postit .q-text {
  color: #5d4a00;
}

/* ---------- STYLE 2: TORN PAPER ---------- */
.qs-torn {
  padding: 34px 24px;
  background: #fffaf0;
  clip-path: polygon(0 4%, 6% 0, 12% 4%, 19% 0, 26% 4%, 33% 0, 40% 4%, 47% 0, 54% 4%, 61% 0, 68% 4%, 75% 0, 82% 4%, 89% 0, 96% 4%, 100% 0, 100% 96%, 94% 100%, 87% 96%, 80% 100%, 73% 96%, 66% 100%, 59% 96%, 52% 100%, 45% 96%, 38% 100%, 31% 96%, 24% 100%, 17% 96%, 10% 100%, 4% 96%, 0 100%);
  font-family: 'Special Elite', monospace;
  font-size: 17px;
}

/* ---------- STYLE 3: WASHI TAPE ---------- */
.qs-washi {
  padding-top: 34px;
  background: #ffffff;
  border: 3px solid #f48fb1;
  border-radius: 6px;
  box-shadow: 4px 5px 0 rgba(244, 143, 177, 0.35);
  font-family: 'Patrick Hand', cursive;
  font-size: 23px;
}

.qs-washi .q-deco {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 26px;
  background: repeating-linear-gradient(45deg, #ffcdd2 0 8px, #fff3e0 8px 16px);
  opacity: 0.9;
  rotate: -4deg;
  translate: -50% 0;
}

/* ---------- STYLE 4: LIBRARY CARD ---------- */
.qs-library {
  padding-top: 40px;
  background-color: #fdf6e3;
  background-image: repeating-linear-gradient(transparent 0 25px, #9fc5e8 25px 26px);
  border-top: 4px solid #e57373;
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.18);
  font-family: 'Courier Prime', monospace;
  font-size: 15px;
}

.qs-library .q-deco {
  position: absolute;
  top: 10px;
  left: 18px;
  color: #b71c1c;
  font-size: 10px;
  letter-spacing: 2px;
}

.qs-library .q-deco::before {
  content: '♡ NANNI LIBRARY';
}

/* ---------- STYLE 5: PUSHPIN ---------- */
.qs-pin {
  padding-top: 34px;
  background: #fffdf7;
  border: 1px solid #e0d6c8;
  box-shadow: 3px 6px 10px rgba(0, 0, 0, 0.18);
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 15px;
}

.qs-pin .q-deco {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 35% 30%, #ff8a80, #d32f2f 60%, #8e0000);
  border-radius: 50%;
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.35);
  translate: -50% 0;
}

/* ---------- STYLE 6: RULED NOTEBOOK ---------- */
.qs-ruled {
  padding: 18px 20px 18px 56px;
  background-color: #ffffff;
  background-image:
    linear-gradient(90deg, transparent 40px, #ef9a9a 40px 42px, transparent 42px),
    repeating-linear-gradient(transparent 0 27px, #cfe8ff 27px 28px);
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.15);
  font-family: 'Indie Flower', cursive;
  font-size: 20px;
}

.qs-ruled .q-text {
  line-height: 28px;
}

/* ---------- STYLE 7: CHAT BUBBLE ---------- */
.qs-chat {
  margin-bottom: 38px;
  padding: 16px 20px;
  color: #4a1525;
  background: #f8bbd0;
  border-radius: 22px 22px 22px 4px;
  box-shadow: 3px 4px 0 #f06292;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
}

.qs-chat .q-deco {
  position: absolute;
  right: 14px;
  bottom: -22px;
  color: #f06292;
  font-size: 11px;
}

.qs-chat .q-deco::before {
  content: 'sent ✓✓';
}

/* ---------- STYLE 8: GIFT TAG ---------- */
.qs-tag {
  padding: 22px 22px 22px 46px;
  background: #ffe0b2;
  clip-path: polygon(0 18%, 12% 0, 100% 0, 100% 100%, 12% 100%, 0 82%);
  font-family: 'Amatic SC', cursive;
  font-size: 32px;
  font-weight: 700;
}

.qs-tag .q-deco {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 14px;
  height: 14px;
  background: var(--cream-bg);
  border: 2px solid #c58b4a;
  border-radius: 50%;
  translate: 0 -50%;
}

/* ---------- STYLE 9: POLAROID ---------- */
.qs-polaroid {
  padding: 14px 14px 22px;
  background: #ffffff;
  box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.22);
  font-family: 'Reenie Beanie', cursive;
}

.qs-polaroid .q-text {
  padding: 34px 16px;
  color: #6a2c4a;
  background: linear-gradient(135deg, #ffd6e8, #d6ecff);
  font-size: 30px;
  text-align: center;
}

.qs-polaroid .q-from {
  font-size: 22px;
  text-align: center;
}

/* ---------- STYLE 10: GRAPH PAPER ---------- */
.qs-grid {
  background-color: #f6fffb;
  background-image:
    linear-gradient(#cfe8e0 1px, transparent 1px),
    linear-gradient(90deg, #cfe8e0 1px, transparent 1px);
  background-size: 18px 18px;
  border: 2px solid #9ccdb8;
  box-shadow: 4px 5px 0 #b9e0d0;
  font-family: 'Shadows Into Light', cursive;
  font-size: 23px;
}

/* ---------- STYLE 11: PARCHMENT SCROLL ---------- */
.qs-scroll {
  padding: 36px 26px;
  background: radial-gradient(circle at 50% 40%, #f6e7bd, #e2c98c);
  border-radius: 8px / 22px;
  box-shadow: 3px 6px 12px rgba(80, 50, 10, 0.3);
  font-family: 'IM Fell English', serif;
  font-size: 19px;
  font-style: italic;
}

.qs-scroll::before,
.qs-scroll::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  height: 16px;
  background: linear-gradient(#b58a4a, #8a6428 60%, #b58a4a);
  border-radius: 8px;
}

.qs-scroll::before {
  top: -6px;
}

.qs-scroll::after {
  bottom: -6px;
}

/* ---------- STYLE 12: NEON SIGN ---------- */
.qs-neon {
  padding: 26px 22px;
  color: #ff9ccf;
  background: #1a0b16;
  border: 2px solid #ff4fa3;
  border-radius: 14px;
  box-shadow: 0 0 10px #ff4fa3, inset 0 0 12px rgba(255, 79, 163, 0.35);
  font-family: 'VT323', monospace;
  font-size: 28px;
  text-shadow: 0 0 6px #ff4fa3, 0 0 14px #ff4fa3;
}

.qs-neon .q-text {
  color: #ffd1ea;
}

/* ---------- STYLE 13: TICKET ---------- */
.qs-ticket {
  padding: 30px 30px 24px;
  background: #fff3cd;
  border-left: 4px solid #d9a441;
  border-right: 4px solid #d9a441;
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.15);
  font-family: 'Courier Prime', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  mask:
    radial-gradient(circle 9px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}

.qs-ticket .q-deco {
  position: absolute;
  top: 8px;
  left: 30px;
  color: #b8860b;
  font-size: 9px;
}

.qs-ticket .q-deco::before {
  content: '★ ADMIT ONE ★';
}

/* ---------- STYLE 14: STICKER ---------- */
.qs-sticker {
  padding: 34px 28px;
  color: #d81b60;
  background: #ffffff;
  border: 5px solid #ffffff;
  border-radius: 52% 46% 54% 48% / 50% 54% 46% 50%;
  box-shadow: 0 0 0 3px #f06292, 5px 7px 0 rgba(0, 0, 0, 0.14);
  font-family: 'Permanent Marker', cursive;
  font-size: 19px;
  text-align: center;
}

@media (max-width: 600px) {
  .quotes-hero h1 {
    font-size: 30px;
  }

  .quote-wall {
    column-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-note.spotlight {
    animation: none;
  }
}