:root {
  --bg: #f2eee4;
  --bg-glow: #f8f5ec;
  --bg-card: #ffffff;
  --text: #241c15;
  --text-dim: #7a6b54;
  --accent: #ff5a36;
  --accent-light: #ff8a68;
  --accent-edge: #c7431f;
  --accent-2: #00bfa6;
  --accent-2-light: #3ddbc4;
  --accent-2-edge: #00937f;
  --secondary-light: #ffffff;
  --secondary-dark: #f1ede3;
  --secondary-edge: #d9d4c8;
  /* Dedicated to the quiz's Yes/No answer buttons only. Distinct from
     --accent/--accent-2 (orange/teal), which stay as the site's general
     brand colors for CTAs, toggles, etc. */
  --yes-light: #4ade80;
  --yes: #22c55e;
  --yes-edge: #15803d;
  --no-light: #b28dff;
  --no: #8b5cf6;
  --no-edge: #6d28d9;
  --border: #241c15;
  --radius: 16px;
  --shadow: 0 10px 20px rgba(36, 28, 21, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Nunito", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at 50% 0%, var(--bg-glow), var(--bg) 60%) fixed;
  color: var(--text);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .logo, .btn, .result-box h1, .hero h1 {
  font-family: "Baloo 2", "Nunito", sans-serif;
}

a {
  color: var(--accent);
}

.container {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.site-header {
  position: relative;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 2px solid var(--secondary-edge);
  background: var(--bg);
}

.site-header a.logo {
  font-weight: 800;
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--text);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.site-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 640px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 4px;
    order: 3;
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--secondary-edge);
    font-size: 1.05rem;
  }
}

/* Skeuomorphic "keycap" button: light-to-dark face gradient + a solid
   flat-colored bottom edge (box-shadow, no blur) that reads as the
   button's own depth. Pressing it drops the button down onto its edge. */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 16px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(to bottom, var(--accent-light), var(--accent));
  box-shadow: 0 5px 0 var(--accent-edge), 0 10px 18px rgba(36, 28, 21, 0.16);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--accent-edge), 0 2px 6px rgba(36, 28, 21, 0.12);
}

.btn svg {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: 6px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  color: var(--text);
  background: linear-gradient(to bottom, var(--secondary-light), var(--secondary-dark));
  box-shadow: 0 5px 0 var(--secondary-edge), 0 10px 18px rgba(36, 28, 21, 0.12);
}

.btn-secondary:active {
  box-shadow: 0 1px 0 var(--secondary-edge), 0 2px 6px rgba(36, 28, 21, 0.1);
}

.btn-blue {
  color: #fff;
  background: linear-gradient(to bottom, #4dabf7, #1c7ed6);
  box-shadow: 0 5px 0 #145da0, 0 10px 18px rgba(36, 28, 21, 0.16);
}

/* De-emphasized secondary path (e.g. "start from scratch" next to a
   template grid) — reads as an option, not a competing call to action. */
.link-button {
  display: block;
  margin: 4px auto 0;
  padding: 8px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--accent);
}

#start-blank svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-left: 2px;
}

.optional-tag {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 0.85em;
}

.test-status {
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
}

.test-status.done {
  color: var(--yes-edge);
}

.btn-blue:active {
  box-shadow: 0 1px 0 #145da0, 0 2px 6px rgba(36, 28, 21, 0.12);
}

.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--secondary-edge);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.form-field {
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

.form-field textarea {
  resize: vertical;
}

.required-mark {
  color: var(--accent);
}

.field-error {
  color: #c0392b;
  font-size: 0.85rem;
  margin: 6px 0 0;
}

/* Hidden honeypot field — real visitors never see or fill it in; a bot
   filling every field on the page trips it and gets a silent fake success
   instead of an insert into contact_messages. */
.form-field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: 600;
}

.form-alert--success {
  background: #dcfce7;
  color: var(--yes-edge);
}

.form-alert--error {
  background: #fde2e2;
  color: #c0392b;
}

.recaptcha-disclosure {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.hero {
  position: relative;
  text-align: center;
  padding: clamp(32px, 8vw, 60px) 0 clamp(24px, 6vw, 40px);
}

.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.hero h1 {
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  margin-bottom: 12px;
}

.hero p {
  color: var(--text-dim);
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  max-width: 520px;
  margin: 0 auto 28px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 16px;
  margin: 24px 0;
}

.template-card {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.template-card:hover,
.template-card.selected {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 24px rgba(36, 28, 21, 0.16);
}

/* Tag and hint are pinned to fixed corners (not part of the flex flow),
   so their position never shifts with title length — only the title
   itself grows/shrinks in the space between them. */
.template-card .category {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cat-color, var(--accent-edge));
  background: var(--cat-bg, color-mix(in srgb, var(--accent) 14%, transparent));
  padding: 4px 10px;
  border-radius: 999px;
}

/* Topic funnel: pick a chip -> only that topic's cards show (first 8),
   "Show more templates" reveals 4 more at a time from within it. Both the
   chip and the in-card category pill above read the same --cat-color/
   --cat-bg pair (set per category-{slug} class below), so a topic is the
   same color everywhere it appears. */
.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.topic-chip {
  padding: 8px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 2px solid var(--cat-color, var(--secondary-edge));
  background: var(--bg-card);
  color: var(--cat-color, var(--text-dim));
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.topic-chip.active {
  background: var(--cat-color, var(--accent));
  color: #fff;
}

.category-hidden,
.hidden-template {
  display: none !important;
}

.category-dating { --cat-color: #ec4899; --cat-bg: color-mix(in srgb, #ec4899 14%, transparent); }
.category-work-school { --cat-color: #2563eb; --cat-bg: color-mix(in srgb, #2563eb 14%, transparent); }
.category-roommate { --cat-color: #d97706; --cat-bg: color-mix(in srgb, #d97706 14%, transparent); }
.category-friendship { --cat-color: #ff5a36; --cat-bg: color-mix(in srgb, #ff5a36 14%, transparent); }
.category-gym-fitness { --cat-color: #dc2626; --cat-bg: color-mix(in srgb, #dc2626 14%, transparent); }
.category-gaming-hobby { --cat-color: #7c3aed; --cat-bg: color-mix(in srgb, #7c3aed 14%, transparent); }
.category-pet-ownership { --cat-color: #00bfa6; --cat-bg: color-mix(in srgb, #00bfa6 14%, transparent); }
.category-pet-ownership-cats { --cat-color: #0891b2; --cat-bg: color-mix(in srgb, #0891b2 14%, transparent); }
.category-relationship-banter { --cat-color: #db2777; --cat-bg: color-mix(in srgb, #db2777 14%, transparent); }
.category-everyday-small-lies { --cat-color: #a16207; --cat-bg: color-mix(in srgb, #a16207 14%, transparent); }

.template-card .title {
  width: 100%;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  padding: 10px 4px;
}

.template-card .use-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.template-card .use-hint svg {
  width: 14px;
  height: 14px;
}

.template-card:hover .use-hint {
  opacity: 1;
  transform: translateX(0);
}

.question-row {
  margin-bottom: 20px;
  border-style: dashed;
  max-height: 600px;
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease, margin-bottom 0.2s ease, padding 0.2s ease;
}

.question-row.removing {
  opacity: 0;
  transform: scale(0.97);
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.question-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.question-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.remove-question {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.remove-question svg {
  width: 16px;
  height: 16px;
}

.remove-question:hover,
.remove-question:focus-visible {
  background: color-mix(in srgb, var(--no) 12%, transparent);
  color: var(--no-edge);
}

.question-count {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.character-picker {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 14px;
  margin-bottom: 20px;
  scroll-snap-type: x mandatory;
  /* Fades the right edge so a scrollable strip reads as "more to see" on
     mobile instead of looking like it's simply been cut off. */
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
}

.character-thumb {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px;
  border-radius: 14px;
  border: 3px solid transparent;
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.character-avatar {
  position: relative;
  display: inline-flex;
}

.character-thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  background: var(--bg-card);
}

.character-check {
  display: none;
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--bg-card);
}

.character-check svg {
  width: 11px;
  height: 11px;
}

.character-thumb.selected .character-check {
  display: inline-flex;
}

.character-thumb span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
}

.character-thumb.selected {
  border-color: var(--accent);
  background: var(--bg-card);
}

.character-thumb.selected span {
  color: var(--text);
}

.character-showcase {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
}

.character-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.character-profile-img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--bg);
  flex-shrink: 0;
}

.character-card-header h2 {
  margin: 0;
}

.character-mood-count {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.mood-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.mood-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 96px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.mood-thumb img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  background: var(--bg);
  border: 2px solid var(--secondary-edge);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.mood-thumb:hover img,
.mood-thumb:focus-visible img {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.mood-thumb span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
}

.character-rating {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--secondary-edge);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.stars {
  display: inline-flex;
  gap: 2px;
}

.star {
  padding: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.star svg {
  width: 24px;
  height: 24px;
}

/* Base (empty) star, always visible underneath the fill overlay. */
.star-icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  color: var(--secondary-edge);
}

/* Filled overlay, clipped to a JS-controlled width (0-100%) so a star can
   be partially lit up — e.g. a 4.7 average renders as 4 full stars plus
   this one at 70%, not just rounded to a whole star. */
.star-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: #f5a623;
}

.star-fill svg {
  fill: currentColor;
}

.character-rating.voted .star {
  cursor: default;
}

.rating-summary {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.rating-average {
  font-weight: 800;
  color: var(--text);
}

.character-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: rgba(20, 15, 10, 0.85);
}

.character-lightbox[hidden] {
  display: none;
}

.lightbox-figure {
  margin: 0;
  max-width: min(90vw, 480px);
  text-align: center;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius);
  background: var(--bg-card);
  display: block;
  margin: 0 auto;
}

.lightbox-figure figcaption {
  margin-top: 12px;
  color: #fff;
  font-weight: 700;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}

.lightbox-nav {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 640px) {
  .character-lightbox {
    gap: 4px;
    padding: 12px;
  }

  .lightbox-nav {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
}

.question-row input[type="text"],
.question-row select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 2px solid var(--secondary-edge);
  background: var(--bg-card);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 10px;
  font-family: inherit;
}

.question-row .row-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trick-caption {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.toggle-group,
.chip-group {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--secondary-edge);
}

.toggle-group button,
.chip-group button {
  padding: 8px 16px;
  min-height: 44px;
  border: none;
  background: var(--bg-card);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
}

.toggle-group button.active,
.chip-group button.active {
  background: linear-gradient(to bottom, var(--secondary-light), var(--secondary-dark));
  color: var(--text);
}

.share-box {
  text-align: center;
  padding: 32px;
}

#share-box-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#share-box-heading svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
  flex-shrink: 0;
}

#faq-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#faq-heading svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
  flex-shrink: 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-arrow {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-arrow svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.faq-item[open] .faq-arrow {
  transform: rotate(90deg);
}

.share-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.share-link input {
  min-width: 0;
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  border: 2px solid var(--secondary-edge);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
}

.quiz-stage {
  position: relative;
  min-height: min(70vh, 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(20px, 6vw, 40px) 16px;
}

.progress-pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 10px;
}

.progress-pill {
  width: 10px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  background: var(--bg-card);
  border: 2px solid var(--secondary-edge);
  transition: width 0.2s ease, background 0.2s ease, transform 0.15s ease;
  cursor: default;
}

.progress-pill.done {
  background: var(--text-dim);
  border-color: var(--text-dim);
  cursor: pointer;
}

.progress-pill.done:hover,
.progress-pill.done:focus-visible {
  transform: scale(1.3);
  background: var(--accent);
  border-color: var(--accent-edge);
}

.progress-pill.active {
  width: 30px;
  background: var(--accent);
  border-color: var(--accent-edge);
}

.answer-hint {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-dim);
  margin-top: 14px;
  max-width: 380px;
}

.answer-hint-emoji {
  font-style: normal;
}

.character-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 12px 0 clamp(28px, 8vw, 40px);
  flex-wrap: wrap;
}

/* No card/shadow behind the character — final art will be transparent
   PNG (and later animated GIF), so it should float directly on the page
   background rather than sit in a framed box. */
.character {
  position: relative;
  flex-shrink: 0;
  width: clamp(180px, 40vw, 320px);
  aspect-ratio: 4 / 5;
}

.character-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* Shown automatically (via play.js) when a character mood image fails to
   load — e.g. moods not yet provided for a character. Keeps the layout
   honest about its current state instead of showing a broken-image icon. */
.character-placeholder {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 2px dashed var(--secondary-edge);
  color: var(--text-dim);
  font-size: 0.7rem;
  text-align: center;
  padding: 8px;
  background: var(--bg-card);
}

/* Rounded "cloud" speech bubble with a soft blob tail (rotated rounded
   square) instead of a sharp CSS-triangle pointer, plus layered shadow
   for a bit of 3D lift off the page. */
.speech-bubble {
  position: relative;
  background: var(--bg-card);
  border-radius: 28px;
  padding: 18px 24px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(36, 28, 21, 0.08), 0 14px 26px rgba(36, 28, 21, 0.14);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background: var(--bg-card);
  border-radius: 8px;
  left: -9px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: -3px 3px 5px rgba(36, 28, 21, 0.08);
}

@media (max-width: 560px) {
  .character-scene {
    flex-direction: column;
  }

  .speech-bubble {
    max-width: 100%;
  }

  .speech-bubble::after {
    left: 50%;
    top: -9px;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: -3px -3px 5px rgba(36, 28, 21, 0.06);
  }
}

.question-text {
  font-family: "Fredoka", "Baloo 2", sans-serif;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-weight: 600;
}

/* Explicit grid columns (not flex + space-between) so that when a trick
   pins one button to position:fixed and removes it from normal flow, the
   OTHER button keeps its own assigned column instead of re-centering
   into the gap — that re-centering was the cause of the buttons visibly
   overlapping the instant a dodge/swap trick engaged. */
.answer-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: clamp(140px, 30vh, 200px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.answer-btn {
  position: static;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px clamp(24px, 6vw, 40px);
  border-radius: 18px;
  border: none;
  font-size: clamp(1rem, 3.5vw, 1.1rem);
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  will-change: left, top, transform;
  touch-action: manipulation;
  user-select: none;
}

.answer-btn.yes {
  grid-column: 1;
  justify-self: start;
  background: linear-gradient(to bottom, var(--yes-light), var(--yes));
  box-shadow: 0 5px 0 var(--yes-edge), 0 10px 18px rgba(36, 28, 21, 0.16);
}

.answer-btn.no {
  grid-column: 2;
  justify-self: end;
  background: linear-gradient(to bottom, var(--no-light), var(--no));
  box-shadow: 0 5px 0 var(--no-edge), 0 10px 18px rgba(36, 28, 21, 0.16);
}

.result-box {
  position: relative;
  text-align: center;
  padding: 40px 20px;
}

/* The card that's both shown on the page and snapshotted (via
   html2canvas) for download/share — same element, so what you see is
   exactly what gets shared, no separate rendering to keep in sync. */
.share-card {
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 2px solid var(--secondary-edge);
  border-radius: 24px;
  padding: clamp(18px, 4vw, 28px);
  box-shadow: var(--shadow);
  text-align: center;
}

.share-card-title {
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  margin: 0 0 10px;
}

.share-card-punchline {
  font-size: 1rem;
  color: var(--text-dim);
  margin: 0 0 24px;
}

.share-card-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 16px;
  align-items: stretch;
  text-align: left;
}

/* Brand signature line, same on every card regardless of quiz content —
   a bit of free brand reinforcement whenever a card gets shared around. */
.share-card-tagline {
  margin: 20px 0 0;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
}

.share-card-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.share-card-qa {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--secondary-edge);
  border-radius: 16px;
  padding: 14px;
}

.share-card-qa .q {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text);
}

.share-card-qa .a {
  align-self: flex-start;
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
}

/* background-image + background-size:cover instead of an <img> with
   object-fit:cover — html2canvas has incomplete/buggy support for
   object-fit (images render stretched in the exported snapshot even
   though they look correct on the live page), but handles CSS
   background-size reliably. */
.share-card-photo {
  border: 2px solid var(--secondary-edge);
  border-radius: 16px;
  min-height: 220px;
  padding: 22px;
  background-color: var(--bg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  /* background-origin:content-box (not the padding-box default) makes
     background-size:contain calculate against the inner content area, so
     the padding is a real visible gap between the image and the box edge
     instead of space the image would otherwise paint over — it needs to be
     generous, not just a couple of px, since contain always scales the
     image flush to one axis of that content area. background-clip stays
     the border-box default (not content-box) so background-color still
     fills that padding ring with cream instead of leaving it to show
     whatever's behind the card. */
  background-origin: content-box;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .share-card-grid {
    grid-template-columns: 1fr;
  }

  .share-card-photo {
    order: -1;
    min-height: 260px;
  }
}

/* The downloadable/shared image is always rendered from this fixed-width
   offscreen clone (see renderCardCanvas() in result.php), never the live
   on-page card — so the shared image is a consistent landscape layout no
   matter what device generated it. The @media rule above keys off the
   *viewport*, not this element's own width, so a visitor on a narrow phone
   would otherwise still get the mobile stacked layout in the export; these
   overrides force the desktop layout regardless. */
.share-card--export {
  width: 800px;
  max-width: none;
  /* .share-card/.share-card-title normally size via clamp(..., 4vw, ...),
     which resolves against the visitor's actual viewport, not this fixed-
     width clone — pinned here to their upper bound (the intended "full
     size" look) so the export is byte-for-byte the same regardless of
     what device generated it. */
  padding: 28px;
}

.share-card--export .share-card-title {
  font-size: 1.9rem;
}

.share-card--export .share-card-grid {
  grid-template-columns: 1fr 1.1fr 1fr !important;
}

.share-card--export .share-card-photo {
  order: 0 !important;
  min-height: 220px !important;
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

/* Icon files come from a Flaticon pack (downloaded manually — Flaticon
   doesn't allow hotlinking) at /assets/img/icons/{name}.png. They're
   self-colored circular badges (own background baked into the image),
   so the button itself has no background/border of its own — just the
   bare icon with a small hover lift. */
.icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  font-family: inherit;
  transition: transform 0.1s ease;
}

.icon-btn:hover {
  transform: translateY(-2px);
}

.icon-btn .icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon-btn .icon-fallback {
  display: none;
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
}

/* Only shown if a given icon file is missing — puts the fallback text
   on a visible neutral circle instead of invisible bare text. */
.icon-btn.icon-missing {
  border-radius: 50%;
  border: 2px solid var(--secondary-edge);
  background: var(--bg-card);
  box-shadow: 0 4px 10px rgba(36, 28, 21, 0.1);
}

.share-hint {
  font-size: 0.85rem;
  color: var(--text-dim);
  max-width: 480px;
  margin: 14px auto 0;
}

.my-quizzes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.my-quiz-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.my-quiz-row.expired {
  opacity: 0.5;
}

/* Flags a quiz that's been completed since the owner last looked at this
   list — cleared automatically once they load the page (see index.php). */
.new-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.stats {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.stat-positive {
  color: var(--yes-edge);
  font-weight: 700;
}

.my-quiz-row a svg {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-right: 3px;
}

.back-link svg {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-right: 3px;
}

.error-box {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-dim);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .container {
    padding: 24px 14px 60px;
  }

  .site-header {
    padding: 14px;
  }

  .card {
    padding: 16px;
  }

  .answer-stage {
    max-width: 100%;
  }
}