/* ===========================================
   Happy Mother's Day, Rikki — quiz styles
   =========================================== */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #2b2236;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body {
  min-height: 100vh;
  background: linear-gradient(160deg, #fde7ef 0%, #f5e6ff 50%, #fff5e6 100%);
}

img { image-orientation: from-image; max-width: 100%; display: block; }

/* ----- Screens ----- */
.screen {
  display: none;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  animation: fadeIn .5s ease;
}
.screen.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }

.hidden { display: none !important; }
.muted { color: #9b8aa8; }
.aside { color: #7e6c92; font-style: italic; font-size: .95em; }
.aside.small { font-size: .85em; }

/* ----- Buttons ----- */
.btn-primary {
  background: linear-gradient(135deg, #ff7eb6, #c084fc);
  color: #fff;
  border: 0;
  padding: 14px 28px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(192, 132, 252, .35), 0 2px 4px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .2s ease;
  letter-spacing: .01em;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(192, 132, 252, .45); }
.btn-primary:active { transform: translateY(0); }
.btn-primary.big { font-size: 1.15rem; padding: 16px 36px; }

/* ===========================================
   SCREEN 1 — Welcome
   =========================================== */
#welcome { padding: 0; }
.slideshow {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 1.2s ease, opacity 1.2s ease;
  z-index: 0;
  filter: saturate(1.05);
}
.slideshow-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.05) 0%, rgba(255,255,255,.5) 60%, rgba(255,255,255,.85) 100%),
    linear-gradient(180deg, rgba(253,231,239,.55), rgba(245,230,255,.65));
  z-index: 1;
}
.welcome-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  padding: 24px;
  animation: rise .9s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(20px);} to {opacity:1; transform:none;} }

.hearts {
  font-size: 2rem;
  display: flex; justify-content: center; gap: 14px;
  margin-bottom: 12px;
}
.hearts span {
  display: inline-block;
  animation: bob 2.6s ease-in-out infinite;
}
.hearts span:nth-child(1) { animation-delay: 0s; }
.hearts span:nth-child(2) { animation-delay: .25s; }
.hearts span:nth-child(3) { animation-delay: .5s; }
.hearts span:nth-child(4) { animation-delay: .75s; }
.hearts span:nth-child(5) { animation-delay: 1s; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-8px) rotate(3deg);} }

.welcome-title {
  font-family: "Brush Script MT", "Lucida Handwriting", cursive;
  font-weight: 400;
  margin: 0;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.6), 0 8px 24px rgba(192, 132, 252, .25);
}
.welcome-title .line1 { display: block; font-size: clamp(2.2rem, 7vw, 3.6rem); color: #c2185b; }
.welcome-title .line2 { display: block; font-size: clamp(3rem, 11vw, 5.6rem); color: #8a4baf; margin: -.05em 0; }
.welcome-title .line3 {
  display: block;
  font-size: clamp(3.4rem, 13vw, 6.4rem);
  color: #d6336c;
  margin-top: -.05em;
}

.welcome-sub {
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  color: #6b4d7c;
  margin: 18px 0 28px;
  font-style: italic;
}
.welcome-hint {
  margin-top: 14px;
  color: #8a7a9c;
  font-size: .9rem;
}

/* ===========================================
   SCREEN 2 — Intro & SCREEN 4 — Transition cards
   =========================================== */
.card {
  background: #fff;
  border-radius: 22px;
  padding: 32px 28px;
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(160, 100, 200, .18), 0 4px 12px rgba(0,0,0,.04);
  animation: rise .5s ease;
}
.card h2 {
  margin: 0 0 16px;
  color: #8a4baf;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
}
.card p { line-height: 1.6; margin: 10px 0; color: #4a3a5c; }
.card .btn-primary { margin-top: 18px; }
.big-emoji { font-size: 3.5rem; margin: 0 0 4px; }

/* ===========================================
   SCREEN 3 — Quiz
   =========================================== */
#quiz { flex-direction: column; padding: 20px 16px; }

.quiz-progress {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 14px;
  font-weight: 700;
  color: #8a4baf;
  font-size: 1rem;
  text-align: left;
  padding: 0 4px;
}
.progress-bar {
  height: 8px;
  background: #f1e3ff;
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}
#progressFill {
  height: 100%;
  background: linear-gradient(90deg, #ff7eb6, #c084fc);
  width: 0%;
  transition: width .4s ease;
  border-radius: 999px;
}

.quiz-card {
  text-align: left;
  padding: 28px 24px;
}
.quiz-card h2 {
  text-align: left;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  line-height: 1.4;
  color: #2b2236;
  margin-bottom: 18px;
}

.question-media {
  margin: -8px -4px 18px;
  border-radius: 14px;
  overflow: hidden;
  background: #f7eefb;
}
.question-media:empty { display: none; }
.question-media img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}
.media-caption {
  padding: 8px 14px;
  background: #f7eefb;
  color: #6b4d7c;
  font-style: italic;
  font-size: .92rem;
  text-align: center;
}

.options {
  display: grid;
  gap: 10px;
}
.option-btn {
  background: #fff;
  border: 2px solid #ead4f5;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
  color: #2b2236;
  font-family: inherit;
  line-height: 1.4;
}
.option-btn:hover:not(:disabled) {
  border-color: #c084fc;
  background: #faf3ff;
  transform: translateX(2px);
}
.option-btn:disabled { cursor: default; }
.option-btn.correct {
  background: #e6f9ec;
  border-color: #56b96a;
  color: #1f6c30;
  font-weight: 600;
}
.option-btn.wrong {
  background: #ffefef;
  border-color: #f08a8a;
  color: #8a2c2c;
}
.option-btn .marker {
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
}

.feedback {
  margin-top: 16px;
  padding: 0;
  font-size: .98rem;
  line-height: 1.5;
  color: #4a3a5c;
}
.feedback:not(:empty) {
  padding: 14px 16px;
  background: #faf3ff;
  border-radius: 12px;
  border-left: 4px solid #c084fc;
}
.feedback-img {
  margin-top: 12px;
  border-radius: 10px;
  overflow: hidden;
}
.feedback-img img { width: 100%; max-height: 280px; object-fit: cover; }

#nextBtn { margin-top: 18px; width: 100%; }

/* ===========================================
   SCREEN 5 — 90s POPUP REVEAL
   =========================================== */
#popup {
  background: #008080; /* classic Win98 teal */
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  overflow: hidden;
  position: relative;
}
#popup.active { display: flex; }

.tile-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, #ffd700 0 4px, transparent 5px),
    radial-gradient(circle at 75% 75%, #ff69b4 0 4px, transparent 5px),
    radial-gradient(circle at 50% 0, #00ffff 0 3px, transparent 4px),
    repeating-linear-gradient(45deg, #008080 0 30px, #006666 30px 60px);
  background-size: 60px 60px, 60px 60px, 60px 60px, auto;
  opacity: .85;
  pointer-events: none;
}

/* Marquees */
.marquee {
  position: relative;
  width: 100%;
  background: #000;
  color: #ffff00;
  border-top: 2px solid #ffff00;
  border-bottom: 2px solid #ffff00;
  font-family: "Comic Sans MS", "Marker Felt", cursive;
  font-weight: 700;
  font-size: 1rem;
  padding: 6px 0;
  overflow: hidden;
  z-index: 5;
}
.marquee.top { margin-top: 0; }
.marquee.bottom { margin-top: auto; }
.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: scrollLeft 38s linear infinite;
}
.marquee-track.reverse { animation: scrollRight 42s linear infinite; }
.marquee-track > span { padding-right: 2rem; flex-shrink: 0; }
@keyframes scrollLeft { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@keyframes scrollRight { from { transform: translateX(-50%);} to { transform: translateX(0);} }

/* Decorations */
.decor {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
}
.decor span {
  position: absolute;
  font-size: 2.4rem;
  filter: drop-shadow(0 0 6px rgba(255,255,0,.7));
}
.star { animation: spin 3.5s linear infinite; }
.star.s1 { top: 14%; left: 6%; animation-duration: 4s; }
.star.s2 { top: 30%; right: 5%; animation-duration: 3s; font-size: 3rem; }
.star.s3 { bottom: 18%; left: 8%; animation-duration: 2.5s; font-size: 3.2rem; }
.star.s4 { bottom: 28%; right: 7%; animation-duration: 5s; }
.star.s5 { top: 55%; left: 3%; animation-duration: 3.8s; }
.dollar { animation: bob2 1.8s ease-in-out infinite; }
.dollar.d1 { top: 20%; right: 15%; animation-delay: .2s; font-size: 2.6rem; }
.dollar.d2 { bottom: 22%; left: 14%; animation-delay: .8s; font-size: 2.4rem; }
.construction { animation: wobble 1.2s ease-in-out infinite; }
.construction.c1 { top: 8%; right: 20%; }
.construction.c2 { bottom: 12%; left: 22%; font-size: 2.2rem; }
@keyframes spin { from { transform: rotate(0);} to { transform: rotate(360deg);} }
@keyframes bob2 { 0%,100% {transform:translateY(0);} 50%{transform:translateY(-12px);} }
@keyframes wobble { 0%,100% { transform: rotate(-12deg);} 50%{transform: rotate(12deg);} }

/* Win98 window */
.win98 {
  position: relative;
  z-index: 10;
  margin: 18px auto;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  box-shadow: 4px 4px 0 #000;
  max-width: 560px;
  width: calc(100% - 32px);
  font-family: "MS Sans Serif", "Tahoma", sans-serif;
}
.win98-title {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 4px 6px;
  font-weight: 700;
  font-size: .9rem;
  gap: 6px;
}
.win98-title .title-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win98-buttons {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.win98-buttons span {
  background: #c0c0c0;
  color: #000;
  font-weight: 900;
  width: 18px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  font-family: monospace;
}
.dot { display: inline-block; width: 14px; height: 14px; }
.win98-body {
  padding: 22px 18px;
  text-align: center;
  background: #c0c0c0;
}

.exclaim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
.exclaim-icon {
  width: 46px; height: 46px;
  background: #ffeb3b;
  border: 3px solid #000;
  border-radius: 50%;
  font-family: "Times New Roman", serif;
  font-weight: 900;
  font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
  color: #000;
  animation: pulse 1s ease-in-out infinite;
}
.exclaim-text {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 1.4rem;
  letter-spacing: .04em;
  color: #ff0000;
  text-shadow: 1px 1px 0 #000;
}
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }

/* Rainbow blink heading */
.rainbow {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  letter-spacing: .01em;
  margin: 12px 0 18px;
  line-height: 1.05;
  background: linear-gradient(90deg, #ff0000, #ff8800, #ffd700, #00cc00, #00aaff, #aa00ff, #ff00aa, #ff0000);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 3px 3px 0 rgba(0,0,0,.15);
  animation: rainbowSlide 3s linear infinite;
}
@keyframes rainbowSlide {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}
.blink { animation: rainbowSlide 3s linear infinite, blinkOn 1s steps(2) infinite; }
@keyframes blinkOn { 0%,49%{opacity:1;} 50%,100%{opacity:.4;} }

.big-line {
  font-family: "Comic Sans MS", "Marker Felt", cursive;
  font-size: 1.1rem;
  margin: 10px 0;
  color: #000;
  font-weight: 700;
}
.hot {
  background: #ffff00;
  color: #ff0000;
  padding: 0 6px;
  font-weight: 900;
  border: 1px solid #000;
}
.under { text-decoration: underline; text-decoration-color: #ff0000; text-decoration-thickness: 3px; }

.prize-box {
  border: 4px ridge #ffd700;
  background: #fffbe6;
  padding: 14px 10px;
  margin: 18px 0;
  box-shadow: inset 0 0 0 2px #ff0000;
}
.prize-stars {
  color: #ffd700;
  font-size: 1.3rem;
  letter-spacing: .3em;
  text-shadow: 1px 1px 0 #000;
}
.prize-headline {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: #cc0066;
  text-shadow: 2px 2px 0 #ffd700, 4px 4px 0 #000;
  letter-spacing: .03em;
  margin: 8px 0;
  line-height: 1.1;
}

/* IOU */
.iou {
  border: 3px dashed #8a4baf;
  background: #fff;
  margin: 18px 0;
  padding: 16px 14px;
  position: relative;
  font-family: "Times New Roman", serif;
  color: #2b2236;
  text-align: center;
}
.iou-stamp {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: #cc0000;
  color: #fff;
  font-family: "Impact", "Arial Black", sans-serif;
  letter-spacing: .15em;
  padding: 4px 14px;
  border: 2px solid #000;
  font-size: .85rem;
  box-shadow: 2px 2px 0 #000;
}
.iou-msg { margin: 14px 0 8px; line-height: 1.55; font-size: 1.02rem; }
.iou-cta { margin: 8px 0 6px; font-size: 1.1rem; line-height: 1.45; }
.iou-sig { font-style: italic; margin: 12px 0 2px; color: #6b4d7c; }
.iou-date { font-size: .8rem; color: #8a7a9c; margin: 0; }

/* Visitor counter */
.counter {
  background: #000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  display: inline-block;
  padding: 6px 12px;
  margin: 12px 0;
  border: 2px solid #00ff00;
  font-size: 1rem;
}
.counter-num {
  display: inline-block;
  background: #001100;
  padding: 0 6px;
  margin-left: 4px;
  letter-spacing: .15em;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
}
.big-button {
  background: linear-gradient(180deg, #ff0066 0%, #cc0044 100%);
  color: #fff;
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 1.05rem;
  letter-spacing: .04em;
  padding: 12px 18px;
  border: 3px outset #ff66aa;
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
  animation: buttonPulse 1.4s ease-in-out infinite;
}
.big-button.alt {
  background: linear-gradient(180deg, #00aa00 0%, #007700 100%);
  border-color: #66dd66;
}
.big-button:active { border-style: inset; }
@keyframes buttonPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255, 0, 102, .6); }
  50% { box-shadow: 0 0 0 8px rgba(255, 0, 102, 0); }
}

.fineprint {
  font-family: "Times New Roman", serif;
  font-size: .78rem;
  color: #444;
  margin: 14px 0 0;
  font-style: italic;
}

/* Spawned popups */
#popupSwarm { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.swarm {
  position: absolute;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 3px 3px 0 #000;
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  font-size: .85rem;
  width: 240px;
  pointer-events: auto;
  animation: popIn .25s ease;
}
@keyframes popIn { from { transform: scale(.6); opacity: 0;} to { transform: scale(1); opacity: 1;} }
.swarm .win98-title { font-size: .8rem; }
.swarm .swarm-body { padding: 12px; text-align: center; color: #000; }
.swarm-msg { margin: 0 0 10px; font-weight: 700; }
.swarm-ok {
  background: #c0c0c0;
  border: 2px outset #fff;
  padding: 4px 18px;
  font-family: inherit;
  cursor: pointer;
  font-weight: 700;
}
.swarm-ok:active { border-style: inset; }

/* Responsive tweaks */
@media (max-width: 480px) {
  .card { padding: 26px 20px; }
  .win98-title .title-text { font-size: .78rem; }
  .big-button { font-size: .95rem; padding: 10px 14px; }
  .star, .dollar, .construction { font-size: 1.8rem !important; }
}