:root {
  --bg: #FFF9F0;
  --card: #FFFDF8;
  --ink: #4A3B32;
  --muted: #8A7568;
  --accent: #F6C98F;
  --accent-deep: #C9975A;
  --shadow: 0 12px 32px rgba(122, 91, 60, 0.12);
  --soft: 0 4px 12px rgba(122, 91, 60, 0.08);
  --radius: 22px;
}

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

html, body { height: 100%; }

body {
  font-family: "Nunito", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100dvh;
}

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

.masthead {
  display: flex; align-items: baseline; gap: 12px;
  padding: 24px 28px 6px;
  max-width: 640px; margin: 0 auto;
  position: relative; z-index: 1;
}
.masthead .brand { font-family: "Fredoka"; font-size: 20px; font-weight: 600; }
.masthead .tagline { font-style: italic; font-size: 14px; color: var(--muted); }

main {
  max-width: 640px; margin: 0 auto;
  padding: 14px 22px 30px;
  position: relative; z-index: 1;
}

footer {
  text-align: center; padding: 22px 16px 40px;
  color: var(--muted); font-size: 14px;
  position: relative; z-index: 1;
}

.view { display: none; }
.view.active { display: block; }

h1 {
  font-family: "Fredoka"; font-weight: 600;
  font-size: clamp(34px, 6.5vw, 52px);
  line-height: 1.08; letter-spacing: -0.5px;
  margin: 10px 0 14px;
}
h2 {
  font-family: "Fredoka"; font-weight: 600;
  font-size: clamp(26px, 4.5vw, 36px);
  line-height: 1.15; margin: 0 0 10px;
}
.lede { font-size: 18px; color: var(--muted); max-width: 54ch; margin-bottom: 18px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3.5vw, 28px);
}
.guide { margin: 0 0 20px; }
.guide-title { font-family: "Fredoka"; font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.guide ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }

.btn {
  font-family: "Fredoka"; font-size: 18px;
  padding: 13px 24px; border-radius: 18px; border: none;
  background: #F3E3C8; color: var(--ink);
  cursor: pointer; text-decoration: none; display: inline-block;
  box-shadow: 0 5px 0 rgba(180, 130, 60, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(180, 130, 60, 0.22); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(180, 130, 60, 0.22); }
.btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.btn.primary { background: var(--accent); color: #5B3A1E; font-size: 20px; padding: 15px 32px; }
.btn.link { background: #1D9BF0; color: #fff; box-shadow: 0 5px 0 rgba(13, 90, 150, 0.35); }
.btn.link:hover { box-shadow: 0 7px 0 rgba(13, 90, 150, 0.35); }

.privacy { font-size: 14px; color: var(--muted); font-style: italic; margin-top: 16px; }

/* quiz */
.quiz-top { margin-bottom: 16px; }
.q-count { font-size: 14px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.q-bar { height: 10px; border-radius: 8px; background: #F4E8D8; overflow: hidden; }
.q-fill {
  height: 100%; width: 0%;
  border-radius: 8px;
  background: linear-gradient(90deg, #F6C98F, #E8A87C);
  transition: width 0.3s ease;
}
.q-text {
  font-family: "Fredoka"; font-weight: 500;
  font-size: clamp(22px, 4.6vw, 30px);
  line-height: 1.35; margin: 0 0 22px;
  min-height: 2.6em;
}
.answer-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.answer {
  font-family: "Fredoka"; font-size: 17px;
  padding: 14px 8px; border-radius: 16px; border: none;
  background: #FFF3E2; color: var(--ink); cursor: pointer;
  box-shadow: var(--soft);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.answer:hover { background: var(--accent); transform: translateY(-2px) scale(1.03); box-shadow: 0 6px 14px rgba(180, 130, 60, 0.2); }
.answer.chosen { background: var(--accent); transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 14px rgba(180, 130, 60, 0.25); }
.answer:active { transform: translateY(1px) scale(0.99); }
.answer:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.quiz-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 22px;
}
.back { background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; text-decoration: underline; }
.hint { font-size: 14px; color: var(--muted); font-style: italic; }

/* result */
.stage { position: relative; height: 210px; width: 100%; max-width: 340px; margin: 6px auto 8px; }
.cone {
  position: absolute; bottom: 0; left: 50%; margin-left: -59px;
  width: 118px; height: 140px;
  background: repeating-linear-gradient(45deg, #E9BE83 0 12px, #D9A45F 12px 14px);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.scoop {
  position: absolute; width: 110px; height: 104px;
  border-radius: 45% 55% 55% 45% / 50% 45% 55% 50%;
  filter: drop-shadow(0 10px 16px rgba(122, 91, 60, 0.18));
  animation: wobble 6s ease-in-out infinite;
}
.scoop.primary { left: 50%; margin-left: -55px; bottom: 88px; z-index: 2; }
.scoop.secondary { left: 30%; margin-left: -46px; bottom: 72px; width: 92px; height: 86px; z-index: 1; }
.cherry {
  position: absolute; left: 50%; margin-left: -15px; bottom: 196px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #D64550; z-index: 3;
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.15);
}
.cherry::after {
  content: ""; position: absolute; bottom: 100%; left: 50%;
  width: 3px; height: 22px; background: #5A4A38;
  transform-origin: bottom; transform: rotate(-24deg);
}
@keyframes wobble {
  0%, 100% { border-radius: 45% 55% 55% 45% / 50% 45% 55% 50%; transform: rotate(-2deg); }
  50%      { border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%; transform: rotate(2deg); }
}
.chosen-note { font-style: italic; font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.result-sub { font-family: "Fredoka"; font-size: 20px; color: var(--accent-deep); margin-bottom: 12px; }
.blurb { margin-bottom: 10px; }
.weekend { font-style: italic; color: var(--muted); margin-bottom: 6px; }
.topping { font-weight: 800; margin-bottom: 22px; }
.bars-wrap { margin: 20px 0; }
.bars-title { font-family: "Fredoka"; font-size: 19px; font-weight: 600; margin-bottom: 12px; }
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 12px; }
.bar-name { font-size: 15px; font-weight: 700; }
.bar-track { height: 14px; border-radius: 10px; background: #F4E8D8; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 10px; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.bar-num { font-size: 14px; font-weight: 800; color: var(--muted); text-align: right; }
.share-wrap { margin: 20px 0; }
#share-text {
  width: 100%; padding: 12px 14px;
  border: none; border-radius: 14px;
  background: #FFF3E2;
  font-family: "Nunito"; font-size: 15px; color: var(--ink);
  margin-bottom: 12px;
}
.share-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.tie-card { margin-bottom: 18px; }
.tie-choices { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.flavor-choice { font-family: "Fredoka"; font-size: 18px; padding: 14px 24px; border: none; border-radius: 16px; cursor: pointer; box-shadow: var(--soft); transition: transform 0.12s ease; }
.flavor-choice:hover { transform: translateY(-2px); }

@media (max-width: 560px) {
  .answer-row { gap: 6px; }
  .answer { font-size: 15px; padding: 12px 4px; }
  .bar-row { grid-template-columns: 96px 1fr 40px; gap: 8px; }
  .stage { height: 190px; }
  .scoop.primary { bottom: 80px; }
  .scoop.secondary { bottom: 66px; }
  .cherry { bottom: 178px; }
}