@font-face {
  font-family: "Gazpacho";
  src: url("fonts/Gazpacho-Heavy.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  --green: #2b5537;
  --green-soft: #3f7350;
  --pink: #ec4f9a;
  --white: #ffffff;
  --field: #f2f2f2;
  --purple: linear-gradient(180deg, #ecd6fc 0%, #dcc4f8 50%, #c8b3f3 100%);
  --display: "Gazpacho", Georgia, serif;
  --body: "Montserrat", -apple-system, system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #d9c3f7;
}

body {
  font-family: var(--body);
  color: var(--green);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- Screens ---------- */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--safe-top) + 18px) 24px calc(var(--safe-bottom) + 28px);
  background: var(--bg, var(--purple));
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* The new screen's background fades in over the old one, which stays solid underneath until it's done,
   so colors blend straight into each other instead of dipping through the purple page behind. */
.screen.enter, .screen.enter-back { animation: fade-in 0.6s ease-in-out both; }
.screen.enter > .content, .screen.enter > .topbar { animation: rise 0.7s cubic-bezier(.2, .8, .2, 1) 0.1s both; }
.screen.enter-back > .content, .screen.enter-back > .topbar { animation: rise-back 0.7s cubic-bezier(.2, .8, .2, 1) 0.1s both; }
.screen.leave { pointer-events: none; }
.screen.leave > .content, .screen.leave > .topbar, .screen.leave > .bubbles { animation: fade-out 0.25s ease both; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateX(14px); } }
@keyframes rise-back { from { opacity: 0; transform: translateX(-14px); } }
@keyframes fade-out { to { opacity: 0; } }

.content {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------- Top bar: back + progress ---------- */

.topbar {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}

.back {
  width: 32px;
  height: 32px;
  margin-left: -6px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  opacity: 0.75;
}
.back svg { width: 20px; height: 20px; }

.progress {
  flex: 1;
  display: flex;
  gap: 6px;
}
.progress span {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--white);
}
.progress span.done { background: var(--green); }

/* ---------- Type ---------- */

.display {
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
}

.flavor-name {
  font-size: clamp(2.4rem, 11vw, 3.25rem);
  text-transform: lowercase;
  margin: auto 0; /* splits the space evenly: above the name, below it, and under the stars */
}

/* Flavor foil: same moving-shine technique as "tastemaker club", in each flavor's own darker metallic colors. */
.foil {
  padding: 0 0.04em 0.08em;
  background: var(--foil);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.6px rgba(40, 20, 30, 0.5)) drop-shadow(0 2px 0 rgba(255, 255, 255, 0.7));
  animation: holo 7s linear infinite;
}

.question {
  font-weight: 600;
  font-size: clamp(1rem, 4.4vw, 1.2rem);
  line-height: 1.3;
  text-transform: lowercase;
  margin: 0 0 14px;
  max-width: 17em;
}

.caps {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Buttons ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 48px;
  padding: 10px 30px;
  border-radius: 99px;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  font-size: 1.1rem;
  transition: transform 0.12s ease, opacity 0.2s ease;
}
.pill:active { transform: scale(0.96); }
.pill:disabled { opacity: 0.35; cursor: default; }
.pill:disabled:active { transform: none; }

.text-link {
  margin-top: 12px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Intro ---------- */

.logo {
  width: min(72vw, 280px);
  height: auto;
  margin-bottom: 18px;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Silver holographic foil: a metallic gradient with faint rainbow tints, clipped to the letters
   and sliding slowly so the shine moves across the text. */
.holo {
  font-size: clamp(2rem, 10.6vw, 2.9rem);
  line-height: 1;
  white-space: nowrap;
  text-transform: lowercase;
  margin: 0 0 10px;
  padding: 0 0.04em 0.08em; /* room so descenders and edges aren't clipped */
  color: #8d8fa6; /* fallback */
  background: linear-gradient(110deg,
    #5b5d7a 0%, #8a8da8 14%, #a28ccc 26%, #79b3c4 38%, #eef0f6 46%,
    #c88db2 56%, #6a6c8c 70%, #9598b0 84%, #5b5d7a 100%); /* one shine band, to match the flavor names */
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.6px rgba(45, 40, 85, 0.7)) drop-shadow(0 2px 0 rgba(255, 255, 255, 0.9)) drop-shadow(0 4px 8px rgba(70, 55, 130, 0.25));
  animation: holo 7s linear infinite;
}
@keyframes holo {
  from { background-position: 0% 50%; }
  to { background-position: 150% 50%; }
}

.intro-title {
  font-size: clamp(1.45rem, 6.5vw, 1.85rem);
  line-height: 1.1;
  text-transform: lowercase;
  margin: 0 0 30px;
}

/* ---------- Flavor rating ---------- */

.rating-block { margin-top: 34px; display: flex; flex-direction: column; align-items: center; }
.flavor-name + .rating-block { margin-top: 0; }
.rating-block:last-of-type { margin-bottom: auto; }

.stars {
  display: flex;
  gap: 4px;
}
.star {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}
.star svg {
  width: 46px;
  height: 46px;
  fill: var(--white);
  transition: fill 0.15s ease, transform 0.15s ease;
}
.star.on svg { fill: var(--green); }
.star.pop svg { animation: spin 0.6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes spin {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(200deg) scale(1.3); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ---------- Top 3 ---------- */

.top3-title {
  font-size: clamp(2.2rem, 10vw, 3rem);
  margin: 8px 0 28px;
  color: var(--pink);
}

.choices {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: center;
}

.choice {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.15;
}
.choice .dot {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--body);
  font-weight: 800;
  font-size: 1.05rem;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.choice.picked .dot { background: var(--dot); transform: scale(1.08); }
.choice-label { max-width: 11em; }

.hint {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.7;
  margin: -14px 0 18px;
}

/* ---------- Leaderboard ---------- */

.board {
  list-style: none;
  width: 100%;
  max-width: 340px;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.board-row { display: flex; flex-direction: column; gap: 6px; }
.board-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
}
.board-mine {
  flex: none;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--green);
  color: var(--white);
}
.board-track {
  position: relative;
  height: 26px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.board-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  min-width: 26px;
  border-radius: 99px;
  border: 2px solid var(--green);
  background: var(--dot);
  animation: grow 0.9s cubic-bezier(.2, .8, .2, 1) both;
}
.board-row:nth-child(2) .board-bar { animation-delay: 0.08s; }
.board-row:nth-child(3) .board-bar { animation-delay: 0.16s; }
.board-row:nth-child(4) .board-bar { animation-delay: 0.24s; }
.board-row:nth-child(5) .board-bar { animation-delay: 0.32s; }
@keyframes grow { from { width: 26px; } }
.board-pct {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  font-size: 0.8rem;
}
.board-note { font-size: 0.8rem; font-weight: 600; opacity: 0.7; text-align: center; }

/* ---------- Create your own ---------- */

.create-q {
  font-size: clamp(1rem, 4.3vw, 1.15rem);
  line-height: 1.3;
  margin: 18px 0 22px;
  max-width: 15em;
}

.create-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 14px;
  border: 2px solid var(--green);
  border-radius: 14px;
  background: var(--field);
  overflow: hidden;
}
.create-box textarea {
  height: 120px; /* a few lines: reads as a short answer, not an essay */
  width: 100%;
  resize: none;
  border: 0;
  outline: 0;
  padding: 16px;
  background: transparent;
  font: 500 17px/1.4 var(--body); /* 16px+ stops iOS zooming on focus */
  color: var(--green);
  -webkit-user-select: text;
  user-select: text;
}
.create-box textarea::placeholder { color: rgba(43, 85, 55, 0.4); }

/* ---------- Deal ---------- */

.deal-kicker { font-size: clamp(1rem, 4.6vw, 1.2rem); margin: 0; }

.free {
  font-size: clamp(5rem, 26vw, 7rem);
  line-height: 0.9;
  margin: 6px 0 8px;
  color: var(--pink);
  text-shadow: 3px 3px 0 #f8b8d6, -1px -1px 0 #c93a80;
}

.deal-sub { font-size: clamp(0.95rem, 4.2vw, 1.1rem); line-height: 1.3; margin: 0 0 26px; }

.field {
  width: 100%;
  max-width: 300px;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--green);
  border-radius: 10px;
  background: var(--white);
  font: 500 17px var(--body);
  color: var(--green);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: rgba(43, 85, 55, 0.55); }
.field.invalid { border-color: #c2412f; }

.consent {
  max-width: 260px;
  margin: 0 0 16px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.8;
}

.error {
  min-height: 1.4em;
  margin: 6px 0 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #b23a2a;
}

/* ---------- Thanks ---------- */

.thanks-title { font-size: clamp(2.7rem, 12.5vw, 3.5rem); margin: auto 0 28px; }
.restart { margin-bottom: auto; }
.inbox { margin: -10px 0 24px; font-size: 0.85rem; line-height: 1.4; color: var(--pink); }
.admin-card .code { align-self: center; text-align: center; letter-spacing: 0.4em; font-size: 22px; }

.social { margin-top: auto; }
.social p { margin: 0 0 12px; font-size: 1rem; line-height: 1.3; }
.handles { display: flex; gap: 18px; justify-content: center; }
.handles a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 6px 2px;
}
.handles svg { width: 16px; height: 16px; }

/* ---------- Bubbles ---------- */

.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubble {
  position: absolute;
  width: calc(var(--size) * var(--bubble-scale, 1));
  height: calc(var(--size) * var(--bubble-scale, 1));
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0 5%, rgba(255,255,255,0) 13%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.55) 0 3%, rgba(255,255,255,0) 8%),
    radial-gradient(circle, rgba(255,255,255,0) 55%, rgba(255,255,255,.35) 68%, rgba(255,255,255,.75) 71%, rgba(255,255,255,0) 73%);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.35);
  animation: drift-a 8s ease-in-out infinite alternate;
}
/* Slow, slightly different paths so the bubbles don't move in lockstep. */
@keyframes drift-a {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10px, -22px) scale(1.04); }
  100% { transform: translate(-6px, -40px) scale(0.98); }
}
@keyframes drift-b {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-12px, -18px) scale(0.97); }
  100% { transform: translate(8px, -34px) scale(1.03); }
}

/* ---------- Admin panel ---------- */

.admin {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(30, 50, 36, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.admin-card {
  width: 100%;
  max-width: 340px;
  padding: 24px;
  border-radius: 18px;
  background: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-card h2 { margin: 0 0 4px; font-family: var(--display); font-size: 1.6rem; }
.admin-card p { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.45; }
.admin-card .admin-status { font-size: 0.75rem; opacity: 0.75; }
.admin-card.rankings { max-width: 380px; max-height: 90vh; overflow-y: auto; }
.admin-card.rankings .board { margin: 4px 0 8px; }
.admin-card.rankings .board-label { font-size: 0.7rem; }
.admin-card.rankings .board-track { height: 14px; }
.admin-card.rankings .board-bar { min-width: 14px; border-width: 1.5px; }
@keyframes grow-admin { from { width: 14px; } }
.admin-card.rankings .board-bar { animation-name: grow-admin; }
.admin-card .pill { min-width: 0; width: 100%; font-size: 1rem; }
.admin-card .ghost { background: transparent; color: var(--green); border: 2px solid var(--green); }

/* Tablets (iPad, iPad mini): scale the whole layout up instead of floating a phone-sized column in the middle. */
@media (min-width: 700px) and (min-height: 900px) {
  .content, .topbar { zoom: 1.6; }
  .screen { --bubble-scale: 1.6; padding-top: calc(var(--safe-top) + 28px); padding-bottom: calc(var(--safe-bottom) + 40px); }
}
@media (min-width: 700px) and (min-height: 700px) and (max-height: 899px) {
  .content, .topbar { zoom: 1.25; }
  .screen { --bubble-scale: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.enter, .screen.enter-back, .screen.enter > *, .screen.enter-back > *, .screen.leave > *,
  .bubble, .star.pop svg, .holo, .foil, .board-bar { animation: none !important; }
}

/* Short phones (iPhone SE etc.) */
@media (max-height: 640px) {
  .rating-block { margin-top: 22px; }
  .flavor-name + .rating-block { margin-top: 0; }
  .star { width: 50px; height: 50px; }
  .star svg { width: 40px; height: 40px; }
  .choices { gap: 6px; }
}